Web Development Introduction — Membuat Web dengan Bootstrap
Belajar cara membuat website portofolio dengan Bootstrap
Halo, Berjumpa lagi dengan Saya Hanas Bayu Pratama sebagai mentor Web Development. Kali ini kita akan mulai untuk membuat website portfolio menggunakan Bootstrap. Kalau kalian punya Website Portfolio, pastinya perusahaan bakal mudah mencari kalian sehingga kalian dapat pekerjaan.
Sebelum membuat websitenya, saran saya kalian yang belum paham konsep Bootstrap, pahami dulu Konsep Bootstrap di Web Development Introduction — Belajar Bootstrap agar kalian tidak kebingungan untuk mengikuti tutorial ini karena konsep paling dasar sudah dibahas pada tutorial sebelumnya.
Ok, Bila sudah paham mengenai konsep dasar bootstrap. Let’s Go!
Eits, sebelum ngoding alangkah baiknya kita harus install Extensi yang ada didalam vs-Code agar memudahkan kita ngoding
Apa aja sih fungsi dari ektensi VsCode yang ada digambar
- Auto Rename Tag → berfungsi untuk merubah tag html secara otomatis
- Beautify → Codingan dapat dirapihkan secara otomatis(hanya berlaku untuk html, css, dan javascript).
- Bootstrap 4, Font awesome Snippet→ dapat memanggil kelas bootstrap dan font-awesome tampa harus melihat dokumentasi bootstrap.
- Bracket Pair Colorized 2→ membuat tanda warna pada kurung buka dan tutup.
- Indent Rainbow → membuat warna pada jarak antara bagian kiri VsCode dan codingannya.
- Live Server → dapat membuka file html secara langsung lewat VsCode. selain itu browser dapat refresh secara otomatis tampilannya ketika menggunakan ekstensi ini. namun ini hanya berlaku untuk file html saja.
- One Dark Pro → membuat tampilan seperti code editor Atom
- Open in Browser → dapat membuka file html secara langsung lewat VsCode. selain itu dengan ekstensi ini kalian dapat membuka file html melalui browser yang berbeda dan untuk refresh halaman html masih manual jika menggunakan ini.
Setelah itu kalian ke file →preferances →settings →Text Editor →Formatting
Aktifkan format On save agar codingan kita dapat dirapihkan secara otomatis oleh Beautify jika kita save filenya.
Setelah itu, langkah awal untuk membuat website menggunakan bootstrap adalah kalian harus ke documentation bootstrap terlebih untuk copas seluruh isi starter template agar bisa mengikuti tutorial ini dengan benar.
Atau kalian bisa copas dari source code yang ada dibawah(ketika tutorial ini dibuat menghubungkan bootstrapnya secara offline).
Saran saya kalian pakai folder yang pernah kita buat di Web Development Introduction — Belajar Bootstrap agar dapat menghemat waktu dan kuota internet. Setelah itu kita buat file baru html di folder yang pernah kita pakai sebelumnya.
<!DOCTYPE html>
<html id="home" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"><!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet"><!-- My Css -->
<link href="css/style.css" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.4.1.min.js">
</script>
<script src="js/popper.min.js">
</script>
<script src="js/bootstrap.js">
</script>
</body>
</html>Berbeda dengan sebelumnya, kalau sebelumnya kita tidak menggunakan icon font-awesome, sekarang kita akan menggunakan icon dari font awesome untuk latihan membuat website karena pastinya kalau sebuah website memiliki icon untuk menggambarkan sesuatu, pastinya akan sangat menarik untuk user yang melihat website kalian.
Sekarang kita akan menggunakan font-awesome versi free nya, ya karena kalian tau lah kenapa kita pakai versi free nya 😁😁😁 .
Kita dapat menghubungkan font-awesome secara offline
Secara Offline
Untuk menghubungkan font-awesome secara offline kalian bisa download disini. Setelah di download, font-awesome terdapat folder css, javascript, dan webfont. Masuk ke folder css dan javascript. Setelah itu ambil file all.css, all.js dan juga folder webfonts karena kita hanya akan menggunakan file dan folder tsb. jika sudah didownload dan extract, kemudian pindahkan file all.css ke folder css bootstrap, file all.js ke folder js bootstrap dan juga tempatkan folder webfonts sejajar dengan folder css dan js. setelah itu, bisa dihapus semua folder awesome karena untuk menggunakan font-awesome secara offline kita tidak perlu menggunakan seluruh file yang ada di font-awesome.
Bila sudah kita hubungkan file font-awesome dengan cara seperti dibawah (perhatikan tempat kalian menyimpan dan nama foldernya).
<!-- Font Awesome Css -->
<link rel="stylesheet" href="css/all.css">Secara Online
Menambahkan kode dibawah ini untuk CSSnya pada tag head. Pastikan koneksi internet kalian selalu aktif ya ^^
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">Ok, Jika file dari font-awesome sudah terhubung kita langsung membuat website bareng-bareng.
Let’s Start Together
Pertama-tama kita akan membuat navbar untuk navigasi
Apa itu navbar?
Navbar adalah garis besar topik content sebuah website sehinga ketika user membuka website maka user bisa tahu apa aja isi dari suatu website.
Selain itu, ketika kita membuat navbar, maka user dapat mengklik text yang ada di navbar untuk berpindah bagian website atau pindah ke halaman lain.
Agar perpindahan antar konten lebih lembut, saran saya kalian install smooth-scroll dan setelah itu hubungkan filenya agar dapat berfungsi.
Untuk menyambungkan smooth-scroll mirip seperti menyambungkan JQuery dengan file html.
Saran saya kalau kalian belum paham tentang javascript, kalian bisa ke Web Development Introduction — Belajar Javascript karena disitu sudah dijelaskan cara menggunakan javascript dengan baik dan benar.
Setelah itu kalian tuliskan code yang ada dibawah agar dapat dijalankan pada navbar (sintaks ini lebih baik ditulis menggunakan internal javascript karena hanya 1 baris saja yang digunakan).
<script src="js/smooth-scroll.js"></script>
<script>
var scroll = new SmoothScroll('a[href*="#"]');
<script>setelah itu kalian dapat membuat codingan Navbar dari codingan yang ada dibawah:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container">
<a class="navbar-brand" href="#home">Hanas Bayu Pratama</a> <button aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNavDropdown" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link page-scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav><!-- Akhir Navbar -->
Untuk pewarnaan bisa lihat dokumentasi bootstrapnya.
Untuk class nav dan navbar pada bootstrap sama saja fungsinya, yaitu untuk membuat tampilan menu navigasi menjadi bagus. Tetapi Perbedaan nav dan navbar adalah terletak di background warnanya. Nav itu tidak memiliki background warna sedangkan Navbar itu memiliki background warna.
untuk dokumentasi penggunaan navbar kalian bisa lihat dibawah
Setelah selesai membuat navbar, kita akan membuat jumbotronnya.
Lalu apa itu Jumbotron?
Jumbotron bisa disebut headline atau banner sebuah website. Ibarat nya jumbotron itu seperti iklan yang tampil diatas jalan raya.
Selain itu jumbotron adalah element besar yang pertama kali dilihat ketika membuka website. jumbotron ini bisa berisi informasi singkat ataupun gambar.
kalian bisa mengetikkan codingan dibawah untuk membuat Jumbotron
<div class="jumbotron jumbotron-fluid mt-5">
<div class="container text-center">
<!-- untuk gambar bebas -->
<img class="rounded-circle img-thumbnail" src="img/student.png" width="300">
<h1 class="display-4">Hanas Bayu Pratama</h1>
<p class="lead">Student | Web Development</p>
</div>
</div><!-- Akhir Jumbotron -->
Kalian bisa pakai gambar kalian sendiri atau icon. dokumentasi lengkap mengenai Jumbotron bisa lihat dibawah.
Bila sudah kita akan membuat content About
Apa itu About?
Jadi di dalam content About kita dapat menjelaskan deskripsi singkat mengenai diri kita sehingga user dapat mengetahui siapa kita sebenarnya. Jadi about us dapat kita buat seperti codingan dibawah.
<section class="about" id="about">
<div class="container">
<div class="row">
<div class="col text-center">
<h2>About</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem asperiores qui ex suscipit repudiandae blanditiis nam. Alias sapiente asperiores obcaecati. Quo perferendis fugiat eius optio corporis sequi neque fuga amet.</p>
</div>
<div class="col-md text-justify">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit iusto veniam repellendus perspiciatis id natus. Molestias accusantium itaque mollitia velit aliquam ab officiis qui aliquid rerum dicta, aut, eligendi tempore.</p>
</div>
</div>
</div>
</section><!-- Akhir About -->Selain itu kita akan menggunakan style css sendiri dikarenakan tidak semua design yang kita inginkan dapat dipenuhi oleh bootstrap.
Kalian bisa buat file style.css didalam folder css dan masukkan code berikut ke dalam file style.css.
hr {
width: 250px;
border-top: 3px solid #007BFF;
}
.about {
margin-bottom: 100px;
}
a {
text-decoration: none !important;
}
.card:hover {
background-color: #ddd;
}
Karena ini hanya tutorial saja saya hanya akan text random saja yaitu lorem ipsum, cara buatnya gimana? Klik disini. Tetapi apabila kalian ingin menampilkan portofolio kalian maka tidak boleh pakai text random. Karena bakal kelihatan aneh kalau text random dipakai ketika website kalian sudah terpublish dan pastinya user bakal kebingungan. 😁😁😁
Jika sudah, kita menuju step selanjutnya, yaitu menggunakan icon yang ada di font-awesome agar website kita lebih terlihat menarik.
Pertama-tama kita akan membuat section. Setelah itu membuat container row dan column dalam section yang sudah dibuat, lalu kita tinggal memasukkan icon font-awesome dalam tag <i>
<section class="skills bg-light" id="skills">
<div class="container">
<!-- Baris Judul -->
<div class="row">
<div class="col text-center">
<h3 class="pt-3">Skills</h3>
<hr>
</div>
</div><!-- Baris Web Development 1 -->
<div class="row my-5">
<!-- HTML -->
<div class="col-md text-center">
<i class="fab fa-html5 h1"></i>
<h3>HTML</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, itaque.</p>
</div><!-- CSS -->
<div class="col-md text-center">
<i class="fab fa-css3-alt h1"></i>
<h3>CSS</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, dolores.</p>
</div><!-- Javascript -->
<div class="col-md text-center">
<i class="fab fa-js-square h1"></i>
<h3>Javascript</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, vero.</p>
</div>
</div><!-- Baris Web Development 2 -->
<div class="row text-center">
<!-- PHP -->
<div class="col-md text-center">
<i class="fab fa-php h1"></i>
<h3>PHP</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid, nam?</p>
</div><!-- Bootstrap -->
<div class="col-md text-center">
<i class="fab fa-bootstrap h1"></i>
<h3>Bootstrap</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, itaque.</p>
</div><!-- Laravel -->
<div class="col-md text-center">
<i class="fab fa-laravel h1"></i>
<h3>Laravel</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti, fuga.</p>
</div>
</div>
</div>
</section><!-- Akhir Skills -->
PS: Tidak semua icon dapat digunakan, karena kita menggunakan font-awesome versi gratis, kita tidak dapat menggunakan icon yang premium.
Untuk jenis-jenis icon yang terdapat di font-awesome dapat kalian lihat dokumentasinya.
Setelah itu kita akan membuat bagian portfolio yang menampilkan gambar sebuah project yang kita pernah buat (kali ini saya pakai gambar laptop biar lebih mudah dipahami). kemudian bagian ini kita menggunakan komponen card bootstrap.
Apa itu card bootstrap?
Card dalam dunia nyata adalah sebuah kertas kecil yang memiliki sisi dan garis pembatas diluar. Lonsep card dalam bootstrap mirip seperti card dalam dunia nyata. Card dalam bootstrap ini fungsinya dapat membuat list sebuah produk. Untuk contohnya dapat lihat dibawah.
Ini bukan endorse ya. 😄😄😄
Namun, dapat dilihat bahwa card dalam suatu website (contohnya website toko online) digunakan untuk menampilkan suatu produk.
kalian bisa membuat card yang mirip seperti diatas dengan cara seperti dibawah
<section class="portfolio mt-5" id="portfolio">
<div class="container">
<!-- Baris Judul -->
<div class="row mb-4">
<div class="col text-center">
<h2>Portfolio</h2>
<hr>
</div>
</div><!-- Baris Cart 1 -->
<div class="row mb-4">
<div class="col-md mb-3">
<!-- Cart 1 -->
<div class="card">
<a class="text-dark" href="#"><img class="card-img-top" src="img/1.png">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div></a>
</div>
</div><!-- Cart 2 -->
<div class="col-md mb-3">
<div class="card">
<a class="text-dark" href="#"><img class="card-img-top" src="img/2.png">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div></a>
</div>
</div><!-- Cart 3 -->
<div class="col-md mb-3">
<div class="card">
<a class="text-dark" href="#"><img class="card-img-top" src="img/3.png">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div></a>
</div>
</div>
</div><!-- Baris Card 2 -->
<div class="row mb-4">
<!-- Cart 4 -->
<div class="col-md mb-3">
<div class="card">
<a class="text-dark" href="#"><img class="card-img-top" src="img/4.png">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div></a>
</div>
</div><!-- Cart 5 -->
<div class="col-md mb-3">
<div class="card">
<a class="text-dark" href="#"><img class="card-img-top" src="img/5.png">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div></a>
</div>
</div><!-- Cart 6 -->
<div class="col-md mb-3">
<div class="card">
<a class="text-dark" href="#"><img class="card-img-top" src="img/6.png">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div></a>
</div>
</div>
</div>
</div>
</section>
Untuk gambar kalian sesuaikan dengan gambar yang kalian punya ya, saran saya sebaiknya kalian ambil foto dari unsplash.com dikarenakan fotonya bebas copyright sehingga aman digunakan.
Untuk dokumentasi lengkap mengenai penggunakan card kalian bisa lihat dibawah:
Kalian bisa buat sendiri halaman untuk menampilkan deskripsi project yang kalian buat.
Setelah itu kita akan buat bagian terakhir dari sebuah website, yaitu contact Me yang fungsinya adalah ketika user mau berhubungan dengan kita, maka dia bisa mengirimkan pesan kepada kita secara langsung
<section class="contact bg-light" id="contact">
<div class="container">
<div class="row py-4">
<div class="col text-center">
<h2>Contact Me</h2>
<hr>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-8">
<form>
<!-- Name -->
<div class="form-group">
<label for="name"><strong>Name</strong></label> <input autocomplete="off" class="form-control" id="name" placeholder="input your name" type="text">
</div><!-- Email -->
<div class="form-group">
<label for="email"><strong>Email</strong></label> <input autocomplete="off" class="form-control" id="email" placeholder="input your email" type="email">
</div><!-- Telephone -->
<div class="form-group">
<label for="phone"><strong>Phone Number</strong></label> <input autocomplete="off" class="form-control" id="phone" placeholder="input your email" type="number">
</div><!-- Choose Category -->
<div class="form-group">
<label for="category">Category</label> <select class="form-control" id="category">
<option value="choose">
-- Choose Category --
</option>
<option value="front-end">
Web Design
</option>
<option value="development">
Web Development
</option>
</select>
</div><!-- Message -->
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" placeholder="input message" rows="4"></textarea>
</div><!-- Button -->
<button class="btn btn-block btn-success">Send the Message</button>
</form>
</div>
</div>
</div>
</section>
Untuk dokumentasi penggunaan forms dan input group kalian bisa lihat dibawah:
Setelah itu kita akan membuat bagian terakhir untuk sebuah website, yaitu footer atau istilahnya catatan kaki. Footer ini pastinya digunakan agar website kita dapat memiliki hak cipta. Kalian pastinya kesal dong kalau website kalian di copas keseluruhan dan yang copas ngaku kalau itu hasil karya dia. 😡😡
<footer class="bg-primary text-white mt-5">
<div class="container">
<div class="row">
<div class="col text-center pt-3">
<p>Copyright © 2019.</p>
</div>
</div>
</div>
</footer><!-- Akhir Footer -->
Selamat, kalian sekarang sudah bisa menjadi seorang front-end web yang membuat tampilan sebuah halaman website menggunakan HTML, CSS, JS dan Framework CSS yaitu Bootstrap. Saran saya bagi kalian yang masih bingung baca dulu tutorial sebelumnya agar kalian paham mengenai tutorial yang baru dipublish pengajar web karena untuk tutorial selanjutnya yang akan dipublish pengajar web pastinya berhubungan dengan tutorial sebelumnya.
Kalian bisa coba-coba sendiri membuat tampilan website menggunakan Bootstrap. Tidak harus temanya website portfolio juga kok. Bisa juga temanya toko-online, blog, kecantikan, game, dsb.
Ok, Sekian dari kami sebagai Pengajar Web, silahkan Bereksperimen sendiri membuat tampilan sebuah website wahai Pejuang Code.
