Learn to create your skill bar using CSS

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 lightblue 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 uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to make a UILabel clickable in Swift 5?SwiftHow to get category name using post id in WordPress?WordPressHow to add onclick event to html elements dynamically using JavaScript?JavaScriptWordPress 5.7 is migrating to latest jQuery version and people are freaking outjQueryHow to create flickering text using CSS?CSSThe Lending Club Analysis using Logistic Regression and Random Forest in RStudioMisc