WK12
Web Coding Literacy
What a webpage is made of — structure, style, behavior — and how it gets online
Lecture Slides
Web Coding Literacy
LAAR 61400 · Week 12
REGIONS ELEMENTS <nav>navigation bar <header>hero / title <main>content · cards <footer>footer <a>link <h1>heading <button>action <img>image <article>a card <html> whole document (+ head) <body> everything on the page <div> groups the cards Chrome (tabs · address bar) isn't part of the page — the document begins below it
OMA — oma.com homepage oma.com ↗
Cargo — Sites in Use gallery cargo.site/community/in-use ↗

HTML
Structure

HyperText Markup Language — the tags that say what each piece of content is: a heading, a paragraph, an image, a link.

CSS
Style

Cascading Style Sheets — rules that control how those pieces look: color, size, spacing, position.

JS
Behavior

JavaScript — code that makes the page do things in response to the user: clicks, input, changes after the page loads.

Rendered page
Rendered page
Rendered page
Rendered page
margin — space outside
border
padding — space inside
content
Rendered page
forest

grid-template-columns: repeat(12, 1fr) — place blocks across the 12 tracks
header — spans 1 / 13
main · 1 / 7
aside · 7 / 13
footer — spans 1 / 13
Flexbox = 1D (a line) · Grid = 2D (a field)

Habits that keep a page clean

  • Align to the grid — snap blocks to the 12 columns; almost-aligned reads as broken.
  • Let it breathe — use whitespace on purpose; don't fill every pixel.
  • One clear hierarchy — a single dominant heading; size sets reading order.
  • Limit type — two fonts at most; a consistent spacing scale.
  • Go responsive — test it narrow (phone width); blocks should stack, not overflow.
  • Restraint in color — a limited palette, one accent (Week 04 still applies).
Your filesHTML · CSS · JS
(what you just built)
→
A hosta computer that stays on, serving the files
GitHub Pages
→
Any browseranyone who visits
gets the files

Hosting means renting space on a computer that stays on around the clock, serving your files to anyone who visits.

This site: your pages live in the zihao-site GitHub repo; GitHub Pages serves them for free.

You typezihaozhang.cc
→
DNS lookupthe internet's phonebook
name → number
→
IP address185.199.108.153
the host's number
→
Files loadGitHub serves
your page

DNS — the Domain Name System is the internet's phonebook: it translates a human name like zihaozhang.cc into the numeric IP address of the computer that serves the site.

A record — points a domain straight to an IP address.

CNAME — points one name to another name (an alias), so you target a host's domain instead of an IP that might change.

/ 16
Playground — build the whole page
Rendered page
Reference — keep these open
MDN Web DocsThe authoritative reference for HTML, CSS, and JS. W3SchoolsBeginner tutorials + a Try-It editor for every tag and property. A Guide to FlexboxCSS-Tricks — the one-page flexbox cheat sheet. A Guide to CSS GridCSS-Tricks — the companion grid reference. GitHub Pages docsFree hosting + custom domains — how this site ships. View sourcePress Ctrl/Cmd+U on any site to read its real HTML.