Övningsuppgift 2

Övningsuppgift 2 - Rätta HTML och skapa layout med CSS

Rätta en färdig HTML-fil, skapa en CSS-fil och publicera resultatet på GitHub Pages.

Viktigt

Den här uppgiften måste utföras för att nå högre än E.

Du ska ha gjort Övningsuppgift 1 innan du gör denna uppgift.

Filmgenomgångar

Se filmerna om hur du ska göra uppgiften: spellista för Övningsuppgift 2.

CSS-delen börjar 11:20 in i första filmen: börja vid CSS-genomgången.

Startfiler

Ladda ner zip-filen och packa upp den. Filerna ska ligga i en mapp som heter ovn2.

  • ovn2.zip - innehåller index.html, html.webp och css.webp.

Uppgift

  1. Rätta till eventuella fel i HTML-filen så att index.html klarar HTML-valideringen.
  2. Ändra inget annat än felen i HTML-filen. Ändra inte ens <link>-elementet.
  3. Skapa en CSS-fil som kopplas till index.html via den länk som redan finns i HTML-filen.
  4. Styla sidan enligt kraven nedan.
  5. Validera både HTML och CSS.
  6. Publicera koden på GitHub och sidan med GitHub Pages.

Krav på CSS

  • Ändra alla fonter till Verdana, sans-serif.
  • Använd svart text och se till att texten syns tydligt.
  • Byt bakgrundsfärg på body till en ljus färg som inte är vit.
  • Byt bakgrundsfärg på article och footer till en annan ljus färg.
  • Ändra de två länkarna, alltså <a>-elementen, till en lämplig mörkare färg än bakgrundsfärgen.
  • Ta bort understrecken från länkarna.
  • Se till att understrecket kommer fram när man hovrar över länkarna.
  • Använd Grid eller Flexbox för att lägga article i två spalter.

Exempel

Bilden visar ungefär hur en färdig sida kan se ut. Din sida behöver inte vara exakt likadan, men den ska följa kraven.

Exempel på färdig sida för Övningsuppgift 2
Exempel på hur Övningsuppgift 2 kan se ut när HTML och CSS är klara.

Validering

Både HTML-koden och CSS-koden ska klara W3C-validering.

Publicering

Lägg upp koden på GitHub och publicera sidan med GitHub Pages. Lämna in både länken till koden och länken till den publicerade sidan.

Exempel på länkar:

Checklista för inlämning

  • Du har laddat ner ovn2.zip och packat upp filerna i mappen ovn2.
  • HTML-felen är rättade utan att du har ändrat annat innehåll i HTML-filen.
  • Du har skapat CSS-filen som index.html länkar till.
  • Du har använt Verdana, sans-serif på all text.
  • Du har använt ljusa bakgrundsfärger enligt kraven.
  • Länkarna har mörkare färg, saknar understreck normalt och får understreck vid hover.
  • article ligger i två spalter med Grid eller Flexbox.
  • HTML och CSS är validerade.
  • Du lämnar in både GitHub-länken och GitHub Pages-länken.