Belajar Bootstrap 5: Panduan Awal

Sep 21, 2024

Seri Belajar Bootstrap Versi 5

Pendahuluan

  • Video pertama dari seri belajar Bootstrap versi 5.
  • Fokus pada pengenalan dan agenda pembelajaran.

Prasyarat Sebelum Belajar

  • Pengetahuan Internet dan Teknologi Web: Penting untuk memahami dasar-dasar ini.
  • HTML (Hypertext Markup Language):
    • Bahasa markah standar untuk dokumen web.
    • Tidak memiliki elemen pemrograman seperti struktur data atau variabel.
    • Memuat tag HTML seperti <body>, <head>, <title>, dll.
  • CSS (Cascading Style Sheets):
    • Mengatur gaya (style) halaman web seperti warna, heading, layout, dan posisi.
    • Contoh situs: liputan6.com dan Facebook tanpa CSS hanya menampilkan struktur dasar HTML.

Pengenalan Framework

  • Framework: Alat bantu yang berisi tools, library, standar, dan best practice.
  • Mempermudah dan mempercepat proses pengerjaan front-end developer.
  • Contoh: Bootstrap untuk CSS, CodeIgniter dan Laravel untuk PHP.

Bootstrap

  • Framework CSS sumber terbuka dan gratis.
  • Mempermudah pembuatan situs web dan aplikasi web.
  • Utilities di Bootstrap:
    • Grid system, text dan typography, positioning, spacing, sizing, flexbox, alignment, color, images.
    • Support responsive utilities (menyesuaikan tampilan perangkat).
    • Shadow dan berbagai utilities lain.
  • Komponen CSS di Bootstrap:
    • Button, nav dan navbar, jumbotron, list group, badges.
    • Forms, input group, alerts, progress, pagination, cards.
  • JavaScript Widgets di Bootstrap:
    • Dropdowns, carousel, collapse, popovers.
    • Models dan berbagai widget lainnya.

Proyek Praktis

  • Membuat proyek website e-commerce dengan desain UI dan UX.
  • Melakukan slicing design dan pembuatan proyek website menggunakan Bootstrap versi 5.

Penutup

  • Video ini adalah video pengantar saja.
  • Untuk belajar lebih lanjut, disarankan subscribe dan aktifkan notifikasi channel.