Skills / Build a website

Build a website

Build a website and put it live in the first session. Real content only: a person, club, business, or event that exists. Use when they say "build a website", "make me a site", or "I need a page for X".

Watch the first two minutes

This is how a session goes, including the deploy everyone puts off. Click through it.

Never put anything online before?

This skill assumes exactly that. The bar it holds you to: live at a real URL by the end of the first sitting, made only of true content, in plain HTML and CSS you can read top to bottom. No framework, no site builder, no file in your own site you can't explain. These are the kinds of pages people ship with it in an afternoon:

A page for your club A page for one event A page that gets you tutoring work

What you end up with

A small site you can hand to anyone, and the ability to change it yourself. Here is what the finished first session actually leaves behind:

maplewood-climbing/            1
├── index.html    the whole site, top to bottom
├── style.css     90 lines, colors they chose
└── photos/       six real photos from meets

live at:  username.github.io/maplewood-climbing  2

ship pass, checked together:   3
  page title + description     done
  favicon                      done
  every link clicked           done
  readable on a phone          done
  sent to one real person      done

Questions people actually ask

Where to go from here

No site subject yet? These make good first pages:

A page for your dog A page for your band A babysitting page that gets calls

Site live? The natural next moves:

Your own domain Get found by name See who visits

Ideas to use it on

• The question everyone asks you — There is a question your friends keep bringing to you: which phone to buy, how to fix their free kick, what to watch next, how to get the game running on a bad laptop.
• The babysitting page — A page parents can forward to other parents: your availability this month, your rate, and short quotes from families you have sat for, used with their permission.
• The bake order page — The thing you already bake well, offered by the batch: what it is, what a batch costs, and how far ahead to ask.
• Band page — A site for your band, or your friend's band: who plays what, one recording a visitor can press play on, upcoming gigs even if the next gig is a garage, and photos from practice.
• The bike repair page — You already fix flats and adjust brakes for friends.
• The bilingual help page — You speak two languages; some of your neighbors' forms, letters, and phone calls only come in one.
• Errands for the block — Store runs and pickups for the older neighbors who already know you, with a page their adult children can read and trust: who you are, what you do, and a contact form your parents okayed.
• The camera roll, curated — You already shoot your friends' games and events.
• Carpool rota — Who drives to practice which day, this month and next, posted where every family can see it.
• Your club's page — A page for a club you are in: what it does, when and where it meets, how to join, and a photo from a meeting that happened.
• The commission page — A page for the thing you already make, whether that is drawings, baked goods, or bracelets: photos of finished pieces, what a request costs, and how to ask for one.
• The commute experiment — Leave for school at a different time each day for a week, log every trip the same way, and publish the answer to when you should leave.
• Count something for a week — Pick something countable in your daily orbit and count it the same way for a week: cafeteria line length every five minutes, hallway traffic between periods, cars rolling the stop sign on your corner.
• Desk setup page — Your desk, documented: every item on and around it, what it is, what it cost, why it is there, and what you would change.
• The dog page — A page for the dog walking and sitting you already do: photos of the dogs, what you charge, and which streets you cover.
• The event page people keep texting you about — Some event is coming that people keep texting the same questions about: your cousin's wedding weekend, the school fest, the campout.
• The family birthdays page — Everyone in your extended family, at one URL: who they are, when their birthday is, and what they would honestly like.
• A reference site for something you know deeply — A well-organized reference for something you already know deeply: a game, a sport, a music scene, a hobby.
• Forecast vs. reality — Same spot, same time, every day: record the temperature at your window next to what the forecast promised for that hour, then chart the gap.
• The free-stuff map — A page mapping every water fountain, public bathroom, and free wifi spot near your school, each one checked on foot by you.
• Friend-group yearbook — A yearbook site for your friend group: photos, superlatives, and a timeline of the year's moments, made to be looked at again in ten years.
• The garage sale catalog — Your family's garage sale, online: every item photographed and priced, reachable by a QR code on the yard sign, with items marked sold as the morning goes.
• Glossary of your hobby's jargon — Every hobby has a wall of jargon that nobody explains: fishing, skating, knitting, climbing, keyboards.
• House rules, ratified — Your game group argues about the same rules every single time: whether that card stacks, what landing on Free Parking pays, whether screen-watching is cheating.
• How-to for the thing you can do — You can already do something most people cannot: solve a cube, restring a guitar, fold a fitted sheet, whip a merengue.
• An interactive tool someone would use twice — One genuinely useful calculator, converter, or tracker with state and input validation.
• The lawn and yard one-pager — One page that says what yard work you do, which streets you cover, what it costs, and how to text you.
• The lessons page — The instrument you have played for years, offered to beginners: what the first lesson covers, when you are free, and a clip of you playing as the proof.
• The letters archive — Transcribe a grandparent's letters, postcards, or diary into pages you can search and read, with the scanned originals alongside each transcription.
• A grandparent's life story — Sit down with a grandparent, take notes, and build the page: where they grew up, what they worked as, the moves, the stories they always tell at dinner.
• Little free library catalog — The little free library on your corner has an inventory nobody can see without walking over.
• The definitive local ranking — Every taco, boba, or pizza place within walking distance of school, visited by you and scored on the same fixed criteria, published as a table with visit dates.
• The minutes site — Every decision your club has made, dated and findable at one URL, so meetings stop re-litigating what was settled in October.
• The missing stat table — Your school or rec league does not publish the table you want: assists, saves, head-to-head records.
• The moving crew page — You and two strong friends, available weekends, for the couch-up-the-stairs jobs in your own neighborhood.
• The neighborhood recommendations list — The adults around you already know which plumber shows up, which babysitter to call, and which bike shop is honest.
• Paper to pixels — Your club or team keeps a logbook, sign-in sheet, or scorebook on paper.
• A page for your pet — The full biography of your pet: photos, habits, a life timeline, the noises, the enemies, the spot on the couch.
• Shoebox photo timeline — Somewhere in your house is a box of old photos nobody looks at because nobody can look at them.
• Where the regulars play — Your pickup game has answers that only exist in the regulars' heads: which court or field, which days, and when the run starts as opposed to when people claim it starts.
• Plant and mail watch — When neighbors travel, you water the plants, collect the mail, and send a photo update after every visit.
• Price watch — Pick the one thing you are saving for and check its price daily at three stores for two weeks.
• The QR one-pager — Your club gets a table at the fair, and the table gets a QR code.
• Your reading list, public — Every book you have finished, listed publicly, with two honest lines about each.
• A site for something real in your life — Three pages, mobile-first, deployed: a site for a subject that exists: an actual club, team, family business, event, or person (you count).
• Grandma's recipe archive — The handwritten recipe cards in your family are one spill away from gone.
• The family reunion page — One page for the reunion your family is planning: date, place, directions, who has confirmed, what each household is bringing.
• Screen-time honesty page — Your phone already measures your usage; you just never look at it in one place.
• The season in numbers — Every score from your team's season, hand-entered into one data file, published as a results page with one chart.
• The season photo archive — Every parent on your team has thirty photos from the season sitting on their phone, and nobody has all of them.
• Sleep week — A notebook by the bed, seven nights of numbers, then a chart and one honest paragraph about what the data says versus what you tell people.
• Your own start page — The page your browser opens to, built by you for an audience of one: your links, your timetable, and a weather widget you write yourself against a free forecast API.
• The answers page for your building or street — Your building or street has a group chat, and every month the same questions come back: which day the bins go out, where guests can park, who to call when the elevator stops.
• The history of your street — What was on your street before your house?
• Street tree survey — Every tree on your block: identified with a field guide, photographed, measured where you can, and published as a map or list backed by a data file in a public repo.
• Study group hub — Your study group has a chat where the useful things drown: the past papers, the formula sheet link, what got covered last Tuesday.
• Freshman survival guide — Everything you wish someone had told you about your school before your first day: which stairwell beats the crowd, which lunch line moves, which teachers assign homework on Fridays, where you can be at lunch.
• Team schedule page — A page for your team's season that teammates check instead of texting you.
• Tech help for neighbors — Printers, wifi, phone settings, the TV remote situation.
• The textbook hand-me-down list — Everything you and your friends are finished with, listed with condition, price, and photos, aimed at next year's students at your school.
• One trip, archived — One trip you took, told day by day: your photos, what happened, and the part that went wrong, because the flat tire or the missed train is the story everyone retells.
• The tutoring page — A page offering tutoring in the one subject you are genuinely good at: your results as proof, what a session covers, and when you are free.
• The volunteer day recap — Your group did a service day: a park cleanup, a food drive, a painting day at the shelter.
• Walking routes of your neighborhood — The three routes you walk most, each on its own page with the knowledge you have from walking it: the shortcut, the hill worth avoiding, the house with the dog, the corner that floods after rain.

---
name: build-website
category: web
description: Build a website and put it live in the first session. Real content only: a person, club, business, or event that exists. Use when they say "build a website", "make me a site", or "I need a page for X".
---

# build-website

Build a website with someone, probably their first. The
bar: live at a real URL by the end of the first sitting, made of real
content, and something they are proud to send to people.

## Ground rules

- Real content only. An actual person, club, team, business, or
  event. No lorem ipsum, no invented testimonials, no stock claims.
  If content does not exist yet, get it from them in conversation —
  they know it, you type it into shape.
- Deploy first, polish second. An ugly page with a URL beats a
  beautiful page on localhost. Get GitHub Pages (or their host)
  serving within the first hour, then iterate on the live thing.
- Keep the stack boring: static HTML/CSS (a little JS if needed). No
  frameworks unless they already know one. They should be able to
  read every file in their own site.
- It is theirs. Ask for their choices — colors, tone, what goes
  first — and implement their answers. Explain what you are doing as
  you go in one-liners, not lectures.

## Session shape

1. Five questions: who or what is the site for, who visits it, what
   must a visitor be able to do or learn, what exists already (text,
   photos, links), what should it feel like.
2. Repo + one-page skeleton + deploy. Live URL exists now. (Use the
   ship-on-github skill if present.)
3. Structure: the 1–3 pages the answers actually demand. Navigation.
   Real content in.
4. Mobile pass: readable and tappable on a phone — most visitors will
   be on one.
5. Ship pass: page title, description, favicon, a check of every link,
   and the URL sent to one real person for a reaction.

## Done

- Live URL they can put on a resume or bio
- Works on a phone
- Every word true, every link working
- They can explain how to change any page, because they watched every
  change happen

If this is for their resume, suggest the build-resume skill next —
the site is exactly the kind of line it wants.