Popis kurzu HTML, CSS, JavaScript kurz pro začátečníky

Kurz zaměřený na HTML, CSS a JavaScript vás zavede do webového světa a frontendového programování. Naučíme vás vytvářet plnohodnotné webové stránky a aplikace. Každý web, na který se díváte pohánějí technologie: HTML, CSS a JavaScript a my se těmto technologiím budeme věnovat od úplných základů. Bez znalostí těchto technologií není možné se stát webovým programátorem. Mimo jiné spolu s tímto kurzem pochopíte i principy programování, takže naučit se jiný programovací jazyk už pro vás nebude tak složité.

HTML nám slouží k tomu, aby uživatelé viděli obsah webu a aby struktura webu byla správná. Naopak CSS nám dodá na web design, barvy, rozložení webu, oblost hran a podobně. Díky CSS budeme také umět vytvářet responzivní weby, tedy weby, které se zobrazují správně na všech zařízeních (počítače, tablety, mobily...). V případě JavaScriptu už půjde o seriózní programování a díky této technologii dodáme webu dynamiku, načteme uživatelům obsah ze serveru a přidáme interakce.

Po ukončení kurzu budete moci pracovat na pozici frontend vývojáře nebo vás může zaujmout pozice testera, SEO specialisty, marketingového specialisty, analytika případně můžete pokračovat na dráhu backendového programátora nebo grafického designéra webů. Možností po ukončení kurzu jsou opravdu široké, záleží jen na vás, co vás zaujme a kterým směrem se potom vydáte.

Co se v kurzu naučím?

• vytvářet weby technologiemi HTML, CSS a JavaScript
• porozumíte principům programování
• optimalizovat web na všechna zařízení, responzivita (mobil, tablet, pc) 
• budete schopni zpracovat grafický návrh od grafika do podoby použitelného webu
• vytvoříte jakýkoli layout stránky použitím flexboxu nebo gridu
• získáte přehled o dalších používaných technologiích v praxi (GIT, SASS)

Komu je kurz určen?

Kurz je vhodný pro úplné začátečníky, kteří se ještě nesetkali s prací v IT a chtějí začít v IT pracovat nebo umět vyrábět weby. Také i pro ty, kteří už mají základní znalosti z programování, ale chtějí si obnovit své znalosti z frontendového programování a kódování.

Pro úspěšné absolvování kurzu nepotřebujete žádné IT znalosti, stačí vám základní práce s PC a vlastní počítač. Všechno ostatní si společně vysvětlíme a nastavíme na prvních hodinách kurzu.

Program kurzu

Obecná témata

• Jak funguje web
• Frontend (client) vs. backend (server)
• Instalování a rozjetí Visual Studio Code
• Komentáře v kódě
• Developer tools a zdrojový kód
• Práce s Figmou
• Jak funguje práce v reálném programování
• Doména a hosting, jak funguje deploy webu

HTML

• Kostra HTML (head, body) a DOM, DOCTYPE
• HTML základní tagy (h1 - h6, p, ul, ol, a, div a span)
• HTML základní tagy 2 (table)
• HTML základní tagy 3 (button + rozdíl mezi <button> a <a>, img)
• Redukce velikosti obrázků
• Developer tools a zdrojový kód
• Validátor kódu - W3C
• HTML classy a IDečka
• HTML správná struktura kódu

CSS

• Úvod do CSS, vysvětlení co je CSS
• Jak používat CSS selektory
• Možnosti kde psát CSS kód
• CSS box model
• Použití stylů pro classy a IDečka
• Block level elementy, inline level elementy
• Barvy v CSS
• Nativní proměnné v HTML
• Fonty (implementace v HTML, CSS a jejich stylování)
• CSS kaskáda, specificita selektorů
• CSS Layout stránky (margin, padding)
• CSS Layout stránky (float + float clearfix)
• CSS Layout stránky (relative, absolute, fixed)
• CSS Layout stránky (flex)
• CSS Layout stránky (grid)
• Background-image a rozdíl s image
• CSS reset/ normalize
• Can i use (kompatibilita s prohlížeči)
• Úvod do responzivního designu
• CSS media queries
• Pixely, procenta, rem, em, vh, vw
• box-sizing, border-box
• Responzivní obrázky a retina
• Mobile-first přístup
• CSS animace a transitions
• Frameworky (Bootstrap, Bulma, Tailwind…)
• CSS preprocesory (SASS, SCSS), co to je SASS a v čem nám SASS pomáhá
• Ukázka práce se SCSS
• Co je Git a proč ho potřebujeme
• Ukázka práce v Gitu

JavaScript

• Intro do JavaScriptu
• JavaScript konzole a jednoduchá ukázka
• Možnosti jak psát JavaScript
• Document a Window object
• Datové typy
• Čísla a řetězce
• Proměnné
• Pole a objekty
• Funkce a metody
• Argumenty a parametry
• Spojování stringů string na number a number na string
• undefined, null a NaN
• typeof
• Podmínky if - else if - else
• Javascript operátory (&& || …)
• Práce s DOM, querySelectors, node vs array
• Event listeners a bubbling
• Mazání, přidávání HTML elementů
• Dynamické přidávání a odebírání html classů a id
• JavaScript cykly (forEach, while, for)
• Implementace JS knihoven (lodash, axios…)
• Promisses, then, catch, async, await
• Práce s API
• Vypsání odpovědi z API na web - SWAPI

Jak kurz probíhá

Kurz probíhá online na našem portálu fordevs.cz v sekci kurzy. Studenti mají k dispozici obsah ke každému tématu ve formě videa. Své znalosti mohou diskutovat s instruktorem a ostatními studenty na našem Discordu. Do kanálu kurzu budou mít přístup pouze studenti kurzu. Připravujeme také variantu online s lektorem v malých skupinách, sledujte fordevs.cz a dozvíte se včas více.

Budeme společně programovat dva projekty (cestovatelský blog a stránku s recepty) a každý student bude programovat svůj vlastní projekt, který může konzultovat s lektorem. Projekty následně můžete využít k sebeprezentování při hledání první práce nebo zakázky v IT oboru.

Kdo kurz vede?

Mé jméno je Patrik Keblušek a provedu vás tímto kurzem. IT oboru se věnuji přibližně od roku 2015, kdy jsem začínal právě s HTML, CSS a JavaScript kurzem a grafickým designem. Od té doby jsem měl možnost pracovat na nejnavštěvovanějších portálech v České republice a měl jsem čest spolupracovat i se špičkami české webové scény. V současnosti vedle frontendového programování vedu projekty (například právě fordevs.cz) a vzdělávám juniornější programátory. Více o mně se můžete dočíst na mém webu.

Cena a přihlášení

Cena online kurzu je cena premium účtu na fordevs.cz. Pro přihlášení do kurzu si stačí aktivovat premium účet v sekci Premium. Následně se Vám odemkne obsah kurzu.