Krok 1
Ścieżka nauki
Roadmapa frontend developera
Darmowe kursy w kolejności, w jakiej frontend developer naprawdę ich potrzebuje: HTML do struktury, CSS do układu, JavaScript do zachowania, TypeScript dla bezpieczeństwa, React i Next.js do prawdziwych aplikacji, Git do wdrażania i osiem projektów, które to potwierdzają. Każda lekcja działa w przeglądarce, a każdy kurs przed krokiem z projektami kończy się darmowym certyfikatem.
663,032+ osób zapisanych na te kursy
804 lekcje681 wyzwania3,184 pytania quizowe
- Dla początkujących
Pomoc AI przy programowaniu
Praktyczne, interaktywne lekcje
Narracja audio w każdej lekcji
Quizy sprawdzające wiedzę
Darmowe certyfikaty na tej ścieżce: 13
Ścieżka frontend developera krok po kroku
Każdy krok to istniejący kurs Coddy. Przechodź je po kolei albo wskocz do tego, którego ci brakuje. Postęp i tak zapisuje się osobno dla każdego kursu.
- 1
- 2Krok 2
CSS: układ i wyglądOsobna strona
Zacznij ten krokZacznijSelektory, model pudełkowy, kolory i typografia, a potem flexbox, grid, układy responsywne, przejścia i animacje w dwóch działach. To krok, w którym strona zaczyna wyglądać jak te, z których korzystasz.ZacznijOsobna stronaSekcje po kolei: 2 - 3Krok 3
JavaScript, cały językOsobna strona
Zacznij ten krokZacznijPodstawy, logika i sterowanie przepływem, a potem obiekty i klasy, w trzech działach. Praca na frontendzie to praca w JavaScript. Każdy framework po tym kroku to tylko sposób na uporządkowanie tego kodu, czytelny dopiero wtedy, gdy zna się język.ZacznijOsobna stronaSekcje po kolei: 3 - 4Krok 4
JavaScript w przeglądarceOsobna strona
Zacznij ten krokZacznijDOM, zdarzenia, pobieranie danych i budowanie interaktywnych stron bez frameworka, a potem praktyczne wzorce frontendowe. Tutaj HTML, CSS i JavaScript stają się jednym: stroną, która reaguje na działania użytkownika.ZacznijOsobna stronaSekcje po kolei: 2 - 5Krok 5
TypeScriptOsobna strona
Zacznij ten krokZacznijTypy, interfejsy, typy generyczne i błędy kompilatora jako narzędzie. Prawie każdy profesjonalny projekt w React to TypeScript, więc pojawia się on tuż przed frameworkiem, a nie jako dodatek na końcu.ZacznijOsobna strona - 6Krok 6
React i Next.jsOsobna strona
Zacznij ten krokZacznijKomponenty, propsy, stan, hooki i renderowanie, a potem Next.js do routingu, ładowania danych i prawdziwych aplikacji. Framework wymieniany w większości ofert pracy na frontendzie, nauczany po języku, w którym jest napisany.ZacznijOsobna stronaSekcje po kolei: 2 - 7Krok 7
Git i kontrola wersjiOsobna strona
Zacznij ten krokZacznijCommity, gałęzie, scalanie, rozwiązywanie konfliktów i zdalne repozytoria. Każda praca na frontendzie i każdy projekt do portfolio żyje w repozytorium Git. Nauka Gita w tym miejscu sprawia, że projekty z następnego kroku wdrażasz tak, jak robi się to w prawdziwej pracy.ZacznijOsobna strona - 8Krok 8
Projekty: zbuduj to, co znasz z sieci
Zacznij ten krokZacznijĆwiczenia z flexboxa i selektorów, praktyka z DOM i metodami tablic, a potem prawdziwe projekty: karta profilu Coddy, strona Instagrama, strona logowania Netflixa i slider obrazów. Każdy z nich to element portfolio, który rekruter może otworzyć.ZacznijKursy po kolei: 8- CSS Flexbox — kompletny kursTylko html15 lekcje
- Selektory CSSTylko html15 lekcje
- Metody DOM w JavaScriptTylko html13 lekcje
- Metody tablic w JavaScriptTylko javascript18 lekcje
- Klon karty profilu Coddy | Projekt front-endowyTylko html26 lekcje
- Klon strony Instagram | Projekt front-endTylko html16 lekcje
- Klon strony logowania Netflix | Projekt front-endowyTylko html19 lekcje1 wyzwania
- Slider | Projekt front-endowyTylko html23 lekcje1 wyzwania
Co dostajesz
Wszystko, czego potrzebujesz do nauki programowania
Ucz się w praktyce
Pisz prawdziwy kod, odpytuj bazy danych, twórz strony internetowe i opanuj prompty AI. Nasze interaktywne lekcje obejmują wszystkie umiejętności, których potrzebuje współczesny programista.
playground.js
Edytor kodu
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Dane wejściowe
"Alex"
Wynik
"Hello, Coddy! Alex"
Buduj swoją serię
Ucz się regularnie i patrz, jak rosną twoje postępy! Śledź codzienny nawyk programowania, chroń serię dzięki zamrożeniom i zdobywaj nagrody za każdy dzień nauki.
12 dni serii
Wróć jutro, aby utrzymać serię!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
Podwójnie albo nic
Dzień 5 z 7
Zamrożenie serii
2 left
Programuj wszędzie
Zabierz naukę programowania ze sobą! Bez konfiguracji i pobierania plików: po prostu otwórz i zacznij kodować. Dostępne na iOS, Androida i w przeglądarce, z oceną 4,9 gwiazdki.
7
250
5
Zmienne
KONTYNUUJ
4.9
Ocena
Nie uczysz się w pojedynkę
Rywalizuj w globalnych rankingach, zapraszaj znajomych po nagrody i świętujcie wspólnie swoje sukcesy. Z przyjaciółmi programuje się lepiej!
Liga ChallengerAwansuje 7 najlepszych
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Strefa awansuKażdy sposób nauki
Czytaj, słuchaj, sprawdzaj się, pytaj AI albo wracaj do tego, co już znasz. Każda lekcja dopasowuje się do ciebie.
Wprowadzenie do zmiennych
Audio
Zmienna to nazwany pojemnik przechowujący wartość, do której możesz później odwołać się w programie.
W Pythonie tworzysz ją, pisząc nazwę, znak równości, a potem wartość, którą chcesz zapisać.
Wartość może się zmieniać: ponowne przypisanie po prostu wskazuje nazwą nową wartość.
1xZofia
Zdobądź certyfikat
Zdobywaj certyfikaty za każdy ukończony kurs. Dodaj je do profilu na LinkedIn i CV, aby pokazać pracodawcom swoje umiejętności programistyczne.
Certyfikat ukończeniaCertyfikat dlaJan Kowalskiza pomyślne ukończenie kursuPodstawy Pythona
Podstawy Pythona
Datasty 2026
Dodaj do LinkedInDlaczego warto uczyć się frontendu z Coddy
- Widzisz stronę, którą budujesz. Każda lekcja HTML, CSS i JavaScript renderuje się na żywo w przeglądarce obok twojego kodu, więc zły selektor czy zepsuty flexbox widać w sekundzie, w której go piszesz, a nie na zrzucie ekranu na końcu.
- Właściwa kolejność i JavaScript bez skrótów. Większość kursów frontendu pędzi od HTML do frameworka. Ta ścieżka daje JavaScriptowi trzy pełne działy przed Reactem, bo framework da się czytać dopiero wtedy, gdy zna się język pod spodem.
- Podpowiedzi AI, które czytają twój kod i znaczniki. Gdy układ się sypie albo komponent się nie renderuje, Bugsy analizuje twój kod i naprowadza cię na poprawkę, nie podając gotowej odpowiedzi.
- Projekty, które rekruter może otworzyć. Ostatni krok to osiem prawdziwych projektów, klonów stron, które już znasz, a każdy z nich to element portfolio, którym można się podzielić. Do tego darmowy certyfikat za każdy kurs z pierwszych siedmiu kroków.
Najczęstsze pytania o to, jak zostać frontend developerem
Jak zostać frontend developerem?
Naucz się HTML, CSS i JavaScriptu na tyle dobrze, żeby zbudować stronę od pustego pliku, dodaj TypeScript i jeden framework (React to bezpieczny wybór), naucz się Gita, a potem zbuduj trzy lub cztery prawdziwe projekty bez samouczka i opublikuj je w sieci. To właśnie ta ścieżka, w tej kolejności. Projekty liczą się bardziej niż certyfikaty: portfolio frontendowe to jedyna rzecz, którą osoba rekrutująca potrafi ocenić w trzydzieści sekund.
Czego uczyć się najpierw: HTML, CSS czy JavaScriptu?
Najpierw HTML, potem CSS, potem JavaScript, i JavaScriptowi poświęć najwięcej czasu. Swobodę w HTML zdobywa się w kilka tygodni, a w CSS w miesiąc. JavaScript to pełny język programowania i właśnie na nim większość samouków od frontendu idzie na skróty. Ta ścieżka poświęca mu trzy działy plus dział o DOM, zanim pojawi się jakikolwiek framework.
Czy frontend developer potrzebuje TypeScriptu?
Do pracy prawie zawsze: zdecydowana większość profesjonalnych projektów w React i Next.js jest pisana w TypeScript, a ogłoszenie, które mówi o „JavaScript”, w praktyce zwykle oznacza TypeScript. To krótki krok, gdy JavaScript jest już solidny, dlatego w tej ścieżce stoi tuż przed Reactem, a nie na końcu.
React, Vue czy Angular: którego frameworka się uczyć?
Reacta, chyba że konkretna praca, o którą ci chodzi, mówi inaczej. Ma zdecydowanie najwięcej ofert pracy, największy ekosystem, a zbudowany na nim Next.js to podstawa większości nowych stron produkcyjnych. Idee, czyli komponenty, stan, propsy i renderowanie, przeniesiesz później do Vue i Angulara w tydzień lub dwa. Ta ścieżka uczy Reacta i Next.js.
Ile trwa nauka frontendu?
Około sześciu do dziewięciu miesięcy przy godzinie dziennie, żeby dojść do poziomu juniora z portfolio. W tej ścieżce HTML i CSS zajmują razem od sześciu do ośmiu tygodni, JavaScript od dwóch do trzech miesięcy, TypeScript dwa tygodnie, React i Next.js sześć tygodni, a krok z projektami tyle, ile chcesz budować. Liczba, która ma znaczenie, to ukończone projekty, a nie ukończone lekcje.
Czy ta ścieżka obejmuje testowanie, dostępność albo zarządzanie stanem?
Nie jako osobne kursy i wolimy to powiedzieć, niż sztucznie rozdmuchiwać stronę. Semantyczne znaczniki, podstawa dostępnych stron, są częścią kroku o HTML, a obsługa stanu w samym React jest omówiona. Kurs testowania, głębsza praca nad dostępnością i biblioteka do zarządzania stanem są w planach programu i dołączą do tej ścieżki jako nowe kroki, gdy się pojawią.
Czy mogę dostać pracę jako frontend developer tylko dzięki darmowym kursom?
Tak, jeśli kursy dają portfolio, i właśnie dlatego ta ścieżka kończy się ośmioma projektami. Pracodawcy sprawdzają stronę zbudowaną przez ciebie, którą mogą otworzyć, historię w Gicie, która pokazuje, że to twoja praca, i rozmowę, na której potrafisz wyjaśnić układ strony i komponent. Wszystkie trzy rzeczy daje ta ścieżka i żadna nie wymaga płatnego bootcampu.
