Milstolpe: Galleriet

Uppdraget

Galleriet har vuxit genom hela temat. Du skapade sidan och de tre korten när du lärde dig enheter, mätte kortets låda i boxmodellen, gjorde länken tryckbar i hit areas, satte typografin och bildtexterna, gav korten liv med states, granskade bildernas licenser och la kolumnen på rad med flexbox och media queries.

Nu gör du det färdigt. Ingenting nytt ska läras in här, allt du behöver har du redan byggt en gång. Det som återstår är att fylla galleriet med riktigt innehåll, jämna till det som är halvfärdigt och kvalitetssäkra det som en publicerad webbplats.

Fyll på till minst sex kort. Tre räckte för att lära sig layouten, men ett galleri med tre bilder är en övning, inte en samling. Med sex ser du också om din brytpunkt håller när raden blir längre.

Checklista för godkänt

- [ ] Minst sex kort, var och en med bild, rubrik och bildtext
- [ ] Alla bilder ligger i img/, är optimerade och har meningsfull alt-text
- [ ] Korten ligger på rad på bred skärm och under varandra på mobil
- [ ] Typskalan är variabler i :root, inga hårdkodade textstorlekar
- [ ] Länkarnas klickyta är minst 44px, kontrollerad i Computed
- [ ] :hover, :focus-visible och :active fungerar på kortens länkar
- [ ] Validator.nu: noll fel
- [ ] WAVE: noll röda ikoner, och bildtexten klarar 4.5:1
- [ ] README med källa och licens för varje bild
- [ ] Sidan ligger publicerad på en länk som fungerar

Uppgift: Inlämning: Galleriet

Detta ska lämnas in

GitHub-länk till repot galleri (måste vara publikt)
Publicerad URL på GitHub Pages, länken ska leda till ett fungerande galleri och inte till en 404

Kvalitetsstämpel

Godkänd leverans har varje ruta i checklistan ikryssad, fungerar för någon annan än dig på en riktig telefon, och innehåller bara bilder du har rätt att visa.

Motivera & reflektera

Skriv i galleriets README, ett par stycken räcker:

Innehållet: Vad visar galleriet, och varför valde du just det? Vilken bild var du osäker på, juridiskt eller etiskt, och hur landade du?
Besluten: Välj två konkreta val, till exempel brytpunkten, bildtextens storlek eller kortets padding, och motivera dem mot något annat än smak: läsbarhet, klickyta, kontrast eller innehållets bredd.
Det som återstår: Vad är sämst på sidan just nu, och vad skulle du göra åt det med en vecka till? Att kunna peka ut sin egen svagaste punkt är en styrka, inte en brist.

Nästa nivå

Ditt galleri laddar alla bilder direkt, även de som ligger långt ner och som besökaren kanske aldrig scrollar till. Det finns ett attribut som säger åt webbläsaren att vänta med dem tills de närmar sig skärmen. Leta upp det i MDN:s referens för <img> och lägg det på korten som ligger under första skärmen, men inte på de översta.

Mät sedan skillnaden i stället för att lita på att det hjälpte: öppna DevTools, fliken Network, sätt strypning till Slow 3G och ladda om. Jämför antalet överförda filer och den totala vikten före och efter. Varför ska attributet inte sitta på de översta bilderna?