Lompat ke konten utama

Ajak teman, raih Rp1.000.000. Ikut kompetisi

Masuk

Bangun Halaman Web Pertamamu

Tulis kode, jalankan, lihat hasilnya — semuanya di browser ini.

  • Pemula
  • 5,0 ★ (9 ulasan)
  • 4 modul · 16 pelajaran
  • ±215 menit
  • 48 latihan
Mulai belajar
Bagikan
WhatsApp LinkedIn X

Perkenalan kelas bisa dibuka tanpa akun. Materi dan latihannya pakai akun gratis agar progres, draft kode, dan sertifikatmu tersimpan.

Yang akan kamu bisa setelah kelas ini

12 hasil belajar
  • Menulis kerangka dokumen HTML lengkap: doctype, html lang, head, meta charset, title, dan body.
  • Menandai bagian halaman dengan elemen semantik header, nav, main, section, dan footer.
  • Menyusun teks dengan heading bertingkat, daftar berurutan dan tidak berurutan, serta penekanan kata.
  • Membedakan tautan absolut, tautan relatif, dan tautan ke bagian lain di halaman yang sama.
  • Memasang gambar dengan teks alternatif yang sesuai fungsinya.
  • Menyajikan data dengan tabel ber-caption, thead, dan judul ber-scope col maupun row.
Lihat 6 hasil belajar lainnya
  • Membuat formulir dengan label yang terhubung ke isiannya lewat for dan id.
  • Membatasi isian dengan min, max, step, pattern, dan maxlength, lalu memilih get atau post dan value yang tepat untuk radio, kotak centang, dan select.
  • Memilih elemen dengan selektor tipe, kelas, id, dan keturunan, lalu mengatur warna dan hurufnya.
  • Menjelaskan aturan mana yang menang saat dua aturan bertabrakan, dan menandai keadaan elemen dengan :hover serta :focus-visible.
  • Mengatur jarak dengan padding, border, dan margin memakai satuan px dan rem, serta mengubah cara lebar dihitung dengan box-sizing.
  • Menggabungkan semuanya menjadi satu halaman utuh yang bisa dibaca di browser.

Ringkasnya

Bangun Halaman Web Pertamamu adalah kelas gratis berbahasa Indonesia tingkat pemula dari KelasGratis. Cocok untuk siapa pun yang belum pernah menulis kode dan ingin melihat hasilnya langsung. Isinya 16 pelajaran dalam 4 modul (±4 jam) dengan 48 latihan yang dinilai otomatis di browser. Sertifikat penyelesaian gratis dan bisa dicek keasliannya.

Untuk siapa

Siapa pun yang belum pernah menulis kode dan ingin melihat hasilnya langsung.

Prasyarat

Tidak ada. Bisa dimulai dari nol.

Relevan untuk pekerjaan dan tujuan

Kelas ini termasuk kelas inti untuk:

Alat yang perlu disiapkan

  • Browser modern. Editor dan preview sudah tersedia di halaman pelajaran.

Tempat berlatih

Coba, periksa, lalu lanjutkan.

48 latihan di 17 pelajaran. Jawaban diperiksa langsung di halaman materi; petunjuk dibuka bertahap.

editor HTML/CSS

Kurikulum

4 modul · 16 pelajaran · ±215 menit

Enam belas pelajaran HTML dan CSS dengan editor dan preview terisolasi: kerangka dokumen, elemen semantik, teks, tautan, gambar berketerangan, tabel data, formulir berlabel, lalu selektor, spesifisitas, kelas semu, dan model kotak CSS. Dua pelajaran lanjutan membahas validasi bawaan formulir serta pasangan name=value yang dikirim lewat get atau post. Tidak perlu menginstal apa pun; kode disimpan otomatis di perangkatmu.

  1. 01Perkenalan1 pelajaran
    Perkenalan kelasPembuka2 mnt
  2. 02Kerangka dokumen4 pelajaran
    Heading dan paragraf, butuh akun14 mntKerangka dokumen dan bagian head, butuh akun13 mntElemen semantik: header, nav, main, footer, butuh akun14 mntMisi: kerangka halaman Koperasi Melati, butuh akun14 mnt
  3. 03Teks, tautan, dan gambar4 pelajaran
    Subjudul, daftar, dan penekanan teks, butuh akun13 mntTautan absolut, relatif, dan ke bagian halaman, butuh akun13 mntGambar dan teks alternatif, butuh akun13 mntMisi: halaman profil Perpustakaan Warga, butuh akun13 mnt
  4. 04Tabel dan formulir5 pelajaran
    Tabel data: baris, kolom, dan judul kolom, butuh akun13 mntFormulir dasar: label, input, dan tombol, butuh akun14 mntValidasi bawaan: rentang, pola, dan panjang isian, butuh akun13 mntname, value, dan ke mana data formulir dikirim, butuh akun13 mntMisi: daftar harga dan formulir pesanan, butuh akun13 mnt
  5. 05Menata dengan CSS3 pelajaran
    Selektor, warna, dan huruf, butuh akun14 mntKotak: padding, border, margin, dan satuan, butuh akun13 mntMisi: menyusun satu halaman utuh, butuh akun13 mnt

Urutan pelajaran tidak dikunci.

Sertifikat kelas

Selesaikan kelasnya, sertifikat ini atas namamu.

  • Nama lengkapmu dan judul kelas tercetak di sertifikat.
  • Kode dan QR yang bisa dicek siapa saja di kelasgratis.com/verifikasi.
  • Sekali klik ke profil LinkedIn, atau unduh PNG dan PDF.
Mulai belajar

Bukti penyelesaian materi, bukan akreditasi atau sertifikasi kompetensi.

Pertanyaan yang sering muncul

Apakah perlu menginstal editor kode seperti VS Code?

Tidak. Editor dan preview terisolasi sudah ada di halaman pelajaran, dan kodemu disimpan otomatis di perangkatmu. Yang dibutuhkan hanya browser modern.

Apakah kelas ini membahas Flexbox atau Grid?

Tidak. CSS di kelas ini berhenti di selektor tipe, kelas, id, dan keturunan, aturan spesifisitas, kelas semu :hover dan :focus-visible, warna dan huruf, serta padding, border, margin, box-sizing, dan satuan px dan rem. Flexbox, Grid, dan media query dibahas di kelas CSS Tata Letak dan Responsif.

Apa yang sudah jadi di akhir kelas?

Satu halaman utuh yang disusun di misi terakhir. Sebelumnya ada tiga misi: kerangka halaman Koperasi Melati, halaman profil Perpustakaan Warga, serta daftar harga dan formulir pesanan. Seluruhnya 16 pelajaran dengan 48 latihan, sekitar 213 menit, termasuk dua pelajaran lanjutan tentang validasi dan pengiriman data formulir.

Apakah aksesibilitas ikut dibahas?

Dasarnya iya: teks alternatif gambar yang sesuai fungsinya, keterangan gambar dengan figcaption, label formulir yang terhubung ke isiannya lewat for dan id beserta alasan placeholder tidak bisa menggantikannya, judul tabel ber-scope col dan row, penanda fokus papan ketik lewat :focus-visible, serta elemen semantik header, nav, main, section, article, dan footer.

Dari pengalaman belajar

Ulasan peserta

Apa yang membantu, dan apa yang masih bisa diperbaiki?

5,0dari 5 · 9 ulasan terbit

Ulasan berasal dari akun yang telah menyelesaikan setidaknya satu pelajaran. Bintang 1–3 ditinjau admin sebelum terbit; bintang 4–5 langsung terbit. Sebelum ada ulasan terbit, kelas menggunakan nilai awal admin 5,0. Setelahnya, rating mengikuti rata-rata ulasan yang sudah terbit.

10123016 NANDA ALIYUL CHOWAS

★★★★★

alhamdulillah untuk hasil lathan ini sangat memuaskan dan sangat" rekomendasi buat yang mau belajar

Ahmad Humaidi

★★★★★

materinya mudah dipahami. disini diajarkan dasar-dasar HTML, dan pengenalan CSS di modul terakhir. Salah satu keunggulannya adalah kita selalu diberi tahu kesalahan yang banyak dilakukan oleh pemula di setiap materinya.

Muhammad Rifki Maulana

★★★★★

Website kelasgratis ini sangat membantu didalam bidang pembangunan web, karna diajarkan fundamental-fundamental nya dan bagus untuk junior yang baru terjun ke dalam dunia it

Mutmainnah Muti

★★★★★

sangat bagus untuk di pelajari

Rasya Akbar

★★★★★

ini sangat bermanfaat dan sudah keren

Siraj Fatwa Sidqy

★★★★★

Latihan ini cukup mudah dipahami dan membantu saya memahami dasar HTML dan CSS, terutama penggunaan div, class, semantic HTML, padding, background-color, dan styling sederhana. Materinya juga cocok untuk pemula karena langsung disertai praktik.

Menampilkan 6 ulasan terbaru dari 9 ulasan yang terbit.

Bagikan pengalaman belajarmu

Masuk dan selesaikan satu pelajaran untuk menulis ulasan. Masuk ke akun →

Setelah kelas ini

Revisi materi terakhir: 28 Okt 2026. Laporan kesalahan bisa dikirim dari setiap halaman pelajaran.

Tentang KelasGratisMasuk