Responzivní webdesign - Online kurz

V tomto kurzu najdeš lekce zaměřené na tvorbu moderního webu s tzv. responzivním designem, tedy stránek, které se budou vhodným způsobem zobrazovat na všech možných zařízeních. Dozvíš se také, co jsou to přístupy mobile-first či desktop-first.

13 lekcí

1 vědomostních testů

Certifikát absolventa

Proč se zabývat responzivním designem?

Více než polovina lidí, jež se dnes připojují na různé webové stránky, tak dělá přes mobilní zařízení. Zdaleka tedy už nestačí, abychom při vytváření webových stránek mysleli na uživatele PC a doufali, že to na mobilu bude "jakž takž čitelné". Chceme, aby naše stránka vypadala dobře na jakémkoliv zařízení. Stránka musí vypadat dobře mobilu, který je menší a na výšku, na tabletu, na malém notebooku i velkém monitoru u stolního počítače. Doba, kdy bychom takovou výzvu řešili vytvářením dvou variant týchž stránek je také pryč. Proč si koneckonců přidávat práci? A proto chceme od počátku vytvářet stránky, které budou svým rozložením a vzhledem přizpůsobivé, vždy dobře čitelné, přehledné a úhledné. Nejjednodušší cesta k porozumění, jak se takový web tvoří, je přitom přes následující lekce.

Co tě tento kurz naučí?

Pro tento kurz se předpokládá, že budeš už umět základy HTML a CSS. K nim kurz přidává novou a velmi důležitou dovednost, a to sice používat tyto značkovací jazyky moderním a správným způsobem, díky čemuž budou výsledné stránky vizuálně příjemné a uživatelsky přívětivé na každém zařízení, nehledě na jeho rozměry a rozlišení. Takovému webdesignu se říká responzivní a právě v prvních lekcích se dozvíš více k tomuto pojmu i k tomu, proč je dnes důležitý. Hned z kraje se přitom dozvíš, co jsou tzv. mobile-first a desktop-first přístupy a proč je dnes více preferován první zmíněný. Díky ukázkám a srozumitelnému vysvětlení se dozvíš, jak takový mobile-first design vytvářet.

Dále přikročíme k praktickým věcem. Základem je přitom vytváření responzivního menu, které slouží k základní orientaci návštěvníka po webové stránce a se kterým se dnes setkáme na prakticky všech moderních webech. Budou ti ukázány různé podoby, jaké takové menu může mít, součástí pak jsou i tipy k jeho vizuálnímu ozvláštnění. V následujících lekcích se dozvíš o responzivním formátování obrázků. Nechceš přeci, aby se kupř. fotografie, grafiky nebo třeba screenshoty objevovaly na počítači příliš malé či na mobilu přetékaly za okraj obrazovky. Rovněž si řekneme, jak docílit toho, aby se obrázky ze serveru nenačítaly příliš dlouho.

Následně se dozvíš, co to jsou tzv. gridy a jaké jsou dva nejznámější. Těmto je věnována pozornost v závěru kurzu. Po jeho dokončení budeš bezpečně vědět, co je to responzivní web a jaké jsou jeho zásady, díky čemuž bude jakýkoliv tvůj webový projekt vypadat moderně. Samozřejmostí je ovšem také možnost absolvování kvízu, za nějž obdržíš certifikát.

Budeš-li se chtít responzivním webem zabývat dále a podrobněji, je zde kurz přímo zaměřený na framework Bootstrap. Pokud tě bude všeobecně zajímat vizuální oživení webu, můžeš pokračovat v kurzech CSS3, kde se mimo CSS styly probírají také CSS animace, HTML5 či třeba grafiky v Photoshopu.

Prověřeno absolventy

Skvělé informace, ze kterých se dá dobře učit a vše je vysvětleno na praktických příkladech a uživatel si to může vyzkoušet.

Jakub Slavíček
Velmi srozumitelně napsáno. Je potřeba ocenit velké množství dobře zvolených ukázek toho, co daná úprava kódu dělá, mění, apod. Opět nezbývá než poděkovat za skvěle odvedenou práci.

Jaromír Satke
Velice pěkně sepsané základy responzivního webu. Myslím, že z těch základů nechybělo nic. Stručná prezentace Bootstrapu byla skvělá. Studenti jistě ocení samostatný blok na tento framework.

Anna Greifová
Tento kurz mě naučil stylovat stránky pro responzivní podobu. Naprostou většinu z tohoto jsem před naučením tohoto kurzu neznal. Děkuji vám moc za tento kurz!

Petr Váchal
Měl jsem z té responzivity trochu strach, pokoušel jsem se o takové stránky už dřív, ale vždycky mi to z těch displejů nějak vyčuhovalo , to je teď pryč a už všechno funguje. Super kurz, díky moc, hodně mi to pomohlo.

Michal Dušek