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.