Lewati ke konten utama
pelatihan
.org
Belajar. Praktik. Berkembang.
Kategori
ID
Masuk
Daftar
Menu
Kurikulum Intro to HTML & CSS: 7 Bab, 38 Lesson — pelatihan.org
Beranda
/
Katalog
/
Intro to HTML & CSS
/
Kurikulum
Kurikulum
Kurikulum Intro to HTML & CSS
Belajar Intro to HTML & CSS online lewat 38 lesson terstruktur, contoh kode, dan 190 soal kuis.
38 lesson
7 bab
190 soal
Ringkasan dan poin kunci bisa dilihat gratis. Materi lengkap, contoh kode, dan kuis memerlukan langganan.
01
HTML & CSS Tutorial
5 lesson
01
HOME
Bagian HOME pada tutorial HTML & CSS adalah titik awal jalur belajar yang memperkenalkan struktur dasar halaman web dan cara memberinya tampilan. Dari sini kamu akan menemukan…
02
Introduction
Pengenalan HTML & CSS menjelaskan bahwa web dibangun dari dua lapisan: HTML sebagai struktur dan makna konten, serta CSS sebagai lapisan tampilan. Pemisahan ini membuat halaman…
03
Environment Setup
Materi ini membahas persiapan lingkungan kerja untuk belajar HTML & CSS: teks editor, web browser, dan alat bantu pengembangan. Kabar baiknya, modal utamanya hanya browser dan…
04
First Web Page
Di sini kamu menyusun halaman web pertama: sebuah berkas .html berisi doctype, elemen html dengan bagian head dan body, serta elemen teks sederhana. Hasilnya bisa langsung…
05
Workflow & Tools
Materi ini membahas alur kerja pengembangan web: menulis kode, menyimpan, melihat hasil di browser, memperbaiki, lalu mengulang. Kamu juga diperkenalkan pada alat pendukung…
02
HTML & CSS Foundations
8 lesson
01
Essentials
Bagian inti ini merangkum konsep dasar HTML: elemen, atribut, dan karakter khusus yang perlu di-escape. Kamu akan memahami bahwa setiap tag punya makna, dan atribut menambah…
02
Document Structure
Pelajaran ini membahas kerangka dokumen HTML: bagian head yang memuat metadata dan bagian body yang memuat konten terlihat. Kamu juga diperkenalkan pada elemen semantik seperti…
03
Text Content
Topik ini membahas elemen penyusun konten teks: heading, paragraf, penekanan, kutipan, dan blok kode. Setiap elemen membawa makna tersendiri, bukan sekadar tampilan. Memilih…
04
Lists & Tables
Materi ini membahas dua struktur data umum: daftar (ordered dan unordered) serta tabel. Daftar cocok untuk kumpulan item, sedangkan tabel untuk data berbaris dan berkolom.…
05
Links & Navigation
Tautan adalah jantung web. Pelajaran ini membahas elemen anchor, atribut href, tautan absolut versus relatif, serta elemen nav untuk navigasi. Kamu juga belajar menautkan bagian…
06
Images & Media
Topik ini membahas penyisipan gambar dan media: elemen img dengan atribut alt, elemen picture untuk gambar adaptif, serta video dan audio. Kamu juga belajar pentingnya atribut…
07
Forms & Validation
Formulir menghubungkan pengguna dengan aplikasi. Materi ini membahas elemen form, input, label, berbagai tipe input, serta validasi bawaan browser seperti required, pattern, dan…
08
Reusable Components
Pelajaran ini memperkenalkan konsep komponen yang dapat digunakan ulang: tombol, kartu, navbar, dan bagian halaman lain dibuat sekali lalu dipakai berulang. Pendekatan ini…
03
HTML & CSS Styling Core
6 lesson
01
Styling Essentials
Materi ini membahas dasar-dasar menulis CSS: tiga cara pemasangan gaya (inline, internal, eksternal) beserta kelebihan masing-masing, serta sintaks dasar berupa selektor,…
02
Selectors & Specificity
Selektor menentukan elemen mana yang menerima gaya, sedangkan spesifisitas menentukan aturan mana yang menang saat berkonflik. Pelajaran ini mencakup selektor elemen, kelas, id,…
03
Cascade & Inheritance
Cascade adalah cara CSS menyelesaikan konflik antar aturan berdasarkan urutan, sumber, spesifisitas, dan !important. Sementara itu, inheritance membuat sebagian properti (seperti…
04
Typography
Topik ini membahas pengaturan huruf dalam CSS: ukuran, ketebalan, jarak, dan keluarga font. Kamu juga belajar memilih satuan yang tepat seperti rem dan px agar tipografi…
05
Colors & Backgrounds
Materi ini membahas cara menentukan warna dan latar dalam CSS: notasi hex, rgb/rgba, hsl, serta properti background untuk warna, gambar, dan gradasi. Kamu juga ditekankan pada…
06
Box Model
Setiap elemen HTML adalah sebuah kotak yang terdiri dari content, padding, border, dan margin. Pelajaran ini menjelaskan urutan lapisan tersebut serta properti box-sizing yang…
04
HTML & CSS Layout
7 lesson
01
Layout Fundamentals
Topik ini membahas normal flow dan display sebagai fondasi tata letak: bagaimana elemen mengalir dari atas ke bawah, perbedaan blok dan inline, serta margin collapse. Kamu juga…
02
Positioning & Z-Index
Pelajaran ini membahas kontrol posisi elemen: static, relative, absolute, fixed, dan sticky, serta properti offset seperti top dan left. Kamu juga belajar tentang z-index untuk…
03
Flexbox
Flexbox adalah model tata letak satu dimensi yang memudahkan penyebaran, perataan, dan pengaturan jarak antar item dalam satu baris atau kolom. Kamu akan mempelajari properti…
04
CSS Grid
CSS Grid adalah model tata letak dua dimensi yang mengatur baris dan kolom sekaligus. Kamu akan mempelajari grid-template-columns, satuan fr, gap, serta penempatan item ke area…
05
Layout Patterns
Setelah memahami flex dan grid, materi ini merangkum pola tata letak umum: holy grail layout, kartu, sidebar menempel, dan layout responsif sederhana. Kamu juga melihat…
06
Responsive Design
Desain responsif membuat halaman tampil baik di ponsel, tablet, maupun desktop. Materi ini membahas meta viewport, media query, dan pendekatan mobile-first. Dengan teknik ini,…
07
Responsive Components
Setelah memahami prinsip responsif, materi ini menerapkannya pada komponen nyata: navbar, kartu, tabel, dan container halaman. Kamu belajar memilih pola yang tetap nyaman di…
05
HTML & CSS Enhancements
6 lesson
01
Custom Properties
Custom properties (variabel CSS) memungkinkan kamu mendefinisikan nilai sekali lalu memakainya berkali-kali melalui fungsi var(). Keunggulan utamanya: mengubah satu deklarasi…
02
Calc & Functions
Pelajaran ini membahas fungsi CSS modern seperti calc(), min(), max(), dan clamp() yang menghitung nilai di dalam deklarasi. Dengan fungsi ini, kamu bisa mencampur satuan berbeda…
03
Transitions
Transisi membuat perubahan nilai CSS berlangsung halus dalam waktu tertentu, misalnya saat status hover atau penambahan class. Kamu mempelajari properti transition beserta…
04
Transforms
Transform menggeser, memutar, memperbesar, dan memiringkan elemen secara visual tanpa mengubah tata letak aslinya. Materi ini membahas fungsi translate, rotate, scale, skew,…
05
Animations
Animasi CSS memungkinkan perubahan bertahap melalui blok @keyframes yang dijalankan berulang sesuai konfigurasi. Berbeda dengan transisi, animasi bisa berjalan otomatis tanpa…
06
Effects & Filters
Topik ini membahas efek visual tambahan: filter pada elemen, backdrop-filter untuk efek kaca buram, opacity untuk transparansi, serta box-shadow untuk bayangan. Meski menarik,…
06
HTML & CSS Quality
5 lesson
01
Accessibility
Aksesibilitas memastikan halaman bisa digunakan semua orang, termasuk pengguna pembaca layar dan pengguna keyboard. Materi ini membahas alt text, struktur heading, kontras warna,…
02
Design Systems
Design system adalah kumpulan komponen, pola, dan pedoman yang membuat antarmuka konsisten di seluruh produk. Pelajaran ini membahas token desain (warna, jarak, huruf) dan…
03
Performance
Kecepatan halaman memengaruhi pengalaman pengguna maupun peringkat pencarian. Materi ini membahas cara mengoptimalkan CSS, gambar, dan pemuatan konten. Dengan praktik seperti…
04
Debugging & Testing
Debugging adalah keterampilan wajib: menemukan penyebab tampilan yang salah lalu memperbaikinya. Materi ini membahas pemakaian Developer Tools, penyebab umum gaya CSS tidak…
05
Tooling & Automation
Alat bantu pengembangan modern mempercepat dan meningkatkan kualitas kode: preprocessor seperti Sass, linter seperti Stylelint, bundler seperti Vite, serta autoprefixer. Materi…
07
HTML & CSS Practice & Exams
1 lesson
01
Landing Page Project
Proyek penutup merangkum seluruh materi: membangun landing page dari perencanaan, struktur HTML, styling, hingga pengecekan responsif dan performa. Kamu belajar menyusun bagian…