BAB 25 – MEMBANGUN WEBSITE DENGAN BOOTSTRAP

Bydeka

Tujuan Praktik

Pada latihan ini Anda akan membangun sebuah website Company Profile sederhana namun profesional dengan memanfaatkan hampir seluruh komponen Bootstrap 5 yang telah dipelajari pada Bagian 1 sampai Bagian 4.

Komponen Bootstrap yang akan digunakan:

  • Navbar
  • Container
  • Grid System
  • Typography
  • Button
  • Card
  • Badge
  • Alert
  • Progress Bar
  • Carousel
  • Accordion
  • Modal
  • Form
  • Utilities
  • Footer

Website yang akan dibuat memiliki tampilan seperti berikut.

+-----------------------------------------------------------+
| Navbar                                                    |
+-----------------------------------------------------------+
| Hero Section                                              |
+-----------------------------------------------------------+
| Tentang Kami                                              |
+-----------------------------------------------------------+
| Layanan (3 Card)                                          |
+-----------------------------------------------------------+
| Statistik (Progress Bar)                                  |
+-----------------------------------------------------------+
| Portofolio                                                |
+-----------------------------------------------------------+
| FAQ                                                       |
+-----------------------------------------------------------+
| Hubungi Kami                                              |
+-----------------------------------------------------------+
| Footer                                                    |
+-----------------------------------------------------------+

Langkah 1

Membuat Struktur Folder

Buat struktur folder berikut.

company-profile
│
├── index.html
│
├── assets
│   ├── css
│   ├── js
│   └── img

Langkah 2

Membuat File index.html

Salin kode berikut.

<!DOCTYPE html>
<html lang="id">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Company Profile</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<!-- Navbar -->

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">

<a class="navbar-brand" href="#">
Bisa Software
</a>

<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#menu">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse"
id="menu">

<ul class="navbar-nav ms-auto">

<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>

</ul>

</div>

</div>

</nav>

<!-- Hero -->

<section class="bg-light py-5">

<div class="container">

<div class="row align-items-center">

<div class="col-lg-6">

<h1 class="display-4 fw-bold">

Bangun Website Profesional Bersama Kami

</h1>

<p class="lead">

Solusi Website, Sistem Informasi dan Aplikasi Berbasis Web.

</p>

<button class="btn btn-primary">

Hubungi Kami

</button>

<button class="btn btn-outline-primary">

Pelajari

</button>

</div>

<div class="col-lg-6">

<img src="assets/img/hero.png"
class="img-fluid">

</div>

</div>

</div>

</section>

<!-- About -->

<section class="py-5">

<div class="container">

<h2 class="text-center mb-4">

Tentang Kami

</h2>

<p class="text-center">

Kami merupakan perusahaan yang bergerak di bidang pengembangan website, sistem informasi dan aplikasi berbasis web menggunakan teknologi modern.

</p>

</div>

</section>

<!-- Services -->

<section class="bg-light py-5">

<div class="container">

<h2 class="text-center mb-5">

Layanan

</h2>

<div class="row">

<div class="col-md-4">

<div class="card shadow">

<div class="card-body text-center">

<h4>Website</h4>

<p>Pembuatan Website Profesional.</p>

<button class="btn btn-primary">

Detail

</button>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card shadow">

<div class="card-body text-center">

<h4>Sistem Informasi</h4>

<p>Pengembangan Sistem Informasi.</p>

<button class="btn btn-success">

Detail

</button>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card shadow">

<div class="card-body text-center">

<h4>Aplikasi Kasir</h4>

<p>Software Kasir UMKM.</p>

<button class="btn btn-danger">

Detail

</button>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- Statistik -->

<section class="py-5">

<div class="container">

<h2 class="text-center mb-5">

Kemampuan Tim

</h2>

<p>HTML</p>

<div class="progress mb-3">

<div class="progress-bar bg-primary"
style="width:95%">

95%

</div>

</div>

<p>Bootstrap</p>

<div class="progress mb-3">

<div class="progress-bar bg-success"
style="width:90%">

90%

</div>

</div>

<p>Laravel</p>

<div class="progress">

<div class="progress-bar bg-danger"
style="width:85%">

85%

</div>

</div>

</div>

</section>

<!-- FAQ -->

<section class="bg-light py-5">

<div class="container">

<h2 class="text-center mb-5">

FAQ

</h2>

<div class="accordion">

<div class="accordion-item">

<h2 class="accordion-header">

<button
class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#faq1">

Apa layanan utama perusahaan?

</button>

</h2>

<div id="faq1"
class="accordion-collapse collapse show">

<div class="accordion-body">

Kami melayani pembuatan website, sistem informasi dan aplikasi kasir.

</div>

</div>

</div>

</div>

</div>

</section>

<!-- Contact -->

<section class="py-5">

<div class="container">

<h2 class="text-center mb-4">

Hubungi Kami

</h2>

<div class="row justify-content-center">

<div class="col-md-8">

<input
type="text"
class="form-control mb-3"
placeholder="Nama">

<input
type="email"
class="form-control mb-3"
placeholder="Email">

<textarea
class="form-control mb-3"
rows="5"
placeholder="Pesan"></textarea>

<button class="btn btn-primary">

Kirim Pesan

</button>

</div>

</div>

</div>

</section>

<!-- Footer -->

<footer class="bg-dark text-white text-center p-4">

Copyright © 2026
Bisa Software Indonesia

</footer>

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

</body>

</html>

Hasil Praktik

Apabila seluruh langkah dilakukan dengan benar, maka website akan memiliki komponen berikut.

  • ✔ Navbar responsif
  • ✔ Hero Section
  • ✔ About Section
  • ✔ Services menggunakan Card Bootstrap
  • ✔ Progress Bar
  • ✔ Accordion FAQ
  • ✔ Contact Form
  • ✔ Footer
  • ✔ Responsive pada perangkat mobile maupun desktop

TUGAS PRAKTIK

Membangun Website Company Profile Profesional

Kembangkan hasil latihan sebelumnya menjadi website yang lebih lengkap dengan ketentuan berikut.

A. Header

  • Tambahkan logo perusahaan.
  • Tambahkan menu Home, About, Services, Portfolio, Team, FAQ, dan Contact.

B. Hero Section

  • Tambahkan gambar ilustrasi.
  • Tambahkan dua tombol Call To Action (CTA).
  • Gunakan Typography Bootstrap (display-4 dan lead).

C. About

  • Tambahkan visi dan misi perusahaan.
  • Buat layout dua kolom menggunakan Grid System.

D. Services

  • Tampilkan 6 layanan menggunakan Card Bootstrap.
  • Setiap Card harus memiliki ikon, judul, deskripsi, dan tombol Selengkapnya.

E. Portfolio

  • Tampilkan minimal 6 proyek dalam bentuk Card.
  • Gunakan gambar responsif (img-fluid) dan efek bayangan (shadow).

F. Tim

  • Tampilkan minimal 4 anggota tim.
  • Setiap anggota memiliki foto berbentuk lingkaran (rounded-circle), nama, jabatan, dan tombol media sosial.

G. FAQ

  • Buat minimal 5 pertanyaan menggunakan Accordion Bootstrap.

H. Hubungi Kami

  • Tambahkan form yang terdiri dari:
    • Nama
    • Email
    • Nomor Telepon
    • Subjek
    • Pesan

I. Footer

  • Tambahkan informasi perusahaan, tautan cepat, media sosial, dan hak cipta.

Kriteria Penilaian

AspekBobot
Struktur HTML yang rapi15%
Penggunaan komponen Bootstrap25%
Layout responsif20%
Kerapian tampilan (UI)15%
Kreativitas desain15%
Kelengkapan fitur10%

Similar Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *