May 25, 2026 7 min read ai-coding tutorial landing-page first-project beginners opencode cloudflare

Your First AI Project: Build a Landing Page in 30 Minutes

The easiest first AI coding project: describe a landing page in plain English, watch your AI agent build it, customize it, and put it live on the internet for free. No coding experience needed.

You've read about what AI coding agents are. You've set up OpenCode and picked your model. Now it's time for the part that actually matters: building something real.

By the end of this post, you'll have a live website on the internet. A real one. With a headline, a description, and a signup form. Something you can send to people and say "I made this."

No coding experience needed. No fancy setup. Just you, your AI agent, and 30 minutes.

Let's go.

What You'll Build

Here's what we're making: a simple one-page website with three things on it.

A big headline that says what your thing is
A short description underneath
An email signup form so people can join your list

That's it. It sounds simple because it is. But here's the thing -- every website you've ever visited started this way. A page with words on it that tells you something and asks you to do something. Amazon started with a page that said "buy books." Google started with a text box. Your landing page starts with a headline and a form.

This is the foundation. Everything else comes later.

Before You Start

You need two things:

OpenCode installed and connected to a model. If you haven't done this yet, go read the setup guide first. It takes about 10 minutes.

A terminal open. On Windows, that's PowerShell or Command Prompt. On Mac, it's Terminal. On Linux, you already know.

That's it. No VS Code. No fancy editor. No prior coding knowledge. Just OpenCode and a terminal.

If you want a quick reference on which model to use, the benchmarks guide has you covered. For this project, any model works. Seriously. We're building a simple HTML page. The cheapest model on OpenRouter will handle this just fine.

Step 1: Tell Your Agent What You Want

Open your terminal and type:

opencode

This starts your AI coding agent. You'll see a prompt where you can type instructions in plain English.

Now type this (or something like it -- use your own words):

Build me a landing page HTML file. It should have:
- A big headline at the top that says "My Awesome Project"
- A subtitle underneath that says "The simplest way to get started with something new"
- An email signup form with a text input and a submit button
- Make it look clean and modern with a light background and a nice accent color
- Everything in one HTML file, no external files needed

Press enter. Then watch.

Your agent will start generating code. You'll see HTML and CSS appearing on your screen. It might take 10-30 seconds depending on your model. Don't touch anything. Just watch.

When it's done, it'll create a file -- probably called index.html -- in whatever folder you're in.

What just happened? You described what you wanted in English. Your AI agent translated that into actual code. You didn't write a single line of HTML. You didn't need to know what

means or how CSS works. You just said what you wanted, and the agent built it.

This is the core idea behind AI coding agents. You focus on what you want. The agent handles how to build it.

Step 2: See What You Made

Your agent just created a file. Let's look at it.

Open your file browser (Finder on Mac, Explorer on Windows) and navigate to the folder where you ran OpenCode. You should see an index.html file.

Double-click it.

Your default browser will open and show your landing page. Go ahead -- take a look. This is a real website, rendered in a real browser, built from code that an AI agent just wrote for you.

You should see:

A clean page with a light background
Your headline in big text at the top
Your subtitle underneath
A box where people can type their email
A button that says something like "Sign Up" or "Subscribe"

This is your "oh shit" moment. The moment where you realize this is real. You described something in English, and now it exists on your screen. Welcome to AI coding.

If something looks off -- maybe the colors are weird or the text is too small -- that's fine. We'll fix it in the next step.

Step 3: Make It Yours

The landing page your agent built is a starting point. Now let's customize it to make it actually yours.

Go back to OpenCode and tell it what to change. Here are some prompts to try:

Change the headline:

Change the headline to "[Your actual project name]" and the subtitle to "[Your actual description]"

Change the colors:

Change the accent color to a warm orange (#f97316) and make the background slightly off-white (#fafaf9)

Add a section:

Add a section below the signup form with three bullet points explaining the key benefits. Make them short -- one sentence each.

Add your own style:

Add a subtle gradient background from top to bottom, going from off-white to light blue. Make the headline use a monospace font.

Each time you type one of these, your agent will modify the index.html file. Save it, refresh your browser, and see the change.

The key insight here is iteration. You don't have to get it right on the first try. Describe what you want, see what happens, then adjust. This is exactly how professional developers work -- they just do it with code instead of English. You're doing the same thing, but skipping the part where you had to learn a programming language for three years first.

Step 4: Put It on the Internet (For Free)

Right now your landing page only exists on your computer. Nobody else can see it. Let's fix that.

We're going to use Cloudflare Pages. It's free, it takes about 2 minutes, and your site will be live on the internet with a real URL.

Create a Cloudflare account

Go to dash.cloudflare.com/sign-up
Sign up with your email (free, no credit card needed)

Upload your site

In the Cloudflare dashboard, go to Workers & Pages
Click Create application then Pages then Upload assets
Name your project (something like "my-awesome-landing" -- this becomes part of your URL)
Drag and drop the folder containing your index.html file
Click Deploy site

That's it. Cloudflare will give you a URL like my-awesome-landing.pages.dev. Open it. Your site is live. On the internet. For free.

Optional: Add a custom domain

If you own a domain (like yourname.com), you can connect it in the Cloudflare Pages settings under Custom domains. Cloudflare walks you through it -- you just need to update your domain's DNS settings.

What You Just Did

Let's recap, because this is a bigger deal than you might realize:

You described a website in plain English
An AI agent wrote the code for you
You opened it in your browser and it worked
You customized it by telling the agent what to change
You deployed it to the internet for free
Now you have a live website that anyone can visit

You did all of this without writing a single line of code yourself. Without learning HTML or CSS. Without installing a code editor. Without watching a 6-hour tutorial.

The skill you practiced wasn't coding. It was communication. You figured out what you wanted, described it clearly, reviewed the result, and iterated. That's the actual skill behind AI coding. Not memorizing syntax -- knowing what you want and being able to describe it.

Troubleshooting

The page looks broken. This usually means the HTML is incomplete. Go back to OpenCode and say "the page looks broken, fix it." The agent will look at the code and figure out what's wrong.

The signup form doesn't work. A static HTML form won't actually save emails anywhere yet -- that requires a backend. For now, the form is there for the visual. In a future post, we'll connect it to a real email service.

The colors are ugly. Go back and tell the agent to change them. Try specific colors: "use navy blue (#1e3a5f) and white (#ffffff) with a coral accent (#ff6b6b)." Specific instructions get specific results.

I messed up the file. No problem. Tell OpenCode "start over and build a new landing page from scratch." You'll have a fresh file in 20 seconds.

What's Next

You have a live website. That's huge. Most people never get this far.

Here's where you can go from here:

Add more sections. Tell your agent to add a features section, a testimonials area, or an FAQ.
Connect the signup form. We'll cover this in a future post -- connecting your form to a real email service so you can actually collect signups.
Make it responsive. Tell your agent "make this look good on mobile phones too." One prompt, and it'll adjust the layout.
Experiment. Try building something completely different. A portfolio page. A recipe site. A countdown timer. The same process works for everything.

The muscle you're building is the same one professional developers use every day: describe what you want, see what you get, adjust, repeat. The only difference is they type code and you type English.

For now, that's an advantage. Run with it.

Quick Reference

| Step | What you do | How long |

|---|---|---|

| Set up OpenCode | Follow the setup guide | 10 min |

| Describe your page | Type what you want in plain English | 2 min |

| Check the result | Open index.html in your browser | 30 sec |

| Customize it | Tell the agent what to change | 5 min |

| Deploy to Cloudflare Pages | Upload the folder, click deploy | 3 min |

| Share it | Send the URL to someone | 10 sec |

Total time: about 20-30 minutes for your first time.

Got questions? Found a bug in your page and can't figure it out? Come hang out in the community -- we do live reviews and help each other through the stuck parts. It's free.