Cara Membuat Skill Bar

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 12, 2021

Di bawah ini kita akan mempelajari cara membuat bilah keterampilan dengan CSS.

Sebuah “Skill Bar” sering digunakan dalam CV / resume online untuk menampilkan keahlian yang kita miliki, seperti ini:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
}

.html {width: 90%; background-color: #A52A2A;}
.css {width: 80%; background-color: #6495ED;}
.js {width: 65%; background-color: #FFD700;}
.php {width: 70%; background-color: #9400D3;}
</style>
</head>
<body>

<h1>My Skills</h1>
  
  <p> Berikut ini merupakan beberapa keahlian bahasa pemrograman yang saya miliki :  </p><br>
  
<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
  <div class="skills php">70%</div>
</div>

</body>
</html>

Cara Membuat Skill Bar

Langkah 1) Tambahkan HTML
Contoh

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
  <div class="skills php">70%</div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Pastikan padding berperilaku seperti yang diharapkan */
* {box-sizing:border-box}

/* Container untuk skill bar */
.container {
  width: 100%; /* lebar maksimum */
  background-color: #ddd; /* Warna background abu */
}

.skills {
  text-align: right; /* Teks rata kanan */
  padding-top: 10px; /* Tambahkan padding atas */
  padding-bottom: 10px; /* Tambahkan padding bawah */
  color: white; /* Warna text putih */
}

.html {width: 90%; background-color: #A52A2A;}/* Brown */
.css {width: 80%; background-color: #6495ED;}/* Cornflower Blue */
.js {width: 65%; background-color: #FFD700;}/* 	Gold */
.php {width: 70%; background-color: #E6E6FA;}/* Dark Violet */