Comrite Learning

Beginner
Elementary School High School Middle School Technology

AI Vibe Coding: Build Websites, Games, Mobile Apps & AI Agents

benjamin benjamin
5 (1)
Overview
Curriculum
Reviews
  • 17 Sections
  • 180 Lessons
  • 18 Quizzes
  • 30h Duration
Collapse All
Introduction to the course
5 Lessons
  1. Overview of Vibe Coding, and its best practice
  2. Syllabus of Vibe coding course, and What you will learn
  3. Introduction to Congressional App Challenge & Presidential AI Challenge
  4. Course Logistics
  5. To Parents
Setup Development Environment, Intro to Git
11 Lessons
  1. Development ( Laptop ) setup
  2. Enable WSL (Windows Users Only)
  3. Introduction to Version Control
  4. Introduction to git
  5. Github ssh key, add to github setting
  6. Git in VSCode
  7. How to use github
  8. Enable github copilot in vscode
  9. Enable GitHub Pages on a Repository ( for easy access, your own simple web host)
  10. 🐧 Linux Basics for Windows Users (Quick Start)
  11. Install Python
What is Internet/AI, how it works?
12 Lessons
  1. What is the Internet?
  2. What is Local area network ( LAN) , what is Wide Area network ( WAN )
  3. Network diagram : home network, corperate network
  4. OSI 7 layer and TCP/IP
  5. How Ethernet works?
  6. How IP packet send within Local area network
  7. How IP packets are sent between two LANs, how routing works?
  8. Useful network commands
  9. How DNS works?
  10. What is firewall
  11. Application Protocols
  12. TLS, HTTPS, and Encryption
Build Your First AI Website
8 Lessons
  1. Basic Web Development
  2. 🌐 Big picture: Internet, Browser, Web Server & HTTP
  3. 🌐 Beginner Tutorial: HTML, CSS, JavaScript & TypeScript
  4. My first Web site: Using VSCode Copilot Agent Mode ( on cloud )
  5. Web site 2 : Using VScode in your local laptop
  6. Introduction to OpenCode
  7. Web site project ideas
  8. You Created It — Let the World See It!
HTML - Foundations of Web Development
5 Lessons3 Quizzes
  1. Introduction to the Web Deveopment
  2. Sample HTTP header and content
  3. HTML Basics and development tools
  4. Homework1: Simple HTML using vscode
  5. Common HTML Elements
  6. Home work 2: introduction of yourself
  7. HTML forms
  8. homework: design a survey form
CSS - Beautify your web
10 Lessons3 Quizzes
  1. Introduction to CSS (Cascading Style Sheets) Syntax
  2. Homework basic css
  3. CSS examples
  4. CSS examples - 2 ( transformation, animation, position)
  5. Homework: css animation
  6. Homework CSS animation review
  7. CSS layout: flexbox
  8. CSS grid ( for layout)
  9. Advanced CSS
  10. Homework : advanced CSS
  11. CSS frameworks
  12. Tailwind CSS
  13. From design to css
Javascript - Make the web dynamic
29 Lessons6 Quizzes
  1. Introduction to JavaScript in Web Development
  2. JavaScript Fundamentals
  3. Advanced Topic: const reference or to variable
  4. Homework: write a factorial function in javascript and show output using console.log
  5. Advanced Javascripts : arrow function, ===, ... (spread/merging/rest) syntax/grammer
  6. Advanced Topic: reduce, map, foreach etc in Javascript
  7. Advanced Topic: this and new for function
  8. Advanced topics: Understanding lexical scope for arrow function and this in a regular function
  9. Javascript plain object
  10. JavaScript an Object-Oriented Language
  11. Advanced topics: difference between plain objects and classes/objects
  12. DOM Manipulation
  13. Advanced Topic: global objects in browers: document, window, navigator, history
  14. JavaScript Events
  15. Advanced Topic: Named Function and Arrow function , and anonymous function
  16. Advanced : how to list all event.target properties
  17. HOMEWORK Event Handling - Respond to Input Changes
  18. HTML Canvas, and javascript animation
  19. Add audio to html from javascript
  20. Add video in html/javascript
  21. Write a simple game: Guess the Number!
  22. Game: catch falling objects
  23. Javascript games , art: p5.js
  24. HOMEWORK: use p5.js to check boundary of a moving ball
  25. HOMEWORK: draw circle, rectange, triangle,
  26. Advanced Topic: keyboard in javascript
  27. Introduction to Asynchronous JavaScript
  28. Advanced: Understanding about promise(), resolve(), reject(), then(), catch()
  29. Advanced topic: async and parallel
  30. Local Storage and State Management
  31. Working with Cookies in JavaScript
  32. Advanced: server side cookie
  33. Advanced topic: cookie and modern web framework
  34. Advanced Topic: three.js
  35. Advanced Topic: Babylon.js
AI Game Development
10 Lessons
  1. Game Development Overview
  2. Create Your Own Games with AI
  3. Arcade, Puzzle, Platformer, Top‑Down Shooter, Endless Runner
  4. Phaser 3 Quick Tutorial ( Javascript 2D browser game)
  5. Three.js Introduction
  6. 3D Game Types + Three.js Intro + AI-Generable Demos
  7. project ideas for game
  8. Create python .venv using vscode
  9. Python based games ( Pygame/Pygame zero)
  10. Some good python game ideas
AI Full Stack Web Database-Powered Websites
11 Lessons
  1. Full web stack Development
  2. Web Authentication: Session Cookies vs JWT Cookies
  3. SQL vs NoSQL Databases
  4. Add blog using sqlite (db) to demo server side
  5. Introduction to React & Next.js
  6. MongoDB Atlas Free (M0) Quick Start Guide
  7. MongoDB: Full Introduction + Windows Installation + SQL Basics & Comparison
  8. Comrite Cloud Deployment Requirements
  9. Step-by-Step AI Prompts for Next.js Demo Project
  10. Use Supabase + Vite + GitHub Pages Setup Guide
  11. Database-Powered Website idears
Back-end (Server side) Web programming
12 Lessons2 Quizzes
  1. Advanced Topic: what is 0t ed25519 mean?
  2. Python for Web Development ( flask)
  3. Homework : write a beautify letter in html/css and use flask to serve it
  4. JSON Introduction
  5. Flask Jsonify
  6. Flask ( server side) file structure
  7. Use Flask to handle HTTP get/post methods
  8. Design a form to collect information about student who are interested in USACO
  9. Understanding HTTP GET and POST and How Browsers Interact with Web Servers
  10. Working with APIs and JSON in JavaScript
  11. CORS (Cross-Origin Resource Sharing)
  12. Project Week
  13. Project Presentations
  14. Simple Web Page Examples
Advanced Web Development: Databases
19 Lessons2 Quizzes
  1. Introduction to Databases
  2. SQLite Installation
  3. Some sqlite tools
  4. SQL Basics
  5. SQLite Cheat Sheet
  6. How to use SQLite3 Editor
  7. Advanced topic: SQLite3 Transactions
  8. Advanced topis: SQLite3 Triggers
  9. Advanced SQL Concepts: A Comprehensive Guide
  10. Database Normalization: 1/2/3 Normal Form History
  11. Database Normalization 1st Normal Form (1NF)
  12. Normalization 2nd Normal Form (2NF)?
  13. Database Normalization 3NF
  14. Database Normalization Boyce-Codd Normal Form (BCNF)
  15. HOMEWORK: design db for student, course, score
  16. Scenario: A Student-CourScenario: A Student-Course-Instructor Systemse-Instructor System
  17. Database Normalization : 4/5 NF
  18. Database Normalization and Performance Tuning in SQLite
  19. Introduction to MongoDB
  20. Connecting Node.js with MongoDB
  21. Design a db for online training platform for who are interested in USACO training
Advanced Web Development: Full-Stack Applications
16 Lessons2 Quizzes
  1. SQLite in flask/python
  2. Introduction to SQLAlchemy
  3. Advanced topic: many_to_one, one_to_many relationship in SQLAlchemy
  4. Advanced topic:What is relationship in SQLAlchemy?
  5. Advanced Topic: backref and cascades
  6. Adanced topic: when to use secondary table, where to use association_proxy?
  7. Advanced topic: What does session.query(Post, User).join(User).all() do?
  8. Advanced Topic: sqlakchemy support other databases
  9. Homework: design todo list using sqlalchemy
  10. Flask + SQLAlchemy Blog System
  11. User Authentication and Sessions with Flask
  12. Advanced topic: where is session data stored?
  13. Flask session using server-side session
  14. Homework: project, a web app: todo list with user login/logout
  15. Introduction to Django ( MVC framework)
  16. Introduction to Node.js
  17. React.js in the Next.js Framework
  18. Final Project Demo/showoff
AI Mobile App Development
3 Lessons
  1. Overview
  2. Build & Publish a Mobile App Using VSCode AI Agent
  3. AI Mobile App Project Ideas (Organized by Category)
Build Your AI Agent
8 Lessons
  1. Large Language Models (LLMs)
  2. Retrieval-Augmented Generation (RAG)
  3. Practice: comrite course Rag system
  4. From LLM to Modern Agentic Vibe Coding
  5. What is AI Agent? and how it works?
  6. Advanced: agent loop and user/chat turn (User → SDK → Agent → LLM + Loops Side‑by‑Side)
  7. Comparative Analysis of Modern Agentic AI Frameworks
  8. Hands‑On Vibe Coding Agent Projects 
AI Agents & Automation
14 Lessons
  1. 🧠 Agent Systems Track
  2. Linux Commands & Modern Start terminal
  3. Docker introduction
  4. Kubernet introduction
  5. Run LLMs Locally on Your Machine Using Ollama
  6. How to setup Hermes
  7. How to setup openclaw
  8. Advanced : OpenClaw Hidden .openclaw Directory , SOUL.md etc
  9. Advanced: openclaw internal ( communications between sub/agents)
  10. OpenClaw Multiple-agents Hands-On Demo
  11. MCP & A2A for AI Agents + OpenClaw Agent/Sub‑Agent Communication
  12. How to Install Skills on OpenClaw
  13. Agent Skills, how to write skill
  14. Marketing/Social: upload daily youtube video project
AI for professionals
5 Lessons
  1. Value of AI Vibe coding for professional
  2. Effective AI Vibe-Coding: Beyond Prompt Engineering
  3. Learning map: ( Vibe coding section)
  4. Learning session 2: agent setup, workflow integration
  5. AI Automation with n8n
Final Capstone Project 🚀 Build Your Own AI Product
2 Lessons
  1. 🚀 Build Your Own AI Product
  2. project ideas

A future-ready program where students don’t just learn coding — they learn how to build with AI

⚠️ The world has changed

AI is no longer a future topic.

It is already:

  • writing code
  • building apps
  • designing websites
  • automating jobs
  • reshaping entire industries

The real question is no longer:

“Should my child learn coding?”

It is now:

“Should my child learn how to build with AI before AI becomes standard everywhere?”

💡 The shift parents need to understand

Traditional coding education focuses on:

  • memorizing syntax
  • writing everything manually
  • slow project cycles

But today’s real-world software development looks very different:

Modern builders now:

  • use AI to generate code
  • guide AI to build products
  • combine tools + automation
  • create software much faster than before

This course teaches students how to work in this new AI-powered reality.

🧠 What your child will actually learn

Instead of a traditional “coding class,” students learn how to:

⚡ Build real digital products using AI

  • Websites and personal portfolios
  • Interactive games
  • Mobile-friendly apps
  • AI chatbots and assistants
  • Data-driven applications

🤖 Work with AI like a co-creator

  • Use AI to generate and improve code
  • Fix and refine AI outputs
  • Turn ideas into working apps quickly

🔄 Understand modern AI workflows (Agentic Thinking)

Students are introduced to how modern AI systems work together:

  • breaking tasks into steps
  • using AI to plan and build
  • automating parts of development
  • simulating real “AI team workflows”

🧩 What students will build

By the end of the program, students will have a real portfolio including:

  • 🌐 Personal websites & portfolios
  • 🎮 Browser-based games
  • 📱 Simple mobile-style apps
  • 💬 AI chatbots (study / writing / helper tools)
  • 🧠 Smart apps that use data
  • 🤖 AI automation or agent-based systems

These are not toy exercises — they are real working projects.

🎯 Why this matters for your child’s future

This program builds skills that directly support:

📚 Academic success

  • stronger logical thinking
  • improved problem-solving ability
  • better structured reasoning

🏆 College & competition advantage

  • stronger STEM portfolio
  • standout project experience
  • early exposure to AI systems

💼 Future career readiness

Students gain early exposure to:

  • AI-assisted software development
  • automation thinking
  • modern digital product creation

🧭 A different way of learning

This is not a passive lecture-based class.

Students learn by:

  • building real projects from day one
  • using AI as a development partner
  • iterating and improving continuously
  • seeing results quickly (motivation stays high)

👶 Beginner friendly (no experience required)

This course is designed for:

  • complete beginners
  • students curious about AI or tech
  • students who enjoy building things

No prior coding experience is needed.

Students are guided step-by-step using:

  • structured learning paths
  • AI-assisted tools
  • hands-on project building

🌟 What makes this different

Most coding classes teach:

“How to write code”

This program teaches:

“How to build real products using AI”

Students learn how modern software is actually created today — not how it was done 10 years ago.

📈 Outcomes you can expect

By the end of the course, students will:

  • confidently build websites and apps
  • understand how AI is used in real software
  • complete multiple portfolio projects
  • gain confidence in technology and problem solving
  • develop a strong foundation for future STEM learning

🚀 Perfect for students who are:

  • curious about AI and technology
  • interested in games, apps, or design
  • planning to study STEM in the future
  • looking for a meaningful, hands-on skill

💬 Final message

We are entering a world where:

The ability to build with AI will be as important as reading and writing.

This course helps students take their first step into that world early — in a structured, guided, and creative way.

👉 Join AI Vibe Coding

Help your child move from:
technology user → technology builder

Start building:

  • websites
  • games
  • apps
  • AI assistants
  • intelligent systems

The future is being built right now.

Let’s make sure your child is not just watching it — but building it.

5

1 Ratings
5 Star 100%
4 Star 0%
3 Star 0%
2 Star 0%
1 Star 0%

Reviews

  • angie
    angie Jan 1, 2025 @ 4:01 pm
    Best class ever. Highly recommend.

    Very well structured and easy-to-follow course for kids, instructor’s explanations were very engaging and practical!

    Reply
    Reply to angie

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below:

Related Courses

Intermediate
AI Elementary School High School Middle School Professional Technology

AI Robertics ( Part 2/Semester 2)

benjamin benjamin

Build intelligent robots with Python, AI, and vision

Create autonomous systems that react to real environments

Learn how modern robotics and AI systems work

Buy Now
Intermediate
USAAIO
Placeholder
AI High School Middle School Professional Technology

USAAIO Foundations: Machine Learning & Data Analysis (Part2/Semester 2)

benjamin benjamin

AI/ML overview

Math Statics foundation

Data Analysis

Buy Now
High School Middle School Professional Technology

AI Robertics ( Part 1/Semester 1)

benjamin benjamin
33
Buy Now