Task Management Dashboard
Build a modern task management dashboard based on the provided design. The interface should include a sidebar navigation, top search bar, project cards, tasks list, calendar widget, activity section, and messages panel. Use HTML for structure, CSS for styling, and JavaScript for dynamic interactions. Focus on spacing, card layout, progress bars, task states, icons, calendar styling, and responsive behavior. The final result should closely match the provided design while staying clean and organized.
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 the full dashboard based on the provided design
- Use semantic HTML5 structure
- Style the full interface using CSS
- Use JavaScript for interactive dashboard behavior
- Create a left sidebar with navigation links and active state
- Add a top search bar and profile section
- Build project cards with logo, title, progress label, progress bar, tags, team avatars, and due date
- Create a tasks list section with task numbers and completion states
- Allow users to mark tasks as completed using JavaScript
- Style completed tasks differently from active tasks
- Build a calendar widget matching the provided layout
- Create an activity or timeline section with task durations
- Add a messages panel with user avatars, names, and preview text
- Use hover and active states for buttons, cards, and task actions
- Make the layout responsive for tablet and mobile devices
- Keep code clean and organized 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.