This project is part of The Odin Project - Full Stack JavaScript Path. The main goal for this project is to use CSS Grid, so as layout choice I apply Grid almost everywhere even is some occasion when Flexbox could be a reasonable choice.
- HTML
- CSS
- Git
-
Step 1: Set Up and Planning
- Set up your HTML and CSS files with some simple dummy content, just to make sure you have everything linked correctly.
- Set up your Git repository.
- 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.
-
Step 2: Layout
- Start by writing out the HTML elements for the sidebar, header and main-content containers.
- In your CSS file, apply Grid properties until you have this basic layout built.
-
Step 3: Nesting
- 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.
- In the sidebar, use more grids to lay out the navigation and branding sections.
- In the header, use more grids to lay out the search bar, user info and buttons.
- For the main-content, use more grids to lay out the projects, announcements and trending items.
- Fill out some dummy content and placeholder images so you can position all of your grid items.
-
Step 4: Gather Assets
- Once you have your grid layout complete you can either recreate the dashboard example above or style your own design.
- Check out some color palettes from Tailwind.
- All of the icons and more can be downloaded as SVGs from Material Design Icons.
- Choose your own fonts! The design example uses Roboto, which is available with Google fonts.