GUIDE PER ASPIRANTI PROGRAMMATORI
Fase 1: creiamo l’HTML di base
Sei pronto a mettere le mani sul codice e creare qualcosa di davvero coinvolgente? In questo tutorial, realizzeremo insieme un quiz interattivo con il linguaggio JavaScript, perfetto per rendere il tuo sito web più stimolante e divertente. Quante volte ti sei fermato a rispondere a delle domande per capire se “sei un vero esperto di…
Lezione 8 / 17
Vuoi avviare una nuova carriera o fare un upgrade?
Trova il corso Digital & Tech più adatto a te nel nostro catalogo!
Sei pronto a mettere le mani sul codice e creare qualcosa di davvero coinvolgente? In questo tutorial, realizzeremo insieme un quiz interattivo con il linguaggio JavaScript, perfetto per rendere il tuo sito web più stimolante e divertente.
Quante volte ti sei fermato a rispondere a delle domande per capire se “sei un vero esperto di film Marvel?”. O magari stai pensando a quando hai fatto quel test per scoprire quale personaggio di “Breaking Bad” rappresenta meglio la tua personalità? Quale che sia il test che più ti ha tenuto incollato allo schermo, questo progetto getterà le basi perchè tu possa realizzare il tuo personalissimo quiz interattivo.
Attraverso la manipolazione del DOM, daremo vita a un quiz che non solo intrattiene ma offre anche un’esperienza utente memorabile. E, come sempre: non importa se sei all’inizio del tuo percorso come sviluppatore web: ti basterà seguire passo passo le fasi del tutorial che conterranno tutte le spiegazioni necessarie. E se volessi approfondire? Beh, corri a leggere le nostre guide avanzate!
Sei pronto a creare un quiz che farà impazzire tutti i tuoi amici? Mettiamoci al lavoro e trasformiamo insieme questa idea in realtà!
Creiamo l’ HTML di base.
Prima di tutto, esattamente come per il tutorial precedente, partiamo creando la struttura HTML di base. Includeremo il titolo del quiz nella navbar del nostro sito e un contenitore per le domande e i risultati.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Il Tuo Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
background-color: #333;
color: white;
padding: 1em;
text-align: center;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.above-the-fold {
margin-top: 60px; /* Per compensare la navbar fissa */
padding: 2em;
text-align: center;
}
.section {
padding: 2em;
text-align: center;
}
.section:nth-child(even) {
background-color: #f4f4f4;
}
.section:nth-child(odd) {
background-color: #ffffff;
}
.button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border: none;
}
.result {
display: none;
padding: 2em;
text-align: center;
font-size: 1.5em;
}
</style>
</head>
<body>
<div class="navbar">
Il Tuo Quiz
</div>
<div id="quiz-container" class="section">
<!-- Le domande del quiz verranno caricate qui -->
</div>
<div id="result" class="result">
<!-- Il risultato finale verrà mostrato qui -->
</div>
<script src="script.js"></script>
</body>
</html>
Questo codice HTML è un po’ particolare, in quanto ogni elemento verrà utilizzato come contenitore per la parte dinamica proposta in JavaScript. Provando a caricarlo senza aver inserito il corretto codice js, infatti, mostrerà una pagina sostanzialmente vuota e inutilizzabile.
Presta sempre attenzione a come costruire l’HTML base e quali elementi includere già all’interno della sua struttura in base alle necessità di progetto che stai andando a sviluppare.
Sei indeciso sul percorso? 💭
Parliamone! Scrivici su Whatsapp e risponderemo a tutte le tue domande per capire quale dei nostri corsi è il più adatto alle tue esigenze.
CONTENUTI GRATUITI IN EVIDENZA
Guide per aspiranti programmatori 👨🏻🚀
Vuoi muovere i primi passi nel Digital e Tech? Abbiamo preparato alcune guide per aiutarti a orientarti negli ambiti più richiesti oggi.
