Katka pracovala několik let v oblasti PR & marketingu. Postupem času se začala zajímat také o vývoj webu a od základů HTML a CSS se dostala až k moderním frameworkům. Nyní pracuje na sdíleném pracovišti Masarykovy univerzity a ÚZIS a zpracovává požadavky na weby s tématikou zdravotnictví.
Materiály k Webové Akademii
Kurz je určen začátečníkům v oblasti vývoje webu. Tady zjistíš, co jsou to HTML soubory a z čeho se skládají. Naučíme tě, co jsou to HTML elementy, jak je definovat aby byly na stránce vidět. Seznámime se různymi elementy pro zobrazovaní textu a obrázků. Pak se podíváš na základy jazyka CSS. Tím budeš měnit styl elementů na stránce. A pro lepší pochopení jak jsou tyhle elementy vnímány prohlížečem ti vysvětlíme co je to box model.
Po skončení tohoto kurzu budeš mít dobrý základ v práci s HTML a CSS. Na něm pak můžeš stavět v dalších kurzech v oblasti webového vývoje ale taky například v oblasti web scrapingu.
Studenti se uplatinili u firem jako jsou
Osnova
- Lekce 1Úvod do HTML60 minut
- Co je to jazyk HTML?
- Anatomie HTML elementů
- Atributy HTML elementu
- Odstavce
- Ruční zalomení řádku
- Zvýraznění a zdůraznění textu
- Nadpisy
- Odkaz a jeho základy
- Otevření do nového okna
- E-mailové odkazy
Zobrazit dalších 8 kapitolzačít zdarma - Lekce 2Přehled HTML tagů a jejich využití60 minut
- Základní (nečíslovaný) seznam
- Číslovaný seznam
- Obrázek a jeho základy
- Atribut alt
- Základní tabulka
- Složitější tabulka
- Doplňkové elementy tabulky
- Typy elementů
- Blokové elementy
- Řádkové elementy
Zobrazit dalších 10 kapitolzačít zdarma - Lekce 3Základy CSS60 minut
- Co je to CSS?
- Vlastnosti vzhledu
- Deklarace stylů
- Přímý zápis stylu
- Pravidla v CSS
- Pravidla umístěná v kódu
- Pravidla umístěná v souboru
- Typové selektory
- Selektory tříd
- Násobné použití tříd
Zobrazit dalších 11 kapitolzačít zdarma - Lekce 4CSS vlastnosti60 minut
- Barvy
- Vznik barev
- Pojmenované barvy
- Desítkový zápis barev
- Hexadecimální RGB zápis
- Složitost zápisů barev
- Úvod do délkových jednotek
- Absolutní měrné jednotky
- Relativní měrné jednotky
- Ukázky použití relativních jednotek
Zobrazit dalších 16 kapitolzačít zdarma - Lekce 5Box model, viditelnost prvků, pozicování60 minut
- Box model
- Šířka a výška
- Zakulacené rohy
- Vnější a vnitřní okraje
- Typ elementů
- Rámeček
- Rámeček podél specifické strany
- Zkrácený zápis
- Skrývání elementů
- Průhlednost
Zobrazit dalších 11 kapitolzačít zdarma - Lekce 6Responzivní web design60 minut
- Co je responzivní web design?
- Historický přehled
- Responzivní mód v prohlížeči
- Co je viewport?
- Nastavení viewportu
- Shrnutí
- Responzivní obrázky
- Vlastnost object-fit
- Obrázky na pozadí
- Element <picture>
Zobrazit dalších 5 kapitolzačít zdarma - Lekce 7Responzivní web design II.60 minut
- Co jsou to media queries?
- Syntax media queries
- Breakpoints
- Breakpoints: standardní hodnoty
- Skrytí prvků
- Koncept Mobile First
- Co je framework?
- Jaké frameworky známe?
- Závěr
- Úkol č. 1
Zobrazit dalších 3 kapitolyzačít zdarma - Lekce 8Úvod do flexboxu60 minut
- Co je flexbox?
- Nastavení flexboxu
- Flexbox a jeho osy
- Vlastnosti flexboxu
- Vlastnosti rodičovského elementu
- Flex-wrap
- Vlastnosti položek uvnitř rodičovského elementu
- Flex-grow
- Flex-shrink
- Flex-basis
Zobrazit dalších 4 kapitolyzačít zdarma - Lekce 9Pokročilé vlastnosti flexboxu60 minut
- Zarovnávání položek flexboxu
- Vodorovné zarovnávání
- Zarovnání na začátek
- Zarovnání na konec
- Zarovnání na střed
- Zarovnání s mezerami
- Zarovnání okolo položek
- Vertikální zarovnání
- Zarovnání pomocí roztáhnutí položek
- Zarovnání na začátek
Zobrazit dalších 9 kapitolzačít zdarma - Lekce 10Grid60 minut
- grid/mřížka
- Rozložení mřížky
- Rozdíl mezi flexboxem a gridem
- Mřížka ve vývojářských nástrojích
- Linie mřížky
- Nastavení mřížky
- Sloupce mřížky
- Řádky mřížky
- Mezery mřížky
- Umísťování položek v mřížce
Zobrazit dalších 5 kapitolzačít zdarma - Lekce 11GIT60 minut
- Proč Git?
- Struktura a cíl lekce
- Co je to Git?
- IDE vs. Terminál
- Instalace Gitu
- Založení GitHub účtu
- Vytvoření a nahrání SSH klíče
- Založení repozitáře
- Stažení repozitáře
- Aktuální stav – terminál
Zobrazit dalších 15 kapitolzačít zdarma - Lekce 12Hosting, doména60 minut
- Co je to doména?
- Výběr domény
- Registrace nové domény
- Co je to hosting?
- Výběr hostingu
- Přihlášení a nahrání souborů
- FTP klient
- Užitečné nástroje
- Google Material Icons
- Fotobanka Unsplash
Zobrazit dalších 8 kapitolzačít zdarma
Autoři kurzu
Kateřina Blatná
Martin Pešout
Externí lektor, Front-end engineer.
Martin působí v současnosti jako frontend vývojář ve společnosti ContentKing. Tvorbě webů se věnuje již od roku 2011. Miluje jednoduchý design a při své práci si potrpí na detaily. Dále spoluorganizuje brněnské srazy {F}rontendisti
Co říkají naši studenti
Přečti si více recenzí na Google
Petr Ševčík
Engeto Online kurzy jsou super pro samouky, začátečníky, i mírně pokročilé. Široká nabídka Python, Linux, Databází a dalších kurzů je zpracovaná hezky interaktivně. Dobře popsanou teorii doplňují praktické cvičení. U subscription je výhoda že si člověk může studovat vlastním tempem.
Marek Soukup
Zdaleka nejlepší vzdělávací kurz, s jakým jsem se setkal. Všechno má jasný účel a smysl, online podpora je vynikající. Pokud se za půl roku chcete posunout o 10 let dopředu, musíte se stavit u kluků z ENGETO.
Radim Zouhar
Engeto - to je skvělý tým ochotných lektorů. Vědomosti, zkušenosti a příležitosti Vám přinesou na talíři. Člověk musí mít jen otevřenou hlavu a poctivě se připravovat.