The goal was to build this:
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.
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.
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.
As you add UI elements, consider class names that reflect the content, functionality, or structure organization in an easy to understand manner.
This was an opportunity to relearn the fetch API to retrieve data and practice massaging the data from a JSON object.
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.
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.
🧾 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.
I used the free, informative, and super simple online tools:
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".
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.