- kursy
- 4
- modułów
- 48
- ćwiczeń
- 3662+
- godzin nauki
- 260-370
Czym zajmuje się front-end developer
Front-end to ta część strony albo aplikacji, z którą użytkownik ma kontakt: treść, przyciski, menu, formularze i animacje. Front-end developer zamienia projekt graficzny w działający kod i dba o to, żeby strona szybko się ładowała, była dostępna dla wszystkich i dobrze wyglądała na telefonie i komputerze.
Podstawą są trzy technologie przeglądarki: HTML opisuje strukturę treści, CSS jej wygląd, a JavaScript zachowanie. Większe aplikacje buduje się dziś w bibliotekach i frameworkach, najczęściej w React, a serwisy, które mają być szybkie i dobrze widoczne w Google, w Next.js. Ta ścieżka przechodzi przez wszystkie te etapy po kolei.
Ścieżka krok po kroku
Kursy są ułożone tak, że każdy korzysta z poprzedniego. Jeśli znasz już któryś temat, zacznij od dalszego kroku: program każdego kursu pokazuje wszystkie lekcje.
Krok 1
Kurs HTML i CSS online
poziom podstawowy · 11 modułów · 843+ ćwiczeń · 40-60 godzin
Fundament każdej strony: struktura dokumentu, style, układy na Flexbox i Grid, responsywność, formularze i dostępność.
Czego się nauczysz
- Semantyczna struktura dokumentów HTML5
- Zaawansowane selektory i kaskadowość CSS
- Responsywne layouty z Flexbox i Grid
- Preprocesor SASS - zmienne, mixiny, nesting
- Animacje i przejścia CSS
- Mobile-first i media queries
- Formularze HTML i walidacja
- Dostępność i SEO basics
Program kursuPierwsza lekcja: Wprowadzenie do HTMLKrok 2
Kurs JavaScript i TypeScript online
poziom podstawowy · 12 modułów · 1062+ ćwiczeń · 60-90 godzin
Język przeglądarki od podstaw: zmienne, funkcje, DOM, zdarzenia i kod asynchroniczny, a na koniec TypeScript, który pilnuje typów w większych projektach.
Czego się nauczysz
- Fundamenty JavaScript - zmienne, typy, operatory
- Funkcje, scope, closures i hoisting
- ES6+ - arrow functions, destructuring, spread
- Manipulacja DOM i event handling
- Asynchroniczność - callbacks, promises, async/await
- Klasy i programowanie obiektowe
- Podstawy TypeScript - typy, interfejsy, generyki
- Moduły ES6 i bundlery
Program kursuPierwsza lekcja: Historia i znaczenie JavaScriptKrok 3
Kurs JavaScript i React online
poziom średni · 16 modułów · 1069+ ćwiczeń · 80-120 godzin
Najpopularniejsza biblioteka do budowania interfejsów: komponenty, hooki, stan aplikacji, routing, komunikacja z API i testy.
Czego się nauczysz
- Komponenty funkcyjne i klasowe React
- React Hooks - useState, useEffect, useContext
- Zarządzanie stanem z Redux Toolkit
- React Router - routing i nawigacja
- Stylowanie z CSS Modules i Styled Components
- Fetch API i Axios do komunikacji z backendem
- Testowanie z Jest i React Testing Library
- Optymalizacja z React.memo i useMemo
Program kursuPierwsza lekcja: Podstawy React.jsKrok 4
Kurs Next.js online
poziom zaawansowany · 9 modułów · 688+ ćwiczeń · 80-100 godzin
Framework na bazie Reacta do aplikacji produkcyjnych: App Router, renderowanie na serwerze, Server Actions, baza danych, logowanie i wdrożenie.
Czego się nauczysz
- Next.js 16 App Router i strukturę projektu
- Server-Side Rendering (SSR) i Static Site Generation (SSG)
- Incremental Static Regeneration (ISR)
- API Routes i Server Actions
- Integracja z bazami danych (Prisma, PostgreSQL)
- Autentykacja z NextAuth.js
- Optymalizacja obrazów i lazy loading
- Deployment na Vercel
Program kursuPierwsza lekcja: Wprowadzenie do React i Next.js
Projekty do portfolio
W każdym kursie budujesz projekty, które możesz potem pokazać w portfolio. Kilka z nich:
HTML i CSS
Strona Piramidy
Zbuduj landing page o egipskiej piramidzie z galerią zdjęć i responsywnym menu
HTML i CSS
Portfolio Faraona
Kompletne portfolio z CSS Grid, animacjami i dark mode
JavaScript i TypeScript
Dino Tracker
System śledzenia dinozaurów z geolokacją i alarmami
JavaScript i TypeScript
DNA Sequencer
Symulator sekwencjonowania DNA z wizualizacją
JavaScript i React
Mission Control Panel
Dashboard kontroli misji z real-time updates i wykresami
JavaScript i React
Crew Management System
CRUD aplikacja do zarządzania załogą z autentykacją
Next.js
Quantum Dashboard
Admin dashboard z SSR, autentykacją i bazą danych
Next.js
Neural Network Blog
Blog platform z ISR, MDX i komentarzami
Ile to trwa i ile kosztuje
Programy kursów zakładają łącznie 260-370 godzin nauki. Przy 10 godzinach tygodniowo cała ścieżka zajmie około 26-37 tygodni, ale tempo zależy tylko od Ciebie.
Wszystkie lekcje przeczytasz za darmo na tej stronie. W aplikacji darmowe konto obejmuje kurs HTML i CSS z limitem 10 jednostek paliwa dziennie, a zadania kolejnych kursów odblokowuje plan płatny.
Najczęstsze pytania
Czy ten kurs front-end jest dla początkujących?
Tak. Ścieżka zaczyna się od podstaw HTML, a pierwsze dwa kursy mają poziom podstawowy. Wystarczy komputer z przeglądarką: edytor kodu jest wbudowany w lekcje, więc na start niczego nie instalujesz.
Ile trwa nauka front-endu?
Programy czterech kursów zakładają łącznie 260-370 godzin nauki. Przy 10 godzinach tygodniowo to około 26-37 tygodni. Możesz uczyć się szybciej albo wolniej, a postępy zapisują się na Twoim koncie.
Czy po kursie online znajdę pracę jako front-end developer?
Kurs daje wiedzę i dużo praktyki, ale żaden kurs nie gwarantuje pracy. Przy rekrutacji liczą się przede wszystkim portfolio i umiejętność rozwiązywania zadań, dlatego w każdym kursie budujesz projekty, a ćwiczenia sprawdzają kod, który piszesz.
Kurs online czy studia podyplomowe z front-endu?
Studia podyplomowe dają dyplom i stały plan zajęć, ale trwają co najmniej dwa semestry i są płatne. Kurs online pozwala zacząć od razu i uczyć się we własnym tempie, a lekcje są darmowe. Wiele osób zaczyna od kursu i dopiero potem decyduje o studiach albo bootcampie.
Ile kosztuje ta ścieżka?
Lekcje wszystkich czterech kursów są darmowe. W aplikacji kurs HTML i CSS przejdziesz na darmowym koncie, a zadania z JavaScriptu, Reacta i Next.js wymagają planu płatnego. Aktualne ceny są w cenniku.
Znam już HTML i CSS. Od czego zacząć?
Od kursu JavaScript i TypeScript. Jeśli znasz też JavaScript, przejdź od razu do Reacta. Program każdego kursu pokazuje wszystkie lekcje, więc łatwo sprawdzisz, co już umiesz.
Zacznij od pierwszej lekcji HTML
Pierwszą lekcję przeczytasz od razu, bez zakładania konta. Gdy zechcesz rozwiązywać zadania i zdobywać XP, załóż darmowe konto.