Cara Membuat CV Menggunakan Html Css

Curriculum vitae (CV; juga ditulis curriculum vitæ) atau daftar riwayat hidup adalah dokumen yang memberikan gambaran mengenai pengalaman sesorang dan kualifikasi lainnya. Di beberapa negara, suatu CV biasanya merupakan hal utama yang dijumpai seorang majikan potensial tentang pencari kerja dan sering digunakan untuk menyaring aplikan (orang-orang yang melamar kerja secara daring) ketika mencari pekerjaan, biasanya dilanjutkan dengan wawancara. 

Disini saya akan menjelaskan cara membuat cv digital menggunakan bahasa HTML dan CSS dengan desain yang sangat sederhana mungkin dan mudah di pahami oleh teman teman . Kalian juga bisa menambahkan Javascript atau framework seperti Bootsrap . 

Note: Cara Membuat Form Login HTML CSS 

Download VSCODE

Mari langsung saja kita membuat CV nya :

Buat lah file Html dengan nama sesuai keinginan teman teman , kalau saya CV.html

lalu kita buat padding kiri dengan ukuran :

width: 30%;

height: 1127.15px;
fungsi padding ini adalah untuk menampilkan : 
Foto : 
Nama :
Alamat :
No Telfon:
TTL :
Email :
 




selanjutnya kita buat padding kanan yang berfungsi sebagai daftar pengalaman kerja /riwayat  pendidikan  . Letakan code dibawah di tag akhiran </div> .
buat class dengan nama : <div class="container-padding">





yang terakhir buatlah padding bottom , nantinya padding bottom ini berfungsi sebagai daftar pengalaman kerja tepat di bawah padding kanan.

buat class dengan nama : <div class="padding-bottom"> 

Lalu buatlah file layout.css  untuk mempercantik tampilan CV :

 body  berfungsi untuk menambahkan background serta ukuran body .



#colspan berfungsi untuk mengatur tampilan pada tag div container .




#container-padding untuk mengatur tampilan pada tag container-padding. 





#progress berfungsi untuk mengatur tag load dan progress yang akan menghasilkan output loading bar 90% , 80%.




#content berfungsi untuk mengatur tag content 1 - content 4 yang menghasilkan output pengaturan jarak pada tulisan



#img untuk mengatur foto pada bagian kiri atas

#h4 untuk mengatur tulisan nama contoh disini saya menggunakan nama saya sendiri Rifki Amalun

#i untuk mengatur tag element  <p><i class="fa fa-briefcase fa-fw large"></i>Web Developer</p> serta yang bersangkutan dengan element i class="fa fa">

#hr untuk mengatur garis miring tengah , saya menggunakanya sebagai pembatas pada setiap tulisan .

DOWNLOAD SCRIPT | DEMO TEMPLATE

Live

See the Pen CV Template HTML CSS by Inj Amalun (@inj-amalun) on CodePen.

Share this post