https://github.com/top-submissions/fullstackjs-admin-dashboard

https://github.com/top-submissions/fullstackjs-admin-dashboard

css-grids full-stack-js-path odin-project the-odin-project the-odin-project-full-stack-js top

Last synced: 25 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/top-submissions/fullstackjs-admin-dashboard
• Owner: top-submissions
• Created: 2025-12-21T07:15:52.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2025-12-22T06:20:38.000Z (6 months ago)
• Last Synced: 2025-12-23T04:26:23.156Z (6 months ago)
• Topics: css-grids, full-stack-js-path, odin-project, the-odin-project, the-odin-project-full-stack-js, top
• Language: HTML
• Homepage:
• Size: 20.5 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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 `` 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