vecerni-skola-html-css.md

Večerní škola / HTML + CSS

Přehled výstupních znalostí večerního kurzu. Nejedná se o pořadí, v jakém by se témata probírala.

Základ:

HTML

• struktura webové stránky (head, body), metainformace
• znalost základních HTML elementů (titulky, odstavec, obrázek, odkaz, tabulka, seznamy, div, formulářové prvky)
• sémantika v HTML: povědomí o sémantických elementech (header, footer, section, main, article, ...)

CSS

• způsoby jak vložit do stránky
• pochopení vazby mezi HTML a CSS
• znalost základních vlastností (formátování textu a bloků, display vlastnost)
• pochopení box modelu (margin, padding, border) a vlastnosti position
• CSS jednotky: px, rem, em, % - rozdíly, kdy co použít
• CSS třídy - proč používat, výhody
• kaskáda - specificita, pořadí, důležitost - pochopení kdy má jaká vlastnost přednost
• flexbox - pochopení základního principu, povědomí o možnostech, k čemu použít v praxi
• povědomí o existenci pokročilého formátování (transformace, animace, přechody, stíny, z-index)
• jak psát dobře udržovatelný CSS kód (časté chyby, struktura, best practices)
• CSS preprocesory - základní principy na příkladu SASSu (SCSS), vědět že existují i další (LESS, PostCSS)

Obecně

• jak publikovat stránku na webu
• propojení stránek - relativní/absolutní cesty
• znát zdroje k HTML+CSS a umět je používat (jakpsatweb.cz, dokumentace, ...)
• responsivita - co to je, proč se to řeší, jak se to řeší v CSS/HTML

Témata navíc (dle času a zájmu):

• CSS Grid - vědět že existuje a co přibližně umí
• SVG - k čemu se hodí, jak vložit
• pokročilé CSS jednotky - vh, vw
• základy přístupnosti

Trochu bi přijde, že je nástřel témat vychází z dnes již překonaných způsobů psaní css. SCSS se dnes určitě používá častěji než css. Rem by mělo být používáno všude místo px apod. Za mne bych se spíš zaměřil na flexbox a jen zmínil možnosti tabulek :) než opačně. Prostě mi přijde mi, že tvůj nástřel okruhů je stejný jaký byl před 10 lety a nevím jestli je to úplně ono. Je to jen můj osobní názor, můžem se o tom pobavit.

Hmm, já si myslim, že je dobré vědět ty základy, prtž s těma se ty lidi setkají taky. Zejména u legacy systémů. A hlavně musíme nějak naplnit ty lekce.

Souhlas, můj komentář jen mířil na to, že ty základy se za těch deset let posunuly. Nevím jestli se účastníci kurzu budou primárně potýkat s maintenance legacy code :) myslím, že si spíš budou něco psát do šuplíku a k tomu je lepší se legacy codu vyhnout

@Rezi Pokud jsem dobře pochopil zaměření, tak půjde o úplné začátečníky, kteří se pravděpodobně z velké části vývojáři nestanou (a jen se do toho chtějí trochu dostat). Obávám se, že pokud půjdem hned do flexu nebo remu, tak by to moc nepobrali.
Ale souhlasím s tím, že by to mělo víc blížit současnému stavu vývoje, upravím to, díky za postřeh.

Jj, flex byl jen špatný příklad. Ale je jednoduché někoho od začátku naučit rem místo na px ;) . Né je naučit px, a na konci, když zbude čas jim říct ať px nepoužívaj a raději dělaj velikosti v em, rem a vw apod.
Je to jen malá chyba na kráse. Zbytek je rozvržen moc pěkně a dává mi to smysl. Good job!

Upravil jsem trochu strukturu a doplnil ještě responsivitu, na to jsem úplně zapomněl.

Mě přijde také dobré zmínit i úplné základy (z PX na REM) se dá přeučit během chvilinky. Já se třeba také nejdříve učil na tom, že jsem si psal vlastní gridový systém (columns with floating) i když v té době už existoval Bootstrap. Pak když jsem teprve zjistil jak mi takový framework ušetří život, tak jsem ho ocenil o to více. Pokud jsem si však potřeboval něco poupravit dle vlastních potřeb, tak díky základům jsem věděl jak to celé funguje. Za mě tedy aktuální struktura úplně super. Skvělá práce Luky. :)