Materi terstruktur dari tingkat dasar hingga mahir yang dirancang untuk siswa SMK kejuruan se-NTT dan siapa saja yang ingin menguasai rekayasa web modern. Setiap topik dilengkapi studi kasus yang bisa langsung Anda uji di Live Playground.
Dari membuka web, login akun, pengerjaan 10 level playground, hingga mendapatkan nilai dan sertifikat.
HyperText Markup Language menyusun seluruh teks, gambar, formulir, dan struktur dokumen.
Setiap file website diawali dengan deklarasi tipe dokumen dan struktur pembungkus utama:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman Web Saya</title>
</head>
<body>
<h1>Selamat Datang di Dunia Pemrograman!</h1>
<p>Ini adalah paragraf konten utama website.</p>
</body>
</html>
Gunakan heading untuk struktur dokumen yang ramah mesin pencari (SEO):
<h1>: Judul utama halaman (wajib hanya 1 per halaman).<h2> - <h6>: Subjudul berjenjang.<p>: Paragraf teks biasa.<strong>: Menebalkan teks penting.<em>: Memiringkan teks penekanan.Menghubungkan halaman dan menampilkan media visual:
<!-- Tautan Eksternal --> <a href="https://vxai.online" target="_blank">Buka VxAI</a> <!-- Menyisipkan Gambar --> <img src="logo.png" alt="Deskripsi Gambar" width="200">
Formulir memungkinkan pengguna mengirimkan input teks, kata sandi, pilihan dropdown, dan tombol submit:
<form action="/simpan" method="POST">
<label for="nama">Nama Lengkap:</label>
<input type="text" id="nama" name="nama" placeholder="Ketik nama Anda" required>
<label for="email">Email Pengguna:</label>
<input type="email" id="email" name="email" required>
<label for="jurusan">Jurusan:</label>
<select id="jurusan" name="jurusan">
<option value="RPL">Rekayasa Perangkat Lunak</option>
<option value="TKJ">Teknik Komputer & Jaringan</option>
</select>
<button type="submit">Kirim Formulir</button>
</form>
Gunakan tag semantik dibanding tag `<div>` polos untuk meningkatkan aksesibilitas dan kemudahan dibaca mesin:
Cascading Style Sheets mengatur warna, tipografi, jarak (spacing), dan animasi layar.
Setiap elemen di web adalah kotak empat persegi panjang yang terdiri dari 4 lapisan:
.kotak {
box-sizing: border-box; /* Sangat disarankan agar padding tidak merusak lebar */
width: 300px;
padding: 1.5rem; /* Jarak ke dalam */
border: 1px solid #38bdf8;
margin: 1rem auto; /* Jarak ke luar (tengah) */
border-radius: 1rem; /* Sudut bulat */
}
Flexbox adalah standar industri untuk menyusun elemen 1 dimensi (baris atau kolom) secara rapi:
/* Kontainer Induk (Parent) */
.baris-sejajar {
display: flex;
flex-direction: row; /* default: 'row' (mendatar) atau 'column' (menurun) */
justify-content: space-between; /* Perataan horizontal: flex-start, center, space-between */
align-items: center; /* Perataan vertikal: center, flex-start, stretch */
gap: 1.5rem; /* Jarak otomatis antar elemen anak */
flex-wrap: wrap; /* Turun ke bawah jika layar sempit di HP */
}
/* Elemen Anak (Child) */
.item-anak {
flex: 1; /* Membagi lebar secara merata */
min-width: 250px;
}
CSS Grid sempurna untuk tata letak 2 dimensi (baris dan kolom sekaligus). Sangat cocok untuk galeri kartu:
.galeri-grid {
display: grid;
/* Otomatis menambah atau mengurangi kolom sesuai ukuran layar */
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
Memastikan website tampil sempurna di smartphone (HP), tablet, maupun monitor desktop:
/* Gaya default untuk Desktop / Layar Lebar */
.navigasi { display: flex; gap: 2rem; }
/* Jika dibuka di layar HP (lebar maksimal 768px) */
@media (max-width: 768px) {
.navigasi {
flex-direction: column; /* Ubah menu mendatar menjadi menurun */
gap: 0.75rem;
}
}
Bahasa skrip yang menghidupkan website: merespon klik tombol, validasi, dan alur aplikasi.
Gunakan `const` untuk nilai yang tidak berubah dan `let` untuk nilai yang akan bertambah atau berganti:
// Deklarasi Variabel
const namaSekolah = "SMK Vokasi NTT";
let jumlahSiswa = 350;
// Arrow Function Modern
const beriSalam = (nama) => {
return `Halo ${nama}, selamat datang di ${namaSekolah}!`;
};
console.log(beriSalam("Budi"));
DOM (Document Object Model) adalah jembatan antara JavaScript dan elemen HTML:
// 1. Tangkap elemen HTML berdasarkan ID
const tombol = document.getElementById("tombol-klik");
const labelAngka = document.getElementById("nilai-angka");
let counter = 0;
// 2. Pasang pendengar aksi klik (Event Listener)
tombol.addEventListener("click", function() {
counter++;
labelAngka.innerText = counter; // Perbarui teks di layar secara langsung!
if (counter >= 10) {
labelAngka.classList.add("text-sukses"); // Tambah class CSS
}
});
Membuat elemen baru `createElement` dan menyisipkannya ke dalam daftar `appendChild`:
function tambahTugasBaru(isiTugas) {
const list = document.getElementById("daftar-tugas");
// Buat tag <li> baru
const itemBaru = document.createElement("li");
itemBaru.innerText = isiTugas;
// Klik untuk menandai selesai
itemBaru.addEventListener("click", () => {
itemBaru.classList.toggle("selesai");
});
// Masukkan ke dalam daftar
list.appendChild(itemBaru);
}
Pilih proyek di bawah ini untuk langsung dikerjakan di Live Playground satu-klik:
Latihan menyusun profil diri, heading, paragraf, serta form registrasi siswa dengan validasi HTML5.
Membuat navbar responsif, hero section, dan kartu galeri karya otomatis yang rapi di layar HP dan laptop.
Aplikasi manajemen tugas: menambah catatan baru, menandai selesai dengan coret teks, dan menghapus tugas.
Membangun antarmuka obrolan cerdas yang membalas pertanyaan koding pengguna secara otomatis.
Pilih latihan di Live Playground, ketik kode Anda, lihat hasilnya secara real-time, dan simpan agar dapat dievaluasi langsung oleh guru pengajar!
⚡ Mulai Latihan di Playground Sekarang