IntermediateWeb6-8 hours+200 XPMentor reviewed

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.

weather
dashboard
html
css
javascript
dark-ui
responsive
cards

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.

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

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...