Live online Web Development classes for kids

Class 1: Joke Generator Website  – You build a fun page where clicking a colorful button instantly shows a random silly joke. It feels like having your own tiny comedian trapped inside a webpage.
concepts:
HTML – buttons, text blocks
CSS – button styling, colors, spacing
JavaScript – onClick events, arrays, random selection
Bootstrap – button classes, spacing utilities, typography

Class 2: Event Reminder – We’ll create a page where you can pick a background color for different events to the reminders, making it easy to organize your schedule visually. This teaches color selection and dynamic updates while creating a useful tool for daily life.
concepts:
HTML – input types (color), divs
CSS – backgrounds, transitions
JavaScript – event listeners, DOM manipulation
Bootstrap – container layout, form controls, responsive spacing

Class 3: Flashcard Flip Quiz – Create digital study flashcards that flip with animation when clicked and reveal answers on the back for each of the question of your quiz.
concepts:
HTML – card structure, semantic layout
CSS – 3D transforms, transitions, positioning
JavaScript – toggle classes, click events
Bootstrap – card components, grid system, utility classes

Class 4: Emoji Mood Switcher – Make a cute emoji changes its expression (happy/sad/cool/sleepy) every time you click mood buttons.
concepts:
HTML – images/icons, buttons
CSS – styling, font sizes, layout
JavaScript – conditional rendering, dynamic image/text changes
Bootstrap – button groups, icons, layout utilities

Class 5: Interactive Story Path – Build a short story where students choose buttons like “Go into the cave” or “Run away,” and the story instantly changes its narrative based on the choice.
concepts:
HTML – paragraphs, buttons, container divs
CSS – themes, spacing
JavaScript – conditions (if/else), dynamic text replacement
Bootstrap – containers, responsive layout, styled buttons

Class 6: Animated Loading Screen – Create a cool loading animation (spinners, pulsing dots, bouncing shapes) that appears before showing the main content of your personal profile.
concepts:
HTML – loading container, content areas
CSS – keyframe animations, transitions
JavaScript – timers, hide/show elements
Bootstrap – spinners, display utilities, flex centering

Class 7: Secret Message Encoder – Make a spy-style tool where you type a message and the page “encodes” it into funny symbols or scrambled letters.
concepts:
HTML – textarea, buttons
CSS – fonts, layout, boxes
JavaScript – string manipulation, loops
Bootstrap – forms, text utilities, styled containers

Class 8: Digital Dice Roller – Roll a dice with a button and animate the result popping onto the screen like a mini board-game tool.
concepts:
HTML – images/numbers, buttons
CSS – animations, shadows
JavaScript – random numbers, event handling
Bootstrap – button styles, grid for dice layout, cards

Class 9: To-Do List – We’ll build a simple to-do list where you can add tasks, mark them as complete, and remove them when done.
concepts:
HTML – lists, input fields, buttons
CSS – toggling colors, hover effects
JavaScript – array updates, click events, DOM manipulation
Bootstrap – list styling, buttons, badges

Class 10: Weather Feeling Dashboard – A fun dashboard where choosing a weather type (sunny, rainy, snowy) changes the background, icons, and mood statements.
concepts:
HTML – buttons, images, content blocks
CSS – gradients, background images
JavaScript – DOM updates, object mapping
Bootstrap – cards, grid layout, icon support

Class 11: Grocery Shopping List – We’ll create an interactive grocery list where you can add items you need, mark items as bought, and remove them when finished.
concepts:
HTML – lists, input fields, buttons
CSS – toggling colors, hover effects
JavaScript – array updates, click events, DOM manipulation
Bootstrap – list styling, buttons, badges

Class 12: Mini Photo Carousel – You create a sliding gallery where clicking arrows moves photos left and right smoothly.
concepts:
HTML – image containers, arrows
CSS – positioning, overflow hidden, smooth transitions
JavaScript – index tracking, timers or button navigation
Bootstrap – carousel component, responsive images

Class 13: Animal Sounds Board – We’ll create a fun page with buttons that play different animal sounds (cat, dog, cow) when clicked.
concepts:
HTML – audio tag, buttons
CSS – button styles, layout grid
JavaScript – play(), audio events
Bootstrap – grid system, button styles, spacing

Class 14: Virtual Pet Buddy – A cute on-screen pet whose mood changes based on buttons like “Feed Me,” “Play,” or “Sleep,” and the animations respond instantly.
concepts:
HTML – images, buttons, text
CSS – animations, character styling
JavaScript – state changes, variables, conditions
Bootstrap – card layout, responsive grids, styled buttons

Class 15: Reaction Time Test – A mini game where a shape appears in random places on the screen and the user must click on it as fast as possible before it vasishes, then JavaScript shows their reaction score.
concepts:
HTML – containers, buttons
CSS – random colors, animations
JavaScript – timers (setTimeout), events, math calculations
Bootstrap – layout containers, typography, button styling

Class 16: Smart Shopping List – Build a mini smart app that lets students add items, auto-sort them, highlight important ones, and save them temporarily using browser memory.
concepts:
HTML – forms, lists, inputs
CSS – responsive layout, flexbox, clean UI styling
JavaScript – arrays, objects, localStorage, DOM events
Bootstrap – forms, cards, list groups, responsive layout utilities