LESSON 01 OF 03 · WRITTEN GUIDE
Read a page like a developer
Read the design as a structure of content and behavior. HTML describes meaning, CSS controls presentation, and JavaScript handles interaction. You do not need to memorize every property before building, but you do need to understand which layer you are changing.
Make it practical
Label the heading, navigation, main content, form, and footer in your sketch. Identify which elements are links and which are buttons. A link navigates; a button performs an action.
TRY THIS PROMPT
Explain the semantic HTML structure for my reading-list screen. Identify repeated components. Keep the first implementation to one page and explain the role of each file before writing code.
Check your work
Does the page have a logical heading order? Are form controls labeled? Can you still understand the content without its styling?
Use the output as a draft. Compare it with the brief, inspect the work, and keep the decisions you can explain.