Spiacenti, Thimble non è compatibile con il browser in uso.

Thimble è compatibile con i seguenti browser: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+), e Opera.

Procedi ugualmente
Sono presenti nuovi aggiornamenti per Thimble – Ricarica la pagina per visualizzare le ultime modifiche.

Caricamento in corso…

Il caricamento del progetto sta richiedendo più tempo del previsto.
Prova a ricarica la pagina corrente.

Impossibile avviare Thimble.

Prova a ricaricare la pagina corrente per aggiornare Thimble.

Per visualizzare i dettagli sull’errore aprire la console Strumenti di sviluppo del browser.

N.B.: se si sta utilizzando la modalità di navigazione privata, ricaricare in modalità normale.

File
  • Aggiungi file HTML
  • Aggiungi file CSS
  • Aggiungi file JavaScript
  • Aggiungi Guida
  • Aggiungi cartella
  • Carica un file
  • Scarica i file (.zip)
EDITOR
Annulla

Inserire un frammento di codice

HTML CSS JS
  • Commento
  • Tabella
  • Elenco ordinato
  • Elenco non ordinato
  • Modulo
  • Includi file JavaScript
  • Includi file CSS
  • Lettore video
  • Lettore audio
  • Commento
  • Selettore elemento per tipo
  • Selezione classe
  • Selettore ID
  • Animazione keyframe
  • Aspetto dei link
  • Media Query
  • Font
  • Aggiungi uno pseudo-elemento
  • Commento
  • Una funzione di base
  • Array
  • Oggetto
  • Ciclo For
  • Ciclo While
  • Istruzione If...Else
  • Istruzione di Switch
  • Aggiungi un evento click
  • Modifica le proprietà CSS
<!-- Aggiungi il commento qui -->
<table>
  <tr>
    <th>Intestazione</th>
    <th>Intestazione</th>
  </tr>
  <tr>
    <td>Valore</td>
    <td>Valore</td>
  </tr>
</table>

<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

<form action="" method="get">
  <label for="first-name">Nome</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Cognome</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Invia">
</form>

<script src="script.js"></script>
<!-- Aggiungi il tag <link> al file HTML. Di norma viene inserito nella sezione definita dal tag  <head> -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Il tuo browser non supporta i tag video.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Il tuo browser non supporta i tag audio.
</audio>

/* Aggiungi il commento qui */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* Elemento al quale applicare l&#39;animazione */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* Codice animazione */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

/* Stile base */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

/* Visitato */
a:visited {
  color: Orchid;
}

/* Attivo */
a:active {
  color: OrangeRed;
}

/* Attivato al passaggio del mouse */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* Regole per lunghezza schermo entro 320px */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Regole per lunghezza schermo tra 321px e 768px */
}

@media screen and (min-width: 769px) {
 /* Regole lunghezza schermo oltre i 768px */
}

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

/* Aggiunge una freccia davanti a ogni elemento con attributo class='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Aggiungi il commento qui

function sayHello(name) {
  console.log("Ciao, " + name);
}

sayHello("David");

var names = ["David", "Bob", "Kate"];

var person = {
  name: "Bob",
  skills: ["JS", "HTML"]
};

var names = ["David", "Bob", "Kate"];
var name;

for (var i = 0; i < names.length; i++) {
  name = names[i];
  console.log(name);
}

var count = 5;

while (count > 0) {
  console.log(count);
  count = count - 1;
}

var name = "Bob";

if (name === "Bob") {
  console.log("Ciao, " + name);
} else if (name === "Kate") {
  console.log("Ciao, " + name);
} else {
  console.log("Ciao, straniero!");
}

var name = "Bob";

switch(name) {
  case "Bob":
    console.log("Ciao, " + name);
    break;
  case "Kate":
    console.log("Ciao, " + name);
    break;
  default:
    // Inserisci il codice da eseguire se nessuna condizione è soddisfatta
    console.log("Ciao, straniero!");
}
  
// Seleziona un elemento con id="button"
var element = document.querySelector('#button');

element.addEventListener("click", function() {
  console.log("Click!");
});

// Seleziona l'elemento con id='alert'
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Dimensioni del testo  ()
  • Colore tema
  • A capo automatico
  • Consenti JavaScript
  • Mostra spazi
  • Chiusura automatica dei tag
  • Completamento automatico del codice
  • Modificare immagini SVG come codice
ANTEPRIMA ISTRUZIONI
Auto

Pubblica il progetto

Il progetto è stato nuovamente modificato dall'ultima pubblicazione.

Aggiorna versione pubblicata

Condividi con il seguente link:

Eliimina la versione pubblicata
Prima di pubblicare il progetto aggiungi un file "index.html". Ulteriori informazioni
Annulla
Pubblica