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.
progress bar skill bar
