Sito e-commerce

Esercitazione: Crea un Semplice Sito di E-commerce

Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.

Descrizione:

In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.

Cosa Imparerai:

  • Come strutturare un sito web con più pagine e collegamenti tra di esse.

  • Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.

  • Come creare una pagina di categoria di prodotti che visualizza più prodotti.

  • Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.

Strumenti che Userai:

  • Un editor di testo ( VS Code).

  • Un browser web (come Chrome, Firefox, Safari).

  • Un account GitHub.

Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.


Pagine del Sito Web:

  1. Homepage (index.html):

    • Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
  2. Pagina di Categoria di Prodotti (categoria.html):

  3. Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.

  4. Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.

  5. Include immagini, nomi e prezzi di almeno 10 prodotti.

  6. Include collegamenti alle pagine di dettaglio dei singoli prodotti.

  7. Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):

    • Visualizza informazioni dettagliate su un singolo prodotto, inclusi:

      • Nome del prodotto

      • Immagine del prodotto

      • Descrizione dettagliata

      • Prezzo

      • Pulsante "Aggiungi al carrello"
      • Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)

Passaggi:

  1. Crea un repository su GitHub:

    • Accedi al tuo account GitHub.

    • Crea un nuovo repository per il tuo progetto di e-commerce.

    • Dai al repository un nome appropriato (ad esempio, "miositoecommerce").

    • Inizializza il repository con un file README.

  2. Crea i file HTML:

    • Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).

  3. Organizza i file:

    • Crea una cartella per ogni pagina del sito web.

    • Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.

    • Crea una cartella img per le immagini dei prodotti.

  4. Personalizza la Homepage (index.html):

    • Modifica il file index.html per adattarlo al tuo sito di e-commerce.
  5. Crea la Pagina di Categoria di Prodotti (categoria.html):

  6. Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.

  7. Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.

  8. Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.

  9. Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.

  10. Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):

    • Crea un file HTML per ogni prodotto elencato nella pagina di categoria.

    • Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.

  11. Aggiungi stili personalizzati:

    • crea un file main.css e aggiungi le tue regole CSS.

    • Collega il file style.css ai file HTML delle pagine.


Elenco Studenti e Categorie di Prodotti:

  • AMADIO MARCO: Libri Antichi

  • BONESSO ALESSANDRO: Strumenti Musicali Vintage

  • BURATTO FILIPPO: Articoli Sportivi Estremi

  • BURCA ROBERT DAMIAN: Collezionismo Militare

  • CAL DAVID: Veicoli Elettrici

  • EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale

  • EL YAQOUTI KHALIL: Tappeti Orientali

  • EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali

  • FLABOREA LORENZO: Vini Pregiati

  • FUSER TOMMASO: Fotografia Analogica

  • GANGAN IGOR: Orologi da Collezione

  • GORGHETTO NICOLA: Mobili di Design

  • HOXHA MATEO: Articoli per la Pesca

  • LAZZARINI ALESSIO: Strumenti Astronomici

  • MIFTARI AMADEO: Attrezzatura da Montagna

  • PALUDETTO ALESSANDRO: Console Retrogaming

  • PAVAN MICHIELON SAMUELE: Modelli di Navi

  • PERISSINOTTO FRANCESCO: Tè e Infusi Rari

  • ROHAMAT RAHIM ULLAH: Abbigliamento Etnico

  • VIANELLO MATTEO: Articoli per il Giardinaggio

  • XIA JIAJUN: Strumenti di Intelligenza Artificiale

  • ZOGGIA KEVIN: Articoli per la Magia