HTML e CSS per ragazzi delle medie: primo progetto web passo passo

HTML e CSS per ragazzi delle medie: primo progetto web 🌐

Ogni sito che visiti — YouTube, Instagram, Wikipedia, Minecraft.net — è costruito con HTML e CSS. Imparare queste due tecnologie significa capire come funziona il web e saper creare i tuoi spazi digitali. In questo tutorial costruiremo il tuo primo sito web funzionante, passo dopo passo.

---

🧱 Cosa sono HTML e CSS?

HTML: la struttura

HTML (HyperText Markup Language) è lo scheletro della pagina: dove vanno titoli, paragrafi, immagini, link.

CSS: lo stile

CSS (Cascading Style Sheets) è l'arredamento: colori, font, dimensioni, posizioni.

> 💡 Insieme creano siti completi e belli. HTML senza CSS = pagine grigie. CSS senza HTML = nulla su cui lavorare.

---

🛠️ Strumenti necessari

| Strumento | Dove |
|-----------|------|
| 📝 Editor di testo | VS Code (gratuito) o Replit online |
| 🌐 Browser | Chrome, Firefox o Edge |
| ✨ Nient'altro | Nessuna installazione speciale! |

---

📄 Il tuo primo file HTML

Passo 1 — Crea il file

Apri VS Code → Nuovo file → salva come `index.html`.

Passo 2 — Struttura base

```html

Ciao, mi chiamo Marco!

Benvenuti nel mio sito.

```

`` → documento HTML5

`` → info invisibili (titolo, stile)

`` → tutto ciò che si vede

Salva, apri con il browser: 🎉 la tua prima pagina web!

---

🎨 Aggiungi lo stile con CSS

Metodo 1 — CSS dentro l'HTML

```html



```

Metodo 2 — File CSS separato (consigliato 👍)

Crea `stile.css`:
```css
body { background-color: lightblue; }
h1 { color: darkblue; text-align: center; }
```

Collegalo in ``:
```html

```

---

🎯 Progetto completo: pagina "Chi sono"

Costruisci una pagina che parla di te. Include:

👤 Nome come H1

📸 Una tua foto o personaggio preferito

📝 Paragrafo su di te

🎮 Lista dei tuoi hobby

🎨 Colori personalizzati

```html

Marco Rossi

Chi sono

Ho 12 anni e amo il coding!

I miei hobby

🎮 Videogiochi

⚽ Calcio

💻 Programmare

```

---

📦 CSS Box Model: il concetto fondamentale

Ogni elemento HTML è una scatola con 4 strati:

| Strato | Cosa è |
|--------|--------|
| Content | Il contenuto vero |
| Padding | Spazio interno |
| Border | Il bordo visibile |
| Margin | Spazio esterno |

Capire il box model è la chiave per controllare qualsiasi layout.

---

🚀 Dove andare dopo

📖 MDN Web Docs (developer.mozilla.org/it) — documentazione ufficiale

🎓 freeCodeCamp.org — corso gratuito completo

✨ CSS-Tricks — tutorial avanzati

🧪 CodePen.io — sperimenta nel browser

💡 Trucco da pro: tasto destro su qualsiasi pagina → "Ispeziona elemento". Vedi il codice HTML/CSS reale dei siti che ami. È come aprire il cofano di una macchina.

---

❓ FAQ

HTML e CSS sono linguaggi di programmazione?
Tecnicamente no: HTML è di markup, CSS è di stile. Non hanno logica come Python. Ma sono il punto di partenza ideale prima di JavaScript.

Quanto tempo ci vuole per imparare?
Le basi: un pomeriggio. Per layout complessi: settimane. Un'ora al giorno per un mese = sito completo e gradevole.

Dove pubblico il mio sito?

GitHub Pages (gratis)

Netlify Drop (trascini la cartella → online in secondi)

Differenza HTML vs HTML5?
HTML5 è la versione attuale (2014). Aggiunge tag semantici (header, footer, article), audio/video nativi. Oggi "HTML" = HTML5.

---

🎓 Vuoi imparare HTML, CSS e JavaScript con un percorso strutturato? Scopri il corso Python e AI o esplora tutti i corsi TECHLAND.