Kurs HTML i CSS online
Kurs HTML i CSS online w CodeWorlds to 11 modułów krótkich lekcji z edytorem kodu i 843 zadań praktycznych, prowadzonych jako fabularna przygoda. Lekcje przeczytasz za darmo na tej stronie.
W celu nauki HTML5, CSS3 przenosimy się w przeszłość i odkrywamy sekrety starożytnego Egiptu. Zmień karty historii za pomocą zaawansowanej technologii znanej w czasach obecnych.
Twój przewodnik
Mohamed
Przewodnik po Egipcie
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
Główne projekty
W trakcie kursu zbudujesz prawdziwe projekty, które możesz dodać do swojego portfolio
Strona Piramidy
Zbuduj landing page o egipskiej piramidzie z galerią zdjęć i responsywnym menu
Portfolio Faraona
Kompletne portfolio z CSS Grid, animacjami i dark mode
Świątynia Karnak
Multi-page website z zaawansowanymi formularzami i nawigacją
Program kursu
11 moduły pełne interaktywnych ćwiczeń i praktycznych projektów
Pierwsze hieroglify
Podstawy HTML
Czym jest HTML, elementy i znaczniki, struktura dokumentu HTML oraz Twoja pierwsza strona w egipskim stylu
60 ćwiczeń
Droga do Heliopolis
Internet i elementy HTML
Jak działa internet i przeglądarka, formatowanie tekstu, linki, obrazy, listy, tabele, formularze, wideo i semantyczny HTML
98 ćwiczeń
Zagadki hieroglifów
Podstawy CSS
Reguły i selektory, kaskadowość i specyficzność, dziedziczenie, box model, jednostki, float, pozycjonowanie, z-index i pseudo-klasy
119 ćwiczeń
Wszystkie lekcje (19)
- Stylowanie tekstu i jednostki CSS
- Klasy i identyfikatory w CSS
- Zaawansowane selektory CSS
- Kaskadowość i specyficzność
- Dziedziczenie stylów CSS
- Box model CSS
- Wyświetlanie elementów względem siebie
- Opływanie elementów (float) w CSS
- Pozycjonowanie CSS
- Z-index i nakładanie elementów
- Pseudo-klasy i pseudo-elementy CSS
- Filtry CSS
- Transformacje CSS
- Prefiksy przeglądarek w CSS
- Projekt główny modułu
Tajemnice piramid
Flexbox
Oś główna i poprzeczna, wyrównywanie elementów, order i align-self, zawijanie, flex-grow, flex-shrink, flex-basis oraz gap
78 ćwiczeń
- Flexbox - elastyczny układ
- Oś pionowa czy pozioma?
- Dopasowanie elementów w osi poziomej
- Oś główna i oś poprzeczna Flexbox
Wszystkie lekcje (15)
- Dopasowanie elementów w osi pionowej
- Właściwości elementów flex: order i align-self
- Order i Align-self - indywidualna kontrola elementów
- Zawijanie elementów
- Align content
- Skrótowe właściwości Flexbox
- Flex-grow, Flex-shrink, Flex-basis - kontrola rozmiaru
- Tworzenie Siatki za pomocą Flexbox
- Gap - nowoczesne odstępy w Flexbox
- Dostępność (Accessibility) w HTML - budowanie dla wszystkich
- Zadanie Główne: Tworzenie Strony WWW za pomocą Flexbox
Świątynne obeliski
Responsywność
Viewport, fluid layout, jednostki vw i vh, optymalizacja obrazów, media queries oraz podejście mobile-first
64 ćwiczeń
Z wizytą u Kleopatry
Animacje CSS
Transformacje 2D i 3D, przejścia, animacje z @keyframes, funkcje czasu, kierunek animacji i wydajność z akceleracją GPU
79 ćwiczeń
Dolina Nilu
SASS
Zmienne, zagnieżdżanie, mixiny, mapy i listy, partials i moduły, @extend, operatory oraz SASS kontra CSS Custom Properties
64 ćwiczeń
Świątynia Abu Simbel
CSS Grid
Rozmiary i jednostki siatki, pozycjonowanie elementów, grid areas i template areas oraz łączenie Grid z Flexboxem
63 ćwiczeń
Dolina Królów
Nowoczesny CSS
Container queries i :has(), natywny nesting, cascade layers, subgrid, clamp(), @property, Stylelint i testy w wielu przeglądarkach
92 ćwiczeń
- Container Queries i :has() - nowoczesna responsywność
- CSS Nesting - natywne zagnieżdżanie stylów
- Cascade Layers - kontrolowanie kolejności w kaskadzie CSS
- CSS Subgrid - współdzielenie siatki z potomkami
Wszystkie lekcje (14)
- Nowoczesne funkcje CSS - część 1: clamp(), aspect-ratio, :is(), :where()
- @property - typowane właściwości CSS
- Nowoczesne funkcje CSS - część 2: scroll-snap, @supports, accent-color, color-mix()
- CSS Functions - matematyka w stylu egipskich skrybów
- Modern CSS Features - przyszłość stylowania egipskich hieroglifów
- Stylelint - linter dla CSS
- Testowanie cross-browser
- State of CSS - Przyszłość i trendy CSS
- Projekt - Nowoczesna strona portfolio z zaawansowanymi technikami CSS
- Projekt Końcowy: Responsywna Strona Landing Page "Egipska Przygoda"
Muzeum w Kairze
Dostępność (a11y)
WCAG, semantyczny HTML, ARIA, nawigacja klawiaturą, dostępne formularze i multimedia, kontrast kolorów oraz testy dostępności
63 ćwiczeń
Komnata faraona
Narzędzia deweloperskie
Chrome DevTools, Emmet, walidatory HTML i CSS, favicon i Open Graph, web fonts, optymalizacja wydajności i hosting stron
63 ćwiczeń
Motyw kursu
Hieroglify i Piramidy
Każdy moduł osadzony jest w unikalnej tematyce, która sprawia, że nauka staje się przygodą.
Twój przewodnik
Mohamed
Przewodnik po Egipcie
Poprowadzi Cię przez wszystkie wyzwania i pomoże zdobyć nowe umiejętności.
Najczęstsze pytania o kurs HTML i CSS
Czy kurs HTML i CSS jest darmowy?
Tak, kurs HTML i CSS w CodeWorlds zaczniesz za darmo. Darmowe konto daje 10 jednostek paliwa dziennie i za każde zadanie płacisz paliwem. Plan premium znosi ten limit, więc możesz uczyć się bez przerw.
Ile trwa kurs HTML i CSS?
Szacowany czas nauki kursu HTML i CSS to 40-60 godzin. Kurs ma 11 modułów i ponad 843 zadań, a tempo wybierasz sam.
Czy do kursu HTML i CSS potrzebuję wcześniejszego doświadczenia?
Przed kursem HTML i CSS przyda się: Podstawowa obsługa komputera, Przeglądarka internetowa.
Czego nauczę się na kursie HTML i CSS?
Na kursie HTML i CSS nauczysz się między innymi: Semantyczna struktura dokumentów HTML5, Zaawansowane selektory i kaskadowość CSS, Responsywne layouty z Flexbox i Grid, Preprocesor SASS - zmienne, mixiny, nesting.
Jak wygląda nauka w CodeWorlds?
W CodeWorlds każdy moduł to seria krótkich lekcji z edytorem kodu na żywo, pytań sprawdzających i zadań praktycznych. Za postępy zdobywasz XP i odblokowujesz kolejne lokacje świata Starożytny Egipt.
Zacznij naukę HTML5 już dziś
Dołącz do CodeWorlds i odkryj nowoczesne metody nauki, które sprawiają, że programowanie staje się fascynujące i dostępne dla każdego.