Publish your Project
You've made changes since you last published this project.
Your project seems to be taking a long time to load.
If it doesn't load, please reload the page to try again.
If that doesn't help, let us know.
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.
<!-- 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";
You've made changes since you last published this project.