The Bones and the Skin
Goal — Understand HTML (structure) and CSS (style) by directing changes to your home page.
By the end — A styled home page you directed and can read — you know which lines set structure and which set style.
Map first — What is this technology for, and how does it fit with the others?
1Understand HTML as structure
HTML is the skeleton of a page. Headings, paragraphs, sections, buttons. It says what things are, not how they look.
The pattern for every day this phase: build, then understand. First ask Claude to make something, then ask it to walk you through what it wrote. The walk-through is where the learning happens.
Walk me through my index.html and explain how HTML describes the structure of a page.2Understand CSS as style
CSS controls how things look — color, size, spacing, layout. It says how things appear. Structure and style are separate jobs: HTML is the bones, CSS is the skin.
Add some clean CSS to style the home page, then explain how CSS selectors target elements.3Meet the box model
Every element on a page is a box with four parts: content, padding, a border, and margin. This one idea explains most of layout.
Explain the box model using the elements on my page as examples.4Direct a real change
Now make a design decision and understand its implementation — the core loop of a design engineer.
Make the heading larger and add breathing room around the paragraph.Show me exactly which lines changed and what each one does.Recap — You directed a real style change and read the code behind it — HTML sets what things are, CSS sets how they look.