Kompletní kurz CSS frameworku Bootstrap - Online kurz

Tento on-line kurz tě provede CSS frameworkem Bootstrap, nejpopulárnějším nástrojem pro snadnou a rychlou tvorbu webových šablon. Lekce obsahují praktické ukázky a úkoly k procvičení získaných dovedností.

27 lekcí

24 samostatných úloh

5 vědomostních testů

Certifikát absolventa

Proč se seznamovat s frameworkem Bootstrap?

Každý, kdo dnes vytváří, spravuje či vlastní webové stránky, by zajisté chtěl, aby tento jeho internetový prostor byl pro návštěvníky co nejvíce přívětivý, pohodlný, estetický a přehledný. Chce samozřejmě také, aby jeho web byl responzivní, tedy aby se zobrazoval stejně dobře, bude-li si jej návštěvník prohlížet na mobilu, na tabletu či na obrazovce počítače. K tomu, aby stránka dobře vypadala a správně se formátovala, slouží pak kaskádové styly, tedy jazyk CSS. I největší znalec a mistr CSS však časem narazí na jeden problém: neustále musí u nových webů nastavovat stále dokola tytéž základní vzhledové parametry. Proč si tuto práci, často ve svém základu repetitivní a nekreativní, nezjednodušit a nevyužít už předpřipravených komplexních knihoven s CSS vlastnostmi, tedy tzv. frameworku? Nejznámější a celosvětově proslulý CSS framework přitom vznikl v Twitteru a jmenuje se Bootstrap. Jednou z nejschůdnějších cest, jak do jeho používání přirozeně proniknout, je začíst se do lekcí právě v tomto kurzu.

Co tě tento kurz naučí?

Hned v úvodu kurzu se dozvíš, co je to framework Bootstrap a jaké jsou jeho základní vlastnosti. Tedy např. to, že je zdarma, "flat", mobile-first a responzivní (těmto pojmům se věnuje samostatný kurz responzivního webdesignu). Řeč je v úvodu kurzu také o šablonách a odkud je stáhnout.

Dozvíš se o zásadách, které je třeba při práci s Bootstrapem dodržovat. Hned vzápětí jsou již probírány základní třídy obsažené v Bootstrapu, např. pro nadpisy, zvýrazněné písmo atd. Naučíš se, jak Bootstrap používat pro formátování responzivních obrázků a jak se v něm pracuje s barvami. Lekce poté pokračují ke srozumitelnému probrání bootstrapového grid systému, skrze nějž se nastavuje formátování layoutu stránky.

Posléze je probíráno vytváření bootstrapových tabulek, tlačítek a podrobně též formulářů. Vedle CSS si procvičíš také jednoduché skriptování v JavaScriptu, sloužící např. k tvorbě rozevíracího seznamu nebo k validaci formuláře. Je zmíněn "jumbotron", tedy velký informační box. Mezi další probírané prvky patří třeba odznaky, seznamy či záložky neboli taby. V následujících lekcích se dozvíš o kartách, které se hodí např. při vytváření e-shopu. Dalšími probíranými komponenty jsou carousel čili kolotoč, který slouží třeba k vytvoření slide-show prezentace, a progress, který ukazuje např. načítání obsahu. Dále jsou rozebírány sbalovací a rozbalovací komponenty typů collapse a dropdowns.

Pozornost je potom věnována tzv. utilitám, které zpříjemňují každodenní práci s Bootstrap frameworkem. Zvláštní pozornost je pak věnována utilitám typu flex. Dále se kurz věnuje stylování úhledné navigace, drobečkové navigace, která je důležitá pro složitější weby, paginace a upozornění. Posléze je zřetel věnován modálním dialogům a informačním bublinám. Následně se naučíš, jak používat komponenty scrollspy a tooltip. V závěru kurzu se pak probírají multimediální objekty a kontejnery.

Samozřejmostí je velké množství úkolů, na nichž si procvičíš většinu probírané látky a jež tě budou nutit hledat nová řešení. Po skončení kurzu můžeš pokračovat např. na kurz zaměřený na tvorbu Bootstrap šablony z PSD souboru, další kurzy zaměřené na web a jeho stylování nebo na kurzy podrobně se zabývající JavaScriptem.

Prověřeno absolventy

Lekce