The HTML, CSS, and JavaScript Triangle

Learning Outcomes

• Understand the purpose of HTML, CSS, and JavaScript.
• Recognize their place in the web ecosystem.
• Appreciate the importance of separating these layers.

Purposes of Web Authoring Technologies

• HTML: Provides structure and semantics.
• CSS: Controls styling and layout.
• JavaScript: Enables dynamic behavior.

The Blurred Lines of Separation

  const style = {
    backgroundColor: primary ? "blue" : "gray",
    color: "white",
    padding: "10px 20px",
    border: "none",
  };

  return <button style={style}>Click Me</button>;
}

Progressive Enhancement

• Focus on core webpage functionality first.
• Enhance the experience as capabilities allow.
• Important for accessibility, performance, and user experience.

The Web Standards Model

• How standards bodies like W3C, WHATWG operate.
• The process of creating and evolving web standards.
• this is gonna be dense

The Standards Process

• Principles: Interoperable, accessible, collaborative.
• Lifecycle: Experimental → Stable → Deprecated.
• Built on openness, without patent restrictions.

How Browsers Load Webpages

Learning Outcomes

• Grasp the HTTP request-response model.
• Identify different types of assets in a response.

Understanding Webpage Assets

• Types: HTML, CSS, JS, media (images, videos, etc.), other files.
• Static vs. Dynamic files.
• Assembly into a web document for display.

The Rendering Process

1. Request webpage.
2. DNS lookup.
3. Fetch assets.
4. Assemble DOM.
5. Build CSSOM.
6. Execute JavaScript.
7. Build accessibility tree.
8. Create render tree, layout, and paint.
   

The Browser: A Hostile vs. Awesome Environment

• Hostile due to variability (OS, browser, network, etc.).
• Embrace uncertainty, program defensively.
• Awesome for accessibility, simplicity in app delivery, community support.