Saat ini website dapat kita buat dengan sangat mudah. Kita bisa memanfaatkan beberapa tools framework yang dapat mempermudah kita dalam pembuatan website termasuk proses menghias website dengan menggunakan CSS framework.
Berikut ini, kita akan membahas mengenai bagaimana cara membuat website responsive tanpa menggunakan template dengan memanfaatkan bootstrap 4 sebagai framework CSS.
Nah, Bootstrap adalah salah satu framework CSS yang bisa kita manfaatkan untuk mempermudah pekerjaan kita ketika ingin mempercantik tampilan website. Framework yang satu ini memainkan class di setiap tag html untuk memberikan efek CSS pada tag tersebut.
Orang-orang memang sudah banyak yang mengenal bootstrap sebagai framework yang sangat mudah untuk kita gunakan. Bagi orang yang awam, mungkin akan sedikit memerlukan adaptasi untuk memahami dan menghafalkan penggunaan class yang tepat untuk mendapatkan efek CSS yang sesuai.
Bagi kita yang masih pemula, kita tidak perlu merasa khawatir akan mengalami kesulitan ketika menggunakan framework yang satu ini. Dengan memanfaatkan dokumentasi Bootstrap yang sangat lengkap dan mudah untuk kita pahami, kita bisa menjadi pengguna Bootstrap yang handal dalam waktu yang singkat.
Selanjutnya, kita juga harus mengetahui hal-hal apa saja yang harus kita persiapkan. Dengan begitu, kita bisa mengikuti langkah-langkah pembuatan website dengan bersama-sama. Sehingga kita bisa lebih mengerti dan memahami proses pembuatan website dengan menggunakan bootstrap.
Hal yang Harus Kita Siapkan Sebelum Membuat Website Dengan Bootstrap
Ada beberapa hal yang harus kita siapkan untuk bisa membuat website dengan Bootstrap. Apa saja?
1. Bootstrap
Hal yang harus kita siapkan pertama kali tentunya adalah Bootstrap. Kita harus sudah mempersenjatai laptop maupun PC kita dengan framework yang satu ini. Kita bisa mendapatkan framework Bootstrap sendiri secara gratis melalui website resmi milik mereka.
Hal yang perlu kita perhatikan dalam menginstall Bootstrap di laptop maupun PC kita adalah versinya. Dalam proses membuat website dengan Bootstrap tanpa template kali ini, kita akan menggunakan Bootstrap versi 4. Walaupun terbilang sudah ketinggalan jaman, versi 4 sendiri sudah cukup stabil sehingga sangat jarang kita menemukan bug di versi 4 ini.
Berbeda dengan Bootstrap 4, pada Bootstrap versi 5 terdapat beberapa bug yang mungkin saja bisa kita alami. Hal ini karena Bootstrap 5 sendiri juga masih terus mengalami perkembangan dan update dari pihak pengembang Bootstrap sendiri.
Sebelum memulai tutorial pada kali ini, pastikan kita sudah mengetahui bagaimana cara menginstall Bootstrap 4 sebelumnya. Ketika kita sudah mengetahui hal tersebut, maka kita bisa melakukan proses instalasi bootstrap 4 dengan benar. Dengan begitu, kita sudah benar-benar siap menggunakan bootstrap 4 untuk mempermudah proses pembuatan website kita.
2. Text Editor
Selanjutnya, kita juga harus menyiapkan text editor sebelum membuat website dengan bootstrap 4. Hal ini juga sangat penting untuk kita persiapkan. Text editor merupakan senjata utama yang akan kita gunakan dalam tutorial kali ini.
Pastikan untuk menggunakan text editor yang paling nyaman menurut diri kita masing-masing. Dengan menggunakan text editor ternyaman, kita bisa menikmati proses pembelajaran kita kali ini. Kita bisa betah berlama-lama berada di depan layar laptop maupun kita dengan code editor kesukaan kita.
Bermacam-macam text editor terbaik bisa kita gunakan untuk mengikuti tutorial pada kali ini. Mulai dari Visual Studio Code, Notepad++, Sublime Text, dan lain sebagainya, bisa kita gunakan selama code editor tersebut support untuk mengedit file html.
Dengan menggunakan text editor yang sesuai, kode program yang kita ketik juga akan menjadi lebih rapi dan mudah melakukan debugging ketika terjadi error.
Setelah mengetahuinya, tentunya kita menjadi semakin tahu kelebihan dan kekurangan berbagai macam editor. Dengan begitu, kita bisa lebih mudah dalam memilih text editor mana yang akan kita gunakan.
Nah, pada kesempatan kali ini, tutorial membuat website ini akan menggunakan Visual Studio Code sebagai code editornya. Bagi kita yang merasa kurang nyaman dengan code editor yang satu ini, kita bisa menggunakan software code editor kesukaan masing-masing.
3. Web Browser
Peralatan ketiga yang harus kita siapkan sebelum masuk ke tutorial cara membuat website responsive dengan bootstrap 4 kali ini adalah web browser.
Browser adalah sebuah alat yang nantinya akan kita gunakan untuk melihat tampilan dari hasil kode program yang sudah kita tuliskan. Setelah menuliskan kode program di software code editor favorit masing-masing, kita bisa membuka file tersebut melalui browser.
Untuk syarat dari browser yang akan kita gunakan, tidak perlu ribet. Gunakan saja browser yang sudah biasa kita pakai untuk aktivitas browsing sehari-hari. Hal ini karena seluruh browser saat ini sudah pasti bisa kita gunakan untuk membuka file html.
Mungkin, ada beberapa tag html yang tidak bisa berjalan dengan maksimal di suatu browser. Namun, pada tutorial kali ini, kita akan menghindari penggunaan tag html semacam itu. Jadi, kita tidak perlu mengkhawatirkan hal semacam itu. Cukup gunakan saja browser paling enak menurut kita.
Jika kita masih merasa bingung dengan browser yang akan digunakan, gunakan saja browser Microsoft Edge yang biasanya merupakan browser bawaan dari Windows 10. Hal ini karena pada tutorial kali ini, kita akan menggunakan browser tersebut untuk melakukan pengetesan pada kode program kita.
Nah, sudah selesai mempersiapkan semua peralatan tempur tersebut? Jika sudah, sekarang kita bisa langsung masuk ke tutorial cara membuat website responsive tanpa template dengan bootstrap 4. Berikut pembahasan lengkapnya!
Cara Membuat Website Responsive dengan Bootstrap 4
Masuk ke bagaimana cara untuk membangun sebuah website dengan menggunakan bantuan dari salah satu framework css yaitu bootstrap 4. Nah sebelum masuk ke tahap pembuatannya, kita harus menentukan terlebih dahulu, kasus apa yang ingin kita ambil sebagai tujuan dari pembuatan website kita pada kali ini. Berikut pembahasannya!
1. Menentukan Studi Kasus yang Akan Digunakan
Usahakan untuk mengambil studi kasus yang sama atau mirip dengan yang digunakan pada tutorial kali ini. Kesamaan studi kasus ini tentunya akan mempermudah pemahaman kita tentang langkah-langkah dari tutorial membuat website dengan bootstrap 4.
Dengan begitu, kita bisa mendapatkan hasil akhir sesuai dengan yang kita inginkan setelah mengikuti tutorial dengan baik.
Nah, supaya kita bisa memiliki kasus studi yang sama, maka kita akan menggunakan kasus studi sebuah website portofolio sederhana saja ya. Nantinya, isilah beberapa data pada website portofolio, sesuai dengan kita masing-masing.
Karena kita sudah mendapatkan studi kasus yang akan kita gunakan, maka kita bisa langsung masuk ke tutorialnya. Pastikan untuk menyimak dan mengikutinya dengan baik ya!
2. Menyiapkan File Index.html Lengkap Dengan Bootstrap 4 di Dalamnya
Langkah pertama dari cara membuat website responsive tanpa template dengan bootstrap 4 adalah menyiapkan file index.html untuk tampilan utama yang akan tampil pada browser nantinya. Untuk menyiapkannya, silahkan buatlah sebuah file dengan nama index.html pada direktori yang akan digunakan untuk menempatkan website ini nantinya.
Jika bingung dengan direktori yang digunakan, silahkan ikuti saja sesuai dengan tutorial pada kali ini yaitu pada Documents yang bisa kita akses melalui ThisPC -> Documents pada File Explorer masing-masing. Buatlah folder belajar-website pada direktori tersebut.
Setelah membuat folder tersebut, sekarang kita bisa langsung masuk ke folder belajar-website untuk kemudian membuat file index.html di dalamnya. Caranya adalah dengan masuk ke folder belajar-website lalu tekan klik kanan pada area yang kosong kemudian pilih New -> Text Document.
Lalu tulis saja nama file text tersebut dengan nama index.html dan hilangkan format .txt yang berada di akhir nama file sebelumnya. Nah, apabila muncul peringatan seperti gambar di bawah ini, tekan saja Yes dan file index.html sudah selesai kita siapkan.
Setelah file index.html sudah kita siapkan, selanjutnya adalah mengisinya dengan starter template bootstrap 4. Karena kita sudah pernah membahas tentang cara instalasi bootstrap 4, maka sekarang tinggal kita gunakan pengetahuan tersebut untuk melakukan instalasinya pada file index.html kita ini. Langsung saja copy dan paste kode program starter template bootstrap 4 berikut ini.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Setelah menyalinnya, silahkan buka software code editor masing-masing untuk membuka file index.html. Setelah file tersebut sudah berhasil terbuka di code editor, silahkan paste saja kode starter template yang telah kita salin sebelumnya.
Nah, sampai pada langkah ini, kita sudah berhasil menyiapkan file index.html yang sudah terinstal bootstrap 4 di dalamnya.
Untuk melihat tampilan dari index.html ini, kita bisa menekan klik kanan pada file tersebut kemudian pilih Open with -> browser favorit kita. Setelah itu, kita akan melihat tampilan seperti gambar berikut ini pada browser yang kita gunakan.
3. Memberikan Navigation Bar Pada Index.html
Bagian pertama yang harus kita urus adalah Navigation Bar. Maka dari itu, cara membuat website responsive tanpa template dengan bootstrap 4 yang berikutnya adalah menambahkan navigation bar pada index.html kita.
Nah, karena kita menggunakan bootstrap 4 pada tutorial kali ini, maka proses membuat navigation bar ini tidak akan sesulit yang kita bayangkan. Kita bisa membuat navigation bar dengan menggunakan template yang sudah ada di website bootstrap 4. Silahkan langsung saja kunjungi website navigation bar bootstrap 4.
Ketika mengunjungi website tersebut, maka kita akan melihat tampilan seperti pada gambar di atas. Nah, perhatikan kode program yang ada pada website tersebut. Fokuslah terhadap bagian Nav karena pada bagian itu terdapat navigation bar paling sederhana yang bisa kita gunakan dalam studi kasus kita kali ini.
Nah, silahkan tekan tombol copy untuk menyalin kode program dari Nav tersebut. Atau kita juga bisa mendapatkan kode program tersebut dengan menyalinnya melalui kode program berikut ini.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Bingung dengan kode program tersebut? Mari kita bedah setiap bagiannya!
Pertama, kita perlu memperhatikan bagian baris pertama yaitu
<nav class="navbar navbar-expand-lg navbar-light bg-light">Nah, pada bagian itu terdapat class navbar, navbar-expand-lg, navbar-light dan bg-light. Class navbar berarti menunjukan bahwa tag tersebut merupakan navigation bar.
Kemudian untuk navbar-expand-lg itu lebih mengatur ke ukurannya terhadap ukuran window pada browser. Silahkan ubah ubah saja bagian lg nya saja menjadi sm, md, atau xs untuk melihat perubahan yang terjadi.
Selain itu, bagian yang tidak kalah penting adalah navbar-light dan bg-light. Navbar-light berarti bahwa navigation bar tersebut berwarna cerah atau putih sehingga class ini akan memberikan efek berupa mengubah tulisan pada navigation bar menjadi gelap. Sedangkan bg-light akan mengatur background dari navigation bar yang ada.
Untuk melakukan kustomisasi warna, silahkan ubah-ubah saja light menjadi dark, primary, danger, info, dan sebagainya sesuai dengan aturan pewarnaan bootstrap yang ada di dokumentasi mereka.
Letakkan kode program yang sudah kita salin, tepat di urutan pertama di dalam tag <body>.
Setelah meletakkan kode pada bagian tersebut, sekarang saatnya kita lihat terlebih dahulu. Sudah seperti apa tampilan dari file index.html kita. Silahkan langsung saja buka melalui browser masing-masing.
Jika sudah, sekarang saatnya mengubah sedikit bagian navbarnya. Ubahlah kode program mulai dari <nav> hingga </nav> sehingga menjadi seperti berikut ini.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Membuat Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tentang Saya</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hubungi Saya</a>
</li>
</ul>
</div>
</nav>
Setelah itu, Anda bisa hapus kode di bawah ini:
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
Nah, setelah selesai, sekarang kita akan mendapatkan tampilan index.html seperti berikut ini.
4. Menambahkan Jumbotron
Cara membuat website responsive tanpa template dengan bootstrap 4 yang selanjutnya adalah menambahkan jumbotron. Jumbotron menjadi hal yang penting untuk membuat tampilan website kita menjadi semakin menarik saat pertama kali dibuka oleh orang-orang.
Peran dari Jumbotron sendiri adalah sebagai tampilan pertama yang hadir saat website kita selesai di load. Langsung saja mari kita menuju ke website dokumentasi bootstrap 4 untuk mencari jumbotron yang cocok untuk kita.
Silahkan cari bagian fluid jumbotron karena jumbotron inilah yang akan kita gunakan pada kali ini. Setelah itu, langsung saja tekan copy yang ada di dalam kotak merah pada gambar di atas untuk menyalin kode dari fluid jumbotron ini. Kemudian ketika kita sudah menyalin kode nya, sekarang saatnya buka kembali file index.html kita dengan menggunakan software kode editor masing-masing.
Ketika kita sudah membuka file pada code editor, sekarang saatnya fokus ke bagian yang ditunjuk dengan kotak merah pada gambar di atas. Silahkan hapus kode <h1>Hello, World!</h1>.
Setelah menghapusnya, sekarang saatnya kita untuk meletakkan kode yang sudah kita salin sebelumnya dari fluid jumbotron melalui dokumentasi bootstrap sebelumnya. Dengan meletakkan kode tersebut, sekarang kita akan mendapatkan tampilan seperti berikut ini.
Kode yang kita tambahkan sebelumnya adalah :
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
Disini kita akan berfokus untuk membahas terkait class nya. Class jumbotron fluid-jumbotron menandakan bahwa div tersebut termasuk sebuah jumbotron dengan tipe fluid-jumbotron.
Class display-4 dan lead menandakan bahwa teks di dalamnya akan tampil dengan format display-4 maupun lead yang sudah diatur masing-masing oleh bootstrap.
Setelah mengetahui fungsi class nya, sekarang kita akan melakukan sedikit perubahan teks pada display-4 dan lead. Pada div dengan class display-4, gantilah teks nya menjadi Portofolio Ku. Kemudian pada div dengan class lead, ubahlah menjadi Selamat Datang di Website Portofolio Ku. Dengan begitu, kita akan mendapatkan tampilan seperti berikut ini.
Bagaimana sekarang? Setelah itu masih ada hal yang harus kita tambahkan untuk mengisi konten Tentang Saya. Untuk menambahkannya, langsung saja simak caranya berikut ini.
5. Menyusun Isi Konten Tentang Saya
Karena di bootstrap tidak ada dokumentasi yang bisa kita gunakan hanya dengan sekadar copy paste, maka kita bisa menggunakan kode berikut ini. Langsung saja silahkan salin kode berikut ini. Pastikan juga untuk membahas penjelasan di bawah kode tersebut.
<div class="container">
<div class="row">
<div class="col-md-2">
Foto Profil
</div>
<div class="col-md-6">
Informasi Pribadi
</div>
<div class="col-md-4">
Riwayat Pendidikan
</div>
</div>
</div>
Div dengan class row menandakan bahwa itu akan tampil dalam satu baris yang sama.
Kemudian div dengan class col-md-4 menandakan bahwa seluruh konten di dalamnya akan tampil sebagai kolom dengan berukuran 4/12 pada layar laptop (md = medium = laptop).
Bingung? Untuk lebih jelasnya, perhatikan gambar berikut ini yang menjelaskan struktur dari kode tersebut.
Kotak kotak pada gambar merupakan penjelasan dan ilustrasi dari struktur kode yang dituliskan di atas sebelumnya.
Nah, setelah menyalin kode sebelumnya, sekarang saatnya kita untuk menempelkan kode tersebut di file kita. Jadi, langsung saja buka file index.html dengan menggunakan code editor favorit kita masing-masing sehingga kode seluruhnya jadi seperti ini:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2">
Foto Profil
</div>
<div class="col-md-6">
Informasi Pribadi
</div>
<div class="col-md-4">
Riwayat Pendidikan
</div>
</div>
</div>
</body>
</html>
Disitu terdapat bagian untuk Foto Profil, Informasi Pribadi, dan Riwayat Pendidikan. Sekarang saatnya kita melengkapi bagian foto profil terlebih dahulu. Pada bagian ini, silahkan cari foto terbaik masing-masing, kemudian pindahkan foto tersebut di folder belajar-website sama seperti letak dari file index.html sebelumnya.
Pastikan juga kita sudah mengubah nama dari gambar yang akan kita gunakan menjadi foto_profil.jpg agar lebih mudah saat mengikuti langkah-langkah berikutnya.
Selanjutnya, silahkan buka kembali file index.html dengan menggunakan code editor favorit masing-masing. Setelah file terbuka, langsung saja gunakan kode berikut ini untuk menambahkan gambar pada website kita.
<img src="foto_profil.jpg" class="rounded-circle" width="50%">Penjelasan Program :
atribut src menunjukan alamat dari gambar yang ingin kita gunakan. Kemudian class rounded-circle berguna untuk membuat bentuk dari gambar yang kita gunakan menjadi berbentuk lingkaran tanpa harus mengedit foto yang akan kita gunakan secara manual.
Selanjutnya width tersebut berguna untuk mengatur lebar dari gambar kita. Ketika kita tidak menambahkan height untuk mengatur tingginya, maka tinggi dari gambar tersebut akan secara otomatis mengikuti lebarnya dengan mempertahankan rasio asli dari foto tersebut.
Untuk meletakkannya, perhatikanlah kotak merah pada gambar di atas atau lebih tepatnya pada baris ke 37 setelah div dengan class col-md-4. Letakkan kode yang sudah kita salin pada tempat tersebut dimana pada kode sebelumnya, disitu terdapat tulisan Foto Profil.
Hapus tulisan Foto Profil dan timpa dengan kode yang sudah kita salin sebelumnya. Setelah itu, kita akan melihat tampilan website seperti berikut ini.
Cara membuat website responsive tanpa template selanjutnya yang harus kita lakukan adalah mengurus bagian informasi pribadi. Setelah sebelumnya kita menyelesaikan bagian foto profil, sekarang saatnya untuk lanjut ke informasi pribadi.
Pada bagian ini, kita hanya akan menambahkan beberapa informasi dalam bentuk teks saja. Mulai dari nama lengkap, tempat tanggal lahir, alamat, media sosial, dan informasi lain terkait diri kita sendiri.
Langsung saja salin kode berikut ini kemudian letakkan di baris 100 pada file index.html di code editor masing-masing.
<div class="card">
<div class="card-header">
<h5 class="card-title">Informasi Ku</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">Nama Lengkap</div>
<div class="col-md-6">: Nama Lengkap Kita</div>
</div>
<div class="row">
<div class="col-md-6">Tempat, Tanggal Lahir</div>
<div class="col-md-6">: TTL Kita</div>
</div>
<div class="row">
<div class="col-md-6">Alamat</div>
<div class="col-md-6">: Alamat Kita</div>
</div>
<div class="row">
<div class="col-md-6">Kontak</div>
<div class="col-md">:</div>
<div class="col-md-6">
<ul>
<li>Instagram Kita</li>
<li>Facebook Kita</li>
<li>No HP Kita</li>
<li>Email Kita</li>
</ul>
</div>
</div>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Penjelasan Program :
Class card menunjukan bahwa seluruh tag di dalamnya akan tampil dengan format card pada bootstrap. Kemudian di card-body nya, terdapat beberapa baris dengan kolom untuk membuat tampilannya tampak lebih rapi. Sebenarnya, kode tersebut bisa kita temukan di dokumentasi bootstrap 4 melalui website mereka.
Setelah itu, kita akan mendapatkan tampilan seperti berikut ini.
Sekarang kita sudah selesai mengisi informasi pribadi kita. Sekarang saatnya untuk masuk ke cara membuat website responsive tanpa template dengan bootstrap 4 yang berikutnya yaitu mengisi bagian Riwayat Pendidikan.
Pada bagian ini, kita akan menggunakan List Group dari bootstrap 4 untuk menambahkan informasi terkait riwayat pendidikan kita. Langsung saja gunakan kode berikut ini untuk menambahkan informasi terkait riwayat pendidikan kita.
Pastikan untuk meletakkan kode berikut ini di dalam div dengan class col-md-4 di mana pada sebelumnya, di situ terdapat isi Riwayat Pendidikan. Hapus teks Riwayat Pendidikan tersebut kemudian gantilah dengan kode yang akan kita salin berikut ini.
<h5>Riwayat Pendidikan</h5>
<div class="list-group">
<div class="list-group-item list-group-item-action">
<h5 class="mb-1">Perguruan Tinggi Kita</h5>
<p class="mb-1">Jurusan Kita</p>
<small>2021 - Sekarang</small>
</div>
<div class="list-group-item list-group-item-action">
<h5 class="mb-1">Sekolah Menengah Atas</h5>
<p class="mb-1">Jurusan Kita</p>
<small>2021 - 2021</small>
</div>
<div class="list-group-item list-group-item-action">
<h5 class="mb-1">Sekolah Menengah Pertama</h5>
<small>2021 - 2021</small>
</div>
</div>
Penjelasan Program :
div class list-group untuk menandakan satu group list dari riwayat pendidikan. Kemudian div class list-group-item menandakan satu list item dari list group tersebut.
Lalu tag h5 dengan class mb-1 menandakan bahwa teks di dalamnya akan tampil dengan format h5 dengan margin-bottom nya adalah 1 pada ukuran bootstrap (maksimal ukuran adalah 5).
Untuk p dengan class mb-1 berisi konten tentang jurusan yang kita ambil. Sedangkan untuk tag small merupakan lama kita menempuh pendidikan di tempat itu.
Setelah menyalin dan menempelkannya pada bagian yang tepat, kita akan mendapatkan tampilan seperti berikut ini pada browser.
Sampai langkah ini, kita sudah berhasil menyusun isi dari konten Tentang Saya. Selanjutnya, kita perlu menambahkan sedikit bagian untuk menuliskan pengalaman dan pencapaian yang kita miliki, langsung saja mari kita lanjut ke cara membuat website responsive tanpa template dengan bootstrap 4 yang selanjutnya berikut ini.
Untuk menambahkan bagian pengalaman dan pencapaian tersebut, kita perlu menambahkannya di bawah dari Informasi Ku dan Riwayat Pendidikan. Untuk itu, kita bisa menyalin kode berikut ini terlebih dahulu kemudian menempelkannya pada file index.html kita pada baris ke 93 di code editor favorit masing-masing.
<div class="text-center mt-5 mb-5"><h4>Pencapaian dan Pengalaman Ku</h4></div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header"><h5 class="card-title">Pencapaian Ku</h5></div>
<div class="list-group list-group-horizontal">
<div class="list-group-item">Pencapaian 1</div>
<div class="list-group-item">Pencapaian 2</div>
<div class="list-group-item">Pencapaian 3</div>
<div class="list-group-item">Pencapaian 4</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header"><h5 class="card-title">Pengalaman Ku</h5></div>
<div class="list-group list-group-horizontal">
<div class="list-group-item">Pengalaman 1</div>
<div class="list-group-item">Pengalaman 2</div>
<div class="list-group-item">Pengalaman 3</div>
<div class="list-group-item">Pengalaman 4</div>
</div>
</div>
</div>
</div>
Pada bagian ini, sebenarnya kita hanya menggabungkan dari dua komponen yang sudah kita pakai sebelumnya yaitu card dan list group. Jadi, kita gunakan card untuk membungkus tiap list untuk membedakan antara pengalaman dan juga pencapaian.
Setelah menempelkannya, sekarang kita akan mendapatkan tampilan seperti berikut ini pada browser.
Sampai tahap ini, sebenarnya kita sudah selesai membuat website dengan bootstrap 4. Namun, untuk melengkapi portofolio kita, kita butuh yang namanya bagian dimana orang-orang bisa langsung menghubungi kita.
Maka dari itu, kita harus menambahkan bagian untuk meletakkan kontak kita dengan lebih jelas. Langsung saja kita masuk ke langkah berikutnya.
6. Menambahkan Bagian Menu Hubungi Saya
Cara membuat website responsive tanpa template dengan bootstrap 4 yang berikutnya adalah menambahkan bagian Hubungi Saya.
Bagian yang satu ini akan memuat informasi mengenai whatsapp kita, email kita, dan semua akun media sosial yang ketika di klik, akan langsung menuju ke halaman dari akun medsos kita tersebut.
Maka dari itu, kita butuh yang namanya anchor di sini. Langsung saja gunakanlah kode berikut ini untuk menambahkan anchor text tersebut. Letakkan kode berikut ini tepat berada di luar dari div penutup paling terakhir atau tepat di sebelum tag <script>.
<div class="container">
<div class="text-center mt-5 mb-5"><h4>Hubungi Saya</h4></div>
<div class="row justify-content-center">
<div class="col-md-3">
<a href=""><img src="https://seeklogo.com/images/W/whatsapp-icon-logo-6E793ACECD-seeklogo.com.png" width="150px"></a>
<p class="mt-2">Nomor WhatsApp Kita</p>
</div>
<div class="col-md-3">
<a href=""><img src="https://i.pinimg.com/originals/8f/c3/7b/8fc37b74b608a622588fbaa361485f32.png" width="150px"></a>
<p class="mt-2">Alamat Email Kita</p>
</div>
<div class="col-md-3">
<a href=""><img src="https://cdn-icons-png.flaticon.com/512/174/174855.png" width="150px"></a>
<p class="mt-2">Akun Instagram Kita</p>
</div>
<div class="col-md-3">
<a href=""><img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/facebook-512.png" width="150px"></a>
<p class="mt-2">Akun Facebook Kita</p>
</div>
</div>
</div>
Disitu terdapat a href dengan image di dalamnya. Inilah yang membuat gambar icon dari masing-masing kontak bisa langsung di klik. Setelah di klik akan langsung mengarah ke akun media sosial masing-masing.
Untuk mengaktifkannya, kita hanya perlu mengisi bagian href pada tag a tersebut saja. Isilah dengan link atau url yang ingin kita tuju ketika menekan tombol tersebut.
Kemudian jika kita sudah menempelkannya, maka kita akan mendapatkan tampilan browser seperti berikut ini.
Selanjutnya, kita juga perlu menambahkan sedikit copyright di bagian paling bawah dan juga mengaktifkan tombol pada navigation bar.
7. Menambah Copyright
Pertama, kita akan menambahkan copyright terlebih dahulu. Berikut kode yang harus kita tambahkan tepat berada di atas tag <script>. Langsung saja, salin lah kode berikut ini.
<div class="bg-dark text-center p-4 text-light">
<small>Copyright © 2021. Makinrajin.com | All rights reserved.</small>
</div>
Class bg-dark berguna untuk memberikan warna gelap pada background nya. Kemudian text-center akan membuat tulisan berada di tengah. Sedangkan untuk p-4 akan memberikan padding dengan ukuran 4 dari bootstrap.
Selanjutnya untuk text-light akan memberikan warna putih pada tulisannya. Terakhir, © disitu merupakan kode untuk menampilkan lambang copyright pada browser.
Dengan menempelkan kode tersebut, maka kita akan mendapatkan tampilan pada browser seperti gambar di bawah.
Sampai sini, kita sudah selesai menyusun isi kontennya. Sekarang saatnya untuk mengaktifkan tombol yang ada. Langsung saja berikut caranya.
8. Mengaktifkan Tombol
Sampai tahap ini, kita sudah memiliki beberapa tombol namun sayangnya masih belum bisa kita gunakan. Maka dari itu, kita perlu mengaktifkan tombol tersebut.
Pertama, kita akan mulai terlebih dahulu dari tombol pada navigation bar. Langsung saja kita menuju ke kode pada bagian tersebut yang terletak di baris ke 17.
Kita perlu menambahkan bagian yang ingin kita tuju tepat di sebelah tanda pagar tersebut. Untuk home, tambahkan saja home sehingga isi href menjadi #home.
Kemudian untuk Tentang Saya, tambahkan tentangsaya sehingga isi dari href tersebut menjadi #tentangsaya. Sedangkan untuk Hubungi Saya, kita bisa menambahkan hubungisaya sehingga isi href menjadi #hubungisaya.
Selanjutnya, kita juga perlu memberikan tanda sehingga browser bisa mengetahui dimana bagian home, tentangsaya, dan hubungisaya itu berada. Untuk itu, kita bisa menuju ke div dengan class container.
Pada masing-masing div tersebut, tambahkan saja atribut id kemudian isi dengan kata yang sudah kita tambahkan pada href sebelumnya namun tanpa tanda pagar. Isilah masing-masing container dengan kata yang sesuai dan menunjukan bagian dari menu tersebut.
Sebagai contoh, kita akan menambahkan id pada container yang berisi tentang jumbotron. Pada bagian ini, silahkan tambahkan atribut id setelah itu isilah value nya dengan “home” sehingga menjadi seperti gambar berikut ini.
Begitu pula dengan container yang ada di bawahnya yang menandakan bagian tentang saya dan juga hubungi saya. Setelah itu, silahkan coba untuk menekan tombol pada navigation bar. Ketika menekannya, maka tombol tersebut akan mengarahkan ke bagian yang kita inginkan sesuai dengan yang sudah kita beri id sebelumnya.
Lalu masih ada satu tombol lagi pada bagian Informasi Ku yang berisi Go Somewhere. Ubahlah teks nya menjadi Hubungi Saya kemudian arahkan ke bagian sesuai.
Setelah mengubah sedikit tombol tersebut, sekarang kita akan mendapatkan tampilan pada browser seperti pada gambar berikut ini.
Nah, sampai pada tahap ini, sekarang kita sudah berhasil membuat website dengan menggunakan Bootstrap 4 tanpa memakai eksternal CSS tambahan. Website Portofolio yang sudah berhasil kita buat ini memiliki fungsi lengkap sebagai website portofolio pada umumnya.
Terdapat navigation bar yang sudah berfungsi apabila kita tekan tombolnya. Kemudian ada informasi tentang diri kita sendiri yang tentunya sangat informatif dan tersusun dengan cukup rapi berkat bantuan bootstrap 4 ini.
Dan yang terakhir juga ada bagian untuk meletakkan kontak kita yang bisa orang-orang hubungi apabila ada yang tertarik untuk menghubungi kita.
Itulah Dia Cara Membuat Website Dengan Bootstrap 4
Hasil dari pembuatan website pada kali ini masih terbilang sangat sederhana. Kita masih belum terlalu bermain dengan warna pada tutorial kali ini. Hal ini karena tutorial cara membuat website responsive kali ini berfokus terhadap bagaimana cara menggunakan bootstrap 4 untuk menyusun dan mendesain tata letak dari halaman portofolio kita.
Nah, bagi yang ingin bereksperimen dengan warna yang ada pada bootstrap, silahkan kunjungi dokumentasi bootstrap 4 yang membahas tentang warna pada bootstrap 4. Dengan mencari tahu lebih lanjut tentang hal tersebut, kita bisa melakukan beberapa percobaan dengan menambahkan class untuk mengubah warna pada background maupun tulisannya.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development