📚 Course Syllabus
AI-Assisted Vibe Coding for Real-Life Problem Solving
📄 View Course Flyer
⏱️
Per Session
~60 Minutes
📖 Course Description
Welcome to AI-Assisted Vibe Coding! This course teaches beginners how to create real,
useful projects by collaborating with AI coding assistants. No prior programming experience
is required—you'll learn to describe what you want in plain English and let AI help
you bring your ideas to life.
Instead of memorizing syntax, you'll focus on problem-solving, critical thinking,
and effective communication with AI tools. By the end of this course, you'll have
built multiple projects including websites, interactive tools, and a personal final project.
🎯 Learning Outcomes
By completing this course, you will be able to:
✓
Write effective prompts that get AI to generate useful code
✓
Understand HTML, CSS, and JavaScript fundamentals
✓
Use VS Code and GitHub Copilot for professional coding
✓
Build multi-page websites with navigation and styling
✓
Create interactive web applications with JavaScript
✓
Extract and visualize data using free online tools
✓
Automate repetitive tasks with simple scripts
✓
Deploy projects online using GitHub Pages
🛠️ Tools & Requirements
All tools used in this course are completely free. You'll need:
Claude (Web) - Free
VS Code - Free
GitHub Copilot Free - Free
Google Sheets - Free
Datawrapper - Free
GitHub Pages - Free
💻 Hardware Requirements
- A computer (Windows, Mac, or Linux)
- Internet connection
- Modern web browser (Chrome, Firefox, or Edge recommended)
📋 Course Structure
Each session follows a consistent format:
| Component |
Duration |
Description |
| Introduction |
5 min |
Welcome, agenda, and learning objectives |
| Concept Teaching |
10-15 min |
New concepts with live demos |
| Hands-On Activity |
15-25 min |
Build something with AI assistance |
| Show & Tell |
5 min |
Share your creations |
| Wrap-Up |
5-10 min |
Recap, homework, next session preview |
📚 Detailed Curriculum
Goal: Build confidence and show instant wins with AI-generated code
-
01
Introduction to Vibe Coding + First AI-Generated Project
What is "vibe coding"? First interaction with Claude. Create your first webpage instantly. Understanding what AI can and can't do.
-
02
HTML Foundations Through AI
HTML structure basics: headings, paragraphs, lists, links, images. Semantic HTML introduction. Debugging with AI assistance.
-
03
CSS Basics with AI Guidance
CSS syntax and selectors. Box model, colors, fonts, and spacing. Hover effects and transitions. Styling a complete page.
-
04
Intro to JavaScript (AI-assisted)
The "When → Do" pattern. Click events, show/hide functionality. Building a click counter and FAQ accordion.
Goal: Transition to a professional coding environment
-
05
Setting Up VS Code + Copilot Free
Installing VS Code. Setting up GitHub Copilot Free. Understanding autocomplete vs. chat. Rebuilding a previous project.
-
06
Building a Multi-Page Website
Folder structure for websites. Linking pages together. Navigation menus. External CSS files. Git version control basics.
-
07
JavaScript & Supercharged Browsing
DOM selection with querySelector. Changing elements with classList. Event listeners. Building a photo gallery with lightbox.
-
08
Midterm Project: "Useful Tool #1"
Module 1-2 recap. Project ideas gallery. Planning and building a useful tool. Show & tell presentations.
Goal: Build tools that solve real everyday problems
-
09
Web Data Extraction (Free Tools Only)
Google Sheets IMPORTHTML and IMPORTXML. XPath basics. AI-assisted data cleaning. Building live data dashboards.
-
10
Data Visualization
Choosing the right chart type. Google Sheets charts. Datawrapper for professional visuals. Apps Script for advanced data processing.
-
11
Automation with JavaScript
Automation concepts and patterns. Browser console basics. Text formatters and CSV cleaners. Building reusable tools.
-
12
Build a Personal Website or Dashboard
Module 3 finale project. Personal website vs. dashboard. Project templates. GitHub Pages deployment.
Goal: Build something meaningful and personal
-
13
Final Project Proposal
Project ideation techniques. MVP (Minimum Viable Product) scoping. Writing a project proposal. AI-assisted planning.
-
14
Build Phase (Part 1)
Project setup and structure. AI-assisted building with COSTAR prompts. HTML, CSS, and JavaScript implementation.
-
15
Build Phase (Part 2) + Advanced Tools
MVP completion. Polish and nice-to-haves. Mobile responsiveness. Alternative AI tools. Showcase preparation.
-
16
Showcase + Reflection
Final project presentations. Course reflection. Skills earned certificate. Future learning paths. Graduation celebration!
📝 Assessment & Completion
This course uses a project-based assessment approach:
- Session Activities: Hands-on projects completed during each session
- Optional Homework: Practice activities to reinforce learning (30-60 min each)
- Midterm Project (Session 8): Build a useful tool using skills from Modules 1-2
- Final Project (Sessions 13-16): Design, build, and present a personal project
🎓 Completion Requirements
To successfully complete the course, participate in session activities and complete the
final project showcase. Homework is optional but encouraged for deeper learning.
💡 Teaching Philosophy
This course embraces "Vibe Coding"—a new approach to programming where:
- You don't need to memorize syntax — AI can generate code from descriptions
- Focus on what, not how — Describe what you want, let AI handle the details
- Iterate and refine — Coding is a conversation with your AI assistant
- Build real things — Every session produces something tangible and useful
- Embrace mistakes — Errors are learning opportunities, not failures
🆘 Getting Help
- During Sessions: Ask questions anytime! Raise your hand or type in chat
- AI Assistance: Your primary debugging partner is your AI assistant
- Peer Support: Collaborate with classmates during activities
- Troubleshooting: Speaker notes include common issues and solutions