20 projektów webowych dla początkujących (z kodem startowym)

Projekty webowe dla początkujących

20 projektów webowych dla początkujących, z kodem startowym | We.Inc

20 projektów dla początkujących w HTML, CSS, JavaScript i React. Przy każdym opisujemy, czego uczy, i dajemy krótki kod startowy, który wkleisz i rozbudujesz.

Zacznij od projektów, z których każdy uczy jednej nowej rzeczy: strona o sobie do HTML i CSS, licznik i lista zadań do zdarzeń i stanu w JavaScript, potem aplikacja pogodowa lub quiz do fetch i JSON. Przejdź do React, gdy czysty JavaScript stanie się łatwy. Każdy projekt poniżej ma kod startowy, który wkleisz i rozbudujesz.

Rozsądna kolejność

Listy projektów dla początkujących zwykle kończą się na tytule. Każdy projekt tutaj mówi, jaką umiejętność ćwiczy, ile mniej więcej zajmuje i daje kilka linijek działającego kodu na start, więc pierwszą godzinę spędzasz na budowaniu, a nie na patrzeniu w pusty plik. Filtruj według poziomu lub języka, który chcesz ćwiczyć.

Najczęściej zadawane pytania

Jaki powinien być mój pierwszy projekt webowy?

Jednostronicowy profil o Tobie w czystym HTML i CSS. Nie wymaga niczego poza edytorem tekstu i przeglądarką, a obejmuje nagłówki, akapity, linki, obrazy i podstawowe style.

Czy aplikacja todo jest zbyt prosta do portfolio?

Sama w sobie tak, bo buduje ją prawie każdy uczący się. Uczyń ją swoją: dodaj terminy, filtry, zmianę kolejności przeciąganiem lub zapis w localStorage i napisz krótką notkę, co byś poprawił.

Kiedy uczyć się React?

Gdy potrafisz bez tutoriala zbudować w czystym JavaScript licznik, listę zadań i aplikację opartą na fetch. React ma dużo więcej sensu, gdy odczujesz ból ręcznego aktualizowania DOM.

Czy te projekty potrzebują backendu?

Nie. Wszystkie dwadzieścia działają w przeglądarce. Projekty z danymi wywołują darmowe publiczne API lub lokalny plik JSON, a projekty z zapisem używają localStorage, który przechowuje dane tekstowe w przeglądarce bez terminu wygaśnięcia.

Ile projektów potrzebuję, zanim zacznę szukać pracy?

Nie ma stałej liczby. Trzy lub cztery ukończone, dopracowane projekty pokazujące różne umiejętności zwykle mówią więcej niż dwadzieścia zrobionych do połowy.

Wybieraj projekty według umiejętności, nie tematu

Zadbaj, by każdy dobrze wyglądał

Pusty plik startowy

Zapisz to jako index.html, otwórz w przeglądarce i wklej dowolny projekt HTML do sekcji body.

Zawiera znacznik viewport, aby telefony wyświetlały stronę we właściwym rozmiarze, oraz znacznik script dla projektów w JavaScript.

Osobista strona profilu

Początkujący

HTML/CSS

1 do 2 godzin

Struktura strony, nagłówki, obrazy, linki

Dodaj ciemny motyw z prefers-color-scheme.

Strona z przepisem

Początkujący

HTML/CSS

1 godzina

Listy numerowane i punktowane, semantyczne sekcje

Dodaj arkusz stylów do druku, który ukrywa zdjęcie.

Landing page produktu

Początkujący

HTML/CSS

3 godziny

Flexbox, odstępy, przyciski, responsywny tekst

Spraw, by rząd funkcji układał się w kolumnę poniżej 600px.

Responsywna siatka zdjęć

Początkujący

HTML/CSS

1 godzina

CSS grid, auto-fit, object-fit

Otwieraj większy podgląd po kliknięciu zdjęcia.

Dostępny formularz rejestracji

Początkujący

HTML/CSS

2 godziny

Etykiety, typy pól, wbudowana walidacja

Pokaż własny komunikat błędu pod każdym polem.

Licznik kliknięć

Początkujący

JavaScript

30 minut

Wybieranie elementów, zdarzenia kliknięcia, aktualizacja tekstu

Dodaj przycisk resetu i zatrzymaj na zerze.

Lista zadań

Początkujący

JavaScript

2 godziny

Wysyłanie formularza, tablice, renderowanie listy

Zapisuj zadania, aby przetrwały przeładowanie.

Kalkulator napiwków

Początkujący

JavaScript

1 godzina

Zdarzenia input, liczby, formatowanie kwot

Podziel rachunek między kilka osób.

Przełącznik jasny i ciemny

Początkujący

JavaScript

45 minut

Przełączanie klas, zapisywanie preferencji

Przy pierwszej wizycie używaj ustawienia systemowego.

Minutnik odliczający

Średniozaawansowany

JavaScript

1 godzina

setInterval, daty, czyszczenie timerów

Pozwól użytkownikowi wybrać datę docelową.

Quiz jednokrotnego wyboru

Średniozaawansowany

JavaScript

3 godziny

Dane w tablicach obiektów, punktacja, stan

Tasuj pytania i pokaż pasek postępu.

Notatki zapisywane w przeglądarce

Średniozaawansowany

JavaScript

2 godziny

localStorage, JSON.stringify i JSON.parse

Dodaj wyszukiwanie i przycisk usuwania przy każdej notatce.

Aplikacja pogodowa

Średniozaawansowany

API

3 godziny

fetch, async/await, stany błędów

Pokaż komunikat ładowania i przyjazny komunikat błędu.

Karta profilu GitHub

Średniozaawansowany

API

2 godziny

Odczyt pól JSON, budowanie kart z danych

Wypisz pięć najnowszych repozytoriów użytkownika.

Filtr wyszukiwania na żywo

Średniozaawansowany

JavaScript

1 godzina

Filtrowanie tablic, zdarzenia input, puste stany

Wyróżnij pasujące litery.

Licznik w React

Kolejny krok

React

30 minut

Komponenty, useState, obsługa zdarzeń

Dodaj pole wielkości kroku.

Aplikacja todo w React

Kolejny krok

React

3 godziny

Listy z kluczami, kontrolowane pola, niemutowalne aktualizacje

Dodaj filtry Wszystkie, Aktywne i Zrobione.

Katalog użytkowników w React

Kolejny krok

React

2 godziny

useEffect, stany ładowania i błędu

Dodaj pole wyszukiwania filtrujące po nazwie.

Mini tablica kanban

Kolejny krok

React

4 godziny

Wynoszenie stanu w górę, przenoszenie elementów między listami

Dodaj przeciąganie i upuszczanie między kolumnami.

Rejestr wydatków

Kolejny krok

React

4 godziny

Wartości pochodne, reduce, formularze z kilkoma polami

Pokaż wydatki według kategorii na wykresie.

20 projektów

Filtruj według poziomu lub umiejętności, a potem otwórz projekt, aby zobaczyć kod startowy.

Filtruj według poziomu

Filtruj według umiejętności

Pokazano {n} z {total} projektów

Kopiuj

{level} · {skill} · {time}. Uczy: {teaches}. Cel dodatkowy: {stretch}

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

Produkt

Dla kogo

Funkcje

Zasoby

Firma

Mapa strony