Cara Buat Web Statis dengan Bootstrap

 

Bootstrap merupakan salah satu framework frontend populer yang dapat membantu pengembang membuat website dengan tampilan responsif, modern, dan mobile-friendly. Bootstrap menyediakan berbagai komponen siap pakai, seperti navigasi, tombol, formulir, grid, kartu, modal, dan berbagai elemen antarmuka lainnya. Bootstrap juga menyediakan dukungan JavaScript untuk komponen interaktif.

Membuat website statis menggunakan Bootstrap sebenarnya tidak terlalu sulit. Kita bahkan dapat memanfaatkan template Bootstrap yang sudah tersedia, kemudian menyesuaikan isi, warna, gambar, menu, dan desainnya sesuai kebutuhan.

Pada tutorial ini, kita akan belajar membuat website statis menggunakan template Bootstrap dan mempublikasikannya secara online melalui GitHub Pages.

Apa Itu Website Statis?

Website statis adalah website yang halaman-halamannya terdiri dari file yang relatif sederhana, seperti:

• HTML untuk struktur halaman.
• CSS untuk mengatur tampilan.
• JavaScript untuk menambahkan interaksi.
• Gambar, ikon, dan font sebagai pendukung tampilan.

Website statis tidak membutuhkan database atau bahasa pemrograman server seperti PHP untuk menampilkan halaman dasarnya. Karena itu, website seperti profil pribadi, portofolio, landing page, dokumentasi, atau profil sekolah dapat dibuat dengan cara yang relatif sederhana.

Apa Itu Bootstrap?

Bootstrap adalah frontend toolkit open source yang menyediakan sistem grid, komponen, utility class, dan JavaScript untuk membantu membuat website responsif dengan lebih cepat. Bootstrap menggunakan pendekatan mobile-first, sehingga desain website dapat menyesuaikan tampilan pada smartphone, tablet, maupun komputer.

Bootstrap juga dapat digunakan dengan beberapa cara, antara lain melalui CDN, package manager, atau dengan mengunduh file Bootstrap secara langsung.Persiapan yang Dibutuhkan

Sebelum mulai, siapkan beberapa hal berikut:

1. Komputer atau laptop.
2. Browser seperti Google Chrome, Microsoft Edge, atau Firefox.
3. Editor kode, misalnya Visual Studio Code atau Sublime Text.
4. Pengetahuan dasar HTML dan CSS.
5. Template Bootstrap.
6. Akun GitHub jika ingin mempublikasikan website menggunakan GitHub Pages.

Untuk pemula, Visual Studio Code dapat menjadi pilihan editor kode yang praktis. Namun, editor lain seperti Sublime Text juga tetap dapat digunakan.

1. Download Template Bootstrap

Agar lebih mudah, kita tidak perlu membuat seluruh desain website dari awal. Kita dapat menggunakan template Bootstrap yang sudah tersedia.

Salah satu situs yang menyediakan banyak template Bootstrap adalah BootstrapMade. Tersedia berbagai kategori template, termasuk portfolio, business, education, landing page, blog, dan kategori lainnya.

kunjungi https://bootstrapmade.com/

Untuk belajar, pilih template yang menyediakan versi gratis dan pastikan membaca ketentuan lisensinya sebelum digunakan untuk proyek tertentu. BootstrapMade menyediakan versi gratis maupun berbayar dengan ketentuan lisensi masing-masing.

Tips memilih template

Sebelum mengunduh, perhatikan:

• Apakah desainnya sesuai dengan kebutuhan?
• Apakah tampilannya responsif?
• Versi Bootstrap yang digunakan.
• Struktur folder template.
• Kelengkapan dokumentasi.
• Ketentuan lisensinya.

Saat ini, BootstrapMade juga menyediakan banyak template berbasis Bootstrap 5.

2. Pilih Template yang Sesuai

Setelah masuk ke halaman template, pilih salah satu desain yang paling sesuai.

Sebagai contoh, kita dapat menggunakan template iPortfolio untuk latihan membuat website portofolio pribadi.

Sebelum mengunduh, sebaiknya klik Live Demo terlebih dahulu. Dengan demikian, kita dapat melihat tampilan website secara langsung dan mengetahui bagian-bagian yang nantinya perlu disesuaikan.

Setelah yakin dengan pilihan template, download file tersebut.

Catatan: Nama template dan versi Bootstrap dapat berubah seiring waktu. Jika mengikuti tutorial ini dengan template yang berbeda, prinsip pengeditannya tetap hampir sama.

3. Ekstrak File Template

File template yang diunduh biasanya dikemas dalam format arsip seperti ZIP atau format lainnya.

Ekstrak file tersebut menggunakan aplikasi seperti:

• WinRAR
• 7-Zip
• Windows Explorer

Setelah diekstrak, biasanya akan ditemukan struktur folder seperti:

nama-template/
├── index.html
├── assets/
│   ├── css/
│   ├── js/
│   ├── img/
│   └── vendor/
├── forms/
└── README.md

Struktur setiap template dapat berbeda. Yang paling penting adalah menemukan file utama, biasanya bernama index.html.

4. Buka Template dengan Code Editor

Selanjutnya, buka folder template menggunakan editor kode.

Kita dapat menggunakan Visual Studio Code, Sublime Text 3, atau editor lainnya.

Tampak beberapa file yang harus di edit pakai Sublime Text 3

File yang paling sering kita edit antara lain:

• index.html
• file CSS di dalam folder assets/css/
• file JavaScript di dalam folder assets/js/
• gambar di dalam folder assets/img/

Jika menggunakan Visual Studio Code, cukup buka folder template melalui menu File → Open Folder.

Sedangkan jika menggunakan Sublime Text, folder template dapat dibuka melalui menu File → Open Folder.

5. Mulai Mengedit File HTML

Setelah template terbuka, cari file index.html.

File inilah yang biasanya menjadi halaman utama website.

Pada bagian HTML, kita dapat mengganti:

• Nama website.
• Judul halaman.
• Deskripsi.
• Menu navigasi.
• Foto profil.
• Informasi pribadi.
• Profil sekolah atau organisasi.
• Kontak.
• Link media sosial.
• Portofolio.
• Informasi lainnya.

Sebagai contoh:

<h1>Abdullah Umar</h1>
<p>Guru dan Pengembang Website</p>

Kemudian kita dapat menyesuaikan bagian lainnya sesuai kebutuhan.

Jangan takut mencoba. Jika terjadi kesalahan, file dapat dikembalikan ke kondisi sebelumnya selama kita memiliki salinan template asli.

6. Pelajari Dasar-Dasar HTML

Untuk dapat mengedit template Bootstrap dengan lebih mudah, sebaiknya kita memahami dasar-dasar HTML terlebih dahulu.

Tampilan Sublime Text 3

Beberapa elemen HTML yang penting untuk dipahami antara lain:

<h1>Judul</h1>

<p>Ini adalah paragraf.</p>

<a href="https://contoh.com">Kunjungi Website</a>

<img src="gambar.jpg" alt="Gambar">

<button>Tombol</button>

Untuk belajar HTML secara gratis, kita dapat menggunakan dokumentasi dan tutorial dari W3Schools, kunjungi https://www.w3schools.com/html/default.asp

Dengan memahami HTML, proses mengubah template Bootstrap menjadi website milik sendiri akan jauh lebih mudah.

7. Sesuaikan CSS

Selain HTML, kita juga dapat mengubah tampilan website melalui CSS.

Misalnya, kita ingin mengubah ukuran judul:

h1 {
    font-size: 40px;
}

Atau mengubah warna teks:

h1 {
    color: #0d6efd;
}

Pada template Bootstrap, file CSS biasanya berada di dalam folder seperti:

assets/css/

Beberapa template juga memiliki file CSS khusus, misalnya:

style.css
main.css
custom.css

Sebaiknya perubahan desain pribadi ditempatkan pada file CSS khusus jika template menyediakannya. Dengan cara ini, kode bawaan Bootstrap lebih mudah dipertahankan.

8. Ganti Gambar dan Konten

Website akan terlihat lebih personal jika gambar bawaan template diganti dengan gambar milik sendiri.

Misalnya, gambar berada di:

assets/img/profile.jpg

Kemudian pada HTML:

<img src="assets/img/profile.jpg" alt="Foto Profil">

Pastikan nama file dan lokasi folder sesuai.

Perhatikan juga penggunaan huruf besar dan kecil pada nama file. Pada beberapa server, Foto.jpg dan foto.jpg dianggap sebagai dua file yang berbeda.

9. Uji Website di Browser

Sebelum website diunggah ke internet, lakukan pengujian terlebih dahulu.

Cara sederhana:

1. Buka folder template.
2. Cari file index.html.
3. Klik dua kali file tersebut.
4. Website akan terbuka di browser.
5. Periksa semua menu dan tampilan.

Periksa terutama:

• Apakah gambar tampil?
• Apakah CSS bekerja?
• Apakah menu dapat digunakan?
• Apakah tombol berfungsi?
• Apakah link tidak mengalami error?
• Apakah website tampil baik di smartphone?

Jika ada gambar atau CSS yang tidak muncul, biasanya masalahnya terdapat pada path atau lokasi file.

10. Pastikan Website Responsif

Salah satu kelebihan Bootstrap adalah dukungan terhadap desain responsif.

Website seharusnya dapat menyesuaikan tampilan pada:

• Smartphone.
• Tablet.
• Laptop.
• Komputer desktop.

Bootstrap memang dirancang dengan pendekatan mobile-first, sehingga komponen dan sistem grid-nya dapat digunakan untuk membangun tampilan yang responsif.

Kita dapat menguji tampilan responsif menggunakan fitur Developer Tools pada browser.

Pada Google Chrome, tekan:

F12 → Toggle Device Toolbar

Kemudian pilih ukuran perangkat yang ingin diuji.

11. Upload Website ke GitHub

Setelah website selesai dibuat dan diuji, langkah berikutnya adalah mempublikasikannya ke internet.

Salah satu pilihan yang praktis adalah GitHub Pages.

GitHub Pages merupakan layanan hosting website statis yang dapat mengambil file HTML, CSS, dan JavaScript dari repository GitHub kemudian mempublikasikannya menjadi website.

GitHub Pages Documentation

Membuat Repository

Masuk ke GitHub, kemudian buat repository baru.

Jika ingin membuat website pribadi dengan alamat:

username.github.io

nama repository dapat dibuat:

username.github.io

GitHub sendiri menyediakan panduan khusus untuk membuat user site dengan format tersebut.

Setelah repository dibuat, upload file website, terutama:

index.html
assets/
css/
js/
images/

Struktur folder harus tetap dipertahankan agar hubungan antara HTML, CSS, JavaScript, gambar, dan file lainnya tidak rusak.

 https://github.com/ ,  hasilnya dapat kamu kunjungi pada laman berikut https://abdumar.github.io/

Lantas, bagaimana cara UPLOAD File Boostrap ke GitHub? Simak ulasan selanjutnya yakni Cara Upload File ke GitHub dengan Drag and Drop