Webillian.Net: bootstrap

Cara Membuat Website Portofolio dengan Mudah Menggunakan Bootstrap

Admin 4/17/2020

Pada kesempatan ini Belajar Pemrograman akan memberikan tutorial tentang Cara Membuat Website Portfolio Sederhana dengan menggunakan Bootstrap 4. Memanglah Saat ini penggunaan Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan dan digemari di dunia, karena sangat mudah penggunaannya.

Cara Membuat Website Portofolio dengan Mudah yang Sederhana

Sebelumnya apakah Kalian tau apakah itu website portofolio? Website portfolio merupakan suatu keharusan bagi semua desainer website untuk menunjukan hasil kerja/karya desainnya, baik berupa yang freelance ataupun perusahaan web developer yang besar. Dan juga, website portfolio itu harus memiliki beberapa karakter yang unik dari pada website portofolio yang lain, yang bertujuan untuk membedakan website kita dari website portfolio lain.

Berikut merupakan beberapa elemen dasar yang sangat penting untuk biasa digunakan mendesain website portfolio:

1. Portfolio Haruslah Berada di Halaman Depan Website

Semua Ini sudah hampir menjadi template pada keseluruhan suatu website portfolio dan memanglah cara ini sangat efektif. Bayangkan, jika suatu halaman depan websitenya sudah menarik pastinya akan mendapatkan pengunjung yang banyak.

Selain untuk memudahkan pengunjung, informasi pun langsung pada inti tujuan website tersebut, mungkin untuk pengenalan suatu produk, menjual suatu produk ataupun yang lainnya. Elemen ini juga dapat menjadikan daya tarik tersendiri untuk pengunjung/ user menjelajahi lebih jauh ke halaman lain dari website kita.

2. terdapat Kalimat Pembuka yang Menarik Pengunjung

Untuk nomer dua ini, Kita biasa menyebutnya sebagai Tagline. Membuat kalimat yang sangar menarik akan dapat menjadi cerminan perusahaan/diri kita untuk memasarkan produk, akan lebih bagus dan efektif jika seandainya kita membuat kalimat pembuka yang menarik pengunjung. Terlebih jika kalimat yang kita buat tersebut bisa menjadi semacam slogan bagi produk kita. Maka secara tidak langsung pengunjung bisa akan lebih mudah untuk mengingat kalimat tersebut dan otomatis mengingat website kita. Dan pada kesempatan yang lain pengunjung akan melihat website kita.

3. Foto/Ilustrasi dari suatu produk/ perusahaan

Suatu gambar akan lebih bisa menceritakan lebih banyak daripada menggunakan kata-kata. Untuk mendapatkan hasil yang efektif dan maksimal, Anda bisa mengkombinasikan antara gambar dengan kalimat pembuka (tagline) yang menarik.

4. Membuat form Contact Supaya Pengunjung Bisa Menghubungi

Fungsi dari form contact yaitu supaya user/ pengunjung bisa menghubungi perusahaan tersebut ataupun mendapatkan informasi menarik dari suatu perusahaan/ produk tersebut.
Membuat Form Contact yang menarik juga bisa menambah kepercayaan pengunjung terhadap suatu produk ataupun sebuah perusahaan.

Bagaimana? Apakah anda sudah tau apa bagian yang penting dari suatu website portofolio? Selanjutnya kita akan membuat website portofolio yang mudah dan sederhana menggunakan bootstrap utamanya disini kita akan menggunakan Bootstrap 4.

Caranya cukup mudah, Anda cukup perhatikan dan ikuti langkah sebagai berikut:

1. Mengunduh File-file yang diperlukan

Silahkan Anda unduh disini Klik disini

2. Buka pada teks-editor kalian, maka akan muncul struktur seperti di bawah ini

3. Kemudian isikan Code berikut pada file index.html


<!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">


    <!-- My CSS -->

    <style>
      section{
        min-height: 420px;
      }
      .portfolio{

      }
    </style>



    <title>My PortFolio</title>
  </head>
  <body class="mt-5">
      <nav class="navbar fixed-top navbar-expand-lg navbar-dark  bg-primary">
        <div class="container">
  <a class="navbar-brand" href="#">Rifki Kuntoro Aldi</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="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Contact</a>
      </li>
    </ul>
  </div>
  </div>
</nav>

<div class="jumbotron jumbotron-fluid">
  <div class="container text-center">
    <img src="img/profile1.png" width="25%" class="rounded-circle img-thumbnail">
    <h1 class="display-4">Rifki Kuntoro Aldi</h1>
    <p class="lead">Selamat datang di website pertama saya</p>
  </div>
</div>

<section id="about" class="about">
<div class="container">
  <div class="row mb-4">
    <div class="col text-center" >
    <h2>About</h2>    
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-md-5">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
.</p>
    </div>
    <div class="col-md-5">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
.</p>
       </div>
    </div>
  </div>
</section>

<section id="portfolio" class="portfolio bg-light pb-4">
<div class="container">
  <div class="row mb-4 pt-4">
    <div class="col text-center">
      <h2>Portfolio</h2>
    </div>
  </div>

<div class="row mb-4">
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/1.png" class="card-img-top" alt="card">
          <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>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/2.png" class="card-img-top" alt="card">
          <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>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/3.png" class="card-img-top" alt="card">
          <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>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/4.png" class="card-img-top" alt="card">
          <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>
        </div>
  </div>
</div>
<div class="row mb-4">
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/1.png" class="card-img-top" alt="card">
          <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>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/2.png" class="card-img-top" alt="card">
          <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>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/3.png" class="card-img-top" alt="card">
          <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>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/4.png" class="card-img-top" alt="card">
          <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>
        </div>
  </div>
</div>
</div>
</section>

<section id="contact" class="contact mb-5">
  <div class="container">
    <div class="row text-center mb-4 pt-4">
      <div class="col">
        <h2>Contact Us</h2>
      </div>
    </div>

<div class="row justify-content-center">
  <div class="col lg-4">
    <div class="card text-white bg-primary mb-3">
        <div class="card-body">
          <h5 class="card-title">Contact Us</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
      </div>

<ul class="list-group">
  <li class="list-group-item">Location</li>
  <li class="list-group-item">My Office</li>
  <li class="list-group-item">Delegan Rt 2 Rw 7 Pabelan Kartasura</li>
</ul>
  </div>

  <div class="col-lg-6">
    <form>
          <div class="form-group">
            <label for="nama">nama</label>
            <input type="text" class="form-control" id="nama" placeholder="Rifki Kuntoro Aldi">
          </div>
          <div class="form-group">
            <label for="nama">Email</label>
            <input type="text" class="form-control" id="nama" placeholder="example@gmail.com">
          </div>
          <div class="form-group">
            <label for="nama">Nomer HP</label>
            <input type="text" class="form-control" id="nama" placeholder="083456789324">
          </div>
          <div class="form-group">
            <label for="pesan">Pesan</label>
            <textarea name="pesan" id="pesan" class="form-control"></textarea>
          </div>
          <div class="form-group">
            <button type="button" class="btn btn-primary">Kirim Pesan!</button>
          </div>
    </form>
  </div>
</div>
  </div>
</section>


<footer class="bg-dark text-white">
  <div class="container pt-3">
    <div class="row">
      <div class="col text-center">
        copyright@2018
      </div>
    </div>
  </div>
  
</footer>

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

4. kemudian Simpan Script tersebut dan jalankan, maka hasilnya akan seperti gambar pada bawah ini, gambar tersebut sengaja Admin kecilkan supaya kelihatan tampilan kesemuanya.

Nah demikianlah tutorial cara membuat website portofolio dengan mudah yang sederhana. Untuk teman-teman yang mau mengembangkannya silahkan dikembangkan sendiri ya. Saya yakin teman-teman bisa mengembangkan website portofolio yang sederhana ini menjadi yang luarbiasa. Silahkan melihat hasilnya dengan menekan tombol demo dibawah ini:

DEMO

Untuk torial pemrograman yang lain silahkan melihat youtube dari programming unpas admin belajar disitu

Sumber : Youtube Web Programming Unpas

Info Berita Terkini