Beranda
Coding

Cara Membuat CV Menggunakan Html dan CSS

Curriculum Vitae (CV) adalah dokumen penting yang memuat data diri dan riwayat hidupmu. Biasanya, CV digunakan sebagai dokumen utama untuk melamar pekerjaan. Kali ini, kamu akan belajar cara membuat CV hanya dengan HTML dan CSS. Panduan ini dirancang agar mudah diikuti, bahkan jika kamu masih awam dalam dunia coding.

Langkah 1: Membuat Latar Kertas A4

Langkah pertama adalah membuat latar berbentuk kertas A4 untuk memasukkan semua elemen CV. Ukuran ini umum digunakan. Kamu bisa mengubah ukuran dengan mengganti nilai pada tag width dan height sesuai kebutuhan.

Berikut adalah kode untuk membuat latar kertas A4:

<!DOCTYPE html>
<html>
   <head>
      <style>
        body {
          background: rgb(204,204,204); 
          width: 21cm;
          height: 29.7cm;
          margin: 0 auto;
        }

        page {
          background: white;
          display: block;
          margin: 0 auto;
          margin-bottom: 0.5cm;
          position: relative;
        }

        page[size="A4"] {  
          width: 21cm;
          height: 29.7cm; 
        }

        @page {
          size: 21cm 29.7cm;
          margin: 0mm;
        }
      </style>
   </head>
   <body>
      <page size="A4">
      </page>
  </body>
</html>

Setelah kode di atas diterapkan, latar kertas A4 akan terlihat seperti gambar berikut:

Langkah 2: Membagi Kertas Menjadi Dua Bagian

Untuk membuat CV terlihat profesional dan rapi, kamu bisa membagi kertas menjadi dua bagian. Bagian kiri biasanya digunakan untuk informasi singkat seperti foto, kontak, dan keterampilan, sedangkan bagian kanan untuk detail seperti pengalaman kerja dan pendidikan.

Masukkan kode CSS berikut sebelum tag </style> di kode html sebelumnya:

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
.leftPanel {
  width: 27%;
  background-color: #484444;
  padding: 0.7cm;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rightPanel {
  width: 73%;
  padding: 0.7cm;
}

Kemudian, tambahkan HTML berikut di sebelum tag </page>:

  <div class="container">  
   <!--Item Kiri-->   
    <div class="leftPanel">     
      <!-- Font Awesome -->
      <!-- Profil disini -->
      <!-- Kontak  disini -->
      <!-- Kemampuan disini -->
      <!-- Pendidikan disini --> 
    </div>
    <!--Item Kanan-->  
    <div class="rightPanel">
      <!-- Nama disini -->
      <!-- Tentang saya disini -->
      <!-- Pengalaman disini -->
    </div>
  </div>

Sekarang kertas akan terlihat seperti:

Anda bisa menggati warnanya pada tag LeftPanel di background-color. Tampilan ini masing kosong, sekarang kita isi pada langkah selanjutnya.

Catatan Cara Mudah Memasukan Kode Html dan CSS

Sebelum masuk kelangkah berikutnya, perlu Anda ketahui! Saya berusaha membuat tutorial ini sangat mudah diterapkan. Kerena itu saya membuatkan tanda pada setiap kode Html, kemudian membuat urutan tempat peletakannya. Jadi Anda tidak akan bingung mengikuti langkah demi langkah.

Perhatikan gambar berikut

Untuk seluruh kode CSS dimasukan setelah kode </style>. ingat! Masukan sesuai urutan agar lebih mudah

Langkah 3: Mengisi Bagian Kiri

Bagian kiri umumnya berisikan resume data diri berupa Foto profil, kontak, skill, dan Pendidikan. Sebelumnya masukan terlebih dahulu font Awesome sesudah <div class="leftPanel"> agar bisa menambahkan sedikit ikon cantik dengan lebih mudah tanpa memberatkan pemuatan.

<!-- Font Awesome -->  
  
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Setelah itu baru memasukan Kode Html dan CSS satu demi satu agar bisa dipahami dengan benar langkahnya.

Profil

Pada Item Ini Anda perlu menyiapkan foto berbentuk tautan yang akan digunakan untuk foto profil, usahakan berukuran persegi dengan format Jpg, Jpeg, atau Png.

<!-- Profil --> 
<img src="Your_URL"/>

Silahkan ganti Your_URL dengan tautan gambar yang telah Anda siapkan tadi.

Kontak

Pada Item ini, Anda bisa menyertakan beberapa data yang lumayan penting. Misalkan no hanphone, Email, Alamat saat ini (Domisili). Disinilah fungsi font Awesome tadi untuk memanggil beberapa ikon agar kontak lebih terlihat menarik. 

.leftPanel .smallText, 
.leftPanel .smallText, 
.leftPanel .smallText span, 
.leftPanel .smallText p, 
.smallText a {
  font-size: 0.45cm;
}
.smallText, 
.smallText span, 
.smallText p, 
.smallText a {
  font-family: 'Source Sans Pro', sans-serif;
  text-align: justify;
}
.contactIcon {
  width: 0.5cm;
  text-align: center;
}
.leftPanel, 
.leftPanel a {
  color: #bebebe;
  text-decoration: none;
}
<div class="details">
    
  <!-- Kontak -->  
  
  <div class="item bottomLineSeparator">
  <h2>
    CONTACT
  </h2>
  <div class="smallText">
    <p>
      <i class="fa fa-phone contactIcon" aria-hidden="true"></i>
      Your_Nomber
    </p>
    <p>
      <i class="fa fa-envelope contactIcon" aria-hidden="true"></i>
        Your_Surel
      </a>
      <i class="fa fa-map-marker contactIcon" aria-hidden="true"></i>
      Your_Address
    </p>
  </div>
  </div>
  • Your_Nomber: No Hanphone atau Whatsapp, bisa menggunakan Kode Negara atau tidak. Misalkan +62 81234567890/081234567890.
  • Your_Surel: Email Anda
  • Your_Addres: Alamat Anda, sebagai contoh: Kec. Pekapuran Raya, Kota Banjarmasin, Prov. Kalimantan Selatan.

Keterampilan

Sesudah membuat Item kontak langkah selanjutnya adalah membuat item keterampilan (Skill). Anda bisa menjelaskan sejumlah keterampilan dan pengalaman yang sudah dimiliki, baik yang sudah benar-benar dikusai atau dalam tahap mengembangkan. Pada Item ini saya tidak menambahkan CSS kerena terasa tidak terlalu perlu. alasan lainnya agar tidak membuat bingung saat menerapkannya.

  <!-- Kemampuan -->     
  <div class="item bottomLineSeparator">
  <h2>
    SKILLS
  </h2>
  <div class="smallText">
        <p>Your_Skill</p>
        <p>Your_Skill</p>
        <p>Your_Skill</p>
        <p>Your_Skill</p>
        <p>Your_Skill</p>
  </div>
</div>

Your_Skill: Isi dengan keterampilan. Disini saya cuma membuat lima saja, jika ingin lebih banyak atau atau kurang dari itu tinggal tambah dengan kode "<p>Contoh tulis disini</p>"

Pendidikan

Pada Item ini akan saya buatkan sedikit bold (tebal) ada nama program studi dengan menambahkan sedikit CSS. Ini mungkin terlihat tidak terlalu penting, akan tetapi lumayan membuat kesan lebih menarik.

Untuk progaram studi bisa juga diganti dengan nama fakultas saja, tergantung kebutuhan Anda. 

.bolded {
  font-weight: bold;
}
.white {
  color: white;
}
<!-- Pendidikan -->  

<div class="item">
  <h2>
    EDUCATION
  </h2>
  <div class="smallText">
    <p class="bolded white alignleft">
     Achmad Yani University 
    </p>
    <p>
      Bachelor of Edukation Administration
    </p>
    <p>
      2022 - 2026
    </p>
  </div>
</div>
</div>
</div>
  • Bachelor of Edukation Adminitration: Program Studi Anda.
  • Achmad Yani Banjarmasin: Universitas
  • 2022 - 2026: Tahun awal sampai selesai menjalani studi atau kuliah

Hasilnya sementara:

Mengisi Item Pada Bagian Kanan

Pada bagian kanan ini akan diisi dengan nama dan bidang yang ingin dilamar, About me (Tentang saya), Kemudian dilanjutkan dengan pengalaman Kerja lengkap dengan detailnya.

Ini adalah bagian terakhir, untuk peletakan html dan CSS masih sama, tinggal perhatikan dengan benar tag seperti div, jangan terlewatkan satupun kerena bisa berakibat berantakan.

Nama dan Bidang

Pada item nama akan saya buat dengan Heading 1 atau h1 dengan ukuran lebih besar dan memanjang, sedangkan bidang dibuat dengan h3. Hal ini saya lakukan berdasarkan kebanyakan CV seperti itu. Anda bisa menyesuaikan ukurannya pada "font-size: 1.2cm;" dibawah ini.

h1 { 
  font-family: 'Julius Sans One', sans-serif;
}
h1 { 
  font-weight: 300; 
  font-size: 1.2cm;
  transform:scale(1,1.15); 
  margin-bottom: 0.2cm;
  margin-top: 0.2cm;
  text-transform: uppercase; 
}
h3 {
  font-family: 'Open Sans', sans-serif;
}
  <!-- Nama -->  
  <div>
    <h1>
      Muhammad Nasai
    </h1>
    <div class="smallText">
      <h3>
        Adminitration
      </h3>
    </div>
  </div>
  • Muhammad Nasai: Nama penjang.
  • Adminitration: Bidang pekerjaan hendak dilamar, ini bisa saja dikosongkan kerena sudah tertara dalam surat lamaran.

Tentang Saya (About me)

Pada item ini bisa dibuat beberpa paragraf, asalkan dibuka dan di tutupup menggunakan tag <p>dan </p>, walaupun begitu untuk kesan SEO, saya sarankan untuk satu pragraf pendik saja. Sebagai contoh:

<p>Saya seorang Desainer kreatif yang berkomitmen untuk mengubah ide menjadi pengalaman visual yang menakjubkan. Dengan latar belakang pendidikan adminitrasi dan pengalaman desain grafis dan koding selama beberapa tahun. </p>

<p>Contoh pragraf kedua </p>.

Jika dimasukan ke kode html akan seperti berikut

  <!-- Tentang saya -->  
<div>
  <h2>
    About me
  </h2>
  <div class="smallText">
    <p>
      I'm a creative designer committed to turning ideas into stunning visual experiences. With administrative education background and graphic design and coding experience for several years. 
    </p>
    <p>
      Vivamus non magna quis neque viverra finibus quis a tortor. 
    </p>
  </div>
</div>

Bagian ini juga tidak saya tambahkan CSS lagi kerena sudah ada kode terdahulu "<div class="smallText">". Jadi lebih baik digunakan lagi.

Pengalaman Kerja

Pada pengalaman kerja, saya akan membuat sedikit modefikasi dan mengurutkan poin-poin dengan garis vertikal bersambung. Pada item ini saya buat cukup lengkap, seperti diawali dengan jenis pengalaman kerja yang dimiliki, nama perusahaan dan tanggal awal karir sampai berhenti disampngnya.

<!-- Pengalaman --> 
  
<div class="workExperience">
  <h2>
    Work experience
  </h2>
  <ul>
    <li>
      <div class="jobPosition">
        <span class="bolded">
          UI Desaigner
        </span>
        <span>
          2021 - 2022
        </span>
      </div>
      <div class="projectName bolded">
        <span>
          PT Design Indo Kommunity
        </span>
      </div>
      <p>Design page layouts, icons, buttons and other graphic elements.</p>
    </li>
    <li>
      <div class="jobPosition">
        <span class="bolded">
          Art Derektor
        </span>
        <span>
         2018 - 2020 
        </span>
      </div>
      <div class="projectName bolded">
        <span>
          PT Desig Indo Kommunity
        </span>
      </div> 
      </p>Responsible for the visual aspects of an advertisement, be it image, photo or layout design elements</span>
    </li>
    <li>
      <div class="jobPosition">
        <span class="bolded">
          Icon Deigner
        </span>
        <span>
          2015 - 2017
        </span>
      </div>
      <div class="projectName bolded">
        <span>
         PT Desig Indo Kommunity
        </span>
      </div>
      <p>Understand the message or program command you want to convey to the application user, then present it in the form of an icon.</p>
    </li>
  </ul>
</div>  
</div>

Sekarang CV Anda sudah Jadi, hasil akhirnya akan seperti berikut

Lihat pratinjau

Langkah terskhir adalah menyimpan kode ke Github atau menjadikannya Pdf. Semoga Tutorial ini bermanfaat dan dapat dipahami dengan benar.

Posting Komentar