This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
Frontend Challenge: Office Edition
Sponsored by Axero, Holistic Webdev: Office Space
What I Built
For this challenge, I designed an intranet homepage layout for a fictional company. The goal was to create a clean, functional, and user-friendly digital workspace that enhances the employee experience. The homepage includes the following key features:
- Navigation Bar: Easy access to core sections such as Dashboard, Projects, HR Resources, and IT Helpdesk.
- Welcome Banner: A personalized greeting that makes users feel right at home when they log in.
- Upcoming Events: A section displaying key company events, meetings, and celebrations.
- Team Spotlights: A rotating display of team members showcasing their accomplishments.
- Quick Links: Shortcuts to essential resources like IT helpdesk and company policies.
- News Section: Displaying important company news, such as product launches or updates.
- Task Summary: A quick view of upcoming tasks and deadlines to help employees stay on top of their workload.
- Search Bar: An intuitive search feature for internal resources, documents, and people.
The intranet layout uses CSS Grid for a flexible and responsive design, ensuring an optimal viewing experience on both desktops and mobile devices.
Demo
You can explore the project and view the live demo via the following links:
- CodePen: View on CodePen
Journey
Design and Planning
I started by sketching the basic layout on paper to visualize where each section would go. My goal was to keep the design simple and functional, making sure users could easily navigate between sections without feeling overwhelmed. The focus was on usability—after all, an intranet is a tool, and it needs to serve employees’ needs quickly.
HTML Structure
The first step was building the layout using semantic HTML tags. I divided the page into distinct sections—each dedicated to a feature, like team spotlights or news. I used a main tag for the bulk of the content and divided it into sections for better structure and accessibility. The nav tag contains all the links to internal resources.
CSS Styling
I used CSS Grid to ensure the layout is flexible, adjusting seamlessly across various screen sizes. The intranet homepage adjusts from a single-column layout on mobile to a multi-column layout on larger screens. I chose a blue and white color scheme for a professional, clean look, and added box shadows to create a sense of depth for each widget.
One of the most rewarding features to implement was the rotating team spotlight using CSS and JavaScript. This adds dynamic content to the homepage, keeping things fresh and engaging. I also made sure that the design was responsive and worked well on mobile, with the grid switching to a column layout for smaller screens.
JavaScript Interactivity
To make the intranet more interactive, I used JavaScript for the rotating team spotlight carousel. This automatically cycles through team members every few seconds. I also added functionality to the search bar so that it dynamically changes its placeholder text when users focus on it—creating a more intuitive experience.
What I Learned
- I honed my skills in CSS Grid for creating responsive layouts.
- I deepened my understanding of JavaScript for DOM manipulation and dynamic content like the team spotlight carousel.
- I also focused on creating clean, maintainable code, which is crucial when building internal company tools that may need to evolve over time.
Proud Moments
- The rotating team spotlight is a feature I’m particularly proud of because it adds an interactive and personalized touch to the intranet homepage.
- The layout is fully responsive, adapting seamlessly to different screen sizes, which makes it more accessible and user-friendly.
This challenge was a great opportunity to experiment with both design and functionality, and I’m excited with how the project turned out!
Team Submissions
This submission is a solo effort, and I worked independently on all aspects of this project.
License
The code for this project is available under the MIT License. Feel free to use and modify it for your own projects.
Cover Image
*
Thank you for the opportunity to participate in the Frontend Challenge: Office Edition. I’m looking forward to hearing feedback and learning from fellow developers! 🚀
Top comments (0)