|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
|
|
"translation_date": "2025-10-03T09:56:43+00:00",
|
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
|
"language_code": "sv"
|
|
|
}
|
|
|
-->
|
|
|
# CSS-omstruktureringsuppgift
|
|
|
|
|
|
## Syfte
|
|
|
|
|
|
Omstrukturera terrariumprojektet för att använda **Flexbox** eller **CSS Grid** för layout. Uppdatera HTML och CSS vid behov för att uppnå en modern, responsiv design. Du behöver inte implementera dragbara element – fokusera endast på layout och styling.
|
|
|
|
|
|
## Instruktioner
|
|
|
|
|
|
1. **Skapa en ny version** av terrarium-appen. Uppdatera HTML och CSS för att använda Flexbox eller CSS Grid för layout.
|
|
|
2. **Säkerställ att konsten och elementen är på plats** som i den ursprungliga versionen.
|
|
|
3. **Testa din design** i minst två olika webbläsare (t.ex. Chrome, Firefox, Edge).
|
|
|
4. **Ta skärmdumpar** av ditt terrarium i varje webbläsare för att visa kompatibilitet mellan webbläsare.
|
|
|
5. **Skicka in** din uppdaterade kod och skärmdumpar.
|
|
|
|
|
|
## Bedömningskriterier
|
|
|
|
|
|
| Kriterier | Exemplariskt | Tillräckligt | Behöver förbättras |
|
|
|
|-------------|---------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
|
|
| Layout | Fullständigt omstrukturerad med Flexbox eller CSS Grid; visuellt tilltalande och responsiv | Vissa element omstrukturerade; delvis användning av Flexbox eller Grid | Lite eller ingen användning av Flexbox eller Grid; layout oförändrad |
|
|
|
| Kompatibilitet mellan webbläsare | Skärmdumpar tillhandahållna för flera webbläsare; konsekvent utseende | Skärmdumpar för en webbläsare; mindre inkonsekvenser | Inga skärmdumpar eller stora inkonsekvenser |
|
|
|
| Kodkvalitet | Ren, välorganiserad HTML/CSS; tydliga kommentarer | Viss organisation; få kommentarer | Oorganiserad kod; saknar kommentarer |
|
|
|
|
|
|
## Tips
|
|
|
|
|
|
- Granska [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) och [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) guider.
|
|
|
- Använd webbläsarens utvecklingsverktyg för att testa responsivitet.
|
|
|
- Kommentera din kod för tydlighet.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Ansvarsfriskrivning**:
|
|
|
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör det noteras att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning. |
