MoreLesson 167Preview gratis
Timeline
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas pembuatan timeline vertikal untuk menampilkan peristiwa secara berurutan. Garis waktu dibuat dengan pseudo-element, sedangkan setiap peristiwa memiliki penanda titik dan kartu konten. Pada layar kecil, tata letak dua sisi biasanya diubah menjadi satu kolom agar tetap mudah dibaca.
Poin kunci
- Gunakan daftar berurutan seperti ol/li agar urutan peristiwa bermakna secara semantik
- Buat garis vertikal dengan pseudo-element ::before pada kontainer timeline
- Posisikan titik penanda secara absolut terhadap setiap item
- Ubah tata letak menjadi satu kolom pada media query untuk layar sempit
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.