Your first hands-on project: an invitation page for a weekend walk

This is the chapter where we actually make something. The practice event is called the Weekend Walk Club: no racing, no step-count bragging, and if you get tired, you can sit down for a bit.

By the end, you’ll have a folder called weekend-walk with an index.html file inside. HTML is a file format for webpages; for now, all you need to know is that this file holds the page content and can be opened to view. We put the webpage in its own folder so that in Chapter 7 you can preview it as a full website and then decide whether to publish it.

Before you start, get two things ready

First, open Agent.Space and sign in to your account. Keep this tutorial open in this tab and work in another one, so you can flip back whenever you need to.

Then make sure you have usage available. Agent.Space has two ways to pay: a plan, or pay-as-you-go credits. New accounts usually get a “Signup bonus” you can use on pay-as-you-go models to start; the exact amount, expiration date, and eligible models are whatever the product shows. If you don’t have any usage available, you can read through the whole process first. There’s no need to keep resending the same task.

You won’t need images, a domain, or any software this time. The event, the location, and the route are all made up for practice.

1. Create a Workspace for the project

The first time you sign in, Agent.Space asks what to call you, plus a few quick questions, then takes you to the welcome page. There are two cards here: “Explore examples” opens a read-only sample project, which is good for seeing what others have made; “Create Workspace” is the path we’re taking this time. If you already have a Workspace, choose “New Workspace” from the Workspace switcher in the top-left corner; it does the same thing.

In the “New Workspace” window, fill in these three fields:

• Name: the default is “My Workspace.” Change it to “Weekend Walk Club.”
• Cloud computer location: the Agent’s cloud computer and the Workspace files will live in this region. The system recommends one based on your time zone, and that’s usually fine as is. It can’t be changed later.
• Time zone: defaults to your browser’s time zone. All members and Agents share it.

Click “Create Workspace.” Once it’s done, the name you just entered appears in the top-left corner. That’s where this project lives.

2. Choose an Agent and a compatible model

Once the Workspace is created, the page asks you right away: “Which Agent should we start with?” The row of cards below shows the Agents you can choose from, with Codex selected by default. You can also switch to Claude Code, or any other Agent currently available in the list.

You choose the model with the model button below the input box. Agent.Space usually picks an available model for you. The first time, you can leave it as is, or switch to a compatible model you have usage for. For a refresher on how an Agent differs from a model, look back at Chapter 2 anytime.

If you see “Plan required,” “Quota used up,” or “Not enough credits,” use the button next to it to pick a plan or top up. An incompatible model, no usage left, and a service that’s temporarily down each need a different fix, so read the specific reason it shows first.

3. Send it this task

The task request you send is called a Prompt. You can copy this one as is. Try it once exactly as written, then adapt it for your own event.

Please make an event invitation webpage in English for the "Weekend Walk Club."
This is a fictional practice event, so mark the page as a "Sample event."About the event: a slow, easy walk together on the weekend. No racing, and you can rest whenever you get tired.Meeting time: Saturday at 3 p.m. Note that this is only a sample schedule and doesn't match a real event date.Meeting place: the south gate of Plane Tree Park (a fictional place).Route: meet at the south gate → walk along the lake → rest on the lawn, about 90 minutes in total.What to bring: water, comfortable shoes, a hat. If it rains, we'll reschedule.How to join: before a real event, contact the organizer first to confirm the exact date and place.
Keep the page relaxed and clear, and easy to read on a phone. Make the meeting time and place easy to spot at a glance.Add a "See how to join" button that jumps to the how-to-join section on this page.Don't collect any sign-up information. No login, maps, or external images.
Save the page and its styles in the weekend-walk folder in the Workspace, in a file named index.html.Don't rely on other files or external resources, don't just paste the code in the chat, and don't publish it yet.When you're done, check that all the content is there and that the button jumps to the right place, then tell me where the file is and how to view it.If there's any check you couldn't finish, just say so.

This prompt covers the goal, the materials, and what done looks like. It’s a bit detailed so you’ll have something to check against later, not because the Agent only understands some magic format. If you’d rather not type, click “Voice input” in the input box, then look over the text once it’s transcribed.

4. Watch it work, and keep an eye out for questions

After you send it, the Agent may read the current folder, create files, and run checks. Seeing tool names and activity logs is normal; they’re clues to what it’s doing.

It might also ask in its reply what style you’d like. Just answer in the input box: “Keep it simple, like a weekend invite you’d send friends.” If it’s still busy, whatever you send goes into a queue first and runs when its turn comes.

Before certain actions, some Agents pop up a permission request marked “Requires initiator approval,” and the wording on the buttons comes from the Agent itself. Look at what it’s about to do, and to what, before you decide. If you’re not sure, choose “Cancel this request.” The scope of this task is just creating the invitation page and checking it.

When it finishes, first check whether the summary mentions weekend-walk/index.html, and which checks are done and which aren’t. Don’t close the window just because you see the word “Completed.”

5. Find the file and open it

If a card for the file shows up in the Agent’s reply, click it to open the file on the right. You can also go to “Files” in the left sidebar, open the weekend-walk folder, and click index.html. HTML files open as a preview by default; when you want to see the code, switch to “Edit” or “Split.”

What you’re seeing here is the file preview: the page and its styles are all in one file, so it displays in full. If the Agent only gave you code in the chat, just add:

Please actually save the webpage you just made as weekend-walk/index.html in the Workspace,and tell me how the save went. I need to be able to find and open it in the files area.

If the file exists but won’t open, tell the Agent the exact error the screen shows, and say that it failed at the “Open file” step. Figure out the cause first, then decide how to fix it.

6. Be a careful inspector, not a picky one

Narrow the page down to about the width of a phone, read it through, and click the button. Check these things:

• The event name, the “Sample event” label, the time, the place, the route, and the packing list are all there.
• On a small screen, the text is easy to read, and you don’t have to drag the whole page sideways.
• “See how to join” really does jump to the how-to-join section.
• The page hasn’t quietly turned into a sign-up form asking for information.

It’s normal if the layout doesn’t look exactly like what’s described here. The Agent may come up with a different style each time, so judge first whether it meets these requirements.

If your first webpage opens, you’ve done the most important part of this chapter. In the next one, we’ll pick one specific spot to improve, and see how to turn “something’s a little off” into a request an Agent can act on.