Cara Membuat Website Dengan Bootsrap 4

Written by Azriel Muhammadd on Saturday, 20 July 2019

Pada materi sebelumnya saya sudah menjelaskan tentang panduan cara membuat website yang baik dan benar. Selain itu juga saya juga sudah memberikan materi pembuatan desain ui & ux website yang akan di implementasikan sekarang ini. Jadi bagi kalian yang belum membaca materi sebelumnya silahkan baca dahulu disini. JIka sudah, yuk langsung saja kita lanjut kepembahasan kali ini.

Sebelum membuat, mari kita membuat sebuah folder yang nantinya akan digunakan sebagai tempat penyimpanan semua file yang berhubungan dengan wesite yang akan kita buat. Saya disini membuat foldernya dengan nama "azrielfatur". Dan didalam folder tersebut, kita buat lagi sebuah folder dengan nama "image" yang akan digunakan sebagai penyimpanan gambar.

Jika sudah, maka selanjutnya mari kita export semua material yang sebelumnya sudah kita buat di desain ui website kemarin. Caranya pergi ke File > Export > Export..., dan pilih semua material yang dibutuhkan, seperti icon-icon pada my service. JIka kalian menggunakan aplikasi trial, silahkan di export manual dengan membuat lembar kerja baru dan sesuaikan ukuran icon tersebut, lalu export to png dan letakan dalam folder image yang berada didalam folder azrielfatur. Dan buat juga folder css yang berada di folder azrielfatur.

Jika semua persiapan sudah siap, silahkan buka folder kalian pada text editor kesayangan kalian. Disini saya menggunakan Visual Studio Code. Lalu buatlah sebuah file index.html pada folder azrielfatur dan paste source code dibawah ini pada file tersebut.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Lalu silakan text pada masing-masing browsermu, jika hasilnya sama seperti dibawah, maka bootstrapmu sudah berhasil dipasang. Dan jika tampilnya lain, berarti kemungkinan laptop/komputermu tidak memiliki akses internet.

Selanjutnya silahkan copy source code dibawah ini yang sudah saya tambahkan navbar, dan semua section yang sudah kita buat kemarin.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Pacifico|Poppins:300,400,500,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">

<title>azrielfatur</title>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">AzrielFatur</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#">HOME</a>
<a class="nav-item nav-link" href="#">ABOUT</a>
<a class="nav-item nav-link" href="#">SERVICE</a>
<a class="nav-item nav-link" href="#">PORTFOLIO</a>
<a class="nav-item nav-link" href="#">CONTACT</a>
</div>
</div>
</div>
</nav>

<!-- INFO ME -->
<div class="jumbotron infome">
<div class="container text-center">
<div class="info">
<h1 class="display-3">Hello, I am AzrielFatur</h1>
<p>Full Stack Developer</p>
<p>
<a href="https://facebook.com"><i class="fab fa-facebook-square"></i></a>
<a href="https://google.com"><i class="fab fa-google-plus-square"></i></i></a>
<a href="https://instagram.com"><i class="fab fa-instagram"></i></a>
<a href="https://twitter.com"><i class="fab fa-twitter-square"></i></a>
<a href="https://youtube.com"><i class="fab fa-youtube-square"></i></a>
</p>
</div>
</div>
</div>

<!-- ABOUT ME -->
<div class="container about mt-5">
<h3 class="text-center mb-5">About Me</h3>
<div class="row">
<div class="col-sm-5">
<img src="image/about-me.png" alt="About Me" width="100%">
</div>
<div class="col-sm-7 mt-4">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Contrary to popular belief, Lorem Ipsum is not simply random text</p>
<label for="">Gravit Designer</label>
<div class="progress" style="height:20px">
<div class="progress-bar" role="progressbar" style="width: 95%;">95%</div>
</div>
<br>
<label for="">Adobe XD</label>
<div class="progress" style="height:20px">
<div class="progress-bar" role="progressbar" style="width: 75%;">75%</div>
</div>
<br>
<label for="">Corel Draw</label>
<div class="progress" style="height:20px">
<div class="progress-bar" role="progressbar" style="width: 60%;">60%</div>
</div>
<br><br>
<a href="" class="btn btn-secondary">Lihat Selengkapnya</a>
</div>
</div>
</div>

<!-- MY SERVICE -->
<div class="container service mt-5">
<h3 class="text-center mb-5">My Service</h3>
<div class="row text-center">
<div class="col-sm-4">
<img src="image/ui-ux.png" alt="UI UX">
<h5>UI & UX Desainer</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<div class="col-sm-4">
<img src="image/frond-end.png" alt="Front End">
<h5>Frond End Desainer</h5>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-sm-4">
<img src="image/back-end.png" alt="Back End">
<h5>Back End Developer</h5>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical.</p>
</div>
</div>
</div>

<!-- CONTACT ME -->
<div class="container contact mt-5">
<h3 class="text-center mb-5">Contact Me</h3>
<div class="row">
<div class="col-sm-6">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5690.134563761561!2d107.03913649883373!3d-6.283676803156401!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e698e2e35068247%3A0x43186ec10ad9023f!2sJl.+Grand+Wisata%2C+Lambangsari%2C+Kec.+Tambun+Sel.%2C+Bekasi%2C+Jawa+Barat!5e0!3m2!1sid!2sid!4v1563597916605!5m2!1sid!2sid" width="100%" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
<a href=""><i class="fas fa-map-marker-alt"></i> &nbsp;Jalan Grand Wisata, Lambangsari, Bekasi</a><br>
<a href=""><i class="fas fa-phone"></i>+021 9819 9181</a><br>
<a href=""><i class="fas fa-envelope"></i>info@azrielfatur.com</a>
</div>
<div class="col-sm-6">
<form action="">
<div class="form-group">
<label for="Nama">Name:</label>
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="form-group">
<label for="Email">Email:</label>
<input type="email" class="form-control" placeholder="Your Email">
</div>
<div class="form-group">
<label for="Message">Message:</label>
<textarea class="form-control" placeholder="Your Message"></textarea>
</div>
<a href="" class="btn btn-secondary">Submit</a>
</form>
</div>
</div>
</div>

<!-- FOOTER -->
<div class="jumbotron-fluid footer mt-5">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h5>AzrielFatur</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-sm-4">
<h5>Service</h5>
<a href="">UI & UX</a><br>
<a href="">Front End Desainer</a><br>
<a href="">Back End Developer</a>
</div>
<div class="col-sm-4">
<h5>Contact</h5>
<a href=""><i class="fas fa-map-marker-alt"></i> Jalan Grand Wisata, Lambangsari, Bekasi</a><br>
<a href=""><i class="fas fa-phone"></i>+021 9819 9181</a><br>
<a href=""><i class="fas fa-envelope"></i> info@azrielfatur.com</a>
</div>
</div>
<br>
<p class="text-center">Copyright azrielfatur All Right Reserved</p>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Maka seharusnya, akan tampil seperti dibawah ini.

Enaknya menggunakan Bootstrap ini kita tidak perlu repot-repot membuat tampilan mobile pada web kita. Karena bootstrap sudah membuatkannya. Dan kita hanya perlu memanggil class-class nya saja. Berikut tampilan mobile dari web tersebut.

Tampilan desainnya pada web ini memang masih default bawaan dari Bootstrap, jadi wajar saja tampilannya kurang enak di pandang. Maka dari itu selanjutnya saya akan mencoba merapihkan website ini agar terlihat lebih rapih, elegan, dan clean.

Buatlah folder CSS di dalam folder azrielfatur, dan buat file style.css di dalam folder CSS Lalu kita akan memanggil file css tersebut di index.html dengan cara menambahkan code ini di atas </head>.

<link rel="stylesheet" href="css/style.css">

Lalu copy source code ini kedalam file style.css tersebut. Maka secara otomatis tampilannya akan berubah menjadi lebih enak dipandang dan tidak bikin mata perih seperti sebelumnya hehe.

/* NAVBAR */
.bg-light {
background-color:transparent !important;
}
.navbar-brand {
color: white !important;
font-family: Pacifico, sans-serif;
font-size: 32px;
}

.navbar-nav .nav-link {
padding: 0px;
color: white !important;
}

.navbar-nav .nav-link:hover {
border-bottom: 2px solid white;
position: relative;
margin-bottom: -1px;
}

/* INFO ME */
.infome {
margin-top: -80px ;
background-image: url(../image/bg-info.png);
background-repeat: no-repeat;
background-size: cover;
min-height: 800px;
}

.infome .info {
color: white;
margin-top: 18%;
}

.infome .info h1 {
font-weight: 600;
}

.infome .info p a {
text-decoration: none;
color: white;
font-size: 32px;
padding: 3px;
}

.infome .info p a:hover {
text-decoration: none;
color: #999;
font-size: 32px;
padding: 3px;
}

/* ABOUT ME */
.about p {
font-size: 18px;
text-align: justify;
}

.about label {
font-weight: 600;
}

.about .progress-bar {
background-color: #333333;
}

.about .btn-secondary {
background-color: transparent;
border-color: #333333;
color: #333333;
}

.about .btn-secondary:hover {
background-color: #333333;
border-color: #333333;
color: #ffffff;
}

/* SERVICE */
.service h5 {
margin-top: 30px;
font-family: Poppins, sans-serif;
font-weight: 600;
}

.service p {
font-family: Poppins, sans-serif;
font-size: 18px;
}

/* CONTACT */
.contact a {
text-decoration: none;
color: #333333;
font-size: 18px;
}

.contact a i {
padding: 15px;
}

.contact .form-control {
border-color: #333333;
}

.contact .btn-secondary {
background-color: #333333;
width: 100%;
color: #ffffff;
font-size: 16px;
}

.footer {
background-color: #333333;
padding: 40px 0px 5px;
color: #ffffff;
}

.footer h5 {
font-family: Pacifico, sans-serif;
font-size: 28px;
}

.footer p {
font-size: 14px;
}

.footer a {
font-size: 14px;
color: #ffffff;
}

.footer a i {
font-size:16px;
padding: 5px;
}


/* MOBILE */
@media(max-width: 578px){
.bg-light {
background-image: url(../image/bg-info.png);
}

.infome h1 {
margin-top: 150px;
font-size: 60px;
}
}

Maka hasilnya akan seperti ini.

Nah akhirnya website yang kita inginkan seperti desain ui sebelumnya sudah jadi. Kalian tidak perlu mengikut senuanya sama seperti data yang ada di source code diatas. Kamu bisa mengcustom nya dengan sesuka hati. Dan saya juga sudah menyiapkan demonya disini, dan kalian bisa mendowload hasil dari projek ini di github saya. Selamat mencoba dan terima kasih sudah berkungjung.

Tags : #Programming


Shares :


Azriel Muhammadd
Azriel Muhammadd

Programmer pemula yang selalu di temani Cappucino agar mendapatkan mood terbaik untuk mencari inspirasi <3.



MUNGKIN KAMU JUGA SUKA:


SILAHKAN BERKOMENTAR

Einjuro

Einjuro adalah sebuah website pembelajaran yang diperuntukan bagi siswa-siswi diseluruh Indonesia yang ingin mendapatkan pelajaran tambahan diluar sekolah tentnag perkembangan teknologi.

Pages

  • About
  • Contact