Begin with what the person must understand
The confirmed task is reviewing an order. List the information needed: reference, customer, items and quantities, pricing breakdown, and a clear explanation if quoting fails. Which of those is a heading, which is a list and which is an action?
Pause: Sketch the reading order on paper. If the colors and decorative borders disappeared, would the sequence still make sense?
Three technologies, three responsibilities
HTML provides the document's structure and meaning. CSS controls presentation and layout. JavaScript connects data and behavior to the document. They cooperate, but none chooses the business policy automatically.
A browser parses HTML into a DOM tree. JavaScript selects and changes nodes in that tree. CSS rules affect their presentation. These are capabilities frameworks later build on; understanding them lets you inspect what a framework actually produces.
A small document skeleton
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Order quote</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main>
<h1>Review your order</h1>
<p>This preview calculates a quote. It does not place an order.</p>
<section aria-labelledby="order-heading">
<h2 id="order-heading">Order details</h2>
<p id="customer-name"></p>
<ul id="order-items"></ul>
</section>
<section aria-labelledby="quote-heading">
<h2 id="quote-heading">Calculated quote</h2>
<p id="quote-error" role="status" hidden></p>
<dl id="quote-breakdown"></dl>
</section>
</main>
<script type="module" src="./main.js"></script>
</body>
</html>
This is a structure sketch. Complete it yourself during the module lab, using the requirements and expected results. IDs identify elements for selection and labels. They must be unique within the document. A main element identifies the principal content; headings establish a reading hierarchy. A list represents items, and a description list can pair amount labels with values.
hidden keeps an unavailable message out of the normal rendered page until needed. The status region can announce changes without forcibly moving keyboard focus. Live announcements should still be tested with assistive technology; an attribute alone is not a complete accessibility assessment.
Add layout without changing meaning
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; }
main { width: min(100% - 2rem, 60rem); margin: 2rem auto; }
section { padding: 1.25rem; border: 1px solid #64748b; border-radius: 1rem; }
.order-layout { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) {
.order-layout { grid-template-columns: 1fr 1fr; }
}
The base layout stacks content; the media query allows two columns when there is room. The width expression leaves space around the page and limits long lines. Avoid fixed widths that force horizontal scrolling on a narrow screen. A layout is responsive because it adapts to content and space, not because it names particular phone models.
Challenge an attractive but weak implementation
A clickable div styled as a button may look correct but lack native keyboard behavior. Use a real button for an action and a link for navigation. When adding interactions, use native buttons and ensure each performs the action its name promises. Implement a clear read-only result first; form controls are an extension for later lessons.
Similarly, a discount shown only in green is ambiguous for someone who cannot perceive that color. Give it a visible label and amount. Information must not depend on color alone.
Independent review
Draw the proposed page at a narrow width. Put a long customer name and several long item names in it. Identify which text should wrap and whether the amount labels remain associated with their values. Then describe what 200% zoom should preserve.
Correction and reasoning
Text should wrap without covering other content; the logical reading order should remain details then quote. Labels should remain visible beside or above their values. Zoom should not hide information or controls. A two-column layout may collapse to one; preserving meaning matters more than preserving the original geometry.
Check your understanding
Could an HTML heading change discount eligibility? No. Could CSS hide an invalid order without making it valid? Yes. Presentation and domain correctness are separate dimensions, so both need review.