0Pricing
HTML Academy icon

HTML Academy

HTMLWebFrontendBeginner

Zbuduj solidne fundamenty tworzenia stron internetowych, ucząc się HTML w HTML Academy.

🤖 Napędzane AI📚 40 kursów👥 100 000+ uczniów⭐ Ocena 4,9
Przegląd kursu

HTML: Język Stojący za Każdą Stroną Internetową

HTML jest strukturalnym fundamentem sieci — każda karta przeglądarki, wysłanie formularza i osadzony film zaczynają się od znaczników. Ten kurs buduje autentyczną biegłość w HTML, od reguł rządących prawidłowym dokumentem do interfejsów przeglądarki i modeli komponentów używanych na nowoczesnych stronach produkcyjnych. Celem nie jest tylko pisanie tagów, ale zrozumienie, dlaczego każdy element istnieje i co sygnalizuje przeglądarkom, technologiom pomocniczym i wyszukiwarkom.

Czego się nauczysz

Zaczniesz od struktury dokumentu, treści tekstowej, linków, obrazów i list, a następnie przejdziesz do tabel, formularzy i atrybutów walidacji formularzy. Kurs obejmuje semantyczne elementy HTML5, <head> i metadane, audio i wideo, oraz podstawy dostępności, w tym role i atrybuty ARIA. Późniejsze kursy dotyczą niestandardowych atrybutów danych, szablonów HTML, elementów Canvas i SVG, Web Storage, interfejsu Drag and Drop API, tagów meta SEO i mediów społecznych oraz szablonów e-mail w HTML. Zaawansowane sekcje zagłębiają się w Shadow DOM, Web Components i elementy niestandardowe, moduły HTML i mapy importu, progressive enhancement, internacjonalizację, bezpieczeństwo, History API i Navigation API, Intersection Observer, oraz budowanie HTML dla Progressive Web Apps.

Ścieżka Nauki

Czterdzieści kursów postępuje od A1 przez A2 i B1 do B2, kończąc się na poziomie C1 — capstone na temat HTML na Dużą Skalę. Kursy A1 i A2 ustalają podstawy — strukturę dokumentu, elementy semantyczne, formularze i metadane. B1 wprowadza dostępność, ARIA, Canvas, SVG i storage przeglądarki. B2 to największy blok, obejmujący Web Components, Shadow DOM, wydajność, bezpieczeństwo, internacjonalizację i Intersection Observer. Ostateczny kurs C1, HTML na Dużą Skalę, omawia wzorce i ograniczenia, które mają znaczenie, gdy HTML jest tworzony, testowany i utrzymywany na dużych bazach kodów.

Jak Działa

Każdy kurs jest podzielony na krótkie, praktyczne lekcje, które uzupełniasz w wbudowanym edytorze kodu z opinią w czasie rzeczywistym. Tutor AI jest dostępny, gdy się utkniesz, a postęp następuje w Twoim tempie — każda lekcja jest samodzielna, więc możesz wrócić do dowolnego tematu jako odniesienia później.

Zacznij naukę →

Jak się będziesz uczyć

🎯
Interaktywne lekcje
Praktyczne ćwiczenia kodowania z opinią zwrotną w czasie rzeczywistym
🤖
Tutor AI
Uzyskaj natychmiastową pomoc od naszego AI, gdy się zatniesz
💻
Wbudowany edytor
Pisz i uruchamiaj kod bezpośrednio w przeglądarce
🏆
Certyfikat
Uzyskaj certyfikat po ukończeniu kursu
Program nauczania

40 kursów

Każdy kurs ze ścieżki edukacyjnej HTML Academy.

01

Struktura dokumentu HTML

A13 lekcji

Dowiedz się, jak przeglądarki parsują HTML, do czego służy DOCTYPE oraz jak elementy html, head i body organizują każdą stronę internetową.

02

Elementy treści tekstowej

A14 lekcjiPRO

Opanuj nagłówki, akapity, wyróżnienia, elementy inline oraz kontrolowanie białych znaków za pomocą znaczników tekstowych HTML.

03

Linki i nawigacja

A14 lekcjiPRO

Twórz nawigację za pomocą elementów kotwicy, bezwzględnych i względnych adresów URL, linków otwieranych w nowej karcie oraz identyfikatorów…

04

Obrazy i ilustracje

A14 lekcjiPRO

Wyświetlaj responsywne obrazy za pomocą img, srcset i elementu picture oraz dodawaj semantyczne podpisy figure.

05

Listy

A14 lekcjiPRO

Twórz listy nieuporządkowane, uporządkowane i opisowe z prawidłowym zagnieżdżeniem oraz znaczeniem semantycznym.

06

Tabele

A24 lekcjiPRO

Buduj dostępne tabele danych z prawidłową strukturą, komórkami obejmującymi wiele kolumn lub wierszy oraz sekcjami tabeli.

07

Atrybuty HTML i atrybuty globalne

A24 lekcjiPRO

Poznaj atrybuty id, class, style, hidden, tabindex oraz własne atrybuty data-*, używane we wszystkich elementach HTML.

08

Podstawy formularzy HTML

A24 lekcjiPRO

Buduj dostępne formularze internetowe z typami pól, etykietami, przyciskami oraz atrybutami action i method elementu form.

09

Zaawansowane kontrolki formularzy

A24 lekcjiPRO

Rozbuduj formularze o listy rozwijane, pola textarea, grupy pól wyboru, przyciski opcji oraz autouzupełnianie z użyciem datalist.

10

Atrybuty walidacji formularzy

A24 lekcjiPRO

Używaj atrybutów walidacji HTML5, takich jak required, pattern, min i max, aby sprawdzać dane użytkownika przed wysłaniem formularza.

11

Semantyczny HTML5

A24 lekcjiPRO

Zastępuj ogólne elementy div znaczącymi elementami HTML5, takimi jak header, nav, main, footer, article i section.

12

Więcej elementów semantycznych

A24 lekcjiPRO

Poznaj aside, details, summary, progress i meter, aby nadać stronom bogatsze znaczenie oraz interaktywność.

13

Sekcja head i metadane HTML

A24 lekcjiPRO

Opanuj sekcję head: title, znaczniki meta, viewport, kanoniczne adresy URL, dyrektywy robots i favikony.

14

Elementy audio i wideo

A24 lekcjiPRO

Osadzaj dźwięk i wideo natywnie za pomocą HTML5, udostępniaj wiele formatów oraz dodawaj napisy z użyciem track i WebVTT.

15

Podstawy dostępności HTML

B14 lekcjiPRO

Poznaj poziomy WCAG, hierarchię nagłówków, zasady stosowania tekstu alternatywnego oraz nawigację klawiaturą na inkluzywnych stronach inter…

16

Role i atrybuty ARIA

B14 lekcjiPRO

Zwiększaj dostępność za pomocą ról, etykiet i opisów ARIA oraz poznaj zasadę, zgodnie z którą należy najpierw używać natywnych elementów HT…

17

Własne atrybuty danych

B14 lekcjiPRO

Przechowuj i odczytuj własne metadane elementów HTML za pomocą atrybutów data-*, API dataset i selektorów CSS.

18

Szablony HTML

B14 lekcjiPRO

Używaj elementu template do definiowania nieaktywnych oznaczeń, wydajnie je klonuj oraz porównuj to podejście z renderowaniem opartym na in…

19

Element Canvas

B14 lekcjiPRO

Rysuj kształty, tekst i obrazy na dwuwymiarowym obszarze canvas oraz animuj je za pomocą requestAnimationFrame.

20

SVG w HTML

B14 lekcjiPRO

Osadzaj skalowalną grafikę wektorową bezpośrednio w dokumencie, używaj podstawowych kształtów, kontroluj viewBox oraz animuj SVG za pomocą…

21

iframe i osadzane treści

B14 lekcjiPRO

Osadzaj zewnętrzne treści za pomocą iframe, poznaj izolowanie zawartości dla bezpieczeństwa oraz używaj leniwego ładowania w celu poprawy w…

22

Magazyn danych HTML

B14 lekcjiPRO

Przechowuj dane po stronie klienta za pomocą localStorage i sessionStorage, nasłuchuj zdarzeń storage oraz przestrzegaj zasad bezpieczeństw…

23

API przeciągania i upuszczania

B14 lekcjiPRO

Implementuj interakcje przeciągania i upuszczania za pomocą HTML5 Drag and Drop API oraz obiektu dataTransfer.

24

SEO i metadane społecznościowe

B14 lekcjiPRO

Optymalizuj strony pod kątem wyszukiwarek i udostępniania w mediach społecznościowych za pomocą OpenGraph, Twitter Cards, JSON-LD i hreflan…

25

Szablony wiadomości e-mail w HTML

B14 lekcjiPRO

Twórz bezpieczny dla klientów pocztowych kod HTML za pomocą układów opartych na tabelach, stylów inline i technik obsługi obrazów w różnych…

26

Zaawansowane wzorce ARIA

B24 lekcjiPRO

Wdrażaj wzorce przełączników, interfejsy kart i regiony na żywo oraz testuj je za pomocą prawdziwych czytników ekranu.

27

Wydajność HTML

B24 lekcjiPRO

Przyspieszaj ładowanie stron dzięki skryptom async i defer, wskazówkom preload, obrazom ładowanym leniwie oraz wskazówkom zasobów.

28

Niestandardowe elementy Web Components

B24 lekcjiPRO

Definiuj wielokrotnego użytku własne elementy HTML za pomocą Custom Elements API, callbacków cyklu życia i obserwowanych atrybutów.

29

Shadow DOM

B24 lekcjiPRO

Hermetyzuj oznaczenia i style wewnątrz Shadow DOM, rozdzielaj treści za pomocą slotów oraz udostępniaj API stylowania przez part.

30

Moduły HTML i mapy importów

B24 lekcjiPRO

Używaj skryptów modułów ES, map importów dla gołych specyfikatorów, importów dynamicznych oraz poznaj koncepcje federacji modułów.

31

Progresywne ulepszanie

B24 lekcjiPRO

Buduj zgodnie z zasadą progresywnego ulepszania: zacznij od solidnego HTML, dodawaj warstwy CSS i JavaScript oraz prawidłowo wykrywaj dostę…

32

Internacjonalizacja

B24 lekcjiPRO

Przygotują Państwo kod HTML dla odbiorców z całego świata, korzystając z lang, dir, bdi, bdo, charset oraz obsługi tekstu od prawej do lewe…

33

Bezpieczeństwo HTML

B24 lekcjiPRO

Zabezpieczą Państwo strony przed XSS, clickjackingiem i atakami typu injection za pomocą CSP, sandboxingu, SRI oraz bezpiecznych praktyk ob…

34

Zaawansowane API formularzy HTML

B24 lekcjiPRO

Wykorzystają Państwo FormData, Constraint Validation API, niestandardowe komunikaty poprawności oraz zarządzanie stanem formularzy.

35

Historia HTML i Navigation API

B24 lekcjiPRO

Będą Państwo zarządzać historią przeglądarki za pomocą pushState, zdarzeń popstate oraz nowoczesnego Navigation API na potrzeby routingu SP…

36

Intersection Observer

B24 lekcjiPRO

Wykorzystają Państwo IntersectionObserver do implementacji leniwego ładowania, nieskończonego przewijania oraz wyzwalaczy animacji powiązan…

37

HTML dla PWA

B24 lekcjiPRO

Skonfigurują Państwo progresywne aplikacje webowe za pomocą manifestu aplikacji webowej, rejestracji service workera oraz stron awaryjnych…

38

Walidacja i testowanie HTML

B24 lekcjiPRO

Zweryfikują Państwo kod za pomocą W3C Validator, przeprowadzą audyt HTML w Lighthouse oraz przetestują dostępność narzędziami pa11y i axe.

39

Przyszłość HTML

B24 lekcjiPRO

Poznają Państwo nowe funkcje HTML: Declarative Shadow DOM, Popover API, selectlist oraz atrybuty command.

40

HTML w dużych projektach

C14 lekcjiPRO

Będą Państwo zarządzać kodem HTML w dużych projektach dzięki wydzielaniu komponentów, szablonom po stronie serwera, systemom projektowym i…

FAQ

Często zadawane pytania

Czy kurs HTML Academy jest bezpłatny?

Tak. Możesz rozpocząć kurs HTML Academy za darmo i ukończyć jego interaktywne lekcje bez żadnych kosztów. Opcjonalna subskrypcja PRO odblokowuje zaawansowane narzędzia AI i certyfikat możliwy do udostępnienia.

Czy potrzebuję wcześniejszego doświadczenia, aby nauczyć się HTML?

Nie. Kurs zaczyna się od podstaw i stopniowo przechodzi do bardziej zaawansowanych tematów, więc możesz zacząć nawet bez wcześniejszego doświadczenia z HTML.

Jak nauczysz się HTML na CoddyKit?

Uczysz się praktycznie. Krótkie interaktywne lekcje łączą jasne wyjaśnienie z praktycznym ćwiczeniem kodowania, które działa w czasie rzeczywistym, a tutor AI dostępny 24/7 udziela spersonalizowanej pomocy, gdy się zatniesz.

Czy dostajesz certyfikat po ukończeniu HTML Academy?

Tak. Uczniowie PRO mogą przystąpić do egzaminu i uzyskać certyfikat ukończenia możliwy do udostępnienia z kodem możliwym do weryfikacji dla kursu HTML Academy.

Czy możesz nauczyć się HTML na telefonie?

Tak. CoddyKit jest dostępny na stronie internetowej i jako natywne aplikacje iOS i Android, dzięki czemu możesz nauczyć się HTML na dowolnym urządzeniu, a Twoje postępy synchronizują się między nimi.

Zacznij HTML Academy Teraz

Dołącz do tysięcy uczniów opanowujących programowanie dzięki lekcjom wspieranym AI.

Rozpocznij Bezpłatnie →Przeglądaj Wszystkie Kursy