"Most people learn web development backwards - tools first, understanding later."
"Frameworks change. Browsers don't."
| Week | Problem | You'll Say |
|---|---|---|
| Week 3 | CSS doesn't work | "Why won't this center?" |
| Week 5 | JavaScript confusing | "Why is my element null?" |
| Week 8 | Node.js makes no sense | "What is a request object?" |
| Interview | "How does a website load?" | Silence. |
Site crashed during biggest sale. Developers didn't understand HTTP connections at scale.
Served 900 million users with 55 engineers. Every engineer deeply understood network fundamentals.
"Imagine building a house. You're excited about the kitchen, the paint colors, the furniture."
"But if the foundation cracks, nothing else matters."
"HTML is your foundation. Get it wrong, and everything built on top wobbles."
Internet: Network of connected computers (infrastructure)
World Wide Web: Websites running on the internet (a service)
"The internet is like roads. The web is like cars. Roads existed before cars."
Email is 20 years older than the Web!
| Service | Uses Internet? | Is it "The Web"? |
|---|---|---|
| Gmail in browser | Yes | Yes |
| Gmail app | Yes | No (uses APIs) |
| Yes | No | |
| Netflix in browser | Yes | Yes |
| Netflix app | Yes | No (mostly) |
| PUBG/Online games | Yes | No |
| UPI Payments (GPay) | Yes | No |
Key distinction: The web specifically means browser + server + HTTP.
Computerphile - Watch 0:00 to 3:20
This applies to ALL websites - simple or complex.
| Restaurant | Web Equivalent |
|---|---|
| Customer | Browser (Client) |
| Menu card | Frontend/UI |
| Waiter | HTTP Protocol |
| Order slip | HTTP Request |
| Kitchen | Server |
| Chef | Backend code |
| Recipe book | Database |
| Prepared dish | HTTP Response |
"The server has no memory of previous requests."
Each request is independent. This is why:
Cookies and sessions are mechanisms to simulate memory!
Your app sends a request every few seconds: "Where is my order?" Server responds. Repeat.
1000 people, 1000 separate requests. First come, first served. Server doesn't know you've been waiting!
"In interviews, I ask 'What happens when you type a URL?' - 90% of candidates can't answer properly."
The browser doesn't know what google.com means. Computers only understand IP addresses (like 142.250.192.46).
"Have I been here before?" If yes and cache is fresh, skip ahead. This is why sites load faster on second visit.
DNS = Internet's phonebook. Browser asks: "What is the IP for google.com?"
Goes through: Router → ISP → Root DNS → TLD DNS → Authoritative DNS
Important: DNS only gives addresses. It NEVER gives web pages.
Like calling someone and waiting for them to pick up. For HTTPS: additional encryption handshake.
Browser sends: "GET / HTTP/1.1" → Server processes → Sends back: status + headers + HTML
Status codes: 200 = success, 404 = not found, 500 = server error
Browser reads HTML top to bottom, requests CSS/JS/images, then paints pixels on screen.
[You] → [Browser] → [DNS] → [Server] → [Browser] → [Screen]
cache? IP? request parse
response renderFireship - Watch 0:00 to 4:15
Some sites blocked on Jio work on Airtel. ISPs block at DNS level. Using 8.8.8.8 or 1.1.1.1 bypasses this.
DNS routes you to Mumbai/Chennai servers, not US. That's why streaming starts fast!
URLs are instructions, not just addresses.
https://www.amazon.in/s?k=laptop&ref=nav_bb
└─┬──┘ └────┬─────┘ └┘ └─────────┬───────┘
│ │ │ │
Protocol Domain Path Query String
(how) (where) (what) (extra details)| Part | Example | Meaning |
|---|---|---|
| Protocol | https:// | Encrypted conversation (HTTP = postcard, HTTPS = sealed envelope) |
| Domain | www.amazon.in | Subdomain (www) + main domain (amazon) + TLD (in for India) |
| Path | /s | What page or resource (/s = search) |
| Query | ?k=laptop | Extra info (search keyword = laptop) |
When debugging, you'll read URLs constantly. Seeing ?error=auth_failed in a URL tells you exactly what went wrong.
URL: flipkart.com/search?q=laptop
Change to ?q=phone and see phone results!
URL ending with ?t=120 starts video at 120 seconds.
You can manually edit this!
?utm_source=email&utm_campaign=sale
How companies know you clicked from their email, not Instagram.
Web Dev Simplified - Watch 0:00 to 3:00
Same content for everyone
HTML file exists on disk. Server just reads and sends it.
Content changes based on data/user
HTML is created on-the-fly when you request it.
| Type | Restaurant Equivalent |
|---|---|
| Static | Laminated printed menu - same for everyone |
| Dynamic | Chef's specials based on your preferences and what's available |
Try This: Open amazon.in → Right-click → View Page Source
What you see is plain HTML. The browser has no idea it was generated by Python, Java, or Node.js.
Core Insight: Dynamic websites still send static HTML. The generation happens on the server, but what arrives at your browser is always HTML.
Wikipedia: mostly static, articles don't change per user.
Amazon: your homepage shows YOUR recommendations, YOUR cart.
Prices generated dynamically based on location, time, surge pricing. Someone else might see different prices!
Programming languages have: variables, loops, conditions, functions. HTML has none. This is a strength, not a weakness.
| Technology | Role | Analogy (Human Body) | Analogy (House) |
|---|---|---|---|
| HTML | Structure | Skeleton | Walls, rooms, doors |
| CSS | Appearance | Skin, clothes | Paint, decor |
| JavaScript | Behavior | Muscles, brain | Electricity, plumbing |
"You can have a skeleton without skin (HTML without CSS). It works. It's ugly, but it works."
"You cannot have skin without a skeleton. CSS without HTML is meaningless."
India has 12 million blind people. If your HTML says 'button' vs 'div styled as button', the difference is whether they can use your site.
Google reads your HTML. Proper <h1> vs <div class='big-text'> = better ranking = more users.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first web page.</p>
</body>
</html>| Line | Purpose |
|---|---|
<!DOCTYPE html> | Tells browser: "I'm writing modern HTML5" (without it, browsers enter "quirks mode") |
<html lang="en"> | Root element. lang helps screen readers pronounce correctly |
<head> | Metadata - info ABOUT the page, not ON the page |
<meta charset="UTF-8"> | Supports all languages - Hindi, Chinese, emojis. Without it = garbage characters |
<meta viewport...> | Makes page work on mobile. Without it = zoomed out on phones |
<title> | Text in browser tab + Google search results |
<body> | Everything visible on the page |
A startup lost customer data - Hindi/Tamil names became garbage characters. One line of charset could have prevented it.
Student's portfolio looked great on laptop. Recruiter opened on phone - tiny, unreadable. Lost the opportunity.
<h1>-<h6> | Headings (hierarchy!) |
<p> | Paragraph |
<strong> | Important (bold) |
<em> | Emphasized (italic) |
<div> | Block container |
<span> | Inline container |
<a href=""> | Link |
<img src="" alt=""> | Image |
<ul> <li> | Bullet list |
<ol> <li> | Numbered list |
<table> | Data table |
Wrong: Using <h1> because you want big text
Headings define document outline, like a book's table of contents. Screen readers navigate by headings.
<!-- WRONG -->
<h1>Welcome</h1>
<h4>About Us</h4> <!-- Why skip h2, h3? -->
<!-- RIGHT -->
<h1>Welcome</h1>
<h2>About Us</h2>
<h3>Our Team</h3>Rule: Only one <h1> per page. Don't skip levels.
In the early web, people used <table> for page layouts. Bad practice. Tables are for tabular data only. CSS handles layout now.
New developers put everything in <div> tags. Use semantic tags instead:
<header>, <nav>, <main>, <article>, <section>, <footer>
Why Wikipedia ranks #1: Perfect heading structure. One h1, h2s for sections, h3s for subsections. Google loves clear structure.
Net Ninja - Watch 0:00 to 4:30
Login, Signup, Payments - all forms. Forms collect data and send it to servers.
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<button type="submit">Submit</button>
</form>The for attribute in <label> links to the id of the input for accessibility.
| Form Element | Order Slip Equivalent |
|---|---|
| Form | The order slip itself |
| Input fields | Lines to fill (Starter: ___, Main: ___) |
| Required fields | Items marked with asterisk |
| Submit button | Handing slip to waiter |
| Validation | "Sorry, we're out of paneer" |
A blind man sued Domino's because he couldn't order pizza using a screen reader. Domino's lost.
India has 12+ million blind people, 60+ million with disabilities. Good HTML respects all users.
Ever tried clicking a small OTP box on mobile? If the label is clickable, "Enter OTP" becomes a tap target. Small HTML improvement, big usability gain.
Create an HTML page about yourself with:
Solution: examples/02-profile.html
Create a student registration form with:
Solution: examples/03-registration-form.html
HTML only. No CSS or JavaScript for now.
See intentional errors for learning: examples/07-common-mistakes.html
Next week: HTML Structure, Lists & Tables
Still no CSS. We're building the foundation properly.
"The highest-paid engineers aren't framework experts. They understand how things work underneath."
"If you can rebuild something from scratch, you've actually learned it."
| What you want | Tag |
|---|---|
| Big heading | <h1> |
| Smaller headings | <h2>-<h6> |
| Paragraph | <p> |
| Bold | <strong> |
| Italic | <em> |
| Link | <a href=""> |
| What you want | Tag |
|---|---|
| Image | <img src="" alt=""> |
| Bullet list | <ul><li> |
| Numbered list | <ol><li> |
| Table | <table><tr><td> |
| Line break | <br> |
| Container | <div> |
| Action | Windows/Linux | Mac |
|---|---|---|
| Save file | Ctrl + S | Cmd + S |
| Undo | Ctrl + Z | Cmd + Z |
| Comment line | Ctrl + / | Cmd + / |
| Format document | Shift + Alt + F | Shift + Opt + F |
| HTML boilerplate | Type ! then Tab | |
| Code | Meaning | Restaurant Analogy |
|---|---|---|
| 200 | Success | Order served! |
| 404 | Not Found | "That dish is not on our menu" |
| 500 | Server Error | "Kitchen is on fire!" |
| 403 | Forbidden | "VIP area, membership required" |
Say: "Let me look that up on MDN - this is exactly what professionals do."
Go to: developer.mozilla.org
| Topic | Video | Watch Time |
|---|---|---|
| How the Internet Works | Computerphile | 0:00-3:20 |
| How the Web Works | Fireship | 0:00-4:15 |
| URL Explained | Web Dev Simplified | 0:00-3:00 |
| HTML Tags | Net Ninja | 0:00-4:30 |
| Course | Instructor | Duration |
|---|---|---|
| Internet Fundamentals | Jen Kramer | ~1 hour |
| Introduction to HTML | Jen Kramer | 1h 47m |
| Introduction to CSS | Jen Kramer | 4h 11m |
| Introduction to JavaScript | Brian Holt | 5h 23m |
| Complete Intro to Web Dev v3 | Brian Holt | ~12 hours |