Registrace

Registraci uzavíráme po naplnění kapacity (včetně náhradnic).
Registruj se!

Kontakt

Proč zvolit náš kurz?

Jana Raczová

Jana Raczová
Účastnice akce: Tvořím web

Holky, nebojte se toho!
Workshopy Czechitas jsou ideální cestou k proniknutí do tajů informatiky. Absolvujete jeden a získáte IT závislost :)

Tvořím web od A do Z - 2

Prohlub své znalosti HTML/CSS a nauč se tvořit rychlé a moderní weby. Naučíš se psát modulární, kódovat aktivní prvky uživatelského rozhraní, tvořit animované elementy, stylovat moderní layouty pomocí CSS gridu anebo zlepšit přístupnost webu.

Kdy

25. září — 11. prosince 2019
18:00 — 20:30

Kde

Czechitas Brno
Škrobárenská 511/3
budova A2
Brno, 602 00
Česká republika
https://www.czechitas.cz/cs/brno

Další informace

Počet lekcí: 12

Délka jedné lekce: 2h 30m

Vstupní znalosti: Mírně pokročilí

Typ akce: Pravidelný

Cena: 3 500 Kč


Termíny konání lekcí

25. zář. 2019 / 2. říj. 2019 / 9. říj. 2019 / 16. říj. 2019 / 23. říj. 2019 / 30. říj. 2019 / 6. lis. 2019 / 13. lis. 2019 / 20. lis. 2019 / 27. lis. 2019 / 4. pro. 2019 / 11. pro. 2019

Datagirls 20190427 0143

PRO KOHO JE WORKSHOP/KURZ URČEN:

Pro všechny, kdo chtějí prohloubit své znalosti HTML a CSS a posunout se ve tvorbě stránek na pokročilejší úroveň a naučit se další technologie, které jsou dnes pro moderní web nutností.

Kurz je pokračováním dlouhodobého kurzu Web od A do Z #1. Absolvování předchozího kurzu není striktně vzato nutné, ale ujisti se, že máš požadované znalosti HTML, CSS a responzivního webdesignu. Bez nich se v kurzu neobejdeš.

Před přihlášením zvaž časovou náročnost kurzu. Součástí kurzu jsou pravidelné domácí úkoly, z nichž část bude povinná pro úspěšné dokončení kurzu. Počítej s tím, že povinný úkol ti může zabrat i několik hodin, ale právě díky úkolům se toho nejvíce naučíš.

ANOTACE:

Moderní vývoj webů už dávno není čistě jen o HTML a CSS. Důraz se klade především na responzivní, na velikost a rychlost optimalizované weby, které jsou zároveň přístupné a použitelné pro všechny.

V kurzu navážeme na předchozí znalosti HTML a CSS a ukážeme si, jak moderně kódovat nejčastější interaktivní prvky uživatelského rozhraní bez nutnosti použít JavaScript. Vytvoříme např. rozbalovací “hamburger” menu, přepínače, záložky, fotogalerii.

Podrobně projdeme CSS grid - nejnovější techniku pro vytváření layoutu webu. Ukážeme si, jak jednoduše vytvořit i relativně komplikované stránky.

Popíšeme si několik metodik pro psaní CSS (např. nejznámější BEM) a ukážeme si jejich výhody. Zmatky v pojmenování CSS tříd nebo konflikty ve stylech budou minulostí.

Ukážeme si, jak organizovat soubory v moderním projektu. Tyto znalosti se ti budou hodit například při práci v týmu, pokud se hodláš kódování webů věnovat profesionálně.

Naučíme se používat Sass, vylepšenou “nadstavbu” CSS. Díky němu bude možné rozdělit CSS kód do spousty malých a zvládnutelných souborů, místo psaní jednoho dlouhého monolitického CSS, ve kterém se nikdo nevyzná.

Vysvětlíme si rozdíly mezi moderními obrazovými formáty - k jakým účelům jsou vhodné, jak optimalizovat jejich velikost, nebo jak správně kódovat responzivní obrázky.

Ukážeme si, jak animovat prvky uživatelského rozhraní včetně vektorové grafiky ve formátu SVG.

Projdeme si základy přístupnosti moderních webu přes WAI-ARIA atributy a další popíšeme si nejdůležitější zásady (kontrast barev, apod.).

Ukážeme si nástroje pro optimalizaci webu. Na vzorové stránce si vysvětlíme nejčastější chyby, které tyto nástroje hlásí, a vyzkoušíme si, jak tyto chyby opravit. Zaměříme se na rychlost stránek a projdeme si přípravu a optimalizaci obrázků pro web, minifikaci CSS a další techniky pro zrychlení načítání.

Přidáme do webu nejčastější analytické a marketingové nástroje (Google Analytics, Facebook pixel). Nastavíme je tak, aby pro nás sledovaly a vyhodnocovaly požadované události.

PŘEDPOKLADY:

Kurz je zamýšlen jako pokračování dlouhodobého kurzu Web od A do Z #1. Pokud máš tento kurz za sebou, znáš vše potřebné.

Nejsi-li absolventkou Webu od A do Z, nevadí. Jen se prosím ujisti, že ovládáš HTML a CSS na požadované úrovni. Měla bys:

  • Rozumět box-modelu v CSS
  • Ovládat různé druhy pozicování v CSS (relative, absolute, apod.)
  • Znát techniky pro tvorbu layoutu stránek - float a hlavně flexbox
  • Responzivní webdesign - psaní media query, mobile first přístup k tvorbě stránek
  • Když dostaneš (průměrně složitý) grafický návrh stránky, umíš ho nakódovat v HTML a CSS

Kurz je určen pro středně pokročilé, ideálně absolventky Webu od A do Z #1 nebo s odpovídajícími znalostmi.

AGENDA:
  • CSS grid - nejmodernější přístup ke tvorbě layoutů
  • Kódování responzivních UI prvků jen pomocí HTML a CSS
  • Organizace projektu
  • Metodologie pro psaní CSS - BEM, OCSS, apod.
  • Sass - vylepšené CSS
  • Optimalizace rychlosti stránek - zásady a techniky
  • Responzivní obrázky
  • Obrazové formáty a rozdíly mezi nimi
  • Vektorová grafika na webu
  • Animace
  • Přístupnost webů
  • Použití a nasazení analytických a marketingových nástrojů do webu
VÝSLEDEK:
  1. Zvládneš relativně jednoduše vytvořit stránku i s poměrně složitým moderním layoutem
  2. Budeš umět nakódovat interaktivní prvky moderního webového UI - rozbalovací menu, apod.
  3. Pochopíš rozdíly mezi obrazovými formáty vhodnými pro web a použiješ na stránce vektorovou grafiku
  4. Vytvoříš na stránce animované prvky
  5. Naučíš se psát modulární CSS, ve kterém se půjde jednoduše vyznat
  6. Zoptimalizuješ stránku tak, aby používala méně dat a zobrazovala se v prohlížečích rychleji
  7. Naučíš se psát weby přístupné pro všechny
  8. Dozvíš se, jak se o návštěvnících stránky dozvědět co nejvíce pomocí analytických nástrojů
PODMÍNKY ABSOLVOVÁNÍ KURZU:

Kury je 3 měsíční, má 12 lekcí, každý týden jedna lekce 2,5 hodiny. Součástí kurzu jsou domácí úkoly (část z nich povinných). Podmínkou pro úspěšné absolvování kurzu a získání certifikátu je docházka minimálně 75% a odevzdání povinných domácích úkolů.

Tým