Build a Responsive Time Tracking Dashboard - HTML CSS JS - Frontend Mentor

Learn how to build a responsive time tracking dashboard with vanilla HTML, CSS and Javascript - designed by Frontend Mentor.

NOTE: I recorded this on 2 computers, one of which included a new video editor (FCP) so I apologise for any issues this video may have had. I've identified sound issues so far as the most obvious ones and I'm learning to avoid these issues in any future video.

Any requests, queries, tips or critique - please leave down below :). I plan to do a small series in January on CSS fundamentals, core concepts etc where responsiveness is concerned, so perhaps that might cover some queries.

- - - RESOURCES - - -

- Project Links -

FEM Challenge - https://www.frontendmentor.io/challenges/time-tracking-dashboard-UIQ7167Jw
Github repo - https://github.com/grizhlieCodes/time-tracking-dashboard
FEM Solution - https://www.frontendmentor.io/solutions/time-tracking-dashboard-thoughtful-responsiveness-and-vanilla-js-lSZCbpzwG


- Resource Links -
REM & 62.5% - https://www.aleksandrhovhannisyan.com/blog/respecting-font-size-preferences-rems-62-5-percent/
Clamp calculator - https://grizhlie-clamp-calculator.netlify.app/


- VsCode Extensions Used -

Quokka (console JS in VSC) $ - https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
Prettier - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Colorize (css colors) - https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize
Rewrap - https://marketplace.visualstudio.com/items?itemName=stkb.rewrap


- - - CHAPTERS - - -

00:00 - Intro
01:26 - Setup
02:01 - Analysing Figma
02:17 - Setting up variables
02:31 - Writing HTML
06:33 - Styling body
07:16 - Styling main grid
09:28 - Styling Menu (Owner info + Buttons)
14:03 - Styling Activity-Cards
19:50 - Writing the JS
35:08 - Result