Building Websites with AI (Episode 01)
Starting from scratch to build VideoCreation.info: Vault setup, brand guidelines, Gemini workflows, and real-time code generation.
Click to play
BRIEF // ABOUT THIS VIDEO
In this first episode, I walk through how I start a brand-new website project from zero without using heavy templates or visual page builders.
Instead of jumping straight into prompting or guessing what to say to the AI, I begin inside my project Vault. I document the typography, color rules, and layout constraints first so the AI has clear boundaries.
Then I load those guidelines into Gemini Notebook and Gemini. From there, I prompt for individual sections like the header, navigation, and content blocks, inspecting each piece directly in the browser as we go.
NOTES // EPISODE BREAKDOWN
01
Starting from scratchSetting up the initial foundation for VideoCreation.info without using heavy templates or bloated frameworks.
02
Project Vault & Brand DNAWriting down typography, color system, and layout rules into clear documentation before prompting the AI.
03
AI Workflow SetupConfiguring Gemini with clear instructions to output clean, lightweight semantic code.
04
Header & NavigationPrompting and generating clean semantic navigation markup, testing it directly in the browser.
05
Footer & Content BlocksIteratively building the footer and section layouts, validating responsiveness as we go.
06
Public Live BuildDeploying and testing the site live at VideoCreation.info so viewers can inspect the source and follow along.
CORE // KEY TAKEAWAYS
Vault before codeNever ask an AI to write markup until brand constraints, color tokens, and layout guidelines are clearly defined first.
Constrained promptsConfigure Gemini with strict instructions to generate clean semantic HTML instead of bloated div wrappers.
Section by sectionGenerate the site piece by piece with immediate browser checks for complete control over the markup.
Live feedbackValidate each component directly in the browser to prevent messy cumulative errors down the line.
STACK // MENTIONED & CONNECTED
![Systeme.io AI Workflow [01]](https://img.youtube.com/vi/rgreu3xiZPU/maxresdefault.jpg)