Skip to content
Kursen webtec

Bygg en responsiv webbplats (kmom02)

Denna uppgift görs som en del av kmom02 och den sätter kraven för den webbplats du skall bygga.

Förutsättning

Du har genomfört kmom01 och du har genomfört övningen “Bygg en responsiv webbplats”.

Allmänt

Om du har utfört övningarna så har du gjort 80% av uppgiften.

Övningen visar de delar av responsivitet som du behöver för att lösa uppgiften.

Krav

Utför följande krav.

  1. Fortsätt och bygg ut den webbplatsen du gjorde i kmom01. Din nya webbplats skall uppfylla alla krav som fanns i uppgiften i kmom01, om inget annat sägs nedan.

  2. Till denna uppgiften skall du lägga all din CSS-kod i filen public/css/responsive-design.css men du får gärna dela upp filen i små filer som du importerar. Försök återanvända den css-koden du byggde i kmom01, modifiera den gärna.

  3. Till denna uppgiften skapar du en fil public/js/responsive-design.js där du placerar den JavaScript-kod som är relevant för uppgiften.

  4. Bygg om din header och navbar så att navbaren blir responsiv likt en “hamburger-meny”. Välj en rimlig brytpunkt och se till att båda varianterna av meny är stylade på ett rimligt sätt.

  5. Din sida me.html skall vara responsiv och det huvudsakliga innehållet placeras i main. Du kan göra denna sida som en, två eller tre kolumner.

  6. Din sida report.html skall ha en design av två kolumner och vara responsiv där main alltid stackas överst.

  7. Bygg om din sida about.html så att den har en tre kolumners layout med main i mitten. Sidan skall vara responsiv och main skall alltid stackas överst.

  8. Din triptych footer skall vara responsiv och stackas.

  9. Uppdatera din stylesheet så att den skiljer sig i utseende jämfört med hur resultatet såg ut i övningarna. Försök göra en personlig stil som passar dig, men försök också göra en stil som är accepterad av en bredare användarbas. Detta kravet är ett krav som återkommer i nästa kmom så du kan själv välja hur mycket tid du lägger på det.

  10. Dina webbsidor skall validera i W3C HTML validator.

  11. Dina webbsidor skall validera i W3C CSS validator (när det är rimligt).

  12. Din webbplats skall passera npx eslint.

  13. Din webbplats skall gå att starta via npx http-server.

Övrigt

Här finns övriga saker som är bra att tänka på.

  1. Prova att validera dina webbsidor och använd lintern ofta, så slipper du en massa fel i slutet.

  2. Gör många och små commits i ditt git repo, du kan ha ungefär 10-20 commits för en sådan här uppgift.