This is my #12 frontend project from Frontend Mentors and my first junior level project. It was a fun challenge relearning CSS Grid, the JavaScript Fetch API, and vanilla JavaScript to update the page.

The goal was to build this:

Step 1: Setup

My Takeaway
The great thing about building lots of projects is you have a treasure trove of material to pull from when confused. I reached back to the “Stats Preview Card Component” project to get tips setting up CSS Grid.

Teachable Moment
Build habits as you code. My habit of starting every project by setting up CSS Variables, designing the general layout of the UI, and basic responsiveness allowed me to quickly complete the setup phase.

As you program small units of work, remember to commit that code to your repository. You want a trail of good code and clearly defined WIP moments when you stop coding.

Step 2: Add content and UI elements

Takeaway
I’m still confused on when to use the HTML section vs div. The past advice given to me has been to use a div if I’m only styling something and the semantics’ section tag if it means this is different from the rest. If you have any advice I would love to read it.

Teachable Moment
As you add UI elements, consider class names that reflect the content, functionality, or structure organization in an easy to understand manner.

Step 3: Style the Profile Section

Takeaway
The challenge for me was manipulating the unordered lists and its list items with CSS flex box and similar styles.

Step 4: Style the Dashboards for mobile responsiveness

Step 5: Desktop design responsiveness and background images

Step 6: Functionality for Active state

Takeaway
This was my first time using the CSS filter: brightness style to quickly highlight something. In this project, when a user hover over a dashboard the background color changes.

Step 7: Use JavaScript to update data in the dashboards based on the user clicking a time format

Takeaway
This was an opportunity to relearn the fetch API to retrieve data and practice massaging the data from a JSON object.

Teachable Moment
If you are manipulating data, take a moment to write out the inputs/output and how you plan on solving the problem. This can be followed by breaking parts of your plan into smaller functions (blocks). This process allows you to build, test, and integrate each function as you write it into the codebase.

Step 8: Original Final Product

Step 9: Accessibility

Takeaway
I’m a firm believer in learning in public. A few recommendations I received was to run an accessibility report to fix a few issues like color contrast ratios and to update to proper past tense of text in the dashboards.

Teachable moment
🧾 Before you start a project, plan for accessibility. 👓 Most importantly, after you have mock out the UI, test for accessibility issues. 🎓 A must do and final aspect of developing is to run your UI through a 3rd party accessibility tool.

Resources
I used the free, informative, and super simple online tools:

1. WAVE
2. Chrome Lighthouse

Step 10: New final product after public feedback

First, thank you to everyone who gave me feedback and to everyone who plans on giving me feedback in the future. I live by this proverb, "If you want to go fast, go alone; If you want to go far, go together".

Click here to play with the demo
Click here to view the GitHub repository

Thank you for reading, let's connect:

Obviously, this isn’t a perfect solution. If you have any advice or criticism please leave a comment or send it privately via a DM.

Thank you for reading my learning journey and if you have tips, please DM me on Twitter or LinkedIn.