Lo sentimos, Thimble no funciona en su navegador.

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

¡No pierdo nada con intentarlo!
Thimble tiene actualizaciones - Por favor, actualiza tu navegador para estar al día con los cambios.

Cargando proyecto

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

Thimble no se pudo iniciar.

Por favor, recarga tu navegador para volver a intentar cargar Thimble.

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

NOTA: si está usando el modo de navegación privada, por favor recargue la página en el modo normal.

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

Inserta un pedazo 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
  • Selector de tipo de elemento
  • Selector de clase
  • Selector de ID
  • Animación Keyframe
  • Estilos de enlace
  • Consulta de medios
  • Fuentes
  • Añadir un pseudo-elemento
  • Comentario
  • Una función básica
  • Matriz
  • Objeto
  • For Loop (para algo)
  • While Loop (mientras)
  • Declaración "Si...Entonces" (If...Else)
  • Cambiar declaración
  • Añadir un evento de clic
  • Cambiar propiedad CSS
<!-- Añade tu comentario aquí -->
<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 soporta la etiqueta de video.
</video>

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

/* Añade tu comentario aquí */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* El elemento al cual aplicar 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;
}

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

@media screen and (max-width: 320px) {
  /* Reglas para cuando la pantalla tiene hasta 320px de ancho */
}

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

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

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

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

// Añade tu comentario aquí

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, extraño!");
}

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 cumplió la condición
    console.log("¡Hola, extraño!");
}
  
// Selecciona un elemento con el id="button"
var element = document.querySelector('#button');

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

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

element.style.background = "OrangeRed";
  • Tamaño del texto  ()
  • Tema de colores
  • Cortar líneas largas
  • Permitir JavaScript
  • Mostrar espacio en blanco
  • Cerrar automáticamente etiquetas
  • Autocompletar código
  • Editar imágenes SVG como código
VISTA PREVIA TUTORIAL
Auto

Publica tu proyecto

Has realizado cambios desde la última vez que publicaste este proyecto.

Actualizar versión publicada

Aquí hay un enlace que puedes compartir...

Eliminar una versión publicada
Los proyectos publicados necesitan una página "index.html", por favor añádela y vuelve a intentarlo. Aprender más
Cancelar
Publicar
Los proyectos publicados necesitan una página "index.html", por favor añádela y vuelve a intentarlo. Aprender más