Fifteen reference appendices, a complete glossary, selected answers, and a full index — a lasting reference companion to all thirty chapters of this textbook
A textbook is read once, chapter by chapter, in order. A reference is consulted many times, out of order, for years. This back matter exists to serve the second purpose. Every appendix that follows distills material from the thirty chapters of Web Development: HTML, CSS, and JavaScript into a compact, lookup-friendly form — so that long after you have finished the course, you can still find the right selector, the right element, the right debugging question, or the right term in seconds.
The appendices are organized to mirror the structure of the book itself: project setup, HTML, CSS, JavaScript, tools and quality, and finally a glossary, selected answers, and an index. None of this material is new. It is the same content taught in the chapters, reorganized for speed of reference rather than for sequential learning.
If you remember roughly what you are looking for — a CSS property, an HTML element, a JavaScript method — start with the relevant lettered appendix. If you remember only a word but not where it belongs, start with the Glossary (Appendix M) or the Index (Appendix O), which will point you back to the right chapter. If you are reviewing for an assessment, the Selected Answers (Appendix N) show what a complete answer looks like for a representative question from each part of the book.
Every website begins as a folder on a computer. This appendix summarizes how that folder should be organized, named, and linked together — the practical habits taught in Chapters 3, 4, and 26.
.html for pages, .css for stylesheets, .js for scripts, .json for data, plus image extensions such as .png, .jpg, and .svg. The browser and editor both rely on the extension to know how to treat a file.index.html automatically when a folder is requested without a specific filename. It should always be the homepage of a site or section.css/ for stylesheets, js/ for scripts, images/ for media, data/ for JSON files.css/main.css or ../images/logo.png. Relative paths keep a project portable because they do not depend on where the project sits on a drive or server./css/main.css) or includes a full web address (https://example.com/css/main.css). Useful for linking to other domains or for site-root references.contact-form.html rather than Contact Form FINAL(2).html. Web servers are case-sensitive and space-intolerant.| Common Mistake | Why It Breaks | Fix |
|---|---|---|
| Spaces in filenames | Spaces become %20 in URLs and are easy to mistype in paths | Use hyphens: my-page.html |
| Mixed-case filenames | Many servers are case-sensitive; Logo.png ≠ logo.png | Use all lowercase |
Wrong number of ../ steps | Each ../ moves up exactly one folder; too many or too few breaks the link | Count folders carefully from the current file |
Linking to a local file path (e.g. C:\Users\...) | Only works on the original computer | Always use a path relative to the project folder |
HTML provides the structure and meaning of a page. This appendix summarizes the document skeleton and the most common elements covered in Chapters 5 through 10.
| Element | Purpose |
|---|---|
<!DOCTYPE html> | Tells the browser to render the page in standards mode |
<html> | The root element of every HTML document |
<head> | Holds metadata, the title, and links to CSS — nothing visible on the page itself |
<body> | Holds everything the user actually sees |
<title> | Sets the text shown in the browser tab and search results |
| Element | Purpose |
|---|---|
<h1>–<h6> | Headings, in descending order of importance; never skip levels |
<p> | A paragraph of text |
<strong> / <em> | Strong importance / emphasis — both convey meaning, not just style |
<br> / <hr> | A line break / a thematic break between content |
<header> | Introductory content for a page or section |
<nav> | A block of primary navigation links |
<main> | The primary, unique content of the page (used once per page) |
<section> | A thematic grouping of content, usually with its own heading |
<article> | Self-contained content that could stand alone, such as a post or story |
<aside> | Content related to but separate from the main flow, such as a sidebar |
<footer> | Closing content for a page or section, such as copyright or contact links |
| Element | Purpose |
|---|---|
<a href="..."> | A hyperlink to another page, section, or resource |
<img src="..." alt="..."> | An image; alt is required for accessibility |
<ul> / <ol> / <li> | Unordered list / ordered list / list item |
<dl> / <dt> / <dd> | Description list / term / description |
<table> / <tr> / <th> / <td> | Table / row / header cell / data cell — for tabular data only, never for layout |
<figure> / <figcaption> | Self-contained media with an attached caption |
| Element | Purpose |
|---|---|
<form> | Groups related inputs for submission |
<label for="..."> | Names an input for sighted and assistive-technology users alike |
<input type="..."> | A single-line field; the type attribute changes its behavior (text, email, checkbox, radio, and more) |
<textarea> | A multi-line text field |
<select> / <option> | A dropdown menu and its choices |
<button> | A clickable control, typically used to submit a form or trigger JavaScript |
| Item | Purpose |
|---|---|
<meta charset="UTF-8"> | Declares the character encoding so text renders correctly |
<meta name="viewport" ...> | Tells mobile browsers how to scale the page |
<meta name="description" ...> | A short summary often shown in search results |
<link rel="icon" ...> | Sets the favicon shown in browser tabs |
Global attributes (id, class, lang, title) | Available on nearly every element to identify, style, or describe it |
<img> has an alt attribute.<h2> straight to <h4>).<main> element per page.Semantic HTML and accessibility are not separate topics from structure — they are what good structure produces. This appendix summarizes the landmark elements and accessibility habits taught across Chapters 6, 8, 9, and 29.
A page should have exactly one <h1>, and every heading after it should describe a level of the outline without skipping — an <h3> should only appear inside a section already introduced by an <h2>. Heading order builds the table of contents that screen reader users navigate by.
| Practice | Guidance |
|---|---|
| Alt text | Describe the content or purpose of the image in a short phrase; use alt="" (empty, not omitted) for purely decorative images. |
| Form labels | Every input needs a <label> connected with a matching for and id pair, or wrapped directly around the input. |
| Meaningful links | Link text should describe the destination ("Read the accessibility guide") rather than generic phrases ("click here"). |
| Keyboard basics | Every interactive element must be reachable and operable using only the Tab and Enter/Space keys, with a visible focus outline. |
A <div> styled to look like a button is invisible to keyboard and screen reader users unless extra work is added to make it behave like one. Prefer a real <button> or <a> element whenever the content is genuinely clickable.
CSS controls presentation. This appendix summarizes selectors, the cascade, and core styling properties taught in Chapters 11 through 14.
| Selector | Example | Selects |
|---|---|---|
| Type | p | Every element of that type |
| Class | .card | Every element with class="card" |
| ID | #main-nav | The single element with that id |
| Grouping | h1, h2, h3 | All listed elements, sharing one rule |
| Descendant | nav a | Any a nested anywhere inside a nav |
| Pseudo-class | a:hover | An element in a particular state, such as being hovered |
Cascade: when two rules conflict, the browser follows a defined order of precedence rather than guessing.
Specificity: ID selectors outrank class selectors, which outrank type selectors. More specific selectors win regardless of where they appear in the file.
Source order: among rules of equal specificity, the one written later in the stylesheet wins.
Inheritance: some properties (like color and font-family) pass automatically from parent to child unless overridden; others (like border and margin) do not.
| Category | Common Properties |
|---|---|
| Color | color, background-color — values as names, hex (#1a2c6b), rgb(), or hsl() |
| Typography | font-family, font-size, font-weight, line-height, text-align, text-decoration |
| Spacing | margin (outside the box), padding (inside the box), shorthand order top/right/bottom/left |
| Borders | border, border-width, border-color, border-style, border-radius |
width and height.Setting box-sizing: border-box makes width and height include padding and border, which is far easier to reason about than the default content-box behavior.
| Display Value | Behavior |
|---|---|
block | Takes the full available width and starts on a new line (e.g. <div>, <p>) |
inline | Flows within the surrounding text, sized only to its content (e.g. <span>, <a>) |
flex / grid | Turns the element into a layout container for its children (see Appendix E) |
none | Removes the element from the page entirely |
Flexbox, Grid, and responsive design give CSS its layout power. This appendix summarizes the material from Chapters 15 through 17.
| Flexbox | Grid | |
|---|---|---|
| Dimensions | One-dimensional — a single row or column | Two-dimensional — rows and columns together |
| Best for | Navigation bars, button groups, simple card rows | Full page layouts, photo galleries, dashboards |
| Activate with | display: flex | display: grid |
| Core properties | flex-direction, justify-content, align-items, gap | grid-template-columns, grid-template-rows, gap |
| Unit / Tool | Use |
|---|---|
% | Relative to the parent element's size |
rem | Relative to the root font size — the standard choice for scalable typography and spacing |
em | Relative to the current element's font size |
vw / vh | A percentage of the viewport's width / height |
max-width | Lets a container shrink on small screens but never grow past a comfortable reading width |
Write the base styles for small screens first, then use min-width media queries to add complexity for larger screens. This keeps the simplest, most constrained layout as the default rather than an afterthought.
Custom properties turn a stylesheet into a maintainable design system. This appendix summarizes Chapter 18.
| Concept | Description |
|---|---|
| Custom property | A reusable value, declared with two leading hyphens (--space-md) and read with var() |
:root | The conventional place to declare variables so they are available to the entire document |
| Color variables | Centralize a palette so a brand color can be changed in one place rather than hundreds |
| Spacing variables | A small fixed scale (e.g. sm, md, lg) keeps margins and padding consistent across a site |
| Reusable / utility classes | Small, single-purpose classes (.text-center, .mt-lg) that combine to style elements without repeating full rules |
| Theme preparation | Swapping the values inside :root (or a [data-theme="dark"] override) changes the whole site's appearance at once |
Group related rules together, comment major sections, and prefer variables over repeated hard-coded values. A stylesheet that uses variables consistently can be restyled by changing a handful of lines.
JavaScript gives a page behavior. This appendix summarizes the core syntax and browser APIs from Chapters 19 through 23.
| Construct | Example | Purpose |
|---|---|---|
| Variable | let count = 0; | A named, reassignable value |
| Constant | const name = "Site"; | A named value that cannot be reassigned |
| Template literal | `Hello, ${name}` | A string with embedded expressions |
| Function | function greet(name) { return `Hi ${name}`; } | A reusable, named block of logic |
| Comment | // a note to the reader | Ignored by the browser; explains intent to humans |
| Method / Property | Purpose |
|---|---|
document.querySelector('.card') | Returns the first matching element |
document.querySelectorAll('.card') | Returns all matching elements as a list |
element.textContent | Reads or sets an element's text |
element.setAttribute(name, value) | Reads or sets an HTML attribute |
element.classList.add() / .remove() / .toggle() | Adds, removes, or toggles a CSS class |
document.createElement('div') | Creates a new element in memory, ready to be inserted |
| Concept | Description |
|---|---|
| Event listener | Registers a function to run when a specific event occurs on an element |
| Event object | Passed automatically into the handler; carries details such as which key or element triggered it |
event.preventDefault() | Stops a browser's default action, such as a form actually submitting |
| Construct | Purpose |
|---|---|
[item1, item2, ...] | An ordered list of values |
for...of | Repeats a block once for each item in an array |
array.forEach(fn) | Runs a function once for every array item |
array.length | The number of items in an array |
This appendix summarizes form structure and JavaScript-driven validation from Chapters 9 and 24.
| Element / Attribute | Purpose |
|---|---|
<label for="email"> | Names the field for every user, including screen reader users |
<input type="text|email|password|number"> | A single-line field whose type changes validation and keyboard behavior |
<textarea> | A multi-line field for longer responses |
<select> / <option> | A dropdown menu of fixed choices |
<input type="checkbox"> | An independent on/off choice |
<input type="radio"> | One choice among a group sharing the same name |
required | Marks a field that must be filled in before submission |
<button type="submit"> | Submits the form |
Show error and success messages as visible text near the field they describe, not only as a color change, and announce them in a way assistive technology can detect (such as updating the text content of a labeled message element). Front-end validation improves the experience; it never replaces validation on the server.
JSON is the data format behind most data-driven pages. This appendix summarizes Chapter 28.
| Concept | Description |
|---|---|
| Object | A set of key/value pairs inside curly braces { } |
| Array | An ordered list of values inside square brackets [ ] |
| Array of objects | The most common shape for site data — a list of records, each with the same keys |
| Local JSON file | A .json file stored in the project's data/ folder and loaded with fetch() |
| Step | Purpose |
|---|---|
fetch(url) | Requests a resource and returns a promise |
.then() | Runs code once the previous promise resolves successfully |
.catch() | Runs code if the request fails |
| Loading state | Visible feedback shown while data is being requested |
| Error state | Visible, friendly feedback shown if the request fails |
Always handle the case where a fetch fails — a missing file, a network error, or a malformed response should never leave the user staring at a broken or blank page.
Browser developer tools turn invisible page behavior into something you can inspect and test. This appendix summarizes Chapter 4 and the debugging habits reinforced throughout the book.
| Problem | Where to Look | What to Check |
|---|---|---|
| Page looks unstyled | Network panel / Elements panel | Is the CSS file path correct? Did it load (not a 404)? |
| Style isn't applying | Elements panel → Styles pane | Is the rule crossed out (overridden) by a more specific or later rule? |
| Layout looks wrong | Elements panel → box model diagram | Are margin, padding, and width what you expect? |
| Nothing happens on click | Console panel | Is there a red error message? Does the selector actually match an element? |
| Image or script missing | Network panel | Is the request showing a 404 or the wrong file? |
| Page breaks on phone-sized screens | Responsive preview / device toolbar | Test at common breakpoints (e.g. 375px, 768px, 1024px) |
../ steps?This checklist consolidates the quality standards taught throughout the book, especially in Chapter 29. Run through it before considering any page finished.
A website's first publication is the beginning of its life, not the end of the project. This appendix summarizes Chapter 30.
example.com) that points to a hosted site.An alphabetical glossary of the core web development terms used throughout this textbook.
<a> element, used to create a hyperlink.name="value" inside the opening tag.var().data-* attribute used to attach extra information to an element for JavaScript to read.example.com, that points to a hosted website.2 + 2 or name.length.display: flex applied, whose direct children become flex items.font-family property.display: grid applied, whose direct children become grid items.id attribute.type attribute.main or nav, that marks a navigable region of a page.<link> element used to connect an external stylesheet (or favicon) to an HTML document.for...of, that repeats a block of code for each item in a collection.flex-direction.<head>, that is not displayed directly to users.+ or ===, that performs an operation on values.:hover, that matches an element in a particular state.querySelector / querySelectorAll) that finds elements using CSS selector syntax.name.css/main.css.<html> element for an HTML page.<script> tag.<p> or </p>, that opens or closes an HTML element.${ }.The following are worked answers to one representative review question from each part of the textbook. They model the depth and structure expected of a complete answer; they are not the only acceptable wording.
../ segments in a relative link matter, and what happens if there are too many or too few?../ moves the browser up exactly one folder level from the current file before it starts resolving the rest of the path. Too few ../ segments leave the browser still inside a folder it needed to leave, so it looks for the target in the wrong place; too many move it above the project's root folder entirely, also producing the wrong location. The correct number always equals the number of folder levels between the current file and the shared ancestor folder of the target file.p { color: blue; } and .intro { color: red; }, written in that order. The paragraph has class="intro". What color is the text, and why?.intro wins regardless of which rule appears first in the file. Source order only breaks ties between selectors of equal specificity — it does not override the specificity hierarchy itself.display: flex, flex-wrap: wrap to allow wrapping, and gap to create even spacing without manual margins on each link.document.querySelector('.card').textContent = 'Updated'; runs.card. It then takes the text content property of that element and replaces it with the new string "Updated". The page updates immediately because the DOM is a live, in-memory representation of the page — changing it changes what the browser displays, without reloading the page.fetch() request is not instantaneous, and a page with no loading state appears broken or frozen for however long the request takes. An error state matters because network requests can fail for many reasons outside the developer's control — a missing file, a slow connection, or a server outage — and without one, a failure leaves the user looking at a blank or stuck page with no explanation.<div> in place of a <button> for a "Show More" control. Identify the accessibility problem and how to fix it.<div> is not focusable by keyboard and is not announced as an interactive control to assistive technology, so keyboard and screen reader users may not know it can be activated at all. The fix is to use a real <button> element, which is focusable, operable with the keyboard, and announced correctly by default — without needing any extra accessibility code.An alphabetical index of elements, attributes, CSS properties, JavaScript methods, patterns, tools, and terms, cross-referenced to the chapters where they are introduced or used in depth.