Frontend Challenge Solution: Office Edition – CoreSync Intranet Dashboard (HTML, CSS & JS)

GraceO7 — Wed, 16 Jul 2025 18:53:21 +0000

🔔 This is a submission for the Frontend Challenge: Office Edition, sponsored by Axero, via Holistic WebDev: Office Space.

🚀 CoreSync – Intranet Hub Dashboard

I’m excited to share CoreSync, my solution for the Frontend Challenge: Office Edition! This project is a fully responsive, accessible, and user-friendly intranet dashboard built entirely with HTML, CSS, and vanilla JavaScript—no frameworks involved.

🛠️ What I Built

CoreSync is designed to simulate a professional intranet homepage that employees can rely on daily. Every section was carefully built with usability and simplicity in mind:

📱 Responsive Layout: Adjusts perfectly across devices using Flexbox and Grid, ensuring clean visuals on both mobile and desktop.
🔎 Top Bar Features: The header includes a search field, notification bell, and a user profile photo, Dark Mode Toggle icon. These elements mimic a modern workspace dashboard and help make the layout feel complete and realistic.
🌙 Dark Mode Toggle: A theme switch in the header lets users toggle between light and dark themes during their session. While the preference isn’t saved across visits yet, the switch offers instant feedback and enhances usability.
📂 Sidebar Navigation: A collapsible sidebar offers easy access to key sections like Workspace, Teams, Inbox, and Settings — and automatically collapses on smaller screens.
👤 My Workspace: Features a friendly greeting, avatar, and overview cards to give users a personal, informative start to their day.
📌 Quick Links & Task Cards: In the “My Workspace” area, I added task reminders, notification boxes, and shortcut buttons to simulate a functional dashboard experience.
👥 Our Teams Section: Displays team members in visually styled cards, helping users quickly recognize coworkers or departments.
📨 Inbox Cards: Dynamic message cards with icons and hover effects — all fully responsive and cleanly organized.
❓ FAQ Accordion: Built with custom JavaScript to reveal or hide answers when questions are clicked — helping reduce clutter.
⚙️ Settings Panel: Toggle switches and buttons built from scratch allow users to control various features of the dashboard.
♿ Accessibility: From semantic HTML to keyboard navigation and proper contrast ratios — accessibility was a top priority throughout.
💻 No Frameworks: This project was built using only core web tech — HTML, CSS, and JavaScript — keeping it lightweight and demonstrating frontend fundamentals clearly.

✨My Journey

Before this challenge, I’d never built a full intranet interface. From designing the layout to making it fully responsive and accessible, the process pushed me to think like a product designer and developer at once.

There were moments I got stuck — especially when implementing the dark mode toggle and accordion FAQ — but I worked through each hurdle with pure JavaScript. I also focused a lot on accessibility, which made me rethink how users with different needs interact with the web.

This wasn’t just about coding — it was about building something real, practical, and usable.

🔍 Demo & Source Code

🚀 Live Demo
💻 View Source Code on GitHub

📚 What I Learned

Working on CoreSync helped me:

Practice responsive and accessible design techniques
Improve JavaScript DOM manipulation skills
Understand the importance of UI state management
Pay attention to user experience and clean design
Build confidence working without frameworks

💬 Let’s Connect!

I'd love to hear your thoughts!

If you have feedback, questions about the code, or want to chat about frontend development, feel free to drop a comment. I’m open to ideas and always learning.

Thanks for reading and checking out my project!

— Grace O7