Build Real Projects Step by Step
If you’ve been looking for a fun and structured way to learn coding, this 12-Day Claude.ai + CodePen Challenge is the perfect starting point. Using Claude.ai to generate code and CodePen to test and showcase your projects, you’ll create real apps, games, and tools while strengthening your programming foundation in HTML, CSS, and JavaScript.
By the end of the challenge, you’ll have a mini portfolio of 12 projects to share on social media, boost your resume, and continue learning from.
🔥 Why Claude.ai + CodePen?
- Claude.ai: An AI assistant that writes code, explains logic, and helps debug issues. Perfect for beginners.
- CodePen: An online coding playground where you can instantly test and share projects.
👉 When combined, they create the ultimate workflow: generate → test → improve → share.
📅 Daily Tasks – 12 Days, 12 Projects
Here’s your complete roadmap:
Day 01 – Basic Calculator App
Prompt: “Make a basic calculator app that can perform addition, subtraction, multiplication, and division.”
- Generate the code with Claude.ai.
- Run and test the calculator.
- Share your completed app link on Facebook and LinkedIn.
Day 02 – Tic-Tac-Toe Game 🎮
Prompt: “Make a Tic-Tac-Toe game for two players.”
- Two-player board game using JavaScript.
- Test with friends and adjust the design.
- Post the finished project link online.
🚀 12 Day Claude.ai & CodePen Coding Challenge
Build Real Projects Step by Step
If you’ve been looking for a fun and structured way to learn coding, this 12-Day Claude.ai + CodePen Challenge is the perfect starting point. Using Claude.ai to generate code and CodePen to test and showcase your projects, you’ll create real apps, games, and tools while strengthening your programming foundation in HTML, CSS, and JavaScript.
By the end of the challenge, you’ll have a mini portfolio of 12 projects to share on social media, boost your resume, and continue learning from.
🔥 Why Claude.ai + CodePen?
- Claude.ai: An AI assistant that writes code, explains logic, and helps debug issues. Perfect for beginners.
- CodePen: An online coding playground where you can instantly test and share projects.
👉 When combined, they create the ultimate workflow: generate → test → improve → share.
📅 Daily Tasks – 12 Days, 12 Projects
Here’s your complete roadmap:
Day 01 – Basic Calculator App
Prompt: “Make a basic calculator app that can perform addition, subtraction, multiplication, and division.”
- Generate the code with Claude.ai.
- Run and test the calculator.
- Share your completed app link on Facebook and LinkedIn.
Day 02 – Tic-Tac-Toe Game 🎮
Prompt: “Make a Tic-Tac-Toe game for two players.”
- Two-player board game using JavaScript.
- Test with friends and adjust the design.
- Post the finished project link online.
Day 03 – To-Do List App ✅
Prompt: “Make a To-Do List app where users can add and delete tasks.”
- Add new tasks with a button.
- Delete completed tasks easily.
- Share your live app link.
Day 04 – Multiple-Choice Quiz Game 📖
Prompt: “Make a quiz game with 10 multiple-choice questions.”
- Build a quiz app with scoring system.
- Style it for a fun learning experience.
- Post your app on Facebook/LinkedIn.
Day 05 – Weather App ☁️
Prompt: “Make a weather app that shows the current weather of any city.”
- Fetch live weather data (API).
- Display temperature, humidity, and conditions.
- Share the completed app link online.
Day 06 – Currency Converter 💱
Prompt: “Make a currency converter app that converts between different currencies.”
- Users can select two currencies.
- Convert values instantly.
- Share the final project link on social media.
Day 07 – Stopwatch App ⏱️
Prompt: “Make a stopwatch app that can start, stop, and reset.”
- Simple UI with three buttons.
- Timer functionality with JavaScript.
- Share your working project link.
Day 08 – Alarm Clock ⏰
Prompt: “Make an alarm clock app that allows users to set an alarm.”
- Add input for time selection.
- Play sound when alarm goes off.
- Post project link on Facebook/LinkedIn.
Day 09 – Calendar App 📅
Prompt: “Make a calendar app where users can add events.”
- Create interactive calendar UI.
- Users can save and view events.
- Share live app link.
Day 10 – Reminder App 🔔
Prompt: “Make a reminder app where users can set reminders for tasks.”
- Users enter tasks with reminder times.
- Notifications or alerts when due.
- Share link on social media.
Day 11 – Calculator App with CodePen ➕➖✖️➗
Prompt: “Write code for a simple calculator app that performs addition, subtraction, multiplication, and division using HTML, CSS, and JavaScript.”
- Generate code with Claude.ai.
- Run and test on CodePen.
- Share the CodePen project link.
Day 12 – Tic-Tac-Toe on CodePen 🎮
Prompt: “Write code for a Tic-Tac-Toe game for two players using HTML, CSS, and JavaScript.”
- Run it live on CodePen.
- Test functionality and improve styling.
- Share your CodePen link online.
🎯 Benefits of This 12-Day Challenge
- Build 12 real-world projects step by step.
- Improve your HTML, CSS, and JavaScript skills.
- Discover how to utilize Claude.ai for coding assistance.
- Showcase your work on Facebook & LinkedIn to grow your portfolio.
- Boost confidence by completing small but impactful projects.
🚀 Final Thoughts
This 12-Day Claude.ai + CodePen Challenge is designed to make coding fun, practical, and shareable. Whether you’re a beginner learning web development or someone looking to build a project portfolio, these apps and games are the perfect starting point.
👉 Start from Day 01 today, and by Day 12, you’ll have a solid portfolio of projects to share with the world!