Webbutveckling i HTML och CSS: Från start till sidlayout

I kursen webbutveckling 1 för gymnasiet är det en hel del som eleverna förväntas lära sig. Det jag tycker har varit svårast är att gå från enkla HTML-taggar och CSS-selektorer till att använda CSS-selektorer som skapar hela webbsidans layout.

Jag tycker att de nya taggarna header, nav, section, article och footer har varit till stor nytta för att skapa stommen i HTML. Selektorn display har underlättat när man ska skapa sidans layout.

Något som inte alltid är lätt att hinna med är hur man lyckas få färger som matchar varandra på en webbplats. Sidan colorschemedesigner ger snabbt passande färger och deras hexkod. För att slippa behöva fixa bilder bara för att testa sin layout använde jag placekitten.com. För att kunna undersöka strukturen i koden använde jag tillägget Firebug till Firefox.

Channel 9 har en mycket bra och grundlig genomgång av HTML5 och CSS3. Det enda som saknas är hur man praktiskt gör just med sidlayouter. I filmerna nedan för söker jag visa ett av många sätt man kan tänka när man ska skapa en sidlayout. Filmerna är 60 min tillsammans så dela upp tiden på några olika tillfällen.

Filmerna spelade jag in med på en Mac med QuickTime Player och redigerat med iMovie. Jag rekommenderar Head First HTML with CSS & XHTML som går igenom HTML5 och CSS på ett bra sätt.