Skip to content
Kursen webtec

Kmom03: Struktur och stil

Vi har nu ägnat ett par veckor åt att lära oss grunder i HTML och CSS (och JavaScript) och nu är det dags att utföra ett mindre arbete som visar hur mycket vi lärt oss så här långt.

Vi skall bygga en webbplats som kallas “One-page” webbplats. Det är en webbplats som får plats på en webbsida. Allt innehåll ligger på en och samma sida. Det finns en guide som visar hur du kommer igång med grunderna för en sådan webbplats och uppgiften är att bygga en sådan webbplats till en tänkt (påhittad) kund, företag eller organisation.

Så här kan delen av en webbplats se ut.

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

Läs & Studera

Här kan du på egen hand studera och förbereda dig inför övningar och uppgifter.

Föreläsning

Det finns inga inspelade föreläsningar till detta kursmomentet.

Litteratur

Det finns ingen särskild litteratur eller läsanvisningar till detta kursmomentet.

Video för orientering

Titta på följande videor/filmer. Filmerna är tänkta att ge dig en allmän orientering i det område som behandlas i kursmomentet.

  • Evolution of Web Design 1990-2019 (8 min)
  • Bad Web Design: A Look At The Most Hilariously Terrible Websites From Around The Web (11 min)

Videorna ovan finner du även i spellistan “Om webbteknologier (HTML, CSS, JavaScript)”.

För JavaScript den här veckan kikar du på de videor som berör:

  • forloop
  • while
  • Smygkika på funktioner

Videorna ovan finner du i spellistan “Kom igång med js - webtec 2025”.

Instuderingsfrågor

Här finns ett antal instuderingsfrågor som hjälper dig att finna information på egen hand för att träna på de koncept som är relevanta för detta kmom.

Instuderingsfrågor om HTML/CSS
  1. Finns det ett koncept som heter “One-page” webbplats?
  2. Vad skall man tänka på när man bygger en sådan webbplats?
  3. Kan man göra en grundstruktur för sidan med HTML där man delar in sidan i rader och varje rad har kolumner med innehåll?

Här är ett exempel på en session från en Ai-kompis.

Instuderingsfrågor om JavaScript

  1. Hur fungerar en forloop i JavaScript?

  2. Hur fungerar en whileloop i JavaScript?

  3. Hur fungerar funktioner i JavaScript?

Tänk på att vi namnger inte funktioner med svenska namn, framförallt inte ÅÄÖ.

Övningar & Uppgifter

Övningar är träning inför uppgifterna, det är ofta klokt att jobba igenom övningarna då de förbereder dig inför uppgifterna. Uppgifter skall utföras och redovisas.

Övningar

Jobba igenom övningarna, de förbereder dig inför uppgifterna.

  1. Jobba igenom övningen “Bygg grunden för en One-page webbplats”.

  2. Gå igenom artikeln om de vanligaste konstruktionerna del 2 i JavaScript.

Uppgifter

Följande uppgifter skall utföras och resultatet skall redovisas.

  1. Utför laborationen “Lab 3: JavaScript med mer kontrollstrukturer”.

  2. Gör uppgiften “Bygg en One-page webbplats”.

Resultat & Redovisning

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i din redovisningstext i din rapportsida.

  • Berätta om temat för din One-page webbplats, vilket är det och vad handlar det om samt hur du tänkte när du valde färgpaletten.

  • Hur hittade du resurser likt bilder, text och inspiration till din webbplats?

  • Fanns det några hinder eller utmaningar när du byggde din webbplats?

  • Har du några råd till den som är nybörjare på CSS, vad skall man börja med?

  • Vilken är din TIL för detta kmom?