HTML, CSS e JavaScript da zero · Guess the Number

▶Il video

Anteprima video YouTube — HTML, CSS e JavaScript in modo semplice — tutorial ita per chi inizia, con il gioco Guess the Number.Guarda su YouTube

Consiglio: guarda il video in modalità coding and chill e tieni questo articolo aperto di fianco. Qui trovi tutto il codice pronto da copiare, organizzato per capitoli come nel video — puoi saltare direttamente al pezzo che ti serve.

Capitoli nel videoIntro · Cosa usare (VS Code) · Il progetto Guess the Number · Struttura HTML · CSS e selettori (tag, #id, .classe) · JavaScript e DOM · Logica del gioco (if/else, validazione) · Demo finale. Nel player YouTube puoi saltare tra i capitoli dalla descrizione.

Setup

01Cosa ti serve

Per seguire il tutorial ti bastano un editor di testo e un browser. Nel video uso Visual Studio Code — scaricalo da code.visualstudio.com — ma va bene qualsiasi editor. Addirittura puoi partire dal Blocco note se sei hardcore; io consiglio un editor con syntax highlight e suggerimenti.

Crea una cartella sul desktop, chiamala come il progetto. Nel video la cartella si chiama guess-the-number. Dentro andranno tre file: index.html, style.css e script.js. Niente Node, niente npm: apri index.html con doppio click e il gioco gira subito.

Il progetto

02Cosa costruiamo

L'obiettivo è il classico Guess the Number: il computer pensa un numero tra 1 e 100, tu inserisci un tentativo in una casella di testo e premi un bottone. Il programma ti dice se il numero è troppo alto, troppo basso o corretto. Quando indovini, il feedback diventa verde e l'input si disabilita.

È il progetto perfetto per le basi: HTML per la struttura, CSS per renderla leggibile, JavaScript per la logica. Niente framework — solo quello che gira in ogni browser.

Struttura

03Il file HTML

Partiamo da index.html. In VS Code digita ! e premi Tab: ottieni lo scheletro HTML5 con charset UTF-8 e viewport. Il <title> è quello che vedi sulla tab del browser — chiamiamolo Guess the number.

Contenuto visibile

Nel <body> mettiamo tutto ciò che l'utente vede: un <h1> con il titolo del gioco, un <p> con le regole, un <input> per il tentativo, un <button> per inviare e un <p id="result"> vuoto dove JavaScript scriverà il feedback.

L'id deve essere univoco nella pagina: lo useremo sia in CSS (#guess-the-input) sia in JavaScript (getElementById). Al bottone diamo una classe primary — le classi possono essere riutilizzate su più elementi.

index.htmlhtml

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Guess the number</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Guess the number</h1>
    <p>Try to guess the number between 1 and 100</p>
    <input
      type="text"
      id="guess-the-input"
      placeholder="Insert your number"
    />
    <button type="button" class="primary" onclick="checkGuess()">Check</button>
    <p id="result"></p>
    <script src="script.js"></script>
  </body>
</html>

Salva e apri il file nel browser: vedi titolo, testo, input e bottone — ancora senza stile e senza logica. Il placeholder aiuta l'utente a capire cosa inserire.

Perché il CSS va nel <head> e lo script nel <body>Il foglio di stile si collega con <link rel="stylesheet"> nell'head così il browser applica gli stili prima di mostrare il contenuto. Lo script va in fondo al body: l'HTML esiste già nel DOM quando JavaScript parte. Nota: si include con src, non href.

Stile

04CSS e selettori

Creiamo style.css e lo colleghiamo nell'head. In CSS scegli cosa stilizzare con un selettore e come con le proprietà dentro le graffe { }.

I tre selettori che userai sempre

1. Per tag — es. body { text-align: center; } centra tutto il testo. Vale per ogni body della pagina (uno solo, ma il selettore è generico).

2. Per ID — es. #guess-the-input { padding: 10px; }. Il # targeta l'elemento con quell'id univoco.

3. Per classe — es. .primary { background-color: black; color: white; }. Il . applica lo stesso stile a tutti gli elementi con quella classe.

Reset e box model

Buona pratica: resettare margin e padding di default con * { margin: 0; padding: 0; box-sizing: border-box; }. box-sizing: border-box fa sì che padding e bordo restino dentro l'elemento, non lo facciano sforare dal contenitore. Poi aggiungi margin-bottom su h1 e p, cursor: pointer sui bottoni e border: none dove serve.

style.csscss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
}

#guess-the-input {
  padding: 10px;
}

.primary {
  background-color: black;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

h1 {
  margin-bottom: 10px;
}

p {
  margin-bottom: 10px;
}

Salva, refresh nel browser: layout centrato, input più largo, bottone nero. Apri gli strumenti sviluppatore (F12 su Windows, ispeziona elemento su Mac) per vedere padding e margin in azione.

Logica

05JavaScript: collegare e leggere

Creiamo script.js. Nel HTML lo includiamo in fondo al body con <script src="script.js"></script> — così il DOM è già pronto.

Numero random del computer

All'avvio generiamo il numero segreto con Math.floor(Math.random() * 100) + 1: Math.random() restituisce un decimale tra 0 e 1, moltiplicato per 100 e arrotondato con Math.floor, più 1 per avere l'intervallo 1–100 senza lo zero.

Selezionare elementi dal DOM

Salviamo i riferimenti agli elementi che useremo spesso:

script.js — setupjavascript

const randomNumber = Math.floor(Math.random() * 100) + 1
const result = document.getElementById('result')
const guessInput = document.getElementById('guess-the-input')

function checkGuess() {
  const guess = parseInt(guessInput.value, 10)
  console.log('guess:', guess)
}

document.getElementById prende un elemento per id — come #guess-the-input in CSS. .value legge il testo nell'input; parseInt(..., 10) lo converte in numero intero. Nel video testiamo tutto con console.log nella console del browser prima di mostrare messaggi all'utente.

Il bottone chiama checkGuess() tramite onclick="checkGuess()" nell'HTML. Nome funzione e attributo devono combaciare — un typo e la console ti segnala checkGuess is not defined.

Il cervello del gioco

06Validazione e if / else

Ora costruiamo la logica con if, else if e else in cascata. Controlliamo in ordine:

1. Input non numerico → isNaN(guess) · 2. Fuori range 1–100 → guess < 1 || guess > 100 · 3. Troppo basso · 4. Troppo alto · 5. else = indovinato.

Il feedback va all'utente, non solo in console: scriviamo nel paragrafo #result con result.innerHTML = "...". Quando vince, coloriamo il testo in verde con result.style.color = "green" e disabilitiamo l'input con guessInput.disabled = true.

script.js — logica completajavascript

const randomNumber = Math.floor(Math.random() * 100) + 1
const result = document.getElementById('result')
const guessInput = document.getElementById('guess-the-input')

function checkGuess() {
  const guess = parseInt(guessInput.value, 10)

  if (isNaN(guess)) {
    result.innerHTML = 'Inserisci un numero'
  } else if (guess < 1 || guess > 100) {
    result.innerHTML = 'Il numero inserito non è tra 1 e 100'
  } else if (guess < randomNumber) {
    result.innerHTML = 'Il numero inserito è troppo basso'
  } else if (guess > randomNumber) {
    result.innerHTML = 'Il numero inserito è troppo alto'
  } else {
    result.innerHTML = 'Congratulazioni!'
    result.style.color = 'green'
    guessInput.disabled = true
  }
}

L'operatore || (OR)Nella condizione guess < 1 || guess > 100 la condizione è vera se almeno uno dei due lati è vero: numero troppo piccolo oppure troppo grande. Tutti i valori tra 1 e 100 passano ai confronti successivi.

Demo

07Prova il gioco

Salva tutti e tre i file, refresh nel browser e gioca. Se il feedback non compare, apri la console: è il primo posto dove guardare errori di battitura o script non collegato.

Nel video suggerisco un esercizio extra: variante fuoco / fuochino con range di 10 numeri — stessa logica, meno tentativi. Nel CodePen linkato in descrizione al video trovi anche quella versione.

Prossimi passiDa qui puoi aggiungere un contatore dei tentativi, un bottone "Rigioca" che resetta randomNumber, o passare a media query CSS per il mobile. Poi ha senso approfondire JavaScript (funzioni, event listener al posto di onclick inline) e infine un framework come React.

▶Il video

Per approfondire: il tutorial su YouTube · MDN HTML · MDN CSS · MDN JavaScript

HTML, CSS e JavaScript: da zero al primo sito web (gioco Guess the Number)

▶Il video

01Cosa ti serve

02Cosa costruiamo

03Il file HTML

Contenuto visibile

04CSS e selettori

I tre selettori che userai sempre

Reset e box model

05JavaScript: collegare e leggere

Numero random del computer

Selezionare elementi dal DOM

06Validazione e if / else

07Prova il gioco

▶Il video

Altri articoli

Generative UI: quando l’AI smette di scrivere testo e inizia a comporre interfacce

React da zero, in un quarto d'ora (il mio tutorial più visto su Youtube)

Il design del mio sito è Hyper Minimal Nostalgic Industrial?