Full Stack Web Development

Learn complete end-to-end web development from HTML to deployment of websites, interacting with databases, servers, and much more. In this course,e you will learn HTML, CSS, JavaScript, Bootstrap, React.js, Node.js, Express.js, MySQL, deployment, and much more. The course is designed to help students learn while doing.
 

Course Structure 

Lesson 1:  What is a Website?

• Understanding the browser and the web.

Lesson 2: Meet HTML

• What’s inside a webpage.

Lesson 3: Tags and Elements

• Write your first <h1> and <p>.

Lesson 4: Formatting Text

Bold, italics, line breaks.

Lesson 5:   Adding Images

• Put pictures on a webpage.

Lesson 6: Creating Links

• Make text or images clickable

Lesson 7: Lists in HTML

• Shopping lists and to-do lists.

Lesson 8: Tables for Beginners

• Display simple data.

Lesson 9:  Forms Intro

• Create a contact form.

Lesson 10: Basic Input Types

• Name, email, and message.

Lesson 11:  Embedding YouTube or Maps

• Add fun things to pages.

Lesson 12: Simple Web Page Structure

• Header, footer, main content.

Lesson 13:  Saving Your Files

• File extensions and folder structure.

Lesson 14: HTML Playground

• Try combining everything so far.

Lesson 15: Mini Project: My Pet Page

• Add text, images, and links.

Lesson 16: Accessibility Basics

• Alt text and headings matter.

Lesson 17:  What are Attributes?

• Add color, size, and links with attributes.

Lesson 18: What is a Web Host?

• Where do websites live?

Lesson 19: Creating Multi-page Websites

• Link several pages.

Lesson 20:  Mini Project: My Hobbies Website

• Create a site with 3 pages.

Lesson 21: Clean Code Tips

• Clean Code Tips

Lesson 22: Review: HTML Game

• Match tags with purpose.

Lesson 23: Practice Day

• Rebuild a webpage with help.

Lesson 24: Practice Day

• Try on your own with hints.

Lesson 25: Quiz + HTML Certificate Day

Lesson 26:  What is CSS

• Colors, styles, magic!

Lesson 27:  Inline vs Internal CSS

• Ways to apply styles.

Lesson 28:  Color and Background

• Add life to your page.

Lesson 29: Fonts and Text Styles

• Change font family and size.

Lesson 30: Borders and Padding

• Make boxes look good.

Lesson 31: Margin and Spacing

• Add breathing room.

Lesson 32: Styling Links and Buttons

• Hover effects.

Lesson 33: Styling Images

• Round corners and borders.

Lesson 34: Class and ID Selectors

• Reuse and target styles.

Lesson 35: Mini Project: Styled Pet Page

• Add CSS to your pet page.

Lesson 36: Responsive Basics

• What happens on phones?

Lesson 37: Media Queries (Simple)

• Change style on smaller screens.

Lesson 38: CSS Layout with Flexbox

• Put items side by side.

Lesson 39: Box Model Recap

• Understand how space works.

Lesson 40:  Mini Project: About Me Page

• With color and layout.

Lesson 41: Gradients and Shadows

• Make it fancy!

Lesson 42: CSS Variables (Optional)

• A fun peek at custom colors.

Lesson 43: Simple Animations

• Hover glow, fade in.

Lesson 44: Practice Styling a Blog

• With the given HTML.

Lesson 45: Practice: Re-style a Hobbies Page.

Lesson 46: Design Tips for Beginners

• Colors, fonts, space.

Lesson 47: Mini Challenge

• Make a fake homepage design.

Lesson 48: Review

• CSS Treasure Hunt

Lesson 49:  Project: Styled Multi-page Site (Portfolio)

Lesson 50: CSS Mastery Quiz + Certificate 🎨

Lesson 51: What is JavaScript?

• Make the web talk.

Lesson 52: Your First Script

• Alert, console log.

Lesson 53: Variables

• Store names and numbers.

Lesson 54: Buttons and Clicks

• Make a button do something.

Lesson 55: Changing Text

• Update page content with JS.

Lesson 56: Conditions

• If this, then that.

Lesson 57: Making Things Appear or Hide

• Click to show/hide.

Lesson 58: Simple Calculator

• Add two numbers.

Lesson 59:  Events

• Click, hover, input.

Lesson 60: Mini Project: Interactive Story

• Click to reveal the next line.

Lesson 61: Arrays

• Store a list of things.

Lesson 62: Loops

• Do something many times.

Lesson 63: DOM Basics

• JavaScript meets HTML

Lesson 64: Color Changer

• Press button, background changes!

Lesson 65: Simple Form Validation

• Check if the name is typed.

Lesson 66: Project: Interactive Quiz

• With 3 questions.

Lesson 67: Recap Game

• Fix broken JS scripts.

Lesson 68: Review + JS Certificate 

Lesson 69: Extra Practice: Rebuild To-Do with hints.

Lesson 70: Project

• Build Your First Interactive Site (with help).

Lesson 71: What is Bootstrap?

• Quick designs with ready-made styles.

Lesson 72: Adding Bootstrap to Your Site

• Easy setup.

Lesson 73: Buttons, Cards, and Alerts

• Use components.

Lesson 74: Grid Layout

• Simple responsive structure.

Lesson 75: Navbar and Menus

• Add a menu bar.

Lesson 76: Forms and Inputs

• Make prettier forms.

Lesson 77: Project: Bootstrap Portfolio

• Rebuild the earlier project with Bootstrap.

Lesson 78: Responsive Testing

• Make it mobile friendly.

Lesson 79: Mini Challenge

• Turn a boring site beautiful.

Lesson 80: Review + Bootstrap Badge 

Lesson 81:   What is React?

• Reusable pieces of UI.

Lesson 82: Setting up React App

•  Using tools like Vite or CRA.

Lesson 83:  Writing JSX

• Looks like HTML, but it's JS.

Lesson 84: Components

• Divide the page into parts.

Lesson 85: Props

• Pass information to components.

Lesson 86: useState

• Remember stuff in your component.

Lesson 87: Handling Input

• Controlled components.

Lesson 88: Making Buttons Work

• Click events in React.

Lesson 89: Simple Todo App

• A list you can add to.

Lesson 90: Conditional Display

• Show messages based on state.

Lesson 91: Lists in React

•  Loop and show many things.

Lesson 92: useEffect

• Run code when page loads.

Lesson 93: Simple Routing

• Navigate between pages.

Lesson 94: React CSS

• Add styles to components.

Lesson 95: Mini Project: Flashcard App

Lesson 96: Review Day: React Games

Lesson 97: Fix the App: Debugging Challenge

Lesson 98: Build a Profile Page in React

Lesson 99: Wrap-up Project: My React Website

Lesson 100: Quiz + React Newbie Badge 🧠

Lesson 101: What is Backend

• Front vs backend explained with analogies.

Lesson 102: What is Node.js?

• Run JavaScript outside the browser.

Lesson 103: Install Node and Run Your First Script

Lesson 104: What is Express?

• The tiny web server.

Lesson 105: Building a Hello World Server

Lesson 106: Create Routes

• Make different pages.

Lesson 107: Intro to Databases

• What is MySQL?

Lesson 108: Storing Data (Theory)

• How websites remember info.

Lesson 109:  Saving Form Data (Mock)

• Frontend form to pretend backend.

Lesson 110: Real Connection to MySQL (with prepared setup)

Lesson 111: Making a Simple API

• Get and post mock data.

Lesson 112: Final Project Prep: Idea Brainstorming

Lesson 113: Connecting Frontend to Backend

• React fetch example

Lesson 114: Practice: Post a message, read a message

Lesson 115: Final Quiz + Backend Certificate

Lesson 116: Project Planning

• Choose what to build

Lesson 117: Day 1 – Design and page setup

Lesson 118: Day 2 – Add interactivity and data

Lesson 119: Day 3 – Polish and Test

Lesson 120: Presentation Day – Show off your project