Bądźmy szczerzy od samego początku. Nieważne ile książek o programowaniu przeczytasz, filmów obejrzysz, czy podcastów posłuchasz, jeśli chcesz stać się lepszym programistą, musisz ciągle ćwiczyć.

W przestrzeni front-end istnieje wiele frameworków: React, Angular, Vue, żeby wymienić tylko kilka. Każdy z nich jest świetny i bez nich, front-end development nie byłby w obecnym stanie. Ale to, co te frameworki, oprócz wszystkich różnic, mają wspólnego, to fakt, że wszystkie są oparte na JavaScript. Yep, good ol' JS!

JavaScript jest tym, co napędza sieć dzisiaj, bez wątpienia. I dla każdego front-end developera, nie ważne czy już doświadczonego czy na początku swojej kariery, obowiązkowa jest znajomość podstaw JavaScript, HTML i CSS.

Frameworki przychodzą i odchodzą, ale JavaScript pozostanie! Ale jaki jest najlepszy sposób, aby ćwiczyć JavaScript? Najlepszą odpowiedzią jaką mogę wam dać jest budowanie projektów!

Projekty JavaScript

Projekty JavaScript są samouczkami lub pomysłami na projekty javascript, które pomogą wam wyostrzyć wasze umiejętności poprzez budowanie prawdziwych aplikacji, stron internetowych, gier, komponentów, itp. Czasami znajdziesz pomysły na projekty, które zawierają tylko tytuł i kilka zdań o tym, co powinieneś zbudować.

Przykład: Zbuduj licznik z JavaScriptem, który odlicza godziny do końca roku.

Ten format jest dobry, jeśli masz już jakieś doświadczenie i po prostu szukasz jakiegoś wkładu.

Projekty JavaScript dla początkujących

Jednakże, jeśli jesteś początkujący w tworzeniu stron internetowych, często lepiej jest szukać przykładów projektów JavaScript z kodem źródłowym lub konkretnych projektów JavaScript dla początkujących. Często zawierają one działającą aplikację demo, repozytorium GitHub z kodem źródłowym oraz przewodnik krok po kroku, jak zbudować projekt.

Projekty praktyczne JavaScript

Więc, abyś mógł zdobyć praktykę, wymieniłem dziewięć świetnych pomysłów na projekty javascript, które możesz wykonać, aby odświeżyć swoje umiejętności, nauczyć się nowych rzeczy o JS i pozostać istotnym w przyszłości. Wszystkie z nich są oparte na czystym JavaScript, trochę HTML i trochę CSS. Możesz dodać je do swojego portfolio, pokazać je rekruterom lub potencjalnym pracodawcom, albo zachować je w swoim GitHubie jako referencje do przyszłej pracy. Żeby było jasne: To nie jest przeznaczone do nauczenia Cię wszystkiego o JavaScript. Istnieją doskonałe kursy dla Ciebie obejmujące JS od A-Z. To jest do budowania rzeczy. Do brudzenia sobie rąk. Praca nad pamięcią mięśniową.

Przegląd projektów JavaScript

  • Zbuduj aplikację do medytacji Projekt JavaScript
  • Zbuduj wirtualną klawiaturę Projekt JavaScript
  • Zbuduj koszyk e-commerce Projekt JavaScript
  • Zbuduj aplikację pogodową Projekt JavaScript
  • Zbuduj projekt JavaScript Issue Tracker
  • Zbuduj projekt JavaScript PIN Pad
  • Zbuduj projekt JavaScript Landing Page
  • Zbuduj projekt JavaScript Rock Paper Scissors Game
  • Zbuduj projekt JavaScript Tic Tac Toe Game
  • Bonus: Build 9-in-1 Mini JavaScript Projects
  • Bonus: JavaScript Beginner Project Ideas
  • Bonus: JavaScript Intermediate Project Ideas
  • Bonus: JavaScript Advanced Project Ideas

Aby dać ci przewagę, oceniłem dla ciebie te projekty tutoriali. Ale to tylko moja opinia, więc gorąco polecam, abyś sam je wypróbował, ponieważ wiesz jak uczyć się najlepiej i na jakim poziomie obecnie jesteś.

Zbuduj aplikację do medytacji

Co zbudujesz

Zbudujesz aplikację, która dostarcza dźwięk otoczenia do medytacji. Użytkownicy mogą wybierać pomiędzy różnymi timerami i dźwiękami.

Ocena

Tutorial wykorzystuje Vanilla JavaScript, dokładnie to do czego dążymy. Głos instruktora, jak również jego instrukcje, są jasne i łatwe do zrozumienia. Ponadto, dowiesz się, jak manipulować dźwiękiem i wideo z JS. To jest zabawny projekt javascript, który naprawdę lubię.

5/5 gwiazdek

Zbuduj wirtualną klawiaturę

Co zbudujesz

Zbudujesz wirtualną klawiaturę od podstaw z Vanilla JS, HTML i CSS, która może być używana w przeglądarce i będzie responsywna i gotowa na dotyk!

Ocena

Podoba mi się oryginalność tego projektu, jest to świetny pomysł na projekt javascript. Nie stworzyłem wcześniej wirtualnej klawiatury, więc zrobienie tego przy użyciu tylko JavaScript, HTML i CSS było dla mnie naprawdę świetnym doświadczeniem. Głos instruktora jest wyraźny i wyjaśnia rzeczy całkiem dobrze.

5/5 gwiazdek

Zbuduj koszyk na zakupy eCommerce

Co zbudujesz

Zbudujesz koszyk na zakupy, który może być używany w sklepach internetowych i stronach eCommerce z Vanilla JS, HTML i CSS. Instruktor korzysta z Contentful, który jest bezgłowym systemem CMS do przechowywania informacji o produktach. Nauka jak radzić sobie z Contentful lub ogólnie bezgłowym CMS-em nie jest głównym celem tego kursu, ale jest to świetna usługa, więc nie pożałujesz, że zobaczysz ją w akcji.

Ocena

Nagranie tego tutoriala jest naprawdę długie. Z jednej strony robi to wrażenie, ale z drugiej strony jest też trochę pracochłonne. Głos prowadzącego jest wyraźny i dobry do zrozumienia. Czasami trochę ciężko za nim nadążyć, ale to pewnie przez złożoność tego projektu. Więc jest to raczej średnio zaawansowany projekt js.

4/5 gwiazdek

Zbuduj aplikację pogodową

Co zbudujesz

Ten projekt nauczy Cię jak zbudować aplikację pogodową z Vanilla JS, HTML i CSS. Instruktor używa Dark Sky API do pobierania informacji o pogodzie, co jest świetną okazją do nauczenia się interakcji z API, kolejną wspaniałą rzeczą jaką możesz zrobić z javascript.

Ocena

To może być dobre rozwiązanie dla twojego portfolio. Jeśli już zrobiłeś projekt 1., znasz już instruktora i mogę ci powiedzieć, że znowu dostarcza wysokiej jakości. Wygląda na to, że naprawdę wie jak uczyć w zrozumiały i zabawny sposób.

5/5 gwiazdek

Zbuduj Issue Tracker

Co zbudujesz

W tym tutorialu zbudujesz issue tracker, który może być użyty na dowolnej stronie do tworzenia problemów (na przykład z oprogramowaniem) z Vanilla JS, HTML i CSS. Może to być również dobry dodatek do Twojego portfolio i doskonały projekt javascriptowy dla początkujących!

Ocena

Instruktor ma jasną koncepcję tego, co chce z Tobą zbudować. Jego głos jest jasny i dobry do zrozumienia, a ten projekt jest projektem dla początkujących javascript.

4/5 gwiazdek

Buduj PIN Pad

W tym projekcie javascript, będziesz budował PIN Pad, który działa w przeglądarce i ma funkcjonalność sprawdzania kodów PIN pod kątem ich poprawności. Instruktor używa tylko Vanilla JS, HTML i CSS dla tego tutoriala. Jest to naprawdę świetny pomysł na projekt javascript dla początkujących, więc na pewno chcesz to sprawdzić!

Ocena

Uważam, że jest to bardzo kreatywny projekt pokazujący, do czego zdolny jest Vanilla JavaScript. Instruktor wykonuje dobrą robotę wyjaśniając wszystko jasno i w łatwy do wykonania sposób. To jest fajny projekt javascriptowy i miałem dużo zabawy robiąc go.

4/5 gwiazdek

Zbuduj stronę docelową

Co zbudujesz

Brad pokaże Ci jak zbudować interaktywną stronę docelową, która pokazuje czas i imię użytkownika. Aplikacja używa lokalnej pamięci masowej do przechowywania nazwy, więc miło jest to zaobserwować.

Ocena

Brad jest znany z kompletnych i wyjątkowych tutoriali. Ten jest raczej krótki i powiedziałbym uproszczony, ale używa tylko JavaScript, HTML i CSS i dlatego jest doskonałym projektem ćwiczeniowym dla początkujących.

4/5 gwiazdek

Zbuduj grę Rock Paper Scissors

To co zbudujesz

Budowanie gier może być zabawnym sposobem na naukę nowych rzeczy. JavaScript oferuje wielkie możliwości tworzenia gier opartych na przeglądarce. W tym projekcie, będziesz tworzył klasyczną grę rock paper scissors przy użyciu JavaScript.

Ocena

Tak jak w projekcie 1, instruktor wykonuje dobrą robotę w tym tutorialu. Jest zabawny i można za nim dobrze podążać. I znowu, ten projekt jest oparty na Vanilla JavaScript i jest to dobry projekt javascriptowy dla początkujących!

4/5 gwiazdek

Zbuduj grę Tic Tac Toe

Co zbudujesz

W tym projekcie, zbudujesz grę tic tac toe, która jest zabawnym, ale również złożonym ćwiczeniem, ponieważ używa podstawowych AI i algorytmów. Ale poza tym, wszystko jest zrobione przy użyciu Vanilla JS, HTML i CSS.

Ocena

Ten projekt ma dobry rozmiar, jasną strukturę i jest zabawny do zbudowania. Głos instruktora jest wyraźny i łatwo za nim nadążyć. Wyjaśnienia są naprawdę dobre, i powinieneś czuć się całkiem dobrze na końcu.

5/5 gwiazdek

Bonus: Zbuduj 9-w-1 Mini Projekty

Co zbudujesz

To jest mały bonus, który chciałem ci zaprezentować: jedno nagranie, które zawiera dziewięć małych, niezależnych projektów javascript, na których możesz ćwiczyć swoje umiejętności JavaScript, HTML i CSS. Może będziesz mógł użyć niektórych z tych snippetów na swojej własnej stronie?

Ocena

Podoba mi się pomysł posiadania wielu małych snippetów w jednym nagraniu. Głos instruktora mógłby być bardziej wyraźny, i czasami trochę trudno za nim nadążyć.

3/5 gwiazdek

Więcej pomysłów na projekty JavaScript

To są bez wątpienia świetne projekty do naśladowania. Jeśli chcesz stworzyć coś na własną rękę bez podążania za tutorialem krok po kroku, mam jeszcze kilka pomysłów na projekty javascript, które możesz zbudować:

Początkowe projekty JavaScript

  1. Aplikacja bazy danych z JavaScript
    Zadanie: Zbuduj prostą aplikację, która wykorzystuje IndexedDB nowoczesnych przeglądarek do przechowywania danych.

  2. JSON to CSV Converter with JavaScript
    Zadanie: Zbudować prostą aplikację, w której użytkownicy będą mogli wkleić ciąg JSON lub przesłać plik JSON. Aplikacja powinna przekonwertować dane wejściowe na CSV i wyświetlić je użytkownikowi.

  3. Countdown Timer with JavaScript
    Zadanie: Zbuduj prostą funkcję, w której użytkownicy mogą wprowadzić liczbę sekund, a funkcja rozpocznie odliczanie.

  4. Quiz App with JavaScript
    Zadanie: Zbuduj prostą aplikację quizu, w której użytkownicy mogą zaznaczać pola wyboru dla właściwych rozwiązań.

  5. Aplikacja stopera z JavaScript
    Zadanie: Zbuduj prostą funkcję stopera, w której użytkownicy mogą uruchamiać i zatrzymywać stoper.

  6. Aplikacja notatek z JavaScript
    Zadanie: Stworzyć aplikację, w której użytkownicy będą mogli robić i zarządzać notatkami.

  7. Konwerter dolarów na centy z JavaScript
    Zadanie: Użytkownicy powinni mieć możliwość wpisania liczby dolarów, a aplikacja przedstawi im wartość w centach.

  8. Zegar Pomodoro z JavaScript
    Zadanie: Zbudować aplikację, w której użytkownicy będą mogli tworzyć timery pracy (25min), timery przerwy (5min) oraz funkcje pozwalające na uruchamianie/zatrzymywanie/resetowanie tych timerów.

  9. Recipe App with JavaScript
    Zadanie: Stwórz aplikację, w której użytkownicy będą mogli znaleźć przepisy z różnych kategorii. Bonus: Zintegruj API przepisów.

  10. Generator Lorem Ipsum z JavaScript
    Zadanie: Stwórz aplikację lub komponent, który generuje tekst Lorem Ipsum zgodnie z długością, jaką zażyczy sobie użytkownik.

Pośrednie projekty JavaScript

  1. Konwerter walut z JavaScript
    Zadanie: Zbudować aplikację do przeliczania jednej waluty na inną.

  2. Drawing App with JavaScript
    Zadanie: Użytkownicy powinni mieć możliwość rysowania prostych form i obrazów w oknie przeglądarki.

  3. Emoji App with JavaScript
    Zadanie: Zbudować aplikację, w której użytkownicy będą mogli wyszukiwać emojis i kopiować je do schowka.

  4. Meme Generator with JavaScript
    Zadanie: Zbuduj aplikację, w której użytkownicy będą mogli przesyłać obrazki, dodawać do nich tekst i zapisywać & ich pobranie.

  5. Generator haseł z JavaScript
    Zadanie: Użytkownicy powinni mieć możliwość tworzenia losowych haseł z różnymi zestawami reguł, takimi jak długość, trudność, znaki itp.

  6. Skaner obrazów z JavaScript
    Zadanie: Zbudować aplikację, która odczytuje i wizualizuje metadane wgrywanych obrazów.

  7. To-Do App with JavaScript
    Zadanie: Stwórz aplikację do zarządzania zadaniami do wykonania.

  8. Voting App with JavaScript
    Zadanie: Stworzyć aplikację, w której użytkownicy będą mogli tworzyć ankiety, na które inni będą mogli głosować.

  9. Flashcards App with JavaScript
    Zadanie: Zbuduj aplikację, w której użytkownicy będą mogli tworzyć flashcards, aby inni mogli uczyć się nowych rzeczy.

  10. Book Finder App with JavaScript
    Zadanie: Stwórz aplikację, w której użytkownicy będą mogli wyszukiwać książki według różnych kryteriów, takich jak autor, rok, treść, rekomendacje itp. Bonus: Zintegruj API książek.

Zaawansowane projekty JavaScript

  1. Aplikacja filmowa z JavaScript
    Zadanie: Użytkownicy powinni być w stanie przeglądać filmy, widzieć oceny, znajdować aktorów, otrzymywać rekomendacje. Bonus: Zintegrować filmowe API.

  2. Aplikacja ankietowa z JavaScript
    Zadanie: Użytkownicy powinni mieć możliwość tworzenia ankiet dla innych, którzy mogą je następnie wypełniać.

  3. Chat App with JavaScript
    Zadanie: Użytkownik powinien mieć możliwość czatowania ze sobą w czasie rzeczywistym.

  4. Klon Instagrama z JavaScript
    Zadanie: Użytkownicy powinni być w stanie doświadczyć podobnych funkcji, które posiada Instagram. Na przykład przesyłanie zdjęć, tagowanie, polubienia itp.

  5. Klon Twittera z JavaScript
    Zadanie: Użytkownicy powinni być w stanie doświadczyć podobnych funkcji, że Twitter ma. Na przykład przesyłanie zdjęć, tagowanie, polubienia, itp.

  6. Klon Pinterest z JavaScript
    Zadanie: Użytkownicy powinni być w stanie doświadczyć podobnych funkcji, które ma Pinterest. Na przykład wgrywanie zdjęć, kolekcje, polubienia, itp.

  7. Aplikacja do handlu stockami z JavaScript
    Zadanie: Użytkownicy powinni mieć możliwość oglądania wykresów i kupowania akcji (mogą być oczywiście symulowane). Bonus: Zintegrować API giełdowe.

  8. Analytics App with JavaScript
    Zadanie: Stwórz aplikację do śledzenia zachowań użytkowników na stronie internetowej, takich jak odwiedziny, bounce rate, itp.

  9. Aplikacja wideo z JavaScript
    Zadanie: Stworzyć aplikację, w której użytkownicy będą mogli przesyłać i oglądać filmy.

  10. File Sharing App with JavaScript
    Zadanie: Użytkownik powinien być w stanie przesyłać pliki z lub bez rejestracji.

Dobrym pomysłem jest udokumentowanie tego, kiedy budujesz projekt i podzielenie się tym ze społecznością!

W porządku, to wszystko na razie. I jestem pewien, że nie możesz się doczekać, aby zacząć korzystać z tych wspaniałych tutoriali. Ale pozwól, że powiem ci jeszcze jedną rzecz. Oglądanie filmów i kodowanie razem z nimi jest dobrym sposobem na nauczenie się rzeczy i zdobycie praktyki. Jednak najwięcej skorzystasz z nich, jeśli dodasz do projektów własne smaczki – ulepszysz je, zmienisz, połączysz, poprawisz. Albo jeszcze lepiej: Zrób swój własny projekt i udokumentuj jego wykonanie. Nauczysz się wiele, a inni będą ci za to wdzięczni!

Jeśli podoba ci się to, co piszę i chcesz wspierać mnie i moją pracę, śledź mnie na Twitterze, aby dowiedzieć się więcej o programowaniu, tworzeniu, pisaniu & careers🥰

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *