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:
x
<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.
