Membuat Skill Progress Dengan HTML Dan CSS

Unknown   February 18, 2018   CSS   Comment  

Hai semuanya, pada tutorial kali ini, kita akan belajar membuat design skill progress bar dengan HTML dan CSS, langsung kita mulai belajar membuatnya.

Jika anda ingin mendownload source code tutorial ini, anda dapat mendownloadnya pada link dibawah ini.

Download

Langkah pertama, buatlah sebuah folder skillprogress, didalam folder skillprogress buatlah sebuah folder bernama img kemudian tambahkan photo anda didalam folder img, kemudian buatlah sebuah file bernama index.html pada folder skillprogress, contoh herarkinya, dapat anda lihat pada gambar dibawah ini.

Langkah kedua, buka file index.html, tulis syntax HTML seperti dibawah ini.

<div class="card">
  <div class="bio">
   <img src="img/avatar.jpg" alt="">
   <p><strong>Karis Maulana</strong><br> @maulana</p>
  </div>
  <div class="skill-bar">
   <h2>Skill yang dimiliki</h2>
   <label>HTML</label>
   <div class="container">
    <div class="skill html">80%</div>
   </div>
   <label>CSS</label>
   <div class="container">
    <div class="skill css">70%</div>
   </div>
   <label>Java Script</label>
   <div class="container">
    <div class="skill js">50%</div>
   </div>
   <label>PHP</label>
   <div class="container">
    <div class="skill php">40%</div>
   </div>
   <label>MySQL</label>
   <div class="container">
    <div class="skill mysql">20%</div>
   </div>
  </div>
 </div>

Setelah itu, tulis syntax CSS seperti dibawah ini.

.container{
   width: 100%;
   background-color: #f2f2f2;
   margin-bottom: 10px;
   border-radius: 10px;
  } 
  .card{
   width: 100%;
   max-width: 400px;
   border-radius: 5px;
   border: 2px solid #ddd;
  }
  .bio{
   padding: 10px;
   text-align: center;
  }
  .bio img{
   object-fit: cover;
   width: 180px;
   height: 180px;
   border-radius: 50%;
  }
  .skill-bar{
   text-align: left;
   padding: 10px;
   font-size: 12px;
  }
  .skill{
   color: #fff;
   font-size: 12px;
   text-align: center;
   border-radius: 10px;
  }
  .html{width: 80%;background-color: #22eb72}
  .css{width: 70%;background-color: #1E80FA}
  .js{width: 50%;background-color: #DBE223}
  .php{width: 40%;background-color: #E93232}
  .mysql{width: 20%;background-color: #E93232}

Untuk hasilnya, dapat dilihat pada gambar dibawah ini.

Bagaimana, menurut anda, ini sudah cukup bagus atau belum ?

Begitulah cara membuat skill progress dengan HTML dan CSS, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat.