100-days-of-code

100-days-of-code

100 Days of Code | Daily Challenges | Beautifully Crafted Designs | Created for Full-stack/Frontend/Web Developers - Vibe Code with AI.

Stars: 60

Visit
 screenshot

100 Days of Code is a repository containing 100 frontend challenges with professional designs, user stories, and acceptance criteria. It provides a platform for developers to practice coding daily, from beginner-friendly cards to advanced dashboards. The challenges are structured for AI collaboration, allowing users to work with coding agents like Claude, Cursor, and GitHub Copilot. The repository also includes an AI Collaboration Log template to document the use of AI tools and showcase effective collaboration. Developers can replicate design mockups, add interactivity with JavaScript, and share their solutions on social media platforms.

README:

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

  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

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

Profile Card Design

Day 2: Add to Bag

Add to Bag Design

Day 3: Mobile Navigation

Mobile Navigation Design

Day 4: Contact Us

Contact Us Design

Day 5: Recipe

Recipe Design

Day 6: Image Carousel

Image Carousel Design

Day 7: Create Account

Create Account Design

Day 8: Music Events

Music Events Design

Day 9: Password Generator

Password Generator Design

Day 10: Sign Up Page

Sign Up Page Design

Day 11: Hotel Booking

Hotel Booking Design

Day 12: Restaurant Reservation

Restaurant Reservation Design

Day 13: Task Board

Task Board Design

Day 14: Shopping List

Shopping List Design

Day 15: Notifications

Notifications Design

Day 16: Fur Friends

Fur Friends Design

Day 17: Article Slider

Article Slider Design

Day 18: Images Preview

Images Preview Design

Day 19: Upload Images

Upload Images Design

Day 20: Card Wallet

Card Wallet Design

Day 21: Pricing Plans

Pricing Plans Design

Day 22: Messages

Messages Design

Day 23: Home Page

Home Page Design

Day 24: Movie Ticket

Movie Ticket Design

Day 25: Meeting Schedule

Meeting Schedule Design

Day 26: Job Board

Job Board Design

Day 27: Leaderboards

Leaderboards Design

Day 28: Playlist

Playlist Design

Day 29: Video Player

Video Player Design

Day 30: Invoices

Invoices Design

Day 31: Dashboard

Dashboard Design

Day 32: Newsletter

Newsletter Design

Day 33: Brand Visualizer

Brand Visualizer Design

Day 34: User Profile

User Profile Design

Day 35: Rate Us

Rate Us Design

Day 36: Sleep App

Sleep App Design

Day 37: Explore Flights

Explore Flights Design

Day 38: Music Festival

Music Festival Design

Day 39: QR Code Scanner

QR Code Scanner Design

Day 40: FAQ

FAQ Design

Day 41: Create Workspace

Create Workspace Design

Day 42: Settings Appearance

Settings Appearance Design

Day 43: Player Profile

Player Profile Design

Day 44: Website Launch

Website Launch Design

Day 45: Hosting Features

Hosting Features Design

Day 46: Customer List

Customer List Design

Day 47: Export File

Export File Design

Day 48: Markdown Post

Markdown Post Design

Day 49: App Navigation

App Navigation Design

Day 50: Friend Request

Friend Request Design

Day 51: Download App

Download App Design

Day 52: Language App

Language App Design

Day 53: Billing Page

Billing Page Design

Day 54: Article Summary

Article Summary Design

Day 55: Progress Bars

Progress Bars Design

Day 56: Project Roadmap

Project Roadmap Design

Day 57: Game Profile

Game Profile Design

Day 58: Create Task

Create Task Design

Day 59: Calculate Tip

Calculate Tip Design

Day 60: Code Verification

Code Verification Design

Day 61: Flight Ticket

Flight Ticket Design

Day 62: Testimonials

Testimonials Design

Day 63: Weather App

Weather App Design

Day 64: Document Manager

Document Manager Design

Day 65: Interests

Interests Design

Day 66: Navigation UI

Navigation UI Design

Day 67: Select Account

Select Account Design

Day 68: User Satisfaction

User Satisfaction Design

Day 69: Profile Settings

Profile Settings Design

Day 70: Cookies Banner

Cookies Banner Design

Day 71: Email Client

Email Client Design

Day 72: Image Collections

Image Collections Design

Day 73: Push Notification

Push Notification Design

Day 74: Manage Accounts

Manage Accounts Design

Day 75: Add Shot

Add Shot Design

Day 76: E-book Store

E-book Store Design

Day 77: App Integrations

App Integrations Design

Day 78: Audio Player

Audio Player Design

Day 79: Payment Plan

Payment Plan Design

Day 80: Articles Grid

Articles Grid Design

Day 81: Delivery Details

Delivery Details Design

Day 82: Color Palette

Color Palette Design

Day 83: Socials Share

Socials Share Design

Day 84: Buy a Coffee

Buy a Coffee Design

Day 85: Customer Reviews

Customer Reviews Design

Day 86: ChatBot

ChatBot Design

Day 87: Charts

Charts Design

Day 88: Fingerprint

Fingerprint Design

Day 89: Voice Call

Voice Call Design

Day 90: My Devices

My Devices Design

Day 91: QuizApp

QuizApp Design

Day 92: Search Filters

Search Filters Design

Day 93: Task Manager

Task Manager Design

Day 94: Time Widget

Time Widget Design

Day 95: 404

404 Design

Day 96: Subscribe Card

Subscribe Card Design

Day 97: Design Assets

Design Assets Design

Day 98: Voice Recording

Voice Recording Design

Day 99: Columns Card

Columns Card Design

Day 100: Footer

Footer Design

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for 100-days-of-code

Similar Open Source Tools

For similar tasks

For similar jobs