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.<\/p>\n\n\n\n
Komponen Bootstrap yang akan digunakan:<\/p>\n\n\n\n
Website yang akan dibuat memiliki tampilan seperti berikut.<\/p>\n\n\n\n
+-----------------------------------------------------------+
| Navbar |
+-----------------------------------------------------------+
| Hero Section |
+-----------------------------------------------------------+
| Tentang Kami |
+-----------------------------------------------------------+
| Layanan (3 Card) |
+-----------------------------------------------------------+
| Statistik (Progress Bar) |
+-----------------------------------------------------------+
| Portofolio |
+-----------------------------------------------------------+
| FAQ |
+-----------------------------------------------------------+
| Hubungi Kami |
+-----------------------------------------------------------+
| Footer |
+-----------------------------------------------------------+<\/code><\/pre>\n\n\n\n
\n\n\n\nLangkah 1<\/h2>\n\n\n\nMembuat Struktur Folder<\/h3>\n\n\n\n
Buat struktur folder berikut.<\/p>\n\n\n\n
company-profile
\u2502
\u251c\u2500\u2500 index.html
\u2502
\u251c\u2500\u2500 assets
\u2502 \u251c\u2500\u2500 css
\u2502 \u251c\u2500\u2500 js
\u2502 \u2514\u2500\u2500 img<\/code><\/pre>\n\n\n\n
\n\n\n\nLangkah 2<\/h2>\n\n\n\nMembuat File index.html<\/h3>\n\n\n\n
Salin kode berikut.<\/p>\n\n\n\n
<!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\/bootstrap@5.3.3\/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 \u00a9 2026
Bisa Software Indonesia
<\/footer>
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>
<\/body>
<\/html><\/code><\/pre>\n\n\n\n
\n\n\n\nHasil Praktik<\/h2>\n\n\n\n
Apabila seluruh langkah dilakukan dengan benar, maka website akan memiliki komponen berikut.<\/p>\n\n\n\n
\n- \u2714 Navbar responsif<\/li>\n\n\n\n
- \u2714 Hero Section<\/li>\n\n\n\n
- \u2714 About Section<\/li>\n\n\n\n
- \u2714 Services menggunakan Card Bootstrap<\/li>\n\n\n\n
- \u2714 Progress Bar<\/li>\n\n\n\n
- \u2714 Accordion FAQ<\/li>\n\n\n\n
- \u2714 Contact Form<\/li>\n\n\n\n
- \u2714 Footer<\/li>\n\n\n\n
- \u2714 Responsive pada perangkat mobile maupun desktop<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nTUGAS PRAKTIK<\/h1>\n\n\n\nMembangun Website Company Profile Profesional<\/h2>\n\n\n\n
Kembangkan hasil latihan sebelumnya menjadi website yang lebih lengkap dengan ketentuan berikut.<\/p>\n\n\n\n
A. Header<\/h3>\n\n\n\n\n- Tambahkan logo perusahaan.<\/li>\n\n\n\n
- Tambahkan menu Home<\/strong>, About<\/strong>, Services<\/strong>, Portfolio<\/strong>, Team<\/strong>, FAQ<\/strong>, dan Contact<\/strong>.<\/li>\n<\/ul>\n\n\n\n
B. Hero Section<\/h3>\n\n\n\n\n- Tambahkan gambar ilustrasi.<\/li>\n\n\n\n
- Tambahkan dua tombol Call To Action (CTA).<\/li>\n\n\n\n
- Gunakan Typography Bootstrap (
display-4<\/code> dan lead<\/code>).<\/li>\n<\/ul>\n\n\n\nC. About<\/h3>\n\n\n\n\n- Tambahkan visi dan misi perusahaan.<\/li>\n\n\n\n
- Buat layout dua kolom menggunakan Grid System.<\/li>\n<\/ul>\n\n\n\n
D. Services<\/h3>\n\n\n\n\n- Tampilkan 6 layanan<\/strong> menggunakan Card Bootstrap.<\/li>\n\n\n\n
- Setiap Card harus memiliki ikon, judul, deskripsi, dan tombol Selengkapnya<\/strong>.<\/li>\n<\/ul>\n\n\n\n
E. Portfolio<\/h3>\n\n\n\n\n- Tampilkan minimal 6 proyek<\/strong> dalam bentuk Card.<\/li>\n\n\n\n
- Gunakan gambar responsif (
img-fluid<\/code>) dan efek bayangan (shadow<\/code>).<\/li>\n<\/ul>\n\n\n\nF. Tim<\/h3>\n\n\n\n\n- Tampilkan minimal 4 anggota tim<\/strong>.<\/li>\n\n\n\n
- Setiap anggota memiliki foto berbentuk lingkaran (
rounded-circle<\/code>), nama, jabatan, dan tombol media sosial.<\/li>\n<\/ul>\n\n\n\nG. FAQ<\/h3>\n\n\n\n\n- Buat minimal 5 pertanyaan<\/strong> menggunakan Accordion Bootstrap.<\/li>\n<\/ul>\n\n\n\n
H. Hubungi Kami<\/h3>\n\n\n\n\n- Tambahkan form yang terdiri dari:\n
\n- Nama<\/li>\n\n\n\n
- Email<\/li>\n\n\n\n
- Nomor Telepon<\/li>\n\n\n\n
- Subjek<\/li>\n\n\n\n
- Pesan<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
I. Footer<\/h3>\n\n\n\n\n- Tambahkan informasi perusahaan, tautan cepat, media sosial, dan hak cipta.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nKriteria Penilaian<\/h2>\n\n\n\nAspek<\/th> Bobot<\/th><\/tr><\/thead> Struktur HTML yang rapi<\/td> 15%<\/td><\/tr> Penggunaan komponen Bootstrap<\/td> 25%<\/td><\/tr> Layout responsif<\/td> 20%<\/td><\/tr> Kerapian tampilan (UI)<\/td> 15%<\/td><\/tr> Kreativitas desain<\/td> 15%<\/td><\/tr> Kelengkapan fitur<\/td> 10%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Tujuan Praktik Pada latihan ini Anda akan membangun sebuah website Company Profile sederhana namun profesional dengan memanfaatkan hampir seluruh komponen…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[20],"tags":[35],"class_list":["post-662","post","type-post","status-publish","format-standard","hentry","category-tutorial-bootstrap","tag-tutorial-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=662"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/662\/revisions"}],"predecessor-version":[{"id":663,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/662\/revisions\/663"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}