msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'f087f6d7ec'
${ noResults }
Web-Dev-For-Beginners/translations/nl/3-terrarium/2-intro-to-css/assignment.md

2.8 KiB
Raw Blame History

CSS Refactoring Opdracht

Doel

Refactor het terrariumproject om Flexbox of CSS Grid te gebruiken voor de lay-out. Werk de HTML en CSS bij om een moderne, responsieve vormgeving te bereiken. Je hoeft geen sleepbare elementen te implementeren—richt je alleen op de lay-out en styling.

Instructies

  1. Maak een nieuwe versie van de terrarium-app. Werk de markup en CSS bij om Flexbox of CSS Grid te gebruiken voor de lay-out.
  2. Zorg ervoor dat de kunst en elementen op hun plaats zijn zoals in de originele versie.
  3. Test je ontwerp in minstens twee verschillende browsers (bijv. Chrome, Firefox, Edge).
  4. Maak screenshots van je terrarium in elke browser om de compatibiliteit tussen browsers aan te tonen.
  5. Lever je bijgewerkte code en screenshots in.

Beoordelingscriteria

Criteria Uitmuntend Voldoende Verbetering nodig
Lay-out Volledig gerefactord met Flexbox of CSS Grid; visueel aantrekkelijk en responsief Sommige elementen gerefactord; gedeeltelijk gebruik van Flexbox of Grid Weinig of geen gebruik van Flexbox of Grid; lay-out ongewijzigd
Cross-Browser Screenshots geleverd voor meerdere browsers; consistente weergave Screenshots voor één browser; kleine inconsistenties Geen screenshots of grote inconsistenties
Codekwaliteit Schone, goed georganiseerde HTML/CSS; duidelijke opmerkingen Enige organisatie; weinig opmerkingen Ongeorganiseerde code; geen opmerkingen

Tips

  • Bekijk de gidsen over Flexbox en CSS Grid.
  • Gebruik de ontwikkelaarstools van je browser om de responsiviteit te testen.
  • Geef commentaar in je code voor duidelijkheid.

Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.