Link Search Menu Expand Document

Eindopdracht

Gebruik al je CSS Grid + responsive kennis om jouw dashboard te maken voor zowel mobiele schermen als desktop schermen.

  1. Test goed of het grid verandert bij een bredere scherm afmeting.
  2. Voeg padding en margin en background-colors toe aan de grid items.
  3. Zet in elke grid item een titel en een korte beschrijving wat er in komt.
  4. Gebruik een Google Font voor deze titels en teksten.
  5. Maak het mooi en gebruiksvriendelijk.

Extra (hoeft niet, mag wel)

  • Kun je het grid laten schalen zodat het grid het hele browser venster vult (Tip: denk aan 100vh en de 1fr unit)
  • Lukt het je om de hoogte van de Grid rijen ook te schaalbaar maken?
  • Probeer een extra mediaquery te maken die de layout aanpast voor tablets (een grootte tussen mobile en desktop)

Bewijs opslaan

  • Sla je wijzigingen op.
  • Maak een screenshot van het resultaat in je browser en bewaar deze bij je code.
  • Maak een commit met een duidelijke commit message

Inleveren in Teams

  • Zet de werkende versie op je Ma-Cloud.
  • Zet de link naar je Ma-Cloud pagina in een README document.
  • Het README document zet je in de map voor deze week: Week 4.
  • Lever de link naar ja Ma Cloud pagina in via de opdracht in Microsoft Teams.