DEV Community

Cover image for Cycling Challenge Dashboard with HTML & CSS

Posted on

Cycling Challenge Dashboard with HTML & CSS

In this video you'll see how to build a cycling challenge dashboard in HTML & CSS. In detail you'll see how to
✔️ implement a heat map
✔️ implement CSS-only tooltips
✔️ use the clip-path property
✔️ use CSS grid layout


00:00 • Basic Layout, Variables & Styles
04:55 • Challenge Profile
06:45 • Stage Statistics & Key Value List
08:55 • Achievements
11:22 • Sidebar & Heat Maps
15:06 • Tooltips
16:58 • Navbar

Top comments (2)

sloan profile image
Sloan the DEV Moderator

Hi there, we encourage authors to share their entire posts here on DEV, rather than mostly pointing to an external link. Doing so helps ensure that readers don’t have to jump around to too many different pages, and it helps focus the conversation right here in the comments section.

If you choose to do so, you also have the option to add a canonical URL directly to your post.

crayoncode profile image

Hi Sloan, thanks for your response. I'm afraid I don't fully understand your objection as it looks to me that this kind of content seems to be generally accepted as sadee's account indicates?

Thanks in advance for any kind of clarification.