In questa breve guida vedremo come poter scrivere ed eseguire del codice javascript direttamente dal nostro browser su un editor online: non preoccuparti, è facilissimo! Ti basterà seguire questi steps. Pronto? Iniziamo!
Creare un account su CodePen
- Apri il tuo browser e vai su codepen.io
- Clicca su “Sign Up” o “Registrati” per creare un account. Inserisci il tuo nome, indirizzo email e crea una password.
- Dopo aver confermato il tuo account tramite l’email di verifica, accedi a CodePen.
Creare un nuovo progetto su CodePen
- Una volta effettuato l’accesso, clicca su “New Pen” o “Nuovo Pen” nella parte superiore della pagina.
- Vedrai tre sezioni principali: HTML, CSS e JavaScript. Puoi scrivere il codice in ognuna di queste sezioni.
Scrivere Codice HTML, CSS e JavaScript
Ecco degli esempi di codice che puoi inserire nelle rispettive sezioni:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Il mio primo progetto</title>
</head>
<body>
<h1>Ciao, mondo!</h1>
<p>Questo è il mio primo progetto su CodePen.</p>
</body>
</html>
CSS:
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
color: darkgreen;
}
JavaScript:
document.querySelector('h1').addEventListener('click', function() {
alert('Hai cliccato sull\'intestazione!');
});
Come visualizzare i risultati
- Dopo aver scritto il codice, puoi vedere immediatamente i risultati nella sezione “Result” o “Risultato” nella parte destra dell’editor.
- Nel nostro esempio, vedrai l’intestazione blu e il paragrafo verde su uno sfondo grigio chiaro.
Condividere il tuo progetto su CodePen
- Se sei soddisfatto del tuo progetto e vuoi condividerlo con gli altri, puoi cliccare su “Save” o “Salva” nella parte superiore dell’editor.
- Otterrai un link unico che puoi condividere per far vedere agli altri il tuo progetto.
