Starożytny Egipt
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.
Czego się nauczysz
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
9 moduły pełne interaktywnych ćwiczeń i praktycznych projektów
Wprowadzenie
Samouczek
Pierwsze kroki w świecie HTML
15 ćwiczeń
Droga do Heliopolis
Podstawy HTML
Znaczniki, atrybuty, struktura dokumentu
25 ćwiczeń
- Jak działa internet
- Przeglądarki, HTTPS i adresy IP
- Formatowanie tekstu w HTML
- Linki i nawigacja w HTML
- Obrazy w HTML
- Historia i ewolucja internetu
- Mini-projekt: Wizytówka Egipskiego Odkrywcy
- Semantyka w HTML
- Listy HTML
- Właściwości Elementów HTML
- Tabele HTML
- Formularze HTML
- Pliki wideo w HTML
- Gdzie szukać informacji o HTML?
- Projekt: Kompletny przewodnik po internecie
Zagadki hieroglifów
Podstawy CSS
Selektory, kolory, czcionki, box model
35 ćwiczeń
- Wprowadzenie do CSS
- Reguła CSS
- Struktura CSS i formatowanie
- Tworzenie Projektu HTML/CSS: Przewodnik
- 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
Zaawansowany CSS, Flexbox
Layout, pozycjonowanie, Flexbox
30 ćwiczeń
- Flexbox - elastyczny układ
- Oś pionowa czy pozioma?
- Dopasowanie elementów w osi poziomej
- Oś główna i oś poprzeczna Flexbox
- 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ść
Media queries, mobile-first approach
20 ćwiczeń
Z wizytą u Kleopatry
Animacje CSS
Transitions, animations, transforms
18 ćwiczeń
- CSS Transform - przekształcenia 2D i 3D
- CSS Transitions - płynne przejścia między stanami
- Animacje CSS
- Animacja CSS: Słoneczna Barka Faraona
- animation-timing-function
- Zaawansowane Animacje CSS z @keyframes
- Skróty animacje
- Główne Zadanie: Kompleksowa Animacja Strony
- animation-direction
- Wydajność animacji CSS - optymalizacja i GPU acceleration
- Projekt główny - Animowana Galeria 3D Portfolio
Dolina Nilu
SASS
Zmienne, mixiny, nesting, partials
15 ćwiczeń
CSS Grid
CSS Grid
Zaawansowane layouty dwuwymiarowe
20 ćwiczeń
Komnata faraona
Projekt główny
Budowa kompletnej strony internetowej
18 ć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
- 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 - Nowoczesna strona portfolio z zaawansowanymi technikami CSS
- Czym jest dostępność (a11y) i WCAG
- Semantyczny HTML a dostępność
- ARIA - Accessible Rich Internet Applications
- Nawigacja klawiaturowa - tabindex, focus, skip links
- Dostępne formularze - labele, błędy, fieldset/legend
- Dostępne obrazy i multimedia
- Kontrast kolorów i typografia dostępna
- Testowanie dostępności - narzędzia i metody
- Projekt: Dostępna strona Muzeum Egipskiego
- Chrome DevTools - panel Elements, Console, Network, Lighthouse
- Emmet - szybkie pisanie kodu HTML
- Walidatory HTML i CSS - kontrola poprawności kodu
- Favicon i Open Graph meta tagi
- Optymalizacja wydajności - minifikacja, kompresja, lazy loading
- Web Fonts - Google Fonts i @font-face
- Hosting statycznych stron - GitHub Pages, Netlify, Vercel
- Zaawansowane techniki workflow - meta tagi, komentarze, zmienne CSS
- Projekt: Kompletna strona Muzeum z pełnym workflow
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.
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.