IT & Programování
Začátečník
Online
JavaScript
Node.js
Web Developer Akademie
Nauč se tvořit interaktivní webové aplikace pomocí JavaScriptu, HTML, CSS, Node.js a Express.js a s principy vibe codingu.
Na konci kurzu můžeš využít 1:1 kariérní konzultaci s recruiterkou Leničkou, která ti pomůže např. vylepšit CV nebo se připravit na pohovor.
Práce na reálných scénářích je to nejvíc, co si můžeš odnést. Dáme ti zpětnou vazbu na projekty, které vytvoříš během kurzu.
Na 4hodinovém workshopu s Jirkou Psotkou zjistíš, jak hledat práci v IT, na co si dát pozor, jak pracovat s LinkedInem, získáš přehled o trhu práce a další.
Spolupracujeme s firmami, které mají volná pracovní místa a aktivně nás oslovují, abychom dali vědět našim studentům. K nabídkám získáš přístup.
Tematické webináře, hackathony, meetupy… Potkejme se na některé z našich offline akcí nebo se zapoj do komunity na Discordu.
Pravidelně sdílíme rady a na blogu, v newsletteru a na sociálních sítích. Poslouchat můžeš taky náš „podcast“ ENGETO Drop!
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.
- Naučíš se propojit znalosti front-endu a back-endu a s principy vibe codingu a AI.
- Získáš pevné základy a certifikát, který ti otevře dveře do světa IT.
Osnova kurzu
1
- Jak správně zadávat požadavky (prompty) a rozdělovat úkoly na menší kroky
- Jak dělat kontrolu: čitelnost, edge-cases a testování výsledku
- Jak používat AI na refactoring a hledání chyb (debugging) bez ztráty kontroly
- Jak si nastavit bezpečné návyky a nepřenášet do projektu „magii bez porozumění“
2
- Základní HTML struktura stránky a rozložení obsahu (head, main, footer)
- Nadpisy, odstavce, zvýraznění textu, odkazy a obrázky
- Seznamy a další běžné prvky pro strukturování obsahu
- Blokové a řádkové elementy a kdy který použít
- Jak přidat CSS a udělat první vizuální úpravy stránky
3
- Jak funguje box model (margin, padding) a jak s ním pracovat v praxi
- Pozicování prvků pomocí position (kdy a proč použít jednotlivé varianty)
- Vkládání externího obsahu: video a mapa
- Základy flexboxu: flex-container vs. flex-item a první zarovnávání
4
- Pokročilejší práce s flexboxem pro layouty a zarovnávání
- Jak navrhovat flexibilní rozvržení, které se přizpůsobí prostoru
- Media queries: kdy je použít a jak je psát správně
- Responzivní úpravy pro mobil, tablet a desktop
5
- Jak používat konzoli a proč je to základ debuggování
- Proměnné, komentáře, template string a práce s textem
- Základní datové typy a jak zjistit typ hodnoty
- Jak načíst HTML prvky a měnit obsah nebo CSS pomocí JavaScriptu
- Vytvoření nového HTML elementu a přidání do stránky
- AI‑assisted: rychlejší debugging v konzoli a vysvětlování kódu krok za krokem (Cursor)
6
- Podmínky a větvení (if/else) a práce s více scénáři
- Logické operátory a jejich využití v praxi
- Funkce: parametry, argumenty a return
- Události v prohlížeči: jak reagovat na akce uživatele
7
- Pole (arrays): ukládání a práce s více hodnotami
- Základní typy cyklů a kdy je použít
- Praktické zpracování a transformace dat v poli
- Zaokrouhlování a práce s číselnými hodnotami
8
- Rozdíl mezi synchronním a asynchronním kódem
- Co je API a jak fungují požadavky a odpovědi
- Fetch a zpracování dat (např. JSON)
- Ošetření chyb: try/catch
- then() vs. async/await a kdy který přístup použít
- AI‑assisted: návrh struktury volání API a ošetření chyb (s kontrolou a úpravami z tvé strany)
9
- Propojování DOM, událostí a práce s daty do funkčních celků
- Mini‑projekty pro upevnění logiky a práce s webem v praxi
- Základy strukturování kódu a čitelnost (aby se ti v projektu dobře pokračovalo)
10
- Co je back-end a jaká je role serveru ve webové aplikaci
- Node.js v kostce: proč existuje a kdy se používá
- Express.js: proč je tak populární a co ti zjednoduší
- První jednoduchý Express server (spuštění, základní odpověď)
11
- Základní struktura Express aplikace
- Routy a práce s request/response (co přichází a co vracíš)
- Napojení a servírování HTML, CSS a JavaScriptu ze serveru
- Middleware: k čemu slouží a jak se používá v praxi
- AI‑assisted: rychlejší scaffold rout a middleware + review pro maximální přehlednost a udržitelnost kódu
12
- Express.js: jak fungují šablony a proč se hodí pro server‑rendered stránky
- Předávání dat ze serveru do šablony a dynamické generování obsahu
- Co je SQL a jaký problém databáze řeší
- Základní pojmy databází: tabulky, záznamy, sloupce a vztahy
13
- Základní SQL příkazy pro CRUD (SELECT, INSERT, UPDATE, DELETE)
- Filtrování a řazení dat v dotazech (WHERE, ORDER BY)
- Napojení SQL na Express: práce s databází ze serveru
- Tok dat v aplikaci: request → logika → databáze → response
14
- PostgreSQL: co to je a proč se používá v moderních aplikacích
- Nástroje a připojení databáze k Express aplikaci
- Tvorba tabulek a základní návrh databázového modelu
- Relační vazby a principy práce s daty v praxi
15
- Registrace vs. přihlášení vs. autorizace: jaký je mezi tím rozdíl
- Bezpečné ukládání hesel (hashování) a základní bezpečnostní principy
- Session a přihlášení v praxi
- Ochrana rout a práce s přístupem v aplikaci
- AI‑assisted: checklist bezpečnosti a kontrola implementace (bez slepého kopírování)
Termíny
Požadavky
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ě.
Důležité informace
Je Web 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 14 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 3měsíční Akademie,
- 12 měsíců od první lekce kurzu Datový analytik s Pythonem.
- 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 3měsíční Akademie,
- 12 měsíců od první lekce kurzu Datový analytik s Pythonem.
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.
- 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í.
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í.
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í:
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.
- 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.<img decoding="async" loading="lazy" class="intercom-interblocks-align-left" src="https://downloads.intercomcdn.com/i/o/1063051506/dca85908302896d3e3f1dc84/image.png?expires=1716804000&signature=ad93bd17a1cc9dd1e28618c478544a773bccbc92d4fffd1814d2866ab751a0d9" alt="" width="668" height="285" data-link-url="" data-height="480" data-width="1123" />
Postup je následující:
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.
- 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.<img decoding="async" loading="lazy" class="intercom-interblocks-align-left" src="https://downloads.intercomcdn.com/i/o/1063051506/dca85908302896d3e3f1dc84/image.png?expires=1716804000&signature=ad93bd17a1cc9dd1e28618c478544a773bccbc92d4fffd1814d2866ab751a0d9" alt="" width="668" height="285" data-link-url="" data-height="480" data-width="1123" />
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ě.
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ě.
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.
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í.
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.
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.
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.
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í.
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.
- 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.
Co je to vibe coding?
Vibe coding je moderní způsob psaní kódu s pomocí AI, kdy místo toho, abys všechno psal/a od nuly, popíšeš, co chceš vytvořit (např. komponentu, stránku, formulář nebo úpravu designu) a AI ti navrhne řešení. Ty pak kód upravíš, doplníš a hlavně zkontroluješ, že dává smysl a funguje správně. Je to skvělé na rychlé prototypování, generování „kostry“ aplikace nebo hledání chyb – ale neznamená to, že už nemusíš rozumět HTML, CSS a JavaScriptu. Naopak: čím lepší máš základy, tím líp dokážeš AI vést, poznáš, kdy „halucinuje“, a dostaneš z ní výstupy, které se dají použít i v reálné práci.
Mohlo by vás zajímat
