Kom igång

I guiden bygger vi upp en sidan som kan betraktas som en “One-page” webbplats. Tanken är ett resultatet blir en webbplats för en tänkt verksamhet och hela webbplatsen ligger på en enda webbsida.

Ta nu möjligheten och bygg din helt egna webbplats med helt eget innehåll. Du kan välja en riktig verksamhet eller så väljer du en påhittad. Lägg extra tid på att hitta bra bilder och text så det matchar din webbplats.

Om du jobbar igenom denna övningen grundligt och samtidigt fyller den med eget innehåll så har du löst en stor del av uppgiften för detta kursmoment.

I samband med att webbplatsen byggs upp så presenteras du för ett antal vanliga CSS-konstruktioner som kan vara bra att ha koll på när man bygger webbplatser och vi fortsätter att jobba med flexbox.

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

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

×

Förberedelser

Du har jobbat igenom kmom02 och är klar med den webbplatsen. Vi fortsätter att bygga ut den webbplatsen och det vi gör i denna övningen placerar du i din befintliga webbplats.

Du har tittat på den inspelade föreläsningen om CSS.

Förutsättningar

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

Steg för steg

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

1. En mall för en responsiv One-page webbplats.
2. Bakgrundsbilder i en div.
3. CSS variabler och calc().
4. Innehåll i tre, två eller en kolumner.
5. Innehåll som wrappas om det är mer innehåll än kolumner.
6. Innehåll som skrollas om det är mer innehåll än kolumner.