Front-end design connects an interface’s visual decisions with its working implementation. That includes content hierarchy, spacing, typography, controls and how those choices behave in a browser.
Start with the task
For a lesson page, the task might be “find a working example and copy it.” The design should make that action easy to recognize, while keeping the explanation readable. A dramatic image is less useful if it pushes the example far away.
Work at the right level of detail
A wireframe helps compare content order. A detailed prototype helps inspect typography and states. You can also prototype directly in HTML and CSS. There is no mandatory sequence that fits every team.
Carry the decisions into behavior
A control needs a name, focus state and result, not only a background color. A layout needs wrapping rules and room for real text. A prototype becomes more useful when it exposes those constraints rather than hiding them behind placeholder copy.
Exercise: build a short article with a heading, a code example and a link to the next lesson. Test it at a narrow width and with a keyboard. Explain which design decision helps each task.
Job titles and responsibilities vary. Some designers write code, and some developers make visual decisions. Use the HTML foundations and layout paths to build the common skills.
Sources
Reference 1 Reference 2 provide the technical details and current compatibility information.