razvanbugoi / top-dashboard

Dashboard implementation from design with plain HTML and CSS. Display grid has been used almost exclusively to position the elements.

Dashboard

This is the second project from The Odin Project Intermidiate HTML and CSS course.
You can try it live here: https://razvanbugoi.github.io/top-dashboard/src/index.html
Please note that this is not mobile responsive as this was not a requirement.

Objective

The idea behind this project is to get myself comfortable using CSS Grid layout.

Technologies used

• HTML
• CSS

The process and outcome

The first step I took was to create some HTML dummy content and define the overall layout of the page with CSS Grid.
After this, I had three main sections that needed expanding upon (the sidebar, the header, and the main content).
I went ahead and tackled one section at a time by creating HTML content first, and then adding the necessary styles to position the elements properly and make them look nice.
The final step was to add check that for mistakes and to upload the project on Github pages.
The project took me a good few days' worths of work, but I am pleased to have improved my CSS and HTML knowledge by the end of it.