Episode 1 — Fundamentals

Goal: Build a rock-solid mental model of how the internet works before writing a single line of code.

---

What You Will Learn

This episode covers the foundational concepts every developer must understand.
By the end you should be able to explain — in plain English — what happens from the moment you type a URL in your browser to the moment the page appears on your screen.

---

Table of Contents

#	Topic	File / Folder
1.1	How the Internet Works	1.1-How-The-Internet-Works/
1.2	Client-Server Architecture	1.2-Client-Server-Architecture/
1.3	Internet Protocols (TCP & UDP)	1.3-Internet-Protocols/
1.4	Understanding HTTP & HTTPS	1.4-Understanding-HTTP-and-HTTPS/
1.5	Semantic HTML & Browser Rendering	1.5-Semantic-HTML-and-Browser-Rendering/
1.6	CSS Core Fundamentals	1.6-CSS-Core-Fundamentals/
1.7	Working With SASS	1.7-Working-With-SASS/
1.8	CSS Layout Mastery	1.8-CSS-Layout-Mastery/
1.9	CSS Responsive Design	1.9-CSS-Responsive-Design/
1.10	CSS Architecture & Project Structure [legacy]	1.10-CSS-Architecture-and-Project-Structure/
1.11	CSS Frameworks: TailwindCSS & Bootstrap	1.11-CSS-Frameworks-TailwindCSS-and-Bootstrap/
1.12	CSS Animations & Motion Design	1.12-CSS-Animations-and-Motion-Design/
1.13	Introduction to JavaScript	1.13-Introduction-to-JavaScript/
1.14	DOM Manipulation	1.14-DOM-Manipulation/
1.15	Event Handling in JavaScript	1.15-Event-Handling-in-JavaScript/
1.16	Using Browser Functionalities in JavaScript	1.16-Using-Browser-Functionalities-in-JavaScript/
1.17	Additional JavaScript Topics (Episode 1)	1.17-Additional-JavaScript-Topics/

---

Sub-topics inside 1.1

#	Sub-topic	File
1.1.a	History of the Web (Web 1.0 → Web 3.0)	1.1.a-History-of-Web.md
1.1.b	How Computers Communicate With Each Other	1.1.b-How-Computers-Communicate.md
1.1.c	How Computers Send Data All Over the World	1.1.c-How-Data-Travels-Worldwide.md
1.1.d	Domain Names, IP & MAC Addresses, and Routing	1.1.d-Domain-Names-IP-MAC-Routing.md
1.1.e	How ISP and DNS Work Together	1.1.e-ISP-and-DNS.md

Extra files for 1.1

File	Purpose
1.1-Exercise-Questions.md	60 practice questions with hands-on exercises
1.1-Interview-Questions.md	18 interview questions with model answers + quick-fire
1.1-Quick-Revision.md	One-page cheat sheet for all 1.1 topics

Sub-topics inside 1.2

#	Sub-topic	File
1.2.a	What is the Client-Server Model	1.2.a-Client-Server-Model.md
1.2.b	Difference Between Client (Browser) and Server	1.2.b-Client-vs-Server.md
1.2.c	How HTTP Request & Response Cycle Works	1.2.c-HTTP-Request-Response-Cycle.md
1.2.d	What Happens When You Visit a Website	1.2.d-What-Happens-When-You-Visit-Website.md
1.2.e	Front-end vs Back-end	1.2.e-Frontend-vs-Backend.md
1.2.f	Static Websites vs Dynamic Websites	1.2.f-Static-vs-Dynamic-Websites.md
1.2.g	Web Hosting and How It Works	1.2.g-Web-Hosting.md

Extra files for 1.2

File	Purpose
1.2-Exercise-Questions.md	60 practice questions with hands-on exercises
1.2-Interview-Questions.md	18 interview questions with model answers + quick-fire
1.2-Quick-Revision.md	One-page cheat sheet for all 1.2 topics

Sub-topics inside 1.3

#	Sub-topic	File
1.3.a	What is TCP and Why Is It Widely Used	1.3.a-What-is-TCP.md
1.3.b	TCP Three-Way Handshake	1.3.b-TCP-Three-Way-Handshake.md
1.3.c	What is UDP and Why Is It Fast	1.3.c-What-is-UDP.md
1.3.d	How UDP Establishes Communication	1.3.d-How-UDP-Works.md
1.3.e	TCP vs UDP — Comparison	1.3.e-TCP-vs-UDP.md

Extra files for 1.3

File	Purpose
1.3-Exercise-Questions.md	Practice questions + hands-on checks across 1.3.a–e
1.3-Interview-Questions.md	Interview-style Q&A with model answers + quick-fire
1.3-Quick-Revision.md	One-page cheat sheet for TCP/UDP/QUIC

Sub-topics inside 1.4

#	Sub-topic	File
1.4.a	HTTP and Its Versions	1.4.a-HTTP-and-Versions.md
1.4.b	HTTP Status Codes	1.4.b-HTTP-Status-Codes.md
1.4.c	HTTPS vs HTTP	1.4.c-HTTPS-vs-HTTP.md
1.4.d	How HTTPS Secures Connections	1.4.d-How-HTTPS-Secures-Connections.md
1.4.e	SSL / TLS Encryption	1.4.e-SSL-TLS-Encryption.md
1.4.f	Proxy and Reverse Proxy	1.4.f-Proxy-and-Reverse-Proxy.md
1.4.g	VPN — How It Works	1.4.g-VPN-How-It-Works.md

Extra files for 1.4

File	Purpose
1.4-Exercise-Questions.md	Practice questions + DevTools/curl drills across 1.4.a–g
1.4-Interview-Questions.md	Interview-style Q&A with model answers + quick-fire
1.4-Quick-Revision.md	One-page cheat sheet for HTTP/S/TLS/proxy/VPN

Sub-topics inside 1.5

#	Sub-topic	File
1.5.a	Browser Rendering Pipeline	1.5.a-Browser-Rendering-Pipeline.md
1.5.b	Reflow and Repaint	1.5.b-Reflow-and-Repaint.md
1.5.c	Semantic Landmark Tags	1.5.c-Semantic-Landmark-Tags.md
1.5.d	SEO and Semantic HTML	1.5.d-SEO-and-Semantic-HTML.md
1.5.e	Accessibility and ARIA	1.5.e-Accessibility-and-ARIA.md
1.5.f	Headings Hierarchy	1.5.f-Headings-Hierarchy.md
1.5.g	Ordered and Unordered Lists	1.5.g-Ordered-and-Unordered-Lists.md
1.5.h	Responsive Images	1.5.h-Responsive-Images.md
1.5.i	Links, Navigation, and Forms	1.5.i-Links-Navigation-and-Forms.md

Extra files for 1.5

File	Purpose
1.5-Exercise-Questions.md	Practice questions + DevTools drills across 1.5.a–1.5.i
1.5-Interview-Questions.md	Interview-style Q&A with model answers (rendering, CLS, semantics, SEO, a11y, forms)
1.5-Quick-Revision.md	One-page cheat sheet for semantics, rendering, images, and forms

Sub-topics inside 1.6

#	Sub-topic	File
1.6.a	CSS Syntax & Selectors	1.6.a-CSS-Syntax-and-Selectors.md
1.6.b	Specificity & Cascade	1.6.b-Specificity-and-Cascade.md
1.6.c	Inheritance & Computed Styles	1.6.c-Inheritance-and-Computed-Styles.md
1.6.d	Box Model	1.6.d-Box-Model.md
1.6.e	CSS Units	1.6.e-CSS-Units.md
1.6.f	Modern CSS Functions	1.6.f-Modern-CSS-Functions.md
1.6.g	CSS Variables	1.6.g-CSS-Variables.md
1.6.h	Design Systems	1.6.h-Design-Systems.md
1.6.i	Design Tokens	1.6.i-Design-Tokens.md

Extra files for 1.6

File	Purpose
1.6-Exercise-Questions.md	Closed-book questions + DevTools drills mapped to 1.6.a–1.6.i
1.6-Interview-Questions.md	Model answers: selectors, specificity, box model, units, theming, tokens
1.6-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.7

#	Sub-topic	File
1.7.a	What is SASS?	1.7.a-What-is-SASS.md
1.7.b	SCSS vs SASS & Setup	1.7.b-SCSS-vs-SASS-and-Setup.md
1.7.c	Variables & Nesting	1.7.c-Variables-and-Nesting.md
1.7.d	Partials & Imports	1.7.d-Partials-and-Imports.md
1.7.e	Mixins	1.7.e-Mixins.md
1.7.f	Inheritance & Extends	1.7.f-Inheritance-and-Extends.md
1.7.g	Functions & Operators	1.7.g-Functions-and-Operators.md
1.7.h	Control Directives	1.7.h-Control-Directives.md
1.7.i	Color Functions	1.7.i-Color-Functions.md

Extra files for 1.7

File	Purpose
1.7-Exercise-Questions.md	Closed-book questions + hands-on drills mapped to 1.7.a–1.7.i
1.7-Interview-Questions.md	Model answers: SASS fundamentals, architecture, mixins, functions, performance
1.7-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.8

#	Sub-topic	File
1.8.a	Flexbox Deep Dive	1.8.a-Flexbox-Deep-Dive.md
1.8.b	Common Layout Patterns	1.8.b-Common-Layout-Patterns.md
1.8.c	CSS Grid	1.8.c-CSS-Grid.md
1.8.d	Combining Grid & Flex	1.8.d-Combining-Grid-and-Flex.md
1.8.e	Positioning	1.8.e-Positioning.md
1.8.f	Stacking Context	1.8.f-Stacking-Context.md
1.8.g	Container Queries	1.8.g-Container-Queries.md

Extra files for 1.8

File	Purpose
1.8-Exercise-Questions.md	~70 practice questions + layout challenges mapped to 1.8.a–1.8.g
1.8-Interview-Questions.md	Model answers: flexbox vs grid, positioning, z-index, container queries
1.8-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.9

#	Sub-topic	File
1.9.a	Mobile-First Strategy	1.9.a-Mobile-First-Strategy.md
1.9.b	Media Queries	1.9.b-Media-Queries.md
1.9.c	Breakpoint Planning	1.9.c-Breakpoint-Planning.md
1.9.d	Responsive Images	1.9.d-Responsive-Images.md
1.9.e	Fluid Typography	1.9.e-Fluid-Typography.md
1.9.f	Spacing Rhythm	1.9.f-Spacing-Rhythm.md
1.9.g	CSS Frameworks Overview	1.9.g-CSS-Frameworks-Overview.md

Extra files for 1.9

File	Purpose
1.9-Exercise-Questions.md	~60 closed-book questions + responsive design challenges + DevTools drills
1.9-Interview-Questions.md	Model answers: mobile-first, media queries, responsive images, fluid typography
1.9-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.10

#	Sub-topic	File
1.10.a	BEM Naming Convention	1.10.a-BEM-Naming-Convention.md
1.10.b	Component-Based CSS	1.10.b-Component-Based-CSS.md
1.10.c	Utility vs Component Classes	1.10.c-Utility-vs-Component-Classes.md
1.10.d	Real-World Folder Structure	1.10.d-Real-World-Folder-Structure.md
1.10.e	Debugging with DevTools	1.10.e-Debugging-with-DevTools.md

Extra files for 1.10

File	Purpose
1.10-Exercise-Questions.md	~50 closed-book questions: BEM naming drills, folder-structure design, debugging challenges
1.10-Interview-Questions.md	Model answers for architecture, BEM, utility vs component, and debugging questions
1.10-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.11

#	Sub-topic	File
1.11.a	Introduction to CSS Frameworks	1.11.a-Introduction-to-CSS-Frameworks.md
1.11.b	Utility-First vs Component-Based	1.11.b-Utility-First-vs-Component-Based.md
1.11.c	TailwindCSS Setup & Basics	1.11.c-TailwindCSS-Setup-and-Basics.md
1.11.d	Building with TailwindCSS	1.11.d-Building-with-TailwindCSS.md
1.11.e	Introduction to Bootstrap	1.11.e-Introduction-to-Bootstrap.md
1.11.f	Bootstrap Grid & Components	1.11.f-Bootstrap-Grid-and-Components.md
1.11.g	Customizing Bootstrap	1.11.g-Customizing-Bootstrap.md
1.11.h	TailwindCSS vs Bootstrap	1.11.h-TailwindCSS-vs-Bootstrap.md

Extra files for 1.11

File	Purpose
1.11-Exercise-Questions.md	~60 practice questions: Tailwind class writing, Bootstrap grid, comparison, build challenges
1.11-Interview-Questions.md	~15 model-answer questions covering framework choice, utilities, grid, customization
1.11-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.12

#	Sub-topic	File
1.12.a	CSS Transitions	1.12.a-CSS-Transitions.md
1.12.b	CSS Transform	1.12.b-CSS-Transform.md
1.12.c	3D Transforms	1.12.c-3D-Transforms.md
1.12.d	Keyframe Animations	1.12.d-Keyframe-Animations.md
1.12.e	Animation Performance	1.12.e-Animation-Performance.md

Extra files for 1.12

File	Purpose
1.12-Exercise-Questions.md	~50 practice questions: transitions, transforms, keyframes, performance analysis
1.12-Interview-Questions.md	~15 interview questions with model answers (transitions, transforms, animations, a11y)
1.12-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.13

#	Sub-topic	File
1.13.a	What is JavaScript?	1.13.a-What-is-JavaScript.md
1.13.b	Where JavaScript Runs	1.13.b-Where-JavaScript-Runs.md
1.13.c	Linking JS with HTML	1.13.c-Linking-JS-with-HTML.md
1.13.d	Console: Debugging & Testing	1.13.d-Console-Debugging-and-Testing.md
1.13.e	Variables: let, const, and var	1.13.e-Variables-let-const-and-var.md
1.13.f	Naming Conventions & Clean Code	1.13.f-Naming-Conventions-and-Clean-Code.md
1.13.g	Data Types: Primitives & Objects	1.13.g-Data-Types-Primitives-and-Objects.md
1.13.h	Mini Practice Programs	1.13.h-Mini-Practice-Programs.md

Extra files for 1.13

File	Purpose
1.13-Exercise-Questions.md	~60 practice questions: JS role, runtimes, scripts, console, scope, types, mini programs
1.13-Interview-Questions.md	Model answers: browser vs Node, defer/async, let/const, typeof, prompt/alert
1.13-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.14

#	Sub-topic	File
1.14.a	Introduction to the DOM	1.14.a-Introduction-to-the-DOM.md
1.14.b	DOM Structure: Nodes & Elements	1.14.b-DOM-Structure-Nodes-and-Elements.md
1.14.c	Fetching Elements in the DOM	1.14.c-Fetching-Elements-in-the-DOM.md
1.14.d	DOM Tree Traversal	1.14.d-DOM-Tree-Traversal.md
1.14.e	Manipulating DOM Elements	1.14.e-Manipulating-DOM-Elements.md
1.14.f	Creating & Removing DOM Elements	1.14.f-Creating-and-Removing-DOM-Elements.md

Extra files for 1.14

File	Purpose
1.14-Exercise-Questions.md	~55 practice questions: selection, traversal, XSS, insert/remove
1.14-Interview-Questions.md	Model answers: live collections, innerHTML, appendChild moves node
1.14-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.15

#	Sub-topic	File
1.15.a	addEventListener, Bubbling & event.target	1.15.a-addEventListener-and-Bubbling.md
1.15.b	Mouse, Keyboard, Scroll & Strict Mode	1.15.b-Mouse-Keyboard-Scroll-and-Strict-Mode.md
1.15.c	Forms, Inputs & preventDefault	1.15.c-Forms-Inputs-and-preventDefault.md
1.15.d	classList & Events	1.15.d-classList-and-Events.md
1.15.e	Browser & Window Events	1.15.e-Browser-and-Window-Events.md

Extra files for 1.15

File	Purpose
1.15-Exercise-Questions.md	~50 practice questions: listeners, forms, classList, lifecycle
1.15-Interview-Questions.md	Model answers: bubbling, target vs currentTarget, passive scroll
1.15-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.16

#	Sub-topic	File
1.16.a	Browser Object Model (BOM)	1.16.a-Browser-Object-Model.md
1.16.b	window.location & window.history	1.16.b-Window-Location-and-History.md
1.16.c	Web Storage & Cookies	1.16.c-Web-Storage-and-Cookies.md
1.16.d	Fetch API	1.16.d-Fetch-API.md

Extra files for 1.16

File	Purpose
1.16-Exercise-Questions.md	~45 practice questions: BOM, location/history, storage, fetch
1.16-Interview-Questions.md	Model answers: fetch ok, storage vs cookies, pushState
1.16-Quick-Revision.md	Compact cheat sheet (print-friendly)

Sub-topics inside 1.17

#	Sub-topic	File
1.17.a	Throttling & Debouncing	1.17.a-Throttling-and-Debouncing.md
1.17.b	JSON: JSON.parse & JSON.stringify	1.17.b-JSON-parse-and-stringify.md

Extra files for 1.17

File	Purpose
1.17-Exercise-Questions.md	Throttle vs debounce decisions; JSON parse/stringify drills
1.17-Interview-Questions.md	Model answers: definitions, SyntaxError, storage pairing
1.17-Quick-Revision.md	One-page cheat sheet

---

High-Level Workflow — What Happens When You Visit a Website

┌──────────────┐
│  YOU (User)  │  Type "google.com" in the browser
└──────┬───────┘
       │
       ▼
┌──────────────────┐
│  Browser Cache   │  Already know the IP? → Skip DNS
└──────┬───────────┘
       │ No
       ▼
┌──────────────────┐
│  DNS Resolver    │  Ask "What is the IP for google.com?"
│  (from your ISP) │
└──────┬───────────┘
       │
       ▼
┌──────────────────┐     ┌──────────────┐     ┌────────────────────┐
│  Root DNS Server │ ──▶ │  TLD Server  │ ──▶ │  Authoritative NS  │
│  (13 worldwide)  │     │  (.com zone) │     │  (google's server) │
└──────────────────┘     └──────────────┘     └────────┬───────────┘
                                                       │
                                          IP: 142.250.190.46
                                                       │
       ┌───────────────────────────────────────────────┘
       ▼
┌──────────────────┐
│  Your Computer   │  Now knows the IP → opens TCP connection
└──────┬───────────┘
       │
       ▼
┌──────────────────┐     ┌─────────────────┐     ┌──────────────────┐
│  Your Router     │ ──▶ │  ISP Network    │ ──▶ │  Internet        │
│  (Private → NAT) │     │  (Public IP)    │     │  Backbone        │
└──────────────────┘     └─────────────────┘     └──────┬───────────┘
                                                        │
                                              Submarine cables,
                                              IXPs, peering points
                                                        │
                                                        ▼
                                               ┌────────────────┐
                                               │  Google Server  │
                                               │  (or CDN edge)  │
                                               └────────┬───────┘
                                                        │
                                               HTML, CSS, JS, images
                                                        │
       ┌────────────────────────────────────────────────┘
       ▼
┌──────────────────┐
│  Your Browser    │  Parses HTML → Builds DOM → Renders Page
└──────────────────┘

---

How to Use This Material

1. Read in order — each file builds on the previous one.
2. Follow the diagrams — they are designed for visual learners.
3. Try the "Explain It" challenge at the end of each file — if you can explain it to a friend, you've mastered it.

---

Last updated: April 2026