Kmom03: Layout

Vi ska denna vecka kolla på olika sätt att strukturera upp stommen av vår sida, vår layout. Att uppdatera vår layout är en av de större ändringar vi kan göra med hjälp av CSS/SASS, utan att uppdatera vår HTML.

Några av de tekniker vi ska kolla lite närmre på är Flexbox och CSS-Grid, som är två vanliga sätt att gå tillväga. Tanken är att ni i slutet av kursmomentet ska implementera dessa tekniker i eran portfolio.

Såhär kan det se ut när du är klar med kmom03.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läs & Studera

(ca: 8-10 studietimmar)

#Kurslitteratur

Läs följande:

1. Läs i boken “The principles of Beautiful Web Design”.

   • Kap 1: Layout and Composition (repetera)

#Design med HTML5 och CSS3

1. Läs igenom följande sektion i guiden “Design med HTML5 och CSS3”.
   • Layout

I sektionen Layout tittar vi på hur vi med hjälp utav Flexbox och CSS-Grid kan ändra sidans layout så den fungera bra oavsett skärmstorlek.

#Grid-baserad layout och Flex

Läs följande för att få en introduktion och översikt till gridbaserad layout och flexbox.

1. Läs två artiklar om “History of the design grid I” och “History of the design grid II” för att få en överblick om vad gridbaserad layout handlar om.

2. Det finns en artikel hos Design Systems, “Space, Grids and Layouts” som överskådligt går igenom en del saker som vi nämnde i förra kursmomentet utöver hur man kan tänka kring layout.

3. CSS-Tricks erbjuder en hel del trevliga guider för oss webbutvecklare, särskilt inom just Flexbox och CSS-Grid. De har väldigt tydliga exempel som gör det lätt att förstå hur de olika teknikerna beter sig samt vilka CSS-regler som finns tillgängliga. Du kan läsa mer om det i dessa tre artiklar:

   • CSS-Tricks - A Complete Guide to Grid
   • CSS-Tricks - A Complete Guide to Flexbox
   • CSS-Tricks - Centering in CSS: A Complete Guide

#Verktyg

Som designer finns det en del verktyg som hjälper dig att planera din design i förväg. Ingen av dessa program är ett måste för kursen, men om man vill kan man installera någon av dem och testa runt så

• Figma - The collaborative interface design tool (Gratis att använda men med betalversion)
• Adobe XD - UI/UX design and collaboration tool (Gratis att använda men med betalversion)
• ColorZilla - ColorPicker for Chrome, Edge and Firefox (Gratis)

Och som vi brukar säga, devtools är webbutvecklarens bästa vän.

#Övrigt

1. Artikeln “Design elements and Principles” går igenom olika design element och principer och är bra att läsa igenom under kursens gång.

#Video

Veckans PT-video handlar om din roll i en grupp.

#Hållbarhet

Vi fortsätter fokusera på perspektivet hållbarhet och vilken roll vi som programmerare har i den sammanhangen.

I detta kmom tar vi en titt på hur Internet skapar en mer jämlik värld där fler och fler kan få tillgång till information. International Telecommunication Union (ITU) är en del av FN och gav förr-förra året ut följande rapporter om Internet.

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

#Övningar

1. Följande delar av guiden bör genomföras:

   • CSS Grid Layout
   • Flexbox - Parent Elements
   • Flexbox - Child Elements

2. Arbeta igenom artikeln Skapa en specifik layout i Pico som beskriver hur du kan skapa en layout för specifika sidor.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Lös uppgiften “Bygg en teknologi-sida med CSS-Grid”.

2. Försäkra dig om att du har gjort dbwebb publishpure me och taggat din inlämning med version 3.0.0 (eller högre) samt pushat repot inklusive taggarna till GitHub.

#Resultat & Redovisning

(ca: 1 studietimme)

Läs instruktionen om hur du skall redovisa.

Kom ihåg att publicera din portfölj till GitHub. Använd nedanstående kommandon i terminal när du står i `me/portfolio:

git push
git push origin --tags

Publicera sedan till studentservern med följande kommando:

dbwebb publishpure me

Gör Quiz på Canvas och lämna sedan in din inlämning i den nu upplåsta uppgiften. Länka till din portfölj på studentservern som en del av din inlämning.

#Testa din inlämning

I detta kursmoment jobbar vi utifrån wireframes som finns tillgängliga i “Bygg en teknologi-sida med CSS-Grid”. Kolla så funktionaliteten överenstämmer de wireframes som finns i uppgiften.

#dbwebb test

Kommandot dbwebb test testar att grunderna för kmom’et är på plats. Vår rättning utgår från detta kommando.

$ dbwebb update
$ dbwebb test kmom03

#Revision history