Naučte sa Flexbox CSS na Lynda.com

• Smieť 2, 2024

Po desiatich rokoch, čo je na webe celý život, sme sa rozhodli dať webovej stránke MUSED Literary Review nový vzhľad. Samozrejme sme chceli používať najnovšie HTML a CSS, čo znamená používať Flexbox, CSS Grid a responzívny webdizajn.

Vďaka Lynda.com netrvalo dlho, kým ste sa dostali na rýchlosť. Nižšie sú uvedené niektoré z najlepších videonávodov, ktoré mi pomohli navrhnúť nový vzhľad MUSED.

Rozšírené responzívne rozloženie s CSS Flexbox
Morten Rand-Hendriksen
V tomto kurze založenom na projekte vás autor zavedie krok za krokom, keď zostavuje ponuky Flexboxu, rozloženia responzívnych kariet, rozloženie Svätého grálu a interaktívne komponenty.

Rozšírené rozloženie CSS s mriežkou
Morten Rand-Hendriksen
V tomto kurze sa toho veľa naučíte. Autor začína základy CSS mriežky a plánovania rozloženia mriežky. Potom ste pripravení zostaviť rozloženie s viacerými stĺpcami a rozloženie s jediným stĺpcom s plným krvácaním. Ďalej sa dozviete, ako navrhnúť rôzne rozloženia kariet a navigačný panel mimo obrazovky, ktorý sa podľa potreby zasunie do zobrazenia.

Základné školenie CSS 3
Christina Truong
V tomto kurze sa naučíte používať CSS Grid a Flexbox na vytváranie responzívnych rozložení. Dozviete sa tiež, ako pripraviť svoje webové obrázky na displeje sietnice a vektorové obrázky SVG. Autor potom pokračuje jednoduchými animáciami CSS, responzívnou typografiou a dostupnosťou.

CSS Flexbox Prvý pohľad
James Williamson
Tento kurz vás vedie krok za krokom, keď sa naučíte všetku syntax pre modul rozloženia Flexbox CSS. Autor rozoberá, čo Flexbox dokáže a aktuálnu podporu prehľadávača. Potom dôkladne diskutuje o témach, ako sú tok prvkov, obtiahnutie obsahu, zarovnanie položiek a vnorenie flexibilných kontajnerov.

Prvý pohľad na mriežku CSS
Morten Rand-Hendriksen
V tomto kurze sa naučíte nový a vylepšený spôsob vytvárania dvojrozmerných rozložení mriežky. Počnúc základmi pre použitie CSS mriežky na vytváranie responzívnych rozložení mriežky, autor pokrýva to, čo budete potrebovať vedieť, aby ste mohli zostaviť online magazín aj trojstĺpcové rozloženie.

Vytváranie responzívnych formulárov pomocou Flexboxu
James Williamson
Webové stránky nemôžete navrhnúť bez formulárov. Formuláre musia zodpovedať všetkým typom a veľkostiam obrazoviek, rovnako ako zvyšok stránky. Williamson vás naučí, ako používať model CSS Flexbox na vytváranie a úpravu responzívnych webových formulárov. Začína jednoduchým formulárom na vyhľadávanie a zostavuje sa do veľkého dvoj stĺpcového tvaru.

Citlivé obrázky
Morten Rand-Hendriksen
Ak používate program Wordpress, viete, že automaticky vygeneruje niekoľko obrázkov rôznych veľkostí pre každý obrázok, ktorý odovzdáte do systému. Prečo? Tento kurz vám vysvetlí koncepciu responzívnych obrázkov a spôsob ich použitia na vašej vlastnej webovej stránke.