Lesson 01 of 5 in Module 01
⏱️ 02 Mins readWhat static HTML means today
A static site is a folder of ready-made files — mainly HTML, CSS, and images — that a browser loads as-is. No database rewriting the page on every click (in the simple model we use here).
That sounds basic. For many real jobs — portfolio teasers, event pages, hobby sites, “about us” landings — basic is enough.
The mental model (2 minutes)
Picture one folder:
my-site/
index.html
about.html
css/style.css
images/
The browser follows links between files. Hosting only changes who can reach those files:
| Where | Who sees it | Good for |
|---|---|---|
Local (file:// or localhost) |
You | Quick tests |
| Hosted (Netlify, Vercel, own server) | Anyone with the URL | Real users, Lighthouse on live URL |
Callout
Simple hosting does not remove your job to check structure, truth, and accessibility. Static is a delivery choice. Quality is still yours.
Do this — name your scenario (10 minutes)
Task: In one paragraph (5–8 sentences), describe a real work or hobby page where a static site is enough. Include:
- Who the page is for
- What information it shows
- Why a login or database is not needed
Starters if you are stuck: job-hunting portfolio · weekend event page · side-business services page with phone and email.
Self-check (not graded):
- You named what would change if the site needed accounts or live data
- You could explain this to a colleague without jargon
Example — community group (30 seconds)
A volunteer group needs a home page (mission, meeting times) and a contact page (email, map link). Files: index.html, contact.html, shared css/style.css. Test locally, upload folder to a static host, share one public link. No database required.
Check
- You can sketch a two-page folder tree on paper
- You know the difference between local test and public URL
- You accept that “it loads” ≠ “it works for everyone” (accessibility comes later)