Skip to content
Kursen webtec

Kmom02: Responsiv webbplats

Image description
Bild: En responsiv navbar.
Image description
Bild: Kolumn layout för en, två och tre kolumner - på ett responsivt sätt.

Vi jobbar med konceptet responsiv webbplats och uppgraderar vår webbplats så den fungerar lika bra i en desktop dator som i en mobil eller läsplatta.

En 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.

Tanken är att vi har en enda grund för webbplatsen och med hjälp av CSS och lite JavaScript så får webbplatsen ändra utseende beroende av hur stor skärmen är på den enhet som visar webbpaltsn.

På små enheter som mobiler så kan webbsidan inte vara för bred och navigeringen behöver vara ändamålsenlig. På bredare skärmar har webbplatsen mer utrymme och kan jobba mer i kolumner.

Vi fortsätter också med att jobba med grunderna i JavaScript och det finns en ny labb att jobba igenom.

Läs & Studera

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

Föreläsning

Titta på följande inspelade föreläsningar. Föreläsningarna kan innehålla tips om läsanvisningar.

  1. Introduktion till CSS där vi går igenom grunderna i CSS och utgår från standarden och kikar på struktur, konstruktioner och hur det fungerar.

  2. Responsiv webbdesign visar tankarna bakom konceptet och vissa grundstenar för att komma igång med responsiva webbplatser.

Litteratur

Studera litteratur och resurser enligt följande.

  1. Studera grunderna för responsiva webbplatser i artikeln “MDN: Responsive design”.

  2. En bra guide för att första de olika delarna av hur flexbox fungerar är guiden CSS Flexbox Layout Guide, titta gärna kort i den och använd den som uppslagsverk för att se vilka amöjligheter som finns.

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.

  • 5 CSS Tips & Tricks for better Responsive Web Design (9 min)
  • Top 10 Advanced CSS Responsive Design Concepts You Should Know (20 min)
  • How to create a Responsive Navigation Bar (for beginners) (15 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:

  • if
  • Switch/case

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

Ai som lärare (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 responsiv webbdesign
  1. Berätta kort om bakgrunden till responsiv webbdesign och hur det har växt fram.
  2. Vilka andra närliggande tekniker finns som syftar till att lösa samma eller liknande problematik?
  3. Hur står sig tekniken responsiv webbdesign idag?
  4. Vilka är de grundläggande delar som jag behöver lära mig för att förstå responsiv webbdesign, som ett första steg?
  5. Vad innebär en hamburger-meny?

Här är en utskrift av när en frågesession genomförts. Dina svar kan skifta från de som visas. Var alltid kritisk till dina källor.

Instuderingsfrågor om JavaScript

  1. Vad händer om jag skriver node i terminalen?

  2. Hur fungerar if satser i JavaScript?

  3. Hur fungerar switch case i JavaScript?

Ö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 en responsiv webbplats”.

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

Uppgifter

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

  1. Utför laborationen “Lab 2: JavaScript med kontrollstrukturer (statements)”.

  2. Gör uppgiften “Bygg en responsiv 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 hur det gick att jobba igenom övningen och uppgiften, gav övningen det du behövde för att lösa uppgiften? Fastnade du på något?

  • Har du tidigare reflekterat över att webbplatser kan vara responsiva, eller att det kan vara skillnad på hur en webbplats visas på små och stora skärmar?

  • Är du nöjd med utseendet på din webbplats eller är det något du hade velat ändra på om tiden hade medgett?

  • Vad är din uppfattning om programmeringsspråket JavaScript, så här långt?

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