Tvorba webu Frontend development - bezplatný kurz od Dětské online školy programování Hello World, školení 44 hodin, Termín: 3. prosince 2023.
Různé / / December 06, 2023
Jak funguje internet
Pojďme si říci něco o základních pojmech internetu a jeho architektuře. Pojďme zjistit, co je to doména, hosting, architektura klient-server. Pojďme nastavit pracovní prostředí a promluvme si o třech pilířích Front-end developmentu – HTML, CSS a JavaScript.
HTML
Struktura dokumentu HTML
Pojďme si vytvořit první HTML stránky a podívat se na příklady jednoduchých i složitých webových stránek. Pojďme zjistit, jaké bloky by měly být na naší stránce. Pojďme naše stránky propojit, zjistit, jak se text liší od hypertextu a jaké jsou značky a atributy.
Práce s textem
Naučme se správně pracovat s textem v HTML: rozdělte jej do odstavců, označte nadpisy a podnadpisy. Pojďme se naučit, jak vytvářet číslované seznamy a seznamy s odrážkami a citovat klasiky.
Odkazy a obrázky
Pojďme se s odkazy podrobněji seznámit a také se naučíme vkládat obrázky a používat je jako odkazy.
Rozložení tabulky
Pojďme si vytvořit naši první tabulku a zjistit, z jakých značek se skládá. Pojďme se naučit, jak sloučit buňky, změnit počet řádků a sloupců, zarovnat text a mnoho dalšího. Od designéra se také dozvíme základní tipy, jak udělat svůj stůl krásným.
Úvod do formulářů
Pojďme si vytvořit svůj první formulář, naučíme se pracovat se vstupními poli, rozevíracími seznamy, zaškrtávacími políčky a samozřejmě tlačítky. Pojďme si prostudovat další prvky formuláře, které se nám budou v budoucnu hodit.
CSS
Úvod do CSS
Připomeňme si, co je CSS a jak jej používat. Pojďme se naučit používat CSS při práci s HTML stránkami. Pojďme si prostudovat syntaxi CSS a co jsou to selektory, dědičnost as jakou prioritou jsou naše styly aplikovány na HTML dokument.
Selektory
Pojďme si selektory prostudovat podrobněji. Pojďme se naučit, jak přistupovat k jednomu nebo více prvkům, jaký je rozdíl mezi třídou a pseudotřídou a prvkem z pseudoprvku. Pojďme se podívat na pravidla CSS a zjistit, na co se lidé rádi ptají na CSS na pohovorech.
Dědičnost, kaskádování a priorita
Dozvídáme se, že kaskadér a kaskadéři nejsou ze stejného oboru. Pojďme pochopit principy, podle kterých jsou styly CSS aplikovány na prvky HTML.
Textová dekorace
Vraťme se tam, kde jsme začali – k textu. Pojďme se naučit, jak udělat náš text krásný a uživatelsky přívětivý pomocí vlastností CSS: tučné písmo, kurzíva, velikost, barva, pozadí a další.
Blokový model dokumentu
Pojďme se naučit tagy div a span a také jak nastavit velikosti prvků, odsazení a okraje. Pojďme pochopit, jak se tvoří blokový model dokumentu a jaké máme možnosti pro umístění prvků.
JavaScript
Představujeme JavaScript
Pojďme se seznámit s třetím pilířem vývoje Front-endu – JavaScriptem. Pojďme zjistit, co jsou proměnné, datové typy a proč jsou potřeba. A samozřejmě napíšeme náš první program.
Podmínky
Připomeňme si logiku, logické operace a jejich kombinace. Ať je síla a kontrola s námi.
Cykly
Pojďme se naučit, jak dělat hodně při psaní malého kódu. Pochopme, že cyklus v cyklu je jednoduchý, ale musíte být opatrní.
Pole
Existují ledové masy, lesy a existují pole v programování. V této lekci budeme studovat, co mají společného a jak se liší. Nápověda - velmi nám pomohou smyčky z předchozí lekce.
Funkce
Pokud jsou proměnné a jejich správný název ABC programování, pak schopnost pracovat s funkcemi a volit pro ně vhodná jména je již receptem. V této lekci se naučíme, jak rozdělit program na logické bloky a proč je to důležité.
Objekty
Seznámíme se s pojmem objekty, metodami a začneme se seznamovat s principy OOP.
Úvod do DOM
JavaScript by byl k ničemu, pokud by nemohl interagovat s dokumentem HTML. Dozvíme se, co je to DOM (Document Object Model), ale co je důležitější, naučíme se pracovat s HTML a CSS prostřednictvím JavaScriptu.
Zpracování událostí
Nyní to posuneme na další úroveň a naučíme se, jak reagovat a komunikovat s uživatelem pomocí JavaScriptu. Dozvíme se také, proč mohou události JavaScriptu bublat a klesat.
HTML5 a CSS3
HTML5: co je nového a proč?
Pojďme zjistit, jaké změny v HTML5 nastaly a proč. Pojďme studovat nové prvky a analyzovat případy jejich správného použití.
Polohovací prvky a mřížka
Podívejme se na nové způsoby strukturování stránek a umístění prvků na ně.
HTML5 formuláře
Pojďme prozkoumat temnou stránku síly a praxe s novými formami v HTML5 a také se změnami starých. Pojďme pracovat s novými typy polí pro zadávání dat, barev, čísel a jak uživatele vyzvat, aby si trochu usnadnil život.
Audio a video
V tomto tutoriálu jste DJ a zároveň editor. Během této lekce nestihneme vytvořit vlastní Youtube, ale velmi se pokusíme vytvořit prototyp se základní funkčností.
Práce s textem v CSS3
Pojďme zjistit, jaké existují příležitosti a doporučení pro formátování textu v nejnovější verzi standardu.
Přechodové a transformační efekty v CSS3
Pojďme se naučit vytvářet animace a různé efekty pomocí CSS3. Pojďme se seznámit s úskalími při vytváření takových efektů.
Adaptivní rozložení
Pojďme zjistit, proč je nutné rozvržení adaptivně a kdy je to zbytečné a může způsobit škodu. Podívejme se na základní syntaxi a samozřejmě si procvičíme adaptivní rozložení.
Flexbox a CSS mřížka
Dozvíme se o moderních přístupech k rozvržení bloků a také o tom, jaké potíže jsou při jejich používání.
CSS preprocesory: LESS a SASS
Chcete v CSS používat proměnné? Snadno! Zjistěte, jaké zajímavé věci můžete dělat pomocí CSS preprocesorů.
JavaScript na nové úrovni
ES-2015+
Co je moderní JavaScript, „přísný režim“ a jak se s tím vším žít.
OOP v JavaScriptu
Pojďme studovat, jak jsou třídy strukturovány v moderním JavaScriptu a proč se používají, pokud lze vše udělat pomocí funkcí. Jak funguje dědičnost a jaké další způsoby vytváření tříd existují v JS.
Funkce v detailu
Pojďme zjistit, co je Deklarace funkce a Výraz funkce, naučíme se volat funkci bez názvu. Podívejme se na frázi „kontextová vazba“.
AJAX a JSON
Posuňme se jako vývojáři na novou úroveň, naučíme se zadávat HTTP požadavky a naučíme se, jak spolu mohou server a klient komunikovat a nehádat se.
Regulární výrazy
"Pokud máte problém a hodláte ho vyřešit regulárními výrazy, pak už máte dva problémy." Pojďme se naučit, jak se vyhnout střelbě do nohy pomocí regulárních výrazů.
Tvůrci, běžci úloh a správa závislostí
Bower, npm, gulp, Grunt, webpack a spol. Na tom není nic složitého, ale budete na to muset přijít.
Testování v JavaScriptu
Kde je kód, tam jsou vždy chyby. Dozvíte se, jak jejich počet minimalizovat a jaké postupy a nástroje nám v tom pomohou.
Algoritmy
Naučíme se psát kód tak, aby později procesor a prohlížeč nepociťovaly mučivou bolest při spouštění vašeho programu.
ReactJS
Úvod do ReactJS
Pojďme se seznámit s ReactJS, naučit se psát jednoduché komponenty a porovnat jej s jinými populárními frameworky. Pojďme se seznámit s konceptem Virtual DOM.
Architektura a konfigurace aplikací React
Pojďme zjistit, jaké akce musíme provést, abychom v Reactu nejen psali, ale také co nejefektivněji a nejpohodlněji.
Vytvoření první aplikace v ReactJS
Podívejme se blíže na JSX, ReactComponent, ReactDOM.render, funkci Render. Nakonfigurujeme a spustíme první aplikaci, navážeme vztahy mezi komponentami a procesními událostmi.
Směrování a ReactJS
Co je směrování; Pojďme se seznámit s ReactRouterem a jeho funkčností; Směrování organizujeme v naší aplikaci.