Del 3 – Lär dig göra layouter för webben

Idag är det dags att djupdyka ner i något som kallas Flexbox. Det finns många sätt att placera objekt på en sida, Flexbox är ett av dessa sätt. När du är klar med dagen kommer du veta hur man lägger objekt bredvid varandra, hur man centrerar objekt och all annan positionering.

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 4 kommer att skickas till din mejl imorgon.

Videoföreläsningarna är på engelska och är lånade från vårt webbutvecklings bootcamp på Technigo.

Lycka till!

1. Vad ska vi lära oss idag?

✅ Hur man gör layouter på hemsidor
✅ Grunderna i flexbox
✅ Vikten av kvinnliga förebilder

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

”Jag vill lära ut programmering och startade Kids Hack Club i Barcelona”

Nu är det dags att lära känna Jennie Dalgren som inte bara jobbar på Tjejer Kodar utan även är lärare för vårat Technigo Boot Camp. Hon berättar bland annat om när hon flyttade ner till Barcelona och startade Kids Hack Club.

Spela upp poddavsnitt

3. Lär dig grunderna

4. Börja koda

Idag ska vi kolla lite närmare på layout och placering av olika element på en sida. Framförallt ska vi öva oss på att använda Flexbox och på köpet kommer du att ha byggt en startsida till en webbshop. Yay!

🚀 Uppgift: Bygg en webbshop

Ladda ner kodfilerna och öppna dom i din kodeditor och webbläsare. Vi har gett dig en rätt tom sida med ett antal produkter i en webbshop. Vår webbbshop säljer art prints men här vill vi att du skapar en webbshop med saker som du gillar.

Just nu ligger alla produkter på en rad. Din uppgift blir att först öva på Flexbox genom att spela spelet Flexbox froggy. När du är klar med det ska du lägga till Flexbox-attribut i CSS-filen så att alla produkter i webbshoppen hamnar i tre kolumner. Dvs tre produkter bredvid varandra om du tittar på en vanlig datorskärm. Du får som vanligt styla sidan så som du vill – go nuts!

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

5. Bli inspirerad

Hanna Ek

”I have always been curious about coding and tried it out a bit as a young girl. Later on, I stumbled over Tjejer Kodar on Facebook and was intrigued.

Hanna gick från Sales to Project Lead & Platform Developer

Läs hela intervjun