🎯👨‍💻👩‍💻50 FREE Frontend Challenges 🎨🖌🖥

Introduction

In the spirit of building strong habits and the #50DaysOfCode 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 50 of them and land your dream job as a Web Dev! 🫡

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.

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.

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.

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.

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.

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.

Support us by sharing if you enjoy the content! ❤️