Kurz JavaScriptu, HTML a CSS

Front-end Developer Akademie

Front-end Developer Akademie patří mezi naše nejkomplexnější kurzy a během 18 týdnů tě čeká výuka, domácí cvičení, projekty, konzultační hodinyVíc jak 250 nabitých hodin. JavaScript, HTML a CSS jsou nepostradatelnou součástí každého webu. Tyto technologie jsou snadné na pochopení a jednoduché webové stránky díky nim dokážeš vytvořit už za pár týdnů. Ať se chceš věnovat webům nebo se ti takové znalosti hodí třeba pro správu e-shopu, tenhle kurz je ideální. Nepotřebuješ žádné předchozí znalosti, začneme od základů.

Zobrazit termíny kurzu
Nejbližší termín 29. října

Přihlas se včas a získej 50% early bird slevu!

Registruj se mezi prvními a získej kurz za půlku. Výhodná cena platí vždy jen omezenou dobu!

Co je to front-end?

Když otevřeš jakoukoliv webovou stránku nebo aplikaci, vše, co vidíš před sebou na obrazovce, ať už jsou to texty, obrázky, menu nebo tlačítka, to všechno patří do „front-endu“. Můžeš si to představit jako „vitrínu“, která je určena pro návštěvníky, aby s ní mohli pohodlně interagovat. Front-end zahrnuje vše, co je spojené s tím, jak web vypadá a jak s ním uživatel může pracovat.

Kurz zaměřený na tvorbu webu

JavaScript, HTML a CSS ti zaručí uplatnění

Chceš se stát webovým vývojářem? Pak se bez znalosti HTML, CSS a JavaScriptu neobejdeš. JavaScript navíc patří mezi programovací jazyky, které zásadně stoupají na oblibě, takže krok vedle s tímhle kurzem určitě neuděláš a o uplatnění nebudeš mít nouzi. HTML i CSS se naučíš opravdu rychle a už během chvíle uvidíš velký progres. A když přidáš i základy JavaScriptu, firmy se o tebe poperou. Ať už chceš tvořit vlastní weby nebo si prostě jen rozšířit svoje znalosti a dovednosti, HTML, CSS a hlavně JavaScript je vždycky dobrá volba, protože je jednoduše používá 100 % webů. 

Kurz JavaScriptu, HTML a CSS = ideální start

Pokud se ve světě IT teprve rozkoukáváš, pak je pro tebe webový vývoj pomocí JavaScriptu, HTML a CSS jako dělaný. Osvojit si tyhle programovací jazyky a technologie je určitě jednodušší než začít od nuly třeba s Javou. Poměrně rychle se tak můžeš stát front-end vývojářem interaktivních webových aplikací. A těch je v dnešní době potřeba spousta. 🙂

Můžeš se vydat různými směry

Front-end vývojář, back-end vývojář, vývojáři mobilních aplikací, automatizovaní testeři, UX designer, správce e-shopů, specialista na e-mail marketing a spoustu dalších profesí. To je jen malá ochutnávka z toho, kam se můžeš se znalostí JavaScriptu dostat. Je to opravdu všestranný jazyk a když ho doplníš HTML a CSS, máš kariéru jistou.

Je pro tebe Akademie vhodná?
  • Zvažuješ práci v IT a potřebuješ nějak začít
  • Láká tě kariéra vývojáře
  • Chápeš, že znalost JavaScriptu, HTML a CSS je v dnešní online době téměř povinnou výbavou

Průběh Akademie

Začneme pěkně od začátku. Budeš potřebovat jen notebook a pořádnou chuť se učit, protože nudit se rozhodně nebudeš. Čekají tě desítky hodin studia pod vedením zkušených lektorů.

Výuka probíhá online formou live webinářů, které si případně můžeš pustit i ze záznamu. Získáš taky přístup na výukovou platformu, kde najdeš interaktivní cvičení, projekty i další kurzy. Zároveň máme v rámci Front-end Developer Akademie každý týden konzultační hodiny s lektory. Tyhle konzultace jsou nepovinné, je z nich záznam a je na tobě, jestli je využiješ. 

Všechny důležité informace ti řekneme na první hodině, takže se ničeho neboj. Na začátku ti ukážeme všechny nástroje, které budeš během celého kurzu potřebovat. Získáš taky 8měsíční přístup do e-learningových materiálů ke kurzu.

Čeká tě 18 online webinářů s lektorem po 3 hodinách a spousta materiálů na procvičování doma. Celkem tedy desítky až stovky hodin práce – záleží, jak moc tomu budeš chtít věnovat. 🙂 Na každé hodině ti nejdříve ukážeme nový koncept a teorii si pak hned procvičíš v připraveném prostředí – vše online, z pohodlí domova. Novou látku si tak hned osaháš v praxi. Během výuky dostaneš prostor se na cokoli zeptat, lektor ti rád se vším poradí. A pokud náhodou live webinář nestihneš, můžeš si lekci znovu pustit ze záznamu.

Všechny nové znalosti a schopnosti budeš trénovat i doma. Počítej, že ti samostudium průměrně zabere asi 5–10 hodin týdně, pokud si chceš z kurzu odnést maximum. Úkoly na vzdělávacím portále ti zaručí, že budeš kurz zvládat a dobře si osvojíš látku. A pokud budeš během samostudia potřebovat pomoci, stačí napsat na Discord. V rámci Front-end Developer Akademie probíhají každý týden i konzultační hodiny, takže budeš mít další prostor cokoliv probrat přímo s lektory. Konkrétní den si vždy domlouvá lektor přímo se studenty. Konzultace nejsou povinné a jsou z nich záznamy.

V průběhu celé Akademie budeš pracovat na komplexních projektech a nespočtu dílčích úkolů. V nich zužitkuješ vše, co se naučíš a procvičíš si tak veškerou látku. K projektům dostaneš individuální zpětnou vazbu – dozvíš se, kde je potřeba zamakat a co ti jde naopak dobře. Můžeš využít i Live Chat podporu či komunikaci v rámci naší Discord komunity.

O certifikaci ECJWD (ENGETO Certified Junior Web Developer) můžeš požádat po absolvování celé Front-end Developer Akademie. Podmínkou jeho získání je úspěšné splnění všech projektů a úkolů, a to nejpozději 8 měsíců od první lekce. Do té doby máš celkem 3 pokusy, o certifikát se žádá online skrze výukový portál. Zadání jednotlivých projektů ti vysvětlí lektoři v průběhu Akademie a pokud o certifikát nestojíš, projekty vypracovávat nemusíš.

Studijní plán

1. Základy HTML

HTML je základní kostra každé webové stránky. V této lekci zjistíš, jak HTML funguje a naučíš se ho psát od úplných začátků. Ukážeme si, jak pracovat v editoru Visual Studio Code, který bude tvým hlavním programovacím nástrojem pro celý kurz.

Naučíš se základní HTML elementy, ze kterých se skládá skoro každá webová stránka – nadpisy (<h1>, <h2>,…), texty (<p>), seznamy (<li>, <ul>, <ol>), tabulky (<table>, <tr>, <td>) a další (<div>).

Nezůstaneme ale jen u základního výčtu různých elementů – rovnou se dozvíš i triky, jak kód napsat tak, aby vypadal profesionálně a čitelně. Vysvětlíme si rozdíly mezi blokovými a řádkovými elementy a a ukážeme si, jak využít sémantické elementy pro lepší čitelnost i SEO.

  • Co je HTML a jak funguje jako kostra webu
  • Jak pracovat ve Visual Studio Code
  • Základní stavební bloky webové stránky (nadpisy, texty, seznamy, tabulky)
  • Rozdíl mezi blokovými a řádkovými elementy
  • Jak využít sémantické elementy stránky pro lepší čitelnost i SEO

2. Úvod do CSS

Dnes už nestačí, aby stránka jen fungovala, musí i dobře vypadat. V této lekci tě čeká úvod do CSS (Cascading Style Sheets, česky kaskádové styly). Právě CSS dodá webu barvy, tvary, celkový vizuální styl a dokonce i animace.

Ukážeme si tři způsoby zápisů (inline, pomocí tagu <style> a pomocí externího souboru) a vysvětlíme si, která varianta se hodí pro které využití.

Naučíš se, jak počítače identifikují jednotlivé elementy pomocí CSS selektorů (třída, identifikátor nebo pseudotřída). Díky nim dokážeš stránce přiřadit konkrétní vlastnosti.

A samozřejmě se naučíš, jak fungují základní vizuální prvky na stránkách – jak prohlížeče pracují s barvami, v čem se měří vzdálenosti, jak měnit vlastnosti písma, a hlavně jak to všechno využít pro změnu vzhledu stránky.

  • Metody, jak přiřazovat CSS styly (inline, <style>, externí soubor)
  • Jak fungují CSS selektory (třídy, identifikátory, pseudotřídy)
  • jak na webu fungují barvy a vzdálenosti
  • Základy typografie a vizuálního stylu stránky

3. Boxmodel, pozicování, vlastnost display, schování prvků

V této lekci se naučíš pracovat s rozložením prvků na stránce. Dozvíš se, jak změnit přirozený tok stránky a jak prvky umístit přesně tam, kde je chceš mít. Přestože už máme vyspělejší postupy a techniky, k vlastnostem, které si ukážeme na této lekci, se budeš vždycky vracet.

Ukážeme si boxmodel – princip, podle kterého prohlížeč chápe každý prvek na stránce jako obdélník složený z obsahu, vnitřního odsazení (padding), rámečku (border) a vnějšího odsazení (margin). Díky tomu pochopíš, proč se prvky chovají tak, jak se chovají, a jak správně nastavovat jejich velikost (width, height) i mezery mezi nimi. Bez toho se při tvorbě webu prostě neobejdeš.

Dál se podíváme na vlastnost position a její varianty, díky kterým můžeš prvky vyjmout z přirozeného toku stránky a umístit je kamkoliv na stránku.

Na závěr se dozvíš, jak využít blokové a řádkové elementy k zobrazení elementů vedle sebe a také jaké máme metody pro schování některého prvku. Všechno si samozřejmě ukážeme na praktických příkladech.

  • Jak ovlivňovat přirozený tok stránky pomocí vlastností z boxmodelu (padding, margin, border, width a height)
  • Jak naopak narušit přirozený tok stránky pomocí vlastnosti position
  • Jak zobrazit prvky vedle sebe block vs inline-block)
  • Různé způsoby schování prvků

4. Responzivní design, práce s obrázky, media query

Dnešní web musí fungovat na mobilu, tabletu i počítači. V této lekci se naučíš základy responzivního designu – tedy jak psát kód, který se umí přizpůsobit různým zařízením.

Naučíš se, jak používat media query pro změnu vlastností na základě viewportu (aktuální velikosti okna) a dokážeš tak vytvořit stránku, která bude vypadat dobře na mobilu, notebooku nebo i velkém monitoru.

Podíváme se i na práci s obrázky, protože ty jsou často kamenem úrazu. Naučíš se používat vlastnosti jako object-fit nebo object-position a další triky, díky kterým obrázky správně zobrazíš, roztáhneš nebo ořízneš podle potřeby.

  • Tipy, jak vytvořit responzivní design a přizpůsobit stránku různým zařízením
  • Jak používat media queries
  • Jak na responzivní obrázky (object-fit, object position)

5. Úvod do flexboxu

V této lekci se naučíš pracovat se základy flexboxu, což je moderní způsob, jak efektivně uspořádávat a zarovnávat prvky na stránce.

Ukážeme si rozdíl mezi flex-containerem (rodičem) a flex-itemem (potomkem) a projdeme základní vlastnosti, díky kterým vytvoříš téměř jakékoliv rozložení prvků na stránce. Naučíš se tak pracovat s flex-direction, flex-wrap, align-contents a justify-content.

Nezůstaneme ale jen u jednoho flexbox prvku. Podíváme se i na to, jak lze flexboxy zanořovat do sebe a jak ti pomůžou při tvorbě responzivního designu.

  • Jak vytvořit základní layout jednodušeji pomocí flexboxu
  • Jak použít vlastnosti flex-containeru jako jsou flex-direction, flex-wrap, align-items nebo justify-content
  • Jak používat flexbox v kombinaci s ostatními vlastnostmi
  • Jak kombinovat flexbox s responzivním designem

6. Pokročilé vlastnosti flexboxu

Základy flexboxu už znáš, teď půjdeme dál. Podíváme se, jaké vlastnosti můžeme přidělit flex-itemu. Ukážeme si, jak můžeme nezávisle měnit jejich šířku i to, jak vyplní přidělený prostor pomocí vlastností flex-basis, flex-grow a flex-shrink.

Všechno si do detailu vysvětlíme a ukážeme na praktických příkladech, ať nemusíš tápat, co která vlastnost dělá.

  • Jak ovlivnit chování flex-itemů uvnitř jejich rodiče
  • Jak měnit šířku a chování prvků (flex-basis, flex-grow, flex-shrink)
  • Jak řídit rozložení více flexbox prvků
  • Praktické příklady pokročilého zarovnávání

7. Grid

Úvod do vývoje webu (HTML, CSS) – zakončíme lekcí o gridu. Grid je další silný nástroj pro tvorbu layoutu. Umožní ti rozdělit stránku do mřížky, kam můžeš usazovat jednotlivé prvky, a mít tak nad rozmístěním prvků úplnou kontrolu.

Začneme u rodiče, kde vytvoříme mřížku pomocí grid-template-columns a grid-template-rows. Následně si ukážeme oba přístupy, jak umisťovat prvky do této mřížky – buď jejich pozici určí rodič, nebo potomek sám. Na závěr si ukážeme další vlastnosti rodiče, které ti umožní mřížku ještě více přizpůsobit.

Po této lekci už budeš mít v ruce nejdůležitější nástroje moderního CSS – media query, flexbox a grid. Díky nim dokážeš vytvořit prakticky jakýkoliv layout, od jednoduchých stránek až po složité aplikace.

  • Jak vytvořit základní gridovou mřížku
  • Jak umístit prvky do mřížky pomocí rodiče (grid-template-columns, rows)
  • Jak umístit prvek do mřížky pomocí jeho vlastních vlastností
  • Jak kombinovat grid s flexboxem pro komplexní layout

8. Úvod do JavaScriptu

Objev svět JavaScriptu krok za krokem! V této lekci tě čeká první seznámení s programovacím jazykem, který stojí za každou moderní webovou stránkou. JavaScript je jazyk, který „rozhýbává“ web – umožňuje ti vytvářet interaktivní tlačítka, formuláře, animace i celé aplikace.

Začneme od úplných základů – vysvětlíme si, co je JavaScript a proč je tak důležitý. Ukážeme si, jak nastavit editor (prostředí, ve kterém píšeš kód), napsat první řádky kódu a vypsat výsledky do konzole (jednoduché okno, kam si můžeš nechat programem vypsat texty nebo výsledky výpočtů).

Nebude chybět ani procvičování a praktické příklady – naučíš se pracovat s proměnnými (místa, kam si ukládáš data), zobrazovat zprávy pomocí alert, prompt a confirm (okna, která vyskočí v prohlížeči a komunikují s uživatelem) a krok za krokem pochopíš, jak propojit JavaScript s HTML prvky na stránce (třeba tlačítkem nebo odstavcem).

Podíváme se také na změnu CSS stylů (barvy, velikosti, rozložení prvků), takže tvůj kód bude mít okamžitý dopad na vzhled webu.

Na závěr tě čeká komplexní úloha, ve které si všechno vyzkoušíš v praxi a ověříš, že JavaScript už není jen tajemný pojem, ale nástroj, který dokážeš ovládat.

  • Co je JavaScript a proč je důležitý pro web
  • Jak nastavit editor a napsat první kód
  • Jak pracovat s proměnnými a konzolí
  • Jak zobrazovat zprávy (alert, prompt, confirm)
  • Jak propojit JavaScript s HTML a měnit CSS styly

Praktická úloha: První interaktivní mini-aplikace

9. Datové typy, práce s HTML tagy, první praktické příklady

V této lekci se ponoříš hlouběji do světa JavaScriptu a naučíš se pracovat s datovými typy, které jsou základem každého programu. Jde o způsob, jakým program ukládá a rozlišuje hodnoty (např. číslo, text, pravda/nepravda). Ukážeme si, jak zjistit datový typ, jak správně převádět (parsovat) hodnoty a jak provádět matematické operace přímo v kódu.

Kromě toho se zaměříme na propojení JavaScriptu s HTML – vytvoříme nové tagy (to jsou „stavební kameny webu“, např. <p> pro odstavec), naplníme je obsahem a naučíme se je dynamicky přidávat do stránky. Díky tomu se tvoje weby stanou interaktivnějšími a živějšími.

Čekají tě i dva praktické projekty – postavíš si vlastní kalkulačku a aplikaci na platby v restauraci.

  • Co jsou datové typy a proč jsou základem každého programu
  • Jak převádět hodnoty (parsovat) mezi jedním datovým typem a druhým (např. z textu na číslo)
  • Jak propojit JavaScript s HTML tagy a měnit obsah stránky
  • Praktické projekty: Kalkulačka a aplikace na výpočet plateb

10. Podmínky, dark a light mode, logické operátory, funkce

V této lekci se naučíš, jak dát svému kódu logiku a rozhodování.

 

Začneme u základů pravdy a nepravdy a postupně se dostaneme k podmínkám – tedy kódu, který se spustí jen tehdy, když je splněná určitá situace. Ukážeme si různé způsoby zápisu podmínek: klasické if/else, ternární operátor (zkrácený zápis podmínky na jeden řádek) nebo větvení pomocí switch (přehledné rozdělení více možností). Zjistíš také, co jsou truthy a falsy hodnoty. Díky tomu můžeš řídit tok programu podle situace.

 

Vyzkoušíš si logické operátory „a zároveň“ i „nebo“, které ti umožní vytvářet složitější podmínky. V praxi si to ukážeme na atraktivním příkladu: přepínání mezi light a dark modem na webu (světlý a tmavý vzhled stránky).

 

Poté se zaměříme na funkce – malé kódy bloku, které vykonávají konkrétní úkol. Ukážeme si, jak je psát, jak jim předávat parametry, co znamenají argumenty a jak funguje příkaz return (vrácení výsledku funkce). Dozvíš se, jak funkce využívat opakovaně a efektivně v reálných scénářích. Funkce pro tebe budou zásadní pro další část kurzu, kde se setkáš s událostmi v prohlížeči.

  • Jak psát podmínky v JavaScriptu (if/else, switch, ternární operátor)
  • Co jsou truthy a falsy hodnoty
  • Jak fungují logické operátory (a zároveň, nebo)
  • Přepínání light/dark mode na webu pomocí podmínek
  • Co jsou funkce, parametry, argumenty a return

11. Události, pole a pokročilá práce s HTML tagy, cykly

V této lekci se zaměříme na to, jak udělat web ještě interaktivnější a efektivnější. Začneme událostmi – to jsou akce uživatele na stránce (kliknutí na tlačítko, pohyb myši, psaní do políčka…), na které může JavaScript okamžitě reagovat. Naučíš se, jak události zachytit a propojit s kódem, který se spustí, aby uživatel viděl okamžitou reakci (např. klikneš na tlačítko a změní se text). Díky tomu uživatelé uvidí, že tvoje aplikace opravdu žije.

Pak se podíváme na pole (arrays) a jejich metody – zjistíš, jak ukládat a pracovat s více hodnotami najednou, jak je procházet a jak využít výkonné nástroje, které ti JavaScript nabízí. Ukážeme si i práci s více HTML tagy současně a vysvětlíme si vyšší funkce (tzv. HOF), které ti usnadní práci s daty.

Velká část lekce bude věnovaná cyklům – od forEach přes klasické for, for of, for in až po while a do/while. Právě díky cyklům se naučíš, jak efektivně opakovat části kódu, aniž by bylo nutné stejné příkazy psát pořád dokola

  • Jak fungují události a jak na ně reagovat v kódu
  • Co jsou pole (arrays) a jak s nimi pracovat
  • Jak využívat metody pole pro efektivnější práci
  • Co jsou vyšší funkce (High-Order Functions, HOF)
  • Jak používat různé typy cyklů v JavaScriptu (for, forEach, while…)

12. Math, náhoda a komplexní hra, refactoring

Tahle lekce tě zavede do světa matematiky v JavaScriptu a ukáže ti, jak ji využít v praxi. Seznámíš se s objektem Math – vestavěným nástrojem v JavaScriptu, který obsahuje užitečné funkce (tzv. metody). Pomocí nich můžeš zaokrouhlovat čísla, počítat odmocniny nebo generovat náhodná čísla. A protože učení je nejlepší na skutečném projektu, pustíme se společně do tvorby vlastní hry na házení kostkou.

Projedeš si celý proces krok za krokem: od přípravy projektu a samotného hodu kostkou, přes počítání bodů, stylování aplikace a zobrazení výsledků, až po kompletní dokončení hry. Dozvíš se také, jak efektivně psát kód pomocí principu DRY (Don’t Repeat Yourself) a jak dělat úpravy a refactoring, aby byla aplikace čistá a přehledná.

Kromě toho se podíváme i na práci s CSS třídami – jak je přidávat, odebírat a přepínat, což si vyzkoušíš na praktickém příkladu.

Na konci lekce budeš mít v rukou hotovou hru s kompletním kódem a získáš dovednosti, které využiješ při tvorbě dalších interaktivních aplikací.

  • Co je objekt Math a jaké užitečné metody nabízí
  • Jak generovat náhodná čísla (např. simulace hodu kostkou)
  • Princip DRY a proč je důležitý
  • Co je refactoring a jak psát čistší a udržitelnější kód, aniž by došlo ke změně jeho funkčnosti
  • Jak pracovat s CSS třídami pro změnu vzhledu aplikace
  • Projekt: Kompletní hra na házení kostkou

13. Praktické projekty – práce s formulářem, scrollování, twitterovské políčko

V této lekci se zaměříme na práci s formuláři a událostmi, které tvoří základ každé interaktivní webové aplikace. Naučíš se zachytit odeslání formuláře, získat data od uživatele a provést jejich validaci (tedy kontrolu, např. jestli je e-mail ve správném formátu). Zjistíš také, jak formulář upravit, přehledně nastylovat a jak na něj aplikovat refactoring, aby byl kód čistý a udržitelný.

Podíváme se i na událost scrollování (posouvání stránky nahoru nebo dolů) – od přípravy projektu, přes efektní stylování, až po samotnou logiku, jak reagovat na pohyb po stránce. Naučíš se vytvářet plynulé animace, reagovat na změny a psát kód, který působí moderně a profesionálně.

Nakonec si vyzkoušíš projekt ve stylu „twitterovského políčka“ na počítání znaků v textovém poli. Začneš přípravou a zachycením vstupu, následně naprogramuješ samotné počítání vstupů a na závěr přidáš i vizuální stylování (např. změnu barvy, když uživatel překročí limit).

  • Jak fungují formuláře a jak zachytit jejich odeslání
  • Co je validace dat a jak ji použít v praxi
  • Jak reagovat na událost scrollování a využít ji k animacím či změnám na stránce
  • Jak vytvořit interaktivní textové pole, které počítá znaky
  • Praktické projekty: Práce s formulářem, událost scrollování a „twitterovské políčko“

14. Objektově orientované programování – 1. část

V této lekci se podíváme na objektově orientované programování (OOP) – způsob, jak psát kód přehledněji, znovupoužitelně a blíže tomu, jak přemýšlíme o světě kolem sebe. Nejprve si vysvětlíme, co to OOP je, co jsou objekty a proč patří mezi nejdůležitější koncepty moderního programování.

Naučíš se pracovat s třídami (šablonami, podle kterých se objekty vytvářejí) a konstruktory (speciální části kódu, které se spustí při vytvoření nového objektu a nastaví mu jeho základní hodnoty) a zjistíš, jak vytvářet metody a atributy. Ukážeme si je nejen teoreticky, ale i na praktických příkladech – díky tomu si je dokážeš hned představit v reálném kódu.

Lekce tě také povede k hlubšímu přemýšlení o programování – projdeš dvě části věnované způsobu, jak správně uvažovat v OOP, aby ti psaní kódu dávalo smysl.

Na konci lekce budeš mít solidní základ v OOP, díky kterému zvládneš psát strukturovanější a profesionálnější aplikace.

  • Co je OOP a proč je důležité
  • Co jsou objekty, atributy a metody
  • Jak fungují třídy (classes) a konstruktory
  • Jak psát kód přehledněji a znovupoužitelněji pomocí OOP
  • Praktické příklady objektů a tříd v JavaScriptu

15. Objektově orientované programování – 2. část

V této lekci si vyzkoušíš, jak se principy OOP používají přímo v praxi na reálném projektu – vytvoříme si vlastní bankovní aplikaci. Krok za krokem si vyzkoušíš, jak se připravuje třída s konstruktorem, jak funguje zapouzdření atributů a metod a co to znamená mít kód přehledně uspořádaný a bezpečný.

Budeš pracovat s různými funkcemi aplikace: od nastavení PINu, přes záznam příjmů a výdajů, až po zobrazení pohybů na účtu. Díky tomu uvidíš, jak se OOP principy promítají do každodenního programování a jak z nich těží reálné projekty.

Navíc se naučíš tři základní pilíře OOP – dědičnost, zapouzdření, abstrakci a polymorfismus. Tyto principy ti otevřou dveře k psaní ještě flexibilnějších a chytřejších aplikací, které jsou bezpečné a připravené na změny.

Na konci lekce budeš mít nejen hotovou miniaplikaci, ale i jasnou představu o tom, jak využívat OOP v praxi a proč patří k nejdůležitějším znalostem každého programátora.

  • Jak aplikovat OOP na reálný projekt (bankovní aplikace)
  • Co znamená zapouzdření (encapsulation) a proč je důležité
  • Jak funguje dědičnost, polymorfismus a abstrakce
  • Jak vytvářet kód, který je flexibilní a bezpečný
  • Projekt: vlastní bankovní aplikace krok za krokem

16. Asynchronní JavaScript a API

V této lekci se naučíš, jak pracovat s daty z externích zdrojů a posunout svoje aplikace na úplně novou úroveň. Nejprve si vysvětlíme rozdíl mezi synchronním kódem (program běží krok za krokem, dokud něco neskončí, další část nezačne) a asynchronním kódem (program zvládne dělat více věcí najednou, aniž by se zasekl).

Ukážeme si, proč je asynchronita naprosto klíčová pro práci s API (Application Programming Interface) – to je rozhraní, přes které aplikace mezi sebou komunikují. Díky API můžeš třeba stáhnout předpověď počasí, zobrazit mapu nebo získat citáty z databáze.

Projdeme si praktický trénink na citátech – naučíš se získat data z API, vložit je na stránku a správně je zpracovat pomocí funkcí. Ukážeme si, jak psát kód bezpečně s využitím try/catch a jak pracovat s moderním přístupem async/await, který ti výrazně zjednodušía zpřehlední práci s asynchronním kódem.

Poté se vrhneme na reálné projekty – naprogramuješ aplikaci, která zobrazuje data o vesmírné stanici, a také aplikaci, která pracuje s údaji o různých zemích. Na příkladech si vyzkoušíš, jak data nejen získat, ale i smysluplně prezentovat uživateli.

Na závěr se podíváme na to, kde hledat další API a jak s nimi začít pracovat. Díky této lekci získáš dovednost, která ti umožní napojit svoje aplikace na téměř nekonečné množství dostupných dat.

  • Rozdíl mezi synchronním a asynchronním kódem
  • Co je API a proč je důležité pro moderní web
  • Jak pracovat s async/await a try/catch
  • Jak získávat a zobrazovat data z API
  • Projekt: Aplikace s daty o vesmírné stanici a aplikace o zemích světa

17. TypeScript – 1. část

V této lekci se ponoříš do světa TypeScriptu – nástroje, který posune tvoje programování na vyšší úroveň. Nejprve si ukážeme, jak TypeScript nainstalovat a správně nastavit, a vysvětlíme si, proč se vyplatí ho používat. Díky typům a tzv. type inference získáš větší jistotu v kódu a odhalíš chyby dřív, než se vůbec projeví. To znamená méně bugů, rychlejší hledání chyb a kód, který je srozumitelný i pro ostatní v týmu.

Naučíš se, jak v TypeScriptu fungují funkce, objekty a pole, a zjistíš, jak využívat type alias, volitelné vlastnosti, readonly modifikátor nebo složitější koncepty jako intersection a union types. Podíváme se také na literal types a ukážeme si, jak správně používat type assertion.

Samozřejmě nebude chybět ani spousta praktických ukázek – projdeš si postupně jednoduchá i složitější cvičení a vyzkoušíš si, jak si napsat vlastní TypeScript kód od úplného základu.

  • Co je TypeScript a proč je bezpečnější než samotný JavaScript
  • Jak funguje type inference a proč ti šetří práci
  • Jak používat type alias, volitelné vlastnosti a readonly
  • Co znamenají union a intersection types
  • Jak psát první kód v TypeScriptu a nastavit projekt

18. TypeScript – 2. část

V této lekci se naučíš, jak pracovat s pokročilejšími prvky TypeScriptu a vytvoříš si vlastní projekt od základu. Začneme s tuple a enum, které ti umožní lépe strukturovat a zpřehlednit data. Poté si projdeme prakticky, jak založit TypeScript projekt – od vytvoření projektu, přes nastavení souborů jako include a exclude, až po práci s více soubory.

Důležitou součástí bude i práce s interface, kde se naučíš, jak správně definovat rozhraní a proč jsou tak mocným nástrojem pro psaní čitelného a udržitelného kódu.

Navíc TypeScript v této fázi propojíme s principy objektově orientovaného programování (OOP). Vyzkoušíš si datové typy v kombinaci s OOP, naučíš se používat modifikátory přístupu (public, private, protected), a také čtyři základní pilíře OOP – zapouzdření, dědičnost, polymorfismus a abstrakci. Díky praktickým příkladům uvidíš, jak vše funguje přímo na stránce.

  • Co jsou tuple a enum a kdy se vyplatí je použít
  • Jak založit a nastavit vlastní TypeScript projekt
  • Jak používat interface k popisu objektů
  • Jak propojit TypeScript s principy OOP
  • Jak fungují modifikátory přístupu (public, private, protected)
  • Jak aplikovat čtyři pilíře OOP v TypeScriptu

Cíle kurzu

Naučíš se tvořit webové stránky od nuly pomocí HTML, CSS a JavaScriptu.

Pochopíš základy responzivního designu a další trendy, které se dnes ve vývoji webů používají.

Vše si vyzkoušíš prakticky a získáš portfolio projektů do CV.

Získáš pevné základy a certifikát, který ti otevře dveře do světa IT.

Pomůžeme ti i po kurzu

Příprava portfolia a CV
  • Zkonzultujeme ti portfolio na GitHubu
  • Získáš zpětnou vazbu na projekty
  • Po odevzdání všech projektů dostaneš certifikát
Kariérní poradenství
  • Poradíme ti, jak a kde hledat práci
  • Osobní studijní koordinátor
  • Chatovací skupina na Discordu s lektorem a studenty

Lektoři

David Šetek JavaScript a React lektor

David rád vzdělává lidi. Jeho cílem je měnit lidem pomocí vzdělávání život. Na IT ho zaujala volnost a kreativita. Žádná myšlenka není nedosažitelná. A to se snaží předat studentům. Aktuálně pracuje jako programátor a mezi jeho největší koníčky patří studium AI, kybernetické bezpečnosti a hackingu.

Viliam Vateha Front-end Developer v TeamGuru

Viliam vystudoval KISK na MU v Brně a o programování se začal zajímat při psaní diplomové práce. Od Pythonu a krátké fáze automatizovaných testů postupně přešel k front-endu. Vili ti bude dobře rozumět, protože sám prošel několika ENGETO kurzy.

Anna Kmentová Student of Computer Science

Anička je celoživotní nadšenec do matematiky a vědy, ale i tvoření nových věcí a zlepšováků. Ideální kombinaci obojího našla právě v programování. Studuje MatFyz a pro lektorování se rozhodla, protože věří, že programování je pro každého, a chce pomáhat ostatním lidem objevovat jeho kouzlo.

Karel Geyer Back-end & front-end vývojář

Karel je back-end vývojář a nadšený student informatiky, který si oblíbil vývoj webových aplikací v .NET a Reactu. Vyzkoušel si tvorbu her v Unity i Unreal enginu a zajímá ho i vývoj aplikací v qT frameworku. Karel se neustále učí nové věci a rád se dělí o své znalosti s ostatními. Rád vidí, jak jeho studenti získávají nové schopnosti a dovednosti v programování. Věří totiž, že programování není jenom o psaní kódu, ale také o tvorbě nových a inovativních nápadů a jejich proměně v reálné produkty.

Šimon Janča

Šimon je počítačový nadšenec (čti „nadšený šílenec“), který se zabývá fungováním věcí a snaží se pro klienty vymyslet vždy co možná nejlepší řešení. Záleží mu na osobním přístupu a rozvoji v IT znalostech i jinde. Má za sebou gympl, kousek VŠ, několik obsáhlých kurzů a nespočet dokumentací. Taky několik let pokusů (a omylů) v PHP, JavaScriptu (v Reactu i Vanille), Linuxu a dalších technologiích. A pár let praxe. Chce předávat své znalosti a největší radost je pro něj vidět vývoj svých studentů. Je hudebníkem a momentálně se učí učit na pedagogické fakultě UP.

Tomáš Glabazňa Software consultant v ControlTech s.r.o.

Tomáš má dlouholeté zkušenosti s vedením kurzů věnovaných front-endovýcm technologiím, od HTML a CSS, přes JavaScript k VueJS a Reactu. Sám se se živý vývojem front-endu, lektorování jej ale naplňuje a zakládá si na kvalitní výuce a upřímné zpětné vazbě.

Co na studium s námi říkají studenti

Všechna hodnocení
4.9 (316 hodnocení)

Engeto můžu jen doporučit. Nedávno jsem dokončila Front-end Developer Akademii a jsem ráda, že jsem si vybrala kurz právě od Engeta. Všichni lektoři jsou moc milí, šikovní a nápomocní, vše srozumitelně vysvětlí a člověk se opravdu něco naučí 😊 Určitě jsme se neviděli naposledy.

Dominika Bartošová

Absolvovala jsem kurz "Front-end developer akademie". Vše bylo srozumitelně vysvětleno, obsáhlé materiály, lektoři ochotní a nápomocní. Člověk zpracovával 2 projekty. Kurz byl trošku časově náročnější (každý týden 3 hodiny přednáška + nepovinné konzultace den předem + zpracovávání projektu, případně i nepovinných úkolů mezi lekcemi), ale za mě určitě velmi přínosný a jsem ráda, že jsem měla možnost se ho zúčastnit.

Veronika Tomanová
Všechna hodnocení

Příběhy a reference studentů

David Langr | ENGWTO
Příběh absolventa David, Software developer v engine2 s.r.o. David využil dlouholeté zkušenosti z letectví, přidal znalosti programování a teď pracuje jako Software Developer pro společnost, kde může kombinovat IT i právě znalosti z letectví. Přečíst celý příběh Všechny příběhy
David Langr | ENGWTO
David, Software developer v engine2 s.r.o. 9:33
Marie Fardová | ENGETO
Maruška, Testerka v KBC GS 8:18
Matěj Švéda | ENGETO
Matěj, Back-end Developer v ENGETU 4:50
Radek Zeman | ENGETO
Radek, Python vývojář v Enverus 8:46
Verča, Data Engineer v Komerční bance 6:21
Jakub Boček | ENGETO
Kuba, Datový specialista v České spořitelně 6:18
Erik Nisler | ENGETO
Erik, Java vývojář v CGI 2:55

Spolupracujeme s desítkami top firem

Často kladené otázky

Obecně o kurzu

Je Front-end Developer Akademie vhodná i pro úplné začátečníky?

Dokonce úplně nejvhodnější! Akademii startujeme od úplných začátků, takže se nemusíš bát ničeho záludného. 🙂

Co když zameškám jednu hodinu? Můžu si ji nahradit?

Ano! V případě online studia máš možnost si pustit záznam a látku dostudovat kdykoliv budeš chtít. Součástí tvého studia je i náš online výukový portál, na kterém najdeš obsah všech lekcí, projekty i správná řešení a další úkoly. Pokud budeš potřebovat pomoct, stačí využít náš live chat – reagujeme zpravidla do několika hodin.

Zvládnu studovat Akademii i během práce nebo studia?

Určitě, spousta našich absolventů to tak měla. Počítej ale s tím, že ti Akademie zabere cca 10–15 hodin týdně po dobu 18 týdnů (3 hodiny na lekci plus minimálně 10 hodin týdně samostudia). Pokud máš odhodlání a vůli na sobě pracovat, určitě to zvládneš! 🙂

Do kdy mám přístup k materiálům na výukovém portále?

Přístup k materiálům máš:

  • 3 měsíce od první lekce 1–3denního intenzivního kurzu (typicky Excel, Úvod do testování softwaru, OOP v Pythonu apod.)
  • 4 měsíce od první lekce měsíčního kurzu (typicky React),
  • 8 měsíců od první lekce 1,5–3měsíční Akademie,
  • 12 měsíců od první lekce kurzu Datový analytik s Pythonem nebo Tester s Pythonem.

Kariérní podpora a certifikace

Poskytuje ENGETO kariérní poradenství?

Jasně, přeci tě v tom nenecháme! 🙂 Pokud máš opravdu zájem, hotové všechny úkoly a projekty a tvým cílem je získat práci v IT, velice rádi ti pomůžeme. Naši absolventi mají možnost účastnit se:

  • Kariérní konzultace s Lenkou Skalickou: Lenka má velmi bohaté zkušenosti z oblasti náboru talentů do technologických firem, a tak ti dokáže poradit opravdu na míru. Konzultace probíhá online 1:1.
  • Kariérního workshop s Jirkou Psotkou: Obsahově nabušený 4hodinový workshop, v rámci kterého se probírají témata jako přehled dění na trhu práce, inzerce a platy, kde a jak hledat práci, detailní rozbor CV, práce s LinkedInem, jak se připravit na pohovor, (de)motivace, strach/nejistota ze změny a spoustu dalšího. Workshop má omezenou kapacitu lidí, takže se dostane i na tvoje specifické dotazy.

Jak můžu získat certifikát ECJWD – ENGETO Certified Junior Web Developer?

O certifikaci ECJWD můžeš požádat po absolvování celého kurzu Front-end Developer Akademie a odevzdání všech projektů, kdy jsou projekty ohodnocené lektorem jako splněné. Na odevzdání máš 8 měsíců od začátku Akademie a celkově 3 pokusy.

Pro získání certifikátu tedy nemusíš skládat žádnou certifikační zkoušku. Po splnění kritérií jen kontaktuješ studijní koordinátory, kteří ti certifikát vystaví.

Platba a financování

Můžu uhradit kurz formou splátek?

No jasně! Akademii je možné uhradit na 2 splátky. Při této volbě se celková cena počítá z plné sumy (nezapočítává se žádná sleva). Každá splátka je pak ve výši poloviny ceny Akademie. Postup nákupu kurzu na splátky najdeš níže nebo prostě napiš na info@engeto.com.

Postup je následující:

  • Vlož zvolenou Akademii do košíku.
  • V košíku doplň fakturační údaje.
  • Do poznámky připiš, že máš zájem o nákup na splátky.
  • Jako platební metodu vyber Nákup na fakturu a objednej.

Do 24 hodin na svůj e-mail obdržíš 2 faktury. První fakturu (1. splátku) uhradíš ihned. Splatnost druhé faktury (2. splátka) je 30 dnů od začátku kurzu.

Je možné na kurzy čerpat dotaci MPSV a nechat si uhradit až 82 % ceny kurzu?

Ano! 😍 A je to za nás úplně skvělá příležitost, jak si vzdělání a lepší pracovní příležitosti ještě víc zpřístupnit.

Takže – ENGETO je v e-shopu Úřadu práce registrované jako vzdělávací zařízení. Znamená to, že Úřad práce hradí až 82 % z ceny našich kurzů. Kurzy v databázi vyhledáš pod stejným jménem, jako na našem webu. Zobrazí se ti ale pouze v případě, že do začátku zbývá 30 a více dní. Níže jsme ti sepsali podrobnější informace:

Pokud budeš mít jakýkoliv dotaz, určitě se nám ozvi, rádi poradíme. 🙂

Technické požadavky

Jaké jsou požadavky na technické vybavení?

Hardware: Na naši Akademii stačí mít notebook s pamětí alespoň 4 GB RAM a procesor s jedním jádrem. Pro uživatelský komfort bude ideální mít alespoň 8 GB RAM a procesor se 4mi jádry. Účastníci na kurzu mají notebooky, které slouží víc než 8 let. Bude ti stačit prakticky cokoliv.

Software: Máš Windows (ideálně verze 11 a novější), OS X nebo Linux? Jakýkoliv operační aktuální systém je v pohodě.

O HTML, CSS a JavaScriptu

V jakém jazyce začít programovat?

JavaScript je pro naprosté začátečníky ideální volbou. Stejně tak nešlápneš vedle, pokud si vybereš Python. Detailněji se výběru programovacího jazyka věnujeme v tomto článku u nás na blogu: Jaký programovací jazyk si vybrat?

Co dělá front-end developer a jaké technologie využívá?

Úkolem front-end developera je přeměnit návrh webové stránky (často vytvořený designérem) na skutečný, funkční web. Používá k tomu různé programovací jazyky, jako jsou HTML, CSS a JavaScript.

HTML používá na to, aby postavil „kostru“ stránky (texty, odkazy, obrázky), CSS použije na to, aby té „kostrě“ dal „oblečení“ (styly, barvy, rozložení) a JavaScript dodává stránce „život“ (interakce, animace, dynamické změny bez nutnosti obnovovat stránku).

Zajímá tě, jaké technologie musí front-end vývojář ovládat? Přečti si tento článek u nás na blogu.

Co je front-end a back-end?

Front-end je vše, co vidíš na obrazovce. Ve světě webu je to právě ta část, kterou vidí a se kterou interaguje návštěvník stránky/aplikace: design, rozložení, animace a všechno, co se děje, když na něco klikneš nebo po stránce pohybuješ.

Back-end zahrnuje servery, databáze a aplikace, které běží na pozadí webové stránky/aplikace. Tedy části, které uživatel přímo nevidí ani s nimi interaguje, ale které jsou nezbytné pro její funkčnost.

Takže zatímco front-end je to, s čím přímo „komunikuješ“ na webové stránce, back-end je všechno, co se musí stát v pozadí, aby web mohl správně fungovat. Obě tyto části spolu úzce spolupracují.

Jaký je rozdíl mezi JavaScriptem a Javou?

JavaScript běží hlavně v prohlížečích a oživuje webové stránky/aplikace přidáním interaktivních a dynamických prvků (jako jsou formuláře, galerie obrázků nebo třeba animace), které dělají z procházení webu zážitek. S pomocí JavaScriptu můžeš taky programovat online hry, vytvářet aplikace, které fungují i offline, nebo dokonce vyvíjet komplexní webové aplikace, jako jsou sociální sítě nebo e-shopové platformy.

Naproti tomu Java je programovací jazyk, který se využívá pro budování komplexních aplikací běžících na serverech nebo v mobilních zařízeních, kde se klade důraz na bezpečnost, výkon a škálovatelnost.

Přestože mají Java a JavaScript něco málo společného a mohou se doplňovat ve vývoji moderních aplikací, jsou to velmi rozdílné jazyky určené pro odlišné účely. A to, že mají společnou část názvu, je spíše historickou náhodou než ukazatelem jejich podobnosti. Detailní představení JavaScriptu – co umí, na co se používá a jak se liší od Javy rozebíráme u nás na blogu v tomto článku.

Co je to HTML?

HTML (HyperText Markup Language) je standardní jazyk a základní kámen pro tvorbu a strukturování obsahu na internetu. Pomocí HTML můžeš vytvářet webové stránky, určit, kde bude text, obrázky, odkazy na jiné stránky apod. Každý prvek na stránce je definován pomocí HTML značek (tagů), které říkají webovému prohlížeči, jak má daný obsah zobrazit.

Více detailů o HTML se dozvíš v tomto článku.

Co je to CSS?

CSS (Cascading Style Sheets) v překladu znamená „kaskádové styly“. Je to jazyk, který se používá pro popis vzhledu a formátování dokumentů napsaných převážně v jazyku HTML nebo XML. CSS definuje, jak by webové stránky měly vypadat na straně uživatele – tedy jaké barvy, fonty, rozměry a další stylové prvky by měly mít jednotlivé části stránky.

Podrobnosti o CSS dozvíš v tomto článku.

Co je to skript/skriptování?

Skriptování, především prostřednictvím JavaScriptu, je neoddělitelnou součástí front end vývoje moderních webových stránek. Skriptování umožňuje vývojářům a administrátorům psát krátké programy (skripty), které mohou spouštět aplikace, manipulovat s daty, komunikovat s jinými programy a provádět mnoho dalších operací.

Skript je soubor napsaný v programovacím jazyce, který automaticky provádí úlohy bez toho, aniž by je uživatel musel provádět ručně. Můžeš si to představit jako soubor instrukcí, který říká počítači nebo programu, co má dělat, krok za krokem. Skripty se často používají pro automatizaci opakujících se úkolů, zpracování dat, správu systémů, vytváření webových stránek a aplikací, a mnoho dalších věcí.

Co jsou to skriptovací jazyky?

Skriptovací jazyky vykonávají automatizované úkoly. Jsou obvykle jednodušší a flexibilnější než jiné programovací jazyky. Mezi populární skriptovací jazyky patří:

  • JavaScript: Jeden z nejpopulárnějších jazyků pro webové stránky, který umožňuje vytvářet interaktivní a dynamické uživatelské rozhraní.
  • Python: Velmi oblíbený jazyk pro automatizaci, zpracování dat, vědecký výpočet a mnoho dalších úkolů díky své jednoduchosti a čitelnosti.
  • Bash (Shell script): Používá se v unixových a linuxových operačních systémech pro automatizaci úkolů na úrovni operačního systému.
  • PHP: Skriptovací jazyk na straně serveru, široce používaný pro vývoj webových aplikací.
  • Ruby: Jazyk známý svou jednoduchostí a produktivitou, často používaný pro webové aplikace.

Jaroslav Tylich | ENGETO

Máš dotazy? Ozvi se studijnímu koordinátorovi!

Jaroslav Tylich Vácha

Stačí se ozvat na čísle +420 773 087 597 nebo na e-mailu info@engeto.com.