Responzívny webdesign - Online kurz

V tomto kurze nájdeš lekcie zamerané na tvorbu moderného webu s tzv. responzívnym dizajnom, teda stránok, ktoré sa budú vhodným spôsobom zobrazovať na všetkých možných zariadeniach. Dozvieš sa tiež, čo sú to prístupy mobile-first a desktop-first.

13 lekcií

1 vedomostných testov

Certifikát absolventa

Prečo sa zaoberať responzívnym dizajnom?

Viac ako polovica ľudí, ktorí sa dnes pripájajú na rôzne webové stránky, tak robí cez mobilné zariadenia. Zďaleka teda už nestačí, aby sme pri vytváraní webových stránok mysleli na používateľov PC a dúfali, že to na mobile bude "ako tak čitateľné". Chceme, aby naša stránka vyzerala dobre na akomkoľvek zariadení. Stránka musí vyzerať dobre na mobile, ktorý je menší a na výšku, na tablete, na malom notebooku aj veľkom monitore stolného počítača. Doba, kedy by sme takúto výzvu riešili vytváraním dvoch variantov tých istých stránok, je tiež preč. Prečo si koniec koncov pridávať prácu? A preto chceme od začiatku vytvárať stránky, ktoré budú svojím rozložením a vzhľadom prispôsobivé, vždy dobre čitateľné, prehľadné a úhľadné. Najjednoduchšia cesta k porozumeniu, ako sa takýto web tvorí, je prostredníctvom nasledujúcich lekcií.

Čo ťa tento kurz naučí?

Pre tento kurz sa predpokladá, že už ovládaš základy HTML a CSS. K nim kurz pridáva novú a veľmi dôležitú zručnosť, a to používanie týchto značkovacích jazykov moderným a správnym spôsobom, vďaka čomu budú výsledné stránky vizuálne príjemné a používateľsky prívetivé na každom zariadení nehľadiac na jeho rozmery a rozlíšenie. Takému webdesignu sa hovorí responzívny a hneď v prvých lekciách sa dozvieš viac o tomto pojme a aj o tom, prečo je dnes dôležitý. V úvode tiež zistíš, čo sú to tzv. mobile-first a desktop-first prístupy a prečo je dnes častejšie preferovaný prvý spomínaný. Vďaka ukážkam a zrozumiteľnému vysvetleniu sa dozvieš, ako taký mobile-first design vytvárať.

Ďalej prikročíme k praktickým záležitostiam. Základom bude vytvorenie responzívneho menu, ktoré slúži na základnú orientáciu návštevníka na webovej stránke a s ktorým sa dnes stretneme na prakticky všetkých moderných weboch. Ukážeme si rôzne podoby, aké také menu môže mať, súčasťou lekcií potom budú aj tipy na jeho vizuálne ozvláštnenie. V nasledujúcich lekciách sa dozvieš o responzívnom formátovaní obrázkov. Nechceš predsa, aby sa napr. fotografie, grafiky alebo napríklad screenshoty objavovali na počítači príliš malé či na mobile pretekali za okraj obrazovky. Tiež si povieme, ako docieliť, aby sa obrázky zo servera nenačítavali príliš dlho.

Následne sa dozvieš, čo to sú tzv. gridy a aké sú dva najznámejšie. Týmto je venovaná pozornosť v závere kurzu. Po jeho dokončení budeš bezpečne vedieť, čo je to responzívny web a aké sú jeho zásady, vďaka čomu bude akýkoľvek tvoj webový projekt vyzerať moderne. Samozrejmosťou je však aj možnosť absolvovania kvízu, za ktorý obdržíš certifikát.

Ak sa budeš chcieť responzívnym webom zaoberať ďalej a podrobnejšie, je tu kurz priamo zameraný na framework Bootstrap. Ak ťa bude všeobecne zaujímať vizuálne oživenie webu, môžeš pokračovať v kurzoch CSS3, kde sa okrem CSS štýlov preberajú aj CSS animácie, HTML5 alebo napríklad grafiky v Photoshope.