This project is part of The Odin Project curriculum, focusing on creating a visually appealing admin dashboard using HTML and CSS. The primary objective is to leverage CSS Grid for structuring the layout efficiently, ensuring a clean and organized design. Although the project is frontend-only and non-interactive, it emphasizes proper styling and layout techniques.
- HTML5 – Structures the content of the dashboard.
- CSS3 – Handles styling and layout, with a strong emphasis on CSS Grid.
- Static Admin Dashboard – A non-interactive UI designed for practice and demonstration.
- CSS Grid Layout – Structured and flexible layout using CSS Grid.
- Styling & Design – Proper use of CSS for typography, colors, and spacing.
- Well-Defined Sections – Organized into Home, Settings, Your Projects, Announcements, and Trending.
The dashboard consists of the following key sections:
- Header – Contains a search bar and a personalized greeting.
- Home – Includes profile, messages, history, tasks, and community details.
- Your Projects – Displays a list of projects with brief descriptions.
- Announcements – Highlights important updates and notifications.
- Trending – Showcases trending topics and user activities.
This project serves as an educational exercise in CSS Grid and frontend design. It can be used as:
- A reference for structuring similar dashboard layouts.
- A starting point for more complex, interactive projects.
-
Achieved
-
Reference
Although the project is currently static, potential future improvements include:
- Interactivity – Implementing JavaScript for dynamic elements.
- Dynamic Content – Integrating with a backend for real-time data.
- Enhanced Styling – Adding CSS animations and transitions for better UX.
- Drag & Drop – Enabling drag-and-drop functionality for project cards.
- Responsive Design – Adapting the layout for mobile and different screen sizes.
- Clean Code - Follow best practices and use more CSS variables for better maintanibility.
Note: This project was built without considering responsive design.
- The Odin Project – For providing the curriculum and project inspiration.
- Icons & Images – The icons and images used in this project are for educational purposes only.
This project is open-source and available under the MIT License.
For any inquiries or collaborations, feel free to reach out:
- GitHub – linzi-v7
- LinkedIn – Faris Osama