Cara menggunakan source code portfolio html

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

</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.

<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 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:

Cards

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options. A card is a…

getbootstrap.com

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

<!-- Font Awesome Css -->
<link rel="stylesheet" href="css/all.css">

Untuk dokumentasi penggunaan forms dan input group kalian bisa lihat dibawah:

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide…

getbootstrap.com

Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects…

getbootstrap.com

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. 😡😡

<!-- Font Awesome Css -->
<link rel="stylesheet" href="css/all.css">

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.

Bagaimana cara menggunakan HTML?

Langkah langkah membuat website portfolio?

Apa yang dimaksud URL portofolio?

Apa saja isi dari web portofolio?