Web Challenges
Browse all web challenges and filter by difficulty, pricing, tags, and search.
Notion Style Notes App
Build a fully interactive Notion-style Notes Application with a modern dark UI. The app should simulate a productivity tool where users can create, organize, and edit notes dynamically. The application should include: Sidebar with folders/workspaces Notes list panel Rich text editor view Smooth UI interactions Persistent data storage This challenge focuses heavily on: Advanced DOM manipulation State management without frameworks Complex layout structuring Dynamic rendering UX polish and responsiveness
UI/UX Agency Landing Page
Build a modern UI/UX agency landing page based on the provided design. The project should include a hero section, enquiry form, achievement stats, services section, work process section, industries or case studies section, testimonials, footer, and a separate thank you page shown after form submission. Use HTML for structure, CSS for styling, and JavaScript for simple interactions such as navigation behavior, form handling, sliders, or switching from the landing page to the thank you page. The final result should focus on a polished dark UI, strong visual hierarchy, card-based sections, and responsive behavior.
Payment Form UI Kit
Build a clean and structured payment form UI kit based on the provided design. The interface should include card registration sections, form inputs, validation states, component variants, and a modal layout for invoice or payment handling. Use HTML for structure, CSS for styling, and JavaScript for simple interactions such as selecting saved cards, toggling states, basic validation feedback, and opening or closing modal views. The final result should focus on clean spacing, reusable UI blocks, input states, and polished form styling.
BMI Calculator App
Build a BMI Calculator mobile app UI where users can: Select gender Adjust height using slider Increase/decrease weight & age Calculate BMI View result screen Use JavaScript to calculate BMI and switch between screens dynamically.
Creative Contact Form
Build a modern and stylish contact form section based on the provided design. The layout should include a left information panel with heading, contact details, and social icons, alongside a right form panel with service selection tags, text inputs, and a send button. Use HTML for structure, CSS for styling, and JavaScript for frontend interactions such as selecting interest tags, focus effects, and basic form behavior. The final result should focus on strong typography, split layout, clean spacing, form styling, and responsive design.
E-Book Landing Page
Build a soft and modern e-book landing page based on the provided design. The page should include a navigation bar, hero section, learning or features section, author showcase, promotional discount banner, and footer. Use HTML for structure and CSS for styling only. Focus on pastel colors, soft shadows, rounded shapes, illustration placement, section spacing, and responsive behavior. The final result should look clean, friendly, and visually balanced.
Bento Grid Food Delivery
Build a bold and modern food delivery landing page based on the provided design. The layout should use a bento grid structure with multiple visual cards, including featured food items, app preview, restaurant notifications, sales analytics, menu items, order status, customer image section, ratings card, and map/delivery tracking card. Use HTML for structure and CSS for styling only. Focus on strong grid layout, card spacing, rounded corners, visual hierarchy, colorful sections, and responsive behavior. The final result should feel like a polished modern landing page made from multiple connected content blocks.
Typing Practice Interface
Build a simple and visually bold typing practice interface based on the provided design. The page should include a large title, short text section, typing target or counter, a virtual keyboard, a typing input/display area, and a reset action. Use HTML for structure, CSS for styling, and JavaScript for interactions such as typing detection, highlighting pressed keys, updating the typed text area, and resetting the session. The final result should focus on a clean layout, strong typography, keyboard interaction, and responsive behavior.
Generic Calculator Simulator
Build a clean and modern calculator simulator based on the provided design. The page should include a top navigation area, hero heading, a calculator form card, a totals summary card, and a bottom information or help section. Use HTML for structure, CSS for styling, and JavaScript for simple interactions such as reading form input values, updating totals dynamically, and syncing the dilution slider value. The final result should focus on a polished layout, clean form design, card-based UI, and responsive behavior.
Join the
Engineering
Collective.
Beyond code, it's about the connection. Join elite developers sharing real insights, feedback, and opportunities.
Enter the Community
