Web Development
High School (9-10) · Computer Science
This topic covers building web pages that run in a browser: structuring content with HTML, styling and laying it out with CSS, and adding behaviour with JavaScript that reacts to what a visitor clicks or types. Sessions are conversational and hands-on — you describe the page you are building or the code that is misbehaving, and we work through the structure, the selectors, and the event handling step by step. Work stays on the front end (the part of a site that runs on the visitor's own computer), so no server setup or hosting account is needed to follow along, though we do talk through how a finished page gets published.
Start a session on Web DevelopmentWhat this covers
- Writing valid HTML structure: nesting, attributes, and choosing semantic elements like header, nav, section, article and footer instead of stacking generic divs
- CSS selectors, the cascade, and specificity — why an id rule beats a class rule, and how inherited properties like font-family pass down the tree
- The box model and layout: content, padding, border and margin, plus building rows and grids with Flexbox and CSS Grid rather than floats
- Making pages respond to screen size using relative units, max-width and media queries, and testing at phone and desktop widths
- JavaScript in the browser: selecting elements with querySelector, changing text, classes and styles, and running code on click, submit and input events
- Building and validating a form — input types, labels, required fields — and reading the entered values in JavaScript
Where learners get stuck
- Treating HTML as a way to make things look a certain way, so headings get picked for their font size and <br> tags get used for spacing
- Browsers do apply default styles to h1, h2 and p, so the visual result initially looks right. The habit only breaks down later when CSS overrides those defaults and the page structure turns out to mean nothing to screen readers or search engines.
- Assuming the CSS rule written last always wins, then getting stuck when a rule that 'should' apply silently does nothing
- Source order only decides ties. Specificity is calculated first, and a rule like #menu a quietly outranks .link written fifty lines below it. Without inspecting the computed styles in developer tools, the failure looks random.
- Putting a <script> tag in the <head> and getting null back from querySelector
- Scripts run the moment the parser reaches them, so elements further down the page do not exist yet. The error message mentions a property of null rather than the real cause, which sends learners hunting for a typo in the selector.
What a session looks like
A typical session starts with the page or feature you are working on — a portfolio site, a class project, a button that will not respond. You read out or describe the relevant markup and rules, and we narrow down where the browser's view of the page differs from yours, often by walking through what developer tools show for that element. From there we make one change at a time and predict the result before you reload. Sessions usually end with a small extension task: add a media query, refactor repeated CSS into a class, or handle one more event.
Helpful to know first
- Comfortable typing code in a text editor and saving files into folders
- Able to open a local HTML file in a browser and refresh it after edits
- Basic familiarity with variables, if statements and functions from any language is helpful for the JavaScript portion, but not required to start with HTML and CSS
Questions
- Does my child need to know Python before learning web development?
- No. HTML and CSS are not programming languages and can be started cold. Prior experience with variables, conditionals and loops does make the JavaScript sections move faster, but those ideas can be introduced here instead.
- What software do we need to install?
- A free code editor such as VS Code and any modern browser is enough. Everything at this level runs from files on the computer, opened directly in the browser. No web hosting, database or paid tools are needed.
- Is this the same as learning React or WordPress?
- No. This topic covers the underlying HTML, CSS and plain JavaScript that frameworks and site builders sit on top of. Those tools are much easier to pick up afterwards, but they are not taught here.
- Can sessions help with a school project or coursework page that is already half built?
- Yes. Bring the existing files and describe what is going wrong or what is meant to be added next. Work focuses on explaining why the current code behaves as it does so you can make the changes yourself.