Terbitkan Projek anda
Anda ada membuat perubahan selepas projek ini diterbitkan sebelum ini.
Projek anda mengambil masa yang panjang untuk dimuatkan.
Jika tidak dimuatkan, sila muat semula halaman dan cuba lagi.
Jika tidak juga berjaya, maklumkan kami.
Sila muat semula pelayar anda untuk cuba memuatkan Thimble sekali lagi.
Untuk butiran ralat, buka konsol Alatan Pembangun pelayar anda.
NOTE: Jika anda menggunakan mod Pelayaran Peribadi, sila muat semula dalam mod normal.
<!-- Beri komen di sini -->
<table> <tr> <th>Tajuk</th> <th>Tajuk</th> </tr> <tr> <td>Nilai</td> <td>Nilai</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">Nama pertama</label> <input id="first-name" type="text" name="firstname"><br> <label for="last-name">Nama akhir</label> <input id="last-name" type="text" name="lastname"><br> <input type="submit" value="Hantar"> </form>
<script src="script.js"></script>
<!-- Tambah tag <link> ke fail HTML anda. Ini biasanya dalam tag <head> --> <link href="style.css" rel="stylesheet">
<video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Pelayar anda tidak menyokong tag video ini. </video>
<audio controls> <source src="audio.mp3" type="audio/mpeg"> Pelayar anda tidak menyokong tag audio ini. </audio>
/* Beri komen di sini */
p { font-size: 20px; }
.className { background-color: green; }
#idName { background-color: green; }
/* Elemen untuk melaksanakan animasi */ .animated { animation-name: animationName; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-out; } /* Kod animasi */ @keyframes animationName { 0% { background-color: red; } 50% { background-color: orange; } 100% { background-color: yellow; } }
/* Gaya Asas */ a:link { color: RoyalBlue; text-decoration: none; } /* Dilawati */ a:visited { color: Orchid; } /* Aktif */ a:active { color: OrangeRed; } /* Diserlahkan */ a:hover { text-decoration: underline; }
@media screen and (max-width: 320px) { /* Peraturan apabila lebar skrin mencapai 320px */ } @media screen and (min-width: 321px) and (max-width: 768px) { /* Peraturan apabila lebar skrin antara 321px dan 768px */ } @media screen and (min-width: 769px) { /* Peraturan apabila lebar skrin melebihi 768px */ }
@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; }
/* Tambah anak panah sebelum setiap elemen dengan class='arrow' */ .arrow::before { content: "→"; background: DodgerBlue; color: white; }
// Beri komen di sini
function sayHello(name) { console.log("Helo, " + name); } sayHello("Norman");
var names = ["Norman", "Syafiq", "Yatt"];
var person = { name: "Syafiq", skills: ["JS", "HTML"] };
var names = ["Norman", "Syafiq", "Yatt"]; 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 = "Syafiq"; if (name === "Syafiq") { console.log("Helo, " + name); } else if (name === "Yatt") { console.log("Helo, " + name); } else { console.log("Helo, anda hebat!"); }
var name = "Syafiq"; switch(name) { case "Syafiq": console.log("Helo, " + name); break; case "Yatt": console.log("Helo, " + name); break; default: // Buat sesuatu jika tiada syarat dipatuhi console.log("Helo, anda hebat!"); }
// Pilih satu elemen dengan id="button" var element = document.querySelector('#button'); element.addEventListener("click", function() { console.log("Click!"); });
// Pilih elemen dengan id='alert' var element = document.querySelector('#alert'); element.style.background = "OrangeRed";
Anda ada membuat perubahan selepas projek ini diterbitkan sebelum ini.