Cycling Challenge Dashboard with HTML & CSS
crayoncode

crayoncode @crayoncode

About: Software Architect and Security Officer with 20 years of experience, Web Dev has shifted from my main profession to a hobby as I rarely get to code by now and just love the craft. Check out my channel

Joined:
Oct 25, 2020

Cycling Challenge Dashboard with HTML & CSS

Publish Date: Jan 7 '23
11 2

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

Timestamps

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

Comments 2 total

  • Sloan the DEV Moderator
    Sloan the DEV ModeratorJan 7, 2023

    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
      crayoncodeJun 6, 2023

      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?

      dev.to/codewithsadee

      Thanks in advance for any kind of clarification.

Add comment