Skip to content

Instantly share code, notes, and snippets.

@svobodalukas
Last active November 11, 2019 11:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save svobodalukas/6364c8e08506332a9ffb28a8c695f6ec to your computer and use it in GitHub Desktop.
Save svobodalukas/6364c8e08506332a9ffb28a8c695f6ec to your computer and use it in GitHub Desktop.

Večerní škola / HTML + CSS

5 x 90minut + domácí úkoly, založeno na přehledu výstupních znalostí

1. Sjednotit znalosti HTML a CSS

  • struktura webové stránky (head, body), metainformace
  • základní HTML elementy (titulky, odstavec, obrázek, odkaz, oddíl)
  • co je CSS, k čemu slouží, jak propojit s HTML
  • základní vlastnosti pro formátování textu

Domácí studium:

  • vyzkoušet další HTML elementy (tabulka, seznamy, formulářové prvky)
  • metainformace v záhlaví stránky

2. HTML a CSS do hloubky

  • sémantické HTML elementy (header, footer, section, main, article)
  • jednotky v CSS - em, rem, px - jak se liší, kdy co použít
  • vlastnost display, position
  • box model v CSS
  • CSS třídy

Domácí studium:

  • CSS transformace, přechody, stíny

3. CSS Principy, časté chyby, flexbox

  • kaskáda - specificita, pořadí, důležitost - kdy má jaká vlastnost přednost
  • flexbox
  • responsivita - pružnost, media queries

Domácí studium:

  • CSS grid
  • instalace node.js

4. Jak se pracuje v praxi

  • CSS preprocesory - SCSS
  • automatizace - Webpack - jednoduchý stack s kompilací SASSu a autoreloadem

Domácí studium:

  • css jednotky vw a vh

5. Best practice

  • udržitelný CSS/HTML kód, best a bad practices
  • základy přístupnosti
  • jak publikovat stránky na web
  • propojení mezi stránkami, typy odkazů
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment