This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
For this challenge, I developed a modern, minimal, and fully responsive intranet homepage for a fictional company named Acme Corp.
The intranet dashboard is designed to:
- Help employees stay informed
- Centralize communication
- Provide rapid access to key tools and resources All structured to reflect intuitive, clean UX.
✨ Features Include:
- 📅 Upcoming Events section to promote meetings & activities
- 📢 Company Announcements to share major internal updates
- 🌟 Team Spotlight, displaying a featured teammate with dynamic avatar initials (no images)
- 🔗 Quick Links to internal tools like HR, payroll & training portals
- 🌤️ Current Office Status, showing location and weather update info
- 🧭 Sidebar Navigation designed with dark mode UI for legibility
- 📱 Responsive layout that works well across desktop and mobile
All of the above was built using:
- ✅ HTML, CSS & JavaScript
- ❌ No frameworks
- 💡 No external image assets—avatars are represented using user initials
Demo
🚀 Try the Live Demo on CodePen
🔗 https://codepen.io/pen?template=JoYGWNN
🔧 Source Code on GitHub
🧾 https://github.com/MakendranG/intranet-challenge.git
📸 Preview screenshot:
Journey
This challenge was a refreshing opportunity to design a full-page layout from scratch. Here's what I focused on during development:
🔧 Design Intent
- Used Flexbox and CSS Grid to create a scalable layout
- Ensured components are modular and styled clearly using BEM-like structure
- Adopted the Inter font for clarity and a modern feel
- Maintained good color contrast and accessible usage of ARIA and semantic HTML
📱 Mobile Friendly
Layouts adapt automatically to small screens — the sidebar gets hidden, and widgets stack fluidly.
🎉 Choices I’m Proud Of
- Replicating a clean, usable layout using only vanilla web technology
- Building a dynamic, avatar-free Team Spotlight using initials inside styled circles
- Writing fully responsive CSS without media query overload
📘 What I Learned
- How to structure large UI components without a JS framework
- Clean CSS and layout patterns pay off when building dashboards
- That even simple HTML/CSS/JS projects can reflect strong UX + real-world utility
How You Can Use This
This intranet design can be adapted for:
- 🔐 Real company dashboards or employee portals
- 🧾 HR or internal team admin tools
- 🧑💻 Onboarding systems and organization dashboards
- Hackathon & internal event utilities
Feedback & Ideas?
💬 I'd love to hear your suggestions, feedback, or what you might build differently!
Leave a comment or check out the project on:
Thanks to the Axero team and DEV for a super fun challenge!
Good luck to all other participants! 🚀
Top comments (0)