Claude AI for Web Development: Build Websites & Apps with AI Assistance
Welcome, young developer! Did you know you can build websites and apps with the help of a smart AI friend? This course will teach you how to use Claude AI to create web projects – from simple pages to full applications. You don't need to be a coding expert. Claude will help you write code, fix bugs, and even clone entire websites! We will learn step by step, using simple words and fun examples. Let's become web developers with the power of AI!
After this course, you will be able to:
Tunde's First Website
Tunde wanted to build a website for his family's bakery. He knew a little about computers but not much about coding. Then he discovered Claude Code. He typed: "Build a simple website for a bakery with a menu and contact page." In minutes, Claude created all the files. Tunde was amazed! He added some pictures and colours, and within a day, the bakery had a beautiful website. Tunde's family was proud. He said, "Claude didn't just write code – it taught me how to build websites!"
Definition: Claude AI for web development means using Claude – a smart AI – to help you create websites, web apps, and other software.
Why it's important: It makes coding faster, easier, and more fun.
Simple explanation: It's like having a coding partner who writes code, fixes errors, and explains things.
Real-life example: A developer uses Claude to write a login page for an app.
School example: A student uses Claude to create a class project website.
Home example: A parent uses Claude to build a small business website.
Nigerian example: A Lagos startup uses Claude to build their company website.
Illustration:
+------------------+ +-------------------+
| You: "Build a | ---> | Claude AI |
| website for a | | (writes code, |
| bakery" | | creates files) |
+------------------+ +-------------------+
|
V
+-------------------+
| Your website is |
| ready! 🚀 |
+-------------------+
Mini summary: Claude helps you build websites and apps.
Definition: Claude Code is a tool that runs in your terminal (a text window) and lets Claude help you write and edit code directly in your project folders.
Why it's important: It works with your real code, not just a chat box.
Simple explanation: It's like Claude lives inside your code project and helps you type.
Real-life example: A developer types "claude" in the terminal and asks Claude to add a new feature.
School example: A student uses Claude Code to write a simple game.
Home example: A parent uses Claude Code to update their small business site.
Nigerian example: An Abuja developer uses Claude Code to build a delivery tracking app.
Illustration:
Terminal: $ claude Claude: Hello! I'm in your project folder. What can I build?
Mini summary: Claude Code is Claude inside your coding project.
Definition: Setup means installing Claude Code on your computer so you can start using it.
Why it's important: You need to set it up before you can build anything.
Simple explanation: Like installing a game before you can play.
Real-life example: You run "npm install -g @anthropic-ai/claude-code" to install it.
School example: You install it on a school computer.
Home example: You install it on your personal laptop.
Nigerian example: A developer in Kano installs Claude Code to start a project.
Illustration:
Step 1: Open Terminal Step 2: Type: npm install -g @anthropic-ai/claude-code Step 3: Type: claude Step 4: Claude Code is ready! 🎉
Mini summary: Setup Claude Code with a simple terminal command.
Definition: A web page is a document you see in a browser (like Google Chrome). It has HTML, CSS, and sometimes JavaScript.
Why it's important: All websites start with web pages!
Simple explanation: Like a page in a book, but on the internet.
Real-life example: A company builds a homepage to show what they do.
School example: A student creates a page about their favourite animal.
Home example: A family creates a page for their home business.
Nigerian example: A restaurant in Port Harcourt creates a page with their menu.
Illustration – Prompt:
You ask Claude: "Create a simple HTML page for a bakery with a welcome message and a list of breads." Claude creates: index.html with the code.
Mini summary: Claude can create a full web page from your description.
Definition: This is a way of working with Claude Code: first explore (understand), then plan (decide), then code (build).
Why it's important: It helps you get better, more reliable results.
Simple explanation: Like drawing a map before going on a trip.
Real-life example: You ask Claude to explore a codebase, then plan a feature, then write it.
School example: You plan your project before writing any code.
Home example: You plan a recipe before cooking.
Nigerian example: A developer plans an app for a local market before coding.
Illustration:
Explore 🔍 ---> Plan 📝 ---> Code 💻 (understand) (decide) (build)
Mini summary: Explore, Plan, Code – this workflow works best with Claude.
Definition: CLAUDE.md is a special file where you save important information about your project so Claude remembers it.
Why it's important: You don't have to re-explain everything each time.
Simple explanation: Like writing notes for yourself so you don't forget.
Real-life example: A developer writes "This project uses React and Tailwind" in CLAUDE.md.
School example: A student writes "This project is about space" in their file.
Home example: A parent writes "Our business sells clothes" in the file.
Nigerian example: A team in Abuja writes "We use TypeScript and Express" in CLAUDE.md.
Illustration:
CLAUDE.md file: "This is a bakery website. Use HTML, CSS, and JavaScript. The colours are brown and cream."
Mini summary: CLAUDE.md helps Claude remember your project details.
Definition: MCP stands for Model Context Protocol. It lets Claude connect to external tools like databases or APIs.
Why it's important: This makes Claude more powerful – it can access real data.
Simple explanation: Like giving Claude a phone to call other services.
Real-life example: Claude connects to a SQLite database to query user data.
School example: Claude connects to a database to show student scores.
Home example: Claude connects to a budget tracker.
Nigerian example: Claude connects to a database of customers.
Illustration:
Claude <-----> MCP Server <-----> Database (AI) (bridge) (data)
Mini summary: MCP connects Claude to external tools and data.
Definition: Skills are like special instructions you can save and reuse with Claude. For example, a "clone website" skill tells Claude exactly how to copy a site.
Why it's important: Skills save time and make complex tasks easy.
Simple explanation: Like a recipe you can use again and again.
Real-life example: The "Perfect Web Clone" skill copies any website into code.
School example: A "create quiz" skill for making class quizzes.
Home example: A "budget planner" skill for household expenses.
Nigerian example: A skill for generating business reports.
Illustration – Skill Usage:
You: "/clone-website https://example.com" Claude: Uses the "clone website" skill to copy the site.
Mini summary: Skills are reusable instructions for Claude.
Definition: Cloning means making an exact copy of a website – the code, design, and layout.
Why it's important: It's useful for learning, rebuilding lost sites, or migrating platforms.
Simple explanation: Like photocopying a page.
Real-life example: You clone a site to learn how it's built.
School example: You clone a site for a class project.
Home example: You clone a site to understand web design.
Nigerian example: A developer clones a popular site to study its structure.
Illustration – Clone Process:
Target Site ---> Claude extracts code ---> New Project (example.com) (HTML, CSS, JS) (ready to run!)
Mini summary: Claude can clone websites for you.
Definition: A full-stack app has two parts: the frontend (what users see) and the backend (the server and database).
Why it's important: Most real apps are full-stack.
Simple explanation: Like a restaurant: frontend is the dining area, backend is the kitchen.
Real-life example: A social media app with a login and posts.
School example: A student project with a sign-up page.
Home example: A family budget app with accounts.
Nigerian example: A Lagos delivery app with tracking.
Illustration:
Frontend (React) <---> Backend (Node) <---> Database (PostgreSQL) (what you see) (server logic) (data storage)
Mini summary: Claude can build both frontend and backend.
Definition: Hooks are scripts that run automatically before or after Claude does something – like running tests after writing code.
Why it's important: They automate repetitive tasks.
Simple explanation: Like a robot that cleans up after you.
Real-life example: A hook runs tests every time Claude changes code.
School example: A hook checks spelling in your project.
Home example: A hook backs up your files.
Nigerian example: A hook sends a notification after deployment.
Illustration:
Claude writes code ---> Hook runs tests ---> Tests pass! ✅
Mini summary: Hooks automate tasks around Claude's work.
Definition: Subagents are like mini-Claudes that can work on different tasks at the same time.
Why it's important: They make complex projects faster.
Simple explanation: Like having multiple team members working on different parts.
Real-life example: One subagent builds the frontend, another builds the backend.
School example: One subagent writes the intro, another writes the conclusion.
Home example: One subagent plans the menu, another plans the budget.
Nigerian example: One subagent handles user login, another handles payments.
Illustration:
Main Claude ---> Subagent 1 (frontend)
---> Subagent 2 (backend)
---> Subagent 3 (database)
Mini summary: Subagents are AI helpers that work in parallel.
Definition: Deploying means publishing your project so people can see it on the internet.
Why it's important: That's how the world sees your work!
Simple explanation: Like putting a poster on a wall.
Real-life example: A developer deploys a website to Vercel.
School example: A student deploys their project to share with classmates.
Home example: A parent deploys a business website.
Nigerian example: A startup deploys their app online.
Illustration – Deployment Flow:
Your project ---> Upload to Vercel ---> Live URL! (local files) (hosting service) (https://your-site.vercel.app)
Mini summary: Claude can help you deploy your projects.
Definition: Testing is checking if your code works. Debugging is fixing problems.
Why it's important: Nobody wants a broken website!
Simple explanation: Like checking your homework before submitting.
Real-life example: Claude writes tests for a login form.
School example: Claude tests a school project.
Home example: Claude checks a budget app.
Nigerian example: Claude tests a payment system.
Illustration:
You: "Fix this error: 'Cannot read property of undefined'" Claude: "I found the problem and fixed it!"
Mini summary: Claude helps test and fix code.
Definition: Ethics means using AI responsibly – not cheating, not sharing private data, and always reviewing AI-generated code.
Why it's important: We must use AI safely and honestly.
Simple explanation: Like not copying a friend's homework.
Real-life example: A developer checks Claude's code before shipping.
School example: A student uses Claude to learn, not to cheat.
Home example: A parent reviews AI content before sharing.
Nigerian example: A company protects customer data when using Claude.
Illustration:
✅ DO: Review Claude's code. ✅ DO: Understand what the code does. ❌ DON'T: Share passwords or secrets. ❌ DON'T: Ship code without testing.
Mini summary: Use Claude safely, ethically, and responsibly.
How to build a website with Claude Code:
cd my-project.claude.Use hands-on exercises: have students build a simple page with Claude first. Then progress to cloning and full-stack. Emphasise the explore-plan-code workflow. Discuss ethics – AI is a tool, not a replacement for learning. Use Nigerian examples to make it relatable.
Help your child set up Claude Code on a computer. Start with small projects like a simple webpage. Sit with them as they review Claude's code. Encourage curiosity – "What does this line do?" and "Can we change the colours?"
You type a request ---> Claude Code ---> Creates/edits files
("Build a login") (in your project) (index.html, style.css)
| Feature | What It Does | When to Use |
|---|---|---|
| Claude Code | Writes code in your project | For building and editing |
| CLAUDE.md | Stores project memory | For context and consistency |
| Skills | Reusable instructions | For complex tasks (cloning) |
| MCP | Connects to external data | For databases and APIs |
| Hooks | Automated scripts | For testing and deployment |
| Subagents | Parallel helpers | For big projects |
| Tool | With Claude Code | Without Claude |
|---|---|---|
| Writing code | Claude writes it | You type everything |
| Fixing errors | Claude suggests fixes | You debug manually |
| Building new features | Describe, Claude builds | Plan and code yourself |
| Time to build | Hours | Days or weeks |
In this course, we learned how to use Claude AI for web development. We discovered Claude Code, the powerful coding assistant that lives in your terminal. We learned the explore-plan-code workflow, how to use CLAUDE.md for memory, and how to connect to databases with MCP. We explored skills like cloning websites, building full-stack apps, and using hooks and subagents to automate and accelerate development. Finally, we learned about deploying, testing, and ethical practices. You now have the skills to build websites and apps with AI help – the future of web development is here!
| Term | Definition |
|---|---|
| Claude Code | A) A memory file |
| CLAUDE.md | B) Coding assistant in terminal |
| MCP | C) Reusable instruction |
| Skill | D) Connects to external tools |
| Hook | E) Automated script |
Answers: Claude Code-B, CLAUDE.md-A, MCP-D, Skill-C, Hook-E
Scenario 1: You want to build a portfolio website for yourself.
Task: Write a prompt to Claude Code to create the site.
Answer: "Build a simple portfolio website with a home page, about page, and contact page. Use HTML, CSS, and JavaScript."
Scenario 2: You want to copy a website to learn from it.
Task: Write a prompt to Claude Code to clone the site.
Answer: "Clone https://example.com into a new React project."
In groups of three, choose a website to clone. Each person takes one section (home, about, contact). Use Claude Code to create the code. Then combine your work into one project and present it.
Create a simple web app (e.g., a to-do list) using Claude Code. Write down all the prompts you used. Share your project with the class.
Build a complete website for a business of your choice (e.g., a bakery, a school, a shop). Use Claude Code to help. Include a home page, about page, and contact page. Deploy it online and share the link.
Write a report on how you used Claude Code to build a project. Include:
Clone a website of your choice. Then, add a new feature to it (e.g., a dark mode toggle). Write down how you used Claude to do this.
Fill-in-the-blank: 1. Claude Code, 2. CLAUDE.md, 3. Model Context Protocol, 4. skill, 5. Cloning, 6. explore-plan-code, 7. hook, 8. subagent, 9. Deploy, 10. Debug
True/False: 1T, 2F, 3T, 4T, 5F, 6F, 7F, 8T, 9T, 10T
Multiple Choice: 1B, 2A, 3A, 4A, 5A, 6A, 7A, 8A, 9A, 10A, 11A, 12A, 13A, 14A, 15A
Matching: Claude Code-B, CLAUDE.md-A, MCP-D, Skill-C, Hook-E
In the next module, we will go deeper into Advanced Claude Code Features. We will learn about custom agents, advanced MCP integrations, and building production-ready applications. You will also work on a capstone project to showcase everything you have learned. Get ready to become a Claude Code expert!
🎉 Congratulations! You have completed the Claude AI for Web Development course outline! 🎉
You are now ready to build amazing websites with Claude!
Module One: Introduction to Claude AI for Web Development – Your Coding Assistant
Welcome, young builder! Have you ever wanted to create a website but didn't know how to code? Or maybe you know a little coding but wish you had a helper. This course is for you! We will learn how to use Claude AI – a smart computer friend – to build websites and web apps. Claude can write code, fix errors, and even explain how things work. In this first module, we will start from the very beginning. We will learn what Claude is, how it helps with web development, and how to set it up. No scary words – just fun and simple learning. Let's go!
After completing this module, you will be able to:
Ada's First Website
Ada was 12 years old and loved drawing. She wanted to put her drawings online so her grandmother in another city could see them. But she didn't know how to code. Her big brother said, "Ada, try Claude Code – it's like a robot that writes code for you." Ada sat at the computer, opened the terminal (a black screen with text), and typed: "claude". Then she asked: "Build a simple page to show my drawings." In seconds, Claude created a beautiful HTML page. Ada added her pictures and shared the link with her grandmother. She was so happy! Claude helped her build her dream website.
Definition: Claude is an Artificial Intelligence (AI) – a smart computer program – made by a company called Anthropic. It can understand and write text like a human.
Why it's important: Claude is one of the smartest AIs. It can help us with many things, including building websites.
Simple explanation: Think of Claude as a super-smart friend who lives in the computer and can write code, answer questions, and solve problems.
Real-life example: A developer uses Claude to write a JavaScript function.
School example: A student uses Claude to explain a coding concept.
Home example: A parent uses Claude to build a family website.
Nigerian example: A Lagos startup uses Claude to build their company website.
Illustration:
+------------------+ +-------------------+
| You (user) | ---> | CLAUDE AI |
| (ask a question | | (smart helper) |
| or give task) | | (writes code, |
+------------------+ | explains, etc.) |
+-------------------+
Mini summary: Claude is a smart AI that helps us with tasks like coding.
Definition: Web development is the process of building websites and web applications that people can see in their browsers (like Chrome or Firefox).
Why it's important: Almost every business, school, and person uses websites – it's a very valuable skill.
Simple explanation: It's like building a house, but instead of bricks, we use code. The house is the website.
Real-life example: A developer builds an online shop.
School example: A student builds a page for a class project.
Home example: A parent builds a site for their small business.
Nigerian example: A Nigerian company builds a website to sell products.
Illustration:
Web Development = Building websites +---------------------------+ | Website: example.com | | +---------------------+ | | | HTML (structure) | | | | CSS (style) | | | | JavaScript (action)| | | +---------------------+ | +---------------------------+
Mini summary: Web development is building websites and apps for the internet.
Definition: Claude can help write code, fix errors, explain how code works, and even create whole websites from your description.
Why it's important: It saves time and helps you learn by showing you how things are done.
Simple explanation: It's like having a coding teacher sitting next to you, writing code with you.
Real-life example: A developer asks Claude: "Write a button that changes colour when clicked."
School example: A student asks: "Create a simple form for a survey."
Home example: A parent asks: "Build a contact page for my small business."
Nigerian example: A developer in Abuja asks Claude to build a login system.
Illustration:
You: "Build a website for a bakery." Claude: "Here is the code for index.html, style.css, and script.js."
Mini summary: Claude helps write, fix, and explain code.
Definition: The terminal is a window on your computer where you type text commands to control the computer. It doesn't have pictures – just text.
Why it's important: We use the terminal to start Claude Code and give it commands.
Simple explanation: It's like a secret place where you talk to your computer using words, not clicks.
Real-life example: A developer opens the terminal to install software.
School example: A student opens the terminal to run a program.
Home example: A parent uses the terminal to set up a project.
Nigerian example: A developer in Kano uses the terminal every day.
Illustration:
+------------------------------------------+ | Terminal (black screen with text) | | $ claude | | > Hello! I'm Claude Code. How can I help?| +------------------------------------------+
Mini summary: The terminal is a text window where we type commands.
Definition: Claude Code is a special tool that runs in the terminal and lets Claude help you with coding projects directly in your folders.
Why it's important: It's the main tool we will use in this course!
Simple explanation: It's like Claude moves into your project folder and helps you write code right there.
Real-life example: A developer uses Claude Code to add a new feature to an app.
School example: A student uses Claude Code to build a class project.
Home example: A parent uses Claude Code to create a personal website.
Nigerian example: A developer in Lagos uses Claude Code to build a delivery app.
Illustration:
Project Folder (my-website) +--------------------------+ | index.html | | style.css | | script.js | | [Claude Code is here!] | +--------------------------+
Mini summary: Claude Code is Claude inside your project folder.
Definition: Node.js is a program that lets you run JavaScript outside the browser. Claude Code needs Node.js to work.
Why it's important: You need to install Node.js before you can install Claude Code.
Simple explanation: It's like putting fuel in a car – you need it to start the engine.
Real-life example: A developer installs Node.js to use many tools.
School example: A student installs Node.js for a project.
Home example: A parent installs Node.js to use Claude Code.
Nigerian example: A developer in Port Harcourt installs Node.js.
Illustration – Install Node.js:
1. Go to nodejs.org 2. Download the installer for your computer (Windows, Mac, or Linux). 3. Run the installer and follow the steps. 4. Open the terminal and type: node -v 5. If you see a version number, it worked! 🎉
Mini summary: Node.js is needed to run Claude Code.
Definition: Installing means putting the Claude Code software on your computer so you can use it.
Why it's important: You can't use Claude Code without installing it.
Simple explanation: Like installing a game so you can play it.
Real-life example: A developer runs "npm install -g @anthropic-ai/claude-code".
School example: A student installs it on a school computer.
Home example: A parent installs it on the family computer.
Nigerian example: A developer in Abuja installs Claude Code.
Illustration – Installation Steps:
Step 1: Open Terminal. Step 2: Type: npm install -g @anthropic-ai/claude-code Step 3: Press Enter and wait for it to finish. Step 4: Type: claude Step 5: If you see "Hello!", it worked! 🎉
Mini summary: Install Claude Code with a single command in the terminal.
Definition: A session is when you open Claude Code and start working with it.
Why it's important: This is where the magic happens!
Simple explanation: Like opening a book and starting to read.
Real-life example: A developer types "claude" in the terminal.
School example: A student opens Claude Code to start a project.
Home example: A parent opens Claude Code to build a website.
Nigerian example: A developer in Kano starts a Claude Code session.
Illustration – Starting Claude Code:
$ cd my-project (go to your project folder) $ claude (start Claude Code) Claude: Hello! I'm Claude Code. I'm in your project folder. Claude: What would you like to build today?
Mini summary: Start Claude Code by typing "claude" in the terminal.
Definition: This is a way of working with Claude: first explore (understand the project), then plan (decide what to do), then code (build it).
Why it's important: It gives you better results and fewer mistakes.
Simple explanation: Like drawing a map before going on a trip.
Real-life example: A developer asks Claude to explore the code, then plan a new feature, then write it.
School example: A student explores a project, plans their part, and codes it.
Home example: A parent explores a template, plans changes, and edits it.
Nigerian example: A team in Abuja explores their codebase, plans a new feature, and codes it.
Illustration – The Workflow:
Explore 🔍 ---> Plan 📝 ---> Code 💻 (understand) (decide) (build)
Mini summary: Explore, Plan, Code – the best way to work with Claude.
Definition: A web page is a document you see in a browser. It has HTML for structure, CSS for style, and sometimes JavaScript for actions.
Why it's important: It's the building block of all websites!
Simple explanation: Like a page in a book, but on the internet.
Real-life example: A company builds a homepage.
School example: A student creates a page about their favourite animal.
Home example: A parent creates a page for their business.
Nigerian example: A restaurant in Lagos creates a page with their menu.
Illustration – Web Page Prompt:
You: "Create a simple HTML page for a bakery with a welcome message and a list of breads." Claude: (creates index.html with the code)
Mini summary: Claude can create a complete web page from your description.
Definition: HTML (HyperText Markup Language) is the code that gives a web page its structure – headings, paragraphs, images, links, etc.
Why it's important: Every website uses HTML.
Simple explanation: Like the skeleton of a body – it holds everything together.
Real-life example: An HTML tag <h1> makes a big heading.
School example: A student writes <p>This is a paragraph.</p>
Home example: A parent writes <img src="photo.jpg"> to show an image.
Nigerian example: A developer uses HTML to build a page.
Illustration – Simple HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Bakery</title>
</head>
<body>
<h1>Welcome to My Bakery!</h1>
<p>We sell fresh bread.</p>
</body>
</html>
Mini summary: HTML is the structure of a web page.
Definition: CSS (Cascading Style Sheets) is the code that gives a web page its colours, fonts, layout, and design.
Why it's important: It makes web pages look beautiful.
Simple explanation: Like clothing for the skeleton – it makes it look good.
Real-life example: CSS changes the background colour to blue.
School example: A student changes the font size to 20px.
Home example: A parent makes the text bold.
Nigerian example: A developer uses CSS to style a Nigerian flag on a page.
Illustration – Simple CSS:
body {
background-}
h1 {
text-align: center;
}
Mini summary: CSS is the style of a web page.
Definition: JavaScript is the code that makes web pages interactive – like buttons that do things, forms that submit, and animations.
Why it's important: It brings websites to life!
Simple explanation: Like the muscles that make the body move.
Real-life example: A button that says "Click Me" and shows a message.
School example: A student writes a script that counts clicks.
Home example: A parent writes a script that validates a form.
Nigerian example: A developer uses JavaScript to build a shopping cart.
Illustration – Simple JavaScript:
<button>Click Me</button>
<script>
function sayHello() {
alert('Welcome!');
}
</script>
Mini summary: JavaScript adds actions to a web page.
Definition: Safety means protecting your computer and data. Ethics means using AI in a good and honest way.
Why it's important: We must use AI responsibly.
Simple explanation: Like not telling a stranger your password.
Real-life example: Don't share your API keys with Claude.
School example: Use Claude to learn, not to cheat.
Home example: Don't ask Claude to do illegal things.
Nigerian example: A company doesn't upload customer data to Claude.
Illustration – Safety Rules:
✅ DO: Review Claude's code. ✅ DO: Ask Claude to explain code. ❌ DON'T: Share passwords or secrets. ❌ DON'T: Trust code without testing. ❌ DON'T: Use Claude to cheat.
Mini summary: Use Claude safely and honestly.
In this module, we learned:
How to create a web page with Claude Code:
cd my-project (go to your project folder).claude (start Claude Code).Start with a live demo – show students how to open the terminal and install Claude Code. Walk them through creating their first page. Emphasise the explore-plan-code workflow. Use Nigerian examples to make it relatable. Encourage questions and exploration.
Help your child set up Claude Code. Start with small projects. Sit with them and review Claude's code together. Ask questions like "What does this line do?" and "Can we change the colour?" Encourage curiosity.
+----------------------------------+ | Website | | +-----------------------------+ | | | HTML (Structure) | | | | CSS (Style) | | | | JavaScript (Action) | | | +-----------------------------+ | | Claude Code helps with all 3! | +----------------------------------+
| Tool | With Claude Code | Without Claude Code |
|---|---|---|
| Writing HTML | Claude writes it | You type everything |
| Styling with CSS | Claude suggests styles | You design manually |
| Adding JavaScript | Claude writes functions | You code yourself |
| Fixing errors | Claude suggests fixes | You debug alone |
| Time to build | Minutes to hours | Hours to days |
You type a request ---> Claude Code ---> Creates/edits files
("Build a login") (in your project) (index.html, style.css)
| Language | What It Does | Example |
|---|---|---|
| HTML | Structure | <h1>Hello</h1> |
| CSS | Style | |
| JavaScript | Action | alert('Hi!'); |
In this first module, we have taken our first steps into the world of web development with Claude AI. We learned what Claude is and how it can help us build websites. We set up our computer with Node.js and Claude Code. We created our very first web page. We also learned the explore-plan-code workflow and the basics of HTML, CSS, and JavaScript. We discussed safety and ethics. You now have the foundation to build amazing things with Claude Code!
| Term | Definition |
|---|---|
| Claude Code | A) Structure of a web page |
| HTML | B) Style of a web page |
| CSS | C) Actions on a web page |
| JavaScript | D) Coding assistant in terminal |
| Terminal | E) Text window for commands |
Answers: Claude Code-D, HTML-A, CSS-B, JavaScript-C, Terminal-E
Scenario 1: You want to build a simple website for your school club.
Task: Write a prompt to Claude Code to create the site.
Answer: "Create a simple HTML page for our school club with a welcome message and a list of club activities."
Scenario 2: You see an error in your code and don't know how to fix it.
Task: Write a prompt to Claude Code for help.
Answer: "I have this error: 'Cannot read property of undefined'. Can you help me fix it?"
In groups of three, each person takes one role: prompt writer (writes questions for Claude), code reviewer (checks Claude's code), and presenter (shows the final page). Build a simple page about your school. Present it to the class.
Use Claude Code to create a simple web page about your favourite hobby. Include a heading, a paragraph, and an image. Write down the prompts you used.
Build a simple website for a business of your choice (e.g., a bakery, a school, a shop). Use Claude Code to help. Include a heading, a paragraph, and a list. Share your page with the class.
Write a report on how you used Claude Code to build a simple page. Include:
Ask Claude to create a page with a button that changes colour when clicked. Then, ask it to explain the code line by line. Write down the explanation in your own words.
Fill-in-the-blank: 1. Claude Code, 2. AI, 3. Web development, 4. Terminal, 5. HTML, 6. CSS, 7. JavaScript, 8. Explore, 9. Node.js, 10. review
True/False: 1T, 2F, 3F, 4T, 5F, 6F, 7T, 8F, 9F, 10T
Multiple Choice: 1B, 2A, 3B, 4A, 5A, 6C, 7C, 8A, 9A, 10A, 11A, 12A, 13A, 14A, 15B
Matching: Claude Code-D, HTML-A, CSS-B, JavaScript-C, Terminal-E
In Module Two, we will dive deeper into Claude Code features. We will learn about CLAUDE.md (project memory), MCP (connecting to external data), and skills (reusable instructions). We will also build more complex projects. Get ready to become a Claude Code pro!
🎉 Congratulations! You have completed Module One: Introduction to Claude AI for Web Development 🎉
You are now ready for Module Two – Claude Code Features!
Module Two: Claude Code Features – Memory, Skills, and More!
Welcome back, young coder! In Module One, we learned the basics – what Claude is, how to set up Claude Code, and how to create a simple web page. Now, in Module Two, we will go deeper. We will learn about powerful features that make Claude Code even more amazing! We will discover CLAUDE.md (a memory file for your project), Skills (reusable instructions), MCP (connections to external tools), and more. We will also learn about hooks and subagents. These are like superpowers for your coding assistant. Let's dive in!
After completing this module, you will be able to:
Chidi's Memory Trick
Chidi was building a big website for his family's business. He had to keep telling Claude the same details over and over – "We sell bread, our colours are brown and cream, our location is Lagos." He was tired of repeating himself. Then he discovered CLAUDE.md – a file where he could write all the important details once. He created the file and wrote: "This is a bakery website. Colours: brown and cream. Location: Lagos." Now Claude remembered everything! Chidi saved hours of work. He said, "CLAUDE.md is like a memory stick for my project!"
Definition: CLAUDE.md is a special text file in your project folder where you write important information about your project so Claude remembers it.
Why it's important: You don't have to re-explain everything to Claude every time.
Simple explanation: It's like writing notes for yourself so you don't forget.
Real-life example: A developer writes "This project uses React and Tailwind" in CLAUDE.md.
School example: A student writes "This project is about space" in the file.
Home example: A parent writes "Our business sells clothes" in the file.
Nigerian example: A team in Abuja writes "We use TypeScript and Express" in CLAUDE.md.
Illustration – CLAUDE.md Content:
CLAUDE.md file: "This is a bakery website. Use HTML, CSS, and JavaScript. The colours are brown and cream. The business is located in Lagos."
Mini summary: CLAUDE.md stores project info so Claude remembers it.
Definition: Creating a CLAUDE.md file is as simple as making a new text file with that name.
Why it's important: It's the first step to giving Claude project memory.
Simple explanation: Like creating a new document in your folder.
Real-life example: A developer uses a code editor to create CLAUDE.md.
School example: A student creates the file in their project folder.
Home example: A parent creates it for their small business site.
Nigerian example: A developer in Kano creates CLAUDE.md for a new project.
Illustration – Creating the File:
Step 1: Open your project folder. Step 2: Right-click and choose "New Text File". Step 3: Name it "CLAUDE.md" (make sure the extension is .md). Step 4: Write your project information inside. Step 5: Save the file.
Mini summary: Create CLAUDE.md in your project folder with any text editor.
Definition: You can put any information that helps Claude understand your project – like the tech stack, design choices, business rules, and goals.
Why it's important: It gives Claude context so it gives better answers.
Simple explanation: Like giving a friend background information before asking a question.
Real-life example: "We use React, Node.js, and MongoDB. The app is a social media platform."
School example: "This is a school project. Use simple HTML and CSS."
Home example: "This is a family recipe website."
Nigerian example: "This is a delivery app for Lagos. Use Pidgin English for user messages."
Illustration – Example CLAUDE.md:
# Bakery Website Project - Languages: HTML, CSS, JavaScript - Colours: #8B4513 (brown), #FFF8DC (cream) - Location: Lagos, Nigeria - Target customers: Families - Special features: Online ordering, delivery
Mini summary: Put project details, tech stack, and design info in CLAUDE.md.
Definition: Skills are reusable instructions that you can save and use with Claude. They tell Claude exactly how to do a specific task.
Why it's important: Skills save time and make complex tasks easy.
Simple explanation: Like a recipe you can use again and again.
Real-life example: A skill called "Perfect Web Clone" copies any website into code.
School example: A "create quiz" skill for making class quizzes.
Home example: A "budget planner" skill for household expenses.
Nigerian example: A "business report" skill for Nigerian companies.
Illustration – Skill Usage:
You: "/clone-website https://example.com" Claude: Uses the "clone website" skill to copy the site.
Mini summary: Skills are reusable instructions for Claude.
Definition: This is a skill that clones (copies) any public website into a new project with HTML, CSS, and JavaScript.
Why it's important: It's useful for learning, rebuilding lost sites, or migrating platforms.
Simple explanation: Like photocopying a page from a book.
Real-life example: You clone a site to learn how it's built.
School example: You clone a site for a class project.
Home example: You clone a site to understand web design.
Nigerian example: A developer clones a popular Nigerian site to study its structure.
Illustration – Clone Process:
Target Site ---> Claude extracts code ---> New Project (example.com) (HTML, CSS, JS) (ready to run!)
Mini summary: Claude can clone websites for you.
Definition: MCP stands for Model Context Protocol. It lets Claude connect to external tools like databases, APIs, or file systems.
Why it's important: This makes Claude more powerful – it can access real data.
Simple explanation: Like giving Claude a phone to call other services.
Real-life example: Claude connects to a SQLite database to query user data.
School example: Claude connects to a database to show student scores.
Home example: Claude connects to a budget tracker.
Nigerian example: Claude connects to a database of customers.
Illustration – MCP Architecture:
Claude <-----> MCP Server <-----> Database (AI) (bridge) (data)
Mini summary: MCP connects Claude to external data and tools.
Definition: Setting up MCP means configuring it so Claude can connect to your data source.
Why it's important: You need to set it up before Claude can access external data.
Simple explanation: Like connecting a wire from your computer to a printer.
Real-life example: A developer adds an MCP configuration file to their project.
School example: A student sets up MCP for a database project.
Home example: A parent sets up MCP for a budget app.
Nigerian example: A developer in Lagos sets up MCP for a delivery app.
Illustration – MCP Setup:
1. Create a configuration file (mcp.json). 2. Write the connection details (like database URL). 3. Save it in your project folder. 4. Claude can now connect to the data!
Mini summary: MCP setup is easy – just a configuration file.
Definition: Hooks are scripts that run automatically before or after Claude does something – like running tests after writing code.
Why it's important: They automate repetitive tasks.
Simple explanation: Like a robot that cleans up after you.
Real-life example: A hook runs tests every time Claude changes code.
School example: A hook checks spelling in your project.
Home example: A hook backs up your files.
Nigerian example: A hook sends a notification after deployment.
Illustration – Hook Flow:
Claude writes code ---> Hook runs tests ---> Tests pass! ✅
Mini summary: Hooks automate tasks around Claude's work.
Definition: There are different types of hooks: pre-hooks (run before) and post-hooks (run after).
Why it's important: Different tasks need different timing.
Simple explanation: Like washing your hands before eating and brushing your teeth after.
Real-life example: A pre-hook checks if your code has errors before saving.
School example: A pre-hook checks your project name.
Home example: A post-hook saves your project automatically.
Nigerian example: A pre-hook checks for Nigerian phone numbers in data.
Illustration – Hook Types:
Pre-hook: Runs BEFORE Claude does something. Post-hook: Runs AFTER Claude does something.
Mini summary: Pre-hooks run before, post-hooks run after.
Definition: Subagents are like mini-Claudes that can work on different tasks at the same time.
Why it's important: They make complex projects faster.
Simple explanation: Like having multiple team members working on different parts.
Real-life example: One subagent builds the frontend, another builds the backend.
School example: One subagent writes the intro, another writes the conclusion.
Home example: One subagent plans the menu, another plans the budget.
Nigerian example: One subagent handles user login, another handles payments.
Illustration – Subagents:
Main Claude ---> Subagent 1 (frontend)
---> Subagent 2 (backend)
---> Subagent 3 (database)
Mini summary: Subagents are AI helpers that work in parallel.
Definition: A full-stack app has two parts: the frontend (what users see) and the backend (the server and database).
Why it's important: Most real apps are full-stack.
Simple explanation: Like a restaurant: frontend is the dining area, backend is the kitchen.
Real-life example: A social media app with a login and posts.
School example: A student project with a sign-up page.
Home example: A family budget app with accounts.
Nigerian example: A Lagos delivery app with tracking.
Illustration – Full-Stack:
Frontend (React) <---> Backend (Node) <---> Database (PostgreSQL) (what you see) (server logic) (data storage)
Mini summary: Claude can build both frontend and backend.
Definition: This is the best way to work with Claude Code: Explore (understand the project), Plan (decide what to do), Code (build it).
Why it's important: It gives better results and fewer mistakes.
Simple explanation: Like drawing a map before going on a trip.
Real-life example: A developer asks Claude to explore the code, then plan a new feature, then write it.
School example: A student explores a project, plans their part, and codes it.
Home example: A parent explores a template, plans changes, and edits it.
Nigerian example: A team in Abuja explores their codebase, plans a new feature, and codes it.
Illustration – Workflow:
Explore 🔍 ---> Plan 📝 ---> Code 💻 (understand) (decide) (build)
Mini summary: Explore, Plan, Code – the best way to work with Claude.
Definition: Testing is checking if your code works. Debugging is fixing problems.
Why it's important: Nobody wants a broken website!
Simple explanation: Like checking your homework before submitting.
Real-life example: Claude writes tests for a login form.
School example: Claude tests a school project.
Home example: Claude checks a budget app.
Nigerian example: Claude tests a payment system.
Illustration – Debugging:
You: "Fix this error: 'Cannot read property of undefined'" Claude: "I found the problem and fixed it!"
Mini summary: Claude helps test and fix code.
Definition: Ethics means using AI responsibly – not cheating, not sharing private data, and always reviewing AI-generated code.
Why it's important: We must use AI safely and honestly.
Simple explanation: Like not copying a friend's homework.
Real-life example: A developer checks Claude's code before shipping.
School example: A student uses Claude to learn, not to cheat.
Home example: A parent reviews AI content before sharing.
Nigerian example: A company protects customer data when using Claude.
Illustration – Ethics:
✅ DO: Review Claude's code. ✅ DO: Understand what the code does. ❌ DON'T: Share passwords or secrets. ❌ DON'T: Ship code without testing.
Mini summary: Use Claude safely, ethically, and responsibly.
In this module, we learned:
How to use CLAUDE.md:
How to use a Skill:
Demonstrate CLAUDE.md by creating one together. Show the "Perfect Web Clone" skill in action. Explain MCP with a simple example (like connecting to a fake database). Discuss hooks and subagents with real-world analogies. Emphasise ethics and best practices.
Help your child create a CLAUDE.md file for their project. Try the clone skill together – clone a simple website and see how it works. Discuss the importance of reviewing AI-generated code and keeping data safe.
+------------------------------------------+ | Claude Code Features | | +--------------------------------------+ | | | CLAUDE.md – Memory | | | | Skills – Reusable instructions | | | | MCP – External connections | | | | Hooks – Automation | | | | Subagents – Parallel workers | | | +--------------------------------------+ | +------------------------------------------+
| Feature | What It Does | When to Use |
|---|---|---|
| CLAUDE.md | Stores project memory | Every project |
| Skills | Reusable instructions | Complex tasks |
| MCP | Connects to external data | Databases, APIs |
| Hooks | Automated scripts | Testing, backups |
| Subagents | Parallel helpers | Big projects |
| Task | Without Feature | With Feature |
|---|---|---|
| Remembering project details | Re-explain every time | CLAUDE.md remembers |
| Cloning a website | Manual copy | Clone skill does it |
| Connecting to a database | Manual code | MCP handles it |
| Running tests | Manual run | Hooks automate |
| Working on multiple parts | Sequential work | Subagents parallel |
In this module, we explored the powerful features of Claude Code. We learned about CLAUDE.md – a memory file that helps Claude remember project details. We discovered Skills – reusable instructions that make complex tasks easy, like the "Perfect Web Clone" skill. We learned about MCP – a way to connect Claude to external data and tools. We explored Hooks – scripts that automate tasks, and Subagents – mini-Claudes that work in parallel. We also reviewed the Explore-Plan-Code workflow and discussed ethics and best practices. You now have the tools to build even more amazing projects!
| Term | Definition |
|---|---|
| CLAUDE.md | A) Reusable instruction |
| Skill | B) Automated script |
| MCP | C) Memory file |
| Hook | D) Connects to external tools |
| Subagent | E) Mini-Claude helper |
Answers: CLAUDE.md-C, Skill-A, MCP-D, Hook-B, Subagent-E
Scenario 1: You are building a website and keep having to tell Claude your colour scheme and font preferences.
Task: What should you do?
Answer: Create a CLAUDE.md file and write the colour scheme and font preferences inside.
Scenario 2: You want to copy a website to learn from it.
Task: How can Claude help?
Answer: Use the "Perfect Web Clone" skill: /clone-website https://example.com.
In groups of three, create a CLAUDE.md file for a project of your choice. Then, one person plays the role of Claude and must remember the details from the file. The other two ask questions to test if Claude remembers. Share your experience with the class.
Create a CLAUDE.md file for a web project you want to build. Then, use the "Perfect Web Clone" skill to clone a website of your choice. Write down what you learned from cloning.
Build a full-stack app (frontend + backend) with Claude Code. Use CLAUDE.md to store your project details. Use MCP to connect to a fake database. Use hooks to test your code. Present your project to the class.
Write a report on how you used the features from this module. Include:
Clone a website using the "Perfect Web Clone" skill. Then, add a new feature to the cloned site (like a dark mode button). Use CLAUDE.md to remember the project details. Write down the steps you took.
Fill-in-the-blank: 1. CLAUDE.md, 2. Skill, 3. Model Context Protocol, 4. Hook, 5. Subagent, 6. clones, 7. Full-stack, 8. Plan, 9. review, 10. Pre-hook
True/False: 1T, 2T, 3F, 4T, 5F, 6F, 7T, 8F, 9F, 10F
Multiple Choice: 1A, 2A, 3A, 4A, 5A, 6A, 7A, 8A, 9A, 10A, 11A, 12A, 13A, 14A, 15A
Matching: CLAUDE.md-C, Skill-A, MCP-D, Hook-B, Subagent-E
In Module Three, we will put everything together and build a complete web application. We will use all the features we learned – CLAUDE.md, Skills, MCP, Hooks, and Subagents – to build a real-world project. Get ready to become a full-stack developer with Claude!
🎉 Congratulations! You have completed Module Two: Claude Code Features 🎉
You are now ready for Module Three – Building a Complete Web App!
Module Three: Building a Complete Web Application with Claude Code
Welcome back, young developer! You have learned so much already. In Module One, you learned the basics – what Claude is, how to set up Claude Code, and how to create a simple web page. In Module Two, you learned about powerful features like CLAUDE.md, Skills, MCP, Hooks, and Subagents. Now, in Module Three, we will put it all together! We will build a complete web application – a real project that works and can be used by people. We will build a Todo List App – a web app where users can add, view, and delete tasks. We will use all the features we learned. This is the big one – let's build something amazing!
After completing this module, you will be able to:
Chidi's Big Project
Chidi had learned so much about Claude Code. He could build web pages and use all the features. But he wanted to build something big – a complete web app that people could use. His teacher said, "Chidi, build a Todo List App – a place where people can manage their tasks." Chidi was nervous but excited. He used everything he learned: he planned the project, used CLAUDE.md for memory, built the frontend with HTML/CSS/JS, built the backend with Node.js, connected to a database with MCP, added login with authentication, tested with hooks, and finally deployed it online. His app worked beautifully! His teacher and friends were impressed. Chidi said, "I built this with Claude Code – and I couldn't have done it without everything I learned!"
Definition: Planning means thinking about what your app will do, who will use it, and what features it will have before you start coding.
Why it's important: Good planning saves time and makes your app better.
Simple explanation: Like drawing a map before going on a journey.
Real-life example: A team plans a new app by writing down the features.
School example: A student plans a project by making a list of what to do.
Home example: A parent plans a family trip by deciding where to go.
Nigerian example: A Lagos startup plans their app by writing a requirements document.
Illustration – Planning a Todo App:
Todo List App +------------------------------------------+ | Features: | | ✅ Add a new task | | ✅ View all tasks | | ✅ Mark a task as done | | ✅ Delete a task | | ✅ Login and Register | | ✅ Save tasks to a database | +------------------------------------------+
Mini summary: Plan your app before you start coding.
Definition: Project structure is how you organise your files and folders so everything is tidy and easy to find.
Why it's important: A good structure makes it easy to find and manage your code.
Simple explanation: Like organising your school bag – books in one place, pens in another.
Real-life example: A developer creates folders for frontend, backend, and database.
School example: A student organises their project files in separate folders.
Home example: A parent organises their documents by category.
Nigerian example: A developer in Abuja creates a well-structured project.
Illustration – Project Structure:
my-todo-app/ ├── frontend/ │ ├── index.html │ ├── style.css │ └── script.js ├── backend/ │ ├── server.js │ ├── routes.js │ └── database.js ├── CLAUDE.md └── package.json
Mini summary: Organise your project into folders for frontend and backend.
Definition: The frontend is what users see and interact with in their browser.
Why it's important: A good-looking frontend makes users happy.
Simple explanation: Like the dining area of a restaurant.
Real-life example: A developer builds a beautiful page for an app.
School example: A student creates a nice-looking project page.
Home example: A parent builds a clean site for their business.
Nigerian example: A Lagos startup builds a user-friendly frontend.
Illustration – Todo App HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Todo List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>📝 My Todo List</h1>
<input type="text" id="task-input" placeholder="Add a task...">
<button id="add-btn">Add Task</button>
<ul id="task-list"></ul>
<script src="script.js"></script>
</body>
</html>
Mini summary: The frontend is what users see and interact with.
Definition: CSS makes the frontend look beautiful – colours, fonts, spacing, and layout.
Why it's important: A nice-looking app makes people want to use it.
Simple explanation: Like dressing up in nice clothes.
Real-life example: A developer adds colours and rounded corners.
School example: A student makes their project look professional.
Home example: A parent adds their brand colours to a site.
Nigerian example: A developer uses Nigerian colours (green and white) for a site.
Illustration – Todo App CSS:
body {
max-width: 500px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
}
#task-input {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
#add-btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
Mini summary: CSS makes your app look beautiful.
Definition: JavaScript adds interactivity – like adding tasks, deleting tasks, and communicating with the backend.
Why it's important: It makes the app work!
Simple explanation: Like the muscles that make the body move.
Real-life example: A developer writes code to add a task when a button is clicked.
School example: A student writes JavaScript to make a form work.
Home example: A parent adds JavaScript to a contact form.
Nigerian example: A developer writes JavaScript for a Lagos delivery app.
Illustration – Todo App JavaScript:
document.getElementById('add-btn').addEventListener('click', function() {
const taskInput = document.getElementById('task-input');
const taskText = taskInput.value.trim();
if (taskText !== '') {
const li = document.createElement('li');
li.textContent = taskText;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.onclick = function() { li.remove(); };
li.appendChild(deleteBtn);
document.getElementById('task-list').appendChild(li);
taskInput.value = '';
}
});
Mini summary: JavaScript makes your app interactive and functional.
Definition: The backend is the server that handles data, logic, and communication with the database.
Why it's important: It's the engine that powers the app.
Simple explanation: Like the kitchen of a restaurant – it's where the work happens.
Real-life example: A developer builds a server with Node.js and Express.
School example: A student sets up a simple server for a project.
Home example: A parent sets up a server for a family app.
Nigerian example: A developer in Port Harcourt builds a backend for a delivery app.
Illustration – Backend Setup:
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
// Route to get all tasks
app.get('/tasks', (req, res) => {
res.json({ message: 'List of tasks' });
});
// Route to add a task
app.post('/tasks', (req, res) => {
const { task } = req.body;
res.json({ message: 'Task added', task });
});
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
Mini summary: The backend is the server that handles data and logic.
Definition: MCP (Model Context Protocol) connects Claude to external data sources like databases.
Why it's important: It lets you store and retrieve data permanently.
Simple explanation: Like a filing cabinet where you keep records.
Real-life example: A developer connects to a SQLite database to store tasks.
School example: A student connects to a database for a project.
Home example: A parent connects to a database for a budget app.
Nigerian example: A Lagos developer connects to a PostgreSQL database.
Illustration – MCP Connection:
Claude <-----> MCP Server <-----> Database (SQLite) (AI) (bridge) (data storage) Tasks are stored in the database so they don't disappear when you refresh the page.
Mini summary: MCP connects your app to a database for permanent storage.
Definition: CLAUDE.md is a file where you store important project information so Claude remembers it.
Why it's important: It keeps Claude consistent throughout the project.
Simple explanation: Like writing notes for yourself.
Real-life example: A developer writes the tech stack and design rules in CLAUDE.md.
School example: A student writes project goals in CLAUDE.md.
Home example: A parent writes business details in CLAUDE.md.
Nigerian example: A team in Abuja writes project rules in CLAUDE.md.
Illustration – CLAUDE.md for Todo App:
# Todo List App ## Tech Stack - Frontend: HTML, CSS, JavaScript - Backend: Node.js, Express - Database: SQLite with MCP ## Features - Add tasks - View tasks - Delete tasks - Mark tasks as done ## Design - Colours: Green (#28a745) and white - Font: Arial, sans-serif - Responsive design ## Authentication - Login and Register with JWT
Mini summary: CLAUDE.md stores project details so Claude remembers.
Definition: Authentication is how users log in and register so they can have their own tasks.
Why it's important: It keeps each user's data private and secure.
Simple explanation: Like having a key to your own room.
Real-life example: A social media app has login and register.
School example: A student portal has login.
Home example: A family app has separate accounts.
Nigerian example: A Lagos bank app has login for customers.
Illustration – Authentication Flow:
User clicks "Register" ---> Creates account (username, password) User clicks "Login" ---> Enters credentials Server checks credentials ---> If correct, user is logged in Logged-in user can see their own tasks
Mini summary: Authentication lets users log in and have private data.
Definition: These are the main features of the app – adding tasks, viewing them, and deleting them.
Why it's important: These are what makes the app useful.
Simple explanation: Like making a to-do list on paper, but online.
Real-life example: A developer builds these features for a productivity app.
School example: A student builds these for a class project.
Home example: A parent builds these for family tasks.
Nigerian example: A developer in Kano builds these for a local business.
Illustration – Feature Flow:
Add Task: User types task, clicks Add → Task is saved to database. View Tasks: On page load, tasks are fetched from database and displayed. Delete Task: User clicks Delete → Task is removed from database and list.
Mini summary: Add, View, and Delete are the core features.
Definition: Hooks are automated scripts that run to test your code, like checking if the add task feature works.
Why it's important: Testing catches bugs before users find them.
Simple explanation: Like checking your homework before submitting.
Real-life example: A developer uses a hook to run tests every time code changes.
School example: A student uses a hook to check their project.
Home example: A parent uses a hook to test a family app.
Nigerian example: A team in Abuja uses hooks for testing.
Illustration – Hook Flow:
Claude changes code ---> Hook runs tests ---> Tests pass! ✅ If tests fail, Claude fixes the code automatically.
Mini summary: Hooks automate testing to catch bugs.
Definition: Deploying means publishing your app so people can use it on the internet.
Why it's important: That's how people see your work!
Simple explanation: Like putting a poster on a wall.
Real-life example: A developer deploys to Vercel or Netlify.
School example: A student deploys their project to share with classmates.
Home example: A parent deploys a business website.
Nigerian example: A startup deploys their app for customers.
Illustration – Deployment Flow:
Your project ---> Upload to Vercel/Netlify ---> Live URL! (local files) (hosting service) (https://your-app.vercel.app)
Mini summary: Deploying publishes your app online for everyone to see.
Definition: Reviewing means looking at your app to find what's good and what can be better.
Why it's important: You can always make things better!
Simple explanation: Like getting feedback on a school project.
Real-life example: A developer gets user feedback and improves the app.
School example: A student improves their project after teacher feedback.
Home example: A parent improves their site based on family feedback.
Nigerian example: A Lagos startup improves their app based on user reviews.
Illustration – Improvement Cycle:
Build ---> Review ---> Improve ---> Build again (create) (look at) (make better) (repeat)
Mini summary: Always review and improve your app.
Definition: Presenting means sharing your app with others – showing what it does and how you built it.
Why it's important: It helps others understand your work and gives you confidence.
Simple explanation: Like giving a speech in class.
Real-life example: A developer presents their app to a client.
School example: A student presents their project to the class.
Home example: A child presents their business idea to parents.
Nigerian example: An entrepreneur presents their app to investors in Lagos.
Illustration – Presentation Outline:
1. Introduction – What is your app? 2. Demo – Show it working. 3. How you built it – Tech stack, features. 4. Challenges – What was hard? 5. Lessons learned – What you discovered. 6. Future plans – What you want to add.
Mini summary: Presenting your project shares your work with others.
In this module, we built a complete web application – a Todo List App. We learned:
How to build a Todo List App with Claude Code:
Walk students through building the Todo List App step by step. Let them use Claude Code for each part. Encourage them to add their own features. Emphasise the importance of planning and structure. Celebrate their final projects.
Help your child plan their project. Sit with them as they build. Ask questions like "What feature will you build next?" and "How does this part work?" Celebrate their finished app with them.
+------------------------------------------+ | Todo List App | | +--------------------------------------+ | | | Frontend (HTML/CSS/JS) | | | | - Add Task | | | | - View Tasks | | | | - Delete Task | | | +--------------------------------------+ | | +--------------------------------------+ | | | Backend (Node.js/Express) | | | | - API Routes | | | | - Authentication | | | +--------------------------------------+ | | +--------------------------------------+ | | | Database (SQLite with MCP) | | | | - Store tasks | | | | - Store users | | | +--------------------------------------+ | +------------------------------------------+
| Feature | Simple Web Page | Complete Web App |
|---|---|---|
| Frontend | Yes | Yes |
| Backend | No | Yes |
| Database | No | Yes |
| Authentication | No | Yes |
| User data | No (static) | Yes (dynamic) |
| Deployment | Possible | Common |
Day 1: Plan the app Day 2: Set up structure and CLAUDE.md Day 3: Build frontend Day 4: Build backend Day 5: Connect to database with MCP Day 6: Add authentication Day 7: Test with hooks Day 8: Deploy online Day 9: Review and improve Day 10: Present your project
| Task | Without Claude | With Claude |
|---|---|---|
| Building frontend | Write all code manually | Describe, Claude writes |
| Building backend | Write server code yourself | Claude builds the server |
| Database connection | Write connection code | MCP handles it |
| Testing | Manual testing | Hooks automate |
| Time to build | Weeks | Days |
In this module, we built a complete web application – a Todo List App – using everything we learned. We planned the app, set up the project structure, built the frontend with HTML, CSS, and JavaScript, built the backend with Node.js and Express, connected to a database with MCP, used CLAUDE.md for project memory, added authentication, built core features, tested with hooks, and deployed online. We also learned how to review and present our project. You now have the skills to build real web applications with Claude Code. This is a huge achievement – you are a real web developer!
| Term | Definition |
|---|---|
| Frontend | A) The server |
| Backend | B) What users see |
| Database | C) Login and register |
| Authentication | D) Data storage |
| Deploy | E) Publish online |
Answers: Frontend-B, Backend-A, Database-D, Authentication-C, Deploy-E
Scenario 1: You want to build a Todo List App for your family.
Task: Write a prompt to Claude Code to start building the frontend.
Answer: "Build a simple frontend for a Todo List App with HTML, CSS, and JavaScript. Include an input field, an add button, and a list to display tasks."
Scenario 2: You want to add authentication to your app.
Task: Write a prompt to Claude Code to add login and register.
Answer: "Add authentication to my Todo List App. Include a register page and a login page. Use JWT for tokens."
In groups of three, build a Todo List App together. One person builds the frontend, one builds the backend, and one sets up the database with MCP. Combine your work and present the final app to the class.
Build your own Todo List App from start to finish. Use Claude Code for every part. Write down all the prompts you used. Present your app to someone.
Build a complete web application of your choice (not a Todo List). It could be a recipe app, a book tracker, or a contact manager. Use Claude Code for every part. Deploy it online and share the link.
Write a detailed report on how you built your Todo List App. Include:
Take your Todo List App and add a new feature: due dates for tasks, or categories, or priority levels. Use Claude Code to help. Write down the prompts you used and what you added.
Fill-in-the-blank: 1. Frontend, 2. Backend, 3. Database, 4. Authentication, 5. MCP, 6. Hook, 7. Deploy, 8. CLAUDE.md, 9. delete, 10. test
True/False: 1F, 2T, 3T, 4T, 5F, 6T, 7F, 8T, 9F, 10T
Multiple Choice: 1A, 2B, 3A, 4A, 5A, 6A, 7A, 8A, 9A, 10A, 11A, 12A, 13A, 14A, 15A
Matching: Frontend-B, Backend-A, Database-D, Authentication-C, Deploy-E
In Module Four, we will take things to the next level. We will learn about Advanced Claude Code Features – we will build custom agents, use advanced MCP integrations, and build production-ready applications. We will also work on a Capstone Project – a big project that showcases everything you have learned. Get ready to become a Claude Code expert!
🎉 Congratulations! You have completed Module Three: Building a Complete Web App 🎉
You are now ready for Module Four – Advanced Features and Capstone Project!
Module Four: Advanced Claude Code Features & Capstone Project – Becoming a Professional Developer
Welcome, young developer! This is the final module of our course. You have come so far! In Module One, you learned the basics. In Module Two, you learned powerful features like CLAUDE.md, Skills, MCP, Hooks, and Subagents. In Module Three, you built a complete web app – a Todo List. Now, in Module Four, we will take everything to the next level. We will learn advanced features like custom agents, advanced MCP integrations, and building production-ready applications. Then, you will complete a Capstone Project – a big project that shows everything you have learned. This is your final step to becoming a professional developer with Claude Code. Let's go!
After completing this module, you will be able to:
Chidi's Final Challenge
Chidi had completed all his modules. He had built web pages, used CLAUDE.md, Skills, MCP, Hooks, Subagents, and even a Todo List App. But his teacher had one final challenge: "Chidi, build a real-world application that solves a problem in your community. Use everything you have learned. This is your capstone project." Chidi thought about his community. He noticed that small shops in Lagos had trouble managing their inventory. He decided to build an Inventory Management System – an app where shop owners could add, update, and track products. He used Claude Code for every part: planning, frontend, backend, database, authentication, and deployment. He added advanced features like barcode scanning and sales reports. After weeks of work, he presented his project. His teacher and classmates were amazed. Chidi said, "This is what I learned to do – build solutions that help people!"
Definition: Custom agents are specialised versions of Claude that you can create for specific tasks – like a "frontend agent" or a "testing agent."
Why it's important: They make Claude even more powerful and focused.
Simple explanation: Like having different helpers for different jobs – one for cooking, one for cleaning.
Real-life example: A developer creates a "security agent" that checks code for vulnerabilities.
School example: A student creates a "research agent" for finding facts.
Home example: A parent creates a "budget agent" for tracking expenses.
Nigerian example: A Lagos developer creates a "localisation agent" that adds Pidgin English translations.
Illustration – Custom Agents:
+------------------------------------------+ | Main Claude | | +--------------------------------------+ | | | Custom Agent 1: Frontend Specialist | | | | Custom Agent 2: Testing Agent | | | | Custom Agent 3: Documentation Agent | | | +--------------------------------------+ | +------------------------------------------+
Mini summary: Custom agents are specialised Claude helpers for specific tasks.
Definition: Creating a custom agent means giving Claude a special set of instructions that tell it how to act for a specific job.
Why it's important: You can create agents that are experts in one area.
Simple explanation: Like telling a friend "pretend you are a teacher" and they act like one.
Real-life example: A developer creates a "React expert" agent for frontend tasks.
School example: A student creates a "math helper" agent.
Home example: A parent creates a "recipe expert" agent.
Nigerian example: A developer creates a "Nigerian market expert" agent.
Illustration – Agent Creation:
// In CLAUDE.md or a separate file # Frontend Agent You are a frontend expert specialising in React and Tailwind. Always use functional components and hooks. Write clean, reusable code with comments. // Now Claude will act as a frontend expert.
Mini summary: Create custom agents by giving Claude specific instructions.
Definition: MCP (Model Context Protocol) connects Claude to external tools. Advanced integrations connect to more complex data sources like PostgreSQL, MongoDB, or third-party APIs.
Why it's important: It lets you build apps with real, persistent data.
Simple explanation: Like connecting your app to a big filing cabinet that never forgets.
Real-life example: A developer connects to a PostgreSQL database with user data.
School example: A student connects to a MongoDB database for a project.
Home example: A parent connects to a weather API.
Nigerian example: A developer connects to a payment API like Paystack.
Illustration – Advanced MCP:
Claude <-----> MCP Server <-----> PostgreSQL (AI) (bridge) (database) Claude <-----> MCP Server <-----> Paystack API (AI) (bridge) (payments)
Mini summary: Advanced MCP connects Claude to databases, APIs, and more.
Definition: A production-ready app is one that is secure, fast, and reliable enough to be used by real people.
Why it's important: You want your app to work well for users.
Simple explanation: Like making sure your bike is safe and strong before you ride it.
Real-life example: A developer adds error handling, logging, and performance optimisations.
School example: A student checks their project for bugs.
Home example: A parent tests an app before sharing it.
Nigerian example: A startup optimises their app for slow internet connections.
Illustration – Production Checklist:
✅ Error handling – catch and display errors. ✅ Logging – record what happens. ✅ Security – protect user data. ✅ Performance – make it fast. ✅ Testing – check everything works. ✅ Documentation – explain how to use it.
Mini summary: Production-ready apps are secure, fast, and reliable.
Definition: CI/CD means Continuous Integration and Continuous Deployment. It's a way to automatically test and deploy your app every time you make a change.
Why it's important: It saves time and catches problems early.
Simple explanation: Like a robot that checks your work and publishes it automatically.
Real-life example: A developer uses hooks to run tests and deploy to Vercel.
School example: A student uses hooks to publish their project.
Home example: A parent uses hooks to update their website.
Nigerian example: A startup uses CI/CD for their app.
Illustration – CI/CD Flow:
Code change ---> Hook runs tests ---> Tests pass ---> Auto-deploy (you save) (automated) (all good) (published)
Mini summary: CI/CD automates testing and deployment.
Definition: File uploads let users upload pictures, documents, or other files to your app.
Why it's important: Many apps need users to upload things – like profile pictures or documents.
Simple explanation: Like attaching a photo to an email.
Real-life example: A profile page lets users upload a profile picture.
School example: A project submission page lets students upload files.
Home example: A family recipe site lets users upload photos.
Nigerian example: A job portal lets applicants upload CVs.
Illustration – File Upload Prompt:
Prompt: "Add a file upload feature to my app. Users should be able to upload profile pictures." Claude: "I'll add a file input, handle the upload, and save the file."
Mini summary: File uploads let users share pictures and documents.
Definition: Email notifications send emails to users automatically – like a welcome email, a password reset, or a reminder.
Why it's important: It keeps users informed and engaged.
Simple explanation: Like getting a birthday email from a store.
Real-life example: A welcome email when a user signs up.
School example: A reminder email before a test.
Home example: A grocery app sends a reminder to buy milk.
Nigerian example: A bank app sends transaction notifications.
Illustration – Email Notification Prompt:
Prompt: "Add email notifications. Send a welcome email when a user registers." Claude: "I'll set up email service and add a welcome email trigger."
Mini summary: Email notifications keep users informed.
Definition: Real-time updates show changes instantly – like a chat app or a live scoreboard.
Why it's important: It makes the app feel alive and responsive.
Simple explanation: Like seeing a message appear immediately in a chat.
Real-life example: A live chat app.
School example: A live quiz where you see results instantly.
Home example: A family group chat.
Nigerian example: A delivery tracking app with live updates.
Illustration – Real-Time Prompt:
Prompt: "Add real-time updates so all users see changes immediately." Claude: "I'll use WebSockets to sync data across all users."
Mini summary: Real-time updates show changes instantly.
Definition: A capstone project is a final project that shows everything you have learned in the course.
Why it's important: It's your chance to demonstrate your skills and build something you are proud of.
Simple explanation: Like a final exam, but you get to build something cool.
Real-life example: A developer builds a full app for their portfolio.
School example: A student builds a project to present to the class.
Home example: A parent builds an app for the family.
Nigerian example: An entrepreneur builds an app for their business.
Illustration – Capstone Planning:
Step 1: Choose a project idea. Step 2: Define features. Step 3: Plan the tech stack. Step 4: Set up the project. Step 5: Build step by step. Step 6: Test and deploy. Step 7: Present your project.
Mini summary: The capstone project is your final showcase.
Definition: Project ideas are suggestions for what you can build for your capstone.
Why it's important: It gives you a starting point.
Simple explanation: Like choosing a topic for a school report.
Real-life example: Build a personal finance tracker.
School example: Build a homework tracker.
Home example: Build a family chore app.
Nigerian example: Build a marketplace for local farmers.
Illustration – Capstone Ideas:
+------------------------------------------+ | Capstone Project Ideas: | | 📝 Inventory Management System | | 📊 Personal Finance Tracker | | 🛒 Online Marketplace | | 📚 Homework / Assignment Tracker | | 🏥 Health Appointment Scheduler | | 🚗 Delivery Tracking App | | 🎓 Student Portal | | 🏡 Property Listing Site | +------------------------------------------+
Mini summary: Choose a project that excites you.
Definition: This is the process of building your project from start to finish.
Why it's important: It's the main event!
Simple explanation: Like building a Lego set – one piece at a time.
Real-life example: A developer builds a project over several weeks.
School example: A student works on a project over a semester.
Home example: A parent builds a project in their spare time.
Nigerian example: An entrepreneur builds a project for their startup.
Illustration – Build Steps:
1. Set up project and CLAUDE.md 2. Build frontend (HTML, CSS, JS) 3. Build backend (Node.js, Express) 4. Connect to database (MCP) 5. Add authentication 6. Add core features 7. Add advanced features 8. Test with hooks 9. Deploy online 10. Present your project
Mini summary: Build your project step by step.
Definition: Testing is checking that everything works correctly.
Why it's important: You don't want to present a broken app.
Simple explanation: Like checking your homework before submitting.
Real-life example: A developer tests all features before launch.
School example: A student tests their project before presenting.
Home example: A parent tests an app before sharing.
Nigerian example: A startup tests their app before releasing.
Illustration – Testing Checklist:
✅ Frontend works correctly. ✅ Backend responds correctly. ✅ Database stores and retrieves data. ✅ Authentication works (login, register, logout). ✅ All features work as expected. ✅ No errors in the console. ✅ App works on different devices.
Mini summary: Test everything before you present.
Definition: Deploying means publishing your project online so everyone can see it.
Why it's important: You want to share your work!
Simple explanation: Like putting your art on the fridge for everyone to see.
Real-life example: A developer deploys to Vercel or Netlify.
School example: A student deploys their project to share with classmates.
Home example: A parent deploys a family app.
Nigerian example: A startup deploys their app for customers.
Illustration – Deployment:
Your project ---> Upload to Vercel/Netlify ---> Live URL! (local files) (hosting service) (https://your-app.vercel.app) Share the URL with everyone!
Mini summary: Deploy your project to share it with the world.
Definition: Presenting means sharing your project with others and explaining how you built it.
Why it's important: It shows your skills and builds your confidence.
Simple explanation: Like giving a speech about your favourite project.
Real-life example: A developer presents their app to a client.
School example: A student presents their project to the class.
Home example: A child presents their business idea to parents.
Nigerian example: An entrepreneur presents their app to investors.
Illustration – Presentation Outline:
1. Introduction – What is your project? 2. Demo – Show it working! 3. How you built it – Tech stack and features. 4. Challenges – What was difficult? 5. Lessons learned – What you discovered. 6. Future plans – What you would add next. 7. Q&A – Answer questions.
Mini summary: Presenting your project shares your work and skills.
Definition: Reflection is thinking back on everything you have learned in the course.
Why it's important: It helps you see how much you have grown.
Simple explanation: Like looking at your baby pictures and seeing how you've grown.
Real-life example: A developer looks back at their first project.
School example: A student reflects on their learning journey.
Home example: A family talks about what they accomplished.
Nigerian example: An entrepreneur reflects on their business journey.
Illustration – Course Journey:
Module 1: Introduction to Claude AI for Web Development Module 2: Claude Code Features (CLAUDE.md, Skills, MCP, Hooks, Subagents) Module 3: Building a Complete Web App (Todo List) Module 4: Advanced Features & Capstone Project You have learned: ✅ How to use Claude Code ✅ How to write prompts ✅ How to build websites ✅ How to build web apps ✅ How to deploy online ✅ How to present your work
Mini summary: You have grown so much – celebrate your achievement!
How to complete your capstone project:
Guide students through the capstone project. Help them choose a project that is challenging but achievable. Encourage them to use all the features they learned. Provide regular check-ins and feedback. Celebrate their final presentations.
Encourage your child to choose a project they are passionate about. Help them plan and stay organised. Celebrate their progress and final project. Ask questions about how they built it and what they learned.
Week 1: Choose project and plan features. Week 2: Set up project and CLAUDE.md. Week 3: Build frontend. Week 4: Build backend. Week 5: Connect to database with MCP. Week 6: Add authentication. Week 7: Add core features. Week 8: Add advanced features. Week 9: Test with hooks. Week 10: Deploy and present.
| Feature | Basic App | Advanced App (Capstone) |
|---|---|---|
| Frontend | Yes | Yes (polished) |
| Backend | Yes | Yes (scalable) |
| Database | Yes (SQLite) | Yes (PostgreSQL/MongoDB) |
| Authentication | Yes | Yes (secure) |
| File Upload | No | Yes |
| Email Notifications | No | Yes |
| Real-Time Updates | No | Yes |
| CI/CD | No | Yes |
| Custom Agents | No | Yes |
| Tool/Feature | What It Does | When to Use |
|---|---|---|
| Custom Agent | Specialised Claude | Complex, specialised tasks |
| MCP (Advanced) | Connect to external data | Real databases and APIs |
| CI/CD Hooks | Automated testing/deploy | Production apps |
| File Upload | Let users upload files | User-generated content |
| Email Notifications | Send automated emails | User engagement |
| Real-Time | Instant updates | Chat, tracking, live apps |
In this final module, we explored advanced features of Claude Code: custom agents, advanced MCP integrations, production-ready applications, CI/CD, file uploads, email notifications, and real-time updates. We also planned and built a capstone project – a complete application that shows everything you have learned. You chose a project, planned it, built it, tested it, deployed it, and presented it. This is a huge achievement. You are now a skilled developer with the power of Claude Code. You can build real applications that solve real problems. Congratulations!
| Term | Definition |
|---|---|
| Custom Agent | A) Automated testing and deployment |
| Production-Ready | B) Specialised Claude |
| CI/CD | C) Secure, fast, reliable |
| File Upload | D) Instant changes |
| Real-Time Updates | E) Let users share files |
Answers: Custom Agent-B, Production-Ready-C, CI/CD-A, File Upload-E, Real-Time Updates-D
Scenario 1: You want to build a capstone project for your community.
Task: Write a prompt to Claude Code to help you choose a project idea.
Answer: "Give me 5 project ideas for a capstone project that helps my local community in Nigeria."
Scenario 2: You have finished building your app and want to test it.
Task: Write a prompt to Claude Code to help you test.
Answer: "Help me test my app. Check that all features work, and fix any errors."
In groups of three, plan a capstone project together. One person is the project lead, one is the frontend developer, and one is the backend developer. Plan your features, tech stack, and timeline. Present your plan to the class.
Complete your capstone project from start to finish. Use Claude Code for every part. Write down all the prompts you used. Deploy your project and present it to someone.
Build a capstone project of your choice. It must include:
Write a detailed report on your capstone project. Include:
Take your capstone project and add one more advanced feature that you haven't used before. For example, if you didn't add email notifications, add them now. If you didn't add real-time updates, add them. Write down the prompts you used and what you added.
Fill-in-the-blank: 1. custom agent, 2. production, 3. Continuous, Continuous, 4. File, 5. Email, 6. Real, 7. capstone, 8. test, 9. deploy, 10. Reflection
True/False: 1T, 2F, 3T, 4F, 5T, 6F, 7F, 8F, 9T, 10F
Multiple Choice: 1A, 2A, 3A, 4A, 5A, 6A, 7A, 8A, 9A, 10A, 11A, 12A, 13A, 14A, 15A
Matching: Custom Agent-B, Production-Ready-C, CI/CD-A, File Upload-E, Real-Time Updates-D
Congratulations! You have completed all four modules of the Claude AI for Web Development course. You have learned how to use Claude Code to build websites, web apps, and full production-ready applications. You have built a capstone project that showcases all your skills. What's next? Here are some ideas:
Your journey is just beginning. You have the skills, the tools, and the confidence to build anything you can imagine. Go and make it happen!
🎉 Congratulations! You have completed the entire Claude AI for Web Development course! 🎉
You are now a certified Claude Code Developer!