Nauka Frontend Development
Nauka Frontend Development — Frontend development od HTML do React, z podglądem na żywo
Nauka Frontend Development to bezpłatna aplikacja na iOS i Androida dla początkujących, projektantów i osób zmieniających ścieżkę kariery, które chcą zostać web developerami. HTML, CSS i JavaScript znajdują się obok siebie w edytorze na żywo, a strona poniżej aktualizuje się podczas pisania. 41 kursów i 163 krótkie lekcje prowadzą od pierwszego tagu przez responsywny układ i TypeScript aż po React i Vue. Do tego otrzymujesz 20 projektów prowadzonych krok po kroku, misje debugowania oraz mentora AI, który pomoże znaleźć błąd, którego nie możesz namierzyć.
- Cena
- Bezpłatna, uaktualnienie do Pro
- Platformy
- iOS i Android
- Języki
- 22
- Klasyfikacja wiekowa
- 4+
- Wymaga
- iOS 15.1 lub nowszy
Zmień jedną linię i obserwuj, jak zmienia się strona.
Edytor wyświetla obok siebie panele HTML, CSS i JavaScript, a pod nimi pokazuje podgląd na żywo, dzięki czemu znaczników, stylowania i działania uczysz się jako elementów jednej strony, a nie trzech osobnych tematów.
Co to jest
Nauka Frontend Development to bezpłatna aplikacja na iOS i Androida, która uczy frontend developmentu — części witryny widocznej i używanej przez ludzi — za pomocą edytora HTML, CSS i JavaScript z podglądem na żywo na telefonie. Oferuje 41 kursów i 163 lekcje od poziomu początkującego do seniora, obejmujące podstawy web developmentu, responsywny układ, JavaScript i DOM, TypeScript, React, Vue, testowanie, dostępność i wydajność, a także projekty prowadzone krok po kroku, misje debugowania, pytania rekrutacyjne i mentora AI.
W aplikacji
Jak to wygląda
Kurs
Zakres kursu frontend developmentu
41 kursów i 163 lekcje z własnej listy kursów aplikacji — od pierwszego znacznika HTML po architekturę frontendu i inżynierię na poziomie seniora.
Web i trzy podstawy
Wprowadzenie do frontend developmentu, Jak działa web, Podstawy HTML, Podstawy CSS i Najważniejsze elementy JavaScript.
Układ i responsywny design
Podstawy responsywnego designu, Formularze HTML i semantyczne oznaczenia, Mistrzowskie opanowanie układów CSS oraz Zmienne, przejścia i animacje CSS.
JavaScript w przeglądarce
DOM i Browser APIs, tablice, obiekty i ES6+, programowanie asynchroniczne oraz moduły JavaScript i narzędzia do budowania.
Przepływ pracy i narzędzia
Narzędzia deweloperskie i przepływ pracy, Git i współpraca w zespole oraz nowoczesne narzędzia frontendowe.
TypeScript
Wprowadzenie do TypeScript, dogłębne omówienie typów i interfejsów oraz zaawansowany TypeScript dla frontendu.
React i Vue
Podstawy React, useEffect i pobieranie danych, zaawansowane hooki i wzorce, a następnie podstawy Vue 3, Composition API i zaawansowane wzorce Vue.
Dane, renderowanie i działanie w czasie rzeczywistym
Zarządzanie stanem, integracja z API i REST, renderowanie po stronie serwera z Next.js i Nuxt 3, progresywne aplikacje webowe oraz WebSockets i frontend działający w czasie rzeczywistym.
Jakość i architektura
Dostępność, testowanie frontendu, optymalizacja wydajności webu, bezpieczeństwo frontendu, architektura CSS, systemy designu, CI/CD frontendu i inżynieria frontendu na poziomie seniora.
Jak to działa
Jak wygląda nauka
Kolejność w aplikacji odzwierciedla kolejność nauki tego fachu: najpierw zbuduj stronę, potem spraw, by działała, a na końcu poznaj narzędzia, które pozwalają ją skalować.
Zacznij od bezpłatnego pierwszego kursu
Welcome to Frontend Development otwiera tę ścieżkę, a edytor na żywo jest bezpłatny od samego początku. Każda lekcja składa się z kilku minut wyjaśnień, a następnie zadania do zmiany i uruchomienia.
Edytuj panel i odczytuj podgląd
Zmień HTML, CSS lub JavaScript, a podgląd poniżej od razu się zaktualizuje. Nowe projekty możesz rozpocząć na podstawie szablonu HTML, React, Vue, Angular, Node lub TypeScript.
Twórz projekty i naprawiaj prawdziwe błędy
Dwadzieścia projektów prowadzonych krok po kroku pozwala zbudować stronę z przepisem, formularz kontaktowy, siatkę kart, navbar i tabelę danych, a 15 misji debugowania daje Ci uszkodzone strony do naprawy.
Co zawiera
Co zawiera aplikacja
41
Kursów, od początkującego do seniora
163 lekcje sklasyfikowane od A1 do C2 — od wyjaśnienia, jak działa web, i podstaw HTML po TypeScript, React, Vue 3, zarządzanie stanem, renderowanie po stronie serwera z Next.js i Nuxt 3 oraz progresywne aplikacje webowe.
Na żywo
Edytor z natychmiastowym podglądem
Panele HTML, CSS i JavaScript z podglądem pod nimi, dzięki czemu każda zmiana jest widoczna od razu. Nowe projekty możesz rozpoczynać na podstawie kilku szablonów frameworków.
15
Misji debugowania
Misje oparte na prawdziwych problemach frontendowych: układ, który psuje się przy 375 pikselach, obraz spowalniający stronę, formularz, do którego nie da się dotrzeć za pomocą klawiatury, wyciek pamięci w komponencie oraz test, który przechodzi lokalnie, ale kończy się niepowodzeniem w CI.
20
Projektów prowadzonych krok po kroku
Małe projekty wyjaśniane krok po kroku, takie jak strona z przepisem, formularz kontaktowy, siatka kart, navbar i tabela danych.
AI
Mentor AI i playground
Zapytaj o błąd, lekcję lub własny kod albo opisz stronę w playgroundzie AI i obserwuj, jak powstaje kod. Bezpłatni użytkownicy otrzymują trzy pytania do AI dziennie.
50
Pytania rekrutacyjne z odpowiedziami
Pięćdziesiąt pytań rekrutacyjnych dla frontend developerów i web developerów wraz z odpowiedziami, a także cheat sheet zawierający 83 wpisy ze składnią i wzorcami oraz bibliotekę krótkich przykładów, które możesz otwierać i edytować.
Wprowadzenie
Czego właściwie uczy się frontend developer i w jakiej kolejności?
Frontend developer tworzy to, co działa w przeglądarce: strukturę strony, jej wygląd na każdym rozmiarze ekranu oraz reakcje na kliknięcia, wpisywanie tekstu i przewijanie. Sensowna kolejność to najpierw struktura (HTML), potem prezentacja (CSS), następnie działanie (JavaScript), a dopiero później narzędzia porządkujące większe projekty: TypeScript, framework taki jak React lub Vue, testowanie i etap budowania. Przeskakiwanie od razu do frameworka przed opanowaniem trzech podstaw to najczęstszy powód, dla którego początkujący się zatrzymują, ponieważ framework w dużej mierze ukrywa zwykły JavaScript i DOM za własną składnią.
Semantyczny HTMLznaczenie przed wyglądem
Wybieranie nagłówka, listy, etykiety formularza lub przycisku ze względu na znaczenie treści, a nie na to, jak ma wyglądać, daje czytnikom ekranu, wyszukiwarkom i użytkownikom klawiatury coś, z czym mogą pracować. To także najtańszy sposób na poprawę dostępności dowolnej strony.
Responsywny układjedna strona, każdy ekran
Flexbox, grid i media queries pozwalają pojedynczemu układowi zmieniać się z wąskiego ekranu telefonu w szeroki monitor. Wczesne testowanie przy małej szerokości, takiej jak 375 pikseli, pozwala wykryć błędy układu, których późniejsza naprawa jest uciążliwa.
DOMstrona jako żywy obiekt
Przeglądarka zamienia HTML w drzewo obiektów, które JavaScript może odczytywać i zmieniać. Każdy framework jest ostatecznie wygodnym sposobem aktualizowania tego drzewa, więc jego zrozumienie znacznie ułatwia pracę z React i Vue.
Core Web Vitals i wydajnośćszybkość, którą można odczuć
Strona, która późno ładuje duży, nieoptymalizowany obraz albo przesuwa się podczas ładowania, sprawia wrażenie wolnej, nawet gdy kod jest poprawny. Wydajność to umiejętność, która ujawnia się dopiero przy pracy z prawdziwymi stronami i prawdziwymi obrazami.
Dopasowanie
Dla kogo jest — i dla kogo nie jest
To dobry wybór, jeśli
- Chcesz zostać web developerem i zaczynasz od zera
- Jesteś projektantem lub projektantką i chcesz tworzyć projektowane przez siebie strony
- Znasz trochę HTML i CSS i chcesz dodać do tego JavaScript, TypeScript, React lub Vue
- Przygotowujesz się do pierwszej rozmowy rekrutacyjnej na stanowisko frontend developera i chcesz poznać pytania wraz z odpowiedziami
- Wolisz obserwować zmiany na stronie podczas pisania niż czytać długie wyjaśnienia
To nie jest odpowiednie narzędzie, jeśli
- Musisz zbudować i wdrożyć dużą stronę składającą się z wielu plików, do czego nadal potrzebujesz laptopa i pełnego edytora
- Oczekujesz, że wszystko będzie darmowe: pierwszy kurs, pierwszy projekt, dwie misje debugowania i edytor są darmowe, a Pro odblokowuje resztę
- Chcesz skorzystać z kursu backendu lub baz danych, ponieważ ta ścieżka dotyczy tego, co działa w przeglądarce
- Pracujesz już jako senior frontend engineer i szukasz materiału referencyjnego, a nie lekcji
Pytania
Najczęściej zadawane pytania
Czym jest frontend development?
Frontend development polega na tworzeniu części strony internetowej lub aplikacji webowej działającej w przeglądarce: jej struktury za pomocą HTML, wyglądu za pomocą CSS i zachowania za pomocą JavaScript, a także frameworków i narzędzi zbudowanych na tych technologiach. Nauka Frontend Development uczy tego stosu w tej kolejności, oferując podgląd na żywo, dzięki któremu każda zmiana jest od razu widoczna.
Czy mogę uczyć się frontend developmentu na telefonie?
Podstawowych pojęć i tworzenia pierwszych stron można dobrze nauczyć się na telefonie, ponieważ HTML, CSS i JavaScript są wystarczająco niewielkie, aby edytować je podczas krótkich sesji, a podgląd natychmiast pokazuje rezultat. Aplikacja wyświetla na ekranie trzy panele i podgląd na żywo. Laptop staje się wygodniejszy, gdy pracujesz nad większym projektem z wieloma plikami, ale na początek nie jest potrzebny.
Dla kogo jest ta aplikacja i od czego powinna zacząć osoba zupełnie początkująca?
Jest odpowiednia dla osób zupełnie początkujących, projektantów i projektantek, którzy chcą tworzyć to, co projektują, deweloperów znających trochę HTML i CSS oraz osób zmieniających branżę i przygotowujących się do pierwszej pracy we frontendzie. Zacznij od tego, jak działa web, oraz od czystego HTML, następnie przejdź do CSS, a potem do JavaScript. Nauka Frontend Development zachowuje tę kolejność, rozpoczynając od darmowego kursu Wprowadzenie do frontend developmentu.
Czy aplikacja uczy React i Vue?
Tak. Po HTML, CSS, JavaScript i TypeScript aplikacja oferuje kursy React obejmujące podstawy, useEffect i pobieranie danych oraz zaawansowane hooki i wzorce, a także kursy Vue 3 dotyczące podstaw, Composition API i zaawansowanych wzorców. Obejmuje również zarządzanie stanem i renderowanie po stronie serwera z Next.js i Nuxt 3.
Czy muszę uczyć się TypeScript?
Nie jest potrzebny do stworzenia pierwszej strony, ale większość profesjonalnych baz kodu React i Vue go używa, więc warto nauczyć się go po opanowaniu podstaw JavaScript. Aplikacja wprowadza do TypeScript za pomocą kursu podstaw typów, bardziej szczegółowego kursu o typach i interfejsach oraz zaawansowanego kursu dotyczącego wzorców frontendowych.
Jak działają misje debugowania?
Każda z 15 misji debugowania przedstawia uszkodzoną stronę lub komponent odzwierciedlający rzeczywisty problem frontendowy, taki jak układ, który psuje się przy 375 pikselach, formularz, z którego nie można korzystać za pomocą klawiatury, wyciek pamięci w komponencie lub test, który kończy się niepowodzeniem tylko w CI — a Twoim zadaniem jest go naprawić. Dwie misje są darmowe.
Czy aplikacja może pomóc mi przygotować się do rozmowy rekrutacyjnej na stanowisko frontend developera?
Może pomóc w zdobyciu wiedzy. Nauka Frontend Development zawiera 50 pytań rekrutacyjnych z odpowiedziami, ściągę z 83 wpisami dotyczącymi składni i wzorców oraz kursy o testowaniu, wydajności, dostępności i architekturze — czyli tematach, do których rozmowy często przechodzą po omówieniu podstaw. Nie zastąpi to jednak portfolio własnych projektów.
Ile czasu zajmuje nauka frontend developmentu?
Osoba początkująca, która codziennie trochę ćwiczy, zwykle może tworzyć proste responsywne strony w ciągu kilku tygodni, natomiast swobodne posługiwanie się JavaScript i frameworkiem zajmuje miesiące. Aplikacja dzieli ścieżkę na trwające po kilka minut lekcje oraz oferuje serie i przypomnienia, dzięki czemu postępy wynikają z regularnych, krótkich sesji, a nie z jednej długiej nauki.
Czy Nauka Frontend Development jest darmowe?
Aplikację można bezpłatnie pobrać z App Store i Google Play. Pierwszy kurs, pierwszy projekt z instrukcjami, dwie misje debugowania i edytor kodu są darmowe, podobnie jak trzy pytania do mentora AI dziennie, a darmowa wersja wyświetla reklamy. Pro odblokowuje wszystkie kursy, projekty i misje, egzamin certyfikacyjny oraz nielimitowane AI, a także usuwa reklamy.
Jakie platformy i języki obsługuje aplikacja i czy wersja w App Store jest taka sama?
Nauka Frontend Development działa na iOS za pośrednictwem App Store oraz na Android za pośrednictwem Google Play, jest dostępna w 22 językach i ma oznaczenie wiekowe 4+. Oferta w App Store nosi tytuł Learn Frontend Development, a oferta w Google Play — Nauka Frontend Development, ale jest to ta sama aplikacja. Zdanie egzaminu końcowego daje certyfikat ukończenia.
Zacznij
Stwórz swoją pierwszą stronę internetową już dziś
Bezpłatna na początek na iOS i Androidzie, w 22 językach.
Więcej od CoddyKit
Dostępna na iOS.