Del 2 – Lär dig styla en hemsida

Hurra, nu har du skrivit din första kod i HTML! Idag kommer att du få arbeta med kodpsråket CSS som hjälper dig att skapa färg och form på din kod. Fokus idag är på hur man sätter färg och form på sin sida – inte hur man placerar olika objekt. Det tar vi imorgon när vi pratar om layouter.

Ta din tid och stressa inte igenom materialet. Om du inte förstår eller vill diskutera en specifik del av materialet kan du alltid ställa en fråga i Slack.

Del 3 kommer att skickas till din mejl imorgon.

Videoföreläsningarna är på engelska och är lånade från vårt frontend boot camp på Technigo.

Nu kör vi!

1. Vad ska vi lära oss idag?

✅ Skillnaderna på HTML och CSS

✅ Grunder i CSS

✅ De vanligaste CSS attributen

✅ Hur ett tech-team jobbar tillsammans

2. Lär känna din lärare

“En vanlig dag hos oss på Haj Agency kan vara otroligt olik.”

Lär känna Amelie Hellners Johnson som för några år sedan lärde sig programmera och idag är CEO för webbyrån Haj Agency i Göteborg. Utöver sin webbyrå så har även Amelie HAJA KOD som lär barn och vuxna mer om hur man programmerar.

Läs hela intervjun

3. Lär dig grunderna

4. Börja koda

I denna del ska vi göra en så kallad one-pager hemsida. Det är den vanligaste typen av webbsidor för företag. Det är generellt en startsida som sammanfattar vad företaget eller verksamheten gör. Du har säkert ett företag i din närhet eller en organisation eller förening som behöver en mindre hemsida. Annars går det jättebra att helt enkelt hitta på ett.

🚀 Uppgift: Bygg en företagssida

Ladda ner kodfilerna och öppna dom i din kodeditor samt webbläsare. Dagens uppgift är lite som en målarbok som man hade när man var liten där man ska fylla i sina egna färger. Vi har byggt en rätt tråkig mall för en företagssida som behöver piffas upp.

Din uppgift är att anpassa denna till ett företag i din närhet eller ett påhittat företag. Testa att byta bakgrundsbild, färger, fonter, ikoner så att det passar “ditt” företag. Kanske vill du lägga in bilder på hår och saxar om det är en frisör, kanske växter om det är en blomsterbutik. Du bestämmer!

Idag ska du främst jobba i style.css filen men du kommer, precis som igår, att också behöva ändra innehållet i index.html filen. Nu kör vi!

👉 Ladda ner kodfiler
👉 Hur man öppnar en kodfil
👉 Extrauppgifter

5. Bli inspirerad

Intervju med Sara Wistrand

Träffa teamcoach Sara på Svenska spel som berättar hur de jobbar i sitt team av utvecklare. Vad betyder det att jobba agilt och vad är en sprintperiod?

Läs också om hur Saras intresse väcktes för programmering och hennes bästa tips till dig som är nyfiken på att fortsätta programmera.

Läs hela intervjun