Lewati ke konten utama
pelatihan
.org
Belajar. Praktik. Berkembang.
Kategori
ID
Masuk
Daftar
Menu
Kurikulum How To: 13 Bab, 328 Lesson — pelatihan.org
Beranda
/
Katalog
/
How To
/
Kurikulum
Kurikulum
Kurikulum How To
Belajar How To online lewat 328 lesson terstruktur, contoh kode, dan 1640 soal kuis.
328 lesson
13 bab
1640 soal
Ringkasan dan poin kunci bisa dilihat gratis. Materi lengkap, contoh kode, dan kuis memerlukan langganan.
01
HOW TO
1 lesson
01
HowTo Home
Pelajaran pengantar ini memperkenalkan panduan praktis 'How To' untuk pengembangan web front-end. Modul ini menyediakan resep kode siap pakai (ready-to-use snippets) untuk…
02
Menus
55 lesson
01
Icon Bar
Pelajaran ini mengulas cara membuat bilah ikon (Icon Bar) menggunakan HTML dan CSS. Icon Bar menyajikan daftar ikon navigasi horizontal atau vertikal yang ringkas, sering…
02
Menu Icon
Pelajaran ini mengulas pembuatan ikon menu burger (Hamburger Menu Icon) animasi murni dengan CSS. Komponen ini merupakan standar de-facto tombol pemicu menu navigasi di perangkat…
03
Accordion
Pelajaran ini mengulas pembuatan komponen Accordion (panel lipat buka-tutup) menggunakan HTML, CSS, dan JavaScript. Accordion sangat efektif untuk menghemat ruang layar pada…
04
Tabs
Pelajaran ini mengulas pembuatan navigasi Tab (Tabbed Content) interaktif menggunakan HTML, CSS, dan JavaScript. Navigasi tab memungkinkan pengembang mengelompokkan beberapa…
05
Vertical Tabs
Pelajaran ini mengulas perancangan Tab Vertikal (Vertical Tabs). Berbeda dengan tab konvensional yang berderet horizontal di atas, tab vertikal menempatkan bilah menu di sebelah…
06
Tab Headers
Pelajaran ini mengulas variasi Tab Headers di mana warna latar belakang bilah navigasi tab dan panel konten disinkronkan secara tematik. Setiap tab dapat menampilkan aksen warna…
07
Full Page Tabs
Pelajaran ini mengulas pembuatan Tab Satu Halaman Penuh (Full Page Tabs). Komponen ini mengubah seluruh tampilan layar menjadi satu kanvas konten penuh saat tombol tab dipilih,…
08
Hover Tabs
Pelajaran ini mengulas pembuatan Hover Tabs di mana konten tab berganti secara otomatis hanya dengan mendekatkan kursor mouse (hover/mouseover) ke tombol tab tanpa memerlukan…
09
Top Navigation
Pelajaran ini mengulas pembuatan Bilah Navigasi Atas (Top Navigation Bar) standar menggunakan HTML dan CSS. Topnav merupakan salah satu komponen paling esensial dalam website…
10
Responsive Topnav
Pelajaran ini mengulas pembuatan Bilah Navigasi Atas Responsif (Responsive Topnav). Di layar desktop, menu tampil berjajar mendatar. Ketika layar menyempit (layar smartphone),…
11
Split Navigation
Pelajaran ini mengulas pembuatan Bilah Navigasi Terpisah (Split Navigation Bar). Pada tata letak ini, tautan menu utama diposisikan di sisi kiri sedangkan tautan aksi pengguna…
12
Navbar with Icons
Pelajaran ini mengulas penambahan ikon visual di samping teks pada Bilah Navigasi (Navbar with Icons). Menggabungkan ikon grafis dengan label teks mempercepat identifikasi menu…
13
Search Menu
Pelajaran ini mengulas pembuatan Menu Navigasi dengan Penyaringan Pencarian Cepat (Search Menu Filter) menggunakan JavaScript. Fitur ini memungkinkan pengguna mengetik kata kunci…
14
Search Bar
Pelajaran ini mengulas pembuatan Bilah Pencarian (Search Bar) responsif yang diletakkan di dalam bilah navigasi menggunakan HTML dan CSS murni. Desain ini menggabungkan input…
15
Fixed Sidebar
Pelajaran ini mengulas pembuatan Bilah Samping Tetap (Fixed Sidebar). Komponen sidebar ini menempel permanen di sisi kiri layar dengan tinggi 100% viewport sehingga tetap…
16
Side Navigation
Pelajaran ini mengulas pembuatan Bilah Navigasi Samping Interaktif (Side Navigation / Sidenav) yang dapat dibuka dan ditutup menggunakan animasi geser JavaScript. Saat tombol…
17
Responsive Sidebar
Pelajaran ini mengulas pembuatan Bilah Samping Responsif (Responsive Sidebar). Komponen ini tampil sebagai bilah samping tetap vertikal pada layar desktop lebar, dan otomatis…
18
Fullscreen Navigation
Pelajaran ini mengulas pembuatan Navigasi Lapisan Penuh (Fullscreen Overlay Navigation). Saat tombol menu diaktifkan, sebuah lapisan tirai menu transparan atau solid membentang…
19
Off-Canvas Menu
Pelajaran ini mengulas pembuatan Menu Off-Canvas (Off-Canvas Sidebar Push Content). Berbeda dengan overlay biasa yang sekadar menimpa di atas konten, menu off-canvas secara…
20
Hover Sidenav Buttons
Pelajaran ini mengulas pembuatan Tombol Bilah Samping Mengambang (Hover Sidenav Buttons). Kumpulan tombol navigasi disembunyikan sebagian di luar batas tepi kiri layar dan akan…
21
Sidebar with Icons
Pelajaran ini mengulas pembuatan Bilah Samping dengan Ikon (Sidebar with Icons). Desain ini menyajikan bilah navigasi vertikal ramping di mana setiap item menu diwakili oleh ikon…
22
Horizontal Scroll Menu
Pelajaran ini mengulas pembuatan Menu Gulir Horizontal (Horizontal Scroll Menu). Komponen ini sangat populer di aplikasi seluler dan situs berita di mana daftar kategori navigasi…
23
Vertical Menu
Pelajaran ini mengulas pembuatan Menu Vertikal (Vertical Menu) menggunakan HTML dan CSS murni. Komponen ini menyusun deretan tombol navigasi bertumpuk dari atas ke bawah dalam…
24
Bottom Navigation
Pelajaran ini mengulas pembuatan Bilah Navigasi Bawah (Bottom Navigation Bar). Komponen ini dikunci permanen di bagian bawah layar menggunakan CSS position: fixed, menjadikannya…
25
Responsive Bottom Nav
Pelajaran ini mengulas pembuatan Bilah Navigasi Bawah Responsif (Responsive Bottom Navigation). Komponen ini menampilkan bilah menu di bagian bawah layar saat dibuka di perangkat…
26
Bottom Border Nav Links
Pelajaran ini mengulas efek garis batas bawah pada tautan navigasi (Bottom Border Nav Links). Desain minimalis dan modern ini tidak menggunakan warna blok latar belakang penuh…
27
Right Aligned Menu Links
Pelajaran ini mengulas teknik penataan Tautan Rata Kanan pada Bilah Navigasi Atas (Right Aligned Menu Links). Menempatkan tautan tertentu seperti tombol Masuk/Daftar atau Ikon…
28
Centered Menu Link
Pelajaran ini mengulas pembuatan Menu Navigasi dengan Tautan Tengah (Centered Menu Link / Centered Navbar). Pola ini sering digunakan untuk meletakkan logo brand atau tautan…
29
Equal Width Menu Links
Pelajaran ini mengulas pembuatan Bilah Navigasi dengan Lebar Tautan Rata Sempurna (Equal Width Menu Links). Seluruh tombol menu membagi lebar total bilah navbar secara merata dan…
30
Fixed Menu
Pelajaran ini mengulas pembuatan Bilah Menu Tetap di Atas (Fixed Menu / Fixed Top Navbar). Bilah navigasi dikunci pada koordinat paling atas layar sehingga tidak bergeser saat…
31
Slide Down Bar on Scroll
Pelajaran ini mengulas pembuatan Bilah Navigasi yang Meluncur Turun Saat Digulir (Slide Down Bar on Scroll). Komponen ini tersembunyi secara default saat pengguna berada di…
32
Hide Navbar on Scroll
Pelajaran ini mengulas pembuatan Bilah Navigasi Cerdas yang Bersembunyi Saat Digulir ke Bawah (Hide Navbar on Scroll). Pola cerdas ini memaksimalkan area pandang konten saat…
33
Shrink Navbar on Scroll
Pelajaran ini mengulas pembuatan Bilah Navigasi yang Menyusut Saat Digulir (Shrink Navbar on Scroll). Saat berada di bagian paling atas halaman, navbar tampil luas dengan logo…
34
Sticky Navbar
Pelajaran ini mengulas pembuatan Bilah Navigasi Lengket (Sticky Navbar) menggunakan JavaScript dan CSS. Navbar awalnya berada di bawah banner hero header, lalu saat pengguna…
35
Navbar on Image
Pelajaran ini mengulas pembuatan Bilah Navigasi Transparan di Atas Gambar Latar (Navbar on Image / Hero Navbar). Pola desain visual yang memukau ini menempatkan bilah navigasi…
36
Hover Dropdowns
Pelajaran ini mengulas pembuatan Menu Tarik Turun Berbasis Hover (Hover Dropdown Menu) menggunakan HTML dan CSS murni tanpa memerlukan JavaScript. Menu ini memunculkan kotak…
37
Click Dropdowns
Pelajaran ini mengulas pembuatan Menu Tarik Turun Berbasis Klik (Click Dropdown Menu) menggunakan JavaScript. Berbeda dengan menu hover yang sensitif terhadap gerakan mouse,…
38
Cascading Dropdown
Pelajaran ini mengulas pembuatan Menu Tarik Turun Bertingkat (Cascading Dropdown / Dependent Dropdown). Pilihan pada dropdown kedua (misal: Kota) berubah secara dinamis…
39
Dropdown in Topnav
Pelajaran ini mengulas integrasi Menu Tarik Turun di Dalam Bilah Navigasi Atas (Dropdown in Topnav). Komponen ini menggabungkan tautan standar horizontal dengan menu sub-kategori…
40
Dropdown in Sidenav
Pelajaran ini mengulas pembuatan Menu Tarik Turun di Dalam Bilah Samping (Dropdown in Sidenav). Komponen ini memungkinkan pengelompokan menu bersarang (nested menu) di dalam…
41
Resp Navbar Dropdown
Pelajaran ini mengulas pembuatan Bilah Navigasi Responsif Lengkap dengan Menu Tarik Turun (Responsive Navbar with Dropdown). Menggabungkan sistem menu tarik-turun desktop dengan…
42
Subnavigation Menu
Pelajaran ini mengulas pembuatan Bilah Sub-Navigasi (Subnavigation Menu). Pola ini menghadirkan bilah navigasi sekunder yang meluncur atau muncul tepat di bawah bilah navigasi…
43
Dropup
Pelajaran ini mengulas pembuatan Menu Tarik ke Atas (Dropup Menu). Kebalikan dari dropdown konvensional yang membuka opsi ke bawah, menu dropup membuka kotak daftar pilihan…
44
Mega Menu
Pelajaran ini mengulas pembuatan Menu Raksasa (Mega Menu). Mega menu adalah panel navigasi dropdown bertingkat yang membentang selebar halaman penuh dengan beberapa kolom…
45
Mobile Menu
Pelajaran ini mengulas pembuatan Menu Navigasi Seluler Lengkap (Mobile Navigation Menu). Pola ini berfokus pada pengalaman navigasi murni smartphone dengan tombol menu burger…
46
Curtain Menu
Pelajaran ini mengulas pembuatan Menu Tirai Penuh (Curtain Menu / Expanding Curtain Navigation). Menu ini membuka lapisan navigasi layar penuh dengan animasi dramatis seolah…
47
Collapsed Sidebar
Sidebar yang dapat diciutkan adalah panel navigasi di sisi halaman yang bisa disembunyikan saat tidak dipakai. Pola ini menjaga area konten tetap luas, terutama pada layar kecil.…
48
Collapsed Sidepanel
Sidepanel adalah panel yang meluncur dari sisi layar dan menutupi sebagian konten, bukan menggeser tata letak halaman. Panel seperti ini cocok untuk menu tambahan, detail produk,…
49
Pagination
Pagination membagi daftar panjang menjadi beberapa halaman bernomor agar konten lebih mudah dibaca dan halaman tidak terlalu berat. Komponen ini biasanya berisi tombol…
50
Breadcrumbs
Breadcrumbs adalah jejak navigasi yang menunjukkan posisi pengguna dalam hierarki situs, misalnya Beranda > Produk > Sepatu. Komponen ini membantu pengunjung kembali ke level…
51
Button Group
Button group menggabungkan beberapa tombol terkait menjadi satu deretan horizontal yang rapi. Dengan menghapus jarak ganda dan mengatur sudut hanya pada ujung grup, tombol…
52
Vertical Button Group
Vertical button group menumpuk tombol terkait dari atas ke bawah, cocok untuk sidebar alat atau menu tindakan yang sempit. Setiap tombol biasanya mengisi lebar kontainer agar…
53
Sticky Social Bar
Sticky social bar adalah deretan ikon media sosial yang tetap terlihat di sisi layar saat pengguna menggulir halaman. Karena posisinya fixed, bar tidak ikut bergerak bersama…
54
Pill Navigation
Pill navigation menampilkan tautan menu sebagai kapsul membulat yang saling berjajar. Bentuk ini memberi kesan modern dan membuat kategori mudah dipindai. Tautan aktif biasanya…
55
Responsive Header
Responsive header adalah bagian atas halaman yang menyesuaikan susunan logo, menu, dan tombol aksi dengan lebar layar. Pada desktop, elemen biasanya berjajar horizontal; pada…
03
Images
41 lesson
01
Slideshow
Slideshow menampilkan satu slide dari beberapa pilihan dan memungkinkan pengguna berpindah dengan tombol sebelumnya atau berikutnya. JavaScript menyimpan indeks slide aktif, lalu…
02
Slideshow Gallery
Slideshow gallery memadukan gambar utama yang besar dengan deretan thumbnail di bawahnya. Ketika thumbnail diklik, gambar utama berganti dan thumbnail tersebut ditandai aktif.…
03
Modal Images
Modal image memperbesar gambar di atas lapisan gelap saat thumbnail diklik, tanpa berpindah halaman. Pengguna dapat menutup tampilan besar lewat tombol silang atau klik area…
04
Lightbox
Lightbox adalah tampilan overlay untuk melihat gambar atau media dalam ukuran besar, sering dilengkapi tombol prev, next, dan caption. Berbeda dari modal biasa, lightbox biasanya…
05
Responsive Image Grid
Responsive image grid menata banyak gambar dalam kolom yang menyesuaikan lebar layar. CSS Grid dengan repeat(auto-fit, minmax(...)) dapat menambah atau mengurangi kolom secara…
06
Image Grid
Image grid menyusun beberapa gambar dalam baris dan kolom yang teratur sehingga galeri terlihat rapi. CSS Grid memudahkan penentuan jumlah kolom, jarak, dan ukuran gambar. Efek…
07
Image Gallery
Image gallery menampilkan kumpulan foto dalam tata letak responsif lengkap dengan caption. Overlay gradien di bagian bawah membuat teks tetap terbaca tanpa menutupi seluruh…
08
Scrollable Image Gallery
Scrollable image gallery menampilkan gambar dalam satu baris horizontal yang dapat digeser. overflow-x: auto memunculkan scrollbar hanya saat konten melebihi lebar kontainer.…
09
Tab Gallery
Tab gallery membagi gambar ke dalam beberapa kategori yang dapat dipilih melalui tombol tab. Saat tab diklik, panel yang sesuai ditampilkan dan panel lain disembunyikan. Pola ini…
10
Image Overlay Fade
Image overlay fade menampilkan lapisan teks di atas gambar yang muncul perlahan saat kursor diarahkan. Overlay ditempatkan absolut di dalam kontainer gambar, lalu opacity-nya…
11
Image Overlay Slide
Image overlay slide memunculkan panel teks dengan cara menggesernya dari bawah gambar. Panel dimulai di luar area terlihat menggunakan transform translateY(100%), lalu bergerak…
12
Image Overlay Zoom
Image overlay zoom menggabungkan perbesaran gambar dengan munculnya lapisan informasi saat hover. Gambar diperbesar memakai transform scale, sementara overlay muncul lewat…
13
Image Overlay Title
Image overlay title menambahkan bilah judul di bagian bawah gambar agar konteks foto langsung terlihat. Judul biasanya diletakkan di atas gradien gelap supaya tetap terbaca pada…
14
Image Overlay Icon
Image overlay icon menampilkan ikon seperti kaca pembesar atau tautan di tengah gambar saat hover. Ikon diposisikan absolut dan dipusatkan dengan kombinasi top, left, serta…
15
Image Effects
Image effects memanfaatkan properti CSS filter untuk mengubah tampilan gambar tanpa mengedit file aslinya. Efek seperti grayscale, sepia, brightness, contrast, dan blur dapat…
16
Black and White Image
Black and white image dibuat dengan filter grayscale, sehingga foto tampil tanpa warna. Efek ini sering dipakai untuk memberi kesan klasik atau menyorot komposisi. Warna asli…
17
Image Text
Image text menempatkan tulisan langsung di atas gambar, biasanya sebagai judul atau ajakan bertindak. Teks diposisikan absolut di tengah kontainer gambar dan diberi lapisan gelap…
18
Image Text Blocks
Image text blocks menempatkan kotak teks padat atau semi-transparan di atas sebagian gambar. Kotak ini memberi ruang baca yang jelas tanpa harus menutupi seluruh foto. Ukuran,…
19
Transparent Image Text
Transparent image text memakai kotak teks dengan latar semi-transparan di atas foto, sering ditambah efek blur kaca. Alpha pada warna latar mengatur seberapa besar gambar masih…
20
Full Page Image
Full page image menjadikan sebuah gambar sebagai latar yang memenuhi seluruh tinggi layar. Gambar diatur dengan background-size: cover dan background-position: center agar tetap…
21
Form on Image
Form on image menempatkan formulir di atas gambar latar, biasanya di tengah layar. Panel formulir diberi latar terang agar input tetap jelas, sementara gambar di belakang diberi…
22
Hero Image
Hero image adalah banner besar di bagian atas halaman yang memuat pesan utama, deskripsi singkat, dan tombol aksi. Gambar latar biasanya dipadukan dengan overlay agar teks tetap…
23
Blur Background Image
Blur background image mengaburkan gambar latar agar teks di atasnya lebih menonjol. Efek blur sebaiknya diterapkan pada lapisan terpisah, bukan pada kontainer teks, supaya…
24
Change Bg on Scroll
Change background on scroll membuat header atau elemen berubah warna saat halaman digulir melewati batas tertentu. JavaScript membaca posisi scroll, lalu menambah atau menghapus…
25
Side-by-Side Images
Side-by-side images menampilkan dua gambar berdampingan untuk perbandingan atau pasangan visual. Flexbox dengan flex: 1 membagi ruang secara merata, sedangkan gap menjaga jarak.…
26
Rounded Images
Rounded images dibuat dengan border-radius untuk melunakkan sudut atau membentuk lingkaran. Sudut membulat cukup memakai nilai piksel atau persen, sedangkan lingkaran sempurna…
27
Avatar Images
Avatar image adalah foto profil berukuran kecil yang biasanya ditampilkan berbentuk lingkaran. Ukuran lebar dan tinggi dibuat sama, lalu border-radius 50% membentuk lingkaran.…
28
Responsive Images
Responsive image menyesuaikan ukurannya dengan lebar kontainer agar tidak meluber di layar kecil. Aturan dasar max-width: 100% dan height: auto sudah membuat gambar berskala…
29
Center Images
Center images membahas beberapa cara memusatkan gambar, baik secara horizontal maupun vertikal. Untuk gambar block, margin kiri-kanan auto adalah cara klasik yang sederhana.…
30
Thumbnails
Thumbnail adalah versi kecil dari gambar yang berfungsi sebagai pratinjau dan biasanya dapat diklik untuk membuka versi besar. Bingkai tipis dan padding membuat thumbnail…
31
Border Around Image
Border around image memberi bingkai di sekeliling gambar untuk mempertegas batas visual. Border dapat dipadukan dengan padding dan background sehingga terlihat seperti pigura.…
32
Meet the Team
Meet the team adalah bagian halaman yang memperkenalkan anggota tim melalui kartu berisi foto, nama, peran, dan tautan kontak. Tata letak grid responsif membuat kartu tersusun…
33
Sticky Image
Sticky image membuat gambar tetap terlihat di layar saat teks di sebelahnya digulir. position: sticky bekerja di dalam batas induknya, sehingga gambar berhenti menempel ketika…
34
Flip an Image
Flip an image membalik gambar secara horizontal atau vertikal menggunakan transformasi CSS. scaleX(-1) menghasilkan cermin kiri-kanan, sedangkan scaleY(-1) membalik atas-bawah.…
35
Shake an Image
Shake image adalah animasi getar yang memberi perhatian pada gambar atau tombol tertentu. Animasi dibuat dengan @keyframes yang menggeser elemen ke kiri dan kanan secara…
36
Portfolio Gallery
Portfolio gallery menampilkan karya dalam grid kartu yang rapi, lengkap dengan judul dan kategori. Setiap kartu biasanya berupa tautan ke detail proyek dan memiliki overlay saat…
37
Portfolio with Filtering
Portfolio with filtering menambahkan tombol kategori untuk menampilkan hanya proyek tertentu. Setiap tombol menyimpan filter pada atribut data-filter, sedangkan setiap proyek…
38
Image Zoom
Image zoom memungkinkan pengguna melihat detail gambar dengan memperbesarnya saat hover atau klik. Efek dasar memakai transform scale di dalam kontainer ber-overflow hidden.…
39
Image Magnifier Glass
Image magnifier glass adalah efek kaca pembesar yang memperbesar bagian gambar saat kursor digerakkan di atasnya. Efek ini dibuat dengan menumpuk sebuah lensa di atas gambar,…
40
Image Comparison Slider
Image comparison slider memungkinkan pengguna membandingkan dua gambar dengan menggeser sebuah pengatur ke kiri dan ke kanan. Satu gambar ditampilkan penuh sebagai dasar,…
41
Favicon
Favicon adalah ikon kecil yang mewakili sebuah situs dan muncul di tab browser, bookmark, serta daftar riwayat. Ikon ini dipasang di dalam elemen head melalui tag link dengan…
04
Buttons
19 lesson
01
Alert Buttons
Alert button adalah tombol dengan warna latar mencolok yang dipakai untuk menarik perhatian pada aksi penting, seperti menghapus data atau memberi peringatan. Warna saja tidak…
02
Outline Buttons
Outline button adalah tombol dengan latar transparan dan garis tepi berwarna. Gaya ini cocok untuk aksi sekunder karena terlihat lebih ringan daripada tombol berisi penuh. Saat…
03
Split Buttons
Split button menggabungkan satu aksi utama dengan menu panah yang berisi aksi tambahan. Bagian kiri langsung menjalankan perintah utama, sedangkan bagian kanan membuka daftar…
04
Animated Buttons
Animated button memberi umpan balik visual saat pengguna mengarahkan kursor atau menekan tombol. Animasi dapat berupa perubahan warna, panah yang muncul, atau efek tertekan yang…
05
Fading Buttons
Fading button adalah tombol yang tingkat transparansinya berubah saat kursor mendekat atau menjauh. Efek ini dibuat dengan properti opacity dan transition, sehingga perubahan…
06
Button on Image
Button on image adalah tombol yang diletakkan di atas sebuah gambar, biasanya di tengah atau di sudut. Caranya, gambar dan tombol dibungkus wadah berposition: relative, lalu…
07
Social Media Buttons
Social media button adalah tautan bergaya tombol yang mengarah ke profil atau halaman berbagi di platform sosial. Tombol biasanya memadukan ikon, teks singkat, dan warna khas…
08
Read More Read Less
Read more read less adalah pola untuk menyembunyikan sebagian teks panjang dan menampilkannya saat pengguna menekan tombol. Setelah terbuka, tombol berubah menjadi read less…
09
Loading Buttons
Loading button menampilkan indikator proses, biasanya spinner, selama aksi sedang berjalan. Tombol juga dinonaktifkan sementara agar pengguna tidak mengirim permintaan yang sama…
10
Download Buttons
Download button adalah tautan yang diberi gaya tombol untuk mengunduh berkas. Atribut download pada anchor meminta browser menyimpan berkas alih-alih membukanya di tab. Nama…
11
Pill Buttons
Pill button adalah tombol dengan ujung sepenuhnya membulat sehingga bentuknya menyerupai kapsul. Efek ini dicapai dengan border-radius yang sangat besar, misalnya 999px. Pill…
12
Notification Button
Notification button adalah tombol yang dilengkapi lencana kecil berisi jumlah notifikasi. Lencana ditempatkan menumpuk di sudut tombol menggunakan position: absolute. Karena…
13
Icon Buttons
Icon button adalah tombol yang hanya menampilkan ikon tanpa teks yang terlihat. Karena maknanya tidak selalu jelas, tombol seperti ini wajib memiliki nama aksesibel melalui…
14
Next/prev Buttons
Next/prev button adalah sepasang tautan untuk berpindah ke halaman sebelumnya atau berikutnya. Keduanya biasanya diletakkan di kiri dan kanan dengan Flexbox agar mudah ditemukan.…
15
More Button in Nav
More button di dalam navigasi menyembunyikan tautan tambahan di balik tombol More agar bilah navigasi tetap ringkas. Saat tombol diklik, sebuah menu dropdown muncul berisi…
16
Block Buttons
Block button adalah tombol yang memenuhi seluruh lebar kontainernya dan berdiri sendiri dalam satu baris. Gaya ini dibuat dengan display: block dan width: 100%. Block button…
17
Text Buttons
Text button adalah tombol yang tampil seperti teks biasa tanpa latar atau border. Gaya ini dibuat dengan menghapus background dan border, lalu memberi warna serta padding…
18
Round Buttons
Round button adalah tombol berbentuk lingkaran, biasanya berisi ikon atau teks sangat pendek. Bentuk ini dibuat dengan border-radius: 50% serta lebar dan tinggi yang sama. Round…
19
Scroll To Top Button
Scroll to top button adalah tombol yang muncul setelah pengguna menggulir cukup jauh dan membawa mereka kembali ke atas halaman. Tombol biasanya diposisikan fixed di sudut kanan…
05
Forms
34 lesson
01
Login Form
Login form adalah formulir untuk memasukkan nama pengguna dan kata sandi. Formulir biasanya ditampilkan dalam kartu terpusat dengan label yang jelas dan tombol submit. Data login…
02
Signup Form
Signup form adalah formulir pendaftaran yang mengumpulkan data seperti nama, email, dan kata sandi. Tata letak dua kolom dapat memperpendek formulir, tetapi pada layar kecil…
03
Checkout Form
Checkout form adalah formulir berisi alamat penagihan, alamat pengiriman, dan metode pembayaran. Formulir seperti ini biasanya dibagi menjadi beberapa bagian dengan fieldset agar…
04
Contact Form
Contact form adalah formulir untuk mengirim pesan kepada pemilik situs. Formulir biasanya berisi nama, email, subjek, dan area pesan yang lebih besar. Supaya pesan benar-benar…
05
Social Login Form
Social login form memungkinkan pengguna masuk melalui akun platform lain seperti Google atau GitHub. Alurnya menggunakan protokol OAuth: situs mengarahkan pengguna ke penyedia…
06
Register Form
Register form adalah formulir pembuatan akun dengan username, email, dan kata sandi. Agar kualitas data terjaga, kolom username dapat memakai pola karakter tertentu dan kata…
07
Form with Icons
Form with icons menambahkan ikon di dalam input untuk memberi petunjuk visual tentang jenis data yang diminta. Ikon diposisikan absolut di dalam pembungkus relative, sedangkan…
08
Newsletter
Newsletter form adalah formulir singkat untuk mendaftarkan alamat email ke buletin atau kabar berkala. Biasanya hanya terdiri dari satu input email dan satu tombol berlangganan…
09
Stacked Form
Stacked form adalah formulir yang menempatkan label di atas setiap input dan menyusun semua field secara vertikal. Tata letak ini mudah dipindai, ramah layar kecil, dan memberi…
10
Responsive Form
Responsive form adalah formulir yang tetap nyaman dipakai di layar besar maupun kecil. Caranya adalah menggunakan lebar fleksibel, box-sizing, media query, dan ukuran font yang…
11
Popup Form
Popup form adalah formulir yang muncul di atas halaman dalam lapisan modal. Lapisan latar menutupi konten lain, sementara formulir tampil terpusat agar perhatian pengguna tertuju…
12
Inline Form
Inline form menempatkan input dan tombol dalam satu baris horizontal. Pola ini cocok untuk formulir singkat seperti pencarian atau pendaftaran newsletter. Pada layar sempit,…
13
Clear Input Field
Clear input field adalah tombol kecil untuk mengosongkan isi sebuah input dengan cepat. Tombol biasanya muncul hanya ketika input berisi teks, lalu menghapus nilai dan…
14
Hide Number Arrows
Hide number arrows adalah teknik CSS untuk menyembunyikan tombol panah kecil pada input type=number. Panah tersebut adalah spinner bawaan browser yang terkadang mengganggu…
15
Copy Text to Clipboard
Copy text to clipboard adalah fitur untuk menyalin teks ke papan klip dengan satu klik. API modern navigator.clipboard.writeText mengembalikan Promise sehingga keberhasilan atau…
16
Animated Search
Animated search adalah kolom pencarian yang melebar saat difokuskan atau diklik. Efeknya dibuat dengan transition pada properti width, sehingga perubahan ukuran terasa halus.…
17
Search Button
Search button adalah tombol yang menjalankan pencarian dari sebuah input. Input dan tombol biasanya berada dalam satu form, sehingga menekan Enter juga mengirim pencarian. Untuk…
18
Fullscreen Search
Fullscreen search menampilkan kolom pencarian besar yang menutupi seluruh layar. Lapisan ini dibuka dari tombol pencarian dan ditutup dengan tombol silang atau Escape. Karena…
19
Input Field in Navbar
Input field in navbar menempatkan kolom pencarian atau input lain langsung di dalam bilah navigasi. Flexbox membantu menyusun logo, tautan, input, dan tombol dalam satu baris…
20
Login Form in Navbar
Login form in navbar menempatkan formulir masuk di dalam dropdown pada bilah navigasi. Tombol login membuka panel kecil berisi email dan kata sandi tanpa meninggalkan halaman.…
21
Custom Checkbox/Radio
Custom checkbox dan radio mengganti tampilan kotak atau lingkaran bawaan browser dengan desain sendiri. Input asli tetap disimpan agar aksesibilitas dan perilaku form tidak…
22
Custom Select
Custom select membuat dropdown pilihan memiliki tampilan yang sesuai desain situs. Cara paling sederhana adalah mempertahankan elemen select asli, mematikan tampilan bawaannya…
23
Toggle Switch
Toggle switch adalah kontrol on/off yang dibuat dari checkbox dan elemen slider. Checkbox menyimpan status sebenarnya, sementara slider menampilkan posisi knob dan warna latar.…
24
Check Checkbox
Check checkbox adalah pola untuk menampilkan atau menyembunyikan konten berdasarkan status checkbox. JavaScript membaca properti checked dan mengubah tampilan elemen lain,…
25
Detect Caps Lock
Detect Caps Lock adalah fitur untuk memberi peringatan saat pengguna mengetik dengan Caps Lock aktif, terutama pada kolom kata sandi. JavaScript memeriksa keadaan tombol melalui…
26
Trigger Button on Enter
Pelajaran ini membahas cara membuat tombol ikut terpicu saat pengguna menekan tombol Enter di dalam kolom input. Pola ini membuat pencarian atau konfirmasi terasa lebih cepat…
27
Password Validation
Pelajaran ini menunjukkan cara memeriksa kekuatan password di sisi klien sebelum formulir dikirim. Pemeriksaan biasanya mencakup panjang minimum, huruf besar, huruf kecil, angka,…
28
Toggle Password Visibility
Pelajaran ini membahas tombol untuk menampilkan atau menyembunyikan password yang sedang diketik. Implementasinya cukup mengubah properti type pada elemen input antara password…
29
Multiple Step Form
Pelajaran ini menjelaskan cara memecah formulir panjang menjadi beberapa langkah atau wizard. Setiap langkah ditampilkan satu per satu, pengguna dapat maju setelah data pada…
30
Autocomplete
Pelajaran ini membahas daftar saran otomatis yang muncul saat pengguna mengetik di kolom pencarian. Daftar saran disaring dari sekumpulan data berdasarkan teks yang diketik, lalu…
31
Turn off autocomplete
Pelajaran ini menjelaskan atribut autocomplete pada elemen form dan input. Nilai off meminta browser untuk tidak menampilkan saran isian yang pernah diketik, sedangkan nilai…
32
Turn off spellcheck
Pelajaran ini membahas atribut spellcheck untuk mengatur pemeriksaan ejaan pada kolom teks. Dengan spellcheck="false", browser tidak menandai kata yang dianggap salah eja, yang…
33
File Upload Button
Pelajaran ini membahas cara membuat tombol unggah file yang tampilannya dapat disesuaikan. Input file asli tetap digunakan tetapi disembunyikan secara visual, lalu elemen label…
34
Empty Input Validation
Pelajaran ini membahas cara memastikan kolom input tidak dikirim dalam keadaan kosong. Pemeriksaan dapat memanfaatkan atribut required bawaan HTML atau dilakukan manual dengan…
06
Filters
6 lesson
01
Filter List
Pelajaran ini menunjukkan cara menyaring daftar item berdasarkan teks yang diketik pengguna. Setiap item dibandingkan dengan kata kunci, lalu item yang tidak cocok disembunyikan.…
02
Filter Table
Pelajaran ini membahas penyaringan baris tabel berdasarkan kata kunci yang diketik. Setiap baris diperiksa, biasanya dengan menggabungkan teks dari seluruh sel lalu mencari kata…
03
Filter Elements
Pelajaran ini memperluas konsep filter dari daftar sederhana menjadi sekumpulan elemen seperti kartu atau blok konten. Setiap elemen diperiksa berdasarkan teks atau atribut data,…
04
Filter Dropdown
Pelajaran ini membahas dropdown yang dilengkapi kolom pencarian untuk menyaring pilihan di dalamnya. Pola ini berguna ketika daftar item panjang, misalnya daftar negara atau…
05
Sort List
Pelajaran ini menjelaskan cara mengurutkan item daftar secara alfabetis atau numerik. JavaScript dapat mengambil seluruh item, mengurutkannya dengan comparator, lalu menyusun…
06
Sort Table
Pelajaran ini membahas cara mengurutkan baris tabel ketika pengguna mengklik judul kolom. Data baris dibaca, diurutkan berdasarkan tipe teks atau angka, lalu disusun ulang di…
07
Tables
7 lesson
01
Zebra Striped Table
Pelajaran ini membahas zebra striping, yaitu pemberian warna latar berbeda pada baris tabel secara bergantian. Pola ini meningkatkan keterbacaan tabel panjang dengan membantu…
02
Center Tables
Pelajaran ini membahas cara memusatkan tabel di tengah halaman atau kontainer. Tabel adalah elemen block-level dengan lebar tertentu, sehingga pemusatan horizontal dilakukan…
03
Full-width Table
Pelajaran ini membahas cara membuat tabel memenuhi seluruh lebar kontainer. Dengan width: 100%, tabel akan menyesuaikan diri terhadap ruang yang tersedia, tetapi kolom dapat…
04
Nested Table
Pelajaran ini membahas tabel bersarang, yaitu tabel yang diletakkan di dalam sel tabel lain. Nested table berguna untuk menampilkan data terstruktur tambahan di dalam satu sel,…
05
Side-by-side Tables
Pelajaran ini membahas cara menempatkan dua tabel secara berdampingan. Pendekatan modern menggunakan flexbox atau grid pada pembungkus, sedangkan float masih ditemukan pada kode…
06
Responsive Tables
Pelajaran ini membahas strategi menampilkan tabel lebar pada layar kecil. Cara paling sederhana adalah memberi pembungkus yang dapat digulir horizontal. Untuk pengalaman yang…
07
Comparison Table
Pelajaran ini membahas tabel perbandingan untuk menyandingkan beberapa pilihan produk atau paket. Kolom biasanya mewakili pilihan, sedangkan baris berisi fitur yang dibandingkan.…
08
More
125 lesson
01
Fullscreen Video
Pelajaran ini membahas cara menampilkan video dalam mode layar penuh melalui tombol khusus. Browser menyediakan Fullscreen API dengan metode requestFullscreen pada elemen video…
02
Modal Boxes
Pelajaran ini membahas modal, yaitu lapisan dialog yang muncul di atas halaman untuk meminta perhatian atau input. Modal yang baik memiliki overlay, judul, tombol tutup, serta…
03
Delete Modal
Pelajaran ini membahas dialog konfirmasi sebelum pengguna menghapus data. Modal menampilkan akibat tindakan, nama item yang akan dihapus, serta pilihan Batal dan Hapus agar…
04
Timeline
Pelajaran ini membahas pembuatan timeline vertikal untuk menampilkan peristiwa secara berurutan. Garis waktu dibuat dengan pseudo-element, sedangkan setiap peristiwa memiliki…
05
Scroll Indicator
Pelajaran ini membahas indikator progres yang menunjukkan seberapa jauh pengguna menggulir halaman. Indikator biasanya berupa bilah tipis di bagian atas yang lebarnya bertambah…
06
Progress Bars
Pelajaran ini membahas pembuatan bilah progres untuk menunjukkan persentase penyelesaian tugas. Progres dapat ditampilkan dengan elemen progress bawaan atau div yang lebarnya…
07
Skill Bar
Pelajaran ini membahas skill bar, yaitu bilah yang menunjukkan tingkat penguasaan suatu kemampuan. Komponen terdiri dari label, jalur latar, dan bagian terisi yang lebarnya…
08
Range Sliders
Pelajaran ini membahas input range, yaitu slider yang memungkinkan pengguna memilih nilai dalam rentang tertentu. Atribut min, max, step, dan value mengatur batas serta kenaikan…
09
Color Picker
Pelajaran ini membahas input pemilih warna bawaan browser. Dengan type="color", pengguna dapat membuka palet warna dan nilai yang dipilih tersedia dalam format heksadesimal.…
10
Email Field
Pelajaran ini membahas input email, yaitu kolom teks yang memakai validasi format email bawaan browser. Atribut tambahan seperti multiple, required, dan autocomplete membuat…
11
Tooltips
Pelajaran ini membahas tooltip, yaitu teks bantuan kecil yang muncul saat pengguna mengarahkan kursor atau memfokuskan elemen. Tooltip biasanya dibuat dengan pseudo-element dan…
12
Display Element Hover
Pelajaran ini membahas cara menampilkan elemen tersembunyi ketika pengguna mengarahkan kursor ke kontainer induknya. Efeknya dapat dibuat dengan selector :hover yang menargetkan…
13
Popups
Pelajaran ini membahas popup, yaitu kotak kecil yang muncul setelah pengguna menekan tombol atau elemen tertentu. Berbeda dari modal penuh, popup biasanya tidak memblokir seluruh…
14
Collapsible
Pelajaran ini membahas komponen collapsible yang dapat dibuka dan ditutup untuk menyembunyikan konten panjang. Tombol pemicu mengubah status konten dan biasanya menampilkan ikon…
15
Calendar
Pelajaran ini membahas pembuatan tampilan kalender bulanan dengan CSS Grid dan JavaScript. JavaScript menghitung jumlah hari dalam bulan, menentukan hari pertama, lalu membuat…
16
HTML Includes
Pelajaran ini membahas cara menyertakan potongan HTML yang sama ke banyak halaman. HTML tidak memiliki direktif include bawaan seperti bahasa server, sehingga pilihan yang…
17
To Do List
Pelajaran ini membahas pembuatan daftar tugas sederhana yang dapat menambah, menandai selesai, dan menghapus item. JavaScript membuat elemen baru dari nilai input, menempelkan…
18
Loaders
Pelajaran ini membahas loader, yaitu animasi yang menunjukkan bahwa suatu proses sedang berlangsung. Loader sering dibuat dengan CSS saja menggunakan border berputar atau animasi…
19
Badges
Pelajaran ini membahas badge, yaitu label kecil yang memberi informasi tambahan seperti jumlah notifikasi, status, atau kategori. Badge biasanya berupa elemen inline dengan latar…
20
Star Rating
Pelajaran ini membahas rating bintang dengan CSS, biasanya memanfaatkan input radio dan label berbentuk bintang. Pendekatan radio membuat rating dapat dioperasikan dengan…
21
User Rating
Pelajaran ini membahas komponen rating interaktif yang memungkinkan pengguna memberi nilai dengan mengklik bintang. JavaScript menangani pemilihan nilai, menampilkan rating…
22
Overlay Effect
Pelajaran ini membahas overlay, yaitu lapisan transparan berisi teks atau tombol yang muncul di atas gambar atau kartu. Overlay biasanya diposisikan absolut menutupi kontainer…
23
Contact Chips
Pelajaran ini membahas contact chip, yaitu elemen kecil berisi avatar dan nama kontak yang dapat dihapus. Chip sering digunakan pada kolom penerima email atau anggota tim, dan…
24
Cards
Pelajaran ini membahas card, yaitu wadah konten berbentuk kotak yang menyatukan gambar, judul, deskripsi, dan aksi. Card umum digunakan pada blog, katalog produk, dan dashboard.…
25
Flip Card
Pelajaran ini membahas flip card, yaitu kartu yang berputar untuk menampilkan sisi belakang saat di-hover atau difokuskan. Efek tiga dimensi dibuat dengan perspective pada…
26
Profile Card
Profile card adalah komponen ringkas untuk menampilkan identitas seseorang, biasanya berisi foto, nama, jabatan, dan tombol tindakan. Kartu ini sering dipakai di halaman tim,…
27
Product Card
Product card memuat informasi singkat sebuah produk: gambar, nama, deskripsi, harga, dan tombol beli. Komponen ini menjadi blok dasar pada halaman katalog atau toko online.…
28
Alerts
Alert adalah pesan singkat yang muncul untuk memberitahu pengguna tentang suatu kejadian, misalnya data berhasil disimpan atau terjadi kesalahan. JavaScript menyediakan alert()…
29
Callout
Callout adalah kotak sorotan yang dipakai untuk menarik perhatian pada informasi penting, seperti tips, peringatan, atau catatan tambahan. Biasanya callout memiliki warna latar…
30
Notes
Notes atau kotak catatan dipakai untuk menampilkan informasi tambahan yang mendukung teks utama, misalnya detail teknis atau pengingat. Tampilannya mirip callout, tetapi biasanya…
31
Labels
Label atau badge adalah penanda kecil berisi teks singkat untuk memberi kategori, status, atau keterangan pada suatu item. Karena ukurannya kecil, label harus tetap terbaca dan…
32
Ribbon
Ribbon adalah pita kecil yang ditempelkan di sudut kartu atau gambar, biasanya untuk menandai produk baru, diskon, atau status khusus. Efeknya dibuat dengan posisi absolut di…
33
Tag Cloud
Tag cloud adalah kumpulan kata kunci atau label dengan ukuran berbeda untuk menunjukkan tingkat kepentingan atau frekuensi. Topik yang lebih populer biasanya tampil lebih besar,…
34
Circles
Lingkaran di CSS dibuat dari elemen persegi yang sudutnya dilengkungkan penuh dengan border-radius: 50%. Bentuk ini sering dipakai untuk avatar, ikon status, atau angka…
35
Style HR
Elemen hr (horizontal rule) menandai perpindahan topik atau pemisah antarbagian. Tampilan bawaannya berupa garis tipis berlekuk, tetapi dapat diubah menjadi garis berwarna,…
36
Coupon
Coupon adalah komponen promosi berbentuk tiket yang memuat kode diskon dan masa berlaku. Ciri khasnya adalah garis putus-putus sebagai pembatas serta lekukan kecil di bagian atas…
37
List Group
List group adalah daftar vertikal yang setiap barisnya tampil sebagai item terpisah dengan border atau latar. Komponen ini cocok untuk menu pengaturan, daftar pesan, atau…
38
List Group with Badges
Badge pada list group menambahkan penanda angka atau status di sisi kanan setiap item, misalnya jumlah pesan belum dibaca. Tata letak flex dengan justify-content: space-between…
39
List Without Bullets
Daftar tanpa bullet dibuat dengan menghapus penanda bawaan melalui list-style: none, lalu mereset margin dan padding. Meskipun tampilannya berubah, elemen ul dan li tetap memberi…
40
Responsive Text
Teks responsif menyesuaikan ukurannya dengan lebar layar agar tetap nyaman dibaca di ponsel maupun desktop. Fungsi clamp() memungkinkan penetapan ukuran minimum, ukuran ideal…
41
Cutout Text
Cutout text adalah efek teks yang seolah berlubang sehingga gambar atau gradien di belakangnya terlihat melalui huruf. Efek ini dibuat dengan background-clip: text dan color:…
42
Glowing Text
Glowing text adalah efek teks bercahaya yang dibuat dengan beberapa lapisan text-shadow berwarna. Semakin besar blur radius dan semakin banyak lapisan, semakin lembut pula pendar…
43
Fixed Footer
Fixed footer adalah bilah yang selalu terlihat di bagian bawah viewport, meskipun halaman digulir. Efek ini dicapai dengan position: fixed, bottom: 0, dan lebar 100%. Karena…
44
Sticky Element
Sticky element adalah elemen yang berperilaku normal sampai mencapai titik tertentu, lalu menempel di layar selama kontainernya masih terlihat. Properti position: sticky…
45
Equal Height
Equal height berarti beberapa kolom atau kartu memiliki tinggi yang sama meskipun isinya berbeda panjang. Flexbox menyelesaikan ini secara otomatis karena align-items: stretch…
46
Clearfix
Clearfix adalah teknik untuk membuat kontainer tetap membungkus elemen anak yang memakai float. Karena float mengeluarkan elemen dari alur normal, tinggi kontainer bisa kolaps…
47
Responsive Floats
Responsive floats mengatur elemen yang mengapung berdampingan di layar lebar, lalu menumpuk vertikal di layar kecil. Pola klasiknya memakai float: left dan width persentase,…
48
Snackbar
Snackbar adalah pesan singkat yang muncul sementara di bagian bawah layar, misalnya konfirmasi 'Tautan disalin'. Biasanya snackbar muncul setelah aksi pengguna, bertahan beberapa…
49
Fullscreen Window
Fullscreen API memungkinkan halaman atau elemen tertentu ditampilkan memenuhi seluruh layar tanpa antarmuka browser. JavaScript memanggil requestFullscreen() pada elemen, lalu…
50
Scroll Drawing
Scroll drawing atau scroll progress indicator adalah garis yang terisi seiring halaman digulir, memberi tahu seberapa jauh pengguna membaca. Nilainya dihitung dari posisi scroll…
51
Smooth Scroll
Smooth scroll membuat perpindahan ke bagian halaman berlangsung halus, bukan melompat langsung. CSS menyediakan scroll-behavior: smooth yang berlaku untuk tautan anchor dan…
52
Gradient Bg Scroll
Gradient background scroll adalah latar gradien yang tampak diam saat konten di atasnya digulir. Efek ini biasanya dibuat dengan background-attachment: fixed pada elemen…
53
Sticky Header
Sticky header adalah header yang tetap terlihat di atas layar setelah pengguna menggulir melewati batas tertentu. JavaScript dapat memantau posisi scroll lalu menambahkan kelas…
54
Shrink Header on Scroll
Shrink header on scroll adalah teknik mengecilkan header saat pengguna menggulir ke bawah, sehingga ruang konten bertambah. JavaScript menambahkan kelas pada header ketika…
55
Pricing Table
Pricing table membandingkan beberapa paket harga dalam kolom berdampingan, lengkap dengan daftar fitur dan tombol berlangganan. Struktur yang jelas membantu calon pelanggan…
56
Parallax
Parallax adalah efek kedalaman saat latar belakang bergerak lebih lambat daripada konten di depannya. Implementasi CSS yang paling sederhana memakai background-attachment: fixed…
57
Aspect Ratio
Aspect ratio adalah perbandingan lebar dan tinggi sebuah elemen, misalnya 16:9 untuk video atau 1:1 untuk avatar. Properti CSS aspect-ratio memungkinkan tinggi dihitung otomatis…
58
Responsive Iframes
Iframe responsif adalah embed video atau peta yang lebarnya menyesuaikan layar tanpa merusak rasio. Karena iframe memiliki dimensi tetap secara bawaan, ia perlu dibungkus…
59
Toggle Like/Dislike
Toggle like/dislike adalah pola tombol reaksi yang dapat aktif dan nonaktif, biasanya disertai penghitung. JavaScript menambahkan atau menghapus kelas aktif serta memperbarui…
60
Toggle Hide/Show
Toggle hide/show membuat elemen muncul dan hilang bergantian saat tombol diklik. Cara paling langsung adalah mengubah properti display antara none dan block lewat JavaScript.…
61
Toggle Dark Mode
Dark mode adalah tema gelap yang dapat diaktifkan pengguna sesuai preferensi. Implementasi modern memakai CSS variables untuk warna, lalu mengganti nilainya ketika kelas dark…
62
Toggle Text
Toggle text mengganti isi teks sebuah elemen setiap kali tombol diklik, misalnya dari 'Tampilkan' menjadi 'Sembunyikan'. Implementasinya cukup membaca nilai saat ini lalu…
63
Toggle Class
Toggle class berarti menambahkan kelas jika belum ada dan menghapusnya jika sudah ada. Method classList.toggle melakukan keduanya dalam satu panggilan sehingga kode lebih…
64
Add Class
Add class digunakan untuk menambahkan satu atau beberapa kelas CSS pada elemen lewat JavaScript. Method classList.add mempertahankan kelas yang sudah ada dan mengabaikan kelas…
65
Remove Class
Remove class menghapus satu atau beberapa kelas dari elemen tanpa mengganggu kelas lainnya. Method classList.remove adalah cara modern yang aman karena tidak menyebabkan error…
66
Change Class
Change class berarti mengganti satu kelas dengan kelas lain pada elemen, misalnya dari 'info' menjadi 'warning'. Method classList.replace menangani penggantian tanpa menyentuh…
67
Active Class
Active class menandai elemen yang sedang dipilih, misalnya menu navigasi pada halaman aktif. Biasanya JavaScript menghapus kelas aktif dari semua item lalu menambahkannya ke item…
68
Tree View
Tree view menampilkan data bertingkat seperti folder dan file yang dapat dibuka atau ditutup. Struktur HTML-nya berupa daftar bersarang, sedangkan JavaScript menangani klik pada…
69
Remove Decimals
Menghapus desimal berarti mengubah angka pecahan menjadi bilangan bulat, misalnya 12.75 menjadi 12. JavaScript menyediakan Math.trunc untuk memotong bagian desimal, Math.floor…
70
Remove Property
Menghapus property dari object JavaScript dapat dilakukan dengan operator delete, misalnya delete user.email. Operator ini menghapus properti milik object itu sendiri, bukan…
71
Offline Detection
Offline detection memungkinkan halaman memberi tahu pengguna ketika koneksi terputus. Browser menyediakan navigator.onLine serta event online dan offline yang dapat dipantau…
72
Find Hidden Element
Menentukan apakah sebuah elemen tersembunyi memerlukan pemeriksaan beberapa kondisi, karena elemen bisa disembunyikan dengan display, visibility, atribut hidden, atau oleh…
73
Redirect Webpage
Pelajaran ini membahas cara mengarahkan pengunjung ke halaman lain dengan JavaScript. Redirect berguna setelah login, setelah formulir dikirim, atau ketika alamat lama sudah…
74
Format a Number
Pelajaran ini menunjukkan cara menampilkan angka dengan format yang rapi di JavaScript. Kamu bisa membulatkan desimal dengan toFixed(), menambahkan pemisah ribuan, dan memformat…
75
Zoom Hover
Efek zoom saat hover membuat gambar atau kartu terasa lebih hidup ketika kursor mendekat. Teknik utamanya adalah mengubah transform: scale() dan memberinya transition agar…
76
Flip Box
Flip box adalah kartu dua sisi yang berputar 180 derajat saat hover atau diklik. Efek ini dibangun dengan perspective pada container, transform-style: preserve-3d pada kartu, dan…
77
Center Vertically
Memusatkan elemen secara vertikal kini bisa dilakukan dengan CSS modern yang ringkas. Flexbox dengan align-items: center dan Grid dengan place-items: center adalah pilihan paling…
78
Center Button in DIV
Tombol dapat dipusatkan di dalam div dengan cara yang berbeda tergantung layout-nya. Jika tombol adalah inline-block, text-align: center pada parent sudah cukup. Untuk kontrol…
79
Center a List
Daftar <ul> secara default memenuhi lebar parent, sehingga teksnya terlihat rata kiri meski isinya pendek. Untuk memusatkan seluruh blok daftar, ubah daftar menjadi inline-block…
80
Transition on Hover
Transisi CSS membuat perubahan gaya saat hover berjalan mulus, bukan melompat tiba-tiba. Kamu menentukan properti yang dianimasikan, durasi, ritme, dan delay pada elemen dasar,…
81
Arrows
Panah di CSS dapat dibuat tanpa gambar, misalnya dengan trik border transparan atau memutar dua border pada kotak. Pendekatan border cocok untuk segitiga sederhana, sedangkan…
82
Shapes
CSS dapat membentuk lingkaran, segitiga, elips, dan poligon tanpa file gambar. Lingkaran memakai border-radius: 50%, segitiga memanfaatkan border transparan, dan bentuk bebas…
83
Download Link
Atribut download pada tautan meminta browser mengunduh file, bukan membukanya di tab baru. Kamu bisa menyarankan nama file hasil unduhan, tetapi browser tetap memutuskan perilaku…
84
Full Height Element
Elemen setinggi layar sering dipakai untuk hero section atau halaman landing. height: 100% hanya bekerja jika semua parent memiliki tinggi yang jelas, sehingga min-height: 100vh…
85
Browser Window
Mockup browser window adalah komposisi CSS yang meniru jendela peramban untuk mempercantik screenshot atau portofolio. Biasanya terdiri dari bilah atas berisi tiga titik, kolom…
86
Custom Scrollbar
Scrollbar dapat diberi gaya agar sesuai dengan desain situs, terutama di browser berbasis Chromium dan Safari. WebKit menyediakan pseudo-element seperti ::-webkit-scrollbar dan…
87
Hide Scrollbar
Menyembunyikan scrollbar bisa membuat tampilan lebih bersih, tetapi konten harus tetap dapat digulir. Di WebKit, ::-webkit-scrollbar { display: none } menyembunyikan batang…
88
Show/Force Scrollbar
Kadang scrollbar perlu selalu terlihat agar layout tidak bergeser saat konten bertambah. overflow-y: scroll memaksa batang gulir muncul, sedangkan overflow: auto hanya…
89
Device Look
Device look adalah mockup perangkat seperti ponsel, tablet, atau laptop yang dibuat dengan CSS. Frame, sudut membulat, notch, dan bayangan membantu menampilkan screenshot…
90
Contenteditable Border
Atribut contenteditable membuat elemen HTML bisa diedit langsung oleh pengguna. Agar area edit jelas, beri border, padding, dan gaya fokus menggunakan :focus. Kamu juga bisa…
91
Placeholder Color
Warna placeholder diatur melalui pseudo-element ::placeholder. Kamu bisa mengubah warna dan opacity agar sesuai desain, tetapi kontrasnya harus tetap cukup terhadap latar.…
92
Disable Resizing of Textarea
Textarea secara default dapat diubah ukurannya dengan menarik sudut kanan bawah. Properti resize: none mematikan kemampuan itu, sedangkan resize: vertical atau horizontal…
93
Disable Text Selection
Properti user-select mengatur apakah teks dapat dipilih oleh pengguna. Nilai none berguna untuk tombol, label navigasi, atau elemen antarmuka agar klik tidak tidak sengaja…
94
Text Selection Color
Warna teks yang tersorot dapat diubah dengan pseudo-element ::selection. Biasanya kamu mengatur color dan background agar sorotan tetap kontras dengan desain. Tidak semua…
95
Bullet Color
Warna bullet pada daftar dapat diatur dengan pseudo-element ::marker atau dengan membuat bullet kustom memakai ::before. ::marker adalah cara modern yang sederhana untuk mengubah…
96
Vertical Line
Garis vertikal sering dipakai sebagai pemisah antar kolom, penanda kutipan, atau aksen pada kartu. Cara paling sederhana adalah border-left atau border-right pada container.…
97
Dividers
Divider atau pemisah membantu memecah konten menjadi bagian yang lebih mudah dipindai. Elemen <hr> adalah pilihan semantik untuk perpindahan topik, dan tampilannya dapat diubah…
98
Text Divider
Text divider adalah garis horizontal yang di tengahnya terdapat teks, misalnya 'atau' pada formulir. Teknik modern memakai flexbox: teks menjadi item tengah, sedangkan garis…
99
Animate Icons
Ikon dapat diberi animasi agar interaksi terasa lebih hidup, misalnya berputar saat hover atau berdenyut untuk notifikasi. Animasi sederhana cukup memakai transition, sedangkan…
100
Countdown Timer
Countdown timer menghitung selisih antara waktu sekarang dan tanggal target. JavaScript menyediakan Date untuk mengambil waktu, lalu setInterval memperbarui tampilan setiap…
101
Typewriter
Efek typewriter menampilkan teks satu karakter demi satu karakter sehingga terasa seperti sedang diketik. JavaScript mengambil potongan string dengan slice() dan memperbaruinya…
102
Coming Soon Page
Halaman coming soon memberi tahu pengunjung bahwa produk atau situs belum diluncurkan. Biasanya halaman ini memakai layout satu layar penuh, judul yang jelas, dan formulir email…
103
Chat Messages
Chat messages adalah tampilan percakapan berbentuk gelembung yang dipisahkan antara pengirim dan penerima. Flexbox memudahkan penataan pesan ke kiri atau kanan, sedangkan lebar…
104
Popup Chat Window
Popup chat window adalah panel percakapan kecil yang muncul dari sudut halaman saat tombol chat diklik. Panel biasanya diposisikan fixed di kanan bawah, lalu ditampilkan atau…
105
Split Screen
Split screen membagi halaman menjadi dua bagian sama besar, misalnya panel promosi dan panel formulir. Flexbox atau Grid dapat membuat kedua sisi sejajar dengan mudah, lalu media…
106
Testimonials
Testimonial menampilkan kutipan pengguna beserta nama, peran, dan foto untuk membangun kepercayaan. Grid dengan auto-fit memungkinkan kartu tersusun rapi dan menyesuaikan lebar…
107
Section Counter
Section counter menampilkan angka statistik yang bertambah dari nol sampai nilai target. JavaScript membaca nilai dari atribut data, lalu menganimasikan angka memakai…
108
Quotes Slideshow
Quotes slideshow menampilkan satu kutipan dalam satu waktu, lalu berganti secara berkala atau lewat tombol. JavaScript menyimpan daftar kutipan dan indeks aktif, kemudian…
109
Closable List Items
Closable list items memungkinkan pengguna menghapus item dari daftar dengan menekan tombol tutup. Setiap item memiliki tombol, lalu JavaScript mencari elemen <li> terdekat dan…
110
Typical Device Breakpoints
Breakpoint adalah lebar layar tertentu tempat tata letak berubah, misalnya dari satu kolom menjadi dua kolom. Pendekatan mobile-first memakai min-width agar gaya dasar berlaku…
111
Draggable HTML Element
Elemen HTML dapat dibuat dapat digeser dengan pointer event. Saat pointer ditekan, catat posisi awal elemen dan pointer, lalu perbarui posisi elemen ketika pointer bergerak.…
112
JS Media Queries
JavaScript dapat membaca media query yang sama seperti CSS melalui window.matchMedia(). Objek yang dihasilkan memiliki properti matches untuk mengetahui apakah query sedang…
113
Syntax Highlighter
Syntax highlighter memberi warna pada potongan kode agar struktur dan token mudah dibaca. Untuk halaman sederhana, kode ditampilkan di dalam <pre><code> dan karakter khusus…
114
JS Animations
Animasi JavaScript memindahkan atau mengubah elemen sedikit demi sedikit dalam banyak frame. requestAnimationFrame meminta browser menjalankan fungsi sebelum frame berikutnya,…
115
JS String Length
Properti length memberi jumlah unit kode pada string JavaScript. Untuk teks biasa, hasilnya sama dengan jumlah karakter, tetapi emoji dan karakter di luar BMP dapat dihitung…
116
JS Exponentiation
Operator ** memangkatkan angka di JavaScript, menggantikan pemanggilan Math.pow yang lebih panjang. Operasi ini memiliki associativity ke kanan, sehingga 2 ** 3 ** 2 dihitung…
117
JS Default Parameters
Default parameter memberi nilai cadangan ketika argumen fungsi tidak diberikan atau bernilai undefined. Nilai default ditulis langsung di daftar parameter dan dievaluasi setiap…
118
JS Random Number
Math.random() menghasilkan angka desimal acak dari 0 (inklusif) hingga kurang dari 1. Untuk mendapatkan bilangan bulat dalam rentang tertentu, kalikan dengan jumlah kemungkinan…
119
JS Sort Numeric Array
Method sort() pada JavaScript mengubah array dan secara default mengurutkan berdasarkan string, bukan nilai numerik. Akibatnya [10, 1, 2] bisa menjadi [1, 10, 2] karena '10'…
120
JS Spread Operator
Spread operator adalah sintaks tiga titik (...) di JavaScript yang membuka isi array atau objek menjadi bagian-bagian terpisah. Operator ini sangat berguna untuk menyalin data,…
121
JS Scroll Into View
scrollIntoView adalah method pada elemen DOM yang membuat browser menggulir halaman sampai elemen tersebut terlihat. Kamu bisa mengatur perilaku gulir menjadi halus (smooth) dan…
122
Get Current Date
JavaScript menyediakan objek Date untuk mengambil tanggal dan waktu saat ini. Nilai bulan dimulai dari 0 untuk Januari, sehingga sering perlu ditambah satu atau dipetakan ke nama…
123
Get Current URL
Objek window.location menyimpan informasi tentang alamat halaman yang sedang dibuka. Dari objek ini kamu bisa membaca URL lengkap, protokol, nama host, path, query string, dan…
124
Get Current Screen Size
Ukuran jendela browser dapat dibaca melalui properti seperti window.innerWidth dan window.innerHeight, yang menunjukkan area tampilan (viewport) yang tersedia. Untuk ukuran layar…
125
Get Iframe Elements
Iframe memungkinkan satu halaman menampilkan dokumen lain di dalam kotak kecil. JavaScript dapat mengakses isi iframe melalui contentDocument atau contentWindow, tetapi hanya…
09
Website
20 lesson
01
Create a Website
Membuat website dimulai dari perencanaan tujuan, penentuan audiens, dan penyusunan struktur halaman. Setelah itu buat berkas HTML untuk konten, CSS untuk tampilan, dan JavaScript…
02
Make a Website
Membuat website yang rapi sebaiknya mengikuti alur kerja yang jelas: tentukan kebutuhan, buat sketsa tata letak, lalu terjemahkan sketsa menjadi struktur HTML. Setelah struktur…
03
Make a Static Website
Website statis terdiri dari berkas HTML, CSS, dan JavaScript yang dikirim apa adanya ke browser tanpa pemrosesan server. Karena tidak membutuhkan database atau logika backend,…
04
Host a Static Website
Hosting website statis berarti menempatkan berkas situs di server yang dapat diakses publik. Kamu bisa memakai layanan gratis seperti GitHub Pages atau penyedia hosting berbayar,…
05
Make a Website (W3.CSS)
W3.CSS adalah framework CSS ringan yang menyediakan kelas siap pakai untuk tata letak, warna, kartu, dan tombol. Dengan menambahkan kelas seperti w3-container dan w3-row, halaman…
06
Make a Website (BS3)
Bootstrap 3 adalah framework front-end populer yang menyediakan sistem grid 12 kolom, komponen navbar, tombol, dan formulir siap pakai. Halaman dibangun dengan membungkus konten…
07
Make a Website (BS4)
Bootstrap 4 membawa sistem grid berbasis flexbox yang lebih fleksibel dibanding versi sebelumnya. Kelas utilitasnya lengkap untuk margin, padding, warna, dan penyelarasan,…
08
Make a Website (BS5)
Bootstrap 5 adalah versi terbaru yang sepenuhnya meninggalkan jQuery dan memakai JavaScript modern. Komponen interaktif dikendalikan melalui atribut data-bs-* sehingga lebih…
09
Create and View a Website
Setelah kode HTML ditulis, simpan berkas dengan ekstensi .html lalu buka melalui browser untuk melihat hasilnya. Siklus edit, simpan, dan refresh adalah cara paling cepat belajar…
10
Create a Link Tree Website
Link tree adalah halaman sederhana berisi profil singkat dan daftar tautan penting dalam satu tempat. Halaman ini biasanya dipakai pada bio media sosial agar pengunjung mudah…
11
Create a Portfolio
Portofolio web menampilkan karya, keterampilan, dan identitas profesionalmu dalam satu halaman yang mudah dibagikan. Struktur umumnya terdiri dari bagian perkenalan, tentang,…
12
Create a Resume
Resume berbasis web adalah CV yang disusun dengan HTML dan CSS sehingga mudah dibagikan melalui tautan. Informasi disusun berurutan: identitas, ringkasan, pengalaman, pendidikan,…
13
Make a Restaurant Website
Website restoran perlu menampilkan suasana tempat, menu, jam buka, lokasi, dan cara reservasi dengan jelas. Pengunjung sering mencari informasi melalui ponsel, jadi navigasi dan…
14
Make a Business Website
Website bisnis berfungsi menjelaskan nilai yang ditawarkan, membangun kepercayaan, dan mengarahkan pengunjung menghubungi atau membeli. Halaman yang efektif memuat layanan, bukti…
15
Make a WebBook
Web book adalah konten panjang yang disusun menjadi bab-bab dan disajikan sebagai halaman web. Pembaca dapat berpindah melalui daftar isi, tautan bab sebelumnya dan berikutnya,…
16
Center Website
Memusatkan konten website berarti menempatkan blok utama di tengah area pandang tanpa membuatnya melebar penuh. Cara paling umum adalah memberi lebar maksimum lalu memakai margin…
17
Contact Section
Bagian kontak pada website memudahkan pengunjung mengirim pesan atau menemukan saluran komunikasi lain. Formulir yang baik memiliki label yang jelas, tipe input yang sesuai, dan…
18
About Page
Halaman tentang (about) menjelaskan siapa kamu, apa yang kamu lakukan, dan mengapa pengunjung sebaiknya mempercayai usaha atau karyamu. Bagian ini biasanya memuat cerita singkat,…
19
Big Header
Big header atau hero header adalah area besar di bagian atas halaman yang langsung menarik perhatian. Biasanya berisi judul utama, kalimat pendukung, dan tombol aksi di atas…
20
Example Website
Contoh website lengkap menunjukkan bagaimana komponen-komponen terpisah disatukan menjadi halaman yang utuh. Header, navigasi, hero, bagian fitur, dan footer disusun dengan…
10
Grid
9 lesson
01
2 Column Layout
Tata letak dua kolom membagi area konten menjadi dua bagian berdampingan, misalnya artikel utama dan sidebar. Cara modern yang paling mudah adalah CSS Grid dengan…
02
3 Column Layout
Tata letak tiga kolom membagi konten menjadi tiga bagian sejajar, sering dipakai untuk daftar fitur, layanan, atau artikel. CSS Grid dengan repeat(3, 1fr) membuat ketiga kolom…
03
4 Column Layout
Tata letak empat kolom cocok untuk menampilkan layanan, fitur, atau produk dalam jumlah banyak secara ringkas. CSS Grid dengan repeat(4, 1fr) membagi ruang menjadi empat bagian…
04
Expanding Grid
Expanding grid adalah kumpulan kartu grid yang salah satunya membesar saat dipilih, disentuh, atau diberi fokus. Efek ini memberi ruang untuk detail tambahan tanpa membuka…
05
List Grid View
Tombol list/grid view memungkinkan pengguna memilih tampilan daftar yang ringkas atau tampilan grid yang lebih visual. JavaScript cukup menambahkan atau menghapus kelas pada…
06
Mixed Column Layout
Mixed column layout menggabungkan beberapa lebar kolom dalam satu halaman, misalnya konten utama lebar dengan sidebar sempit lalu bagian full-width di bawahnya. CSS Grid dengan…
07
Column Cards
Column cards adalah kartu-kartu konten yang disusun dalam beberapa kolom vertikal, mirip tata letak majalah. CSS multi-column (column-count atau columns) dapat mengalirkan kartu…
08
Zig Zag Layout
Zig zag layout menyusun baris-baris konten secara bergantian: gambar di kiri lalu teks di kanan, kemudian teks di kiri dan gambar di kanan. Pola ini memberi ritme visual dan…
09
Blog Layout
Blog layout menyusun daftar tulisan agar mudah dipindai, biasanya dengan satu artikel unggulan dan beberapa kartu artikel lainnya. Setiap pos sebaiknya memakai elemen article,…
11
Google
4 lesson
01
Google Charts
Google Charts adalah pustaka JavaScript untuk membuat grafik interaktif di browser, seperti diagram batang, garis, dan pie. Data disiapkan dalam tabel dua dimensi, lalu grafik…
02
Google Fonts
Google Fonts adalah layanan yang menyediakan font web gratis untuk dipakai langsung di halaman. Kamu menyisipkan tautan stylesheet font di bagian head, lalu memanggil nama font…
03
Google Font Pairings
Font pairing adalah seni memadukan dua jenis huruf agar tampilan terasa harmonis namun tetap memiliki kontras. Pola umumnya adalah heading dengan font berkarakter dan body dengan…
04
Google Set up Analytics
Google Analytics membantu pemilik situs memahami jumlah kunjungan, sumber trafik, dan perilaku pengunjung. Pemasangannya dilakukan dengan menambahkan tag gtag.js yang berisi…
12
Converters
4 lesson
01
Convert Weight
Konverter berat mengubah nilai antara kilogram, gram, pon, dan ons melalui JavaScript. Rumus konversi diterapkan setelah nilai input dibaca sebagai angka, lalu hasilnya ditulis…
02
Convert Temperature
Konverter suhu mengubah nilai antara Celsius, Fahrenheit, dan Kelvin menggunakan rumus yang sudah baku. JavaScript membaca nilai input, menentukan satuan asal dan tujuan, lalu…
03
Convert Length
Konverter panjang memudahkan perpindahan nilai antara meter, sentimeter, kilometer, inci, kaki, dan mil. Cara paling rapi adalah mengubah semua satuan ke satuan dasar lebih dulu,…
04
Convert Speed
Konverter kecepatan mengubah nilai antara kilometer per jam, meter per detik, mil per jam, dan knot. Kunci perhitungannya adalah menyamakan satuan waktu dan jarak sebelum…
13
Blog
3 lesson
01
Get a Developer Job
Mendapatkan pekerjaan developer membutuhkan lebih dari sekadar kemampuan menulis kode. Portofolio yang menunjukkan karya nyata, resume yang disesuaikan dengan lowongan, dan…
02
Become a Front-End Dev.
Front-end developer membangun bagian website yang dilihat dan digunakan langsung oleh pengguna. Jalur belajarnya dimulai dari HTML, CSS, dan JavaScript, lalu dilanjutkan dengan…
03
Hire Developers
Merekrut developer membutuhkan definisi peran yang jelas, deskripsi pekerjaan yang jujur, dan proses seleksi yang relevan. Nilailah portofolio, kemampuan problem solving, serta…