I constructed an internet web page with OpenAI’s Codex in 5 minutes. This is how

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 soar out of their chat packing containers and really do issues in your machine. Once I first noticed Gemini churning out code instantly on my system, I used to be floored–I hadn’t actually realized what AI was able to till then. 

Now, it’s possible you’ll hear the time period “vibe coding” and assume it’s one thing solely programmers or tech fans can do, or possibly the concept of vibe-coding a program or an app is simply too overwhelming. I guarantee you that’s not the case, and I’m right here to show it with the fast creation of a private internet web page.

Earlier than we get began, a fast notice: As you tinker, it’s possible you’ll discover that vibe-coding the preliminary internet web page is a snap, however getting it simply the best way you need generally is 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 easy methods to vibe code a easy internet web page, and you are able to do it at no cost and in about 5 minutes. Nothing will probably be going dwell on the web–this may simply be a easy internet web page residing in your Mac or PC’s storage drive, and also you’ll be capable of open it domestically utilizing any internet browser.

For this train, you’ll want a vibe coding instrument. There are lots of selections, so let’s deal with the large three: Claude Code, Google Antigravity, and OpenAI’s Codex. Claude Code is offered as a tab in the primary Claude desktop app, whereas Google Antigravity and Codex are standalone apps. They will all be downloaded for both Mac or PC, and so they all supply straightforward, one-click installers. (You can additionally set up Claude Code, Codex, and Gemini CLI in your Terminal app, however let’s maintain 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) in my view, it’s simpler to make use of than Antigravity (though the latter isn’t all that troublesome, 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 along with your OpenAI account (once more, you’ll be able to create one at no cost).

Subsequent, create a brand new listing in your laptop’s onerous drive. The listing ought to be fully empty (that means no recordsdata or subdirectories); in my case, I created a “Initiatives” listing simply inside my essential person listing.

Now, hearth 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 mission” 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 long-established one with the assistance of ChatGPT (you’ll be able to create your personal immediate, after all):

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

First, ask me a brief onboarding quiz (not more than 5 questions) to know what I need on my web site.

Maintain the questions fast and straightforward to reply (a number of alternative or quick solutions). Good subjects to cowl:

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

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

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

Necessities for the location:

• The whole lot ought to be in a single file (HTML + CSS + optionally available JavaScript)
• Embody 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:

• Put it aside 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
• Recommend 2–3 straightforward issues I may ask you to alter or enhance subsequent

Maintain every 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 internet web page, akin to 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 happy to reply “each.”

Once you’re carried out with the quiz, Codex will start coding–in a short time. When it’s carried out (mine took 56 seconds), it’ll inform you easy methods to open the web page in an internet browser (simply double-click the index.html file).

And… voilà! There’s your first vibe-coded internet web page. (In case you used Codex, it’ll probably create it with a smooth “card” design with a drop shadow and rounded corners, which seems to be Codex’s favourite search for primary internet pages).

In case you’re feeling impressed, right here’s the place the actual magic (or the rabbit gap) begins. Ask Codex to alter 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 an area climate widget and a “excellent news” headline pulled from the net.

Go forward and experiment, whereas holding 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’ll be able to’t fairly get what you’re asking for, effectively… welcome to the membership.