100 FREE Frontend Challenges
Tags: webdev, 100daysofcode, programming, beginners
Published: 2024-06-27 13:00:00

# Introduction
In the spirit of building strong habits and the **#100DaysOfCode** idea, we decided to make our [list of beautifully crafted "Design To Code" challenges publicly available](https://app.bigdevsoon.me/challenges), where each day you work on recreating (with your variation of course!) the original design screenshot to make it a working website/web app.

The goal is to reflect the provided design with HTML & CSS. If you want to dive deeper, adding interactivity via JS or any frameworks, libraries, or tools is more than encouraged. Maybe you can even create your next micro-SaaS out of it, who knows?

I hope you'll complete all 100 of them and land your dream job as a Web Dev! 🫡

## 1. Profile Card
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1i2l3ejccaxnaf3ybrt2.png)

It is a perfect challenge for practicing Flexbox and improving your CSS skills.

## 2. Add to Bag
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1kqd76btu12iao9phwd.png)

Enhance your interactive design skills by creating a dynamic shopping cart experience.

## 3. Mobile Navigation
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jb0o60u5asfzr1p38zrj.png)

Focus on responsive design and user-friendly mobile navigation solutions.

## 4. Contact Us
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xgdbs23mp5gn1d6fqm5.png)

Learn to design an accessible and user-centric contact form for better customer interaction.

## 5. Recipe
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4sdsa6vwdo2rtnqpuln.png)

Craft a delightful recipe display to enhance readability and user engagement.

## 6. Image Carousel
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q893z68bpb2obzr05wml.png)

Develop an image carousel to understand handling user interactions and transitions.

## 7. Create Account
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjsbn57ms33fwwrbw4jm.png)

Build a user-friendly account creation interface with validations to improve form handling.

## 8. Music Events
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0661r3t7ruok6y4ve2ex.png)

Create a vibrant interface for displaying music events that captivate and inform.

## 9. Password Generator
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2mz3r93xe5ssv863tw7.png)

Implement a password generator to practice generating and handling secure user data.

## 10. Sign-up Page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vrg3453x2b0lm9t29kf.png)

Develop a sign-up page to refine form layout and design, focusing on user experience.

## 11. Hotel Booking
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoqidag66vdlkadkd6mb.png)

Design a streamlined hotel booking interface that offers a seamless booking experience.

## 12. Restaurant Reservation
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9sym4kzh0rsmsuhfvd3.png)

Create a restaurant card with an image, description, reviews, and a clear call-to-action button.

## 13. Task Board
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1o45s6s3ovko53606rtf.png)

Build a task management board that helps users organize projects and daily activities.

## 14. Shopping List
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0kyv4n1m3rltdjztf84.png)

Create an interactive shopping list with order summary, and promo code sections.

## 15. Notifications
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2pnkfws3vi5k0colpw8.png)

Implement a notification system with different types of notifications and an empty state without any of them.

## 16. Fur Friends
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sraxqlekhga9kdzefyri.png)

Craft an engaging list for pet lovers to explore pets with a pet details card.

## 17. Article Slider
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ui27ed5g1s9koua7zm3.png)

Implement an article slider that highlights featured stories with smooth navigation.

## 18. Images Preview
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h41fid9o4vxhthi1roqv.png)

Craft a gallery app that allows users to preview images in different layouts.

## 19. Upload Images
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1661p6a44l5a9dp4joxh.png)

Create an image upload interface that supports drag-and-drop functionality and previews.

## 20. Card Wallet
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmns076pv6458pf3lf9x.png)

Develop a digital wallet interface that displays user cards, and card transactions and allows adding a new card.

## 21. Pricing Plans
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2kc9qv94953v8zdaixj.png)

Design a clear and concise pricing plan interface that helps users choose the right option.

## 22. Messages
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbqng2e5rbczcarnns3x.png)

Build a messaging app interface that supports a conversations list and individual 1-1 message view.

## 23. Home Page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpb1ampl5m7knv0a2464.png)

Create a captivating homepage that draws visitors in and guides them through beautiful plants.

## 24. Movie Ticket
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rt49ai4wr71nt23jdqo.png)

Develop a movie ticket interface that allows users to buy tickets and choose seats.

## 25. Meeting Schedule
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxm8pw85xhcjobkpa7wf.png)

Create a scheduling app that helps users plan and coordinate meetings effectively.

## 26. Job Board
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dos680mqy5srm1oxzrm.png)

Create a job board that is intuitive for users looking for career opportunities.

## 27. Leaderboards
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqdvqi4mour399c0fw0s.png)

Build a leaderboard interface that dynamically displays user rankings and scores from today to year categories.

## 28. Playlist
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63nqdeej6x6frlrsr5j1.png)

Implement a music playlist interface that allows opening a pop-up with the current song.

## 29. Video Player
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10cm3zqy9unc7eudiszm.png)

Create a custom video player that supports various media formats and user interactions.

## 30. Invoices
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgomwc94k8dn2y83utno.png)

Implement an invoice interface that helps users manage billing and track payments efficiently.

## 31. Dashboard
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51u8597o083glen3csnb.png)

Build a comprehensive dashboard that provides users with insights and data visualizations.

## 32. Newsletter
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91zounxmjwnpvyqqaydx.png)

Create a newsletter sign-up page that captures user interest with an attractive design.

## 33. Brand Visualizer
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzqlt6dy3bnh3sfi963s.png)

Develop a tool to create and preview brand elements like color schemes.

## 34. User Profile
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epyemrk884z39nikgudp.png)

Design a user profile dropdown menu with various menu items.

## 35. Rate Us
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53l51bnk0pyrfrkgygwp.png)

Create a feedback form to rate users' experiences and provide valuable insights via emojis.

## 36. Sleep App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5rde5bfmdnyys70zs33.png)

Design a sleep-tracking app that offers insights into sleep patterns and tips for improvement.

## 37. Explore Flights
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xo1d014b6919yoqnknt.png)

Create a complex flight search filter bar.

## 38. Music Festival

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2friau4d3xelrjtw3aau.png)

Build a festival home page with navigation and an engaging hero section.

## 39. QR Code Scanner
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmfrjfdh6uzr2os4kw0q.png)

Implement a QR code scanner that enhances user interaction with quick scanning features.

## 40. FAQ
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7aot13tf7jvefr0wr6w.png)

Create a FAQ section that provides clear and helpful answers to common customer questions via the accordion component.

## 41. Create Workspace
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j4fo437202p6xzoksor.png)

Design a virtual workspace creator that allows users to customize their digital work environment.

## 42. Settings Appearance
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1w0pb83qg6owrkdvs38.png)

Build a settings page that lets users customize the appearance of their application interface.

## 43. Player Profile
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctvq8diqgpfm2bluuok1.png)

Design a player profile for sports apps that showcases player stats, career highlights, and more.

## 44. Website Launch
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5y0h61gnkm6crr9k0zt.png)

Create a launch page with a countdown timer.

## 45. Hosting Features
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0i307f9ob1soar0as07.png)

Build a hosting service feature page that explains the benefits and packages available.

## 46. Customer List
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/356bg2y7z8lm7gpyey90.png)

Develop a customer management table that helps to organize users and contains relevant actions.

## 47. Export File
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qiyw7cuj20uvs50lkhj3.png)

Design a file export interface that supports multiple formats and includes customizable settings.

## 48. Markdown Post
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7n55lu46zkzoovbauqe.png)

Create a markdown-based component that supports bold, italic, and underlined text and has a mention user feature.

## 49. App Navigation
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pebk6vya801pil6q69jm.png)

Build an app navigation menu for desktop and mobile devices.

## 50. Friend Request
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28eveilggk8ek2b1rh5v.png)

Design a social network feature that manages friend requests and user interactions.

## 51. Download App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hetvm9xy6rz3prtvhsbf.png)

Create a download page for apps that includes clear installation instructions.

## 52. Language App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efk143bgytmmthqndy2k.png)

Develop a language learning app that includes lessons, leaderboards, and interactive content.

## 53. Billing Page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4x439zaule8zxcpcqmv.png)

Design a billing page that is user-friendly and makes it easy to view subscriptions, payment methods, and billing history.

## 54. Article Summary
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/us3j71m7saai6nh2i2p9.png)

Create a summary card of the article with images, user info, and relevant stats.

## 55. Progress Bars
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24k83rql0jxt56mbxp60.png)

Design engaging and informative progress bars for applications that track user progress.

## 56. Project Roadmap
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbapvgei9mj22clh7qvm.png)

Build a project management tool that visualizes roadmaps and tracks milestones.

## 57. Game Profile
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8e9i5kvk98a8msfo3j4.png)

Design a game profile interface that displays player achievements, game stats, and badges.

## 58. Create Task
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xtrz39wzgqtxxwfs6xv.png)

Develop a task creation form that simplifies project management and collaboration.

## 59. Calculate Tip
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nnbb6gg3ghu1dt6yr37.png)

Create a tip calculator app that helps users quickly figure out the appropriate tip amount.

## 60. Code Verification
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo8ebdvu3qnkleln1km1.png)

Design a code verification component.

## 61. Flight Ticket
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8g137ycr315nu7ta9jt.png)

Build a flight ticket card preview that includes information and a QR code.

## 62. Testimonials
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulblqf3ppj2rr8te5bw2.png)

Design a testimonials section that showcases user feedback and builds trust with potential clients.

## 63. Weather App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v33f2wil0wfxxyt4zxf.png)

Develop a weather app that provides accurate forecasts, and weather-related news.

## 64. Document Manager
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzyduglacm8iggsyahqs.png)

Create a blog-like tool where users can add new documents, and chapters, delete, and preview them.

## 65. Interests
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhii91knnoyxcguhzvcn.png)

Design a user interest card that allows users to select their interests.

## 66. Navigation UI
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjh7ew1kleg5lu9locaz.png)

Build a dynamic navigation UI that adjusts to user preferences and highlights key areas.

## 67. Select Account
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf2por9hp9zylbt7pwhk.png)

Create an account selection page of who's watching.

## 68. User Satisfaction
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psob4csp2o83j93b5odj.png)

Develop a user satisfaction survey that collects meaningful feedback on user experience.

## 69. Profile Settings
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1xyvhkmm7gmsuila3xc.png)

Design a comprehensive profile settings page that allows users to manage their personal information.

## 70. Cookies Banner
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayl9c1f9neng1jjg4c4a.png)

Create a cookies consent banner that is compliant with data protection regulations and user-friendly.

## 71. Email Client
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c892z413bkjpdahpyu51.png)

Build an email client interface that supports organizing, reading, and composing emails efficiently.

## 72. Image Collections
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrmmmoi4gj2c688oziis.png)

Develop an application that organizes images into collections and offers tagging features.

## 73. Push Notification
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1il6thr28s847q3leh3.png)

Design a push notification component.

## 74. Manage Accounts
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8jnex64cqlh4uh5nne6.png)

Create an account management page that provides a clear overview of user accounts.

## 75. Add Shot
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv70q9dpe2g9xvvqetvw.png)

Develop a modal that allows to add a shot to a collection.

## 76. E-book Store
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xapxffo42bq6ewh7t6hn.png)

Design an e-book store website that offers seamless browsing for users.

## 77. App Integrations
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsa8ao215q47faj2qd87.png)

Create an interface that facilitates easy integration of various apps and services.

## 78. Audio Player
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zlfpu5br2mydl33rkh9.png)

Develop a simple audio player.

## 79. Payment Plan
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/019i3ghktiyppkbaddyg.png)

Design a payment plan interface that provides users with flexible payment options and clear information.

## 80. Articles Grid
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qstnl5e5ee341z7xepjj.png)

Build a grid layout for articles that enhances readability and user engagement.

## 81. Delivery Details
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsywqkcxkqce9yuenu4a.png)

Create a delivery details card that ensures information accuracy and enhances user trust.

## 82. Color Palette
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1jg1w226piwj4xv4cpl.png)

Develop a tool for designers to create and save custom color palettes.

## 83. Socials Share
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aax8ztht5zisihfle6u0.png)

Design a social media sharing component.

## 84. Buy a Coffee
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zwz1cq4wi6w9yh24fbg.png)

Create a donation page that encourages users to support content creators through small contributions.

## 85. Customer Reviews
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3727pqpxt4ihvn8pn7yh.png)

Develop a customer review card that fosters transparency and helps other users make informed decisions.

## 86. Chatbot
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn24lnvtog70bqrwj54c.png)

Build a chatbot that can guide users through your website and answer frequently asked questions.

## 87. Charts
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aigfkngo560lh2wtzix0.png)

Design a series of interactive charts that display data in a clear and engaging manner.

## 88. Fingerprint
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmvyglmer8jeydpwnm3n.png)

Create a feature that utilizes fingerprint scanning or log-in via PIN.

## 89. Voice Call
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f00ovy3mziudhijx67g1.png)

Develop a voice call card that ensures clarity and reliability during calls.

## 90. My Devices
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n79m2pz6kpn07h3ln9jv.png)

Design a card that allows users to manage and monitor all their connected devices.

## 91. Quiz App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5po878vonnr4aqd23pc.png)

Build a quiz app that offers a variety of questions and tracks user progress.

## 92. Search Filters
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q11fg90cgaom301c47gu.png)

Develop search filters that help users find exactly what they're looking for with ease.

## 93. Task Manager
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijkndvieqcdjnepxsl89.png)

Create a task manager that helps users organize their daily tasks and deadlines.

## 94. Time Widget
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2tknk6nqu1b0t2yeynz.png)

Design a time widget that offers various clock functionalities and customization options.

## 95. 404
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7vzwboo7pjhlc5jgzbu.png)

Develop a 404 error page that helps lost users find their way back or to useful resources.

## 96. Subscribe Card
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h782m8g1i6i2lu95tkg6.png)

Create a subscription card feature that captures user interest and increases sign-ups.

## 97. Design Assets
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3txcra08a2915hq0cj8r.png)

Build a design assets home page where users can access different design files.

## 98. Voice Recording
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xq90er7mh45sn80s7dxh.png)

Develop a voice recording app that captures clear audio and offers share, and delete features.

## 99. Columns Card
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whw9hz9t82ghmebiz07c.png)

Create a card layout that displays information in columns for better data presentation.

## 100. Footer
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1oiboc5w42qwzmsdnxx.png)

Design a website footer that includes all necessary links and information in a clean layout.

## Summary
That's a lot of challenges but if you complete all of them, I'm pretty sure you'll get new, awesome dev skills that will 10x speed up your dream job-finding process.

It's been my goal for a long time to spread a project-based learning approach through the community and having [BigDevSoon](https://bigdevsoon.me/) up and running, an app we've been working on for the last 3 years is a great achievement to us.

We have a **SUMMER20** code up and running until September 21, 2024.

Support us if you enjoy the content! ❤️