Common Mistakes and What’s Next

Mistake: nesting divs instead of using semantic tags

A page built entirely from generic <div> elements works visually but tells a screen reader (and a search engine) nothing about its structure. Reach for <header>, <nav>, <main>, and <article> wherever they genuinely apply, covered back in Lesson 2.

Mistake: relying only on color to convey meaning

/* not enough on its own: */n.error { color: red; }nn/* better: pair color with an icon, label, or border so then   meaning survives for colorblind visitors too */n.error { color: red; border-left: 3px solid red; }n.error::before { content: "⚠ "; }

Roughly 1 in 12 men have some form of color blindness. If red vs green is the only signal for an error state, a meaningful slice of visitors miss it entirely — always pair color with a second cue like an icon, label, or shape.

Mistake: forgetting to test on an actual small screen

Resizing a desktop browser window is not the same as testing on a real phone — touch targets that look fine with a mouse cursor are often too small to tap reliably, and text that looks fine at desktop zoom can be uncomfortably small on an actual device. Use your browser’s DevTools device toolbar (usually a phone/tablet icon) at minimum, and test on a real phone before shipping anything important.

Mistake: inline styles everywhere

<p style="color: red; font-size: 14px;"> works, but scattered across dozens of elements it becomes impossible to maintain — change one shared style and you are hunting through every single tag. Keep styling in CSS classes and files, exactly as covered in Lesson 1, and reserve inline styles for the rare case of a truly one-off, dynamically-computed value.

You have completed the course

You now know how to structure a page semantically, build accessible forms, style with the box model, lay out real interfaces with Flexbox and Grid, and make a page work across screen sizes — the exact foundation the JavaScript course on this site builds directly on top of. If you have not taken it yet, that is the natural next step.