YogeshChauhan . com

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

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to add a ribbon inside a container using CSS?CSSWhat is Prototypal Inheritance in JavaScript?JavaScriptHow Do You Make a Private VPN?MiscSequence generator (range) using JavaScript Array.from()JavaScriptHow to swap images on hover using CSS?CSSFlash of Invisible Text and Mitt Romney Web Font ProblemCSS