1E 2025/2026

Esercizi

Erbario

1. Crea un nuovo repository su GitHub e chiamalo erbario
2. Clonalo in locale
3. Crea un file index.html con un elenco di 15 piante
4. Ogni pianta deve avere titolo e immagine
5. Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
6. Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
7. La pagina di ogni pianta deve riportare:
   • foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
   • nome comune
   • nome scientifico
   • breve descrizione
   • foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
   • descrizione delle foglie
   • foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
   • descrizione dei fiori
   • curiosità
   • un link "Torna alla Home"

Non si accetteranno lavori approssimativi o con foto brutte o sgranate.

Esercizio aggiuntivo per casa

1. Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
2. Clona il repository erbario
3. Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo

Videogames

Tema: Videogiochi Iconici

Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 5 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).

Dettagli dell'Esercizio

1. File principale:
   Crea un file index.html con una tabella che contenga quattro colonne:
   • Nome del videogioco
   • Casa di sviluppo
   • Anno di uscita
   • Piattaforme principali
2. Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
   
   
3. Pagine individuali:
   Crea una pagina HTML per ogni videogioco
   
   
4. La pagina di ogni videogioco deve includere:
   
   
   • Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
   • Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
   • Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
   • Descrizione del gioco: una breve presentazione del videogioco.
   • Elenco puntato con le caratteristiche principali:
     Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
   • Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
   • Riquadro con informazioni: un box(div) con sfondo dello stesso colore del sottotitolo che includa:
     • Copertina del videogioco (5:7)
     • Nome del gioco
     • Casa di sviluppo
     • Anno di uscita
     • Piattaforme principali
5. tasto per tornare alla home page
6. Struttura delle immagini:
   Salva tutte le immagini in una cartella /images 
   
   

Interstellar

 Setup del Progetto

• Crea il repository GitHub interstellar-directory.
  
  
• Struttura cartelle: /images per le foto, /css per lo stile.
  
  
  

2. Home Page (index.html) - Terminale di Lancio

Crea un elenco di 5 Corpi Celesti (Pianeti, Lune o Asteroidi colonizzati).

• Ogni elemento dell'elenco deve essere un div con uno sfondo di un colore specifico (es. Marte = sfondo ruggine, Europa = sfondo blu ghiaccio) usare nello style background-color.
  
  

• All'interno del div: Titolo della colonia e immagine della destinazione es:marte.
  
  
• Tutto il div deve essere cliccabile(link) e rimandare alla pagina specifica.
  
  

3. Struttura delle 5 Pagine (Le Colonie)

Ogni pagina (es. marte.html) deve essere organizzata così:

• Header Video (YouTube): Un video embedded di YouTube a 100% larghezza in alto che mostra paesaggi spaziali o simulazioni 3D del pianeta proporzioni 3/1.
  
  
• Sezione Info Generale (Box Colorato):
  
  
  • Un div con uno sfondo colorato pieno (senza bordi) che contiene: Nome, Coordinate e Tipo di atmosfera.
    
    
  • Il testo deve avere un contrasto leggibile (es. testo bianco su sfondo blu scuro).
    
    
• Galleria Tecnica:
  
  
  • Foto 1 (1:1): "Modulo Abitativo". Un div con la foto quadrata e una breve descrizione.
    
    
  • Foto 2 (1:1): "Risorse Estratte". Un altro div con foto e dettagli sui minerali o gas del luogo.
    
    
• Video di Approfondimento: Un secondo video embedded a fondo pagina che mostra la vita quotidiana nella colonia o un documentario scientifico.
  
  
• Navigazione: tasto per tornare alla index.html, con scritta TONRA AL TERMINALE
  
  

Falt-UI Colors

Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.

Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.

1. Crea un nuovo repository su GitHub e chiamalo flat-colors
2. Clonalo in locale
3. Crea un file index.html contenente 10 div
4. All'interno di ogni div scrivi in due paragrafi di testo:
   • il nome colore: ad es. SUNFLOWER
   • il codice colore: ad es. #FFC312
5. Crea delle regole CSS in modo che:
   • ogni div abbia dimensioni 500 x 500 pixel
   • ogni div abbia come colore di sfondo il colore corretto
   • tutti i nome colore appaiano di colore bianco
   • tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial
   • tutti i nome colore abbiano un effetto ombreggiatura a tua scelta
   • tutti i titoli e i codici siano allineati orizzontalmente al centro