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 'ecfb2227b8'
${ noResults }
Web-Dev-For-Beginners/translations/it/3-terrarium/2-intro-to-css/assignment.md

7.4 KiB
Raw Blame History

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

/* 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

Strumenti per il test dei browser

Strumenti per la qualità del codice

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. 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.