Avancerad layout

Översikt

Fyra stora delar

Instruktioner

Följ hela filmserien

Uppgiften är omfattande och förklaras i flera filmer.

Se filmerna och genomför samtliga delar – hoppa inte direkt till slutresultatet.

Startfiler

Ladda ner bildpaketet

• Packa upp zip-filen.
• Konvertera bilderna som används till WebP.
• Öppna projektmappen i VS Code.

Layoutbilder

Referenser – inte innehåll

• Fyra bilder visar hur sidorna ska se ut.
• Index finns för mobil och desktop.
• Contact finns för mobil och desktop.
• Lägg inte layoutbilderna i din egen webbplats.

Mobil först

Bygg den smala layouten först

Media query

Ändra layout från 800px

.page {
  display: grid;
  gap: 1rem;
}

@media (width >= 800px) {
  .page {
    grid-template-columns: 1fr 1fr;
  }
}

Indexsidan

Jämför mobil och desktop

MobilDesktop

Mobilversionen byggs först.

Kontaktsidan

Jämför mobil och desktop

MobilDesktop

Formuläret ska fungera i smal vy först.

Två HTML-sidor

Filer som ska byggas

Båda HTML-filerna ska länka till samma CSS-fil.

Layoutkrav

Centrerat innehåll på båda sidorna

.page {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

Exakt lösning kan variera, men innehållet ska vara centrerat.

Design

Följ layouten – välj egna färger

• Utgå från layoutbildernas struktur.
• Slumpa fram ett eget färgschema i Coolors.
• Använd inte lärarens färgschema.
• Kontrollera att texten syns tydligt mot bakgrunden.

Navigation

Två länkar med knappliknande design

nav a {
  display: inline-block;
  padding: .7rem 1rem;
  border-radius: .4rem;
  text-decoration: none;
}

Länkarna ska fortfarande fungera och vara tydliga som navigation.

Meta description

Behövs på båda sidorna

<meta
  name="description"
  content="Kort beskrivning av sidans innehåll.">

Skriv en beskrivning som passar respektive sida.

Kontrast

Texten måste vara läsbar

Font

Välj en sans-serif fontstack

body {
  font-family: system-ui, sans-serif;
}

• Välj från Modern Font Stacks.
• Systemfonter minskar externa fontanrop.
• Kontrollera att texten är lätt att läsa.

Lighthouse

Testa båda sidorna

• Öppna Lighthouse i Chrome DevTools.
• Kör testet på index.html.
• Kör testet på contact.html.
• Rätta problemen enligt uppgiften.
• Bildtestet och Google Fonts är undantagna.

HTML-validering

Validera båda HTML-filerna

1. Kontrollera index.html.
2. Rätta första felet.
3. Validera igen.
4. Gör samma sak med contact.html.

CSS-validering

Kontrollera styles.css

1. Öppna W3C CSS Validator.
2. Ladda upp eller klistra in CSS-koden.
3. Rätta syntaxfel.
4. Kör kontrollen igen tills koden validerar.

Bilder

Allt som används ska vara WebP

• Konvertera före publicering.
• Kontrollera filstorleken.
• Använd relevant alt-text.

CSS reset

En kontrollerad startpunkt

En reset tar bland annat bort eller jämnar ut webbläsarens automatiska marginaler.

<link rel="stylesheet"
  href="https://unpkg.com/modern-css-reset/dist/reset.min.css">

Länka din egen CSS efter reset-filen.

CSS-stöd

Verktyg när du fastnar

Publicering

GitHub och GitHub Pages

Lämna in

Två fungerande länkar

1. Länk till repositoryt på GitHub.
2. Länk till den publicerade sidan på GitHub Pages.
3. Öppna båda länkarna i ett nytt fönster.
4. Kontrollera att senaste versionen visas.

Slutkontroll 1

Filer och layout

Slutkontroll 2

Kvalitet och publicering

Arbetsordning

Gör en del i taget

1. Ladda ner, packa upp och konvertera bilder.
2. Bygg index och contact mobilt först.
3. Skapa desktoplayout med media query.
4. Välj färger, font och knappliknande navigation.
5. Validera, testa kontrast och kör Lighthouse.
6. Publicera och testa båda länkarna.

Klart för inlämning

Kontrollera en sista gång

• Jämför mot alla fyra layoutbilder.
• Testa mobil och desktop på den publicerade sidan.
• Klicka på båda menylänkarna.
• Skicka formuläret med testdata.
• Öppna GitHub- och GitHub Pages-länkarna.