HTML and CSS for the front-end explained: HSC Software Engineering Module 2

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>School newsletter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Year 12 newsletter</h1>
  </header>
  <main>
    <article>
      <h2>Term 2 highlights</h2>
      <p>Software Engineering students built a study portal.</p>
    </article>
  </main>
  <footer><p>(c) 2026 the school</p></footer>
</body>
</html>

body { font-family: system-ui; margin: 0; }
header, main, footer { padding: 1rem 2rem; }
main { max-width: 70ch; margin: 0 auto; }
@media (max-width: 600px) {
  header, main, footer { padding: 1rem; }
  h1 { font-size: 1.5rem; }
}

The HTML uses semantic elements (<header>, <main>, <article>, <footer>) so assistive tech and search engines understand structure. The viewport meta tag tells mobile browsers to use the device width. CSS controls colour, spacing and typography, with a media query reducing padding and shrinking the heading on narrow screens.

Markers reward a valid HTML5 skeleton, semantic elements (not just divs), the viewport meta tag, and a working media query with a sensible breakpoint.

The <main> element wraps the primary, unique content of the page. There should be only one <main> per page, and it should not include content repeated across pages such as the navigation bar, sidebars or footer.

Marking criteria: 1 mark for naming <main>, 1 mark for explaining it holds the page's unique content (excluding repeated regions).

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 1rem;
  border: 2px solid #333;
}

The property box-sizing: border-box makes the browser include padding and border inside the declared 300px width, so the rendered box is exactly 300px wide instead of 300px plus padding plus border.

Marking criteria: 1 mark for the correct property/value, 1 mark for correct placement in the rule, 1 mark for explaining the effect on the rendered width.

At 1200px, the grid fits as many 250px-minimum columns as will fully fit (four columns of roughly 287px each after accounting for the 1rem gaps), each stretched with 1fr to share the remaining space evenly.

As the viewport narrows, auto-fit recalculates how many 250px-minimum columns can still fit; the column count drops (to three, then two) as space shrinks, until only one column fits at 400px, at which point cards stack vertically.

No media query is needed because auto-fit with minmax() already responds continuously to the container's width, unlike a media query which only changes rules at fixed, pre-chosen breakpoints.

Marking criteria: 1 mark for describing more columns at 1200px, 1 mark for describing the column count shrinking as width decreases, 1 mark for correctly explaining auto-fit/minmax recompute continuously, 1 mark for contrasting this with the fixed-breakpoint behaviour of a media query.

Fault 1: a <div> is used as a clickable control. A <div> is not focusable by keyboard and is not announced as a button by screen readers. Fix: use a real <button> element, e.g. <button onclick=\"submitForm()\">Submit</button>, which is keyboard-focusable and announced with its role.

Fault 2: the input has only a placeholder, no <label>. Placeholder text disappears once text is typed and is not reliably read as a label by all assistive technology. Fix: add an associated label, e.g. <label for=\"email\">Email</label><input id=\"email\" type=\"text\">.

Marking criteria: 1 mark per fault identified, 1 mark per correct fix, to a maximum of 4 marks.

By default, box-sizing: content-box means the declared width: 100% applies only to the content area. Padding and border are added on top of that width, so the element's total rendered width becomes 100% + 2rem (padding on both sides) plus any border, which is wider than the parent container. This pushes the element outside the parent, often triggering an unwanted horizontal scrollbar.

The fix is to set box-sizing: border-box (commonly applied globally via a *, *::before, *::after { box-sizing: border-box; } reset). This makes the declared width include padding and border, so width: 100% stays exactly 100% of the parent regardless of padding.

Marking criteria: 1 mark for identifying content-box as the default, 1 mark for explaining padding/border are added outside the declared width, 1 mark for correctly describing the overflow effect, 2 marks for stating and explaining the border-box fix.

Diagnosis. Text appearing tiny and requiring pinch-zoom on a phone is the classic symptom of a missing viewport meta tag: without it, mobile browsers assume a desktop-width layout (commonly 980px) and scale the whole page down to fit the phone's screen, shrinking text and controls together. Navigation links running off the screen suggest the nav is laid out with fixed pixel widths or without wrapping, and there is no responsive rule to stack or shrink it on narrow viewports.

Fix 1: add the viewport meta tag to the document head:

<meta name="viewport" content="width=device-width, initial-scale=1">

This tells the phone to render the page at its actual CSS pixel width (e.g. 390px) instead of a scaled-down desktop layout, so real font sizes are used.

Fix 2: make the navigation responsive. Lay the nav out with Flexbox and let it wrap, and add a media query to stack links vertically below a chosen breakpoint:

nav { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 600px) {
  nav { flex-direction: column; gap: 0.5rem; }
}

Fix 3: use relative units for text and spacing (rem for font sizes, %/max-width for containers) so type scales with the user's base font size rather than staying a fixed pixel value that only "works" at one width.

Verification. After the fix, the page should render at native size on a 390px-wide phone with the nav links either wrapping onto a new line or stacking in a single column, and no horizontal scrollbar or pinch-zoom should be needed.

Marking criteria: 2 marks for correctly diagnosing the missing viewport meta tag as the cause of the tiny/zoomed text, 1 mark for diagnosing the nav's lack of responsive rules, 2 marks for a complete, working fix (viewport tag plus a responsive nav rule), 1 mark for justifying the fix with the underlying mechanism (device-width rendering vs desktop-width scaling).