Quick reference – TPRM Way

Come to this appendix after the concepts make sense to you. A reference sheet is at its most useful when it reminds you of something you have already practiced.

Minimal HTML Document

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
  <link rel="stylesheet" href="styles.css">
  <script src="app.js" defer></script>
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
</html>

HTML element	Typical purpose
header	Introductory content for a page or section.
nav	Major navigation links.
main	The page’s primary unique content; normally one per document.
section	A thematic grouping, usually with a heading.
article	A self-contained item that could stand independently.
aside	Related but secondary content.
button	An action the user can trigger.
label	A programmatic label for a form control.

CSS Patterns

Need	Pattern
Predictable box sizing	, ::before, *::after { box-sizing: border-box; }
Readable measure	max-width: 65ch;
Centered content	width: `min(100% - 2rem, 70rem)`; margin-inline: auto;
Flexible row	display: flex; gap: 1rem; flex-wrap: wrap;
Responsive cards	display: grid; grid-template-columns: repeat(auto-fit, `minmax(16rem, 1fr)`);
Visible keyboard focus	:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

JavaScript Patterns

JavaScript

const element = document.querySelector("#id");

element.addEventListener("click", function () {
  // update state
  // render the new state
});

const number = Number(text);
if (!Number.isFinite(number)) {
  // report invalid input
}

const saved = localStorage.getItem("key");
const data = saved ? JSON.parse(saved) : [];

Fetch Pattern

JavaScript

async function loadData() {
  try {
    const response = await fetch("data.json");

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
    return [];
  }
}

Testing Heuristic

Test type	Question
Normal	Does ordinary valid input behave as expected?
Boundary	What happens at zero, empty, minimum, maximum, first, and last?
Invalid	Does bad input produce a useful result rather than corrupt state?
Repeated	What happens after the action is performed twice or after reset?
Responsive	Does the interface still work at narrow and wide widths?
Keyboard	Can controls be reached, identified, and activated without a mouse?