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, 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
It is a perfect challenge for practicing Flexbox and improving your CSS skills.
2. Add to Bag
Enhance your interactive design skills by creating a dynamic shopping cart experience.
3. Mobile Navigation
Focus on responsive design and user-friendly mobile navigation solutions.
4. Contact Us
Learn to design an accessible and user-centric contact form for better customer interaction.
5. Recipe
Craft a delightful recipe display to enhance readability and user engagement.
6. Image Carousel
Develop an image carousel to understand handling user interactions and transitions.
7. Create Account
Build a user-friendly account creation interface with validations to improve form handling.
8. Music Events
Create a vibrant interface for displaying music events that captivate and inform.
9. Password Generator
Implement a password generator to practice generating and handling secure user data.
10. Sign-up Page
Develop a sign-up page to refine form layout and design, focusing on user experience.
11. Hotel Booking
Design a streamlined hotel booking interface that offers a seamless booking experience.
12. Restaurant Reservation
Create a restaurant card with an image, description, reviews, and a clear call-to-action button.
13. Task Board
Build a task management board that helps users organize projects and daily activities.
14. Shopping List
Create an interactive shopping list with order summary, and promo code sections.
15. Notifications
Implement a notification system with different types of notifications and an empty state without any of them.
16. Fur Friends
Craft an engaging list for pet lovers to explore pets with a pet details card.
17. Article Slider
Implement an article slider that highlights featured stories with smooth navigation.
18. Images Preview
Craft a gallery app that allows users to preview images in different layouts.
19. Upload Images
Create an image upload interface that supports drag-and-drop functionality and previews.
20. Card Wallet
Develop a digital wallet interface that displays user cards, and card transactions and allows adding a new card.
21. Pricing Plans
Design a clear and concise pricing plan interface that helps users choose the right option.
22. Messages
Build a messaging app interface that supports a conversations list and individual 1-1 message view.
23. Home Page
Create a captivating homepage that draws visitors in and guides them through beautiful plants.
24. Movie Ticket
Develop a movie ticket interface that allows users to buy tickets and choose seats.
25. Meeting Schedule
Create a scheduling app that helps users plan and coordinate meetings effectively.
26. Job Board
Create a job board that is intuitive for users looking for career opportunities.
27. Leaderboards
Build a leaderboard interface that dynamically displays user rankings and scores from today to year categories.
28. Playlist
Implement a music playlist interface that allows opening a pop-up with the current song.
29. Video Player
Create a custom video player that supports various media formats and user interactions.
30. Invoices
Implement an invoice interface that helps users manage billing and track payments efficiently.
31. Dashboard
Build a comprehensive dashboard that provides users with insights and data visualizations.
32. Newsletter
Create a newsletter sign-up page that captures user interest with an attractive design.
33. Brand Visualizer
Develop a tool to create and preview brand elements like color schemes.
34. User Profile
Design a user profile dropdown menu with various menu items.
35. Rate Us
Create a feedback form to rate users' experiences and provide valuable insights via emojis.
36. Sleep App
Design a sleep-tracking app that offers insights into sleep patterns and tips for improvement.
37. Explore Flights
Create a complex flight search filter bar.
38. Music Festival
Build a festival home page with navigation and an engaging hero section.
39. QR Code Scanner
Implement a QR code scanner that enhances user interaction with quick scanning features.
40. FAQ
Create a FAQ section that provides clear and helpful answers to common customer questions via the accordion component.
41. Create Workspace
Design a virtual workspace creator that allows users to customize their digital work environment.
42. Settings Appearance
Build a settings page that lets users customize the appearance of their application interface.
43. Player Profile
Design a player profile for sports apps that showcases player stats, career highlights, and more.
44. Website Launch
Create a launch page with a countdown timer.
45. Hosting Features
Build a hosting service feature page that explains the benefits and packages available.
46. Customer List
Develop a customer management table that helps to organize users and contains relevant actions.
47. Export File
Design a file export interface that supports multiple formats and includes customizable settings.
48. Markdown Post
Create a markdown-based component that supports bold, italic, and underlined text and has a mention user feature.
49. App Navigation
Build an app navigation menu for desktop and mobile devices.
50. Friend Request
Design a social network feature that manages friend requests and user interactions.
51. Download App
Create a download page for apps that includes clear installation instructions.
52. Language App
Develop a language learning app that includes lessons, leaderboards, and interactive content.
53. Billing Page
Design a billing page that is user-friendly and makes it easy to view subscriptions, payment methods, and billing history.
54. Article Summary
Create a summary card of the article with images, user info, and relevant stats.
55. Progress Bars
Design engaging and informative progress bars for applications that track user progress.
56. Project Roadmap
Build a project management tool that visualizes roadmaps and tracks milestones.
57. Game Profile
Design a game profile interface that displays player achievements, game stats, and badges.
58. Create Task
Develop a task creation form that simplifies project management and collaboration.
59. Calculate Tip
Create a tip calculator app that helps users quickly figure out the appropriate tip amount.
60. Code Verification
Design a code verification component.
61. Flight Ticket
Build a flight ticket card preview that includes information and a QR code.
62. Testimonials
Design a testimonials section that showcases user feedback and builds trust with potential clients.
63. Weather App
Develop a weather app that provides accurate forecasts, and weather-related news.
64. Document Manager
Create a blog-like tool where users can add new documents, and chapters, delete, and preview them.
65. Interests
Design a user interest card that allows users to select their interests.
66. Navigation UI
Build a dynamic navigation UI that adjusts to user preferences and highlights key areas.
67. Select Account
Create an account selection page of who's watching.
68. User Satisfaction
Develop a user satisfaction survey that collects meaningful feedback on user experience.
69. Profile Settings
Design a comprehensive profile settings page that allows users to manage their personal information.
70. Cookies Banner
Create a cookies consent banner that is compliant with data protection regulations and user-friendly.
71. Email Client
Build an email client interface that supports organizing, reading, and composing emails efficiently.
72. Image Collections
Develop an application that organizes images into collections and offers tagging features.
73. Push Notification
Design a push notification component.
74. Manage Accounts
Create an account management page that provides a clear overview of user accounts.
75. Add Shot
Develop a modal that allows to add a shot to a collection.
76. E-book Store
Design an e-book store website that offers seamless browsing for users.
77. App Integrations
Create an interface that facilitates easy integration of various apps and services.
78. Audio Player
Develop a simple audio player.
79. Payment Plan
Design a payment plan interface that provides users with flexible payment options and clear information.
80. Articles Grid
Build a grid layout for articles that enhances readability and user engagement.
81. Delivery Details
Create a delivery details card that ensures information accuracy and enhances user trust.
82. Color Palette
Develop a tool for designers to create and save custom color palettes.
83. Socials Share
Design a social media sharing component.
84. Buy a Coffee
Create a donation page that encourages users to support content creators through small contributions.
85. Customer Reviews
Develop a customer review card that fosters transparency and helps other users make informed decisions.
86. Chatbot
Build a chatbot that can guide users through your website and answer frequently asked questions.
87. Charts
Design a series of interactive charts that display data in a clear and engaging manner.
88. Fingerprint
Create a feature that utilizes fingerprint scanning or log-in via PIN.
89. Voice Call
Develop a voice call card that ensures clarity and reliability during calls.
90. My Devices
Design a card that allows users to manage and monitor all their connected devices.
91. Quiz App
Build a quiz app that offers a variety of questions and tracks user progress.
92. Search Filters
Develop search filters that help users find exactly what they're looking for with ease.
93. Task Manager
Create a task manager that helps users organize their daily tasks and deadlines.
94. Time Widget
Design a time widget that offers various clock functionalities and customization options.
95. 404
Develop a 404 error page that helps lost users find their way back or to useful resources.
96. Subscribe Card
Create a subscription card feature that captures user interest and increases sign-ups.
97. Design Assets
Build a design assets home page where users can access different design files.
98. Voice Recording
Develop a voice recording app that captures clear audio and offers share, and delete features.
99. Columns Card
Create a card layout that displays information in columns for better data presentation.
100. Footer
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 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! ❤️
Top comments (45)
BIG respect if you can beat all 100 of them, let your #100DaysOfCode journey begin! 🚀
Is it ok if I solve this and post videos on youtube for an explanation of the code?
Sure thing if you link back to bigdevsoon.me/ or mention it in the video that would be totally ok!
Of course, I will post this link in every video I create. Thank you for allowing.
What BigDevSoon makes a difference. There's frontendmentor, icodethis, greatfrontend, frotnendeval, and there'll be lot others. Now another?
I hear you. The quick answer is the evolution of adaptive and personalized learning with the AI boom. I tried many different websites when I was getting into coding myself, however, I ended up in too many guides/tutorials hell or building things that I didn't need and wasted a bit too much time on it.
With BigDevSoon, the goal is to maximize your learning and bridge the gap until it "clicks" so you can enjoy the good part of coding much faster than with other solutions. From the user's POV, it's cool to be able to choose from different platforms and I'm not saying we have all of it but trying to approach the pain points in a unique, fresh way. E.g. you can get a project with cards like "agile tasks" and build things from day 1 like in your real dev job.
I explored the platform again. Code report feature that actually I like. How about paid plan. For future updates.
Awesome, sorry what was the question? We do have BIG plans that can be checked directly in the app (rocket in the left sidebar)
To make it even easier to work on #100DaysOfCode, we created this GitHub repository: github.com/bigdevsoon/100-days-of-..., it'd be super awesome if you can ⭐️ it, we're still completing all the challenges there but on top of the design screenshot, we've added User Story and Acceptance Criteria for each of the challenges as well as some main README.md to make it easier to jump into the coding journey! 🚀
Is there really a need to be able to recreate each of them..😭😭 anyway I use relume.io, float UI, aceternity ui, daisy ui, if you work with react tailwind this are the coolest libraries to make you a 10x developer check them out , I don't see the need to reinvent the wheel
Cool tech. stack! Definitely quicker with Tailwind and friends, solving all 100 of them would be a quite impressive achievement but selecting a few instead is also good enough 👍
Great list, thank you for sharing.
Amazing for real! Good friking work!
PERFECT projects! Thanks for your posts!
Excellent
You worked hard for the list
Thankful
Very awesome list!
So much to do in 100 days... haha
Nice summer holiday challenge, thanks for the inspiration...👍👍👍
Some comments may only be visible to logged-in visitors. Sign in to view all comments.