100 Days Of Code: Design to Code Challenge
Please star this repository to support our community!
Visit our platform for Developers and discover more fun stuff to build: BigDevSoon.
Welcome to the ultimate 100 Days of Design to Code Challenge! Whether you're just starting out or looking to sharpen your skills, this challenge is your pathway from a Junior to a Senior Frontend Developer with a flair for design. Each day brings a new challenge, complete with a unique design and detailed user stories.
Challenge Objective
The goal is simple: commit to coding by recreating beautiful designs daily for the next 100 days. By the end of this journey, you will have honed your skills in JavaScript, HTML, CSS, and popular frameworks like TailwindCSS. Each project is designed to be engaging, from completing pixel-perfect designs to adding your interactive flair.
What You Will Achieve
- Journey From Beginner to Advanced Frontend Developer.
- Master front-end technologies and frameworks.
- Build a professional portfolio of 100 unique challenges.
- Increase your chances of landing a Frontend job by a lot!
How to Approach This Challenge
-
Understand requirements: Use any combination of HTML/CSS/JS, libraries and frameworks as you wish! Also, each day starts with a clear User Story and Acceptance Criteria to guide your challenge.
-
Design to code (1 per day ideally): Attempt to replicate the provided design image with precision. Variations are welcomed for personal flair!
-
Add Interactivity: While designs focus on static elements, adding interactive features is encouraged to enhance functionality.
-
Log Your Progress: Keep a daily log of your progress and achievements. When using BigDevSoon, tracking, and sharing your progress on social media to showcase your work and inspire others is super easy.
-
Challenge resources: You are only given a design screenshot to work with hence all the icons, fonts, images and other resources need to be searched on your own, while working in BigDevSoon's Platform, we provide resources and BIG users can download Figma Designs with everything included.
Resource List
Images
Icons
Fonts
Colors
Sounds
Join the Community
Sign up at BigDevSoon to access community support on Discord and complete all challenges in one place. Free users receive all challenge images and can upgrade for additional resources such as Figma designs.
Sharing Your Work
Make your journey viral by sharing your daily project links and images on platforms like LinkedIn, Twitter, and Instagram. Use the hashtag #100DaysOfCode and tag #BigDevSoon to connect with fellow coders and increase visibility.
Let's Get Coding!
Are you ready to start your coding and design journey? Dive into the challenges, explore new technologies, and transform your skills. Happy coding, and good luck on completing all the challenges!
Start Date: [xx/xx/xxxx]
#100DaysOfCode #CodeToLearn #BigDevSoon #CodeNewbie #Frontend
Challenge List
Day 1: Profile Card
Day 2: Add to Bag
Day 3: Mobile Navigation
Day 4: Contact Us
Day 6: Image Carousel
Day 7: Create Account
Day 8: Music Events
Day 9: Password Generator
Day 10: Sign Up Page
Day 11: Hotel Booking
Day 12: Restaurant Reservation
Day 14: Shopping List
Day 15: Notifications
Day 16: Fur Friends
Day 17: Article Slider
Day 18: Images Preview
Day 19: Upload Images
Day 20: Card Wallet
Day 21: Pricing Plans
Day 24: Movie Ticket
Day 25: Meeting Schedule
Day 27: Leaderboards
Day 29: Video Player
Day 33: Brand Visualizer
Day 34: User Profile
Day 37: Explore Flights
Day 38: Music Festival
Day 39: QR Code Scanner
Day 41: Create Workspace
Day 42: Settings Appearance
Day 43: Player Profile
Day 44: Website Launch
Day 45: Hosting Features
Day 46: Customer List
Day 47: Export File
Day 48: Markdown Post
Day 49: App Navigation
Day 50: Friend Request
Day 51: Download App
Day 52: Language App
Day 53: Billing Page
Day 54: Article Summary
Day 55: Progress Bars
Day 56: Project Roadmap
Day 57: Game Profile
Day 58: Create Task
Day 59: Calculate Tip
Day 60: Code Verification
Day 61: Flight Ticket
Day 62: Testimonials
Day 63: Weather App
Day 64: Document Manager
Day 66: Navigation UI
Day 67: Select Account
Day 68: User Satisfaction
Day 69: Profile Settings
Day 70: Cookies Banner
Day 71: Email Client
Day 72: Image Collections
Day 73: Push Notification
Day 74: Manage Accounts
Day 76: E-book Store
Day 77: App Integrations
Day 78: Audio Player
Day 79: Payment Plan
Day 80: Articles Grid
Day 81: Delivery Details
Day 82: Color Palette
Day 83: Socials Share
Day 84: Buy a Coffee
Day 85: Customer Reviews
Day 88: Fingerprint
Day 92: Search Filters
Day 93: Task Manager
Day 94: Time Widget
Day 96: Subscribe Card
Day 97: Design Assets
Day 98: Voice Recording
Day 99: Columns Card