Course Home All Free Courses Blog $1,490 Bootcamp
Vibe Coding › Day 2
Day 2 of 5 60–75 minutes

Building a Real Web App from Scratch

Build a complete personal portfolio website using natural language prompts — then deploy it live on the internet for free. No prior web experience needed.

✓ Day 1
2 Day 2
3 Day 3
4 Day 4
5 Day 5
What You'll Build Today

A multi-section personal portfolio website with a sticky header, dark mode, and full mobile responsiveness — all described in plain English. At the end you'll deploy it to a public URL anyone can visit.

1
Generate

Generating the Portfolio

Open Cursor and create a new project folder called portfolio. Open the AI chat (Cmd+L / Ctrl+L) and paste this prompt:

Prompt — Initial Portfolio
Build a personal portfolio website as a single index.html file.

Sections needed:
1. Navigation bar with my name on the left and links (About, Work, Contact) on the right
2. Hero section: large headline "Hi, I'm [Name]" with a subtitle describing my role,
   and a "View My Work" button
3. About section: 2-column layout with a placeholder avatar on the left
   and 3-4 sentences about me on the right
4. Work/Projects section: a 3-column grid of project cards, each with a title,
   description, tech stack tags, and a "View Project" link
5. Contact section: a simple form with Name, Email, Message fields and a Submit button
6. Footer with copyright and social links (GitHub, LinkedIn)

Design requirements:
- Modern, clean look with a navy blue (#1e3a5f) and white color scheme
- Smooth scroll between sections
- Professional typography — use Google Fonts Inter
- Responsive for mobile
- All in one HTML file with embedded CSS and JavaScript

Cursor will generate a complete, multi-section portfolio site. Open it in your browser and verify all six sections appear correctly.

It won't be perfect. That's fine. The next section is all about iterating it into something you'd actually use.

2
Iterate

Improving It with Follow-Up Prompts

This is the core skill of vibe coding: taking an 80% draft and refining it to 100% through natural language. Try each of these in sequence:

Iteration Prompts
# Prompt 1: Sticky header
Make the navigation bar sticky so it stays at the top when scrolling.
Add a subtle white background with a drop shadow when the page is scrolled.

# Prompt 2: Dark mode
Add a dark mode toggle button (moon/sun icon) in the top right of the nav.
When clicked, switch to a dark color scheme (dark background, light text).
Save the preference to localStorage so it persists on refresh.

# Prompt 3: Mobile menu
Add a hamburger menu button that appears on mobile (screens under 768px).
When clicked, show/hide the nav links in a dropdown.

# Prompt 4: Animations
Add subtle fade-in animations when sections scroll into view.
Use the Intersection Observer API — no external libraries.

After each prompt, refresh your browser and verify the change works. If something breaks or looks wrong, tell Cursor exactly what's off: "The dark mode toggle isn't saving correctly" or "The hamburger menu doesn't close when I click a link."

When prompts go wrong: AI occasionally generates code that almost works but has a bug. The fix is almost always to describe the problem in plain English: "The sticky nav overlaps the first section's content. Add a padding-top to the sections to compensate."

3
Personalize

Making It Yours

Now fill in your actual information using Cursor's AI. You don't need to edit the HTML manually — just prompt:

Personalization Prompts
# Replace placeholder content with your actual info
Replace all placeholder content with the following:
- Name: [Your Name]
- Role: [Your job title or description]
- About: [2–3 sentences about yourself]
- Project 1: [Name, description, tech stack]
- Project 2: [Name, description, tech stack]
- Project 3: [Name, description, tech stack]
- GitHub: [your URL]
- LinkedIn: [your URL]
4
Deploy

Deploy to the Internet for Free

A portfolio only matters if people can see it. Let's put it on the internet. You have two free options: Netlify and Vercel. Netlify is slightly easier for static HTML files.

Option A: Netlify Drop (30 seconds)

  • 1
    Go to netlify.com/drop
  • 2
    Drag your project folder (the one containing index.html) onto the page
  • 3
    Netlify gives you a live URL immediately — like amazing-alligator-123.netlify.app
  • 4
    Create a free account to claim a custom subdomain like yourname.netlify.app

Option B: Vercel

  • 1
    Create a free account at vercel.com
  • 2
    Click "Add New Project" → "Browse" and select your project folder
  • 3
    Click Deploy — you'll get a URL like yourname.vercel.app

Custom domain: Both Netlify and Vercel let you connect a custom domain (like yourname.com) for free. If you own a domain, point your DNS to the provider and it'll work within minutes.

Day 2 Challenge

Level up the portfolio

  • Add a skills section with animated progress bars (describe it — AI will generate the CSS animation)
  • Add a "testimonials" section with 2–3 fake placeholder quotes, styled nicely
  • Make the contact form actually send emails using Formspree (it's free — describe what you want)
  • Add Open Graph meta tags so the URL looks good when shared on LinkedIn

Day 2 Complete

  • Built a full multi-section portfolio website with natural language prompts
  • Added a sticky header, dark mode, mobile menu, and scroll animations through iteration
  • Learned to fix problems by describing them in plain English
  • Deployed a live website to the internet — for free

Want live instruction?

Our 3-day AI Bootcamp covers production-grade AI development. Denver, LA, NYC, Chicago, and Dallas.

See Bootcamp Details — $1,490
Day 2 Done

Ready for Day 3?

Tomorrow you'll build two API-powered apps: a weather app and a news aggregator — all by describing them in plain English.

Day 3: Building with APIs
← Day 1 Day 3 →