Web-Dev-For-Beginners/translations/it/3-terrarium/2-intro-to-css/assignment.md

<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "bee6762d4092a13fc7c338814963f980",
  "translation_date": "2025-10-22T23:31:40+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "it"
}
-->
# Compito di Refactoring CSS

## Obiettivo

Trasforma il tuo progetto del terrario utilizzando tecniche moderne di layout CSS! Rifattorizza l'approccio attuale basato sul posizionamento assoluto per implementare **Flexbox** o **CSS Grid** e ottenere un design più manutenibile e responsivo. Questo compito ti sfida ad applicare gli standard moderni del CSS mantenendo l'estetica visiva del tuo terrario.

Comprendere quando e come utilizzare i diversi metodi di layout è una competenza cruciale per lo sviluppo web moderno. Questo esercizio collega le tecniche di posizionamento tradizionali ai sistemi di layout contemporanei del CSS.

## Istruzioni per il compito

### Fase 1: Analisi e Pianificazione
1. **Esamina il codice attuale del tuo terrario** - Identifica quali elementi utilizzano attualmente il posizionamento assoluto
2. **Scegli il metodo di layout** - Decidi se Flexbox o CSS Grid si adatta meglio ai tuoi obiettivi di design
3. **Progetta la nuova struttura del layout** - Pianifica come organizzare i contenitori e gli elementi delle piante

### Fase 2: Implementazione
1. **Crea una nuova versione** del tuo progetto del terrario in una cartella separata
2. **Aggiorna la struttura HTML** se necessario per supportare il metodo di layout scelto
3. **Rifattorizza il CSS** per utilizzare Flexbox o CSS Grid invece del posizionamento assoluto
4. **Mantieni la coerenza visiva** - Assicurati che le piante e il barattolo del terrario appaiano nelle stesse posizioni
5. **Implementa un comportamento responsivo** - Il tuo layout dovrebbe adattarsi in modo fluido a diverse dimensioni dello schermo

### Fase 3: Test e Documentazione
1. **Test cross-browser** - Verifica che il tuo design funzioni su Chrome, Firefox, Edge e Safari
2. **Test responsivo** - Controlla il layout su schermi mobili, tablet e desktop
3. **Documentazione** - Aggiungi commenti al tuo CSS spiegando le scelte di layout
4. **Screenshot** - Cattura il tuo terrario in diversi browser e dimensioni dello schermo

## Requisiti tecnici

### Implementazione del layout
- **Scegli UNO**: Implementa Flexbox OPPURE CSS Grid (non entrambi per gli stessi elementi)
- **Design responsivo**: Usa unità relative (`rem`, `em`, `%`, `vw`, `vh`) invece di pixel fissi
- **Accessibilità**: Mantieni una struttura HTML semantica corretta e testi alternativi
- **Qualità del codice**: Usa convenzioni di denominazione coerenti e organizza il CSS in modo logico

### Funzionalità moderne del CSS da includere
```css
/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}
```

### Requisiti di supporto browser
- **Chrome/Edge**: Ultime 2 versioni
- **Firefox**: Ultime 2 versioni  
- **Safari**: Ultime 2 versioni
- **Browser mobili**: Safari iOS, Chrome Mobile

## Consegne

1. **File HTML aggiornato** con una struttura semantica migliorata
2. **File CSS rifattorizzato** utilizzando tecniche di layout moderne
3. **Collezione di screenshot** che mostrano la compatibilità cross-browser:
   - Vista desktop (1920x1080)
   - Vista tablet (768x1024) 
   - Vista mobile (375x667)
   - Almeno 2 browser diversi
4. **File README.md** che documenta:
   - La scelta del layout (Flexbox vs Grid) e le motivazioni
   - Le difficoltà incontrate durante il refactoring
   - Note sulla compatibilità con i browser
   - Istruzioni per eseguire il codice

## Griglia di valutazione

| Criteri | Esemplare (4) | Competente (3) | In via di sviluppo (2) | Principiante (1) |
|---------|---------------|----------------|-------------------------|------------------|
| **Implementazione del layout** | Uso magistrale di Flexbox/Grid con funzionalità avanzate; completamente responsivo | Implementazione corretta con buon comportamento responsivo | Implementazione di base con lievi problemi di responsività | Implementazione incompleta o errata |
| **Qualità del codice** | CSS pulito, ben organizzato con commenti significativi e denominazione coerente | Buona organizzazione con alcuni commenti | Organizzazione adeguata con pochi commenti | Organizzazione scarsa; difficile da comprendere |
| **Compatibilità cross-browser** | Perfetta coerenza su tutti i browser richiesti con screenshot | Buona compatibilità con lievi differenze documentate | Alcuni problemi di compatibilità che non compromettono la funzionalità | Gravi problemi di compatibilità o test mancanti |
| **Design responsivo** | Approccio mobile-first eccezionale con punti di interruzione fluidi | Buon comportamento responsivo con punti di interruzione appropriati | Funzionalità responsiva di base con alcuni problemi di layout | Comportamento responsivo limitato o non funzionante |
| **Documentazione** | README completo con spiegazioni dettagliate e approfondimenti | Buona documentazione che copre tutti gli elementi richiesti | Documentazione di base con poche spiegazioni | Documentazione incompleta o mancante |

## Risorse utili

### Guide ai metodi di layout
- 📖 [Guida completa a Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- 📖 [Guida completa a CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- 📖 [Flexbox vs Grid - Scegli lo strumento giusto](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)

### Strumenti per il test dei browser
- 🛠️ [Modalità responsiva di Browser DevTools](https://developer.chrome.com/docs/devtools/device-mode/)
- 🛠️ [Can I Use - Supporto funzionalità](https://caniuse.com/)
- 🛠️ [BrowserStack - Test cross-browser](https://www.browserstack.com/)

### Strumenti per la qualità del codice
- ✅ [Validatore CSS](https://jigsaw.w3.org/css-validator/)
- ✅ [Validatore HTML](https://validator.w3.org/)
- ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

## Sfide extra

🌟 **Layout avanzati**: Implementa sia Flexbox CHE Grid in diverse parti del tuo design  
🌟 **Integrazione di animazioni**: Aggiungi transizioni o animazioni CSS che funzionino con il tuo nuovo layout  
🌟 **Modalità scura**: Implementa uno switcher di tema basato su proprietà personalizzate CSS  
🌟 **Query sui contenitori**: Usa tecniche moderne di query sui contenitori per una responsività a livello di componente  

> 💡 **Ricorda**: L'obiettivo non è solo far funzionare il layout, ma comprendere PERCHÉ il metodo di layout scelto è la soluzione migliore per questa specifica sfida di design!

---

**Disclaimer**:  
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [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 umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.