Pembuatan Landing Page dengan Bootstrap 5

Sep 9, 2024

Catatan Kuliah: Pembuatan Landing Page Menggunakan Bootstrap 5

Pendahuluan

  • Menggunakan framework CSS: Bootstrap 5.
  • Menambahkan animasi menggunakan anime.style dan Animate on Scroll (AOS).

Struktur Landing Page

  1. Navbar
  2. Hero Section
  3. About Section
  4. Projects Section
  5. Services Section
  6. FAQ Section (menggunakan komponen accordion)
  7. Footer

Persiapan Folder

  • Membuat folder project dengan nama: lp-hashtag2
  • Membuat subfolder:
    • assets
      • icon (favicon)
      • image (gambar untuk project, service, dan hero)

Membuat Struktur File

  • Buat file:
    • index.html
    • Folder disk:
      • css/style.css
      • js/script.js

Menambahkan Template Bootstrap

  • Mengkopikan starter template dari getbootstrap.com.
  • Menambahkan Google Fonts: Font Poppins.
  • Menambahkan Font Awesome untuk ikon.

Navbar

  • Menggunakan komponen navbar dari Bootstrap.
  • Menghapus elemen yang tidak perlu (dropdown, input, button search).
  • Menambahkan link: Home, About Us, Projects, Services, FAQ.
  • Menambahkan ikon menggunakan Font Awesome.

Hero Section

  • Membuat struktur hero dengan H1, paragraf, dan tombol.
  • Menambahkan background image dan styling untuk tampil menarik.

About Section

  • Membuat dua kolom dengan data statistik (2000+ proyek, 250+ perusahaan).
  • Menambahkan styling untuk estetika.

Projects Section

  • Menampilkan daftar proyek dengan gambar dan deskripsi.
  • Menggunakan responsivitas untuk kolom di ukuran layar berbeda.

Services Section

  • Menampilkan layanan yang ditawarkan dengan gambar dan deskripsi.
  • Menggunakan flexbox untuk layout.

FAQ Section

  • Menggunakan komponen accordion untuk pertanyaan umum.
  • Menambah jarak dan styling agar lebih menarik.

Footer

  • Menyediakan informasi kontak dan menu navigasi.
  • Menggunakan responsivitas untuk ukuran layar.

Menambahkan Animasi

  • Menggunakan anime.style untuk animasi on load (fade in).
  • Menggunakan AOS untuk animasi saat scroll (fade right, fade up, zoom in).

Penutup

  • Landing page telah selesai dibuat dengan Bootstrap 5 dan animasi.
  • Terima kasih telah mengikuti tutorial ini di channel NgoDing Mastery.