Naučte se CSS Flexbox na Lynda.com

• Smět 17, 2024

Po deseti letech, což je život na webu, jsme se rozhodli dát webové stránce MUSED Literary Review nový vzhled. Samozřejmě jsme chtěli použít nejnovější HTML a CSS, což znamená používat Flexbox, CSS Grid a responzivní webdesign.

Díky Lynda.com to netrvalo dlouho, než se dostal na rychlost. Níže uvádíme jen několik nejlepších videonávodů, které mi pomohly navrhnout nový vzhled MUSED.

Rozšířené responzivní rozvržení s CSS Flexboxem
Morten Rand-Hendriksen
V tomto kurzu založeném na projektu vás autor krok za krokem provede sestavováním nabídek Flexboxu, rozvržením responzivních karet, rozvržením Svatého grálu a interaktivních komponent.

Rozšířené rozvržení CSS s mřížkou
Morten Rand-Hendriksen
V tomto kurzu se toho hodně naučíte. Autor začíná základy CSS Gridu a plánování rozvržení mřížky. Pak jste připraveni vytvořit rozložení s více sloupci a rozložení s jediným sloupcem. Dále se naučíte, jak navrhnout různá rozvržení karet a navigační panel mimo obrazovku, který se v případě potřeby zasune do zobrazení.

Základní školení CSS 3
Christina Truong
V tomto kurzu se naučíte používat CSS Grid a Flexbox k vytváření citlivých rozvržení. Dozvíte se také, jak připravit své webové obrázky pro sítnice a vektorové obrázky SVG. Autor poté přechází k jednoduchým animacím CSS, responzivní typografii a dostupnosti.

První pohled CSS Flexbox
James Williamson
Tento kurz vás provede krok za krokem, jak se naučíte veškerou syntaxi modulu CSS Flexbox Layout Module. Autor pojednává o tom, co Flexbox dokáže, a o aktuální podpoře prohlížeče. Poté důkladně diskutuje o tématech, jako je tok prvků, obtékání obsahu, zarovnání položek a vnoření flexibilních kontejnerů.

První pohled na mřížku CSS
Morten Rand-Hendriksen
V tomto kurzu se naučíte nový a vylepšený způsob vytváření dvojrozměrných rozvržení mřížky. Počínaje základy používání CSS Gridu k vytváření citlivých rozvržení mřížky, autor pokrývá to, co budete potřebovat vědět, abyste mohli sestavit jak online časopis, tak i tři sloupce.

Vytváření responzivních formulářů pomocí Flexboxu
James Williamson
Nemůžete navrhnout web bez formulářů. Formuláře musí odpovídat všem typům a velikostem obrazovek, stejně jako zbytek webu. Williamson vás naučí, jak používat model boxu CSS Flexbox k vytváření a stylování responzivních webových formulářů. Začne jednoduchým vyhledávacím formulářem a sestaví se do velké, dvou sloupcové formy.

Citlivé obrázky
Morten Rand-Hendriksen
Pokud používáte Wordpress, víte, že automaticky vygeneruje několik obrázků různých velikostí pro každý obrázek, který nahrajete do systému. Proč? Tento kurz vysvětlí koncept responzivních obrazů a jak je použít na vašem vlastním webu.

Video Návody: CSS Grid: Úplné základy (Smět 2024).