Project Management
Build a modern multi-page project management web app based on the provided design. This project should not be treated as a simple landing page. It should include multiple screens and connected sections such as a homepage, profile page, task management area, and productivity-focused dashboard interfaces. Use HTML for structure, CSS for styling, and JavaScript for interactivity and page behavior. The final result should focus on a modern dark UI, reusable components, navigation between pages, task cards, profile management sections, and responsive layouts. This challenge is designed to simulate a larger real-world frontend project with multiple pages and shared UI patterns.
Attention
This challenge does NOT include downloadable assets.
You are expected to:
- Use your own images, icons, and resources when needed
- Recreate the design based on the provided Figma file
- Respect the main brand identity, colors, logo, and key visual elements
- Keep the overall UI structure, layout flow, and important sections consistent with the design
You are NOT required to use the exact same images, text content, or placeholder data from the original design.
Your focus should be on:
- Brand colors
- Logo usage
- Layout structure
- Spacing and alignment
- UI architecture
- Required functionality
Minor differences in content, images, or displayed data are acceptable, but the overall visual identity and core design direction should remain clearly consistent with the challenge.
Project Requirements
- Build a multi-page web app based on the provided design
- Use semantic HTML5 structure across all pages
- Style the full project using CSS
- Use JavaScript for interactions and page behavior
- Create a shared navigation bar or header across pages
- Build a homepage with hero section and feature cards
- Create a project management overview section
- Build at least one dashboard-style page
- Create a profile page with user information and edit actions
- Build a task management page with task groups or task cards
- Add a task search input or filtering UI
- Use reusable card and button styles across the project
- Create consistent dark theme styling throughout the app
- Add hover and active states for links, buttons, and cards
- Make all pages responsive for tablet and mobile devices
- Keep layout and spacing consistent across different screens
- Organize code clearly across HTML, CSS, and JavaScript files
Ready to submit your solution?
Upload your project for mentor review and showcase your structure, polish, and implementation quality.
Login Required
You need to be logged in to submit your solution for this challenge.