IntermediateWeb5-7 hours+180 XPMentor reviewed

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.

dashboard
task-management
productivity
html
css
javascript
calendar
ui
responsive

This challenge doesn't include downloadable assets

Recreate the design from the Figma file using your own images, icons and resources where needed. You are not required to use the exact same images, copy or placeholder data.

You are expected to

Use your own images, icons and resources when needed
Recreate the design based on the provided Figma file
Respect the brand identity, colours, logo and key visuals
Keep the UI structure, layout flow and key sections consistent

Reviewers focus on

Brand colours

0

Completed

—

Average AI review

New here? Read the Tahaddiyat guide to learn the expected structure and submission flow.

Logo usage

Layout structure

Spacing & alignment

UI architecture

Required functionality

Minor differences in content, images or data are fine, but the overall visual identity and design direction should stay clearly consistent with the challenge.

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

Submission

Submit your solution

Share your work for mentor review and showcase your structure, polish and implementation quality.

1 joined

Log in to submit

You need an account to submit your solution and receive mentor feedback.

Log in to submit

Community Discussions

Questions & Answers

Be the first to ask a question about this challenge.

Loading discussions...