Odin Admin Dashboard

A responsive admin dashboard layout built with CSS Grid, created as part of The Odin Project's Intermediate HTML and CSS curriculum. Focuses on complex grid-based layouts, semantic structure, and responsive design without using a CSS framework.
Explore the docs »

View Demo · Report Bug · Request Feature

This project is part of The Odin Project's Intermediate HTML and CSS course. The goal was to recreate a common admin dashboard layout using CSS Grid as the primary layout tool, without relying on any CSS framework.

The layout is composed of three main areas — a fixed sidebar, a header, and a main content section made up of card-style panels — all arranged using a single grid container with named grid areas. The focus of this project is layout architecture and responsive behavior rather than functionality; no data is fetched or dynamic.

(back to top)

(back to top)

To get a local copy up and running, follow these steps.

No build tools or package managers are required. Just a modern web browser.

1. Clone the repo

   git clone https://github.com/ayemteezy/admin-dashboard.git

2. Open index.html in your browser

   open index.html

Or simply drag and drop the file into your browser window.

(back to top)

Open index.html in a browser to view the dashboard layout. The page is static — there are no forms to submit or data to fetch — so usage simply means viewing and resizing the browser window to see the responsive behavior in action.

• The layout is built entirely with CSS Grid, using named grid template areas for sidebar, header, and main content
• The sidebar stays fixed with a logo and navigation icons, remaining visible on scroll
• The header is split into a search bar row and a user info/actions row
• The main content area is organized into a nested grid of project cards and a side column for announcements and trending items
• Resize the browser window to see the layout reflow into a single column on smaller screens via media queries
• Card components use consistent spacing, shadows, and a left-accent border for visual hierarchy

(back to top)

• Grid-based page layout (sidebar, header, main content)
• Responsive breakpoints for smaller screens
• Project and announcement card components

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

• Twitter/X: @ayemteezy_
• Email: laurencelestercarino@gmail.com
• GitHub: ayemteezy

Project Link: https://github.com/ayemteezy/calculator-app

(back to top)

• The Odin Project — for the project brief and curriculum
• contrib.rocks — contributor image generator

(back to top)