midnightmoet / admin-dashboard_top

Admin Dashboard Project from The Odin Project

Project: Admin Dashboard

This is a project per The Odin Project lesson base.

Example

Assignment

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 now you're going to need to lay things out in your HTML.

STEP 2: Layout

1. Start by writing out the HTML elements for the sidebar, header and main-content containers. (Comments seem to help me organize things visually)
2. In your CSS file, apply Grid properties until you have this basic layout built.

STEP 3: Nesting

1. Taking it one at a time, begin nesting the 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: Gathering 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 examples 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 responsibe, but if you'd like to you can expand or shrink the project cards section when resizing the browser windows.
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.

SIDE NOTE

Used picsum for placeholders at the moment. Will be changing the cards to reflect my TOP projects as a "portfolio"