Postingan

Menampilkan postingan dengan label bootstrap

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

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

Membuat resume atau CV dengan bootstrap 4 desain bagian keahlian

Gambar
Untuk membuat resume atau CV desain bagian keahlian dengan bootstrap 4, saya memanfaatkan class media dan progress-bar. Class media bisa digunakan untuk menaruh gambar atau ikon dan teks atau komponen lain seperti progress bar. Class media saya masukkan ke dalam class col agar lebar kolomnya menyesuaikan secara otomatis. Untuk lebih jelasnya berikut kode untuk bagian keahlian.  <div class="row keahlian mt-2 mb-3">         <div class="col-md-12">         <h2 class=" ml-3 text-primary">           <i class="fas fa-toolbox ml-2 mr-2"></i>Keahlian         </h2>         </div>         <div class="col">           <div class="media">             <p class="align-self-center text-center mr-3 mt-0 mb-0"><i class="fas fa-globe fa-2...

Membuat resume atau CV dengan bootstrap 4 bagian desain karir dan pendidikan

Gambar
Gambar tampilan desain karir dan pendidikan tampilan desktop. Untuk desain CV dengan bootstrap 4 bagian karir dan pendidikan akan ditempatkan pada class badan. Saya akan menggunakan class row serta class col-md-* untuk membuat baris dan kolom, masing-masing bagian menggunakan kelas tersebut. Untuk lebih jelasnya di bawah ini adalah kerangka kode html class badan yang akan berisi desain bagian karir, bagian pendidikan, bagian keahlian, bagian kontak serta bagian ornamen untuk memperindah halaman. <div class="container-fluid">   <div class="row karir">     <div class="col-md-12">     </div>   </div>   <div class="row">     <div class="col-md-12 mt-n4 mb-4 ornamendua">       <div class="bulkir">       </div>       <div class="garis">       </div>       <div class=...

Membuat Resume atau CV dengan bootstrap 4 bagian kedua desain header dan desain menu

Gambar
Setelah menyelesaikan langkah awal pembuatan resume atau cv dengan bootstrap 4, yaitu menyiapkan dokumen awal dan melengkapi berkas. Kini tiba ke langkah selanjutnya yaitu mendesain header dan menu. Rencana saya akan mendesain resume atau CV terbagi dua tampilan yaitu tampilan mobile dengan maksimal resolusi 768px dan tampilan di atas resolusi tersebut. Untuk desain mobile, header dan menu tampil bersama dilayar, sedangkan tampilan layar resolusi diatas dari 768px hanya header saja yang tampil ditambah ornamen atau hiasan untuk memperindah tampilan. Gambar desain header dan menu tampilan mobile Gambar desain header tampilan desktop Desain header/tajuk/kepala Pada bagian header, tampilan layar dibagi dua bagian, untuk bagian pertama berisi logo dan tulisan sedang bagian kedua berisi profil singkat pemilik CV. Pada tampilan mobile dua bagian header tersebut tampil vertikal atas dan bawah. Sedangkan pada layar di atas resolusi 768px dua ...

Cara membuat resume atau cv dengan bootstrap 4 bagian pertama

Gambar
Gambar tampilan CV  atau resume dengan bootstrap. Lihat demo CV 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 : Icode-go sebagai kode editor. Chrome sebagai browser. Bootstrap sebagai framework library html css dan javascript. Jquery yang merupakan library javascript diperlukan bootstrap untuk class tertentu.  Fontawesome untuk menambahkan ikon. X-plore File Manager (opsional) untuk mengelola file dan membuka file html deng...