100-days-of-code

# 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](https://bigdevsoon.me) 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](https://app.bigdevsoon.me/demo/custom/browser) and start coding instantly, no sign-up needed.

**Full platform** - [BigDevSoon](https://bigdevsoon.me) 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](./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:**

```markdown
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

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

## Resources

### Images

- [Unsplash](https://unsplash.com/)
- [Lunacy](https://icons8.com/lunacy)

### Icons

- [Font Awesome](https://fontawesome.com/icons)
- [Material Icons](https://fonts.google.com/icons)
- [Feather Icons](https://feathericons.com/)

### Fonts

- [Google Fonts](https://fonts.google.com/)
- [Adobe Fonts](https://fonts.adobe.com/fonts)
- [Font Squirrel](https://www.fontsquirrel.com/)
- [Fontsource](https://fontsource.org/)

### Colors

- [Material Design](https://materialui.co/colors)
- [Color Hunt](https://colorhunt.co/)
- [Chakra UI](https://v2.chakra-ui.com/docs/styled-system/theme#colors)

### Sounds

- [Pixabay](https://pixabay.com/sound-effects/)
- [Freesound](https://freesound.org/)

## Community

- Star this repo and share it with fellow developers
- [Join BigDevSoon](https://app.bigdevsoon.me) - complete challenges with Merlin AI and track your progress
- Share your solutions on [Twitter/X](https://twitter.com/BigDevSoon), [LinkedIn](https://www.linkedin.com/company/bigdevsoon), or [Discord](https://discord.gg/bigdevsoon)
- Tag #100DaysOfCode and #BigDevSoon to connect with other builders

## Challenge List

### [Day 1](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-01): Profile Card

![Profile Card Design](./day-01/design.png)

### [Day 2](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-02): Add to Bag

![Add to Bag Design](./day-02/design.png)

### [Day 3](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-03): Mobile Navigation

![Mobile Navigation Design](./day-03/design.png)

### [Day 4](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-04): Contact Us

![Contact Us Design](./day-04/design.png)

### [Day 5](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-05): Recipe

![Recipe Design](./day-05/design.png)

### [Day 6](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-06): Image Carousel

![Image Carousel Design](./day-06/design.png)

### [Day 7](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-07): Create Account

![Create Account Design](./day-07/design.png)

### [Day 8](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-08): Music Events

![Music Events Design](./day-08/design.png)

### [Day 9](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-09): Password Generator

![Password Generator Design](./day-09/design.png)

### [Day 10](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-10): Sign Up Page

![Sign Up Page Design](./day-10/design.png)

### [Day 11](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-11): Hotel Booking

![Hotel Booking Design](./day-11/design.png)

### [Day 12](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-12): Restaurant Reservation

![Restaurant Reservation Design](./day-12/design.png)

### [Day 13](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-13): Task Board

![Task Board Design](./day-13/design.png)

### [Day 14](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-14): Shopping List

![Shopping List Design](./day-14/design.png)

### [Day 15](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-15): Notifications

![Notifications Design](./day-15/design.png)

### [Day 16](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-16): Fur Friends

![Fur Friends Design](./day-16/design.png)

### [Day 17](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-17): Article Slider

![Article Slider Design](./day-17/design.png)

### [Day 18](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-18): Images Preview

![Images Preview Design](./day-18/design.png)

### [Day 19](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-19): Upload Images

![Upload Images Design](./day-19/design.png)

### [Day 20](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-20): Card Wallet

![Card Wallet Design](./day-20/design.png)

### [Day 21](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-21): Pricing Plans

![Pricing Plans Design](./day-21/design.png)

### [Day 22](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-22): Messages

![Messages Design](./day-22/design.png)

### [Day 23](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-23): Home Page

![Home Page Design](./day-23/design.png)

### [Day 24](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-24): Movie Ticket

![Movie Ticket Design](./day-24/design.png)

### [Day 25](https://github.com/bigdevsoon/100-days-of-code/tree/main/day-25): Meeting Schedule

![Meeting Schedule Design](./day-25/design.png)

### [Day 26](https://github.com/b

[truncated…]