Cara membuat resume atau cv dengan bootstrap 4 bagian pertama

Gambar tampilan CV  atau resume dengan bootstrap.
Resume atau cv bisa ditampilkan dalam bentuk digital yaitu halaman web. Tidak melulu dalam bentuk print out kertas. Dalam pembuatan resume atau cv pada tulisan ini digunakan bantuan framework library html css dan javascript yaitu bootstrap 4. Dalam bootstrap kita bisa menggunakan class yang sudah disediakan. Bootstrap populer karena mudah penggunaannya serta tampilan yang mendukung versi mobile atau responsive. Disamping hal tersebut bootstrap tampil baik dalam berbagai browser. Penulis menggunakan handphone android untuk pembuatan resume ini.

Alat-alat yang digunakan membuat cv adalah :

  1. Icode-go sebagai kode editor.
  2. Chrome sebagai browser.
  3. Bootstrap sebagai framework library html css dan javascript.
  4. Jquery yang merupakan library javascript diperlukan bootstrap untuk class tertentu. 
  5. Fontawesome untuk menambahkan ikon.
  6. X-plore File Manager (opsional) untuk mengelola file dan membuka file html dengan chrome.

Berikut cara untuk membuat cv mulai dari awal menggunakan bootstrap 4

Langkah pertama pembuatan cv adalah membuka icode-go untuk menulis kode setelah itu kita akan menulis sebuah dokumen html5. Beri nama file tersebut dengan nama index.html

<!DOCTYPE html> <!-- menandakan dokumen adalah html5 -->
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Berikutnya adalah memasukkan atau menggunakan bootstrap ke dalam dokumen html 5. Cara yang akan saya pakai adalah dengan cara mendownload bootstrap dan jquery lalu mengkoneksikan ke dalam dokumen html5. 
Setelah terunduh file tersebut lalu diekstrak kemudian tempatkan file tersebut dalam satu folder dengan index.html. Untuk lebih jelasnya lihat gambar susunan file dalam folder dibawah ini.

Gambar susunan file

Kemudian tambahkan kode hingga seperti kode di bawah ini :
<!DOCTYPE html> <!-- menandakan dokumen adalah html5 -->
<html>
  <head>
    <title>Desain resume dengan bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- agar html/web tampil responsive -->
    <link rel="stylesheet" href="aset/bootstrap-4.3.1-dist/css/bootstrap.min.css" type="text/css"/> <!-- menghubungkan dokumen html dengan file bootstrap.min.css-->

  </head>
  <body>


    <script src="aset/jquery/js/jquery.min.js"></script><!--menghubungkan dengan jquery -->
    <script
  src="aset/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script> <!--menghubungkan dengan bootstrap bundel js yang sudah berisi bootstrap js dan poper.js-->
  </body>
</html>


Untuk menambahkan fontawesome silahkan download terlebih dahulu kemudian ektrak filenya lalu salin folder webfonts dan css buat folder fontawesome dalam folder aset kemudian pindahkan.  Tambahkan kode berikut diantara tag head.
 <link rel="stylesheet" href="aset/fontawesome/css/all.css" type="text/css"/> <!-- menghubungkan dokumen html dengan fontawesome -->

Tahap awal pembuatan cv berbentuk web sudah selesai. Selanjutnya adalah pembuatan bagian header dan menu di tulisan berikutnya. Baca dulu cara membuat resume nya, Download kode lengkap ada ada di tulisan terakhir bagian kontak dan footer.

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat resume atau CV dengan bootstrap 4 bagian kontak dan footer

Gambar
Tiba di bagian akhir pembuatan CV menggunakan bootstrap 4, yaitu pembuatan bagian kontak dan footer. Untuk konsep desain bagian kontak sama dengan konsep desain bagian pendidikan. Kesamaannya adalah menggunakan class list-group dan list-group-horizontal. Lebih jelas bisa dilihat dari kode di bawah ini.   <div class="row mt-2 kontak mb-4">         <h2 class="ml-4 text-primary">           <i class="fas fa-inbox ml-2 mr-2"></i>Kontak         </h2>         <div class="col-md-12">           <ul class="list-group list-group-horizontal-md border-left-0 border-right-0">             <li class="list-group-item flex-fill border-left-0 border-right-0">               <p><i class="fas fa-mobile-alt ml-2 mr-2"></i>085-xxx-xxx-x...
Baca selengkapnya

CV atau daftar riwayat hidup versi web dengan bootstrap 4 "Biru utama"

Gambar
Pada kesempatan ini, saya ingin membagikan CV atau daftar riwayat hidup berbentuk web secara gratis. CV ini dibuat melalui html dan css dengan menggunakan frontend framework bootstrap 4 saya beri nama "Biru utama", karena memang dari segi warna didominasi oleh warna biru. Desain dari CV tampil baik di layar desktop maupun mobile atau responsive. Untuk layar desktop terbagi dua kolom, kolom kiri berisi data singkat sedang kolom kanan terdiri dari uraian karir, pendidikan, keahlian dan kontak. Bagian kanan pada tampilan desktop bisa di scroll apabila panjang layar tak bisa menampung data pada CV. Pada tampilan mobile hanya ada satu kolom dari atas ke bawah. Berikut adalah tampilan CV di layar desktop maupun mobile vertikal atau horisontal. Tampilan pada layar desktop : Gambar CV "Biru Utama" tampil di layar desktop vertikal Gambar tampilan CV "Biru Utama" di layar desktop horisontal Tampilan pada layar mobile : Gamba...
Baca selengkapnya