Website Programming: Create a Skill Bar UI Design Pure HTML & CSS in Responsive Way
Bandung, Indonesia, October 7, 2020, 19:23PM - Hello readers, in this lesson you'll learn how to create an Animated Skills Bar using only HTML and CSS.So, the skill bar allows you to show your skills in a form of percentage bars. It is an easy and colorful way to display your skills to your viewers or portfolio. Normally people use the simple skill bar without animation and sometimes recruiter compare yours with the others, means animation and creativity are important in everything, even for CV or your own product
Now, we're going to make skills bar in a modern way In this lesson, we will show you how to create a skill bar using HTML and CSS. But, sadly we're not making an animation on this lesson like hover(so the skill bar can get animation like getting bigger or moving gradient color, I would love to make one but the basic first then we can go to the next level) or load animation instead we show you the simple skill Bar UI Design Pure HTML and CSS
HTML
We'll start with the basics, to create the foundation just like building a house. First of all, we need a foundation then go to the decoration
The first section of HTML is <head> so in the head, we can put coding that contains information about the website page's property, in here you also can put responsive coding circle and we can link HTML to an external file like CSS. Talking about the responsive coding circle,
<meta charset = "UTF-8">
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
are responsive coding circles, so the website being able to react quickly to automatically adjust for the different screen sizes, so responsive coding circles are important if you want your website can be opened on any device other than a computer/laptop.
The second part of HTML is the body, in terms of customizing your page content you have to put the content in the body. In this lesson, we're talking about the skill bar. As you can see in the picture I put many div as labeling, because we're going to stylish many contents like the text, the percent, and progress(progress means bar). But only HTML won't show you the result you want, so I will show you the result without CSS.
CSS ( style.css )
CSS, our main stage, basically we only used HTML for the basics of a website, to make the primary stages for a website and let CSS handle the display. You might be wondering why I put CSS as an External link because if you put CSS codes in the HTML as an internal link it would cause you confused.
For the first code, we put codes on the body, to make sure it's responsive we put box-sizing: border-box; on *. The * in CSS means all elements, it's a universal selector. So we have to set all elements of the website into have zero margins and zero paddings, thus making them look the same in the browser and responsive so the website being able to react quickly to automatically adjust for different screen sizes. And for the container is just like a box, we make a box so the text and the display can be separated from the others( if you want to put something else on the website like text, pictures, etc).
In this part, I will say that not much different from before. Is still editing the with, height, background, the color of the text, and some basics style.
In this part, we're making a bar for each skill. You can see that we put many div.class in the same row, similar to * it means all Universal but in smaller space. For example .container .skills .percent .progress will have the same effect which ordered in the brackets.
The good news, we put a little animation on the skill bar. We're playing with width ^^ so when you enter the website or refresh the skill bar will appear from narrow size to large size, well not a big effect to attract people. And we put different linear-gradient colors in every skill. If you want different colors but you don't know how to get those #Hexa codes, just go to paint and see the Hexa codes of color or you can search on google's website that can get color's Hexa codes.
That's all for the lesson
Thank you for reading my blog and see you in the next article
Comments
Post a Comment