Dissect a complex web page
Pick a rich, real-world web page (a news homepage, an e-commerce product page, a streaming service) and analyze it: identify its HTML structure, CSS styling, and JavaScript interactions.
Steps
- Choose your specimen. Something with layered layout and interactivity — not a plain blog.
- Open DevTools (right click → Inspect). Spend 10 minutes just hovering the element tree and watching parts of the page highlight.
- Map the structure. Sketch the page as boxes: header, nav, main content areas, cards, footer. Match your sketch to the actual HTML containers.
- Find the styling. Pick 3 elements and identify in the Styles panel: the font, the spacing, the colours. Change them live in DevTools — restyle a headline.
- Spot the behaviour. Find 3 interactions (a dropdown, a carousel, an add-to-cart) and describe what changes on the page when they fire.
- Annotate. Produce one annotated screenshot or slide per layer: structure / style / behaviour.
Things to keep in mind
- Your DevTools edits are local and temporary — refresh and they're gone. You can't break the real site.
- When you find something baffling, ask an AI to explain that exact snippet. Judge whether its explanation matches what you observe.
Submission
- 3 annotated views (structure, style, behaviour) + 3 sentences on the most surprising thing you found. Present in class next week.