htmlcssjavascripttimelineportofolioPemula9 mnt baca

Timeline Vertikal

Membangun timeline perjalanan (riwayat hidup/proyek) dengan garis tengah dan animasi scroll.

Kenapa Timeline?

Timeline menampilkan perjalanan waktu secara visual: riwayat pendidikan, pengalaman kerja, atau roadmap proyek. Ini komponen wajib di halaman "Tentang Saya" portofolio.

Langkah Membangun

HTML: Kontainer timeline berisi item-item. Tiap item punya titik (dot), tanggal, judul, dan deskripsi.

CSS: Trik garis tengah: kontainer memakai pseudo-element ::before sebagai garis vertikal di tengah (left: 50%). Item bergantian kiri-kanan memakai nth-child(odd/even) dengan margin. Titik memakai lingkaran berwarna di atas garis. Di HP, garis pindah ke kiri dan semua item rata kiri (media query).

JS: Animasi reveal saat scroll memakai IntersectionObserver (seperti modul scroll-reveal): item kiri meluncur dari kiri, item kanan dari kanan.

Pseudo-element

::before membuat "elemen hantu" tanpa menambah HTML. Sempurna untuk dekorasi seperti garis timeline, karena garis bukan konten melainkan hiasan.

Kesalahan Umum

  • Garis tidak tepat di tengah karena lupa memperhitungkan lebar garis sendiri (gunakan transform: translateX(-50%)).
  • Item kiri-kanan bertabrakan di layar sedang (breakpoint media query harus cukup besar, misal 768px).
  • Titik tidak sejajar dengan garis (posisikan dengan absolute yang dihitung dari tengah).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Filter Tahun

Tambahkan tombol filter tahun di atas timeline. Data timeline dipindah ke array JS berisi tahun, dan filter menampilkan hanya item dari tahun yang dipilih.

Kuis Bab

Uji pemahamanmu: Aplikasi Mini

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.Apa singkatan CRUD yang menjadi fondasi aplikasi seperti todo list?

2.Kenapa localStorage hanya bisa menyimpan string?

3.Satu baris apa yang WAJIB ada di event dragover agar drop bisa terjadi?

4.Bagaimana cara mencegah XSS saat menampilkan pesan chat dari pengguna?

5.Elemen semu CSS apa yang dipakai untuk garis vertikal timeline tanpa menambah HTML?