Sorry, Thimble won't work in your Browser

Thimble works in all of the following browsers: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+), and Opera.

Let me try anyway!
Thimble has Updates - Please refresh your browser to get the latest changes.

Loading Project

Your project seems to be taking a long time to load.
If it doesn't load, please reload the page to try again.

Oops, something went wrong!

Please reload your browser to try loading Thimble again.

For error details open your browser's Developer Tools console.

NOTE: if you are using Private Browsing mode, please reload in normal mode.

FILES
  • Add HTML file
  • Add CSS file
  • Add JavaScript file
  • Add a Tutorial
  • Add Folder
  • Upload a file...
  • Download files (.zip)
EDITOR
Undo

Insert a Code Snippet

HTML CSS JS
  • Comment
  • Table
  • Ordered List
  • Unordered List
  • Form
  • Include a JavaScript file
  • Include a CSS file
  • Video Player
  • Audio Player
  • Comment
  • Element Type Selector
  • Class Selector
  • ID Selector
  • Keyframe Animation
  • Link Styles
  • Media Queries
  • Fonts
  • Add a Pseudo Element
  • Comment
  • A Basic Function
  • Array
  • Object
  • For Loop
  • While Loop
  • If...Else Statement
  • Switch Statement
  • Add a Click Event
  • Change CSS Property
<!-- Add your comment here -->
<table>
  <tr>
    <th>Heading</th>
    <th>Heading</th>
  </tr>
  <tr>
    <td>Value</td>
    <td>Value</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">First name</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Last name</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Submit">
</form>

<script src="script.js"></script>
<!-- Add the <link> tag to your HTML file. These usually go in the <head> tag -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

/* Add your comment here */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* The element to apply the animation to */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* The animation code */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

/* Basic Style */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

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

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

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

@media screen and (max-width: 320px) {
  /* Rules when screen is up to 320px wide */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Rules when screen is between 321px and 768px wide */
}

@media screen and (min-width: 769px) {
 /* Rules when screen is wider than 768px */
}

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

/* Adds an arrow before every element with class='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Add your comment here

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

var name = "Bob";

switch(name) {
  case "Bob":
    console.log("Hello, " + name);
    break;
  case "Kate":
    console.log("Hello, " + name);
    break;
  default:
    // Do something if no condition was met
    console.log("Hello, stranger!");
}
  
// Select an element with id="button"
var element = document.querySelector('#button');

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

// Select the element with id='alert'
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Text size
  • Colour theme
  • Wrap long lines
  • Allow JavaScript
  • Show White Space
  • Auto close tags
  • Autocomplete code
  • XML/SVG
PREVIEW TUTORIAL
Auto

Publish your Project

You've made changes since you last published this project.

Update published version

Here's a link you can share...

Delete Published Version
Please add an "index.html" file before publishing your project. Learn more
Cancel
Publish