<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T09:38:14+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "it"
}
-->
# Compito di Rifattorizzazione CSS

## Obiettivo

Rifattorizzare il progetto del terrario utilizzando **Flexbox** o **CSS Grid** per il layout. Aggiorna l'HTML e il CSS secondo necessità per ottenere un design moderno e responsivo. Non è necessario implementare elementi trascinabili—concentrati solo sul layout e sullo stile.

## Istruzioni

1. **Crea una nuova versione** dell'app del terrario. Aggiorna il markup e il CSS per utilizzare Flexbox o CSS Grid per il layout.
2. **Assicurati che l'arte e gli elementi siano al loro posto** come nella versione originale.
3. **Testa il tuo design** in almeno due browser diversi (ad esempio, Chrome, Firefox, Edge).
4. **Fai degli screenshot** del tuo terrario in ciascun browser per dimostrare la compatibilità tra browser.
5. **Invia** il tuo codice aggiornato e gli screenshot.

## Criteri di Valutazione

| Criteri    | Esemplare                                                                 | Adeguato                              | Da Migliorare                          |
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Layout     | Completamente rifattorizzato utilizzando Flexbox o CSS Grid; visivamente attraente e responsivo | Alcuni elementi rifattorizzati; uso parziale di Flexbox o Grid | Poco o nessun uso di Flexbox o Grid; layout invariato |
| Compatibilità tra Browser | Screenshot forniti per più browser; aspetto coerente      | Screenshot per un solo browser; lievi incoerenze | Nessun screenshot o gravi incoerenze |
| Qualità del Codice | HTML/CSS pulito e ben organizzato; commenti chiari               | Qualche organizzazione; pochi commenti | Codice disorganizzato; mancanza di commenti |

## Consigli

- Consulta le guide su [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) e [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
- Usa gli strumenti di sviluppo del browser per testare la responsività.
- Commenta il tuo codice per maggiore chiarezza.

---

**Disclaimer**:  
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.