Kompletný kurz CSS frameworku Bootstrap - Online kurz
Tento on-line kurz ťa prevedie CSS frameworkom Bootstrap, najpopulárnejším nástrojom pre ľahkú a rýchlu tvorbu webových šablón. Lekcie obsahujú praktické ukážky a úlohy na precvičenie získaných zručností.
27 lekcií
24 samostatných úloh
5 vedomostných testov
Certifikát absolventa
Prečo sa zoznamovať s frameworkom Bootstrap?
Každý, kto dnes vytvára, spravuje či vlastné webové stránky, by určite chcel, aby tento jeho internetový priestor bol pre návštevníkov čo najviac prívetivý, pohodlný, estetický a prehľadný. Chce samozrejme tiež, aby jeho web bol responzívny, teda aby sa zobrazoval rovnako dobre, ak si ho bude návštevník prezerať na mobile, na tablete či na obrazovke počítače. Na to, aby stránka dobre vyzerala a správne sa formátovala, slúžia potom kaskádové štýly, teda jazyk CSS. Aj najväčší znalec a majster CSS však časom narazia na jeden problém: neustále musia pri nových weboch nastavovať stále dookola tie isté základné vzhľadové parametre. Prečo si túto prácu, často vo svojom základe repetitívnu a nekreatívnu, nezjednodušiť a nevyužiť už predpripravené komplexné knižnice s CSS vlastnosťami, teda tzv. frameworku? Najznámejší a celosvetovo preslávený CSS framework pritom vznikol v Twitteri a volá sa Bootstrap. Jednou z najschodnejších ciest, ako do jeho používania prirodzene preniknúť, je začítať sa do lekcií práve v tomto kurze.
Čo ťa tento kurz naučí?
Hneď v úvode kurzu sa dozvieš, čo je to framework Bootstrap a aké sú jeho základné vlastnosti. Teda napr. to, že je zadarmo, "flat", mobile-first a responzívne (týmto pojmom sa venuje samostatný kurz responzívneho webdesignu). Reč je v úvode kurzu aj o šablónach a odkiaľ ich stiahnuť.
Dozvieš sa o zásadách, ktoré treba pri práci s Bootstrapom dodržiavať. Hneď vzápätí sú už preberané základné triedy obsiahnuté v Bootstrape, napr. pre nadpisy, zvýraznené písmo atď. Naučíš sa, ako Bootstrap používať na formátovanie responzívnych obrázkov a ako sa v ňom pracuje s farbami . Lekcie potom pokračujú k zrozumiteľnému prebratiu bootstrapového grid systému, cez ktorý sa nastavuje formátovanie layoutu stránky.
Neskôr je preberané vytváranie bootstrapových tabuliek, tlačítok a podrobne tiež formulárov. Vedľa CSS si precvičíš tiež jednoduché skriptovanie v JavaScripte, slúžiace napr. na tvorbu rozbaľovacieho zoznamu alebo na validáciu formulára. Je spomenutý "jumbotron", teda veľký informačný box. Medzi ďalšie preberané prvky patria napríklad odznaky, zoznamy či záložky čiže taby. V nasledujúcich lekciách sa dozvieš o kartách, ktoré sa hodia napr. pri vytváraní e-shopu. Ďalšími preberanými komponentmi sú carousel čiže kolotoč, ktorý slúži napríklad na vytvorenie slide-show prezentácie, a progress, ktorý ukazuje napr. načítanie obsahu. Ďalej sú rozoberané zbaľovacie a rozbaľovacie komponenty typov collapse a dropdowns.
Pozornosť je potom venovaná tzv. utilitám, ktoré spríjemňujú každodennú prácu s Bootstrap frameworkom. Osobitná pozornosť je potom venovaná utilitám typu flex. Ďalej sa kurz venuje štýlovaniu úhľadnej navigácie, drobčekovej navigácie, ktorá je dôležitá pre zložitejšie weby, paginácia a upozornenie. Neskôr je zreteľ venovaný modálnym dialógom a informačným bublinám. Následne sa naučíš, ako používať komponenty scrollspy a tooltip. V závere kurzu sa potom preberajú multimediálne objekty a kontajnery.
Samozrejmosťou je veľké množstvo úloh, na ktorých si precvičíš väčšinu preberanej látky a ktoré ťa budú nútiť hľadať nové riešenia. Po skončení kurzu môžeš pokračovať napr. na kurz zameraný na tvorbu Bootstrap šablóny z PSD súboru, ďalšie kurzy zamerané na web a jeho štylovanie alebo na kurzy podrobne sa zaoberajúca JavaScriptom.
Lekcie
Cena: 575 kreditov
2. diel: Bootstrap - Reboot
3. diel: Bootstrap - Typografia
4. diel: Bootstrap - Obrázky
7. diel: Bootstrap - Tabuľky
8. diel: Bootstrap - Tlačidlá
9. diel: Bootstrap - Formuláre
13. diel: Bootstrap - Karty
16. diel: Bootstrap - Dropdowns
17. diel: Bootstrap - Utilities
20. diel: Bootstrap - Navigácia
24. diel: Bootstrap - Popovers
25. diel: Bootstrap - Scrollspy
26. diel: Bootstrap - Tooltipy