Project: Admin Dashboard

Step 1: Set up and planning

1. Set up your HTML and CSS files with some simple dummy content, just to make sure you have everything linked correctly.
2. Set up your Git repository (refer to past projects if you need a refresher).
3. 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

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.

Step 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.

Step 4: Gather assets

1. Once you have your grid layout complete you can either recreate the dashboard example above or style your own design.
2. Check out some color palettes from Tailwind.
3. All of the icons and more can be downloaded as SVGs from Material Design Icons.
4. Choose your own fonts! The design example uses Roboto, which is available with Google fonts.

Step 5: Some tips!

1. When building the layout, apply background colors or borders to your containers to help you visualize your grid.
2. It’s up to you whether to use pixels, fr units or both for your grid tracks.
3. This project does not have to be responsive, but if you’d like to you can expand or shrink the project cards section when resizing the browser window.
4. You don’t have to make a pixel perfect match with the design example. Consider this an opportunity to practice your CSS skills with your own designs.
5. Don’t forget to push your finished dashboard to GitHub. Use GitHub Pages to publish it to the world!

Step 6: Section feedback

1. Before you move on, we would like your feedback here. Getting user (you) feedback is important so we can continue to improve the curriculum and get an idea of your experience.