← Back to Course

Module 00

The Web Stack

HTML, CSS, and JavaScript — understanding what each technology does, when to use it, and how they work together to create everything you see on the web.

Specific frameworks come and go: jQuery dominated, then React, now we have Vue, Svelte, Solid. Build tools evolved from Grunt to Gulp to Webpack to Vite. But HTML, CSS, and JavaScript remain the foundation of every website since 1995.

Single Page Applications (SPAs) were the trend, then Server-Side Rendering (SSR) came back. CSS-in-JS appeared, now native CSS is powerful again. The pendulum swings, but the core technologies stay the same.

Separation of concerns: Structure (HTML), Presentation (CSS), Behavior (JavaScript). This principle has guided web development for 30 years and remains the most important concept for understanding how websites work.

Part A

Core Concepts

01

Spotting Code by Sight

As a designer, you'll encounter code everywhere — in documentation, handoff tools, and developer conversations. Learn to recognize each language at a glance.

<div class="card">
  <h2>Title</h2>
  <p>Content here</p>
  <img src="photo.jpg" />
</div>
Recognizing HTML

Key patterns to spot:
• Angle brackets: < >
• Tag names: div, p, h1, img, a
• Attributes with quotes: class="...", src="..."
• Opening and closing pairs: <div>...</div>

.card {
  background: #ffffff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
Recognizing CSS

Key patterns to spot:
• Selectors starting with . (class) or # (id)
• Curly braces: { }
• Property: value pairs with colons: color: red;
• Semicolons ending each line
• Units: px, rem, %, vh

const button = document.querySelector('.btn');

button.addEventListener('click', () => {
  alert('Hello!');
});
Recognizing JavaScript

Key patterns to spot:
• Keywords: const, let, function, if, return
• Parentheses for functions: querySelector()
• Arrow functions: () => { }
• Dots for method calls: document.querySelector
• Event names: 'click', 'submit'

HTML
CSS
JavaScript
<button>
 Click
</button>
button {
 color: red;
}
btn.on(
 'click',fn
)
All Three Languages

Quick Recognition Guide:
• HTML: Angle brackets <tag>
• CSS: Curly braces { property: value; }
• JavaScript: Parentheses + keywords function() {}

HTML Terms

  • Element
  • Tag
  • Attribute
  • Class
  • ID
  • Semantic

CSS Terms

  • Selector
  • Property
  • Value
  • Rule
  • Cascade
  • Specificity

JS Terms

  • Variable
  • Function
  • Event
  • DOM
  • Callback
  • Promise
Vocabulary You'll Hear

When developers mention these terms, you'll know which technology they're discussing. This helps you follow technical conversations and ask the right questions.

Why This Matters

In design handoff, code reviews, and dev conversations, recognizing code at a glance helps you understand what's being discussed and ask better questions.

02

The Web Stack — Visualized

Every website is built from three fundamental technologies. Each has a distinct role, a unique syntax, and a core engine that powers everything it does.

Core Engine
Tags & Nesting
<parent>
  <child>...</child>
</parent>
What It Does
Defines what things are. A heading, a paragraph, an image, a link, a list, a button.
The Key Concept
Semantic meaning. Screen readers, search engines, and browsers understand your content.
<div><p><h1><img><a>
HTML — The Structure Engine

HTML's engine is tag-based nesting. Parent elements contain child elements, creating a tree structure. Every piece of content on the web starts with HTML tags that give it meaning.

Core Engine
Select → Style
.selector {
  property: value;
}
What It Does
Defines how things look. Colors, fonts, spacing, layout, shadows, animations.
The Key Concept
Cascade & Specificity. Styles flow down and more specific rules win.
colorlayoutspacinganimation
CSS — The Style Engine

CSS's engine is selector-to-property mapping. You select elements, then declare how they should look. The cascade determines which styles win when rules conflict.

Core Engine
Event → Action
element.on('click', () => {
  // do something
});
What It Does
Defines what things do. Respond to clicks, validate forms, fetch data, update content.
The Key Concept
Event-driven. Listen for user actions, then execute code in response.
clicksubmitfetchasync
JavaScript — The Behavior Engine

JavaScript's engine is event-driven programming. Listen for events (clicks, scrolls, form submissions), then run code in response. It's the only programming language browsers understand natively.

HTML
+
CSS
+
JS
=
Every
Website
Structure
What is it?
Presentation
How does it look?
Behavior
What does it do?
How They Work Together

The magic happens when all three work together. HTML provides the content, CSS makes it beautiful, and JavaScript makes it interactive. This separation of concerns is the foundational principle of web development.

The Analogy

HTML is the skeleton (structure). CSS is the skin and clothes (appearance). JavaScript is the muscles and nervous system (behavior).

03

What Changes vs. What Endures

Understanding what to learn deeply vs. what to learn just-in-time is crucial for your growth as a designer who codes.

The Insight

When you understand the principles, you can evaluate tools objectively. When you only know tools, you're trapped chasing the next shiny thing.

04

Reading Code Like a Pro

Before you write code, you need to read it. These visual patterns and conventions help you parse code quickly and understand what's happening.

Hard to Read
function processUser(user) {
if (user.active) {
user.items.forEach(item => {
console.log(item);
});}}
Easy to Read
function processUser(user) {
  if (user.active) {
    user.items.forEach(item => {
      console.log(item);
    });
  }
}
Each indent level = nested inside something
2 spaces or 4 spaces or 1 tab — teams pick one and stick with it
Indentation = Structure

Indentation shows hierarchy. Each level deeper means "this is inside that." Code editors show vertical lines to help you track nesting levels. Messy indentation is the #1 sign of sloppy code.

1
const users = [];
2
3
function addUser(name) {
4
  users.push({ name });
5
  naem.toLowerCase();
6
}
Error: naem is not defined
at addUser (script.js:5:3)
Line Numbers & Error Messages

Error messages tell you exactly where to look: filename:line:column. Line 5, column 3 means "go to line 5, count 3 characters from the left." This is how you debug.

camelCaseuserNameJavaScript variables & functions
kebab-caseuser-nameCSS classes, HTML attributes, URLs
snake_caseuser_namePython, database columns, file names
PascalCaseUserNameClasses, React components, types
SCREAMING_CASEMAX_SIZEConstants that never change
Naming Conventions

Naming conventions aren't random — they signal what something is. When you see kebab-case, you know it's probably a CSS class. PascalCase usually means a class or component. This is semantic naming.

Why NOT camelCase in CSS?
/* This works but... */
.userName { }

/* HTML is case-insensitive! */
/* .userName = .username */
kebab-case is safe
.user-name { }
.card-header { }
.btn-primary { }
Common CSS naming patterns:
.component-element
.card-title, .nav-link

.component--modifier
.btn--large, .card--featured

.is-state / .has-state
.is-active, .has-error
CSS Class Naming (Why Dashes?)

CSS uses kebab-case because HTML attributes are case-insensitive. class="userName" and class="username" would be the same. Dashes avoid this problem and are easier to read.

addEventListener
button.addEventListener('click', handleClick);
"When this button is clicked, run handleClick function"
querySelector
const btn = document.querySelector('.btn');
"Find the first element matching CSS selector '.btn'"
forEach / map / filter
items.forEach(item => console.log(item));
"Loop through each item and do something"
async / await
const data = await fetch('/api/users');
"Wait for this to finish before continuing"
JavaScript Vocabulary

These terms appear constantly in JavaScript. addEventListener connects user actions to code. querySelector finds elements (like CSS selectors). async/await handles things that take time (API calls).

Before Refactoring
// 20 lines doing one thing
function process() {
  // get user
  // validate user
  // update user
  // save user
  // send email
  // log action
  // ... 50 more lines
}
Hard to understand, test, or modify
After Refactoring
function process() {
  const user = getUser();
  validateUser(user);
  updateUser(user);
  saveUser(user);
  sendEmail(user);
  logAction(user);
}
Each function does ONE thing
Refactoring & Code Quality

Refactoring means improving code without changing what it does. Breaking large functions into smaller ones makes code easier to read, test, and modify. Good code reads like a story.

LOC
Lines of Code
"This file is 500 lines" — a rough measure of size/complexity. Fewer lines usually = better (if it still works).
DRY
Don't Repeat Yourself
If you copy-paste code, make it a function instead. One source of truth = fewer bugs when changing things.
KB
File Size (Kilobytes)
"Bundle size is 150KB" — smaller files load faster. Critical for web performance. Tree-shaking removes unused code.
O(n)
Big O Notation (Efficiency)
How code scales. O(n) = time grows linearly with data. O(n²) = gets slow fast. Developers optimize this.
How Code is Measured

Developers measure code quality in multiple ways. Lines of code (less is usually better), DRY-ness (no repetition), file size (affects load time), and algorithmic efficiency (Big O). You don't need to master these, but knowing the terms helps in conversations.

Single-line comment (JavaScript, CSS)
// This is ignored by the computer
/* This too */
HTML comment
<!-- Hidden from browser -->
TODO / FIXME / HACK
// TODO: add error handling
// FIXME: this breaks on Safari
// HACK: temporary workaround
Documentation comments (JSDoc)
/**
 * Calculates total price
 * @param {number} qty - Quantity
 * @returns {number} Total
 */
Reading Comments

Comments are notes from developers to other developers (or their future selves). TODO marks incomplete work. FIXME marks known bugs. HACK marks ugly-but-working solutions. These give you insight into code history.

Pro Tip

When reading unfamiliar code, start with the file/function names. Good code tells you what it does through naming alone. Then read the comments. Only then dive into the details.

05

HTML in Depth

HTML provides semantic meaning to content. Good HTML is meaningful even without CSS or JavaScript.

<!DOCTYPE html>
<html>
  <head><title>Page</title></head>
  <body>
    Hello World
  </body>
</html>
Bare minimum HTML

The absolute minimum: DOCTYPE, html, head with title, and body with content. This is valid HTML but provides no semantic meaning.

<header>
  <h1>Site Title</h1>
</header>
<main>
  <article>
    <h2>Article Title</h2>
    <p>Content here...</p>
  </article>
</main>
Basic semantic HTML

Semantic elements like header, main, article, and proper heading hierarchy (h1, h2). Screen readers and search engines understand this structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"...>
  <title>Page Title</title>
  <meta name="description"...>
</head>
<body>...</body>
</html>
Production-ready HTML

Language attribute for accessibility, charset for international characters, viewport for mobile, description for SEO. This is what real websites use.

<header>
<nav>
<main>
<article>
<section>
<aside>
<figure>
<footer>
<time>
HTML5 semantic elements

HTML5 introduced semantic elements that describe their content. Use these instead of generic divs whenever possible.

The Test

Disable CSS. Can you still understand your page structure? If yes, your HTML is semantic.

06

CSS in Depth

CSS controls all visual aspects of a page. Modern CSS is incredibly powerful — most things that once required JavaScript can now be done with CSS alone.

<p style="color: red; font-size: 20px;">Text</p>

Text

Inline styles (avoid)

Styles written directly in HTML attributes. Hard to maintain, can't be cached, highest specificity. Only use for dynamic values from JavaScript.

<head>
  <style>
    .highlight { color: red; }
  </style>
</head>

Internal stylesheet

Styles in a