100+ Web Development Things you Should Know

1. Foundations of the Internet & Web
The Internet: A global network of interconnected machines (0:30).
Internet Protocol (IP): Standards for identifying computers on the network (0:46).
IP Address: A unique identifier for every device on the network (0:53).
Transmission Control Protocol (TCP): A protocol to break data into packets for transmission (0:59).
Fiber Optic Cables & Modems: Physical hardware infrastructure for data transfer (1:05).
The World Wide Web: The software layer that runs on the Internet (1:15).
Hypertext Transfer Protocol (HTTP): The communication protocol for web pages (1:20).
Uniform Resource Locator (URL): The specific address for every piece of web content (1:24).
Web Browser: Software used to access and render web content (1:29).
Client: The browser that consumes information (1:35).
Server: The remote computer that stores and sends web content (1:40).
HTTP Request: A message sent from the client to the server (1:42).
HTTP Response: The data sent back from the server (1:44).
Domain Name: A human-readable web address (1:51).
Registrar: An entity authorized to sell domain names (1:57).
ICANN: The nonprofit organization overseeing internet namespaces (2:00).
Domain Name System (DNS): The "phonebook" that maps domain names to IP addresses (2:06).

2. HTML (Structure)
Hypertext Markup Language (HTML): The standard language for web page content (2:16).
DevTools: Browser built-in tools for inspecting page structure (2:20).
Text Editor: Software like VS Code used to write code (2:25).
HTML Elements: The building blocks consisting of opening and closing tags (2:28).
User Input Elements: Select and Input elements for building forms (2:38).
Attributes: Properties used to change element behavior (2:42).
Anchor Tag (``): The element for creating hyperlinks (2:52).
Document Object Model (DOM): The hierarchical representation of the document (3:03).
Head Element: Contains invisible metadata and the document title (3:10).
Body Element: Contains the visible content of the page (3:13).
Semantic HTML: Using tags to give browsers and bots hints about content (3:17).
Accessibility: Optimizing for screen readers to help users with disabilities (3:26).
Div Element (` `): A container used to define sections of a page (3:36).

3. CSS (Styling)
Cascading Style Sheets (CSS): Language for styling HTML elements (3:52).
Inline Styles: CSS applied directly via the style attribute (3:57).
Style Tag: CSS block inside the HTML document (4:22).
Selectors: Used to target specific HTML elements (4:25).
Classes: Reusable styles applied via class attributes (4:34).
Specificity Rules: Logic that determines which styles take priority (4:45).
External Stylesheets: Separate CSS files linked to the HTML (4:53).
Box Model: Every element is treated as a box with padding, borders, and margins (5:03).
Display Block: Elements that take up all available horizontal space (5:12).
Display Inline: Elements that align horizontally side by side (5:18).
Positioning (Relative, Absolute, Fixed): Controls for placing elements (5:27).
Responsive Design: Ensuring sites look good on all screen sizes (5:49).
Media Queries: CSS tools to apply styles based on device characteristics (6:02).
Flexbox (`display: flex`): Layout tool for creating rows and columns (6:11).
CSS Grid (`display: grid`): Advanced layout tool for 2D structures (6:18).
Calc(): Function for performing math in CSS (6:28).
Custom Properties: CSS variables for reusable values (6:32).
Sass: A CSS pre-processor for programmatic features (6:39).

4. JavaScript (Interactivity)
JavaScript: Programming language for interactivity (6:45).
Script Tag: The standard way to embed JS (6:56).
Defer Attribute: Ensures script runs after the DOM is loaded (7:11).
ECMAScript: The formal standardization of JavaScript (7:17).
Variables (`let` vs `const`): Methods for declaring data (7:22).
Dynamic Typing: JavaScript does not require type annotations (7:30).
TypeScript: Adds static typing to JavaScript (7:35).
Event Handling: Listening for user interactions like clicks or inputs (7:42).
Browser APIs: Built-in functions like `document.querySelector` (7:53).
Event Listener: Functions that execute in response to an event (8:04).
Arrays: Data structure for a collection of values (8:13).
Objects: Fundamental data structure (dictionary/hashmap) (8:17).
Prototypal Inheritance: Technique for object inheritance (8:28).
Classes: Syntactic sugar for prototypal inheritance (8:40).
Frontend Frameworks: React, Vue, Svelte, Angular (8:53).
Components: Encapsulation of UI into reusable blocks (9:01).
Declarative Code: Describing what the UI does rather than how (9:10).

5. Backend & Full Stack
Node.js: A JavaScript runtime for the server (9:23).
V8 Engine: The high-performance engine powering Chrome and Node (9:35).
Event Loop: Handles non-blocking, asynchronous tasks (9:38).
NPM (Node Package Manager): Tool for sharing and using modules (9:48).
Server-Side Rendering (SSR): Generating HTML on the server (10:05).
HTTP Methods (GET, POST, PATCH): Actions for modifying or retrieving data (10:13).
Status Codes: Communication regarding request success or failure (10:28).
Single Page Application (SPA): Client-side rendering (10:45).
JSON (JavaScript Object Notation): A universal data interchange format (11:06).
Static Site Generation (SSG): Pre-rendering pages for speed and SEO (11:21).
Hydration: Making static HTML interactive with JS (11:32).
Lighthouse: Tool for measuring performance metrics (11:39).
Full Stack Frameworks: Next.js, Ruby on Rails, Laravel (11:46).
Module Bundlers: Tools like Webpack to package assets (11:57).
Linters: Tools like ESLint for code style enforcement (12:05).
Database: Required for persistent data storage (12:12).
User Authentication: System to manage user access (12:20).
Web Server: Tools like Nginx or Apache (12:28).
Localhost: Serving files locally for testing (12:33).
Cloud Provider: Services like AWS for hosting (12:39).
Containerization (Docker): Packaging apps for scalability (12:42).
Platform as a Service (PaaS): Managed infrastructure hosting (12:48).
Web3/Blockchain: Decentralized hosting alternatives (12:56).

Am I the only one who gets annoyed when seeing html & xml ?

this is probably the most entertaining crash course on web dev i have ever seen. the transition from the absolute basics of ip addresses all the way up to server side rendering and module bundlers was incredibly smooth. i love how it normalizes the fact that nobody actually knows everything and we all just google stuff constantly. whenever i am testing out vanilla css positioning or simple flexbox layouts, i usually just code a quick static index.html and dump it on tiiny host to see how it renders on my phone before setting up a massive react framework. great overview of the entire stack

09:20 The Frontend to backend flip was crazy

bro puts style in article.

I am a web developer now. Thank you. :)

Guyss AI is here now in 2026 xd

😮

7:30 Dude's revealed Epstein file long time ago

Thank you for the great content!

The Internet uses IP to give each computer a unique address, and TCP breaks data into packets to send across cables and modems. The receiving computer then puts everything back together. Tools like Tiiny Host make testing web projects over the internet fast and simple.