Sorry, Thimble werkt niet in uw browser

Thimble werkt in de volgende browsers: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+), en Opera.

Laat het me toch proberen!
Thimble heeft updates - Vernieuw de pagina in uw browser om de nieuwste wijzigingen te verkrijgen.

Project laden

Uw project lijkt traag te worden geladen.
Als het niet wordt geladen, laad de pagina dan opnieuw om het opnieuw te proberen.

Thimble kon niet worden gestart.

Vernieuw de pagina in uw browser om Thimble opnieuw te laden.

Open de Ontwikkelaarshulpmiddelen-console van uw browser voor foutdetails.

Opmerking: als u privé navigeert, herlaad dan de pagina in normale modus.

BESTANDEN
  • HTML-bestand toevoegen
  • CSS-bestand toevoegen
  • JavaScript-bestand toevoegen
  • Een handleiding toevoegen
  • Map toevoegen
  • Een bestand uploaden…
  • Bestanden downloaden (.zip)
EDITOR
Ongedaan maken

Een codefragment invoegen

HTML CSS JS
  • Opmerking
  • Tabel
  • Geordende lijst
  • Niet-geordende lijst
  • Formulier
  • Een JavaScript-bestand bijvoegen
  • Een CSS-bestand bijvoegen
  • Videospeler
  • Audiospeler
  • Opmerking
  • Kiezer voor elementtype
  • Klasseselector
  • ID-selector
  • Sleutelframe-animatie
  • Koppelingsstijlen
  • Media-aanvragen
  • Lettertypen
  • Een pseudo-element toevoegen
  • Opmerking
  • Een basisfunctie
  • Matrix
  • Object
  • For-lus
  • While-lus
  • If...Else-instructie
  • Switch-instructie
  • Een klikgebeurtenis toevoegen
  • CSS-eigenschap wijzigen
<!-- Voeg hier uw opmerking toe -->
<table>
  <tr>
    <th>Kop</th>
    <th>Kop</th>
  </tr>
  <tr>
    <td>Waarde</td>
    <td>Waarde</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">Voornaam</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Achternaam</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Verzenden">
</form>

<script src="script.js"></script>
<!-- Voeg de <link>-tag toe aan uw HTML-bestand. Deze worden doorgaans in de <head>-tag geplaatst -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Uw browser ondersteunt de video-tag niet.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Uw browser ondersteunt de audio-tag niet.
</audio>

/* Voeg hier uw opmerking toe */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* Het element waarop de animatie wordt toegepast */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* De animatiecode */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

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

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

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

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

@media screen and (max-width: 320px) {
  /* Regels wanneer scherm tot 320px breed is */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Regels wanneer scherm tussen 321px en 768px breed is */
}

@media screen and (min-width: 769px) {
 /* Regels wanneer scherm breder is dan 768px */
}

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

/* Voegt een pijl toe voor elk element met class='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Voeg hier uw opmerking toe

function sayHello(name) {
  console.log("Hallo " + name);
}

sayHello("David");

var names = ["David", "Bob", "Katrien"];

var person = {
  name: "Bob",
  skills: ["JS", "HTML"]
};

var names = ["David", "Bob", "Katrien"];
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("Hallo " + name);
} else if (name === "Katrien") {
  console.log("Hallo " + name);
} else {
  console.log("Hallo vreemdeling!");
}

var name = "Bob";

switch(name) {
  case "Bob":
    console.log("Hallo " + name);
    break;
  case "Katrien":
    console.log("Hallo " + name);
    break;
  default:
    // Iets doen als niet aan een voorwaarde is voldaan
    console.log("Hallo vreemdeling!");
}
  
// Een element selecteren met id="button"
var element = document.querySelector('#button');

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

// Het element selecteren met id='alert'
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Tekstgrootte  ()
  • Kleurthema
  • Lange regels afbreken
  • JavaScript toestaan
  • Witruimte tonen
  • Labels automatisch sluiten
  • Code automatisch aanvullen
  • SVG-afbeeldingen bewerken als code
VOORBEELD HANDLEIDING
Auto

Uw project publiceren

U hebt wijzigingen aangebracht sinds de laatste keer dat u dit project hebt gepubliceerd.

Gepubliceerde versie bijwerken

Hier is een koppeling die u kunt delen…

Gepubliceerde versie verwijderen
Gepubliceerde projecten dienen een pagina ‘index.html’ te hebben; voeg deze toe en probeer het opnieuw. Meer info
Annuleren
Publiceren
Gepubliceerde projecten dienen een pagina ‘index.html’ te hebben; voeg deze toe en probeer het opnieuw. Meer info