Welcome to Lesson “What Is Vibe Coding?”

You’ll discover how coding can feel like a party instead of a headache.

We contrast classic “cook-a-soup” coding with instant-noodle-plus-fun coding.

Watch a live demo in VS Code: crossing out classic_soup() and typing instant_noodle_plus_fun().

Learn about the fun “toppings” you can add: AI editors, no-code builders, scroll animations, and cute cats.

See a split-screen of Cursor IDE autocompleting console.log and v0.dev generating UI from a prompt.

We’ll scaffold a Vite project in seconds: npm create vite@latest --timer Vibe Scripts.

Understand the core philosophy: creativity, playfulness, and rapid building.

Vibe Coding leverages AI tools like Cursor, Windsurf, Lovable, Bolt.new, and v0.dev.

Focus on quick iteration—build something cool fast, then refine later.

It’s less about perfect architecture, more about getting working apps and automations running.

Watch a Windsurf demo: adding data-ws="flip" makes cards flip on scroll instantly.

See examples: build a Chrome plugin in one afternoon to hide images or translate text.

Create mobile apps in minutes using Firebase plus AI-generated code.

Develop fun JavaScript, Unity, or Python games without boilerplate headaches.

Automate workflows with n8n or Zapier in just a few clicks.

Experiment with UI ideas using Tailwind, React, or Svelte—AI fills in most code.

Enjoy low-friction hacking: no weeks of setup, only minutes of creative play.

Embrace the low cost of failure: wild ideas are welcome here.

Vibe Coding is accessible—non-programmers can participate thanks to AI assistance.

Drag a file into Glitch, copy the URL, and share your project in seconds.

By the end of this lesson, you’ll understand what makes Vibe Coding unique.

Next up: choosing our first Vibe Coding tool—bring coffee or tea!

Stay tuned, keep the vibe alive, and let’s code like it’s a party.

? In this lesson, we install Cursor IDE—your AI‑powered coding buddy—and run your very first line of code. No stress, no complicated steps.

You’ll learn:

? Where to download Cursor IDE for Windows or Mac.

⚡ How to install it in under a minute (super beginner‑friendly).

? How to log in with GitHub to unlock AI features.

? How to open your first project folder (even empty ones).

⭐ Why Cursor feels like VS Code—but smarter.

? How to get ready for AI‑powered coding in the next lesson.

By the end, Cursor will be installed, ready, and saying “Hello Vibe‑Coder!” back to you.

?‍♂️ In this lesson, we check if Cursor is a true superhero… or just pretending with a cape. We’ll look at what it does amazingly well, where it struggles, and which programming languages it loves most.

You’ll learn:

✅ Top pros of Cursor (speed, AI chat, VS Code extension support).

⚠️ Main cons (internet needed, sometimes wrong, a bit heavy).

❤️ Best languages for Cursor (JavaScript, TypeScript, Python, React, Node.js).

? Languages where it’s good but not magical (C#, Java, Go).

? Languages where it’s not great (COBOL & niche ones).

? How to decide if Cursor is right for your projects.

? When Cursor is a superhero vs ? when it’s just a sidekick.

? Homework: test Cursor in your favorite language.

By the end, you’ll know exactly when to trust Cursor as your AI partner—and when to keep your cape handy.

Description (Udemy Lesson Page):

? Meet your new AI pair‑programmer inside Cursor IDE! In this lesson, we keep coding super chill—AI does the heavy lifting while we just guide it.

You’ll learn:

?️ How to create and run your first JavaScript file.

? How to see your output appear in the terminal (party time!).

? How Autocomplete writes whole lines from just a few letters.

? The magic of Comment = Wish (type a comment, AI makes it real).

? Using the AI Chat panel to add features in plain English.

? How to create things like a Dark Mode toggle instantly.

? Asking Cursor to explain code like you’re 5 (yes, grandma‑friendly).

⚡ Quick review of AI’s 3 superpowers: AutoComplete, Comment‑Wish, Chat.

? Homework: Ask Cursor to create a random joke function.

? Next step: Let AI clean your messy code like a robot vacuum.

By the end, you’ll be writing less, creating more, and smiling at how easy coding can be.

In this lesson, we reveal v0.dev’s secrets—the awesome parts, the not‑so‑awesome parts, and where it really shines.

You’ll learn:

✅ Top pros of v0.dev (speed, beautiful layouts, responsive design).

⚠️ Main cons (messy code, limited backend support, sometimes ignores prompts).

❤️ Best languages & frameworks for v0.dev (React, Next.js, HTML/CSS).

? Languages it’s okay at (Vue, basic JavaScript).

? When v0.dev is a perfect fit (landing pages, UI kits, quick prototypes).

? When v0.dev is not ideal (complex backend or heavy database apps).

? How Creative mode vs Precise mode can change results.

? Homework: test the same project in both modes and compare.

By the end, you’ll know exactly when to choose v0.dev for your projects—and when to grab another tool.

? In this lesson, we jump into v0.dev, the AI tool that turns your ideas into ready‑to‑use websites in seconds—no coding, no stress, just fun.

You’ll learn:

? How to sign up with Google, GitHub, or email.

? How to navigate the v0.dev dashboard.

➕ How to start a New Project in seconds.

✍️ How to describe your website idea in plain English.

? How v0 instantly generates a full website preview.

? How to tweak your site by updating prompts.

? Why it’s as easy as “Login → Describe → Watch AI build.”

? Homework: create a fun first project (pizza cats welcome).

By the end, you’ll have v0.dev set up, running, and making your first AI‑generated site.

In this lesson you will learn step by step how to build a complete mobile race game using React Native and Expo with the help of Cursor IDE, and we will do it in a simple and funny way so you never feel lost, we start by creating a new project and installing all the needed libraries so everything runs smoothly, then we prepare our folder structure and explain why clean code structure makes your life easier, after that we build the splash screen that shows when the game starts and a main menu with buttons like Play, Settings, and Quit, then we go deeper into the game loop where we update the car every frame and keep the game running at 60 frames per second, you will see how we use Zustand to store game data such as position, speed, and laps, then we design the car physics model to move forward, turn left and right, and stop when braking, you will discover how acceleration, friction, and steering angle make a big difference in a racing game, after that we add a track with grass, asphalt, and barriers, and we show how the car reacts differently on each surface, then we code simple collision so the car bounces back if it hits a wall, we continue by creating input controls with two modes: touch zones and joystick, so players can choose their favorite style, then we make a lap system that detects when the car crosses the start line and saves the best lap time using AsyncStorage, after that we build a nice HUD that displays speed, lap number, and best time on the screen while driving, then we design the settings screen to toggle control type and reset lap data, and we save everything to local storage so your choices don’t disappear, finally we add sound effects for engine and buttons to make the game more fun, we polish performance so it works smoothly on real devices, and we end with a clean README guide to help you tune car physics and track design, by the end of this lesson you will have a working racing game on your phone and you will understand how to use React Native for building not only apps but also interactive mobile games in a structured and enjoyable way.

In this lesson you will learn step by step how to build a complete mobile race game using React Native and Expo with the help of Cursor IDE, and we will do it in a simple and funny way so you never feel lost, we start by creating a new project and installing all the needed libraries so everything runs smoothly, then we prepare our folder structure and explain why clean code structure makes your life easier, after that we build the splash screen that shows when the game starts and a main menu with buttons like Play, Settings, and Quit, then we go deeper into the game loop where we update the car every frame and keep the game running at 60 frames per second, you will see how we use Zustand to store game data such as position, speed, and laps, then we design the car physics model to move forward, turn left and right, and stop when braking, you will discover how acceleration, friction, and steering angle make a big difference in a racing game, after that we add a track with grass, asphalt, and barriers, and we show how the car reacts differently on each surface, then we code simple collision so the car bounces back if it hits a wall, we continue by creating input controls with two modes: touch zones and joystick, so players can choose their favorite style, then we make a lap system that detects when the car crosses the start line and saves the best lap time using AsyncStorage, after that we build a nice HUD that displays speed, lap number, and best time on the screen while driving, then we design the settings screen to toggle control type and reset lap data, and we save everything to local storage so your choices don’t disappear, finally we add sound effects for engine and buttons to make the game more fun, we polish performance so it works smoothly on real devices, and we end with a clean README guide to help you tune car physics and track design, by the end of this lesson you will have a working racing game on your phone and you will understand how to use React Native for building not only apps but also interactive mobile games in a structured and enjoyable way.

In this lesson you will learn step by step how to build a complete mobile race game using React Native and Expo with the help of Cursor IDE, and we will do it in a simple and funny way so you never feel lost, we start by creating a new project and installing all the needed libraries so everything runs smoothly, then we prepare our folder structure and explain why clean code structure makes your life easier, after that we build the splash screen that shows when the game starts and a main menu with buttons like Play, Settings, and Quit, then we go deeper into the game loop where we update the car every frame and keep the game running at 60 frames per second, you will see how we use Zustand to store game data such as position, speed, and laps, then we design the car physics model to move forward, turn left and right, and stop when braking, you will discover how acceleration, friction, and steering angle make a big difference in a racing game, after that we add a track with grass, asphalt, and barriers, and we show how the car reacts differently on each surface, then we code simple collision so the car bounces back if it hits a wall, we continue by creating input controls with two modes: touch zones and joystick, so players can choose their favorite style, then we make a lap system that detects when the car crosses the start line and saves the best lap time using AsyncStorage, after that we build a nice HUD that displays speed, lap number, and best time on the screen while driving, then we design the settings screen to toggle control type and reset lap data, and we save everything to local storage so your choices don’t disappear, finally we add sound effects for engine and buttons to make the game more fun, we polish performance so it works smoothly on real devices, and we end with a clean README guide to help you tune car physics and track design, by the end of this lesson you will have a working racing game on your phone and you will understand how to use React Native for building not only apps but also interactive mobile games in a structured and enjoyable way.

In this lesson you will learn step by step how to build a complete mobile race game using React Native and Expo with the help of Cursor IDE, and we will do it in a simple and funny way so you never feel lost, we start by creating a new project and installing all the needed libraries so everything runs smoothly, then we prepare our folder structure and explain why clean code structure makes your life easier, after that we build the splash screen that shows when the game starts and a main menu with buttons like Play, Settings, and Quit, then we go deeper into the game loop where we update the car every frame and keep the game running at 60 frames per second, you will see how we use Zustand to store game data such as position, speed, and laps, then we design the car physics model to move forward, turn left and right, and stop when braking, you will discover how acceleration, friction, and steering angle make a big difference in a racing game, after that we add a track with grass, asphalt, and barriers, and we show how the car reacts differently on each surface, then we code simple collision so the car bounces back if it hits a wall, we continue by creating input controls with two modes: touch zones and joystick, so players can choose their favorite style, then we make a lap system that detects when the car crosses the start line and saves the best lap time using AsyncStorage, after that we build a nice HUD that displays speed, lap number, and best time on the screen while driving, then we design the settings screen to toggle control type and reset lap data, and we save everything to local storage so your choices don’t disappear, finally we add sound effects for engine and buttons to make the game more fun, we polish performance so it works smoothly on real devices, and we end with a clean README guide to help you tune car physics and track design, by the end of this lesson you will have a working racing game on your phone and you will understand how to use React Native for building not only apps but also interactive mobile games in a structured and enjoyable way.

In this lesson you will learn step by step how to build a complete mobile race game using React Native and Expo with the help of Cursor IDE, and we will do it in a simple and funny way so you never feel lost, we start by creating a new project and installing all the needed libraries so everything runs smoothly, then we prepare our folder structure and explain why clean code structure makes your life easier, after that we build the splash screen that shows when the game starts and a main menu with buttons like Play, Settings, and Quit, then we go deeper into the game loop where we update the car every frame and keep the game running at 60 frames per second, you will see how we use Zustand to store game data such as position, speed, and laps, then we design the car physics model to move forward, turn left and right, and stop when braking, you will discover how acceleration, friction, and steering angle make a big difference in a racing game, after that we add a track with grass, asphalt, and barriers, and we show how the car reacts differently on each surface, then we code simple collision so the car bounces back if it hits a wall, we continue by creating input controls with two modes: touch zones and joystick, so players can choose their favorite style, then we make a lap system that detects when the car crosses the start line and saves the best lap time using AsyncStorage, after that we build a nice HUD that displays speed, lap number, and best time on the screen while driving, then we design the settings screen to toggle control type and reset lap data, and we save everything to local storage so your choices don’t disappear, finally we add sound effects for engine and buttons to make the game more fun, we polish performance so it works smoothly on real devices, and we end with a clean README guide to help you tune car physics and track design, by the end of this lesson you will have a working racing game on your phone and you will understand how to use React Native for building not only apps but also interactive mobile games in a structured and enjoyable way.

In this lesson you will learn step by step how to build a complete mobile race game using React Native and Expo with the help of Cursor IDE, and we will do it in a simple and funny way so you never feel lost, we start by creating a new project and installing all the needed libraries so everything runs smoothly, then we prepare our folder structure and explain why clean code structure makes your life easier, after that we build the splash screen that shows when the game starts and a main menu with buttons like Play, Settings, and Quit, then we go deeper into the game loop where we update the car every frame and keep the game running at 60 frames per second, you will see how we use Zustand to store game data such as position, speed, and laps, then we design the car physics model to move forward, turn left and right, and stop when braking, you will discover how acceleration, friction, and steering angle make a big difference in a racing game, after that we add a track with grass, asphalt, and barriers, and we show how the car reacts differently on each surface, then we code simple collision so the car bounces back if it hits a wall, we continue by creating input controls with two modes: touch zones and joystick, so players can choose their favorite style, then we make a lap system that detects when the car crosses the start line and saves the best lap time using AsyncStorage, after that we build a nice HUD that displays speed, lap number, and best time on the screen while driving, then we design the settings screen to toggle control type and reset lap data, and we save everything to local storage so your choices don’t disappear, finally we add sound effects for engine and buttons to make the game more fun, we polish performance so it works smoothly on real devices, and we end with a clean README guide to help you tune car physics and track design, by the end of this lesson you will have a working racing game on your phone and you will understand how to use React Native for building not only apps but also interactive mobile games in a structured and enjoyable way.

In this lesson you will learn step by step how to build a complete mobile race game using React Native and Expo with the help of Cursor IDE, and we will do it in a simple and funny way so you never feel lost, we start by creating a new project and installing all the needed libraries so everything runs smoothly, then we prepare our folder structure and explain why clean code structure makes your life easier, after that we build the splash screen that shows when the game starts and a main menu with buttons like Play, Settings, and Quit, then we go deeper into the game loop where we update the car every frame and keep the game running at 60 frames per second, you will see how we use Zustand to store game data such as position, speed, and laps, then we design the car physics model to move forward, turn left and right, and stop when braking, you will discover how acceleration, friction, and steering angle make a big difference in a racing game, after that we add a track with grass, asphalt, and barriers, and we show how the car reacts differently on each surface, then we code simple collision so the car bounces back if it hits a wall, we continue by creating input controls with two modes: touch zones and joystick, so players can choose their favorite style, then we make a lap system that detects when the car crosses the start line and saves the best lap time using AsyncStorage, after that we build a nice HUD that displays speed, lap number, and best time on the screen while driving, then we design the settings screen to toggle control type and reset lap data, and we save everything to local storage so your choices don’t disappear, finally we add sound effects for engine and buttons to make the game more fun, we polish performance so it works smoothly on real devices, and we end with a clean README guide to help you tune car physics and track design, by the end of this lesson you will have a working racing game on your phone and you will understand how to use React Native for building not only apps but also interactive mobile games in a structured and enjoyable way.

In this lesson, you will learn how to create a fun mobile shooter game step by step using Godot 4.

We will start by setting up the player, adding smooth touch controls, and making the character move across the screen.

You will then learn how to shoot bullets, handle collisions, and destroy enemies with exciting effects.

We will add different types of enemies that spawn randomly to keep the game dynamic and challenging.

Next, we will implement a scoring system, player lives, and a Game Over screen with restart options.

You will also discover how to add powerups like extra life, double shoot, and faster bullets to make the gameplay engaging.

We will polish the game with explosions, star backgrounds, sound effects, and background music.

You will practice adding difficulty levels, faster enemies, and even boss fights to test your skills.

By the end of this lesson, you will have a complete shooter game ready to run on mobile devices.

Most importantly, you will gain the confidence to keep building and expanding your own 2D games in Godot.

In this lesson, you will learn how to create a fun mobile shooter game step by step using Godot 4.

We will start by setting up the player, adding smooth touch controls, and making the character move across the screen.

You will then learn how to shoot bullets, handle collisions, and destroy enemies with exciting effects.

We will add different types of enemies that spawn randomly to keep the game dynamic and challenging.

Next, we will implement a scoring system, player lives, and a Game Over screen with restart options.

You will also discover how to add powerups like extra life, double shoot, and faster bullets to make the gameplay engaging.

We will polish the game with explosions, star backgrounds, sound effects, and background music.

You will practice adding difficulty levels, faster enemies, and even boss fights to test your skills.

By the end of this lesson, you will have a complete shooter game ready to run on mobile devices.

Most importantly, you will gain the confidence to keep building and expanding your own 2D games in Godot.

You will learn in this lesson:

How to design a Fitness Adventure app from scratch using Flutter.

How to create an interactive adventure map that unlocks levels as users complete workouts.

How to track exercises, steps, and progress using Flutter widgets and local storage.

How to implement gamified rewards with points, badges, and achievements.

How to animate avatars and characters that react to user progress.

How to add particle effects, confetti, and animations for achievements.

How to enable interactive challenges and mini-games to motivate users.

How to implement dynamic charts and progress bars for visualizing fitness data.

How to save and sync user progress locally or with Firebase.

How to leverage Vibe Coding features like drag-drop UI, live preview, and animation triggers to build an engaging mobile experience.

You will learn in this lesson:

How to design a gamified habit tracker from scratch.

How to use Vibe Coding drag-and-drop UI to build interactive dashboards.

How to create habit cards that users can reorder and customize.

How to animate a Quest Map to visualize habit progress.

How to implement rewards, badges, and streaks with animations.

How to add mini challenges to make habits fun and engaging.

How to provide real-time feedback with particle effects and sound.

How to bind user data to Firebase or local storage for persistence.

How to customize avatars, colors, and themes for a personalized experience.

How to test, iterate, and deploy your interactive desktop/mobile app efficiently.

You will learn in this lesson:

How to design a Virtual Aquarium from scratch using Flutter.

How to create animated fish that swim along dynamic paths.

How to implement interactive controls: feeding fish, tapping, and customizing the aquarium.

How to add bubbles and water ripple particle effects for realism.

How to animate plants, fish, and decorations for a lively aquarium scene.

How to implement sound effects for water, bubbles, and fish interactions.

How to allow user customization: backgrounds, fish types, colors, and aquarium decorations.

How to save user data locally so the aquarium state persists across sessions.

How to leverage Flutter widgets, animations, and Vibe Coding drag-drop features for rapid prototyping.

How to test, refine, and launch your interactive Virtual Aquarium app efficiently.

You will learn in this lesson how to build the MVP of “Ink-and-Paper Adventure” using Phaser.js and HTML5 Canvas.

We’ll start by scaffolding a full-window Phaser 3 project with basic gravity and a movable hero square.

Next, you’ll add an overlaid Canvas layer to capture freehand mouse strokes as drawn platforms.

You’ll implement stroke smoothing (Ramer–Douglas–Peucker) to turn rough lines into clean polylines.

Then we’ll convert those smoothed polylines into Phaser static physics bodies so the hero can land on them.

We’ll also create a simple “Clear” button to erase all drawn platforms and reset the scene.

All code will be organized into four minimal JS modules: index.html, game.js, draw.js, and platform.js.

You’ll see how Cursor IDE’s AI prompts can bootstrap drawing tools, smoothing logic, and collision setup instantly.

By the end, you’ll have a playable prototype where you literally draw the world under your hero’s feet.

Get ready to sketch, code, and play—let’s bring your hand-drawn adventure to life!

You will learn how to load and tile a seamless paper-grain texture as a Fullscreen background, instantly giving your game a warm, sketchbook feel.

You will learn how to replace the placeholder square with a 32×32 hand-drawn hero sprite and create simple run/idle animations that bring your character to life.

You will learn how to render each smoothed stroke using a “brush” texture on an offscreen canvas, turning plain lines into authentic ink-stroke platforms.

You will learn how to add two semi-transparent ink-splash images as parallax layers that scroll at different speeds, adding depth and dynamism to your world.

You will learn how to emit ink-droplet particles along newly drawn lines and when the hero lands, creating delightful bursts of animated detail.

You will learn how to overlay a soft vignette using a radial gradient or SVG filter in CSS to focus the player’s attention and enhance the hand-drawn atmosphere.

You will learn how to organize all visual assets into a clear /assets folder—paper.png, hero.png, brush.png, splash1.png, splash2.png, and ink-drop.png—so your project stays tidy and extensible.

You will learn in this lesson:

How to set up a complete Electron.js project from scratch with React + Vite.

Creating a beautiful, responsive To-Do list UI with TailwindCSS.

Adding, editing, completing, and deleting tasks with smooth animations.

Persisting tasks locally using electron-store so nothing is lost between sessions.

Implementing search and filters for Active, Completed, Today, and Overdue tasks.

Using drag-and-drop to reorder tasks and save their order automatically.

Adding a system tray with quick-add functionality.

Toggling between light, dark, and system themes.

Securing IPC communication between main and renderer processes.

Packaging your app for Windows, macOS, and Linux using electron-builder.

You will learn in this lesson how to make a Solar System that moves like the real one.

You will learn how to use Three.js to draw planets, moons, and rings in 3D.

You will learn how to add the Sun with light that makes planets shine.

You will learn how to use real NASA data for planet sizes and orbits.

You will learn how to make planets spin and move around the Sun.

You will learn how to add Earth’s Moon and make it orbit our planet.

You will learn how to add Jupiter’s four big moons and watch them dance.

You will learn how to build Saturn’s rings so they tilt beautifully.

You will learn how to scale planets so tiny Mercury is still visible.

You will learn how to make orbit lines to show the paths of planets.

You will learn how to make a star background for space feeling.

You will learn how to use sliders to speed up or slow down time.

You will learn how to turn orbits, labels, moons, and rings on and off.

You will learn how to click planets and see their real details.

You will learn how to create smooth camera controls for zoom and pan.

You will learn how to group objects so moons move with their planet.

You will learn how to manage all updates in one animation loop.

You will learn how to keep performance high even with many objects.

You will learn how to keep the project organized with clean folders.

You will learn how to connect Electron so it works as a desktop app.

You will learn how to run it in dev mode and see changes live.

You will learn how to build the app for Windows, Mac, and Linux.

You will learn how to use the code for games or science projects.

You will learn how to impress friends with your 3D space skills.

You will learn how to explore space… without leaving your chair!

You will learn in this lesson to build a kid-friendly “Mini Med Lab” desktop app that teaches body systems with playful 3D.

Design a big-button, icon-first interface with simple language and optional narration for ages 6–12.

Render friendly 3D organs (heart, lungs, brain, bones, muscles, digestive) with gentle animations like beating and breathing.

Add interactive pins and short fact cards that can be read aloud in English and Arabic.

Create mini-games—label match, build-a-body puzzles, and healthy-habits choices—with cheerful feedback.

Implement a stickers-and-badges reward book that saves progress locally with no personal data.

Enable accessibility features: text size controls, color-blind-safe palette, and narration toggle.

Support offline-first operation using PySide6 for UI, PyVista for 3D, and pyttsx3 for TTS.

Organize content via JSON files for bilingual text, quizzes, and mesh presets to keep code clean.

Package and ship the app with a clear “education only” disclaimer and guidance for parents and teachers.

In this lesson, we build No Faces, Please, a privacy-focused Chrome & Firefox extension that automatically blurs human faces in images.

We scaffold separate chrome/ and firefox/ folders, each using Manifest V3 and tailored storage APIs.

Watch how we integrate a lightweight face‐detection library to scan <img> tags and CSS background images.

Learn to apply a smooth Gaussian blur via canvas overlays and CSS filters on detected face regions.

Explore the popup UI featuring a toggle switch to enable/disable face‐blurring and a slider to adjust blur strength.

See how we persist user settings across sessions with chrome.storage.sync and browser.storage.local.

Experience real‐time, on‐the‐fly blurring without page reloads, and graceful error handling for model load failures.

Understand the browser‐specific tweaks needed for Chrome vs. Firefox manifests and APIs.

Test the extension live on popular websites to observe seamless face anonymization in action.

By the end, you’ll have a fully functional, publish-ready No Faces, Please extension to protect user privacy.

In this quick lesson, you’ll learn how to build a “Hide All Images” Chrome Extension from scratch using Manifest V3. We’ll walk through:

Setting up manifest.json with the right permissions and MV3 boilerplate.

Designing a minimal popup (popup.html + CSS) with a toggle button.

Handling user input in popup.js, saving the toggle state with chrome.storage.sync.

Injecting and removing CSS in content.js to hide <img> tags and all background images on any site.

Connecting your popup and content script using the chrome.scripting API.

Testing in Developer Mode and ensuring persistence across browser sessions.

By the end of this video, you’ll have a fully functional, publish-ready extension that lets anyone quickly hide or show all images with a single click.

Learn how to build two complete browser extensions — one for Chrome, one for Firefox — using just one smart AI prompt!

In this lesson, we create a "Tab Timer" that automatically closes tabs after a set time.

You’ll discover how to write a unified prompt that outputs two fully functional projects.

We’ll cover Manifest V3, tab management, alarms, storage, and cross-browser differences.

You’ll see how to structure your folders for clean, separate builds.

No need to copy-paste code between versions — AI handles both!

This is a hands-on, practical lesson with real-world results.

Perfect for web developers, automation fans, and productivity tool makers.

By the end, you’ll have two ready-to-use extensions and a powerful AI workflow.

Let’s build smarter with prompts — the future of coding starts here!

In this quick lesson, you’ll learn how to build “? Cinemode” — a Chrome Extension that turns any video page into a distraction-free viewing experience. We’ll cover:

Manifest V3 Setup

– Craft manifest.json with the right permissions and service worker boilerplate.

Video Detection & Overlay

– In content.js, automatically detect <video> elements on sites like YouTube, Vimeo, Twitch, and Facebook Video.

– Inject a semi-transparent dark overlay to dim everything except the video player.

Floating Toggle Button

– Build a draggable “? Cinemode” button in styles.css + content.js.

– Keep it on top of the overlay and let users enable/disable Cinemode with one click.

State Persistence

– Store the button’s last position and enabled/disabled state in chrome.storage.sync so it “just works” across sessions.

Lightweight & Modular Code

– Keep your scripts minimal and performant, without needing page reloads.

Testing & Deployment

– Load as an unpacked extension, test on multiple video sites, and debug using Chrome DevTools.

By the end of this video, you’ll have a fully functional, publish-ready Cinemode extension that dimly focuses on your videos—and the skills to build any custom UI overlay.

In this quick lesson, you’ll learn how to build a “Google Docs Translator” add-on from scratch using Google Apps Script. We’ll cover:

Custom Menu

– Add a “Translator” entry to the Google Docs Extensions menu.

Sidebar UI

– Create Sidebar.html with a language dropdown and “Translate” & “Replace” buttons.

Server-Side Logic

– Write Code.gs to fetch the selected text, call the Google Translate API, and return results.

Client-Side Scripting

– Implement Sidebar.js to handle user actions, show translations, and replace text.

State Management

– Save the user’s language choice for the session so it persists across translations.

Apps Script Manifest

– Configure appsscript.json for a Docs add-on with the correct scopes and triggers.

Testing & Deployment

– Load as a test add-on, authorize scopes, and verify it works on any selected text.

By the end, you’ll have a publish-ready add-on that translates and replaces text directly in your Docs with a clean, minimal interface.

You will learn in this lesson:

How to build a modern WPF desktop app with a clean Metronic-style interface.

Setting up MVVM architecture for maintainable, scalable code.

Connecting your app to a local Ollama server for offline AI chat.

Importing and parsing PDFs, DOCX, and TXT files into your knowledge base.

Creating embeddings and storing them in a local SQLite vector database.

Implementing a RAG (Retrieval-Augmented Generation) pipeline for smarter answers.

Designing a chat bubble UI with streaming AI responses and markdown rendering.

Adding semantic and keyword search with quick “open in source” actions.

Saving settings, themes, and conversation history for a personalized experience.

You will learn in this lesson:

How to install and configure Ollama for running large language models locally.

Setting up Ollama inside Docker for portability and easy updates.

Enabling GPU acceleration with NVIDIA or AMD for faster inference.

Creating persistent storage so your downloaded models aren’t lost.

Pulling and managing AI models like llama3.1 and nomic-embed-text.

Testing Ollama endpoints with curl for chat and embeddings.

Connecting Open WebUI for a browser-based AI interface.

Securing your local AI server with proper network and firewall settings.

Using systemd services for auto-start on boot without Docker.

Preparing your server for integration with WPF or Electron desktop apps.

You will learn in this lesson:

How to install and configure Ollama for running large language models locally.

Setting up Ollama inside Docker for portability and easy updates.

Enabling GPU acceleration with NVIDIA or AMD for faster inference.

Creating persistent storage so your downloaded models aren’t lost.

Pulling and managing AI models like llama3.1 and nomic-embed-text.

Testing Ollama endpoints with curl for chat and embeddings.

Connecting Open WebUI for a browser-based AI interface.

Securing your local AI server with proper network and firewall settings.

Using systemd services for auto-start on boot without Docker.

Preparing your server for integration with WPF or Electron desktop apps.

In this lesson, we will discover Model Context Protocol (MCP), the secret sauce that gives your AI memory ?. Without MCP, your agents forget faster than you forget Wi-Fi passwords ?. With MCP, they remember rules, instructions, and styles, so your projects stay consistent. We’ll explain MCP in very simple terms: think of it as a rulebook your AI always carries in its pocket ?. You’ll see how it connects apps, games, and agents, making them follow the same guidelines. Examples will include button colors ?, game scores ?, and bug reports ?. We’ll also laugh a little, because without MCP your AI acts like a parrot repeating nonsense ?. By the end, you’ll understand why MCP is important, how it helps vibe coders, and how it will make your life easier. Get ready for the first step into MCP land ?.

In this lesson, we will set up MCP inside Cursor IDE so your AI can actually use memory and rules ?. We’ll walk through where to find the MCP tab, how to add a configuration file, and how to load it. Don’t worry, it’s easier than cooking noodles ?. We’ll explain the structure of the MCP file, where to add your rules, and how to save them in the right folder. You’ll see a real example where we tell MCP: “Always use blue buttons” and then test it in Cursor. By the end, you’ll have MCP up and running inside your IDE. No scary commands, no rocket science ?, just step-by-step setup with a few jokes along the way ?.

In this lesson, we will write our first MCP rules ✍️. Rules are like sticky notes for your AI: “Do this, don’t do that.” We’ll start simple, like forcing your AI to always name variables in camelCase ? or making sure it never forgets to add comments ?. Then we’ll test them live in Cursor to see how the AI follows instructions. You’ll also see what happens if rules are vague (spoiler: AI gets confused ?). By the end, you will know how to write, save, and apply your own MCP rules to projects. Think of this as teaching your AI good manners ?.

In this lesson, we combine MCP with Agents ?‍?‍?. Alone, agents can argue, forget, or ignore you ?. With MCP, they have a shared rulebook and work like a real team. We’ll show an example where DeveloperAgent codes, TesterAgent reviews, and DesignerAgent styles — all following MCP rules. Without MCP, they fight over button colors ?. With MCP, everyone agrees on “blue only.” You’ll see the difference in live demos and understand why MCP is the “boss” ? of your AI team. By the end, you’ll know how to connect MCP to multiple agents for smooth teamwork.

In this lesson, we apply MCP to apps built in Cursor IDE ?. We’ll build a To-Do app and tell MCP the rules: always add delete button, always log tasks in console, always use blue theme. Then we’ll see how DeveloperAgent follows these rules automatically. Without MCP, we’d repeat instructions 10 times. With MCP, we write once, and it remembers forever ?. By the end, you’ll see how MCP makes app coding faster, cleaner, and less stressful. No more arguing with your AI about missing features ?.

In this lesson, we use MCP in games ?. Imagine coding a car race game: MCP makes sure rules like “3 lanes only,” “game ends at crash,” and “track is always gray” are followed. Without MCP, your AI might add 200 lanes or forget the finish line ?. We’ll show how to add rules in MCP, connect them to your game code, and run tests. By the end, you’ll see that MCP is like a referee ? keeping your game fair and consistent.

In this lesson, we apply MCP to apps built in Cursor IDE ?. We’ll build a To-Do app and tell MCP the rules: always add delete button, always log tasks in console, always use blue theme. Then we’ll see how DeveloperAgent follows these rules automatically. Without MCP, we’d repeat instructions 10 times. With MCP, we write once, and it remembers forever ?. By the end, you’ll see how MCP makes app coding faster, cleaner, and less stressful. No more arguing with your AI about missing features ?.

In this lesson, we go beyond simple rules and write advanced MCP logic ?. We’ll use structured JSON rules, conditions, and categories. Example: “For Ramadan month, use 5-hour workdays” or “If score > 1000, show fireworks ?.” You’ll learn how to organize rules into sections for style, features, and testing. We’ll also explain best practices so MCP doesn’t get overloaded. By the end, you’ll write professional-level MCP configs that handle real business cases.

In this lesson, we combine MCP with Agents ?‍?‍?. Alone, agents can argue, forget, or ignore you ?. With MCP, they have a shared rulebook and work like a real team. We’ll show an example where DeveloperAgent codes, TesterAgent reviews, and DesignerAgent styles — all following MCP rules. Without MCP, they fight over button colors ?. With MCP, everyone agrees on “blue only.” You’ll see the difference in live demos and understand why MCP is the “boss” ? of your AI team. By the end, you’ll know how to connect MCP to multiple agents for smooth teamwork.