What we cover today

First the Internet — no web yet

1989: linking documents at CERN

Thousands of researchers, and every document sits on a different system on a different machine. Tim Berners-Lee's proposal: documents that point to each other — a web of linked pages.

1990 — he builds the first browser (named WorldWideWeb) and the first server at CERN · 1991 — the first website goes live at info.cern.ch

1993–1996: mainstream — then the browser wars

document.all.hero    // exists only in Internet Explorer
document.layers.hero // exists only in Netscape

Two problems give us CSS and JavaScript

<p class="title">Hello</p>

.title { color: red; }

button.onclick = () => alert("Clicked!")

From read-only pages to the platform you use now

HTML, CSS & JavaScript — one body

Under the hood: DevTools (Inspect)

Prepare your environment

webdev-lab/
├── index.html    ← structure
├── styles.css    ← styling
└── script.js     ← behavior

Tip: open the FOLDER (not the file)
in VS Code — IntelliSense then
understands the whole project.

Anatomy of an HTML page

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>My first page</title>
  </head>

  <body>
    <h1>Hello, class!</h1>
    <p>My very own page.</p>
  </body>

</html>

Working with text

<h1>Main heading</h1>
<h2>Section heading</h2>

<p>Normal <strong>bold-important</strong>
and <em>emphasised</em> text.</p>

<p>Water is H<sub>2</sub>O,</p>
<p>and 2<sup>10</sup> = 1024.</p>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd>
to save.<br>New line,<br>same paragraph.</p>

Lists: ordered & unordered

<ul>
  <li>Morning: HTML drills</li>
  <li>Afternoon: CSS layouts
    <ul>
      <li>Flexbox</li>
      <li>Grid</li>
    </ul>
  </li>
</ul>

<ol start="3">
  <li>Register the domain</li>
  <li>Deploy the site</li>
</ol>

Attributes & accessibility (ARIA)

Links & navigation

<nav>
  <a href="index.html">Home</a>
  <a href="pages/about.html">About</a>
  <a href="https://developer.mozilla.org"
     target="_blank" rel="noopener">MDN</a>
  <a href="#contacts">Contacts ↓</a>
</nav>

<!-- ...page content... -->

<section id="contacts">
  <h2>Contact us</h2>
</section>

Images

<figure>
  <img src="images/campus.jpg"
       alt="Students on orientation day"
       width="320" height="180"
       loading="lazy">
  <figcaption>
    Orientation day, Sept 2026
  </figcaption>
</figure>

<!-- always: folder path, alt text, -->
<!-- and explicit dimensions -->

Forms & inputs

<label>
  Email
  <input type="email" placeholder="you@univ.edu">
</label>
<label>
  Password
  <input type="password">
</label>

<input type="checkbox" checked> Remember me
<input type="radio" name="year"> Year 1
<input type="radio" name="year"> Year 2

<label>
  Deadline <input type="date">
</label>
<textarea rows="3"></textarea>
<button>Sign up</button>

CSS syntax: rules, and where they live

Three ways to attach CSS — and the one to use:

Selectors: target anything

Styling: color, fonts & effects

.card {
  color: #1f2430;
  background: #eaf3fa;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  border-radius: 16px;
  box-shadow: 8px 8px 0 #e6e6e6;
  transition: transform .3s;
}
.card:hover {
  transform: scale(1.05);
}

The box model: every element is a box

Grid: two-dimensional layout

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Flexbox: one-dimensional layout

Position & z-index: layers and overlaps

Responsive: one page, every screen

<!-- in <head>: the magic line -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
>

/* adapt at breakpoints */
@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
  h1 {
    font-size: 28px;
  }
}

Flexbox Duck — Level 1

Flexbox Duck — Level 2

Flexbox Duck — Level 3

Flexbox Duck — Level 4

Flexbox Duck — Level 5

What is JavaScript?

JavaScript is the browser's programming language. It reacts to people, changes the page, and can request data without a full reload.

const button = document.querySelector("#save");

button.addEventListener("click", () => {
  document.body.classList.toggle("saved");
});

console.log(): see what your code sees

console.log() prints text, values, and objects in the browser's developer console. Use it to check an assumption before guessing at a bug.

const student = { name: "Ada", score: 10 };

console.log("Hello, web!");
console.log(student.score);   // 10
console.log(student);         // inspect the whole object

Say it — then watch it print

// console.log prints whatever is between the parentheses
console.log("Hello");
console.log(1 + 2);
console.log("Points:", 10); // two arguments: label + value

// comma keeps both on one line — plus adds numbers first
console.log("Score:", 10 + 5);

// your turn: log something about you
console.log("My name is ...");

Variables: let, const, var

const courseName = "Web Development";   // fixed
let score = 0;                          // will change
score = score + 10;                     // now 10

var, let, const — who survives?

// three ways to declare — meet var, let, const
var one = "One";
let two = "Two";
const three = "Three";

one = "1"; // var — reassign, no complaint
two = "2"; // let — reassign, no complaint
// three = "3"; // ← uncomment me: const refuses

console.log(one, two, three);

// block scope: let stays inside the curly braces
{
  var insideVar = "var leaks out of the block";
  let insideLet = "let stays in the block";
}
console.log(insideVar); // works
// console.log(insideLet); // ← uncomment me: ReferenceError

Data types & typeof

console.log(typeof "hello");    // string
console.log(typeof 42);         // number
console.log(typeof true);       // boolean
console.log(typeof undefined);  // undefined
console.log(typeof null);       // object !
console.log(typeof [1, 2, 3]);  // object
console.log(typeof {a: 1});     // object

// objects bundle many values:
const student = { name: "Ada" };

Six types, one console

// string
let name = "Somchai";
console.log(`Hello, ${name}`); // template literal
console.log(typeof name); // "string"

// number
let price = 99.5;
console.log(price * 2); // 199

// boolean
let isStudent = true;
console.log(typeof isStudent); // "boolean"

// object — data in key: value pairs
let person = { name: "Somying", age: 30 };
console.log(person.name); // dot access
console.log(person["age"]); // bracket access

// array — an ordered list
let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // "apple"
console.log(fruits.length); // 3

Math operations & operators

const price = 19.99, qty = 3;
const total = price * qty;      // 59.97

total.toFixed(2);               // "59.97"

Math.round(4.6);                // 5
Math.floor(4.9);                // 4
Math.ceil(4.1);                 // 5

// random die: 1..6
Math.floor(Math.random() * 6) + 1;

const msg = `Total: ${total}`;  // template

Control flow: making decisions

let grade;
if (score >= 50) {
  grade = "pass";
} else if (score >= 40) {
  grade = "retake";
} else {
  grade = "fail";
}

// many exact values? use switch:
let off;
switch (day) {
  case "Sat":
  case "Sun": off = true; break;
  default: off = false;
}

Decisions: pass or fail?

// if / else — pick one branch
let score = 45;
if (score >= 50) {
  console.log("pass");
} else {
  console.log("fail"); // ← this one runs
}

// else if — checks in order, stops at the first hit
let grade = 75;
if (grade >= 80) console.log("grade A");
else if (grade >= 70) console.log("grade B"); // ← runs
else console.log("grade F");

// && means both, || means either
let username = "admin";
let password = "1234";
if (username === "admin" && password === "1234") {
  console.log("login ok");
} else {
  console.log("wrong username or password");
}

Loops: repeat without repeating yourself

// counted: 0, 1, 2, 3, 4
for (let i = 0; i < 5; i++) {
  console.log("Cube " + i);
}

// walk an array: for...of
for (const c of colors) show(c);

Four ways to loop

let fruits = ["apple", "banana", "orange"];

// classic for — you control the index
for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i]);
}

// for...of — the values, no index
for (let fruit of fruits) {
  console.log(fruit);
}

// forEach — array method with a callback
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

// map — build a NEW array from the old one
let numbers = [1, 2, 3, 4];
let doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

Arrays: ordered collections

const colors = ["red", "green", "blue"];

colors[0];             // "red"
colors.length;         // 3
colors[1] = "lime";    // replace

colors.push("gold");   // add to end
colors.pop();          // remove from end
colors.includes("red") // true

colors.join(" · ");    // "red · lime · blue"

Array methods, visualized

numbers = [42, 7, 19, 3, 25]

Objects: describing real things

const student = {
  name: "Ada", year: 2, gpa: 3.86,
  skills: ["html", "css"],
};

student.name;         // "Ada"  (dot)
student["gpa"];       // 3.86   (bracket)
student.skills.push("js");

// arrays of objects = a mini database:
const students = [
  { name: "Ada",  year: 2 },
  { name: "Bo",   year: 3 },
];
students[1].name;     // "Bo"

Functions: reusable recipes

// declaration: name + parameters
function calcArea(width, height) {
  const area = width * height;
  return area;        // hand back
}

// call it with arguments:
const a = calcArea(3, 4);   // 12
const b = calcArea(10, 2);  // 20

// arrow function — same idea, shorter:
const calcArea2 = (w, h) => w * h;
calcArea2(5, 5);            // 25

Write once, call twice

// declaration — a recipe you can reuse
function greet(name) {
  return `Hello, ${name}`;
}
console.log(greet("Somchai"));
console.log(greet("Somying"));

// arrow function — same idea, shorter
const shout = (text) => text.toUpperCase();
console.log(shout("quiet please"));

// your turn: write double(n) that returns n * 2,
// then log double(21) on the line below

The DOM: JavaScript meets your HTML

// 1  select the button
const btn = document.querySelector("#go");

// 2  listen for events
btn.addEventListener("click", () => {
  // 3  change what is on screen
  const title = document.querySelector("h1");
  title.classList.toggle("done");

  // 4  create & attach new content
  const p = document.createElement("p");
  p.textContent = "Clicked!";
  document.body.append(p);
});

Fetch API: ask a server for data

fetch() is built into JavaScript. It makes an HTTP request, waits for the response, then lets your page use the data — here, a free test API that returns 10 fake users.

async function loadUsers() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/users");
  if (!response.ok) throw new Error("Request failed");

  const users = await response.json();
  console.log(users);
}

loadUsers().catch(console.error);

Reshape an API response

• fetch the users array — same API as the fetch-api slide
• map every user to an object with exactly two keys: name and address
• address = street, suite, city and zipcode joined into one string

async function getUsers() {
  const res = await fetch(
    "https://jsonplaceholder.typicode.com/users");
  const users = await res.json();

  // TODO: replace this return — use .map() to build
  // [{ name, address }] like the example on the right
  return users;
}

getUsers().then((users) => console.log(users));

your move: finish the TODO in script.js — the preview fills with ten real users, no page reload. Stuck? console.log(users[0]) first.