Tvorba web stránok Frontend development - bezplatný kurz od Detskej online školy programovania Hello World, školenie 44 hodín, Termín: 3.12.2023.

Ako funguje internet

Povedzme si niečo o základných pojmoch internetu a jeho architektúre. Poďme zistiť, čo je to doména, hosting, architektúra klient-server. Nastavíme pracovné prostredie a povieme si niečo o troch pilieroch Front-end developmentu – HTML, CSS a JavaScript.

HTML

Štruktúra dokumentu HTML

Poďme vytvoriť prvé HTML stránky a pozrieť sa na príklady jednoduchých a zložitých webových stránok. Poďme zistiť, aké bloky by mali byť na našej stránke. Urobme z našich stránok prepojenie, zistime, ako sa text líši od hypertextu a aké sú značky a atribúty.

Práca s textom

Naučme sa správne pracovať s textom v HTML: rozdeľte ho na odseky, označte nadpisy a podnadpisy. Naučme sa vytvárať číslované zoznamy a zoznamy s odrážkami a citovať klasikov.

Odkazy a obrázky

Poďme sa podrobnejšie zoznámiť s odkazmi a tiež sa naučíme, ako vkladať obrázky a používať ich ako odkazy.

Rozloženie tabuľky

Vytvorme našu prvú tabuľku a zistíme, z akých značiek sa skladá. Poďme sa naučiť, ako zlúčiť bunky, zmeniť počet riadkov a stĺpcov, zarovnať text a oveľa viac. Od dizajnéra sa dozvieme aj základné rady, ako si skrášliť stôl.

Úvod do formulárov

Poďme si vytvoriť svoj prvý formulár, naučíme sa pracovať so vstupnými poľami, rozbaľovacími zoznamami, zaškrtávacími políčkami a samozrejme tlačidlami. Preštudujme si ďalšie prvky formulára, ktoré sa nám budú hodiť v budúcnosti.

CSS

Úvod do CSS

Pripomeňme si, čo je CSS a ako ho používať. Poďme sa naučiť používať CSS pri práci s HTML stránkami. Poďme si preštudovať syntax CSS a čo sú to selektory, dedičnosť as akou prioritou sú naše štýly aplikované na HTML dokument.

Selektory

Poďme študovať selektory podrobnejšie. Poďme sa naučiť, ako pristupovať k jednému alebo viacerým prvkom, aký je rozdiel medzi triedou a pseudotriedou a prvkom z pseudoprvku. Poďme sa pozrieť na pravidlá CSS a zistiť, čo sa ľudia radi pýtajú na CSS na pohovoroch.

Dedičnosť, kaskádovanie a priorita

Dozvedáme sa, že kaskadér a kaskadéri nie sú z rovnakého odboru. Poďme pochopiť princípy, podľa ktorých sa štýly CSS aplikujú na prvky HTML.

Textová výzdoba

Vráťme sa tam, kde sme začali – k textu. Naučme sa, ako urobiť náš text krásnym a užívateľsky príjemným pomocou vlastností CSS: tučné písmo, kurzíva, veľkosť, farba, pozadie a iné.

Blokový model dokumentu

Naučme sa značky div a span, ako aj to, ako nastaviť veľkosti prvkov, výplň a okraje. Poďme pochopiť, ako sa tvorí blokový model dokumentu a aké možnosti máme na umiestnenie prvkov.

JavaScript

Predstavujeme JavaScript

Poďme sa zoznámiť s tretím pilierom Front-end developmentu – JavaScriptom. Poďme zistiť, čo sú premenné, typy údajov a prečo sú potrebné. A samozrejme napíšeme náš prvý program.

Podmienky

Spomeňme si na logiku, logické operácie a ich kombinácie. Nech je sila a kontrola s nami.

Cykly

Naučme sa, ako urobiť veľa pri písaní malého kódu. Pochopme, že cyklus v rámci cyklu je jednoduchý, ale musíte byť opatrní.

Polia

Existujú ľadové masy, lesy a v programovaní sú polia. V tejto lekcii budeme študovať, čo majú spoločné a ako sa líšia. Pomôcka - veľmi nám pomôžu slučky z predchádzajúcej lekcie.

Funkcie

Ak sú premenné a ich správny názov ABC programovania, tak schopnosť pracovať s funkciami a vyberať pre ne vhodné názvy je už recept. V tejto lekcii sa naučíme, ako rozdeliť program na logické bloky a prečo je to dôležité.

Objekty

Zoznámime sa s konceptom objektov, metód a začneme sa zoznamovať s princípmi OOP.

Úvod do DOM

JavaScript by bol zbytočný, ak by nedokázal interagovať s dokumentom HTML. Dozvieme sa, čo je to DOM (Document Object Model), ale čo je dôležitejšie, naučíme sa pracovať s HTML a CSS prostredníctvom JavaScriptu.

Spracovanie udalostí

Teraz to posunieme na ďalšiu úroveň a naučíme sa, ako reagovať a interagovať s používateľom pomocou JavaScriptu. Dozvieme sa tiež, prečo môžu udalosti JavaScriptu bublať a klesať.

HTML5 a CSS3

HTML5: čo je nové a prečo?

Poďme zistiť, aké zmeny nastali v HTML5 a prečo. Poďme študovať nové prvky a analyzovať prípady ich správneho použitia.

Polohovacie prvky a mriežka

Pozrime sa na nové spôsoby štruktúrovania stránok a umiestnenia prvkov na nich.

HTML5 formuláre

Poďme preskúmať temnú stránku sily a praxe s novými formami v HTML5, ako aj so zmenami starých. Poďme pracovať s novými typmi polí na zadávanie dátumov, farieb, čísel a ako vyzvať používateľa, aby si trochu uľahčil život.

Audio a video

V tomto návode ste DJ aj editor. Počas tejto lekcie nebudeme mať čas vytvoriť si vlastný Youtube, ale veľmi sa pokúsime vytvoriť prototyp so základnými funkciami.

Práca s textom v CSS3

Poďme zistiť, aké sú možnosti a odporúčania pre formátovanie textu v najnovšej verzii štandardu.

Prechodové a transformačné efekty v CSS3

Poďme sa naučiť vytvárať animácie a rôzne efekty pomocou CSS3. Poďme sa zoznámiť s úskaliami pri vytváraní takýchto efektov.

Adaptívne rozloženie

Poďme zistiť, prečo je potrebné rozloženie adaptívne a kedy je to zbytočné a môže spôsobiť škodu. Pozrime sa na základnú syntax a samozrejme si precvičíme adaptívne rozloženie.

Flexbox a CSS Grid

Dozvieme sa o moderných prístupoch k usporiadaniu blokov, ako aj o tom, aké ťažkosti existujú pri ich používaní.

CSS preprocesory: LESS a SASS

Chcete používať premenné v CSS? Jednoducho! Zistite, aké zaujímavé veci môžete robiť pomocou preprocesorov CSS.

JavaScript na novej úrovni

ES-2015+

Čo je moderný JavaScript, „striktný režim“ a ako s tým všetkým žiť.

OOP v JavaScripte

Poďme študovať, ako sú triedy štruktúrované v modernom JavaScripte a prečo sa používajú, ak sa všetko dá urobiť pomocou funkcií. Ako funguje dedičnosť a aké ďalšie spôsoby vytvárania tried existujú v JS.

Funkcie v detaile

Poďme zistiť, čo je deklarácia funkcie a výraz funkcie, naučíme sa volať funkciu bez názvu. Pozrime sa na slovné spojenie „kontextová väzba“.

AJAX a JSON

Posuňme sa ako vývojári na novú úroveň, naučme sa vytvárať HTTP požiadavky a zistime, ako môžu server a klient medzi sebou komunikovať a nehádať sa.

Regulárne výrazy

"Ak máte problém a idete ho riešiť regulárnymi výrazmi, tak už máte dva problémy." Poďme sa naučiť, ako sa vyhnúť streľbe do nohy pomocou regulárnych výrazov.

Stavitelia, bežci úloh a správa závislostí

Bower, npm, gulp, Grunt, webpack a spol. Na tom nie je nič zložité, ale budete musieť prísť na to.

Testovanie v JavaScripte

Kde je kód, tam sú vždy chyby. Dozviete sa, ako ich počet minimalizovať a aké postupy a nástroje nám v tom pomôžu.

Algoritmy

Naučíme sa písať kód tak, aby neskôr procesor a prehliadač nepociťovali mučivú bolesť pri spúšťaní vášho programu.

ReactJS

Úvod do ReactJS

Poďme sa zoznámiť s ReactJS, naučiť sa písať jednoduché komponenty a porovnať ho s inými populárnymi frameworkami. Poďme sa zoznámiť s konceptom Virtual DOM.

Architektúra a konfigurácia aplikácií React

Poďme zistiť, aké akcie musíme vykonať, aby sme v Reacte nielen písali, ale aby sme to robili čo najefektívnejšie a najpohodlnejšie.

Vytvorenie prvej aplikácie v ReactJS

Pozrime sa bližšie na JSX, ReactComponent, ReactDOM.render, funkciu Render. Nakonfigurujeme a spustíme prvú aplikáciu, vytvoríme vzťahy medzi komponentmi a procesnými udalosťami.

Smerovanie a ReactJS

Čo je smerovanie; Poďme sa zoznámiť s ReactRouterom a jeho funkcionalitou; V našej aplikácii organizujeme smerovanie.