Dashboard Project - view live

Project made for The Odin Project curriculum, the main purpose of this layout was to learn how to use Grid so we were encouraged to try to stick with Grid as much as possible and it was a really good opportunity to learn its power.

Specifications

1. Set Up and Planning

   1. Download a full-resolution copy of the project design file and get a general idea for how you’re going to need to lay things out in your HTML document.

2. Layout

   1. Start by writing out the HTML elements for the sidebar, header and main-content containers.
   2. In your CSS file, apply Grid properties until you have this basic layout built.

3. Nesting

   1. Taking it one section at a time, begin nesting child elements under the parent elements in the HTML. Remember that you can keep making grid containers within grid containers.
   2. In the sidebar, use more grids to lay out the navigation and branding sections.
   3. In the header, use more grids to lay out the search bar, user info and buttons.
   4. For the main-content, use more grids to lay out the projects, announcements and trending items.
   5. Fill out some dummy content and placeholder images so you can position all of your grid items.

Check the original assignment page here.

Credits

• Profile picture by Marek Piwnicki on Unsplash.