SEO & Metadata Foundations Class 17
Today's resources — market research, SEO basics, Google My Business, and the full course timeline.
Plain-English intro to SEO, meta tags, Google My Business, brand consistency, and using Gemini for market research.
Sample market-research report on luxury client acquisition in Claremont. Demonstrates how SEO and metadata fit into a niche-market strategy.
The full 26B teaching schedule — every class, date, and topic in one live spreadsheet. Keep this open.
The classic free SEO primer. 8 chapters. Read 1–3 today, the rest over the next few weeks.
Google's own docs on how to make your site discoverable. Authoritative — read alongside Moz.
Free tool that puts your business on Google Maps and Search. Essential for local clients.
Quick syntax reference for every meta tag you'll need — title, description, viewport, Open Graph.
Class Lesson Materials
Every class's lesson notes, reference sheets, and starter code in one place. Linked from the homepage but collected here for easy browsing.
Course welcome pack — what to expect, how to set up your laptop, ground rules.
Text-formatting tags, page setup, semantic structure, lists, and images. Plus tag reference sheet.
Build a nav bar, style buttons and tables, and intro to colour models, hex codes, and accessibility.
Design thinking, digital résumé, then build a themed one-page site of your choosing.
How to take an idea from sketch to working webpage. Activity Module 1.
Intro to Bootstrap 5 — grid system, components, utilities, and the breakpoint chart.
The Topic 5 Bootstrap demo files we worked through in class.
Copy for the Skywings home page — hero, resort cards, services. Use with the starter ZIP.
Copy for the about page — directors, services, team. Use with the starter ZIP.
Wednesday 13 May lesson plan in HTML.
How to handle client feedback, scope creep, and difficult conversations.
Practice Games
Sneaky, fun ways to drill CSS selectors, flexbox, and grid until they feel automatic.
Help frogs find their lily pads by writing real flexbox CSS. 24 levels, takes ~30 min. Best intro to flexbox there is.
Water carrots and not weeds using CSS Grid properties. Same team as Froggy. 28 levels.
Learn every CSS selector by serving the right plates. 32 increasingly tricky levels.
Build code-speed. The faster your fingers, the more time you spend thinking instead of hunting keys.
Minimal typing-test site dev favourites swear by. Track your WPM and accuracy over time.
Real-world UI challenges with provided designs. Build it, submit it, get community feedback. Start with "Newbie".
Bite-size programming "katas" ranked by difficulty. Pick JS, start at 8 kyu (easiest). Builds logic muscle.
Move your hero around a fantasy map by writing real code. Surprisingly addictive way to learn JS basics.
Templates & Starters
Clean starting points you can fork. Pick one, gut what you don't need, build on top.
The industry-standard clean HTML/CSS/JS starter. Includes everything you need, nothing you don't.
Free Bootstrap 5 starter templates — dashboards, landing pages, blogs. Copy, paste, edit.
100+ free Bootstrap templates — portfolios, agencies, restaurants. Great variety for your S2 build.
Beautiful free responsive HTML templates. Pure HTML/CSS, easy to learn from and customise.
Premium Tailwind templates (paid). Worth studying for free even if you don't buy — modern patterns.
Ready-to-use Tailwind CSS blocks — heroes, features, pricing, contact. Free, copy-paste.
Free design templates (Figma + assets) for you to build. Like Frontend Mentor but with cleaner files.
Tim's complete site example from class. Download, unzip, read the code. See how a small site fits together.
Repos & Code References
Real code to read. Reading other people's code is half of learning to write good code.
The complete worked example site we used in Subject 1. View source, see the HTML/CSS pattern.
Your 26B yearbook page — see how a JSON data file drives a dynamic HTML wall.
Play a trivia game built in plain HTML/JS — questions sourced from an XLSX. Open and inspect to learn.
Every HTML tag, what it's for, attributes, examples. The single most-used reference for working web devs.
The biggest free learn-to-code project on GitHub. Their HTML/CSS curriculum reinforces what we cover.
Real questions junior devs get asked. Start reading now — you'll learn what concepts matter.
Hundreds of small, working HTML/CSS/JS examples. Read, fork, modify. Aligned with their docs.
Browse hundreds of dev portfolios on GitHub. Pick one you like, read the code, copy what works.
Design & Build Tools
The daily kit. Wireframe, pick colours, choose fonts, find icons.
Sketchy, hand-drawn-style wireframing. Free, no account. Best low-fidelity tool for ideating layouts.
Industry-standard interface design tool. Free tier is generous. Great for hi-fi mockups + component libraries.
Open-source Figma alternative. Browser-based, free forever. Worth a look if you dislike Figma's model.
Generate beautiful colour palettes by hitting spacebar. Lock the colours you like, regenerate the rest.
See your colour palette applied to a real mock website instantly. Brilliant for testing combos before you commit.
1,600+ free web fonts. Copy the link tag, paste in your head, you're done. Use for every project.
Indian Type Foundry's free fonts. Smaller, sharper curation than Google Fonts. Premium-feeling for free.
2,000+ free open-source icons. SVG or icon font. Used by this whole hub.
Hand-drawn SVG icons from the Tailwind team. Clean, modern, free.
Free high-quality stock photos for your site. Search, download, no attribution required.
More free stock photos + videos. Often has shots Unsplash doesn't. Used in our class examples.
Free repeatable SVG background patterns. Drop into your CSS for instant texture.
Inspiration & Galleries
When you're staring at a blank page, copy the masters. Study before you steal.
The premier "best of the web" gallery. Look at "Site of the Day" daily for a year and your eye improves dramatically.
Curated gallery of landing pages. Filter by category, style, colour. Best place for landing-page inspiration.
Daily inspiration: bold, unusual, beautifully-crafted websites. Strong taste, narrow filter.
Long-running web design gallery. Browse by industry or style — useful for client work inspiration.
Library of UX patterns from real apps. Browse "How does Airbnb handle X?" — instant answers.
Single-section sites you can build in 60 seconds. Great for studying tight, focused layouts.
Cheat Sheets & Docs
Bookmark these instead of asking AI for syntax. Build the muscle of consulting authoritative sources.
The bible. HTML, CSS, JS, web APIs — Mozilla's docs are the canonical reference for the entire web.
Fast, instant-search docs for HTML/CSS/JS/Bootstrap/jQuery and dozens more. Works offline. Bookmark.
Every CSS selector, property, and concept with examples. Better written than MDN for browsing/learning.
One-page cheat sheets for everything — flexbox, grid, git, markdown, regex. Print the ones you use daily.
Visual one-page flexbox reference by Malven. Every property with a picture. Worth printing.
Same idea, for CSS Grid. Pin to your wall. Saves you Googling "grid-template-columns syntax" every time.
Visual cheat sheet for every HTML element. Click a tag, see examples + browser support at a glance.
Tim's own terminal cheat sheet for class — cd, ls, mkdir, git basics. Print this if you take nothing else.