Web Technology — Exam Prep & Notes

HTML5 is the fifth revision of HTML with native support for audio, video, canvas, and semantic elements. New features:

• <video>, <audio> — embed media without plugins
• <canvas> — 2D drawing via JavaScript
• Semantic tags: <header>, <nav>, <section>, <article>, <footer>
• Local Storage & Session Storage API

id is unique — only one element per page can have a given id; selected with #idname. class can be shared across multiple elements; selected with .classname. id has higher specificity than class.

The Box Model describes the rectangular box around every HTML element. Components (outer to inner): Margin → Border → Padding → Content. Total width = content + padding-left + padding-right + border-left + border-right + margin-left + margin-right.

JavaScript is a lightweight, interpreted scripting language that runs in the browser to make web pages interactive. Java is a compiled, object-oriented language used for standalone applications. They share similar syntax but are unrelated languages — JavaScript was named after Java for marketing reasons.

== (loose equality) compares values after type coercion — "5" == 5 is true. === (strict equality) compares both value AND type — "5" === 5 is false. Always prefer === to avoid unexpected bugs.

DOM (Document Object Model) is a programming interface that represents an HTML page as a tree of objects. Every tag becomes a node. JavaScript uses the DOM to read and change page content dynamically — adding, removing, or modifying elements without reloading the page.

Flexbox is a CSS layout model that arranges items in a row or column. Advantages: (1) Easy to center elements both horizontally and vertically. (2) Items can automatically shrink or grow to fill available space — great for responsive design.

An event is a signal that something happened in the browser. JavaScript code can "listen" for events and respond. Examples: click (user clicks a button), keydown (user presses a key), submit (form is submitted), load (page finishes loading).

var: function-scoped, hoisted, can be re-declared (avoid in modern JS). let: block-scoped, not hoisted, can be reassigned. const: block-scoped, cannot be reassigned — use for values that don't change.

A CSS selector targets HTML elements to apply styles. Types: (1) Element selector — p { }. (2) Class selector — .card { }. (3) ID selector — #header { }. (4) Attribute selector — input[type="text"] { }. Also: pseudo-class :hover, pseudo-element ::before.

Semantic elements describe the meaning of content, not just its appearance. They help search engines and screen readers understand the page structure.

• <header> — site/section header. Contains logo, nav, title.
• <nav> — main navigation links.
• <main> — primary content area (only one per page).
• <section> — a thematic grouping with a heading.
• <article> — self-contained content (blog post, news item).
• <aside> — sidebar content loosely related to the main content.
• <footer> — copyright, links, contact info.
• <figure> / <figcaption> — image with caption.
• <time> — machine-readable date/time.

Vs <div>: <div> has no meaning — it's a generic container. Semantic elements tell browsers and assistive technologies what the content is, improving accessibility (WCAG) and SEO. Screen readers can jump directly to <main> or <nav> without reading the whole page.

Study this lesson: Semantic HTML →

Flexbox operates on a container and its items.

Container properties:

• display: flex — activates flexbox
• flex-direction: row | column | row-reverse | column-reverse
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly (main axis)
• align-items: stretch | flex-start | flex-end | center | baseline (cross axis)
• flex-wrap: nowrap | wrap | wrap-reverse
• gap: space between items

Item properties:

• flex-grow: how much an item grows (default 0)
• flex-shrink: how much it shrinks (default 1)
• flex-basis: initial size before growing/shrinking
• flex: 1 shorthand (grow=1, shrink=1, basis=0)
• align-self: override align-items for one item
• order: change visual order without changing HTML

Common use case — centering: display:flex; justify-content:center; align-items:center;

Study this lesson: CSS Flexbox →

Function declaration: hoisted — can be called before definition.
function greet(name) { return "Hello " + name; }

Function expression: not hoisted.
const greet = function(name) { return "Hello " + name; };

Arrow function (ES6): shorter syntax, no own this.
const greet = (name) => "Hello " + name;

Scope: Variables declared inside a function are local to that function. let/const are block-scoped (inside { }). var is function-scoped.

Closure: A function that remembers the variables from its outer (enclosing) scope even after the outer function has finished executing.

function counter() {
  let count = 0;
  return function() { count++; return count; };
}
const inc = counter();
inc(); // 1
inc(); // 2  ← 'count' is closed over

Study these lessons: Functions · Arrow Functions · Scope & Closures

The DOM (Document Object Model) represents a page as a tree of nodes. JavaScript can read and change this tree.

Selecting elements:

• document.getElementById('id') — single element by id
• document.querySelector('.class') — first matching CSS selector
• document.querySelectorAll('p') — NodeList of all matches

Reading/Changing content:

• el.textContent — get/set text (safe)
• el.innerHTML — get/set HTML markup
• el.getAttribute('href') / el.setAttribute('href','url')

Changing styles & classes:

• el.style.color = 'red'
• el.classList.add('active'), .remove(), .toggle()

Creating/Removing elements:

• document.createElement('div')
• parent.appendChild(child)
• el.remove()

Events: el.addEventListener('click', function() { ... })

Study these lessons: DOM Basics · Events · DOM Manipulation

CSS Grid is a 2-dimensional layout system (rows AND columns).

Container properties:

• display: grid
• grid-template-columns: 200px 1fr 1fr — defines column widths
• grid-template-rows: auto 400px
• gap: 16px — space between cells
• grid-template-areas — named areas
• justify-items / align-items — align content in cells

Item properties:

• grid-column: 1 / 3 — span from line 1 to 3
• grid-row: 2 / 4
• grid-area: header — place in named area

Responsive grid: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) — creates as many columns as will fit; each at least 250px wide.

Study this lesson: CSS Grid →