Digitální akademie Web

Intenzivní prezenční kurz webového frontendu

Digitální akademie Web

Příprava před kurzem

Nastavení vašeho vývojového protředí před začátkem akademie.

1

Instalace nástrojů

Před tím, než začneme tvořit weby, je potřeba si počítač vybavit nástroji, které nám usnadní práci.

2

Klávesnice a terminál

Pro všechny programátory je důležité umět psát na klávesnici speciální znaky a ovládat práci s terminálem.

HTML a CSS

Naučíte se lépe ovládat jazyky HTML a CSS pro obsahovou a vizuální tvorbu statických webových stránek.

1

Opakování a pozicování

Opakování základních znalostí HTML a CSS a vlastnost position.

2

Flexbox

Podíváme se na problematiku flexboxu. Naučíme se jaké vlastnosti má flex kontejner a flex položky.

Lekce zamčena
3

CSS selektory a specificita

Ukážeme si pokročilé CSS selektory a vysvětlíme si jak se v CSS počítá specificita.

Lekce zamčena
4

BEM a responzivní design 1

Podíváme na princip psaní CSS pomocí metodiky BEM a uvedeme responzivní design. Vysvětlíme si, co znamená mobile-first, proč a jak bychom tak měli kódovat stránky.

Lekce zamčena
5

Responzivní design 2

Navážeme na responzivní design z předchozí lekce.

Lekce zamčena

Základy Gitu

Git je nástroj pro verzování kódu, který vám usnadní správu vašeho projektu a práci v týmu.

1

Spolupráce v Gitu

Ukážeme si, jak s využítím Gitu organizovat práci více vývojářů na jednom projektu.

Lekce zamčena

JavaScript 1

Naučíte se základy programování v jazyce JavaScript, který vám umožní udělat vaše webové stránky interaktivní.

1

Úvod do JavaScriptu

Seznámíme se s jazykem JavaScript a ukážeme si jak se v JavaScriptu píší jednoduché programy.

2

Vstup a výstup, objekty

Naučíme naše programy komunikovat s uživatelem a pracovat se složitějšími daty.

Lekce zamčena
3

Práce s řetězci, podmínky

Vyzkoušíme si užitečné operace s řetězci a naučíme naše programy dělat rozhodnutí.

Lekce zamčena
4

DOM a innerHTML

Přidáme do našich programů možnost manipulovat pomocí JavaScriptu s obsahem stránky

Lekce zamčena
5

Knihovny a vlastní funkce

Ukážeme si jak v JavaScriptu používat knihovny a naučíme se vytvářet vlastní funkce.

Lekce zamčena
6

Funkce a obory platnosti

Procvičíme si psaní vlastních funkcí a ukážeme si jak pracovat s obory platnosti proměnných.

Lekce zamčena
7

Funkce vyšších řádů, události

Naučíme naše stránky reagovat na události jako je kliknutí, stisknutí klávesy nebo scrollování. K tomu budeme potřebovat porozumět funkcím vyššího řádu.

Lekce zamčena
8

Procvičování událostí, formuláře

Ukážeme si další možností práce s odálostmi a naučíme se získávat data od uživatele.

Lekce zamčena
9

Lovení chyb, pole

Naučíme se ve vlastních programech efektivně hledat chyby a ukážeme si jak pracovat s poli,

Lekce zamčena
10

Cykly

Síla počítačů spočívá především v tom, že dokáží velmi rychle opakovaně vykonávat nějakou činnost, tedy provádět takzvaný cyklus.

Lekce zamčena

JavaScript 2

Naučíte se vytvářet složitější webové aplikace a poznáte hlubší zákoutí JavaScriptu.

1

Opakování

Osvěžení znalostí nabytých v předchozích lekcích a kurzech

2

Základy Gitu

Představíme si verzovací systém Git, který nám usnadní správu a sdílení zdrojových kódů

Lekce zamčena
3

Funkcionální zpracování dat

Ukážeme si šikovné funkce pro práci s daty jako map a filter, a také takzvané destrukturování.

4

Komunikace se serverem

Vysvětlíme si fungování World Wide Webu a ukážeme si, jak ze serveru načíst data pomocí API.

Lekce zamčena
5

Jednoduché komponenty

Postupně se začneme seznamovat s komponentami a jak pomocí nich vytvářet složitější webové aplikace.

6

Vlastní DOM elementy

Ukážeme si jak vytvořit vlastní DOM elementy a udělat naše komopnenty interaktivní.

Lekce zamčena
7

Posílání dat na server

Zatím jsme data z API pouze četli. Nyní si ukážeme, jak můžeme data na server také zapisovat.

Lekce zamčena
8

Webpack a větší aplikace

Uvídíme, jak sestavovat větší aplikace pomocí nástroje Webpack

Lekce zamčena
9

Routing a autentizace

Do našich stránek přidáme routování a naučíme se pracovat s přihlášením uživatele a localStorage

Lekce zamčena
10

Cloudové databáze

Naučíme využívat cloudové databáze k vytvoření backend API

Lekce zamčena
11

Projekt Café Lóra, první část

Všechno, co jsme se doposud naučili si procvičíme na projektu takzvaně „ze života“.

Lekce zamčena
12

Projekt Café Lóra, druhá část

Pokračování opakovacího projektu, kde se zaměříme hlavně na práci s API a routováním.

Lekce zamčena

React

Díky Reactu budete schopni vytvářet profesionální webové aplikace mnohem rychleji než v čistém JavaScriptu.

1

Úvod do Reactu

Napíšeme si první aplikace v Reactu a představíme si hlavní principy tohoto moderního frameworku.

2

Podmíněné zobrazení

Naučíme si jak sestavovat CSS třídy a jak se rozhodnout, kterou část JSX chceme zobrazit.

Lekce zamčena
3

Zobrazování seznamů

Ukážeme si, jak v React komponentách zobrazovat seznamy.

Lekce zamčena
4

Události, stav

Přidáme do našich komponent stav abychom mohli měnit obsah stránky podle interakce s uživatelem.

Lekce zamčena
5

Formulářové prvky, efekty

Zapojíme do našich React aplikací formulářové prvky a ukážeme si jak pomocí efektů volat API.

Lekce zamčena
6

Komunikace dítě rodič

Představíme si základní scénáře komunikace mezi komponentami a jejich použití v praxi.

Lekce zamčena
7

Komunikace mezi sourozenci

Nejnáročnejší typ komunikace mezi komponentami je předávání informací mezi sourozenci.

Lekce zamčena
8

React router

Pomocí routeru dokážeme v Reactu vyrobit vícestránkovou aplikaci.

Lekce zamčena
9

Opakování: LeviExpress, první část

Všechno, co jsme se v Reactu naučili si procvičíme na projektu takzvaně „ze života“.

Lekce zamčena
10

Opakování: LeviExpress, druhá část

Dokončíme základní verzi LeviExpressu a troufneme si i rozšířenou funkčnost.

Lekce zamčena

Velké opakování

Na konci celého kurzu je dobré si zopakovat věci, které jsme se dosud naučili.

1

HTML a CSS

Závěrečný projekt na procvičení znalostí HTML a CSS.

Lekce zamčena