admin-dashboard

A responsive admin dashboard built with HTML, CSS Grid, and vanilla JavaScript
as part of The Odin Project – Intermediate HTML & CSS course.

This project demonstrates advanced CSS Grid layout techniques by creating a fully-functional dashboard interface with a sidebar, header, project cards, announcements section, and trending users panel.

---

🚀 Live Demo

👉 https://top-submissions.github.io/fullstackjs-admin-dashboard/

---

📋 Project Overview

The dashboard is designed with a modern, professional interface:

• Sidebar navigation with SVG icons
• Header containing user info, search, and action buttons
• Projects grid with responsive cards
• Announcements & trending users panel
• Fully responsive across desktop, tablet, and mobile

---

✨ Features

• Responsive Layout: CSS Grid for main and nested layouts
• SVG Icons: Loaded using <use> tags
• Interactive Elements:
  • Hover states for navigation items
  • Action buttons on project cards
  • Functional search bar
• Mobile-Friendly: Adapts to smaller screens
• Modern Design: Clean UI with transitions and hover effects

---

🛠 Technologies Used

• HTML5: Semantic markup structure
• CSS3: Grid, Flexbox, CSS Variables, Media Queries
• JavaScript (ES6): DOM manipulation for interactive features
• SVG: Vector icons for interface elements
• Google Fonts: Roboto font family

---

🎨 Design Implementation

• Main Grid: 2 columns, 2 rows

  • Column 1: Sidebar (fixed width)
  • Column 2: Header + Main Content

• Header Grid: 2x2 for search, user info, greeting, actions

• Main Content Grid: 2 columns for projects and right sidebar

• Projects Grid: Responsive cards

Color Scheme:

Color	Usage	HEX Code
Primary Blue	Sidebar, buttons	#1992d4
Accent Yellow	Card borders, avatars	#f0b429
Light Gray	Background	#e2e8f0
White	Cards, header	#ffffff
Dark Gray	Text	#333333
Medium Gray	Secondary text	#666666

---

📱 Responsive Design

• Desktop: Full layout with sidebar
• Tablet: Stacked main content, smaller sidebar
• Mobile: Single column layout, hamburger menu (future enhancement)

---

📚 Learning Outcomes

• Advanced CSS Grid techniques
• Nested grids and responsive design
• SVG icon implementation
• JavaScript DOM manipulation
• Project structure and organization

---

🙏 Acknowledgments

• The Odin Project – course specification and guidance
• Material Design Icons – icon inspiration
• Google Fonts – Roboto typeface