Vibe Coding for Teens, Code Real Projects, Build Real Skills

Topics Covered

• Why Python? The language of AI, data, and the web
• What is Vibe Coding?, Andrej Karpathy's 2025 concept that changed software forever
• The vibe coding workflow: Describe → AI Generates → You Review → Iterate → Ship
• Setting up VS Code & Cursor IDE, your professional AI-powered developer environment
• Setting up GitHub Copilot (free for students!), your AI pair programmer
• Python basics: print(), variables, strings, integers, floats
• String manipulation, slicing, formatting, f-strings
• Getting user input with input() function
• Basic arithmetic and math operations in Python
• Boolean logic: True, False, and comparisons

• Your first command-line programs
• Understanding error messages, the developer's best friend
• Running Python files from the terminal
• Introduction to Git, saving your code like a pro
• Creating your GitHub profile and first repository

Topics Covered

• If, elif, else, decision-making in code
• Nested conditionals for complex logic
• While loops, repeating until a condition is met
• For loops, iterating over sequences
• Range() function, generating number sequences
• Loop control: break, continue, pass
• Lists, storing multiple values in one variable
• List methods: append, remove, sort, reverse, index
• Tuples and when to use them
• String loops, processing text character by character
• Nested loops for patterns and grids
• Debugging with print() statements and VS Code debugger

Topics Covered

• Defining functions with def keyword
• Parameters and arguments, passing data to functions
• Return values, getting data back from functions
• Default parameters and keyword arguments
• Scope: local vs. global variables
• Importing Python's built-in modules: math, random, datetime, os
• The random module, creating unpredictable programs
• Working with the datetime module for time-based features
• Writing your own modules and importing them
• Docstrings, documenting your functions properly
• Lambda functions, quick, anonymous functions
• Recursion basics, functions that call themselves

Topics Covered

• Dictionaries, key-value pairs for structured data
• Dictionary methods: get, keys, values, items, update
• Nested dictionaries, representing complex real-world data
• Sets, unique collections and set operations
• List comprehensions, Pythonic one-line transformations
• Dictionary comprehensions
• Reading and writing text files with open()
• File modes: r, w, a, r+ explained
• Working with CSV files, reading datasets
• JSON files in Python, the language of the web
• Error handling with try, except, finally
• Building a simple contact book, CRUD operations

Topics Covered

• How the web works, browsers, servers, HTTP basics
• HTML document structure: DOCTYPE, html, head, body
• Semantic HTML: header, nav, main, section, article, footer
• Text elements: h1-h6, p, strong, em, blockquote
• Links and navigation: anchor tags, href, relative vs. absolute URLs
• Images: img tag, alt text for accessibility and SEO
• Lists: ordered, unordered, nested lists
• Tables, displaying structured data
• HTML Forms: input types, labels, buttons, textareas
• HTML attributes: id, class, style
• Accessibility basics: ARIA roles, alt text, heading hierarchy
• Vibe Coding HTML: using v0.dev to generate page layouts from descriptions
• Comparing hand-written HTML vs AI-generated HTML, understanding what AI creates
• Validating your HTML with W3C Validator

Topics Covered

• CSS syntax: selectors, properties, values
• The Box Model: margin, padding, border, content
• CSS colours: hex, RGB, HSL, and CSS variables
• Typography: fonts, Google Fonts integration, font-size, line-height
• CSS Flexbox, modern, powerful layout system
• CSS Grid, two-dimensional layout mastery
• Responsive design with Media Queries
• Mobile-first design principles
• CSS animations and transitions
• Pseudo-classes: hover, focus, active, nth-child
• CSS custom properties (variables) for design systems
• Dark mode implementation with CSS
• Vibe Coding CSS: using v0.dev and Bolt.new to generate beautiful UI components from text prompts
• Reading AI-generated Tailwind CSS, understanding utility-first styling

Topics Covered

• What is JavaScript and why it makes the web interactive
• JS basics: variables (let, const), data types, operators
• Functions in JavaScript, declarations, expressions, arrow functions
• Arrays and array methods: map, filter, reduce, forEach
• Objects in JavaScript, structuring real-world data
• The DOM, Document Object Model explained simply
• Selecting elements: getElementById, querySelector
• Changing content and styles with JavaScript
• Event listeners: click, mouseover, input, submit
• Form validation with JavaScript
• Fetch basics, getting data from the internet
• Local Storage, persisting data in the browser

Topics Covered

• What is an API? REST APIs explained with real examples
• Fetch API, making HTTP GET requests in JavaScript
• Async/await, handling asynchronous operations cleanly
• JSON parsing, working with API response data
• Error handling in fetch requests
• Public APIs: Weather, Quotes, Space, Pokemon, SpaceX
• Displaying API data dynamically in your webpage
• API keys, working with authenticated APIs safely
• Introduction to the OpenWeather API
• Deploying your website with Netlify, live in 60 seconds
• Custom domain basics
• Vibe Coding a full web app: using Bolt.new to build and deploy a project in minutes
• Comparing your hand-coded projects vs vibe-coded projects, understanding the trade-offs
• Phase 2 portfolio review, making your projects job-ready

Topics Covered

• Introduction to AI APIs, using AI as a superpower
• Working with the Google Gemini API (or Claude API), setup and authentication
• Chat Completion API, building a simple AI chatbot
• System prompts, guiding AI behaviour for your use case
• Deep dive into Cursor IDE, the #1 AI-powered code editor for vibe coding
• Cursor Composer: describe a feature in English → Cursor writes the code across multiple files
• Cursor Tab: AI auto-completes your code as you type
• GitHub Copilot Chat, asking your AI pair programmer questions about your code
• Prompt engineering for code: writing clear, specific prompts that get better results
• AI for text: summarization, sentiment analysis, translation
• Image generation API basics (DALL-E / Stable Diffusion)
• Comparing AI models: Claude Sonnet (best for code), GPT-4, Gemini, which to use when
• AI ethics for teen developers, bias, transparency, and responsibility

Topics Covered

• Lovable, the AI app builder that generates clean React code from conversation
• Building a complete web app with Lovable: describe features → AI codes → you iterate
• Bolt.new deep dive, building and deploying apps entirely through AI prompts
• When to vibe code vs. hand code, understanding the trade-offs and limitations
• Introduction to Flask, Python for the web (understanding what AI builds for you)
• Setting up a Flask app, routes and views
• Connecting your AI Python code to a web frontend
• Building a simple AI web app, Python backend + HTML frontend
• Environment variables and .env files, keeping API keys safe
• Introduction to databases: SQLite with Python basics
• Deploying your apps: Replit, Vercel, Netlify, Render (free tier)
• Security basics: why vibe-coded apps need human review before going live
• Planning your capstone project, choosing between vibe-coded or hand-coded

Topics Covered

• What is a developer portfolio and why every teen dev needs one
• Structuring your portfolio: projects, about, skills, contact
• Writing project descriptions that impress, STAR format
• README files on GitHub, making your repos presentable
• Vibe coding your portfolio website: use v0.dev or Lovable to build a stunning portfolio in minutes
• Picking your best 4 projects for the portfolio (mix of hand-coded and vibe-coded)
• GitHub profile optimization, pins, README profile, contributions graph
• LinkedIn basics for teen developers, setting up a professional profile
• Personal branding, your developer identity and niche
• Technical interview basics, what companies actually ask
• Writing a tech resume for internships and college applications
• Open source contribution basics, finding good first issues
• Hackathons: how to find, join, and win at hackathons

Topics Covered

• Final capstone project polish, code review and bug fixes
• Code documentation best practices
• Recording a 3-minute project demo video
• The art of the technical demo, explaining code to non-coders
• Preparing for Q&A, answering questions about your code
• The vibe coding toolkit recap, Cursor, Copilot, v0.dev, Bolt.new, Lovable: when to use each
• Introduction to competitive coding: HackerRank, LeetCode, CodeChef
• What's next?, College applications with a portfolio, internships, freelancing
• Vibe Coding for College preview, MERN, DSA, Machine Learning, Claude Code, Windsurf, and more
• Networking with the Modern Age Coders alumni community
• Receiving the Vibe Coder Teens Certification
• Graduation ceremony and class showcase