Skip to content
Kursen webtec

Kom igång

Denna guide hjälper dig att komma igång med grunderna i att bygga en responsiv webbplats.

Så här kan resultatet se ut när du har jobbat igenom denna guide och dess artiklar.

Image description
Bild: Så här ser delar av den avslutande webbplatsen ut.

Förberedelser

Du har jobbat igenom kmom01 och är klar med den webbplatsen. Tanken är att vi skall använda denna övningen för att senare bygga på webbplatsen från kmom01.

Förutsättningar

Artikeln är skriven så att du själv kan bygga upp webbsidorna medan du steg för steg jobbar igenom guiden.

Om responsiv webbplats

Konceptet “responsiv webbplats” innebär att vi kan bygga en och samma webbplats som visas med olika style på olika enheter. Vi använder oss av CSS media queries för att anpassa layouten och storleken på olika element beroende på skärmstorlek.

Förutom media queries behöver vi tänka igenom hur textens storlek och hur bilderna skall hanteras och placeras på olika enheter.

Grundtanken är att vi inte döljer någon information. All information på webbplatsen är tillgänglig för besökaren oavsett vilken enhet som används.

En bra responsiv webbplats är lika tillgänglig och användbar oavsett om den visas på en stor desktop skärm eller på en liten mobilskärm.

Steg för steg

Här är en översikt av de stegen vi skall gå igenom.

  1. Börja med att skapa en mall för en responsiv sida med flexbox.

  2. Inför responsivitet genom att stacka kolumner när webbläsar blir för smal för att visa webbplatsens innehåll.

  3. Använd flexbox wrap för att automatiskt stacka kolumner när de inte får plats på samma rad.

  4. Använd media queries för att anpassa layouten vid olika skärmstorlekar.

  5. Hur kan vi jobba med main och aside för att skapa en 2 kolumners layout?

  6. Hur kan vi jobba med main och aside för att skapa en 3 kolumners layout?

  7. Hur kan vi skapa en hamburgermeny för att hantera navigationen på små skärmar?