Lo sentimos, Thimble no es compatible con tu navegador

Thimble es compatible con los siguientes navegadores: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+) y Opera.

¡Quiero intentarlo!
Thimble tiene actualizaciones - Recarga el navegador para obtener los últimos cambios.

Cargando proyecto

Parece que tu proyecto está tardando mucho en cargarse.
Si no se carga, vuelve a intentarlo recargando la página.

No se pudo iniciar Thimble.

Recarga el navegador para volver a intentar cargar Thimble.

Para detalles del error abre la consola de herramientas de desarrollador de tu navegador.

NOTE: Si estás utilizando la navegación privada, vuelve a cargar la página en modo normal.

FILES
  • Agregar archivo HTML
  • Agregar archivo CSS
  • Agregar archivo JavaScript
  • Agregar un tutorial
  • Añadir carpeta
  • Subir un archivo...
  • Descargar archivos (.zip)
EDITOR
Deshacer

Insertar un fragmento de código

HTML CSS JS
  • Comentario
  • Tabla
  • Lista ordenada
  • Lista desordenada
  • Formulario
  • Incluir un archivo JavaScript
  • Incluir un archivo CSS
  • Reproductor de video
  • Reproductor de audio
  • Comentario
  • Seleccionador de tipo de elemento
  • Selector de clase
  • Selector de ID
  • Animación Keyframe
  • Estilos de enlace
  • Media queries
  • Fuentes
  • Agregar un pseudoelemento
  • Comentar
  • Una función básica
  • Matriz
  • Objeto
  • Bucle For
  • Bucle While
  • Sentencia If...Else
  • Sentencia Swiitch
  • Agregar un evento de clic
  • Cambiar propiedad CSS
<!-- Añade aquí tu comentario -->
<table>
  <tr>
    <th>Encabezado</th>
    <th>Encabezado</th>
  </tr>
  <tr>
    <td>Valor</td>
    <td>Valor</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">Nombre</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Apellido</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Enviar">
</form>

<script src="script.js"></script>
<!-- Agrega la etiqueta de <link> a tu archivo HTML. Suelen ir en la etiqueta del <head> -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Tu navegador no es compatible con la etiqueta de vídeo.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no es compatible con la etiqueta de audio.
</audio>

/* Añade aquí tu comentario */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* El elemento al que se aplica la animación */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* El código de la animación */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

/* Estilo básico */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

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

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

/* Resaltado */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* Reglas cuando la pantalla no tenga más de 320 px de ancho */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Reglas cuando la pantalla tenga entre 321 px y 768 px de ancho */
}

@media screen and (min-width: 769px) {
 /* Reglas cuando la pantalla tenga más de 768 px de ancho */
}

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

/* Agregar una flecha antes de cada elemento con una class='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Añade aquí tu comentario

function sayHello(name) {
  console.log(''Hola,'' + nombre);
}

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(''Hola,'' + nombre);
} else if (name === "Kate") {
  console.log(''Hola,'' + nombre);
} else {
  console.log("¡Hola, forastero!");
}

var name = "Bob";

switch(name) {
  case "Bob":
    console.log(''Hola,'' + nombre);
    break;
  case "Kate":
    console.log(''Hola,'' + nombre);
    break;
  default:
    // Hacer algo si no se cumple la condición
    console.log("¡Hola, forastero!");
}
  
// Seleccionar un elemento con id="button"
var element = document.querySelector('#button');

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

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

element.style.background = "OrangeRed";
  • Tamaño del texto  ()
  • Color del tema
  • Acortar líneas largas
  • Permitir JavaScript
  • Mostrar espacio en blanco
  • Cerrar etiquetas automáticamente
  • Autocompletar el código
  • Editar imágenes SVG como código
PREVIEW TUTORIAL
Auto

Publica tu proyecto

Has hecho cambios desde que publicaste tu proyecto.

Actualizar la versión publicada

Este es el enlace que puedes compartir...

Eliminar la versión publicada
Los proyectos publicados necesitan una página "index.html", así que por favor agrégala y vuelve a intentarlo.Descubre más
Cancelar
Publicar
Los proyectos publicados necesitan una página "index.html", así que por favor agrégala y vuelve a intentarlo.Descubre más