Sorry, Thimble wurket net yn jo browser

Thimble wurket yn de folgjende browsers: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+), en Opera.

Lit it my dochs probearje!
Thimble hat fernijingen - Fernij de side yn jo browser om de nijste wizigingen te krijen.

Projekt lade

Jo projekt liket traach laden te wurden.
As it net laden wurdt, laad de side dan opnij om iet opnij te probearjen.

Thimble koe net start wurde.

Fernij de side yn jo browser om Thimble opnij te laden.

Iepenje de Untwikkelersark-console fan jo browser foar flaterdetails.

Opmerking: as jo privee navigearje, werlaad dan de side yn normale modus.

BESTANNEN
  • HTML-bestân tafoegje
  • CSS-bestân tafoegje
  • JavaScript-bestân tafoegje
  • In hantlieding tafoegje
  • Map tafoegje
  • In bestân oplade…
  • Bestannen downloade (.zip)
EDITOR
Ungedien meitsje

In koadefragment ynfoegje

HTML CSS JS
  • Opmerking
  • Tabel
  • Oardere list
  • Net-oardere list
  • Formulier
  • In JavaScript-bestân byfoegje
  • In CSS-bestân byfoegje
  • Fideospiler
  • Audiospiler
  • Opmerking
  • Kiezer foar eleminttype
  • Klasseselector
  • ID-selector
  • Kaaiframe-animaasje
  • Linkstilen
  • Media-oanfragen
  • Lettertypen
  • In pseudo-elemint tafoegje
  • Opmerking
  • In basisfunksje
  • Matriks
  • Objekt
  • For-lus
  • While-lus
  • If...Else-ynstruksje
  • Switch-ynstruksje
  • In klikbarren tafoegje
  • CSS-eigenskip wizigje
<!-- Foegje hjir jo opmerking ta -->
<table>
  <tr>
    <th>Kop</th>
    <th>Kop</th>
  </tr>
  <tr>
    <td>Wearde</td>
    <td>Wearde</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">Foarnamme</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Efternamme</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Ferstjoere">
</form>

<script src="script.js"></script>
<!-- Foegje de <link>-tag ta oan jo HTML-bestân. Dizze wurde trochgeans yn de <head>-tag pleatst -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Jo browser stipet de fideo-tag net.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Jo browser stipet de audio-tag net.
</audio>

/* Foegje hjir jo opmerking ta */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* It elemint wêrop de animaasje tapast wurdt */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

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

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

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

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

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

@media screen and (max-width: 320px) {
  /* Rigels wannear skerm oant 320px breed is */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Rigels wannear skerm tusken 321px en 768px breed is */
}

@media screen and (min-width: 769px) {
 /* Rigels wannear skerm breder is as 768px */
}

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

/* Foeget in pylk ta foar elk elemint mei class='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Foegje hjir jo opmerking ta

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 frjemdling!");
}

var name = "Bob";

switch(name) {
  case "Bob":
    console.log("Hallo " + name);
    break;
  case "Katrien":
    console.log("Hallo " + name);
    break;
  default:
    // Wat dwaan as net oan in betingst foldien is
    console.log("Hallo frjemdling!");
}
  
// In elemint selektearje mei id="button"
var element = document.querySelector('#button');

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

// It elemint selektearje mei id='alert'
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Tekstgrutte  ()
  • Kleurtema
  • Lange rigels ôfbrekke
  • JavaScript tastean
  • Wytromte toane
  • Labels automatysk slute
  • Koade automatysk oanfolje
  • SVG-ôfbyldingen as koade bewurkje
FOARBYLD HANTLIEDING
Auto

Jo projekt publisearje

Jo hawwe wizigingen oanbrocht sûnt de lêste kear dat jo dit projekt publisearre hawwe.

Publisearre ferzje bywurkje

Hjir is in keppeling dy't jo diele kinne…

Publisearre ferzje fuortsmite
Publisearre projekten moatte in side ‘index.html’ hawwe; foegje dizze ta en probearje it opnij. Mear ynfo
Annulearje
Publisearje
Publisearre projekten moatte in side ‘index.html’ hawwe; foegje dizze ta en probearje it opnij. Mear ynfo