Maybe you've never built a website before. Let's build one together.
We'll describe the website to an AI tool called v0, review what it builds, and publish a version you can share. Then we'll open the code and make changes ourselves, learning the tools as we need them.
What we'll build
Our project is a website for Small Hours Studio, a fictional business offering printmaking and gardening workshops. By the end of the course, visitors will be able to:
- Browse the workshops and compare prices and class lengths.
- Open a workshop's page to see what they'll make.
- Ask about the next session through a form that emails the owner.
- Explore the site on a phone or laptop.
You'll publish the first version in the opening section. Then we'll keep building on that same site, adding features and learning how the code works as we go.
How we'll build it
Publish with v0
Turn the studio's brief into a website with v0. We'll shape the design and publish it on Vercel. You'll have a public URL to open and share.
Your Local Workspace
Bring the website onto your computer and make your first edit in the code. We'll get comfortable with the terminal, explore the Next.js project, and use GitHub to save and publish the change.
Build with fx
Give fx, a coding agent that works with your project files, a task on the site. We'll inspect its edits and use Vercel CLI to publish a preview: a separate version where we can check the result before updating the live site.
Collect Interest
Give each workshop its own page, then build the form that connects visitors with the studio. We'll use Resend to deliver inquiries by email and test that they arrive.
Ship and Recover
Add a new workshop and check the site on a small screen before publishing the update. Then we'll deliberately break the form in a preview and practice finding and undoing the mistake.
Working with the code
You'll describe changes to v0 and fx, then check the files and try the result yourself. When code is new to you, focus on the parts the lesson asks you to recognize: a heading, a workshop record, or the rule that checks an email address. We'll introduce the syntax needed for your own edits as we use it.
Longer implementations appear in optional reference panels. Use them to compare with an agent's work or repair a missing piece. Complete the browser checks and Done-When list before moving on, even when the generated code looks right.
Before you begin
No coding experience required. We'll walk through your first terminal commands and account setup as we need them.
- Bring a macOS or Windows computer with permission to install software. On Windows, we'll set up WSL, a Linux environment for the development tools.
- Have a browser and email address ready.
- Plan for access to the services used in the course. We'll explain costs before you use them.
On this page