Lamentamos, o Timble não vai funcionar no seu navegador

O Thimble funciona com todos os seguintes navegadores: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+) e Opera.

Quero tentar ainda assim!
O Thimble tem atualizações - Por favor atualize o seu navegador para obter as últimas alterações.

A carregar projeto

O seu projeto parece estar a demorar muito tempo para carregar.
Se não carregar, por favor recarregue a página para tentar novamente.

O Thimble não pôde iniciar.

Por favor recarregue o seu navegador para tentar carregar o Thimble novamente.

Para detalhes de erro abra a consola de ferramentas de programador do seu navegador.

NOTA: se está a utilizar o modo de navegação privada, por favor recarregue no modo normal.

FICHEIROS
  • Adicionar ficheiro HTML
  • Adicionar ficheiro CSS
  • Adicionar ficheiro JavaScript
  • Adicionar um tutorial
  • Adicionar pasta
  • Carregar um ficheiro...
  • Transferir ficheiros (.zip)
EDITOR
Desfazer

Insira um fragmento de código

HTML CSS JS
  • Comentário
  • Tabela
  • Lista ordenada
  • Lista desordenada
  • Formulário
  • Inclua um ficheiro JavaScript
  • Inclua um ficheiro CSS
  • Reprodutor de vídeo
  • Reprodutor de áudio
  • Comentário
  • Seletor do tipo de elemento
  • Seletor de classe
  • Seletor de Identificação
  • Animação de keyframe
  • Estilos de ligação
  • Consultas multimédia
  • Tipos de letra
  • Adicionar um pseudo-elemento
  • Comentário
  • Uma função básica
  • Array
  • Objeto
  • Ciclo For
  • Ciclo While
  • Declaração If...Else
  • Declaração Switch
  • Adicionar um evento de clique
  • Alterar a propriedade CSS
<!-- Adicione o seu comentário aqui -->
<table>
  <tr>
    <th>Cabeçalho</th>
    <th>Cabeçalho</th>
  </tr>
  <tr>
    <td>Valor</td>
    <td>Valor</td>
  </tr>
</table>

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

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

<form action="" method="get">
  <label for="first-name">Primeiro nome</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Último nome</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Submeter">
</form>

<script src="script.js"></script>
<!-- Adicione a tag <link> ao seu ficheiro HTML. Geralmente, estas são colocadas dentro da etiqueta <head> -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  O seu navegador não suporta a etiqueta de vídeo.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  O seu navegador não suporta a etiqueta de áudio.
</audio>

/* Adicione o seu comentário aqui */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* O elemento para aplicar a animação */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* O código da animação */
@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;
}

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

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

@media screen and (max-width: 320px) {
  /* Regras quando o ecrã vai até 320px de largura */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Regras quando o ecrã está entre 321px e 768px de largura */
}

@media screen and (min-width: 769px) {
 /* Regras quando o ecrã é mais largo que 768px */
}

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

/* Adiciona uma seta antes de todos os elementos com class='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Adicione o seu comentário aqui

function sayHello(name) {
  console.log("Olá, " + 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("Olá, " + name);
} else if (name === "Kate") {
  console.log("Olá, " + name);
} else {
  console.log("Olá, estranho!");
}

var name = "Bob";

switch(name) {
  case "Bob":
    console.log("Olá, " + name);
    break;
  case "Kate":
    console.log("Olá, " + name);
    break;
  default:
    // Faça algo caso nenhuma condição seja cumprida
    console.log("Olá, estranho!");
}
  
// Selecione um elemento com id="button"
var element = document.querySelector('#button');

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

// Selecione o elemento com id='alert'
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Tamanho do texto  ()
  • Cor do tema
  • Moldar linhas longas
  • Permitir JavaScript
  • Mostrar espaço em branco
  • Fechar etiquetas automaticamente
  • Auto-completar código
  • Editar imagens SVG como código
PRÉ-VISUALIZAÇÃO TUTORIAL
Automático

Publicar o seu projeto

Efetuou alterações desde a última vez que publicou este projeto.

Atualizar versão publicada

Aqui está uma ligação que pode partilhar…

Eliminar versão publicada
Projetos publicados necessitam de uma página "index.html", por favor adicione-a e tente novamente. Saber mais
Cancelar
Publicar
Projetos publicados necessitam de uma página "index.html", por favor adicione-a e tente novamente. Saber mais