IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

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

Začít kurz zadarmo Kúpou PRO verzie kurzu získaš trvalý prístup k lekciím a cvičením označeným štítkom PRO a tiež možnosť absolvovať testy.
Úvod do CSS frameworku Bootstrap
Bootstrap - Reboot
Bootstrap - Typografia
Bootstrap - Obrázky
Kvíz - Reboot, typografia a obrázky v Bootstrap
Bootstrap - Úvod do grid systémov
Bootstrap - Grid systém Bootstrapu
Riešené úlohy k 1.-6. lekciu Bootstrap CSS frameworku
Kvíz - Grid systémy v Bootstrap
Bootstrap - Tabuľky
Bootstrap - Tlačidlá
Riešené úlohy k 7.-8. lekciu Bootstrap CSS frameworku
Kvíz - Tabuľky a tlačidlá v Bootstrap
Bootstrap - Formuláre
Bootstrap - Ďalšie možnosti formulárov
Riešené úlohy k 9.-10. lekciu Bootstrap CSS frameworku
Kvíz - Formuláre v Bootstrap
Bootstrap - Jumbotron a Badges
Bootstrap - List groups
Riešené úlohy k 11.-12. lekciu Bootstrap CSS frameworku
Bootstrap - Karty
Bootstrap - Carousely a Progress
Riešené úlohy k 13.-14. lekciu Bootstrap CSS frameworku
Bootstrap - Collapse a Accordion
Bootstrap - Dropdowns
Riešené úlohy k 15.-16. lekciu Bootstrap CSS frameworku
Bootstrap - Utilities
Bootstrap - Flex utilities
Bootstrap - Flex utilities druhýkrát
Riešené úlohy k 17.-19. lekciu Bootstrap CSS frameworku
Bootstrap - Navigácia
Bootstrap - Navigačná lišta
Riešené úlohy k 20.-21. lekciu Bootstrap CSS frameworku
Bootstrap - Paginácia, Upozornenie a Drobčeková navigácia
Bootstrap - Modálne dialógy
Bootstrap - Popovers
Bootstrap - Scrollspy
Bootstrap - Tooltipy
Bootstrap - Multimediálne objekty a kontajnery
Kvíz - Bootstrap
Tvoj certifikát e-learning kurzu Bootstrap


 

Aktivity