Övningsuppgift 3 - Avancerad layout

Instruktioner

I dessa filmer förklaras den här ganska omfattande uppgiften: filmserie för Övningsuppgift 3. Se och gör alla delarna.

Filer

Här är filerna du behöver: ovn3-images.zip.

Zip-filen innehåller bilderna som ska användas på webbplatsen. Alla bilder som används på webbplatsen ska vara i WebP-format.

Layoutbilder

De fyra bilderna i mappen ovn3-layout visar hur sidorna ska se ut. Använd inte layoutbilderna i din egen webbplats. De är bara stöd för hur du ska bygga layouten.

• För index finns en desktopversion och en mobilversion.
• För contact finns en desktopversion och en mobilversion.
• Gör alltid mobildesignen först och ändra sedan till desktoplayout med media query.
• Tips: i stället för min-width och max-width kan du använda <, >, <= och >= i media queries.

Exempel på en media query med den nya syntaxen:

/* Mobil först */
.page {
    display: grid;
    gap: 1rem;
}

/* Desktop när skärmen är minst 800px bred */
@media (width >= 800px) {
    .page {
        grid-template-columns: 1fr 1fr;
    }
}

Krav

• Du ska bygga två sidor: index.html och contact.html.
• Både indexsidan och kontaktsidan ska ha centrerat innehåll.
• Båda sidorna ska klara validering av HTML och CSS.
• Design och layout ska följa layoutbilderna, men du väljer färger själv.
• Texten ska synas tydligt mot bakgrunden.
• De två länkarna i menyn ska se ut som länkar, men de får inte ha standardutseende. De ska ha ett knappliknande utseende.
• Webbplatsen ska klara kraven i Lighthouse, utom bildtesten och Google Fonts.
• Du ska ha en meta description på båda sidorna.
• Bakgrunds- och textfärger ska ha tillräcklig kontrast.

Färg och font

• Välj färger från Coolors. Du får inte använda mitt färgschema. Slumpa fram ett eget färgschema.
• Välj en sans-serif fontstack från Modern Font Stacks. Det minskar laddningstiden och undviker externa fontanrop.

Testning

• Testa webbplatsen med Lighthouse i Chrome DevTools.
• Kontrollera särskilt felet Document does not have a meta description.
• Kontrollera kontrast med Color Contrast Accessibility Validator.
• Läs mer om kontrastproblemet här: Background and foreground colors have a sufficient contrast ratio.
• Validera HTML med W3C Markup Validation Service.
• Validera CSS med W3C CSS Validation Service.

Bilder

Alla bilder ska vara i WebP-format. Använd till exempel Squoosh eller CloudConvert WebP Converter för att konvertera bilder.

Om du vill läsa mer om Lighthouse-varningen finns Googles guide: Serve images in modern formats.

CSS-stöd

I uppgiften visas en CSS reset. Den tar bland annat bort marginaler som webbläsaren sätter automatiskt, så du kan börja mer kontrollerat.

• Läs mer: A Modern CSS Reset.
• Extern reset via unpkg: <link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css">
• Extern reset via jsDelivr: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css">
• Grid-lathund: CSS Grid Cheatsheet.
• Viewport units: CSS-Tricks: Fun With Viewport Units.
• MDN: place-items.
• MDN: place-content.

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.

Film om hur man gör: publicera med GitHub Pages.

• Exempel på länk till koden på GitHub: https://github.com/paubel/web1-02-first-web-page
• Exempel på länk till GitHub Pages: https://paubel.github.io/web1-02-first-web-page/

Checklista för inlämning

• Du har byggt index.html och contact.html.
• Du har utgått från mobilversionen först.
• Du har använt media query för desktoplayout.
• Båda sidorna har centrerat innehåll.
• Menylänkarna har knappliknande design.
• Du har valt eget färgschema från Coolors.
• Du har valt en sans-serif fontstack från Modern Font Stacks.
• Alla bilder som används på webbplatsen är WebP.
• HTML och CSS klarar validering.
• Sidorna klarar Lighthouse-kraven enligt uppgiften.
• Kontrasten klarar Color Contrast Accessibility Validator.
• Du lämnar in både GitHub-länken och GitHub Pages-länken.