Es tut uns leid, Thimble funktioniert in Ihrem Browser nicht

Thimble funktioniert in den folgenden Browsern Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8 +) und Opera.

Trotzdem ausprobieren!
Thimble verfügt über Aktualisierungen – Bitte laden Sie Ihren Browser neu, um die neuesten Änderungen zu erhalten.

Projekt wird geladen

Ihr Projekt lädt ungewöhnlich lange.
Wenn es nicht geladen wird, laden Sie die Seite bitte neu, um es erneut zu versuchen.

Thimble konnte nicht gestartet werden.

Bitte laden Sie Ihren Browser neu, um Thimble erneut zu laden.

Details zu diesem Fehler finden Sie in der Konsole der Entwickler-Werkzeuge Ihres Browsers.

HINWEIS: Wenn Sie den Privaten Modus verwenden, laden Sie bitte im normalen Modus neu.

DATEIEN
  • HTML-Datei hinzufügen
  • CSS-Datei hinzufügen
  • JavaScript-Datei hinzufügen
  • Anleitung hinzufügen
  • Ordner hinzufügen
  • Datei hochladen…
  • Dateien herunterladen (.zip)
EDITOR
Rückgängig

Einen Quelltext-Schnipsel einfügen

HTML CSS JS
  • Kommentar
  • Tabelle
  • Sortierte Liste
  • Unsortierte Liste
  • Formular
  • Eine JavaScript-Datei hinzufügen
  • Eine CSS-Datei hinzufügen
  • Video-Player
  • Audio-Player
  • Kommentar
  • Element-Typ-Selektor
  • Klassenauswahl
  • ID-Selektor
  • Keyframe-Animation
  • Link-Styles
  • Medienanfragen
  • Schriften
  • Ein Pseudo-Element hinzufügen
  • Kommentar
  • Eine Grundlagen-Funktion
  • Feld
  • Objekt
  • For-Schleife
  • While-Schleife
  • Wenn…Sonst-Aussage
  • Aussage umschalten
  • Ein Klick-Ereignis hinzufügen
  • CSS-Eigenschaft ändern
<!-- Fügen Sie hier Ihren Kommentar ein -->
<table>
  <tr>
    <th>Überschrift</th>
    <th>Überschrift</th>
  </tr>
  <tr>
    <td>Wert</td>
    <td>Wert</td>
  </tr>
</table>

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

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

<form action="" method="get">
  <label for="first-name">Vorname</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Nachname</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Absenden">
</form>

<script src="script.js"></script>
<!-- Fügen Sie Ihrer HTML-Datei einen <link>-Tag hinzu. Üblicherweise gehört er in den <head>-Tag. -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Ihr Browser unterstützt das Video-Tag nicht.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Ihr Browser unterstützt das Audio-Tag nicht.
</audio>

/* Fügen Sie hier Ihren Kommentar ein */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* Das Element, auf das die Animation angewendet wird */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* Der Quelltext der Animation */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

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

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

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

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

@media screen and (max-width: 320px) {
  /* Regeln, wenn Bildschirm bis zu 320 px breit ist */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Regeln, wenn Bildschirm zwischen 321 px und 768 px breit ist */
}

@media screen and (min-width: 769px) {
 /* Regeln, wenn Bildschirm breiter als 768 px ist */
}

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

/* Fügt einen Pfeil vor jedem Element mit class='arrow' ein */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Fügen Sie hier Ihren Kommentar ein

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

sayHello("David");

var names = ["David", "Robert", "Katharina"];

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

var names = ["David", "Robert", "Katharina"];
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 = "Robert";

if (name === "Robert") {
  console.log("Hallo " + name);
} else if (name === "Katharina") {
  console.log("Hallo " + name);
} else {
  console.log("Hallo Fremder!");
}

var name = "Robert";

switch(name) {
  case "Robert":
    console.log("Hallo " + name);
    break;
  case "Katharina":
    console.log("Hallo " + name);
    break;
  default:
    // Etwas tun, wenn keine Bedingung erfüllt wurde
    console.log("Hallo Fremder!");
}
  
// Ein Element mit id="button" auswählen
var element = document.querySelector('#button');

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

// Das Element mit id='alert' auswählen
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Textgröße  ()
  • Farbthema
  • Lange Zeilen umbrechen
  • JavaScript erlauben
  • Leerstelle anzeigen
  • Tags automatisch schließen
  • Autovervollständigung für Quelltext
  • SVG-Grafiken als Quelltext bearbeiten
VORSCHAU Anleitung
Auto

Ihr Projekt veröffentlichen

Sie haben seit der letzten Veröffentlichung dieses Projekts etwas geändert.

Veröffentlichte Version aktualisieren

Hier ist ein Link zum Teilen…

Veröffentlichte Version löschen
Veröffentlichte Projekte benötigen eine Seite „index.html“ – fügen Sie bitte eine solche hinzu und versuchen Sie es erneut. Erfahren Sie mehr
Abbrechen
Veröffentlichen
Veröffentlichte Projekte benötigen eine Seite „index.html“ – fügen Sie bitte eine solche hinzu und versuchen Sie es erneut. Erfahren Sie mehr