100 Days of Code - Design to Code Challenges

Star this repo to support the community and stay updated with new content.

100 frontend challenges with professional designs, user stories, and acceptance criteria. Build them your way - code from scratch, vibe code with AI, or use BigDevSoon with Merlin AI for the full experience.

What's Inside

Each challenge includes:

Professional design mockup (screenshot)
User story explaining the context
Acceptance criteria to validate your solution
Tips for clean implementation

Perfect for the #100DaysOfCode movement - one challenge per day, from beginner-friendly cards to advanced dashboards.

Get Started

Try it free - Jump into the Demo Editor and start coding instantly, no sign-up needed.

Full platform - BigDevSoon comes with a 7-day free trial that includes:

Merlin AI - your built-in coding companion for vibe coding
Cloud saves, npm packages, asset libraries, and Figma designs
Track progress across all 100 challenges

Code locally - Clone this repo and build with your favorite tools.

AI-Assisted Development

These challenges are structured for AI collaboration. Each has clear specs that work great with coding agents like Claude, Cursor, GitHub Copilot, and others. Feed the user story + acceptance criteria to your AI assistant and iterate together.

See AGENTS.md for a detailed guide on using AI coding agents with these challenges.

AI Collaboration Log

In 2026, knowing how to code isn't enough - you need to show you can effectively collaborate with AI tools. Each challenge includes an AI Collaboration Log template. Think of it as your prompt engineering portfolio - document which AI tools you used, what prompts worked, what you had to fix manually, and what you learned.

Why this matters:

Companies want to see you can direct AI tools effectively, not just use them blindly
Interview talking points: "Here's how I used Claude to build this component in 2 hours instead of 8"
Project Operator mindset - modern developers architect solutions and delegate to the best tool for the job

The log is optional but recommended. Fill it out as you complete each challenge while your prompts are fresh. You'll build a unique portfolio asset that shows not just what you built, but how you work.

Template preview:

AI Tool Used: Claude Code, Cursor, Copilot, Merlin AI, etc.
Prompts That Worked: What you asked the AI that produced good results
Manual Fixes: What the AI got wrong that you had to correct
Key Learnings: What you learned about effective AI collaboration
Time Estimate: X hours with AI vs ~Y hours without

How to Approach

Read the requirements - Each challenge has a user story and acceptance criteria. Understand what you're building first.
Design to code - Replicate the design mockup. Match it closely, but add your own flair.
Add interactivity - Designs are static, your code shouldn't be. Bring it to life with JavaScript.
Log your AI workflow - Fill out the AI Collaboration Log to build your prompt engineering portfolio.
Share your work - Post your solution with #100DaysOfCode and #BigDevSoon.

Resources

Images

Icons

Fonts

Colors

Sounds

Community

Star this repo and share it with fellow developers
Join BigDevSoon - complete challenges with Merlin AI and track your progress
Share your solutions on Twitter/X, LinkedIn, or Discord
Tag #100DaysOfCode and #BigDevSoon to connect with other builders

Challenge List

Day 1: Profile Card

Day 2: Add to Bag

Day 3: Mobile Navigation

Day 4: Contact Us

Day 5: Recipe

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 13: Task Board

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 22: Messages

Day 23: Home Page

Day 24: Movie Ticket

Day 25: Meeting Schedule

Day 26: Job Board

Day 27: Leaderboards

Day 28: Playlist

Day 29: Video Player

Day 30: Invoices

Day 31: Dashboard

Day 32: Newsletter

Day 33: Brand Visualizer

Day 34: User Profile

Day 35: Rate Us

Day 36: Sleep App

Day 37: Explore Flights

Day 38: Music Festival

Day 39: QR Code Scanner

Day 40: FAQ

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 65: Interests

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 75: Add Shot

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 86: ChatBot

Day 87: Charts

Day 88: Fingerprint

Day 89: Voice Call

Day 90: My Devices

Day 91: QuizApp

Day 92: Search Filters

Day 93: Task Manager

Day 94: Time Widget

Day 95: 404

Day 96: Subscribe Card

Day 97: Design Assets

Day 98: Voice Recording

Day 99: Columns Card

Day 100: Footer

Name		Name	Last commit message	Last commit date
Latest commit History 23 Commits
day-01		day-01
day-02		day-02
day-03		day-03
day-04		day-04
day-05		day-05
day-06		day-06
day-07		day-07
day-08		day-08
day-09		day-09
day-10		day-10
day-100		day-100
day-11		day-11
day-12		day-12
day-13		day-13
day-14		day-14
day-15		day-15
day-16		day-16
day-17		day-17
day-18		day-18
day-19		day-19
day-20		day-20
day-21		day-21
day-22		day-22
day-23		day-23
day-24		day-24
day-25		day-25
day-26		day-26
day-27		day-27
day-28		day-28
day-29		day-29
day-30		day-30
day-31		day-31
day-32		day-32
day-33		day-33
day-34		day-34
day-35		day-35
day-36		day-36
day-37		day-37
day-38		day-38
day-39		day-39
day-40		day-40
day-41		day-41
day-42		day-42
day-43		day-43
day-44		day-44
day-45		day-45
day-46		day-46
day-47		day-47
day-48		day-48
day-49		day-49
day-50		day-50
day-51		day-51
day-52		day-52
day-53		day-53
day-54		day-54
day-55		day-55
day-56		day-56
day-57		day-57
day-58		day-58
day-59		day-59
day-60		day-60
day-61		day-61
day-62		day-62
day-63		day-63
day-64		day-64
day-65		day-65
day-66		day-66
day-67		day-67
day-68		day-68
day-69		day-69
day-70		day-70
day-71		day-71
day-72		day-72
day-73		day-73
day-74		day-74
day-75		day-75
day-76		day-76
day-77		day-77
day-78		day-78
day-79		day-79
day-80		day-80
day-81		day-81
day-82		day-82
day-83		day-83
day-84		day-84
day-85		day-85
day-86		day-86
day-87		day-87
day-88		day-88
day-89		day-89
day-90		day-90
day-91		day-91
day-92		day-92
day-93		day-93
day-94		day-94
day-95		day-95
day-96		day-96
day-97		day-97
day-98		day-98
day-99		day-99

Folders and files

Latest commit

History

Repository files navigation