Projekt
Neon Noc
Web vymyšleného hudebního festivalu od prázdného souboru po hotovou stránku.
V náhledu vidíte, kam se dostaneme: hlavička, hero s odpočtem, line-up, program, časté otázky a formulář na vstupenky. Na telefonu i na desktopu.
Každý krok staví na tom předchozím. Nové řádky v kódu vpravo jsou zvýrazněné. Klávesy ← → přeskočí na další krok, M přepne náhled na mobil.
Kapitola 1 · Kostra HTML
Hlavička, obsah, patička
Každá stránka začíná kostrou ze sémantických elementů. Nahoře header s logem a navigací, uprostřed main, dole footer.
Odkazy v menu vedou na #kotvy: na sekce, které budou mít stejné id. Připomenutí: header, nav, footer, kostra stránky.
Kapitola 1 · Kostra HTML
Hero sekce
První věc, kterou návštěvník uvidí: kdy a kde, název festivalu, jedna věta a tlačítko na vstupenky.
Číslo v odpočtu zatím nahrazují tři tečky. Spočítá ho až JavaScript v kapitole 10. Tlačítko je obyčejný odkaz a s třídou btn: nic neodesílá, jen skočí na vstupenky.
Kapitola 1 · Kostra HTML
Line-up z karet
Šest interpretů, každý ve vlastní kartě article: obrázek, jméno a žánr s dnem.
Obrázky jsou zatím obrovské, srovnáme je v kapitole 5. id="lineup" je cíl odkazu z menu. Viz article a img.
Kapitola 1 · Kostra HTML
Program v tabulce
Kdo kdy hraje, to jsou data v řádcích a sloupcích. Na to je tabulka.
Tabulku balíme do div class="table-wrap". Zatím nic nedělá, ale na telefonu se bude hodit. Viz table.
Kapitola 1 · Kostra HTML
Časté otázky
Otázky, které se rozbalí kliknutím. Žádný JavaScript: umí to samotné HTML.
Zkuste v náhledu na otázku kliknout. Viz accordion.
Kapitola 1 · Kostra HTML
Formulář na vstupenky
Jméno, e-mail a typ vstupenky. Každé pole má popisek v label, takže kliknutí na popisek přesune kurzor do pole.
required nepustí prázdné pole, type="email" zkontroluje zavináč. Prázdný odstavec #dekujeme je schovaný atributem hidden, ukáže ho JavaScript. Viz form, input, select.
Obsah je kompletní. Vypadá jako dokument z roku 1995, ale všechno podstatné už na stránce je. Zbytek je CSS.
Kapitola 2 · Základní vzhled
Barvy do proměnných
Celý web používá pár neonových barev. Uložíme je jednou do proměnných v :root a dál se na ně jen odkazujeme přes var().
Když se rozhodneme pro jinou růžovou, změníme ji na jednom místě. Viz proměnné.
Kapitola 2 · Základní vzhled
Nadpisy velkými písmeny
Festivalový styl: tučné nadpisy, velká písmena a trochu prostoru mezi nimi.
text-transform mění jen vzhled. V HTML zůstává „Line-up“, takže screen reader nečte hlásku po hlásce. Viz text.
Kapitola 3 · Hlavička
Logo
Logo je jen text. Druhé slovo je ve vlastním span, aby mohlo mít jinou barvu.
Kapitola 3 · Hlavička
Menu ve flexboxu
Hlavička i menu jsou flex containery. Hlavička skládá logo a menu pod sebe a centruje je. Odkazy v menu stojí v řádku, a když se nevejdou, zalomí se.
Logo a menu pod sebou jsou rozvržení pro telefon. Na desktopu je dáme vedle sebe až v kapitole 9: tak se pracuje mobile first. Viz flexbox.
Kapitola 3 · Hlavička
Sticky header
Hlavička zůstane při skrolování nahoře. Poloprůhledné pozadí s rozmazáním backdrop-filter nechá obsah pod ní jemně prosvítat.
Skrolujte v náhledu: hlavička zůstane. z-index zajistí, že bude nad kartami. Viz pozicování a sticky header.
Kapitola 4 · Hero
Scéna v pozadí
Hero zabere skoro celou výšku okna a obsah vycentruje. V pozadí je obrázek scény a přes něj gradient, který dole přejde do barvy stránky.
Vrstvy v background se píšou odshora: gradient je první, takže leží nad obrázkem. center / cover je pozice a velikost obrázku. Viz pozadí a gradienty a hero sekce.
Kapitola 4 · Hero
Neonový nápis
Záře neonu je jen několik stínů textu přes sebe: malý a ostrý, větší růžový a velký fialový.
clamp(3rem, 14vw, 9rem) znamená: 14 % šířky okna, ale nejméně 3rem a nejvíc 9rem. Nápis tak roste s oknem a na telefonu se pořád vejde. Viz výpočty a stíny.
Kapitola 4 · Hero
Datum, věta a odpočet
Datum v tyrkysové s velkými rozestupy, výraznější věta pod nadpisem a tlumený odpočet.
Kapitola 4 · Hero
Svítící tlačítko
Gradient z růžové do fialové, kulaté konce a růžová záře. Při najetí myší tlačítko poskočí a záře zesílí.
border: 0, font: inherit a cursor: pointer v plném kódu vpravo jsou kvůli formuláři: stejnou třídu btn má i button, a ten má od prohlížeče vlastní rámeček a písmo. Viz transitions a transformace.
Kapitola 5 · Line-up
Společný styl sekcí
Line-up, program, otázky i vstupenky mají stejnou třídu section. Jedno pravidlo jim dá maximální šířku, vycentrování a prostor kolem.
scroll-margin-top nechá nad sekcí místo, když na ni skočíme z menu. Jinak by nadpis zajel pod sticky header. Viz úzký sloupec.
Kapitola 5 · Line-up
Karty v gridu
Karty poskládá grid. Nepíšeme, kolik sloupců chceme. Řekneme jen, že každý má mít aspoň 280 px, a grid si spočítá, kolik se jich vejde.
Zmáčkněte M: na telefonu je jeden sloupec, bez jediné media query. Viz grid a grid karet.
Kapitola 5 · Line-up
Karta interpreta
Karta dostane tmavší pozadí a zaoblené rohy. Obrázek bude vždy čtverec, ať má soubor jakýkoli rozměr.
overflow: hidden ořízne obrázek do zaoblených rohů karty. object-fit: cover obrázek neroztáhne, ale ořízne. Viz rozměry.
Kapitola 5 · Line-up
Karta poskočí
Po najetí myší karta vyjede o kousek nahoru a rozzáří se tyrkysově.
transition patří do pravidla .artist, ne do :hover. Jinak by karta plynule vyjela, ale zpátky by skočila. Viz pseudotřídy.
Kapitola 6 · Program a otázky
Tabulka programu
Buňky dostanou vnitřní okraje a jen spodní linku. Řádek pod myší se podbarví, takže se v programu dobře čte.
Viz řádky a buňky.
Kapitola 6 · Program a otázky
Tabulka na telefonu
Čtyři sloupce se na úzký displej nevejdou. Tabulce nastavíme nejmenší šířku a obalu .table-wrap dovolíme vodorovné skrolování. Stránka zůstane v klidu a posouvá se jen tabulka.
Teď se ukáže, proč jsme tabulku zabalili do div. Bez obalu by se do strany posouvala celá stránka.
Kapitola 6 · Program a otázky
Rozbalovací otázky
Každá otázka je panel. Otevřená otázka zrůžoví. Pozná se podle atributu open, který prohlížeč přidá sám.
[open] je selektor atributu. Viz selektory.
Kapitola 7 · Formulář a patička
Pole formuláře
Formulář i každý label jsou jednoduché gridy: věci pod sebou s mezerou. Pole dostanou tmavé pozadí a zaoblení jako karty.
Pole formuláře nedědí písmo stránky. Bez font: inherit by měla malé systémové písmo. Tučnost, kterou by zdědila z label, hned zase vrátíme na normální. Viz label.
Kapitola 7 · Formulář a patička
Kde právě píšu
Pole, do kterého se píše, dostane tyrkysový obrys. Tlačítko v gridu by se roztáhlo na celou šířku. justify-self: start ho vrátí na jeho přirozenou šířku.
Obrys nikdy jen tak nemažte (outline: none). Kdo ovládá web klávesnicí, podle něj pozná, kde je.
Kapitola 7 · Formulář a patička
Patička
Tlumený text na středu a tenká linka nahoře. Patička nemá křičet.
Pravidlo .dekujeme v kódu vpravo schválně nemá display. Přebilo by atribut hidden a poděkování by bylo vidět hned.
Kapitola 8 · Pohyb
Neon, který bliká
Skutečný neon občas cukne. Animace drží nápis skoro pořád rozsvícený a jen na konci každé čtyřsekundové smyčky dvakrát problikne.
Někomu blikání vadí, a tak si v systému vypne animace. prefers-reduced-motion to pozná a animaci vypne. Viz animace.
Kapitola 9 · Responzivita
Telefon je hotový
Podívejte se na náhled. Na telefonu už všechno funguje: logo a menu pod sebou, nadpis zmenšený přes clamp, karty v jednom sloupci, tabulka se posouvá.
To je mobile first. Základní CSS píšeme pro úzký displej a širší obrazovky jen vylepšujeme.
Viz mobile first.
Kapitola 9 · Responzivita
Vylepšení pro desktop
Od 720 px šířky je místa dost. Logo a menu dáme vedle sebe a sekcím přidáme prostor.
Breakpoint s min-width platí pro všechno širší než 720 px. Tím se mobile first pozná. Zmáčkněte M a porovnejte. Viz media queries.
Kapitola 10 · JavaScript
Odpočet dní
Kolik dní zbývá do festivalu? Od data začátku odečteme dnešek. Rozdíl dvou dat je v milisekundách, tak ho vydělíme počtem milisekund za den.
Math.ceil zaokrouhlí nahoru, takže poslední den před festivalem ukáže 1, ne 0. Když festival už začal, místo čísla napíšeme větu. Viz podmínky a kam s JavaScriptem.
Kapitola 10 · JavaScript
Poděkování za objednávku
Webový server zatím nemáme, takže formulář nikam neodešleme. Zachytíme event submit, zabráníme přenačtení stránky a ukážeme poděkování se jménem.
Vyplňte formulář v náhledu a odešlete ho. hidden = false poděkování ukáže, form.reset() vyčistí pole. Eventy probereme podrobně v lekcích o práci se stránkou.
Kapitola 11 · Do souborů
Tři soubory místo jednoho
Vpravo vidíte všechno v jednom kuse. Skutečný web má HTML, CSS a JavaScript každé ve svém souboru:
index.html: obsahstyle.css: všechno ze<style>script.js: všechno ze<script>obrazky/: scéna a portréty
V hlavičce index.html je pak propojíme:
defer spustí skript až po načtení celé stránky, takže querySelector najde, co hledá. Viz zápis CSS. Hotový web po souborech je v hotovo/.
Shrnutí
Co jsme postavili
Použili jsme
- sémantickou kostru, tabulku,
detailsa formulář - CSS proměnné, flexbox, grid a
clamp - gradienty, stíny, transitions a
@keyframes - mobile first a jednu media query
- trochu JavaScriptu: datum, podmínka, event
Zkuste sami
- přidat sedmého interpreta (a třetí stage do programu)
- změnit celou barevnou paletu jen v
:root - schovat menu na telefonu pod hamburger (lekce Menu s hamburgerem)