HTML dan CSS Dasar
Mengenal dan belajar dasar-dasar HTML dan CSS untuk fondasi awal belajar web development
Tentang Kelas
Dalam kelas online ini kamu akan belajar dasar-dasar HTML dan CSS. HTML dan CSS merupakan pengetahuan umum yang harus dimiliki oleh setiap orang yang menggeluti bidang web programming. Dalam kelas ini, kamu akan belajar mulai dari bagaimana konsep dasar dan cara kerja dari HTML dan CSS serta bagaimana penggunaannya dalam membangun sebuah tampilan website.
Tujuan Umum dan Khusus Pelatihan
- Di akhir pelatihan, peserta dapat mengenal HTML dan CSS
- Dapat mengetahui dasar-dasar pemrograman
- Dapat menginstal software yang dibutuhkan dalam belajar pemrograman
- Dapat menjelaskan dasar-dasar pemrograman
Silabus Topik 1: Pengenalan HTML dan CSS
Topik 2: Dasar HTML dan CSS
Topik 3: Membuat Layout Halaman Tanpa Table
Topik 4: Teknologi HTML dan CSS Terbaru
Jenis pekerjaan Kelas ditujukan bagi siapa saja yang ingin berkarir menjadi seorang programmer
Metode Ajar
- Online Self-paced Learning Siswa dapat menentukan sendiri waktu belajarnya
- Fasilitas Pengajaran Materi disediakan berupa video Forum tanya jawab: Forum digunakan apabila siswa mendapatkan kendala saat belajar, dan akan dibalas oleh tim support CodePolitan Grup telegram: Berisi member CodePolitan Evaluasi pembelajaran: Ujian di akhir modul dan ujian di akhir kelas Sertifikat kelulusan
Peralatan Belajar Siswa
- Siswa wajib memiliki akses internet melalui komputer yang menggunakan Windows/Mac/Linux
- Spesifikasi minimal komputer milik siswa:
- Sistem operasi : Windows, Linux, atau MacOS.
- Prosesor : Intel Dual Core (Rekomendasi Core i3 ke atas).
- RAM : 1GB (Rekomendasi 2GB).
- Resolusi layar : 1366 x 768 (Rekomendasi Full HD 1920 x 1080)
- Software:
- Browser (tidak ada preferensi khusus)
- Text editor (tidak ada preferensi khusus)
Daftar Materi
| Pendahuluan Pemrograman Web Front End | 15:16 | |
| Dasar HTML | 18:32 | |
| CSS dan Style HTML Dasar | 09:01 | |
| Quiz Pengenalan HTML dan CSS | 05:00 |
| Membuat Tabel | 18:37 | |
| Membuat List | 11:36 | |
| Membuat Layout | 16:55 | |
| Display & Dimension | 08:06 | |
| Quiz Dasar HTML dan CSS 1 | 00.00 | |
| Box Model & Overflow | 08:24 | |
| CSS Float | 04:06 | |
| CSS Position | 06:25 | |
| CSS Background | 03:30 | |
| CSS Text | 02:24 | |
| CSS Font | 04:52 | |
| CSS Selector | 05:25 | |
| Quiz Dasar HTML dan CSS 2 | 00.00 |
| Membuat Layout Dasar | 00.00 | |
| Membuat Daftar Produk | 00.00 | |
| Membuat Menu Dropdown | 00.00 | |
| Menambahkan Jumbotron | 00.00 |
| Mengenal Fitur CSS3 | 12:17 | |
| Mengenal Fitur HTML5 | 19:14 | |
| Quiz Teknologi HTML dan CSS Terbaru | 00.00 |
Penyusun Materi
Galih Pratama
Owner of BelajarKoding, Head Front-end at CROWDE
Testimoni Oleh Siswa
(2845 reviews)
Terra Noztra Tabuni
Jumat, 29 Mei 2026 pukul 22.08
materi yang di sampaikan mentornya cukup mudah di mengerti tapi dari project2 yang mentor buat rata2 saya bisa semua hanya itu kadang agak kurang lengkap menampaiannya kek masih sepotong2 menyampaikan materinya.terimakasih
MOHAMMAD DOFIRI
Rabu, 27 Mei 2026 pukul 15.10
Materi yang disampaikan oleh mentornya mudah dimengerti dan cocok untuk saya belajar sebagai pemula dan tingkat lanjutan terimakasih codepolitan goodperfect
Arshavino Andores Ramadhan
Kamis, 21 Mei 2026 pukul 13.48
Secara keseluruhan, soal-soal di atas membahas dasar HTML, CSS, dan web development seperti penggunaan tag HTML (a, article, alt, doctype), struktur dan semantik, CSS (display, margin, padding, specificity, pseudo-class, box model, animation), serta konsep web seperti hosting dan format video; inti jawabannya menekankan bahwa HTML digunakan untuk struktur (misalnya <article>, alt, <!DOCTYPE html>), CSS untuk tampilan (seperti display: block, margin collapsing, box model 270px, :hover, #id specificity, animation-fill-mode, ease-in), serta pemahaman dasar web seperti hosting sebagai penyimpanan server dan format video Firefox (webm & ogg).
Natasya ceren Sitompul
Kamis, 21 Mei 2026 pukul 11.54
Soal-soal di atas membahas dasar-dasar HTML dan CSS dalam pengembangan web, seperti fungsi HTML untuk struktur halaman, penggunaan tag semantik (article, section, main), aturan penulisan HTML5 yang bersifat case-insensitive, cara menghubungkan CSS eksternal dengan tag link, penggunaan input type number untuk angka, pemahaman display inline dan inline-block, konsep margin collapsing, serta pemilihan font-family dengan fallback. Selain itu juga dibahas peran elemen container, atribut form action, hingga struktur dasar dokumen HTML5 dengan doctype, yang semuanya menekankan pentingnya pemahaman standar web modern agar tampilan dan fungsi halaman berjalan sesuai aturan browser.
Natasya ceren Sitompul
Kamis, 21 Mei 2026 pukul 11.36
Jawaban yang benar adalah **p:first-letter**, karena selector ini digunakan untuk memberi gaya pada huruf pertama dari sebuah paragraf tanpa mengubah isi teks HTML, sesuai dengan kebutuhan soal yang hanya ingin memiringkan huruf “C” pada “CodePolitan”. Selector lain seperti `first-line` memengaruhi satu baris, sedangkan `nth-child` dan `first-child` bekerja pada elemen, bukan karakter, sehingga tidak tepat untuk kasus ini.
Natasya ceren Sitompul
Kamis, 21 Mei 2026 pukul 11.36
Jawaban yang benar adalah **p:first-letter**, karena selector ini digunakan untuk memberi gaya pada huruf pertama dari sebuah paragraf tanpa mengubah isi teks HTML, sesuai dengan kebutuhan soal yang hanya ingin memiringkan huruf “C” pada “CodePolitan”. Selector lain seperti `first-line` memengaruhi satu baris, sedangkan `nth-child` dan `first-child` bekerja pada elemen, bukan karakter, sehingga tidak tepat untuk kasus ini.
MUHAMMAD FACHRI ANSHORI
Sabtu, 16 Mei 2026 pukul 05.59
materi yang disampaikan mudah dipahami dan dimengerti dan dipelajari.materi yang disampaikan mudah dipahami dan dimengerti dan dipelajari,
Azka Ihsan Nurrahman
Rabu, 22 April 2026 pukul 21.42
Materi yang disampaikan oleh mentornya mudah di mengerti dan cocok untuk saya yang hendak review materi HTML dan CSS
mfaihanfakhruzi
Selasa, 14 April 2026 pukul 08.49
Materi yang disampaikan mudah dimengerti cocok untuk pemula. Kalimat yang digunakan pada materi cukup jelas walaupun masih terdapat beberapa kalimat yang agak sulit untuk dipahami
mfaihanfakhruzi
Selasa, 14 April 2026 pukul 08.24
CSS3 memberikan kontrol yang sangat presisi. Kita belajar bahwa animasi bukan hanya soal durasi (animation-duration), tapi juga soal bagaimana elemen berperilaku sebelum dan sesudahnya melalui animation-fill-mode. Selain itu, penggunaan pseudo-element seperti ::first-letter menunjukkan bahwa kita bisa membuat desain yang sangat detail (seperti gaya majalah/drop cap) dengan kode yang tetap bersih dan efisien.