Version:0.
CODING
WITH AI
BOOK ONE
FOR AGES 9+
BY REHAN ALLAHWALA
Technology Educator & Digital Innovator
Version 0.2
Preface
Welcome to this exciting journey into the world of coding and artificial intelligence!
This workbook has been designed specifically for young learners, particularly 5th
graders, to dive into the basics of game development through a hands-on
approach. Whether you're completely new to programming or have some prior
experience, this workbook will guide you through creating fun and interactive
games using powerful AI tools like Claude.ai and coding with ChatGPT.
The first part of this workbook focuses on teaching you how to use AI to create
games quickly and easily. In just 10 days, you’ll be able to create various simple
games and apps that you can share with the world through social media platforms
like Facebook and LinkedIn. This experience will boost your confidence and allow
you to see how AI can assist in turning your ideas into reality.
In the second part, over the next 15 days, you will take a deeper dive into writing
the actual code for these games. Using ChatGPT as your coding assistant, you will
learn how to write basic code in HTML, CSS, and JavaScript, and then run that
code on CodePen. Each project will challenge you to think logically and creatively,
and by the end of the month, you will have a collection of games and apps that you
have not only created but also coded by yourself.
This workbook is more than just learning to code; it’s about building problem-
solving skills, creativity, and understanding how technology can be a tool for
innovation. As we prepare for a future where AI and coding are integral to every
field, this workbook provides a perfect starting point for young minds to begin
their exploration into these areas.
I encourage you to enjoy every step of this journey. Don’t be afraid to experiment,
make mistakes, and learn. By the end of this workbook, you will not only have
developed several games but will also have laid the foundation for a future in
technology and innovation.
Good luck, and remember, the world of coding is yours to explore!
Warm regards,
Rehan Allahwala
1
Version 0.2
Claude.ai - What,
Why, How
What is Claude.ai?
Claude.ai is an advanced artificial intelligence tool that helps users create applications and
games by generating code based on simple instructions. It simplifies complex programming
tasks, making it accessible for beginners and young learners. Claude.ai is perfect for those
who want to explore coding and technology without prior experience, providing a user-
friendly platform to bring creative ideas to life.
Why Use Claude.ai?
Claude.ai is a powerful tool for introducing students to the world of technology and coding. It
allows them to create real projects quickly, fostering creativity and confidence. By using
Claude.ai, students can see the immediate impact of their ideas, which keeps them engaged
and motivated. It also serves as a stepping stone to more advanced coding skills by building a
foundation of understanding how digital tools and applications work.
How to Use Claude.ai?
Choose a Project: Start by deciding what kind of app or game you want to create. It could be
a simple game like Tic-Tac-Toe or a useful app like a calculator.
Input Instructions: Provide clear, simple instructions to Claude.ai, such as “Create a Tic-Tac-
Toe game” or “Build a To-Do list app.”
Generate and Test: Claude.ai will generate the code for your project. Test the app or game to
ensure it works as expected.
Share Your Creation: Once the project is ready, share the link on social media platforms like
Facebook and LinkedIn to showcase your work and receive feedback.
Using Claude.ai is an excellent way to make learning coding fun and accessible, empowering
young minds to explore their creativity and develop valuable skills for the future.
2
Version 0.2
ChatGPT and CodePen? -
What, Why, How
What is ChatGPT and CodePen?
ChatGPT is an AI language model that assists in generating code, providing explanations, and
helping with coding problems. It allows users to create code by simply asking for it in natural
language, making it an excellent learning tool for beginners. CodePen is an online code editor
and playground for web development, where users can write, test, and share their HTML, CSS,
and JavaScript projects in real-time.
Why Use ChatGPT and CodePen Together?
Using ChatGPT and CodePen together is a powerful combination for learning and
experimenting with code. ChatGPT helps users generate and understand code without
extensive programming knowledge, making it easier to get started. CodePen provides a
platform to see the code in action, enabling users to test, modify, and visualize their projects
instantly. This approach helps students build a strong foundation in coding by allowing them to
see the practical results of their code in a real-time environment.
How to Use ChatGPT and CodePen?
1. Generate Code with ChatGPT:
Ask ChatGPT to generate code for a specific project, such as “Write code for a calculator
app using HTML, CSS, and JavaScript.”
ChatGPT will provide the code along with explanations, making it easier to understand
how each part works.
2. Run Code on CodePen:
Copy the code generated by ChatGPT and paste it into the respective HTML, CSS, and
JavaScript sections on CodePen.
Test the code to see if it works as expected. You can make changes and see the results
instantly.
3. Modify and Experiment:
Use CodePen to experiment with different code modifications and styling options. Make
adjustments to see how they affect your project.
Learn by doing—try changing colors, adding new features, or debugging errors in your
code.
4. Share Your Project:
Once your code is working and looks good, save your project on CodePen.
Share the link to your CodePen project on social media platforms like Facebook and
LinkedIn to showcase your work and get feedback.
Using ChatGPT and CodePen together allows students to learn coding in a practical, hands-on
way, making complex concepts accessible and engaging.
3
Version 0.2
DAILY TASKS
Task: Create a simple calculator game using Claude.ai.
Prompt: "Make a basic calculator app that can perform addition, subtraction,
Day: 01
multiplication, and division."
Action: Post the completed app link on Facebook and LinkedIn.
Task: Create a Tic-Tac-Toe game using Claude.ai.
Day: 02 Prompt: "Make a Tic-Tac-Toe game for two players."
Action: Post the completed game link on Facebook and LinkedIn.
Task: Create a To-Do list app using Claude.ai.
Day: 03 Prompt: "Make a To-Do List app where users can add and delete tasks."
Action: Post the completed app link on Facebook and LinkedIn.
Task: Create a multiple-choice quiz game using Claude.ai.
Day: 04 Prompt: "Make a quiz game with 10 multiple-choice questions."
Action: Post the completed game link on Facebook and LinkedIn.
Facilitator Signature:.............................. Parents Signature:..............................
4
Version 0.2
DAILY TASKS
Task: Create a weather app using Claude.ai.
Day: 05 Prompt: "Make a weather app that shows the current weather of any city."
Action: Post the completed app link on Facebook and LinkedIn.
Task: Create a currency converter app using Claude.ai.
Prompt: "Make a currency converter app that converts between different
Day: 06
currencies."
Action: Post the completed app link on Facebook and LinkedIn.
Task: Create a stopwatch app using Claude.ai.
Day: 07 Prompt: "Make a stopwatch app that can start, stop, and reset."
Action: Post the completed app link on Facebook and LinkedIn.
Task: Create an alarm clock app using Claude.ai.
Day: 08 Prompt: "Make an alarm clock app that allows users to set an alarm."
Action: Post the completed app link on Facebook and LinkedIn.
Facilitator Signature:.............................. Parents Signature:..............................
5
Version 0.2
DAILY TASKS
Task: Create a calendar app using Claude.ai.
Day: 09 Prompt: "Make a calendar app where users can add events."
Action: Post the completed app link on Facebook and LinkedIn.
Task: Create a reminder app using Claude.ai.
Day: 10 Prompt: "Make a reminder app where users can set reminders for tasks."
Action: Post the completed app link on Facebook and LinkedIn.
Task: Write the code for a calculator app using HTML, CSS, and JavaScript.
Prompt: "Write code for a simple calculator app that performs addition,
Day: 11
subtraction, multiplication, and division."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Task: Write the code for a Tic-Tac-Toe game using HTML, CSS, and JavaScript.
Prompt: "Write code for a Tic-Tac-Toe game for two players."
Day: 12
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Facilitator Signature:.............................. Parents Signature:..............................
6
Version 0.2
Report Card
Score
Possible Freque Possible
TASKS Per
Frequency ncy Score
Score
Task
Simple calculator 02 01 02
Tic-Tac-Toe Game 02 01 02
To-Do List App 02 01 02
Make a Quiz Game 02 01 02
Weather App 02 01 02
Currency Converter App 02 01 02
Simple Stopwatch App 02 01 02
Simple Alarm Clock App 02 01 02
Simple Calendar App 02 01 02
Simple Reminder App 02 01 02
Calculator 02 01 02
Tic-Tac-Toe Game 02 01 02
Total 24 12 24
Facilitator Signature:.............................. 7 Parents Signature:..............................
Version 0.2
DAILY TASKS
Task: Write the code for a To-Do list app using HTML, CSS, and JavaScript.
Prompt: "Write code for a To-Do List app where users can add, edit, and
Day: 13
delete tasks."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Task: Write the code for a multiple-choice quiz game using HTML, CSS, and
JavaScript.
Day: 14 Prompt: "Write code for a quiz game with 10 multiple-choice questions."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Task: Write the code for a weather app using HTML, CSS, and JavaScript.
Prompt: "Write code for a weather app that fetches the current weather of
Day: 15
any city."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Task: Write the code for a currency converter app using HTML, CSS, and
JavaScript.
Prompt: "Write code for a currency converter app that converts between
Day: 16
different currencies."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Facilitator Signature:.............................. Parents Signature:..............................
8
Version 0.2
DAILY TASKS
Task: Write the code for a stopwatch app using HTML, CSS, and JavaScript.
Day: 17 Prompt: "Write code for a stopwatch app that can start, stop, and reset."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Task: Write the code for an alarm clock app using HTML, CSS, and JavaScript.
Day: 18 Prompt: "Write code for an alarm clock app that allows users to set an alarm."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Task: Write the code for a calendar app using HTML, CSS, and JavaScript.
Prompt: "Write code for a calendar app where users can add events."
Day: 19
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Task: Write the code for a reminder app using HTML, CSS, and JavaScript.
Prompt: "Write code for a reminder app where users can set reminders for
Day: 20
tasks."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Facilitator Signature:.............................. Parents Signature:..............................
9
Version 0.2
DAILY TASKS
Task: Write the code for a "Guess the Number" game using HTML, CSS, and
JavaScript.
Day: 21 Prompt: "Write code for a 'Guess the Number' game where the player guesses
a number between 1 and 10."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Task: Write the code for a word scramble game using HTML, CSS, and
JavaScript.
Day: 22 Prompt: "Write code for a word scramble game where the player must
rearrange letters to form the correct word."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Task: Write the code for a rock, paper, scissors game using HTML, CSS, and
JavaScript.
Day: 23 Prompt: "Write code for a rock, paper, scissors game where the player
competes against the computer."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Task: Write the code for a memory card game using HTML, CSS, and
JavaScript.
Day: 24 Prompt: "Write code for a memory card game where players flip cards to find
matching pairs."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Facilitator Signature:.............................. Parents Signature:..............................
10
Version 0.2
Report Card
Score
Possible Freque Possible
TASKS Per
Frequency ncy Score
Score
Task
To-Do List App 02 01 02
Quiz Game 02 01 02
Currency Converter 02 01 02
Stopwatch App 02 01 02
Alarm Clock App 02 01 02
Calendar App 02 01 02
Simple Stopwatch App 02 01 02
Reminder App 02 01 02
Guess the Number Game 02 01 02
Word Scramble Game 02 01 02
Rock, Paper, Scissors Game 02 01 02
Memory Card Game 02 01 02
Total 24 12 24
Facilitator Signature:.............................. 11 Parents Signature:..............................
Version 0.2
DAILY TASKS
Task: Write the code for a fruit-catching game using HTML, CSS, and
JavaScript.
Prompt: "Write code for a fruit-catching game where the player moves a
Day: 25
basket left and right to catch falling fruits. The game ends when the player
misses a certain number of fruits."
Action: Run the code on CodePen and post the link on Facebook and LinkedIn.
Facilitator Signature:.............................. Parents Signature:..............................
12
Version 0.2
Monthly Report
Score
Possible Freque Possible
TASKS Per
Frequency ncy Score
Score
Task
Calculator Game 02 02 04
Tic-Tac-Toe Game 02 02 04
To-Do List App 02 02 04
Quiz Game 02 02 04
Weather App 02 02 04
Currency Converter App 02 02 04
Simple Stopwatch App 02 02 04
Simple Alarm Clock App 02 02 04
Simple Calendar App 02 02 04
Simple Reminder App 02 02 04
Rock, Paper, Scissors Game 02 01 02
Memory Card Game 02 01 02
Fruit Catching Game 02 01 02
Total 50 23 46
Facilitator Signature:.............................. 13 Parents Signature:..............................
Version 0.2
Conclusion
Congratulations on completing this workbook! You've embarked on an incredible
journey into the world of coding and artificial intelligence, and you've made it through
with creativity and determination. Over the past month, you have explored the exciting
potential of AI with Claude.ai and gained hands-on experience in coding through
ChatGPT. You've created games, solved challenges, and most importantly, learned how
to turn your ideas into reality.
This workbook was designed to introduce you to the basics of game development and
programming in a fun and engaging way. From the first few days of building simple apps
with AI to writing your own code in HTML, CSS, and JavaScript, you've shown that with
curiosity and effort, you can achieve great things. The skills you've acquired here are
just the beginning of what you can accomplish in the vast field of technology.
Coding is not just about writing lines of code; it's about problem-solving, creativity, and
innovation. It allows you to create solutions, build new things, and express yourself in
ways that were never possible before. By completing this workbook, you've laid a
strong foundation for further learning and exploration.
Remember, every great coder started with small steps, just like the ones you've taken
here. Continue to practice, learn new things, and never be afraid to experiment. The
world of technology is constantly evolving, and with the knowledge you've gained,
you're now part of that exciting future.
I hope this workbook has inspired you to continue your journey in coding and AI. The
possibilities are endless, and the skills you develop today will help you shape the world
of tomorrow. Keep building, keep learning, and most importantly, keep having fun!
Thank you for being a part of this learning experience. I look forward to seeing the
amazing things you will create in the future.
Happy coding!
Warm regards,
Rehan Allahwala
14
Join the
Fun!
Learn to Code
and Create
Games in Just
30 Days!
Retail Price: Rs 1500
