Skip to main content

Responsive Skill Bar Design | Rustcode

Responsive-skill-bar-html-css

"Responsive skills bars" are used to show the level of skill. It means how much knowledge you have in that particular technology or subject. Here we will design the "Skill bar" using simple html and css. These skill bars will be fully responsive. I hope you will like it.

You can visit our other posts to learn new things about website development. If you want to learn through video check out our youtube channel.



1. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Skill Bar Design | Rustcode</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>

  Main Content.

</body>
</html>


2. HTML

<body>
  <div class="container">
    <p>HTML</p>
    <div class="skill-container">
      <div class="skill html">90%</div>
    </div>
    <p>CSS</p>
    <div class="skill-container">
      <div class="skill css">80%</div>
    </div>
    <p>JavaScript</p>
    <div class="skill-container">
      <div class="skill js">85%</div>
    </div>
    <p>PHP</p>
    <div class="skill-container">
      <div class="skill php">80%</div>
    </div>
  </div>
</body>



3. CSS

* {
  box-sizing: border-box;
  font-family: Arial;
  font-weight: bold;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}

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

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

.html {
  width: 90%;
  background-color: #4CAF50;
}

.css {
  width: 80%;
  background-color: #2196F3;
}

.js {
  width: 85%;
  background-color: #F44336;
}

.php {
  width: 80%;
  background-color: #808080;
}


4. RESPONSIVE CSS

@media only screen and (max-width: 760px) {
  .container {
    width: 96%;
  }
}



5. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


6. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download source code, you can download from here and change this according to your need.




Comments