Yogesh Chauhan's Blog

Learn to create your skill bar using CSS

in CSS on August 1, 2019

Have you ever wondered, while posting your resume online or even writing down your resume into a word file, that you wish you could graph the skills out so that it can make a difference while applying and in doing so you can impress recruiters?

Well, I have a solution for you to fix your resume on personal website and for the word file resume, I’ll discuss some tricks with you guys later on.

I am going to show you guys how to make a skills bar in a website so that you can include it in your website and I promise it will make a huge difference while applying for a job. It’s just human thing that when we see pictorial representation, it impresses us more because it’s really easy to understand rather than reading. So, let’s ge started with the HTML code first.


In the HTML code above, I have simply added some div elements. The parent div has a class container and the child has a class skills and one for specific skills such as HTML or CSS. Also, before those div elements, I’ve added a p tag just to write down the name of the skill. You can go ahead and use h1-h6 tags, it’s just for naming purposes only.

Now the second div element has percentage written inside them as well, which indicates the percentage and I’ll discuss it after CSS code.

As I’ve discussed earlier about the class container, it is the parent div element class and it covers the width of 95% and light blue background-color. Now, you can set values for both of those properties as you like. The purpose of this class is to show the full bar in the background of child element.
The next class skills will show the child bar inside of parent bar and that will indicate your know-how percentage of a particular skill. We are going to add texts inside the div to indicate the percentage of your knowledge of any skill. The class has texts alignment and padding. You can change the properties and values as you like.

The next and final class is for specific skills so the first one for HTML second one is for CSS and so on. What I am doing here is just using two basic properties width and background-color to set the color and size of the child div element. Again, keep looking at the demo, so that it’ll make easier to understand the child and parent div elements.

Now that everything is set, you can check the output and include the whole page in your resume on your personal website. I am sure you’ll impress many recruiters.

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
SQL Right JoinSQL/MySQLHow to create a pricing table using flex in CSS?CSSSafe Practice to add Links to cross-origin destinationUI/UXCurrencyPipe in Angular 9 with ExamplesAngularWhat are Null Sessions?MiscellaneousSelect statement in Postgres with examplesPostgres