I constructed a private net web page with AI in 5 minutes. You possibly can too!

I’ve been chatting with ChatGPT, Claude, and Gemini for years, however nothing ready me for the primary time I began vibe coding with them.

My first style of vibe coding with AI got here courtesy of Google’s Antigravity software program, which lets Gemini and different AI fashions leap out of their chat containers and really do issues in your machine. Once I first noticed Gemini churning out code straight on my system, I used to be floored–I hadn’t actually realized what AI was able to till then. 

Now, chances are you’ll hear the time period “vibe coding” and suppose it’s one thing solely programmers or tech fans can do, or perhaps the concept of vibe-coding a program or an app is just too overwhelming. I guarantee you that’s not the case, and I’m right here to show it proper now.

Earlier than we get began, a fast notice: As you tinker, chances are you’ll discover that vibe-coding the preliminary net web page is a snap, however getting it simply the best way you need is usually a lot extra irritating. It’s one of many key classes of AI, and the extra you utilize vibe-coding instruments like these I’m about to indicate you, the extra you’ll see how we people match into the AI workflow loop.

I’m going to indicate you the best way to vibe code a easy net web page, and you are able to do it without cost and in about 5 minutes. Nothing can be going stay on the web–this can simply be a easy net web page residing in your Mac or PC’s storage drive, and also you’ll be capable to open it domestically utilizing any net browser.

For this train, you’ll want a vibe coding device. There are a lot of selections, so let’s deal with the large three: Claude Code, Google Antigravity, and OpenAI’s Codex. Claude Code is on the market as a tab in the primary Claude desktop app, whereas Google Antigravity and Codex are standalone apps. They’ll all be downloaded for both Mac or PC, they usually all supply simple, one-click installers. (You would additionally set up Claude Code, Codex, and Gemini CLI in your Terminal app, however let’s hold it easy for now.)

Now, I’ve labored extensively with Claude Code, Antigravity, and Codex, and I really like all of them for various causes. However for this instance, I’m going to deal with OpenAI’s Codex as a result of a) you should utilize it with a free ChatGPT account (Claude Code requires a paid account), and b) for my part, it’s simpler to make use of than Antigravity (though the latter isn’t all that tough, and it was my gateway vibe-coding app).

Get your workspace prepared

Anyway, let’s assume you’ve chosen Codex for now. Go forward and set up it, and sign up together with your OpenAI account (once more, you may create one without cost).

Subsequent, create a brand new listing in your laptop’s exhausting drive. The listing needs to be utterly empty (which means no information or subdirectories); in my case, I created a “Tasks” listing simply inside my predominant person listing.

Now, fireplace up the Codex app. When you’re signed in, you’ll be greeted with a “Let’s construct” banner with a clickable workspace selector simply beneath. Click on the selector, click on “Add new undertaking” on the backside of the pull-down menu, navigate to the empty listing you simply created, then choose it.

The immediate

You’re prepared to start out coding; all you want is a immediate. I went forward and common one with the assistance of ChatGPT (you may create your personal immediate, after all):

I wish to create a easy private homepage, however I’d such as you to information me by way of it step-by-step.

First, ask me a brief onboarding quiz (not more than 5 questions) to know what I would like on my website.

Hold the questions fast and simple to reply (a number of alternative or quick solutions). Good matters to cowl:

• My title
• The general vibe (e.g., minimal, playful, skilled)
• A brief bio or tagline
• A number of pursuits or hobbies
• Whether or not I favor mild or darkish mode

Ask the questions separately and anticipate my solutions earlier than persevering with.

As soon as I’ve answered every little thing, generate a whole single-file web site known as index.html.

Necessities for the positioning:

• All the things needs to be in a single file (HTML + CSS + elective JavaScript)
• Embrace my title, bio, and pursuits
• Make the design clear, trendy, and visually interesting
• Match the vibe and preferences I gave you
• Add one small interactive factor (like a button, hover impact, or toggle)

After creating the file:

• Reserve it as index.html on this folder
• Present me the total contents of the file
• Clarify (in easy phrases) how I can open it in my browser
• Counsel 2–3 simple issues I might ask you to vary or enhance subsequent

Hold every little thing beginner-friendly and keep away from technical jargon.

Copy and paste that immediate into the Codex chat field, then click on Submit.

When you do, Codex (or Claude Code, or Antigravity) will ask you a sequence of questions on what you need in your net web page, resembling your title, your hobbies, and a brief tagline. (Keep in mind, none of that is really going onto the web.) For the “darkish mode or mild mode” query, be at liberty to reply “each.”

While you’re executed with the quiz, Codex will start coding–in a short time. When it’s executed (mine took 56 seconds), it is going to let you know the best way to open the web page in an internet browser (simply double-click the index.html file).

And… voilà! There’s your first vibe-coded net web page. (For those who used Codex, it is going to seemingly create it with a modern “card” design with a drop shadow and rounded corners, which seems to be Codex’s favourite search for fundamental net pages).

For those who’re feeling impressed, right here’s the place the true magic (or the rabbit gap) begins. Ask Codex to vary the design or the colours, or ask it to create new sections. I requested Codex for a “hero” picture (it created an summary panorama graphic) together with a neighborhood climate widget and a “excellent news” headline pulled from the online.

Go forward and experiment, whereas protecting in thoughts that the unique immediate requires a easy web page that may slot in a single index.html file. Need one thing extra concerned? Simply ask.

And if the preliminary enjoyable curdles into frustration as a result of you may’t fairly get what you’re asking for, properly… welcome to the membership.