Leer CSS Flexbox op Lynda.com

• Mei 2, 2024

Na tien jaar, wat een leven lang op internet is, hebben we besloten om de MUSED Literary Review-website een nieuwe look te geven. Natuurlijk wilden we de nieuwste HTML en CSS gebruiken en dat betekent Flexbox, CSS Grid en Responsive Web Design.

Dankzij Lynda.com duurde het niet lang voordat ik op snelheid kwam. Hieronder staan ​​slechts enkele van de beste videotutorials die me hebben geholpen bij het ontwerpen van de nieuwe look voor MUSED.

Geavanceerde responsieve lay-outs met CSS Flexbox
Morten Rand-Hendriksen
In deze projectgebaseerde cursus neemt de auteur u stap voor stap mee terwijl hij Flexbox-menu's, responsieve kaartlay-outs, de Holy Grail-lay-out en interactieve componenten bouwt.

CSS geavanceerde lay-outs met raster
Morten Rand-Hendriksen
Je leert veel in deze cursus. De auteur begint met de basisprincipes van CSS-raster en planningsrasterlay-outs. Dan bent u klaar om een ​​lay-out met meerdere kolommen en een volledige lay-out met één kolom te bouwen. Vervolgens leert u hoe u verschillende kaartlay-outs ontwerpt en een off-screen navigatiepaneel dat in beeld schuift wanneer dat nodig is.

CSS Essential Training 3
Christina Truong
In deze cursus leert u CSS Grid en Flexbox te gebruiken om responsieve lay-outs te bouwen. U leert ook hoe u uw webafbeeldingen kunt voorbereiden voor Retina-displays en SVG-vectorafbeeldingen. De auteur gaat vervolgens verder met eenvoudige CSS-animaties, responsieve typografie en toegankelijkheid.

CSS Flexbox First Look
James Williamson
Deze cursus neemt je stap voor stap terwijl je alle syntaxis leert voor de CSS Flexbox Layout Module. De auteur bespreekt wat Flexbox kan doen en de huidige browserondersteuning. Vervolgens bespreekt hij onderwerpen als elementstroom, inpakinhoud, uitlijnen van items en nesten van flexibele containers.

CSS Grid First Look
Morten Rand-Hendriksen
In deze cursus leert u een nieuwe en verbeterde manier om tweedimensionale rasterlay-outs te maken. Beginnend met de basis voor het gebruik van CSS Grid om responsieve rasterlay-outs te bouwen, behandelt de auteur wat u moet weten om zowel een online magazine als een lay-out met drie kolommen te bouwen.

Responsieve formulieren bouwen met Flexbox
James Williamson
U kunt geen website ontwerpen zonder formulieren. Formulieren moeten net zo reageren op alle typen en formaten schermen, net als de rest van de site. Williamson leert je hoe je het CSS Flexbox-boxmodel kunt gebruiken om responsieve webformulieren te maken en te stijlen. Hij begint met een eenvoudig zoekformulier en bouwt op tot een groot formulier met twee kolommen.

Responsieve afbeeldingen
Morten Rand-Hendriksen
Als u Wordpress gebruikt, weet u dat het automatisch afbeeldingen van verschillende formaten genereert voor elke afbeelding die u naar het systeem uploadt. Waarom? In deze cursus wordt het concept achter responsieve afbeeldingen uitgelegd en hoe u deze op uw eigen website kunt gebruiken.

Video-Instructies: 11 het fotoblok links gefloat (Mei 2024).