DEV Community

Cover image for Building Interactive Skill Progress Bars with HTML, CSS, and JavaScript

Building Interactive Skill Progress Bars with HTML, CSS, and JavaScript

Matt Adil on February 23, 2024

Introduction: Skill progress bars are a common feature in portfolios and resumes, allowing users to visually showcase their expertise ...
Read full post
Collapse
 
dannyengelman profile image
Danny Engelman •

Wrap it in a native <skill-progress> Web Component and we can use it without building it

customElements.define("skill-progress" , class extends HTMLElement {
 .. your code..
})
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mattbug3 profile image
Matt Adil •

Thanks for the suggestion! I actually just whipped up the skill progress bar using plain old HTML, CSS, and JavaScript. But I totally get what you’re saying about making it into a cool component for easier use. That could be a neat project for down the line. Appreciate the idea!

Collapse
 
efpage profile image
Eckehard • • Edited

Your post reminds me how stupid HTML actually is. It forces us to repeat the same task manually again and again. You can´t even put things togeter in a function-like structure. We are using AI and computers, that can do billions of operations in a second, but HTML forces us to stay in the stone age.

Image description

A skill tableau (without that fancy animation) should only have a few lines of code like this

function tableauElement(el){
  let s = Object.keys(el)[0]
  span(s); br()
  slider().value = el[s]; br(2)
}

[{HTML:80},{CSS:70},{Javascript:60},{ReactJS:50},{NodeJS:30}].map( s => tableauElement(s) )
Enter fullscreen mode Exit fullscreen mode

It´s possible, see this example

Collapse
 
dannyengelman profile image
Danny Engelman • • Edited

I totally disagree. HTML is Cool.
Your "solution" requires programming skills.

Web Components make HTML fully semantic

Creating a pie-chart with HTML. Can be learned in 5 minutes.

See my DEV.to blogpost: "A Pie Chart in 2021"

Thread Thread
 
efpage profile image
Eckehard •

It is not a bad thing to have some skills, even for a web designer. The Javascript provided in the example is far more complex than what i have provided in my example. And to write webcompontents you will need even more Javascript-skills.

I would love to use HTML if it would allow me to build pages in an efficient way. But the example shows impressively, that it needs 44 lines of HTML to do the same, I achieved in one line of code. This is simply waist of time and brainpower. My Javascript is pretty simple, while the example shown is fairly complex and hard to read. This needs much more skills than just some simple lines of code.

We should avoid generalizations like "you should not need any programming skills to build a web page" as they are in most cases not true. The only thing we should avoid ist to do things manually that a computer can do better.

Thread Thread
 
dannyengelman profile image
Danny Engelman • • Edited

You are thinking as a developer; for you Code comes easy.
It is not about the Web Component JavaScript; that is created once by an experienced developer, just as Frameworks and Libraries are created.
The power of Web Components is about only writing HTML