Google AI Studio

Compare the same brief in Google AI Studio vs Lovable vs Bolt. Google's output looks designed. The others look built. The reason: Google's models have absorbed more design patterns.

This makes it ideal for anything where appearance matters: portfolios, product pages, client presentations, event sites.

The trade-off is real. Lovable gives you a URL in seconds. Google AI Studio gives you a folder of files you need to put somewhere. This course teaches both the building and the deployment.

Build This

Open Google AI Studio. Describe a landing page you'd actually use. Compare the visual quality to what you've gotten from other tools. The difference is immediately obvious.

Describe your page with visual direction. Not just what it should say, but how it should look. "Dark background, clean sans-serif typography, orange accents, generous whitespace, full-width hero section."

Google AI Studio generates the code. Download the files. You'll see: an index.html file (the page structure and content), a style.css file (how it looks), maybe a script.js file (interactions).

You don't need to understand the code. You need to understand what the files are. Like understanding that a presentation has slides and a notes section, not understanding how PowerPoint format works.

Open the HTML file in a browser. Your page is right there. Beautiful. Working. On your computer.

Build This

Build a landing page for something real. Your freelance work, a side project, an event. Describe the content AND the visual style. Download the result. Open it in your browser.

Option 1: Netlify Drop. The simplest. Go to app.netlify.com/drop. Drag your folder onto the page. Your site is live with a URL in 30 seconds. Free.

Option 2: GitHub Pages. Create a GitHub account. Upload your files. Enable Pages in settings. Free, and you get version history.

Option 3: Vercel. The professional choice. Connect to GitHub. Auto-deploys when you update files. Free tier handles most projects. If you later move to Assisted Coding, you're already on the right platform.

Start with Netlify Drop. It takes 30 seconds. Upgrade to Vercel when you want auto-deployment and custom domains.

Build This

Take the page from lesson 2. Go to app.netlify.com/drop. Drag the folder. Your page is live. Share the URL. That's it.

For big changes: go back to Google AI Studio, adjust your prompt, regenerate. Faster than manually editing when the structure needs to change.

For small changes: open the HTML file in any text editor. Use Ctrl+F (Cmd+F on Mac) to find the text you want to change. Change it. Save. Re-upload to Netlify.

Changing a headline: find it in the HTML, change the text between the tags. Changing a color: search for the hex code, replace with a new one. Changing an image: replace the image file or change the URL.

These are 30-second edits. No coding knowledge required. Just find-and-replace in a text file.

Build This

Open your page's HTML file. Find a headline. Change it to something different. Save. Re-upload. See your change live. That's editing code.

Keep using Google AI Studio for: single-page sites, portfolios, event pages, product pages, presentation sites. Anything where design quality matters and interaction is minimal.

Move to Lovable for: multi-page sites, interactive tools, forms with logic, anything that needs to respond to user input.

Move to Base44 for: anything that needs to save data, manage users, or track information over time.

The bridge to VS Code: Google AI Studio generates clean HTML/CSS. This code can be opened in VS Code and extended with Claude Code. Your beautiful page becomes the starting point for a bigger project.

Build This

Look at what you need to build next. Does it fit Google AI Studio's sweet spot? If yes, build it here. If not, you know which tool to try instead.

Page 1: your personal page. Who you are, what you do, how to reach you. Clean, confident, professional.

Page 2: a project page. One piece of work you're proud of. Visual, descriptive, with a clear narrative.

Page 3: something creative. An event page, a concept, a portfolio piece. Show range.

Deploy all three to Netlify. You now have three live URLs you can share. The skill is in the briefing: how to describe design direction, reference styles, specify typography and color.

These pages demonstrate both your taste and your ability to direct AI. That's a valuable combination.

Build This

Build all three. Today. 30 minutes each. Deploy them. Link to them from your LinkedIn. You just built a portfolio without a designer or developer.