Gone are the days when building a website required mastering programming, code, and UI design — filled with confusing technical jargon. With Codex, you can overcome technical limitations. Just tell it your needs like a boss, and it will build the website step by step for you. In this tutorial, I'll show you how to build a stunning cat-themed website from scratch with zero coding experience, covering two building methods and one-click deployment.
Method 1: Pure Personalized Building
Step 1: Define the Website Framework
Start by outlining your website's structure, sections, and overall style directly in Codex:
"I want to build a cat website. It should include sections like a cat's profile, daily diary, photo gallery, growth timeline, and favorite recipes. The style should be warm and whimsical."
You can also upload a document with detailed requirements. Once you send your request, Codex works in the background — the basic structure and blocks are laid out, though it may lack some ideal elements. That's normal: Codex has just created the skeleton.
Step 2: Refine Details
Keep submitting modification requests to polish details:
- Open the website preview in Codex
- Click the plus sign in the top right corner
- Select the area to modify and add a comment: "Change the font color of the 'Cat's Diary' section to a soft orange and increase the image spacing."
Step 3: Enhance with Images and Sections
To add new sections like a photo gallery or favorite recipes, describe them to Codex:
"Add a photo gallery section with images of the cat napping, eating, and playing. The layout should be a grid with hover effects."
If you don't have images, use Codex's built-in Image 2 feature:
@image2 [Orange Cat] Orange cat running in garden, sunny, oil painting style
@image2 [Orange Cat] Orange cat drinking coffee in cafe, warm scene, illustration styleStep 4: Add Visual Effects and Animations
To make your website more dynamic, describe effects to Codex. For inspiration, browse resources like React Bits for backgrounds, text animations, and border effects. Copy code for an effect you like and tell Codex:
"Apply this glowing text animation to the 'Cat's Motto' section. The color should be light purple."
Codex will implement it — for example, text animation mimicking a cat's gentle movement, and background texture following the mouse cursor.
Method 2: Quick Creative Building
For a faster setup using pre-existing design references:
- Find headings and landing page designs online (e.g., from design platforms)
- Copy the prompt of a design you like
- Paste it into Codex combined with your own content:
"Use this landing page layout for a cat website. Replace the content with my cat's details: name 'Mikan', age 3, breed 'American Shorthair Tabby'."
Deploying Your Website Online
Your website initially runs only on your local computer. To make it accessible to others, deploy to Vercel:
- Install the Vercel plugin in Codex
- Log in to your Vercel account to authorize
- In the Codex chat, mention the Vercel plugin: "@Vercel deploy this cat website online"
Codex will deploy your site and provide a public URL like https://your-cat-website.vercel.app — anyone can access it anytime.
Conclusion
Building a website with Codex is straightforward and requires no technical background. Whether you choose personalized customization or quick creative building, you'll gain a sense of accomplishment. In this AI-driven era, let Codex be your tool to bring ideas to life. Try it out and unleash your creativity!
常见问题
Do I need to know HTML/CSS to use Codex for website building?
No — that's the whole point. Codex handles all the coding. You describe what you want in natural language, and it generates the code. That said, having basic HTML/CSS knowledge helps you give more precise instructions and understand what's happening. But it's absolutely not required. Many complete beginners have built and deployed their first website with Codex in under an hour.
What's the difference between Method 1 (personalized) and Method 2 (quick creative)?
Method 1 gives you full creative control — you describe every section from scratch, refine iteratively, and end up with a unique design. It takes longer but produces more original results. Method 2 uses pre-existing design templates as starting points, which is faster but may result in a less distinctive look. For a portfolio or personal brand site, go with Method 1. For a quick prototype or temporary page, Method 2 works great.
Can I use other deployment platforms besides Vercel?
Yes. While Vercel is the most integrated option (Codex has a built-in Vercel plugin), you can also deploy to Netlify, GitHub Pages, Alibaba Cloud, Tencent Cloud, or any static hosting service. The key difference is convenience: Vercel deployment is one command through the plugin, while other platforms may require you to export the code first and configure deployment manually. For beginners, Vercel is strongly recommended as the path of least resistance.