Lewati ke konten utama
pelatihan
.org
Belajar. Praktik. Berkembang.
Kategori
ID
Masuk
Daftar
Menu
Kurikulum W3.CSS: 5 Bab, 75 Lesson — pelatihan.org
Beranda
/
Katalog
/
W3.CSS
/
Kurikulum
Kurikulum
Kurikulum W3.CSS
Belajar W3.CSS online lewat 75 lesson terstruktur, contoh kode, dan 375 soal kuis.
75 lesson
5 bab
375 soal
Ringkasan dan poin kunci bisa dilihat gratis. Materi lengkap, contoh kode, dan kuis memerlukan langganan.
01
W3.CSS
54 lesson
01
W3.CSS HOME
W3.CSS adalah framework CSS gratis, ringan, dan mobile-first yang membantu kamu menyusun tampilan halaman yang konsisten tanpa menulis banyak CSS dari nol. Hampir seluruh gayanya…
02
W3.CSS Intro
Halaman pengenalan ini menjelaskan filosofi W3.CSS: cepat, ringan, dan mudah dipelajari karena hanya mengandalkan class di HTML. Kamu akan mempelajari cara memasang W3.CSS lewat…
03
W3.CSS Containers
Container adalah pembungkus utama yang memberi jarak internal agar teks tidak menempel di tepi layar. W3.CSS menyediakan w3-container untuk kotak berpadding, w3-content untuk…
04
W3.CSS Panels
Panel adalah wadah berpadding yang dipakai untuk mengelompokkan konten seperti catatan, ringkasan, atau pesan singkat. W3.CSS menyediakan class w3-panel yang langsung memberi…
05
W3.CSS Borders
Border memberi garis pembatas di sekeliling elemen, dan W3.CSS menyediakan class untuk menambah, mengarahkan, serta mewarnai garis tersebut. Selain garis, kamu juga mengatur…
06
W3.CSS Cards
Card adalah kartu kontainer dengan bayangan yang dipakai untuk membungkus gambar, teks, dan tombol dalam satu unit visual. W3.CSS menyediakan class w3-card yang langsung…
07
W3.CSS Padding
Padding adalah jarak antara isi elemen dan tepinya, sehingga konten tidak terasa berdesakan. W3.CSS menyediakan class w3-padding dengan berbagai nilai seperti w3-padding-small,…
08
W3.CSS Margins
Margin mengatur jarak di luar elemen sehingga komponen tidak saling menempel. W3.CSS menyediakan w3-margin untuk jarak menyeluruh dan w3-margin-top, w3-margin-bottom,…
09
W3.CSS Display
Kelas display mengontrol apakah sebuah elemen tampil sebagai blok, inline, atau bahkan disembunyikan sama sekali. W3.CSS menyediakan w3-block, w3-inline, w3-inline-block,…
10
W3.CSS Buttons
Tombol dalam W3.CSS dibuat dengan menambahkan class w3-button pada elemen seperti <a> atau <button>, lalu diberi warna seperti w3-blue atau w3-red. Ukuran, bentuk, dan efek hover…
11
W3.CSS Responsive
Halaman responsive menjelaskan bagaimana W3.CSS menyesuaikan tata letak dengan ukuran layar memakai beberapa breakpoint: s untuk layar kecil, m untuk medium, dan l untuk besar.…
12
W3.CSS Flexbox
Flexbox adalah model tata letak CSS untuk menyusun item dalam satu arah, baik baris maupun kolom, dengan pembagian ruang otomatis. Dengan W3.CSS kamu mengaktifkannya lewat class…
13
W3.CSS Flex Helpers
Flex helper adalah seperangkat pengaturan kecil yang menyempurnakan flexbox, seperti perataan item, pembagian ruang, dan pembungkusan baris. Dengan helper kamu tidak perlu…
14
W3.CSS Grid
CSS Grid adalah sistem tata letak dua dimensi yang menyusun konten dalam baris dan kolom sekaligus. Kamu mendefinisikan berapa kolom lewat grid-template-columns, lalu setiap anak…
15
W3.CSS Grid Helpers
Grid helper memudahkan kamu menempatkan item di posisi tertentu tanpa menghitung baris dan kolom secara manual. Kamu bisa memakai penamaan area dengan grid-template-areas,…
16
W3.CSS Rows
Baris adalah wadah horizontal yang menampung beberapa kolom agar sejajar dalam satu garis. Pada W3.CSS kamu memakai w3-row, kemudian menaruh elemen berclass w3-col di dalamnya.…
17
W3.CSS Cells
Sel adalah alternatif tata letak berbasis tabel yang cocok untuk membandingkan isi berdampingan dengan ketinggian yang otomatis sama. W3.CSS menyediakan w3-cell-row sebagai baris…
18
W3.CSS 12-Columns
Sistem 12 kolom membagi lebar baris menjadi dua belas bagian sama besar sehingga kombinasi layout apa pun mudah disusun. Di W3.CSS kamu menulis w3-col bersama angka pecahan…
19
W3.CSS Page Content
Bagian ini membahas cara menyusun isi halaman agar nyaman dibaca: wadah dengan lebar terbatas, gambar yang responsif, serta hierarki judul dan paragraf yang rapi. W3.CSS…
20
W3.CSS Colors
W3.CSS menyediakan kelas warna siap pakai untuk latar, teks, dan keadaan hover, sehingga kamu tidak perlu menghafal kode hex. Contohnya w3-red untuk latar, w3-text-red untuk…
21
W3.CSS Defaults
Setiap halaman yang memuat W3.CSS otomatis memperoleh gaya bawaan: ukuran huruf, jarak, warna teks, dan perilaku elemen dasar sudah diatur sedemikian rupa agar tampilan…
22
W3.CSS Fonts
Pengaturan font menentukan kenyamanan membaca lebih besar daripada hiasan apa pun. W3.CSS memakai keluarga font sans-serif bawaan, dan kamu bebas menggantinya lewat CSS atau…
23
W3.CSS Text
Modul teks membahas perataan, dekorasi, transformasi, dan spasi yang membuat blok tulisan lebih rapi. Kamu mengatur semuanya lewat properti CSS seperti text-align,…
24
W3.CSS Dark Mode
Dark mode mengganti skema warna terang dengan warna gelap yang lebih nyaman di mata, terutama pada ruangan minim cahaya. Kamu bisa mengikuti preferensi sistem lewat media query…
25
W3.CSS Variables
CSS variables atau custom property memungkinkan kamu menyimpan nilai seperti warna dan jarak dalam satu nama yang dapat dipakai berulang. Nilai didefinisisi dengan tanda -- lalu…
26
W3.CSS RTL
RTL adalah kependekan dari right-to-left, arah baca yang dipakai bahasa Arab, Ibrani, dan Farsi. Dengan mengubah atribut dir menjadi rtl, elemen yang bergantung pada arah seperti…
27
W3.CSS Notes
Catatan adalah blok informasi singkat yang ditonjolkan agar pembaca tidak melewatkannya, misalnya tips, prasyarat, atau pengingat penting. Secara struktural catatan dapat…
28
W3.CSS Quotes
Elemen kutipan seperti blockquote dan q dipakai untuk menampilkan perkataan orang lain atau kutipan sumber dengan tepat. Agar menonjol, kutipan biasanya diberi garis di sisi…
29
W3.CSS Alerts
Alert adalah pesan singkat yang memberi tahu pengguna tentang suatu keadaan, misalnya data tersimpan, form tidak valid, atau koneksi terputus. W3.CSS menyediakan class w3-alert…
30
W3.CSS Tables
Tabel dipakai untuk data berbaris seperti daftar pengguna, laporan harga, atau jadwal. W3.CSS menyediakan class w3-table sebagai dasar dan w3-table-all yang langsung memberi…
31
W3.CSS Lists
Daftar dipakai untuk mengumpulkan poin, langkah, atau kumpulan item yang tidak membentuk paragraf. HTML menyediakan ul untuk daftar tak berurutan dan ol untuk daftar berurutan,…
32
W3.CSS Bars
Bar dipakai dua hal: menampilkan progres seperti pengunduhan berkas, serta menyusun deretan item dalam satu baris memakai w3-bar. Progress bar sederhana dibuat dari container…
33
W3.CSS Dropdowns
Dropdown adalah menu yang tersembunyi lalu muncul ketika pengguna mengarahkan kursor atau mengetuk tombol. W3.CSS menyediakan w3-dropdown sebagai pembungkus, w3-dropdown-content…
34
W3.CSS Accordions
Accordion adalah kumpulan panel yang dapat dibuka dan ditutup sehingga hanya isi yang dibutuhkan yang tampil. Polanya sederhana: judul berupa tombol yang mengubah keadaan…
35
W3.CSS Navigation
Navigasi yang baik membuat pengunjung menemukan tujuannya dalam hitungan detik. W3.CSS umumnya menyusun menu memakai elemen nav berisi w3-bar dengan item berupa tautan. Pada…
36
W3.CSS Code Reuse
Reuse atau pemakaian ulang berarti menulis potongan satu kali lalu memanfaatkannya berkali-kali, baik berupa class CSS, variabel tema, maupun potongan markup. Prinsip ini…
37
W3.CSS Sidebar
Sidebar adalah panel di sisi halaman yang biasa menyimpan navigasi, filter, atau informasi ringkas. W3.CSS menyediakan class w3-sidebar yang dapat dipadukan dengan w3-bar-block…
38
W3.CSS Tabs
Tabs menampilkan beberapa panel dalam ruang yang sama, bergantian pada judul yang ditekan pengguna. Bar judul umumnya dibuat dari w3-bar berisi item tombol, sedangkan panel aktif…
39
W3.CSS Images
W3.CSS menyediakan kelas utilitas sederhana agar gambar tampil rapi dan responsif di berbagai ukuran layar. Kelas utamanya, .w3-image, membuat gambar memenuhi lebar kontainer…
40
W3.CSS Inputs
W3.CSS menyediakan kelas untuk mempercantik elemen formulir seperti input teks, textarea, select, dan tombol. Cukup tambahkan .w3-input pada <input> atau <textarea> agar…
41
W3.CSS Round
Halaman Round membahas cara membulatkan sudut elemen agar tampilan lebih lembut dan modern. W3.CSS menyediakan kelas .w3-round beserta varian radius yang lebih besar, serta…
42
W3.CSS Badges
Badge adalah label kecil yang menampilkan angka atau status ringkas, seperti jumlah notifikasi pesan. W3.CSS menyediakan kelas .w3-badge yang ditempel pada <span> di dalam tombol…
43
W3.CSS Tags
Tags adalah label kecil untuk kata kunci atau kategori konten, misalnya topik artikel. Berbeda dengan badge yang fokus pada angka, .w3-tag lebih sering disisipkan dalam paragraf…
44
W3.CSS Animations
W3.CSS menyediakan kelas animasi siap pakai seperti .w3-animate-top, .w3-animate-left, dan .w3-animate-zoom. Animasi berjalan ketika elemen ditampilkan, misalnya saat kelas…
45
W3.CSS Effects
Halaman Effects mengumpulkan berbagai efek visual yang bisa ditambahkan tanpa mengubah struktur HTML, misalnya opasitas saat hover dan bayangan kartu. Sebagian besar efek memakai…
46
W3.CSS Pagination
Pagination memecah daftar panjang menjadi beberapa halaman agar pengguna mudah menelusuri konten. Di W3.CSS pola ini dibangun dari .w3-bar sebagai pembungkus dan .w3-bar-item…
47
W3.CSS Progress Bars
Progress bar menunjukkan penyelesaian tugas seperti unggahan atau skor. Di W3.CSS polanya sederhana: sebuah wadah berlatar terang, lalu bar isi berwarna yang lebarnya diatur…
48
W3.CSS Slideshow
Slideshow menampilkan sekumpulan gambar atau teks secara bergantian dalam satu bingkai. Kuncinya adalah .w3-display-container sebagai wadah posisi absolut, lalu tiap slide…
49
W3.CSS Modal
Modal adalah jendela dialog yang melayang di atas halaman dan menuntut perhatian pengguna. Struktur W3.CSS terdiri dari .w3-modal sebagai lapisan luar dan .w3-modal-content…
50
W3.CSS Tooltips
Tooltip adalah kotak keterangan kecil yang muncul ketika pengguna menempelkan kursor pada suatu elemen. W3.CSS mewujudkannya dengan kelas .w3-tooltip pada pembungkus, sedangkan…
51
W3.CSS Code
Halaman Code membahas cara menampilkan potongan kode program di halaman web agar mudah dibaca. W3.CSS menyediakan kelas .w3-code untuk mempercantik blok kode, dipadukan dengan…
52
W3.CSS Filters
Filter CSS mengubah tampilan gambar atau elemen secara visual, seperti menghapus warna atau menambah buram. Properti filter menerima fungsi seperti grayscale(), blur(),…
53
W3.CSS Material
Gaya material meniru lembaran fisik yang bertumpuk dengan bayangan sebagai indikator ketinggian. W3.CSS mendukungnya lewat kelas kartu seperti .w3-card-4 beserta efek hover…
54
W3.CSS Case
Halaman Case membahas pengaturan huruf besar dan kecil pada teks. CSS menyediakan properti text-transform dengan nilai uppercase, lowercase, dan capitalize untuk mengubah…
02
W3.CSS Colors
6 lesson
01
W3.CSS Color Classes
W3.CSS menghadirkan kelas warna siap pakai seperti .w3-red, .w3-blue, dan .w3-green untuk latar elemen. Dengan awalan berbeda kamu bisa mengatur warna teks (.w3-text-*), latar…
02
W3.CSS Color Fashion
Warna menentukan kesan sebuah situs fashion, mulai dari elegan sampai kasual. Palet netral seperti hitam, putih, abu, dan nude sering dijadikan dasar, lalu satu warna aksen untuk…
03
W3.CSS Color Libraries
Pustaka warna adalah kumpulan palet siap pakai yang bisa langsung dipakai atau dijadikan inspirasi. W3.CSS sendiri menyediakan sekumpulan kelas warna, sementara pustaka eksternal…
04
W3.CSS Color Schemes
Skema warna adalah kombinasi warna yang dipakai bersama agar halaman terasa utuh. Skema terang dan gelap punya pertimbangan kenyamanan berbeda, sementara aturan 60-30-10 membantu…
05
W3.CSS Color Themes
Tema adalah sistem warna terpadu yang bisa diterapkan sekaligus ke banyak komponen, termasuk varian terang dan gelap. Pendekatan paling praktis adalah mendeklarasikan warna…
06
W3.CSS Color Generator
Generator warna membantu membuat palet dalam hitungan detik berdasarkan aturan harmoni seperti komplementer dan analog. Hasilnya berupa kode siap pakai berformat hex, RGB, atau…
03
Web Building
9 lesson
01
Web Intro
Pengantar web menjelaskan bagaimana halaman sampai tampil di layar pengguna. Browser mengirim permintaan HTTP ke server, server membalas dengan HTML, CSS, dan JavaScript, lalu…
02
Web HTML
HTML adalah bahasa markup yang menyusun struktur sebuah halaman web. Sebuah elemen terdiri dari tag pembuka, isi, dan tag penutup, lengkap dengan atribut seperti class, id, dan…
03
Web CSS
CSS mengatur tampilan halaman mulai dari warna, huruf, jarak, hingga tata letak. Kode CSS ditulis dengan pasangan selector dan blok deklarasi berisi properti beserta nilainya.…
04
Web JavaScript
JavaScript membuat halaman menjadi interaktif: merespons klik, memvalidasi isian, dan memperbarui tampilan tanpa memuat ulang. Kamu bekerja dengan variabel, fungsi, serta DOM…
05
Web Layout
Tata letak web menyusun konten agar rapi di berbagai ukuran layar. W3.CSS memakai pola baris dan kolom: .w3-row sebagai baris dan .w3-col beserta kelas lebar responsif untuk…
06
Web Band
Proyek Band menggabungkan pelajaran dasar menjadi sebuah situs grup musik yang lengkap. Halaman ini memakai gambar besar sebagai pembuka, navigasi horizontal, lalu bagian…
07
Web Catering
Proyek Catering mengajarkan menyusun halaman layanan jasa katering yang meyakinkan pelanggan. Isinya berupa daftar paket beserta harga, galeri hidangan, testimoni, dan formulir…
08
Web Restaurant
Proyek Restaurant membangun halaman restoran atau kedai pizza yang menggugah selera. Fokusnya ada pada menu yang terkelompok, informasi lokasi dan jam buka, serta tombol…
09
Web Architect
Proyek Architect adalah portofolio firma arsitektur yang mengandalkan visual kuat dan tipografi bersih. Halaman ini menyusun galeri proyek, filosofi desain, serta studi kasus…
04
W3.CSS Examples
6 lesson
01
W3.CSS Kitchen Sink
Kitchen Sink adalah halaman demo yang menampilkan hampir seluruh kelas W3.CSS dalam satu tempat. Istilahnya berasal dari frasa everything but the kitchen sink, artinya segalanya…
02
W3.CSS Examples
Halaman Examples berisi kumpulan contoh kode kecil yang mendemonstrasikan satu fitur W3.CSS secara langsung. Cara belajar paling efektif adalah menjalankan contoh, mengubahnya…
03
W3.CSS Demos
Halaman Demos menyediakan komponen W3.CSS yang bisa langsung dicoba secara interaktif. Kamu bisa melihat hasil visual sebuah kelas, membuka Developer Tools, lalu memodifikasi…
04
W3.CSS Templates
Template W3.CSS adalah rangka halaman lengkap seperti portofolio, agensi, atau restoran yang tinggal disesuaikan. Template mempercepat memulai proyek karena struktur header,…
05
W3.CSS Fonts
W3.CSS memakai Google Fonts agar halaman memiliki huruf yang konsisten dan menarik. Caranya, tambahkan tautan stylesheet Google Fonts di <head>, lalu tentukan font-family pada…
06
W3.CSS Icons
Ikon menambah petunjuk visual yang mempercepat pemahaman antarmuka. W3.CSS umumnya memakai Font Awesome yang dimuat melalui CDN, lalu ikon dipanggil dengan kelas seperti fa…