Web Basics (HTML/CSS)

What this covers

• Writing a valid page skeleton: doctype, html, head, body, title, and why the head is not visible on the page
• Common content tags: headings h1-h6, p, ul/ol with li, a with href, img with src and alt, and div/span for grouping
• Attaching CSS three ways (inline style, style block, external file with link) and knowing when an external stylesheet is the sensible choice
• Selectors and specificity basics: element, class, and id selectors, plus how the class attribute connects HTML to CSS
• Core properties: color vs background-color, font-family and font-size, text-align, plus the box model of margin, border, and padding
• Simple layout and structure: block vs inline elements, centring a container, and using semantic tags like header, nav, main, and footer

Where learners get stuck

Confusing padding with margin when boxes look wrong

Both add space, so students change one at random until it looks right. They need the mental image that padding pushes the content away from the border inside the box, while margin pushes other boxes away from the outside.

Writing class="box" in HTML then .box in CSS, or forgetting the dot and hash entirely

The syntax flips between the two languages. Learners write class .box in the HTML or box { } in the CSS, the rule silently does nothing, and there is no error message to point at.

Assuming the browser will report a mistake the way Scratch blocks refuse to snap together

Students coming from block programming expect the tool to prevent invalid code. HTML fails quietly: an unclosed div or a semicolon left off a CSS declaration just renders oddly, so learners have to develop the habit of checking their own nesting and punctuation.

What a session looks like

A typical 25-30 minute session starts with the learner describing the page they are building or the assignment they were set. The tutor works through one piece at a time, dictating or discussing code while the student types in a text editor or an online editor, then asks them to reload and describe what changed. Errors are diagnosed by having the student read the relevant lines back. Sessions often end with a small change to try independently, such as adding a nav bar or restyling one section.

Helpful to know first

• Comfortable typing and saving files, or using an online code editor like a browser-based sandbox
• Able to open a file in a web browser and reload it
• No prior coding required, though experience with block-based programming makes the idea of nesting familiar

Questions

Is HTML actually programming?

HTML is a markup language, not a programming language, and CSS is a styling language. Neither has loops, variables, or conditions. They are still a useful starting point because students see immediate visual results and learn precise syntax, which transfers to JavaScript or Python later.

What software does my child need?

Any plain text editor and a web browser is enough. Many students use a free browser-based editor so nothing needs installing and work is saved automatically. The tutor can talk through either setup.

Can the tutor help with a school web page project that's due?

Yes. The learner can describe the brief and the code they have so far, and the session works through the parts that aren't behaving. The tutor explains what each fix does rather than just supplying finished code.

How does a voice tutor help with something visual?

The student reads their code and describes what they see on screen; the tutor works from that. Talking through markup out loud tends to expose unclosed tags and mismatched selectors, and it forces the learner to name what each line is doing.