Learning on Web Dev Open is free for all.

Build First > Your first shipped siteBrief it, build it, ship it
Phase 00Your first shipped site16 of 434

Brief it, build it, ship it

A real page for a real person, live on the internet, in under an hour. Everything after this chapter is about understanding what you just did.

Build55 minAI implements

Pick a real person or thing. Yourself, a friend’s small business, a band you like, a club you belong to. Real beats invented, because you will notice when the result is wrong about something you actually know.

Write the brief before you open anything. Say who the page is for, list what it must contain, choose the one action you want someone to take, such as email, book, follow or buy, and note what the page must not have.

Then one prompt, as specific as your brief allows, and let it build. Do not stop it to ask questions. Do not tidy the output. Let it finish.

Now get it online. Put the file in a folder, make it a Git repository, push it to GitHub and connect it to Vercel. You did each of those steps in lesson two, so go back and check if any part feels shaky instead of guessing.

Open the live URL on your phone and send it to one person. At that point, you have achieved the goal of the phase: something real, public and yours, made in about an hour with very little prior knowledge.

Then stop. Do not improve it yet. The next four chapters are about understanding what you are looking at, so keep this first version with all its defaults intact. It is the version you will study.

Done when

  • A written brief, made before any prompting
  • A generated page that matches the brief
  • A public URL that loads on a phone
  • The repository on GitHub, with the live link in the README
  • Sent to at least one person
  • Left unimproved, as the specimen for the next four chapters

Nobody marks this for you. It goes into your phase checkpoint, where a person does.

Build this in your own editor

This one runs on your machine rather than in the browser workbench. Work to the outcomes below, then come back and mark it complete.

You should now be able to

  • Write a brief specific enough to produce something usable
  • Get a page from a prompt to a public URL
  • Have something real that you can point to as your own
Ask the community

Loading…