Pet Shop

Esercizio: Il Negozio di Animali "Amici a 4 Zampe"

Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.

Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.

Cosa imparerai:

  • Come strutturare una pagina web per presentare dei prodotti.
  • Come usare i tag HTML principali per titoli, paragrafi e immagini.
  • Come collegare un file CSS all'HTML.
  • Come applicare proprietà CSS per migliorare l'estetica della pagina.
  • Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)

  1. Crea un nuovo repository e clonalo
  2. All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
  3. Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni. 
    • Includi un titolo principale (<h1>) per il nome del negozio.
    • Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere: 
      • Un titolo di secondo livello (<h2>) per il nome del prodotto.
      • Un'immagine del prodotto (<img>).
      • Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
    • Assicurati di inserire il link al file CSS nella sezione <head>.
  4. Personalizza il contenuto!
    • Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
    • Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
    • Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)

  1. Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
  2. All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:

  • font-family: per scegliere il tipo di carattere del testo.
  • font-size: per impostare la dimensione del testo.
  • color: per impostare il colore del testo.
  • background-color: per impostare il colore di sfondo di un elemento.
  • text-align: per allineare il testo (es. left, center, right).
  • padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
  • margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
  • width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
  • height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
  • border: per aggiungere un bordo (specificando spessore, tipo e colore).
  • border-radius: per arrotondare gli angoli di un elemento.
  • box-shadow: per aggiungere una leggera ombra a un elemento.

USARE SOLO LE PROPRIETA' ELENCATE SOPRA 

Come usare Google Fonts:

  1. Vai sul sito di Google Fonts.
  2. Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
  3. Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
  4. Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
  5. Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:

  • Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
  • Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
  • Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
  • Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.