Lär dig CSS Flexbox på Lynda.com

• April 29, 2024

Efter tio år, som är en livstid på webben, beslutade vi att ge webbplatsen MUSED Literary Review ett nytt utseende. Naturligtvis ville vi använda de nyaste HTML och CSS och det betyder att vi använder Flexbox, CSS Grid och Responsive Web Design.

Tack vare Lynda.com tog det inte lång tid att få fart. Nedan följer bara några av de bästa videohandböckerna som hjälpte mig att utforma det nya utseendet för MUSED.

Avancerade responsiva layouter med CSS Flexbox
Morten Rand-Hendriksen
I den här projektbaserade kursen tar författaren dig steg för steg när han bygger Flexbox-menyer, responsiva kortlayouter, Holy Grail-layouten och interaktiva komponenter.

CSS Avancerade layouter med rutnät
Morten Rand-Hendriksen
Du kommer att lära dig mycket på den här kursen. Författaren börjar med grunderna i CSS Grid och planera rutnätlayouter. Då är du redo att bygga en layout med flera kolumner och en fullblodslayout med en enda kolumn. Därefter lär du dig att utforma olika kortlayouter och en navigationspanel utanför skärmen som glider i vyn när det behövs.

CSS Essential Training 3
Christina Truong
I den här kursen kommer du att lära dig att använda CSS Grid och Flexbox för att bygga responsiva layouter. Du kommer också att lära dig hur du förbereder dina webbbilder för retina-skärmar och SVG-vektorbilder. Författaren går sedan vidare till enkla CSS-animationer, responsiv typografi och tillgänglighet.

CSS Flexbox First Look
James Williamson
Den här kursen tar dig steg för steg när du lär dig alla syntaxen för CSS Flexbox Layout Module. Författaren diskuterar vad Flexbox kan göra och det aktuella webbläsarstödet. Sedan diskuterar han grundligt ämnen som elementflöde, inslagning av innehåll, inriktning av objekt och häckning av flexbehållare.

CSS Grid First Look
Morten Rand-Hendriksen
I den här kursen lär du dig ett nytt och förbättrat sätt att skapa tvådimensionella rutnätlayouter. Börjar med grunderna för att använda CSS Grid för att bygga responsiva rutnätslayouter, och författaren täcker vad du behöver veta för att kunna bygga både en onlinemagasin och en tre-kolumnlayout.

Bygga responsiva formulär med Flexbox
James Williamson
Du kan inte designa en webbplats utan formulär. Blanketter måste vara lika lyhörda för alla typer och storlekar på skärmar, precis som resten av webbplatsen. Williamson lär dig hur du använder CSS Flexbox-boxmodellen för att skapa och utforma responsiva webbformer. Han börjar med ett enkelt sökformulär och bygger upp till en stor form med två kolumner.

Responsiva bilder
Morten Rand-Hendriksen
Om du använder Wordpress vet du att det automatiskt kommer att generera flera olika storlekar för varje bild som du laddar upp till systemet. Varför? Denna kurs kommer att förklara konceptet bakom responsiva bilder och hur du använder dem på din egen webbplats.

Video Instruktioner: Audacity: Complete Tutorial Guide to Audacity for Beginners (April 2024).