IntermediateWeb4 hours+150 XPMentor reviewed

Profile Settings Page

Build a clean and modern profile settings page based on the provided design. The interface should include a top navigation bar, profile avatar section, settings sidebar, editable form fields, image upload area, and toggle switches for notifications. Use HTML for structure, CSS for styling, and JavaScript for interactivity such as switching tabs, toggling notification settings, and handling image preview selection on the frontend. The final result should focus on a soft modern UI, clean spacing, form alignment, responsive behavior, and polished interactions.

settings
profile
account
html
css
javascript
form-ui
dashboard
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 settings page based on the provided design
Use semantic HTML5 structure
Style the full interface using CSS
Use JavaScript for frontend interactions
Create a top navigation bar with logo, links, and action icons
Build a left sidebar with settings categories
Highlight the active settings item
Create a profile avatar section on the left
Add a main content card for general settings
Create form fields for name, email address, and phone number
Add an upload image area for profile picture
Use JavaScript to preview the selected profile image on the page
Create toggle switches for push notifications and email notifications
Allow toggles to switch on and off using JavaScript
Add a premium upgrade button in the sidebar
Use hover and active states for buttons, links, and toggles
Make the page 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...