• HTML
• CSS
  • Flex-Box
• Javascript
  • Chart.js

• Estimated 30 hours

In this challenge, I chose to recreate Option 2 from the project spec to practice our HTML and CSS. The goal wa to recreate the comp that best reflect's the designer's choice in layout, spacing, font, imagery, and color. However, I was given some creative license with color choices, picture and text content and the option to use different assets where I was unable to find a close match.

The overall layout for this page was more complicated than I anticipated. I spent majority of my time building out the HTML skeleton. I had a lot planned for the dashboard but was not able to apply all the features so it ended up being unfinished. I ended up spending more time on styling the buttons and icons than I anticipated. I used Chart.js documentation to create the doubhnut charts and bar chart. I also learned how to create a table in HTML. I wish I had used Project Board to plan this project to have a better estimate for the features I wanted to include.

• Create a Project Board
• Add styling to Table to better reflect comp
• DRY up the CSS
• Add responsiveness with breakpoints for screen size
• Improve accessibility
• Pass WAVE tests
• Continue to explore aria to make the page more accessible

Thank you to Icons8 for letting me use their icons for free! All .png icons from Icons8