Fitness Tracking Dashboard
Build a modern and visually rich fitness tracking dashboard based on the provided design. The interface should include a sidebar navigation, activity summary cards, body tracking visualization, calories and heart stats, water intake tracking, and activity analytics charts. Use HTML for structure, CSS for styling, and JavaScript for interactivity and dynamic UI behavior. You can use static or local mock data inside JavaScript to render fitness stats such as calories, duration, heart rate, water intake, and activity progress. The final result should focus on clean dashboard layout, reusable card components, responsive design, dark theme styling, and interactive visual sections.
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 fitness dashboard based on the provided design
- Use semantic HTML5 structure
- Style the full interface using CSS
- Use JavaScript for dynamic rendering and UI interactions
- Create a sidebar navigation with icons and active states
- Build a top header with user profile and greeting section
- Create an activity summary card with calories and duration
- Display nutrition cards for protein, carbs, fats, and water
- Build a body tracking section with labeled body parts
- Create stats cards for calories, heart rate, and water intake
- Add circular or progress-style indicators using CSS and JavaScript
- Build an activity tracking section with date selection UI
- Create chart-like visual sections for time, distance, and speed
- Render dashboard values dynamically from JavaScript data
- Add hover and active states for buttons and UI elements
- Use a consistent dark theme with proper spacing and hierarchy
- 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.