Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
C# .NET + discount 30

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ů

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.

Lekce

-15% Cena: 574 Kč 489 Kč (196 bodů)

Začít kurz zdarma Koupí PRO verze kurzu získáš trvalý přístup k lekcím, cvičením a testům označeným štítkem PRO
Úvod do CSS frameworku Bootstrap
Bootstrap - Reboot
Bootstrap - Typografie
Bootstrap - Obrázky
Kvíz - Reboot, typografie a obrázky v Bootstrap
Bootstrap - Úvod do grid systémů
Bootstrap - Grid systém Bootstrapu
Řešené úlohy k 1.-6. lekci Bootstrap CSS frameworku
Kvíz - Grid systémy v Bootstrap
Bootstrap - Tabulky
Bootstrap - Tlačítka
Řešené úlohy k 7.-8. lekci Bootstrap CSS frameworku
Kvíz - Tabulky a tlačítka v Bootstrap
Bootstrap - Formuláře
Bootstrap - Další možnosti formulářů
Řešené úlohy k 9.-10. lekci Bootstrap CSS frameworku
Kvíz - Formuláře v Bootstrap
Bootstrap - Jumbotron a Badges
Bootstrap - List groups
Řešené úlohy k 11.-12. lekci Bootstrap CSS frameworku
Bootstrap - Karty
Bootstrap - Carousely a Progress
Řešené úlohy k 13.-14. lekci Bootstrap CSS frameworku
Bootstrap - Collapse a Accordion
Bootstrap - Dropdowns
Řešené úlohy k 15.-16. lekci Bootstrap CSS frameworku
Bootstrap - Utilities
Bootstrap - Flex utilities
Bootstrap - Flex utilities podruhé
Řešené úlohy k 17.-19. lekci Bootstrap CSS frameworku
Bootstrap - Navigace
Bootstrap - Navigační lišta
Řešené úlohy k 20.-21. lekci Bootstrap CSS frameworku
Bootstrap - Paginace, Upozornění a Drobečková navigace
Bootstrap - Modální dialogy
Bootstrap - Popovers
Bootstrap - Scrollspy
Bootstrap - Tooltipy
Bootstrap - Multimediální objekty a kontejnery
Kvíz - Bootstrap


 

Aktivity