From Zero to Your First Live Website: A Cursor + Vercel Adventure for Complete Beginners

I used to think deploying a website meant being some hoodie-wearing genius who speaks in mysterious commands and hasn't seen sunlight in months. That you needed a computer science degree, years of practice, and some secret handshake with the tech gods.

I was completely wrong.

Now I spin up sites in minutes. And I want you to feel that too.

This is the article I wish someone had written for me when I was staring at a blank screen, wondering if I was "technical enough" to build something real. Spoiler: you are. And by the end of this article, you'll have proof—a live URL you can share with anyone.

No terminal required. No cryptic commands. Just clicking, typing plain English, and watching magic happen.

Who this is for (and who it's not for)

What tech you're secretly learning

Explain it three ways

Meet Maya (she's going to be our guide)

The three promises I'm making you

Before we start, let me be crystal clear about what you're getting:

Still nervous? Good. That means you care. Let's channel that energy into building something real.

Before we begin: Your fears are valid (and wrong)

Let me guess what's in your head right now:

Deep breath. Let's build.

Chapter 1: Setting Up Your Workspace ⏱️ ~15 min

What we're doing

Before we build anything, we need three things:

• Cursor (the app where you'll work)
• A GitHub account (where your code lives in the cloud)
• A Vercel account (where your website gets published)

All three are free. None require a credit card.

Step 1.1: Download and Install Cursor

Cursor is a code editor powered by AI. Think of it as Microsoft Word, but instead of writing documents, you're building websites—and you have a genius AI assistant who does most of the typing.

Here's what to do:

• Open your browser and go to cursor.com
• Click the big download button
• Run the installer (double-click the file you downloaded)
• Follow the prompts—just keep clicking "Next" or "Continue"

Step 1.2: Create a GitHub Account

GitHub is where your code lives. When you make changes, they get saved to GitHub. When Vercel deploys your site, it pulls from GitHub. Think of it as the central hub.

GitHub explained three ways

Here's what to do:

• Go to github.com
• Click "Sign up" in the top right
• Enter your email, create a password, choose a username
• Complete the puzzle/captcha thing
• Check your email and verify

Step 1.3: Create a Vercel Account

Vercel is the magic button that turns your code into a live website. It's free to start, incredibly powerful, and trusted by huge companies.

Here's what to do:

• Go to vercel.com
• Click "Sign Up" in the top right
• Important: Choose "Continue with GitHub"
• Authorize Vercel to connect to your GitHub account

Chapter 1 Checkpoint

Chapter 2: Your First Project (The Fun Part) ⏱️ ~20 min

What we're building

A simple personal landing page. One page. Your name, a short bio, and a link or two. Something you could share with anyone.

This might sound small, but here's the thing: once you deploy one website, you can deploy a thousand. The first one is the hard part. You're about to crush it.

Step 2.1: Create a New Project in Cursor

• Open Cursor (the app you installed)
• Look for "Open Folder" or go to File → Open Folder
• Create a new folder somewhere you'll remember
• On Mac: Try your Desktop or Documents folder
• On Windows: Same—Desktop or Documents works great
• Name it something like `my-first-website`
• Select that folder and click "Open"

You should now see the folder name in Cursor's sidebar (the left panel). It's empty right now. That's about to change.

Step 2.2: Meet Your AI Assistant

Here's where the magic happens. Cursor has a built-in AI that you can talk to. It understands what you want to build and writes the code for you.

How to open the AI chat:

• Press Cmd+L (Mac) or Ctrl+L (Windows) for the chat panel
• Or look for a chat/assistant icon in the interface

You should see a text box where you can type. This is where you talk to the AI.

How to talk to Cursor like a PM, not a beginner

The secret to getting great results from Cursor? Talk to it like you're a product manager giving instructions to a developer. Be clear. Be specific. Give constraints.

Bad prompt vs. Better prompt

When Cursor is confusing, say this

Keep these phrases handy. They work every time:

Step 2.3: Your First Prompt (Copy-Paste This)

Here's exactly what to type (or copy-paste) into the AI chat:

I'm building my first website ever. Please create a simple landing page for me with:

1. A centered layout
2. My name as the title (use "Alex" as a placeholder)
3. A short bio paragraph (2-3 sentences, placeholder text is fine)
4. Links to GitHub and LinkedIn (use # as placeholder URLs)
5. A dark gradient background (something modern, maybe purple to black)
6. Clean, professional styling with good typography

Create this as a simple index.html file with inline CSS so everything is in one file. Make it look beautiful and work well on mobile.

Press Enter (or click Send).

Step 2.4: Accept the Changes

After a moment, Cursor will show you what the AI created. You'll see code appear (probably with green highlighting for new lines).

Here's what to do:

• Look at the code preview. It should be a file called `index.html`
• If it looks reasonable (lots of HTML tags, some style stuff), accept it
• Click "Accept" or press Tab or Enter (depending on how Cursor prompts you)

The file should now appear in your sidebar. Click on it to see the full code.

Step 2.5: Preview Your Website (Locally)

Let's see what you built!

The easy way:

• Find the `index.html` file in your folder (either in Cursor's sidebar or in your regular file explorer)
• Right-click it
• Choose "Open with..." and select your browser (Chrome, Safari, Firefox, Edge)

Your website should appear! It's running on your computer only right now—nobody else can see it. But you will.

Step 2.6: Customize It (Make It Yours)

Time to replace the placeholders with your real info. Go back to Cursor and talk to the AI:

Please update the index.html file with my real information:

Name: [YOUR ACTUAL NAME]
Bio: [WRITE 2-3 SENTENCES ABOUT YOURSELF]
GitHub: [YOUR GITHUB URL] (or remove this link if you don't have one)
LinkedIn: [YOUR LINKEDIN URL] (or remove this link if you don't have one)

Keep the same design, just update the text content.

Accept the changes. Refresh your browser. See your real info appear.

Chapter 2 Checkpoint

Chapter 3: Putting It on the Internet ⏱️ ~10 min

This is the part that used to require server configuration, FTP clients, SSH keys, and a lot of crying. With Vercel, it's approximately five clicks.

What "deploy" means — three ways

Step 3.1: Create a GitHub Repository

A "repository" (or "repo") is just a folder in GitHub's cloud. We need to put your website files there.

Here's what to do:

• Go to github.com and log in
• Click the green "New" button (or go to github.com/new)
• Fill in:
• Repository name: `my-first-website` (or whatever you like)
• Description: "My first website built with Cursor and Vercel" (optional)
• Public is fine (your code will be visible, which is normal)
• Don't check any boxes about README or gitignore for now
• Click "Create repository"

You'll see a page with instructions. Don't panic. We're about to do this the easy way.

Step 3.2: Upload Your Files to GitHub

Since we're keeping this super simple (no terminal required!), we'll use GitHub's upload feature.

Here's what to do:

• On your new repo page, look for "uploading an existing file" link and click it
• Drag your `index.html` file from your computer into the upload area
• Scroll down
• Add a commit message like "Add my first website"
• Click "Commit changes"

Your file is now in GitHub! Refresh the page and you should see index.html listed.

Step 3.3: Deploy with Vercel (The Magic Moment)

Here we go. The moment where your website goes live on the actual internet.

Here's what to do:

• Go to vercel.com and log in
• Click "Add New..." → "Project"
• You should see your GitHub repositories listed
• Find `my-first-website` and click "Import"
• Leave all the settings as default (Vercel is smart and figures it out)
• Click "Deploy"

Step 3.4: Visit Your Live Website

When the deploy finishes, you'll see a success screen.

📱 The Phone Test Ritual

This is important. Do this now:

• Open your new URL on your phone (text it to yourself or type it in)
• Take a screenshot
• Save it somewhere

That screenshot is your first shippable artifact. Your proof. The thing you can show anyone who asks "so what have you actually built?"

This isn't just a website. It's evidence that you can do hard things.

Chapter 3 Checkpoint

Chapter 4: Making Changes (The Real Superpower) ⏱️ ~10 min

Here's where it gets fun. Every time you make a change and push it to GitHub, Vercel automatically deploys the new version. No extra steps.

Step 4.1: Make a Change in Cursor

Let's add something new to your site. Open Cursor and talk to the AI:

Please add a "Projects" section below the bio with 3 placeholder project cards. Each card should have:
- A project title
- A short description (1-2 sentences)
- A colored border or accent that matches the overall design

Keep the same design aesthetic and make it look polished.

Accept the changes.

Step 4.2: Preview Locally First (The "Don't Break Prod" Habit)

Before pushing anything live, always preview locally. This is especially important once real people are visiting your site.

For simple HTML files:

Just open index.html in your browser and refresh after changes.

For projects with a dev server (React, Next.js, etc.):

npm run dev

This starts a local server (usually at http://localhost:3000). Every time you save a file, it updates automatically. You can click around, test everything, and break stuff freely—nobody sees it but you.

Quick dev server commands to know:

If something's off, tell Cursor what to fix before you push.

Step 4.3: Push the Update to GitHub

Now let's get this live!

The visual way (no terminal):

• Go to your repository on GitHub
• Click on the `index.html` file
• Click the pencil icon (Edit this file)
• Select all and delete the old content
• Go back to Cursor, copy the entire new `index.html` content (Cmd+A then Cmd+C, or Ctrl+A then Ctrl+C)
• Paste it into GitHub's editor
• Scroll down, add a commit message like "Add projects section"
• Click "Commit changes"

Wait 30-60 seconds, then refresh your live Vercel URL.

Your changes are live!

Chapter 4 Checkpoint

Chapter 5: Level Up - Using Git Properly (Optional) ⏱️ ~10 min

Ready for a slight upgrade? Let's set up Git in Cursor so you don't have to copy-paste to GitHub every time.

Step 5.1: Set Up Git in Cursor

First, make sure Git is installed on your computer:

Windows:

• Download Git from git-scm.com
• Run the installer with default settings

Mac:

• Open Terminal (search for it in Spotlight)
• Type `git --version` and press Enter
• If it's not installed, your Mac will prompt you to install it

Step 5.2: Connect to GitHub in Cursor

• In Cursor, open the command palette (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows)
• Type "Git: Clone" and select it
• Paste your repository URL (find it on GitHub by clicking the green "Code" button)
• Choose where to save it
• Open the cloned folder in Cursor

Step 5.3: The Faster Workflow

Now when you make changes:

• Edit files in Cursor
• Look for the "Source Control" icon in the sidebar (branch-like symbol)
• See your changes listed
• Type a message describing what you changed
• Click "Commit" then "Sync" (or "Push")

Done! Changes go to GitHub, Vercel deploys automatically.

Vercel Extras: Your Next Buttons

Now that you've deployed, here are two quick upgrades you might want:

Custom Domain (yourname.com)

Want your site at a real domain instead of .vercel.app?

• Buy a domain from Namecheap, Google Domains, or similar (~$10-15/year)
• In Vercel, go to your project → Settings → Domains
• Click "Add" and type your domain (like `yourname.com`)
• Vercel gives you DNS records to add at your domain registrar
• Once connected, Vercel gives you HTTPS automatically (the little lock icon)

That's it. No SSL certificates to manage. No server configuration. Just type and click.

See Who's Visiting (Analytics)

Curious who's looking at your site? Vercel has built-in analytics.

Go to your project → Analytics tab. You'll see visitors, page views, and where traffic comes from. It's simple but useful—especially if you're building something you want to share.

Don't Worry About Money (Yet)

Why Vercel Is Perfect for Beginners

Let me translate Vercel's features into human benefits:

Why Cursor Is Magic for Non-Developers

Cursor isn't just a code editor—it's a code editor with a genius friend built in.

You're not "fake coding" when you use AI. You're directing, editing, and making decisions. The AI is a tool. You're the architect.

The JG Loop: How I Actually Build

You've learned the basics. Now let me show you the system I use for everything—every page, every feature, every project. I call it The JG Loop.

Now let's break each step down in detail...

Step 1: Spark the Idea 💡

Start with a tiny, concrete outcome: a section, a page, or a micro-feature. Not a whole product. Write a one-paragraph spec in plain English so both you and the AI know the target.

Step 2: Make the First Version ⚡

Use Cursor to generate the first pass. You're aiming for "works end-to-end," not "perfect." Let AI scaffold, but you decide structure, naming, and what "done for now" looks like.

Step 3: Push It Live Fast 🚀

Wire it up to Git and push. Every meaningful change gets a commit, then a deploy. You always have a real URL and a rollback point. This keeps you shipping instead of tinkering forever.

Step 4: Fix the Experience on Every Screen 📱

Once it's live, switch into "designer QA" mode:

• Tighten the layout for both mobile and desktop (spacing, font sizes, tap targets)
• Use responsive techniques so it feels native on a phone, not just "shrunk desktop"
• Test on your actual phone, not just the browser's device emulator

Step 5: Run Lighthouse Like a Coach 📊

Open Chrome DevTools → Lighthouse → Generate Report. Treat the scores like coaching notes, not grades. Focus on the big levers:

Step 6: TypeScript Pass — Make the Code Honest 🔍

If you're using TypeScript (you should eventually), turn on strict mode and fix what breaks. Types surface hidden assumptions and edge cases you were mentally hand-waving away.

Step 7: Ask AI to Critique and Optimize 🤖

Now that it works, invite AI back in as a reviewer, not a builder. Try these prompts:

Let AI propose changes, then accept or reject like a senior dev doing code review. You're the decision-maker.

Step 8: Test It Like a Real User 👆

Hit the live URL from:

• Your phone (different network, thumbs, real scrolling)
• Your laptop/desktop (keyboard, big screen, different browser)
• Someone else's device if you can borrow one

Look for "feels wrong" moments: jank, layout jumps, slow loads, awkward flows. If it annoys you, it annoys everyone.

Step 9: Loop Again, But Smaller and Sharper 🎯

You never "finish"—you tighten the loop. Next cycle:

• The idea is smaller
• The spec is clearer
• The AI prompts are sharper
• The Lighthouse + TypeScript passes get faster

That's how quality quietly compounds over time.

What You Could Build Next

Now that you know the workflow, here are ideas:

All of these follow the exact same workflow you just learned.

Frequently Asked Questions

The Mindset Shift

Before AI tools like Cursor, building websites meant:

• Learning HTML, CSS, JavaScript (months)
• Understanding frameworks (more months)
• Figuring out hosting, domains, SSL (tears)
• Debugging errors with no help (rage)

Now it means:

• Describe what you want
• Let AI write the code
• Click deploy
• Have a website

You are not "cheating" by using AI. You're using the best available tools. Architects don't cut their own wood. They design and direct.

Your Action Items

Here's exactly what to do after reading this:

• Build one more page - Add an "About" or "Contact" page to your site
• Share your URL - Text it to at least one person. The accountability matters.
• Experiment - Ask Cursor to add something fun: an animation, a color change, a hover effect
• Take your phone screenshot - If you haven't already, do the phone test ritual
• Bookmark this - You'll want to reference the steps again

You're now ahead of most people you know

Let that sink in for a moment.

Most people who "want to learn to code" never write a single line. Most people who start a tutorial quit halfway through. Most people who finish a tutorial never ship anything to a real URL.

You have a live website. Built with AI. Deployed on a platform used by Netflix, TikTok, and The Washington Post.

You're not just "learning to code." You're building things. Real things. Things with URLs.

The gap between "I want to build something" and "I built something" is one that most people never cross. You crossed it. Today.

What's Next?

You've built your first website. You've deployed it. You've updated it. You're no longer a "non-technical person"—you're someone who builds things.

The next guide shows you how to add real functionality: contact forms that actually email you, multiple pages with shared navigation, and the project structure that scales.

Final words

I meant what I said at the beginning. I genuinely believed I wasn't "technical enough" to build websites. I thought it was for other people—people with degrees and experience and some innate talent I didn't have.

That was fear talking. And fear is a liar.

You just proved it wrong.

You have a live website. You built it with AI. You deployed it with Vercel. You're part of the club now.

Go build something else. And when you do, tell me about it.

Navigate the series