Web po krocích.
Jeden element, jedna stránka. Skrolujte a sledujte, jak se element zapisuje, jaké má atributy a jak se styluje.
HTML
Stavební kameny stránky.
Sémantické elementy
Texty
Formuláře
Obecné kontejnery
Layouty
Jak z elementů header, main, section, aside, footer a div poskládat rozvržení stránky. Každý layout na desktopu i na mobilu.
- Kostra stránky Hlavička, obsah a patička vždy dole
- Úzký sloupec Vycentrovaný obsah s čitelnou šířkou
- Obsah a sidebar Dva sloupce, na mobilu pod sebou
- Tři sloupce Navigace, obsah a panel vedle sebe
- Grid karet Karty, které se samy přeskládají
- Hero sekce Velký blok přes celou šířku a obsah pod ním
-
Pojmenované oblasti
Layout přes
grid-template-areas - Mobile first Začít úzkou obrazovkou
Chytré komponenty
Hotové části stránky, které se samy přizpůsobí obrazovce. Pokud to jde, jen pomocí HTML a CSS.
- Menu s hamburgeremNa telefonu pod tlačítkem, na desktopu v řádku
- AccordionFAQ z
detailsasummary - TabyPřepínání obsahu bez JavaScriptu
- ModalDialog přes ztmavenou stránku
- CarouselGalerie se scroll snapem
- Sticky headerHlavička, která se při skrolování zmenší
- Dark modeBarvy podle nastavení systému
- TooltipBublina u tlačítka nebo ikony
CSS
Jak se CSS zapisuje, jak vybírá elementy a co všechno umí nastavit.
Základy
Box model
Layout
Vzhled
Pohyb
JavaScript
Interaktivita a práce se stránkou. Pod náhledem je konzole, kam skript vypisuje.
Projekty
Celá věc od prázdného souboru po hotový výsledek. Krok za krokem s učitelem, nebo samostatně podle zadání.
- Neon Noc Web festivalu: HTML, CSS a responzivita
-
Kalkulačka Grid tlačítek a JavaScript Připravujeme
-
Pexeso Hra se stavem a vyhodnocením Připravujeme
Ověření znalostí
Interaktivní úlohy: dopsat CSS podle cílového vzhledu, navrhnout HTML strukturu, doplnit tělo funkce. Ve třech úrovních: basic, advanced a expert.
- HTMLStruktura podle vzhledu
- CSSNastylovat hotové HTML
- LayoutyRozvržení stránky · připravujeme
- KomponentyČásti, které se přizpůsobí · připravujeme
- JavaScriptDoplnit funkci