🎯 `Tujuan`

Mempercepat pengembangan web dengan menggunakan Bootstrap, melalui komponen dan grid yang sudah siap pakai.

⏰ `Konteks`

Tutorial ini cocok untuk Anda yang ingin membuat desain situs web yang responsif dan modern dengan cepat. Anda tidak perlu memulai dari nol, cukup gunakan komponen yang sudah tersedia.

🪵 `Hal yang Diperlukan`

Visual Studio Code (VS Code) Ekstensi: Pasang ekstensi Live Server by Ritwick Dey untuk menampilkan hasil secara langsung.
Browser
CDN Bootstrap

📋 `Langkah-Langkah`

Buka File Explorer dan pilih direktori untuk menyimpan proyek ini.
Klik ikon + di pojok kiri atas untuk membuat folder baru. Beri nama folder sesuai keinginan Anda.
Buka Visual Studio Code, klik File > Open Folder, dan pilih folder yang baru Anda buat.
Buat file baru dengan nama index.html.

Masukkan kode berikut ke dalam file index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Landing Page</title>
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
</head>
<body>

    <!-- Navbar -->
    <nav class="navbar navbar-light bg-light px-3">
        <a class="navbar-brand" href="#">LOGO</a>
        <div>
            <a class="btn btn-outline-primary" href="#">Login</a>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="text-center bg-primary text-white py-5">
        <h1 class="fw-bold">Welcome to Our Website</h1>
        <p>Simplify your operations with modern solutions</p>
        <a href="#" class="btn btn-light mt-3">Get Started</a>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-white text-center fixed-bottom py-3">
        <p>&copy; 2024 Your Company. All rights reserved.</p>
    </footer>

    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>
</body>
</html>

Penjelasan Kelas Bootstrap:

Navbar:
```
<nav class="navbar navbar-light bg-light px-3">
```
- navbar: Komponen untuk navigasi.
- navbar-light bg-light: Warna terang untuk latar belakang dan teks.
- px-3: Padding horizontal.
Hero Section:
```
<section class="text-center bg-primary text-white py-5">
```
- text-center: Teks berada di tengah.
- bg-primary: Latar belakang biru.
- text-white: Teks berwarna putih.
- py-5: Padding atas dan bawah.
Footer:
```
<footer class="bg-dark text-white text-center fixed-bottom py-3">
```
- bg-dark: Latar belakang hitam.
- text-white: Teks putih.
- fixed-bottom: Menempatkan footer di bagian bawah layar.

Pastikan Anda telah menginstal ekstensi Live Server di VS Code.
Klik tombol Go Live di bagian bawah jendela VS Code.
Halaman web akan ditampilkan di browser Anda. Pastikan tampilannya sesuai dengan yang diharapkan:

Kesimpulan Bootstrap CSS adalah framework yang memudahkan pembuatan situs web modern dan responsif. Dengan berbagai kelas yang sudah tersedia, Anda dapat mengatur warna, ukuran, dan layout tanpa menulis CSS dari awal. Bootstrap juga memungkinkan penggunaan komponen siap pakai seperti navbar, tombol, dan grid layout, sehingga desain terlihat konsisten di berbagai perangkat. Ini akan menghemat waktu pengembangan dan memungkinkan Anda fokus pada pembuatan konten dan fitur.

🎯 Tujuan

⏰ Konteks

🪵 Hal yang Diperlukan

📋 Langkah-Langkah

🎯 `Tujuan`

⏰ `Konteks`

🪵 `Hal yang Diperlukan`

📋 `Langkah-Langkah`