Weather Dashboard UI
Build a modern weather dashboard based on the provided design using HTML, CSS, and JavaScript. The interface should include a dark sidebar, search bar, user profile area, main weather summary card, highlight cards, hourly forecast section, sunrise/sunset panel, tomorrow forecast card, and other cities cards. Use JavaScript to add simple interactivity such as toggling temperature units, switching active navigation states, handling UI buttons, or rendering forecast data dynamically. The final result should closely match the provided design while remaining responsive and polished.
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
- Create the full dashboard layout using semantic HTML5
- Style the full interface using CSS
- Use JavaScript for interactive UI behavior
- Match the provided design as closely as possible
- Build a vertical sidebar with logo and navigation icons
- Add a top search input and user profile section
- Create a large weather summary card with city, date, temperature, weather state, and high/low values
- Add a temperature unit toggle using JavaScript
- Create a today highlight section with 4 weather detail cards
- Build an hourly forecast section with multiple forecast items
- Add a sunrise and sunset details panel
- Include a tomorrow forecast card
- Build an other cities section with multiple weather cards
- Use a consistent dark theme across the page
- Make buttons and controls interactive
- Ensure responsive behavior for tablet and mobile layouts
- 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.