00 – Jak funguje web
Klient a server, adresa URL, DNS, HTTP a HTTPS, jak prohlížeč skládá stránku ze souborů a rozdíl mezi statickou a dynamickou stránkou.
2. ročník · Informační technologie
Lineární série lekcí pro HTML, CSS, JavaScript a postupné praktické projekty.
Posuvníky, živý HTML editor a další nástroje k lekcím HTML a CSS: box model, Flexbox, Grid, selektory, pozicování, responzivita a další. Úkoly se kontrolují samy.
Klient a server, adresa URL, DNS, HTTP a HTTPS, jak prohlížeč skládá stránku ze souborů a rozdíl mezi statickou a dynamickou stránkou.
První vlastní HTML dokument: složka projektu, index.html, základní kostra, title, nadpis, odstavec a pracovní cyklus uložit -> obnovit.
HTML jako struktura a význam obsahu: nadpisy, odstavce, strong/em, seznamy, odkazy, obrázky, relativní cesty, alt text, hr/br, div, debugging a projekt Profile Page.
První skutečná práce s CSS: samostatný style.css, propojení s HTML, elementové a class selektory, základní vlastnosti, DevTools a redesign existující stránky.
Sémantické HTML, navigace, více HTML stránek a relativní cesty. Z jednotlivých HTML prvků začneme stavět skutečný web.
Naučíme se vytvářet HTML formuláře pomocí inputů, labelů, textarea, selectu, checkboxů a dalších prvků. Vyzkoušíme si také základní validaci a zjistíme, co se stane s daty po odeslání formuláře.
Naučíme se vytvářet správně strukturované HTML tabulky, používat záhlaví, řádky a buňky a rozlišovat situace, kdy je tabulka vhodná a kdy naopak ne. Na závěr tabulku použijeme ve vlastním webu.
Vytvoříme vlastní menší web, na kterém spojíme HTML a CSS z předchozích lekcí. Web bude mít více stránek, navigaci, sémantickou strukturu, obrázky, tabulku a formulář.
Prohloubíme práci s CSS. Naučíme se chápat box model, správně používat margin, padding, border, width a max-width, zjistíme rozdíl mezi block, inline a inline-block a začneme při hledání chyb používat vývojářské nástroje prohlížeče.
První práce s rozložením stránky pomocí Flexboxu. Naučíme se skládat prvky vedle sebe, zarovnávat je, nastavovat mezery a vytvářet jednoduché responzivní řady karet.
Naučíme se přesněji vybírat prvky pomocí kombinací selektorů a pseudotříd. Zjistíme, proč se některý styl neprojeví, jak funguje dědičnost, kaskáda a přednost selektorů a jak udržet style.css přehledný.
Naučíme se vybrat správný formát obrázku, zmenšit a zkomprimovat ho, správně ho vložit a nastylovat. Přidáme favicon, obrázek na pozadí, video, zvuk a video z YouTube a ukážeme si, kde brát obrázky legálně.
Naučíme se pracovat s písmem a barvami: záložní fonty, Google Fonts, jednotky px a rem, řádkování, zápisy barev, kontrast a CSS proměnné. Na závěr navrhneme vlastní typografii a barevné schéma webu.
Formulář z lekce 05 dostane jednotný vzhled webu. Naučíme se stylovat pole, tlačítka, checkboxy a jejich stavy :hover, :focus, :disabled a :invalid a přidáme plynulé přechody pomocí transition a transform.
Naučíme se vlastnost position a její hodnoty static, relative, absolute, fixed a sticky. Vytvoříme štítek v rohu karty, text přes obrázek, navigaci, která zůstává nahoře, a tlačítko Zpět nahoru. Vysvětlíme si také z-index.
Naučíme se připravit web pro mobil, tablet i počítač: meta viewport, pružné rozměry, media queries a přístup mobile-first. Upravíme navigaci, karty, tabulku i typografii a web otestujeme v DevTools.
Naučíme se CSS Grid – rozložení do řádků a sloupců. Vytvoříme mřížku karet s jednotkou fr, galerii bez media queries a layout stránky pomocí grid-template-areas. Ujasníme si, kdy použít Grid a kdy Flexbox.
Závěrečný projekt bloku HTML a CSS. Dokončíš vlastní vícestránkový responzivní web podle kontrolního seznamu, ověříš ho validátorem a v DevTools, volitelně ho zveřejníš na GitHub Pages a odevzdáš s krátkou reflexí.
První krok k interaktivnímu webu. Připojíme k webu soubor script.js, naučíme se pracovat s konzolí v DevTools, s proměnnými let a const, datovými typy, operátory a šablonovými řetězci a budeme číst chybové hlášky.
JavaScript poprvé mění samotnou stránku. Naučíme se najít prvek pomocí querySelector, změnit jeho text pomocí textContent a přidat nebo odebrat mu třídu pomocí classList. Vše si vyzkoušíme krok za krokem na připravené stránce.
Stránka začne reagovat na uživatele. Naučíme se spustit kód po kliknutí na tlačítko pomocí addEventListener, postupně postavíme počítadlo, tlačítko pro zobrazení textu a přepínač tmavého režimu pro vlastní web.
Naučíme JavaScript rozhodovat pomocí if, else a else if. Přečteme text, který uživatel napíše do pole, převedeme ho na číslo a ošetříme prázdné pole. Tlačítko tmavého režimu bude ukazovat správný text.
Naučíme se zabalit kód do funkce, pojmenovat ho a spouštět opakovaně. Projdeme parametry a return a konečně vysvětlíme zápis () => { } z bloku kliknutí. Kód tmavého režimu a kalkulačky přepíšeme pomocí funkcí.
Kontaktní formulář dostane vlastní kontrolu. Naučíme se zachytit odeslání formuláře, zastavit ho pomocí preventDefault, zkontrolovat jednotlivá pole a zobrazit chybovou hlášku přímo u pole, které je špatně vyplněné.
Naučíme se opakovat kód cykly for a while, sčítat v cyklu a vytvářet nové prvky stránky pomocí createElement a append. Vygenerujeme seznam, násobilku na kliknutí a tabulku.
Naučíme se ukládat více hodnot do jednoho pole, pracovat s indexy, přidávat prvky a procházet pole cyklem. Z pole vygenerujeme seznam na stránce, projdeme více prvků pomocí querySelectorAll a postavíme jednoduchý seznam úkolů.
Naučíme se spustit kód se zpožděním pomocí setTimeout a opakovaně pomocí setInterval, časovač zastavit přes clearInterval a pracovat s aktuálním časem. Vytvoříme mizející hlášku, odpočet, stopky a hodiny.
Naučíme se popsat jednu věc objektem a celý katalog polem objektů. Z dat vykreslíme karty, přidáme filtr a pomocí localStorage si prohlížeč zapamatuje tmavý režim i seznam úkolů i po zavření stránky.
Naučíme se chyby hledat systematicky: číst chybové hlášky, používat console.log s rozmyslem, zastavit program breakpointem a krokovat ho v DevTools. Připravíme testovací scénáře a opravíme připravenou rozbitou aplikaci.
Závěrečný projekt bloku JavaScript. Samostatně naplánuješ, naprogramuješ a otestuješ malou webovou aplikaci podle vlastního výběru – kvíz, seznam úkolů, hru nebo kalkulačku. Je to zkouška nanečisto před ročníkovým projektem.
Celý ročníkový projekt v jedné lekci: zadání a návrh řešení, tři kontrolní body a prezentace s obhajobou. Žák vybere etapu, kterou právě odevzdává, a vyplní jen její část.