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
-
Aplikacja bazy danych z JavaScript
Zadanie: Zbuduj prostą aplikację, która wykorzystuje IndexedDB nowoczesnych przeglądarek do przechowywania danych. -
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. -
Countdown Timer with JavaScript
Zadanie: Zbuduj prostą funkcję, w której użytkownicy mogą wprowadzić liczbę sekund, a funkcja rozpocznie odliczanie. -
Quiz App with JavaScript
Zadanie: Zbuduj prostą aplikację quizu, w której użytkownicy mogą zaznaczać pola wyboru dla właściwych rozwiązań. -
Aplikacja stopera z JavaScript
Zadanie: Zbuduj prostą funkcję stopera, w której użytkownicy mogą uruchamiać i zatrzymywać stoper. -
Aplikacja notatek z JavaScript
Zadanie: Stworzyć aplikację, w której użytkownicy będą mogli robić i zarządzać notatkami. -
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. -
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. -
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. -
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
-
Konwerter walut z JavaScript
Zadanie: Zbudować aplikację do przeliczania jednej waluty na inną. -
Drawing App with JavaScript
Zadanie: Użytkownicy powinni mieć możliwość rysowania prostych form i obrazów w oknie przeglądarki. -
Emoji App with JavaScript
Zadanie: Zbudować aplikację, w której użytkownicy będą mogli wyszukiwać emojis i kopiować je do schowka. -
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. -
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. -
Skaner obrazów z JavaScript
Zadanie: Zbudować aplikację, która odczytuje i wizualizuje metadane wgrywanych obrazów. -
To-Do App with JavaScript
Zadanie: Stwórz aplikację do zarządzania zadaniami do wykonania. -
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ć. -
Flashcards App with JavaScript
Zadanie: Zbuduj aplikację, w której użytkownicy będą mogli tworzyć flashcards, aby inni mogli uczyć się nowych rzeczy. -
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
-
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. -
Aplikacja ankietowa z JavaScript
Zadanie: Użytkownicy powinni mieć możliwość tworzenia ankiet dla innych, którzy mogą je następnie wypełniać. -
Chat App with JavaScript
Zadanie: Użytkownik powinien mieć możliwość czatowania ze sobą w czasie rzeczywistym. -
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. -
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. -
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. -
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. -
Analytics App with JavaScript
Zadanie: Stwórz aplikację do śledzenia zachowań użytkowników na stronie internetowej, takich jak odwiedziny, bounce rate, itp. -
Aplikacja wideo z JavaScript
Zadanie: Stworzyć aplikację, w której użytkownicy będą mogli przesyłać i oglądać filmy. -
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🥰