Admin Dashboard - An Intermediate HTML and CSS Project

This is the capstone project for The Odin Project's Intermediate HTML and CSS Course.

Table of Contents

1. Overview
2. The Dashboard
3. Acknowledgements
4. Retrospective

Overview

This is my attempt at completing the capstone project for the Intermediate HTML and CSS Course hosted by The Odin Project.

The aim of the project is to recreate the following admin dashboard layout via HTML and CSS, with the focus on utilising CSS Grid.

The Dashboard

To view my dashboard, please visit: https://je-richards.github.io/odin-admin-dashboard/

Acknowledgements

The font used throughout this project is Open Sans, which is available from https://www.fontsquirrel.com/fonts/open-sans

All icons used throughout the project were acquired from https://pictogrammers.com/library/mdi/

Retrospective

The main purpose of each project found in The Odin Project Courses is to provide students with the opportunity to practise and refine the skills covered during each course. Given this, I like to take time at the end of a project to reflect on how it went. This provides an opportunity to celebrate my successes whilst also identifying areas for future improvement, both in terms of this project and future projects.

Each retrospective will be sectioned by the date it was written (newest to oldest) and will include the full SHA string for the latest commit that the retrospective relates to.

05/06/2024

• Full commit SHA: bd0cc512b088e1838f06f683160ff651ed76b97e
• Successes:
  • I feel I've built a solid understanding of CSS Grid fundamentals which will serve me well in future projects.
  • Made good use of the CSS custom properties when establishing the theme for the page. This would make future changes much more strightforward.
• Future Improvements:
  • Incorporate dynamic elements into the page so that it responds to different browser and screen sizes.
    • Opportunity to combine flexbox with grid to enable some of these.
    • Also a good opportunity to practice using auto-fit and auto-fill on grids.
  • The sidebar content doesn't contain any links. Whilst there's no pages to link to, it's a good opportunity to revise and practice CSS link styling.
  • The searchbar is currently using browser default styling. Worth adding custom styling to make it align with the page theme.
  • All icons are currently in-line SVG's. With the theme decided, these could be stored as exteral files and linked in the HTML to produce cleaner code.
  • Opportunity to refine the CSS to reduce repetition.
  • For future projects, it would be worth spending more time up-front formulating a plan for how to approach the project.
    • Write more (and better) pseudocode.
    • Plan out what blocks will be needed to get the desired layout, rather than building it on the fly.

---