Responzívne 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 alebo 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 uží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 mobilu, ktorý je menší a na výšku, na tablete, na malom notebooku aj veľkom monitore pri stolnom počítači. Doba, kedy by sme takú 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 pritom cez nasledujúce lekcie.

Čo ťa tento kurz naučí?

Pre tento kurz sa predpokladá, že budeš už vedieť základy HTML a CSS. K nim kurz pridáva novú a veľmi dôležitú zručnosť, a to síce používať tieto značkovacie jazyky moderným a správnym spôsobom, vďaka čomu budú výsledné stránky vizuálne príjemné a užívateľsky prívetivé na každom zariadení, nehľadiac na jeho rozmery a rozlíšenie. Takému webdesignu sa hovorí responzívny a práve v prvých lekciách sa dozvieš viac k tomuto pojmu aj k tomu, prečo je dnes dôležitý. Hneď z kraja sa pritom dozvieš, čo sú tzv. mobile-first a desktop-first prístupy a prečo je dnes viac 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 veciam. Základom je pritom vytváranie responzívneho menu, ktoré slúži na základnú orientáciu návštevníka po webovej stránke as ktorým sa dnes stretneme na prakticky všetkých moderných weboch. Budú ti ukázané rôzne podoby, aké také menu môže mať, súčasťou potom sú 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. Rovnako si povieme, ako docieliť to, aby sa obrázky zo servera nenačítali 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. Pokiaľ ťa bude všeobecne zaujímať vizuálne oživenie webu, môžeš pokračovať v kurzoch CSS3, kde sa okrem CSS štýly preberajú aj CSS animácie, HTML5 alebo napríklad grafiky v Photoshope.