Your first page, written by your agent

In this course we will take the advanced form of things that could be done simply. The reason is that it’s easier to downgrade from the advanced to the simple, without much instruction from me. But it would be harder if I taught you the simple thing, and then you had to grow out of it.

For a landing page, the simplest thing you could do is have your agent write it using “vanilla” JavaScript, HTML, and CSS. JavaScript is what makes web pages dynamic and interactive, HTML is where the text and order of elements go, and CSS is where things like sizes, colors, and font choices are placed.

You’re always welcome to amend the prompts I provide you with to strip away the complexity, but I want to equip you with impressive frameworks that can scale to any size.

A landing page is what is known as a static website. Static mostly means that there is no pre-computation on the server side to serve these pages. Every visitor gets the same thing. This is great for your landing page because everyone should see the same thing. For your actual app, you’ll probably use a different choice, where the server might need to query the database to get the user’s subscription info for example, before rendering the page.

You can easily build a fully featured static website using just simple HTML files, and there would be nothing wrong with that, especially if you are a minimalist. For this course, we’ll use a framework called Astro for building our static website. Astro affords you some conveniences like the ability to reuse pages (like a header or footer component), as well as Markdown support so you can write your pages in Markdown and it will handle converting it to HTML, as well as general advanced optimizations it may make under the hood.

The good news is that whereas in the past you may have needed to deeply understand a framework like Astro before committing to it, it is now relatively risk-free to go all-in on a framework with AI. It’s not as prohibitively expensive as it used to be to switch to another framework if one doesn’t work out today.

Bootstrap Astro latest for my product’s website. Start with the homepage. I’ve pasted the About Us copy below. Craft compelling homepage copy based on the philosophies and ideas espoused in this copy. You may take high editorial control to change or improvise anything you feel missing, such as testimonials and pricing. The call-to-action will be to sign up for a waitlist, which will be powered by Buttondown (the form snippet will be provided later).

Once it finishes, ask the agent to start the dev server:

Start the dev server and open my browser to the page (without the Claude overlay).

This should open your browser to something like http://localhost:4321.