🌳 The Ultimate Web Tech Tree (HTML → CSS + JS)

🌳 Web Tech Tree HTML → CSS / JavaScript (down to the comma)

HTML (Structure) CSS (Style) JavaScript (Behavior) ▶ Click triangles to expand branches

🧩 <foreignObject> in SVG can embed HTML directly inside vector graphics — here’s a live node:

📄 HTML Document (Root) Parent

<!DOCTYPE html> Declaration

<html> Root Element

<head> Metadata

<title> Document title
<meta> charset, viewport, description
<link> CSS, preload, icon
<style> Embedded CSS
<script> (blocking JS)

<body> Content

Block elements div, p, h1, section, article, nav
Inline elements span, a, em, strong, img, input
Void elements img, input, br, hr, meta
Global Attributes id, class, style, data-*, role, aria-*
Event Handlers (inline) onclick, onload, onchange

🎨 CSS (Cascading Style Sheets) Child 1: Presentation

📦 Stylesheet Collection of rules

@-rules (At-rules) Conditional / Directive

@media Responsive breakpoints
@keyframes Animation sequences
@import External stylesheets
@font-face Custom web fonts
@supports Feature detection
@layer Cascade layers

📌 Ruleset Selector + Declaration Block

🎯 Selector Targets HTML

Simple type, class, id, attribute
Compound e.g. div.class#id
Complex combinators: > + ~ (space)
Relative :has()
Pseudo-classes :hover, :focus, :nth-child(), :first-of-type, :not()
Pseudo-elements ::before, ::after, ::first-line, ::first-letter, ::selection
Specificity (0,0,1) vs (0,1,0) vs (1,0,0)

{ ... } Declaration Block Property: Value;

📋 Declarations Property → Value

Property color, margin, font-family, display, position, flex, grid

Value The assigned data

Keywords auto, inherit, initial, unset, revert
Lengths px, em, rem, vh, vw, ch
Percentages 50%, 100%
Colors hex, rgb(), hsl(), named
Functions calc(), clamp(), min(), max(), var(--custom)
Shorthands margin: 1px 2px 3px 4px; background: url() no-repeat center;

🧊 Box Model Content → Padding → Border → Margin

Content width / height
Padding inner space
Border style, width, color, radius
Margin outer space, collapsing

📐 Layout Modes Positioning

Flexbox row/column, wrap, justify, align
Grid rows/columns, areas, gaps
Position static, relative, absolute, fixed, sticky
Float & Clear legacy

⚡ JavaScript (ECMAScript) Child 2: Behavior / Logic

📜 Script / Program Sequence of instructions

🧠 Execution Context Global / Function / Eval

Variable Environment var / let / const
Lexical Environment scope chain + this
Closure function + outer lexical env

📋 Statements Executable instructions

Declaration var, let, const, function, class, import
Assignment x = 5; obj.key = value;
Conditional if, else if, else, switch
Loops for, while, do...while, for...in, for...of
Return return value;
Try / Catch / Finally error handling
Debugger debugger;

🧮 Expressions Produce values

Primary this, literals, ( )
Arithmetic + - * / % **
Logical && || ! ?? (nullish)
Relational < > <= >= instanceof in
Equality == === != !==
Assignment = += -= *= /=
Ternary condition ? expr1 : expr2

🏗️ Objects & Functions Core building blocks

📦 Objects Key-value pairs

Built-in Array, Date, Math, RegExp, Map, Set, Promise
User-defined literal { }, new Object(), Object.create()
Prototype Chain __proto__, Object.getPrototypeOf()
Property descriptors writable, enumerable, configurable, get/set

⚙️ Functions Callable objects

Declaration function foo() { }
Arrow () => { }
Method object.method() { }
Generator function* () { yield }
Async / Await async function() { await }

📥 Parameters Function inputs

Default (x = 10)
Rest (...args)
Destructuring ({ a, b }) or ([x, y])

🏛️ Classes Syntactic sugar over prototypes

Constructor constructor() { }
Methods instance methods, static methods
Private fields #privateField
Inheritance extends + super()

🔄 Event Loop & Concurrency Non-blocking I/O

Call Stack LIFO execution
Web APIs DOM, setTimeout, fetch, events
Task Queue (Macrotasks) setTimeout, setInterval, I/O
Microtask Queue Promise.then, queueMicrotask, MutationObserver
Rendering steps requestAnimationFrame, layout, paint

🔤 Lexical Tokens (Scanner/Parser) The absolute bottom

Whitespace spaces, tabs, line terminators
Comments // or /* */
Identifiers variable / function / class names
Keywords if, for, return, function, class, async, await, let, const
Literals null, undefined, true, false, 123, "string", `template`, [ ], { }

🔗 Punctuators (Operators & Delimiters) Syntax structure

Operators = + - * / && || ! === ?. ...
Delimiters ( ) { } [ ] ; : . ?

⏺️ , (Comma) — U+002C The Ultimate Leaf

Parameter / Argument lists function(a, b, c) { }
Array elements [1, 2, 3]
Object properties {x: 1, y: 2}
Variable declarations let a = 1, b = 2;
Comma Operator (1, 2, 3) → returns 3
Import / Export lists import { foo, bar } from 'mod';
↕ Also in CSS: grouped selectors, font stacks, shorthand values

; Statement terminator (ASI)
: Ternary, property labels, switch case
{ } Blocks, object literals, class bodies

🧬 How they connect: The HTML <style> tag imports CSS, and the <script> tag imports JavaScript. The CSS Cascade and JavaScript DOM API (e.g., document.querySelector()) bridge the children back to the parent. At the very bottom of both languages, the , (comma) acts as the fundamental "separator" token that enables lists, arguments, and sequences.