Audience: A complete beginner who has never used HTML/CSS/Git before Duration: A 1–2 hour special lecture What you need: A laptop with internet access, one email account What you get: Your own real, working homepage at an address like https://your-name.vercel.app

Lesson Flow at a Glance

1. Why GitHub + Vercel? (15 min)

"What's so hard about putting up one homepage?"

In the old days, getting a single homepage online meant going through all of this.

1. Rent a server machine (tens of thousands of won a month)
2. Install a web server using Linux commands
3. Upload files with an FTP program
4. Buy a domain and connect it
5. Repeat the steps above every time you change something

Now? Make a file → upload it to GitHub → Vercel puts it up for you. Done.

How GitHub and Vercel Split the Work

Here's an easy analogy.

• GitHub = a cloud storage locker for your code (the developer version of Google Drive)
• Vercel = a helper that watches that locker and automatically puts your homepage online

[My Computer] ──write code── [GitHub] ──detects it── [Vercel] ──publishes── [The World]

Why This Combination Became the Standard

• Free: both are free for personal projects
• Fast: push your code and it's live worldwide within 30 seconds
• Automatic: connect it once and you never have to think about it again
• Used by the pros: real companies run their services this way too

Wait, Doesn't GitHub Pages Do This Too?

GitHub does have its own feature called "GitHub Pages" that puts homepages online. But here's why we use Vercel:

• Vercel is faster, easier, and later you can deploy real apps like React/Next.js exactly the same way
• GitHub Pages handles simple static files well, but Vercel can scale far beyond that
• Learning the tool that the industry actually uses, from the very start, pays off

2. Creating Accounts (15 min)

2-1. Signing Up for GitHub

1. Go to https://github.com
2. Click Sign up in the top right
3. Enter email → password → username
   • ⚠️ Choose your username carefully! This becomes the developer ID that follows you for life. It goes into your URL too.
   • Good examples: alex-kim, alex-dev, codingnow
   • Bad examples: xxlovelyxx, test123, asdfasdf
4. Complete email verification

2-2. Signing Up for Vercel

1. Go to https://vercel.com
2. Click Sign Up
3. Choose "Continue with GitHub" (this is the key part!)
4. Log in with your GitHub account → allow Vercel access to GitHub
5. Choose the Hobby (free) plan

💡 Key point: The standard way to sign up for Vercel is with your GitHub account. Don't create a separate password. The two services must be connected for automatic deployment to work.

3. Making Your First HTML File (20 min)

3-1. What Is HTML?

HTML is just a set of conventions for giving meaning to text.

<h1>I am a big heading</h1>
<p>I am just a paragraph</p>

When the browser sees <h1>, it thinks "ah, this is a big heading" and shows it large. When it sees <p>, it thinks "this is a paragraph" and shows it as plain text. That's all there is to it.

3-2. Creating the File

Open a text editor like Notepad or VS Code. (Not Hangul Office, not Word — it must be a text editor.)

💡 If you don't have VS Code, download it from https://code.visualstudio.com. It's free.

On your desktop, create a folder named my-website, and inside it create a file named index.html.

⚠️ The file name must be index.html — no other name will do. The default file name that a web server looks for is fixed.

3-3. Paste the Following Code As Is

Example file: src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alex Kim's First Homepage</title>
    <style>
        body {
            font-family: sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 { color: #2563eb; }
        .card {
            background: #f3f4f6;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Hi, I'm Alex Kim 👋</h1>
    <p>I'm a student learning web development.</p>
    <div class="card">
        <h2>Interests</h2>
        <ul>
            <li>Web frontend</li>
            <li>Game development</li>
            <li>Coffee ☕</li>
        </ul>
    </div>
    <div class="card">
        <h2>Contact</h2>
        <p>Email: [email protected]</p>
    </div>
</body>
</html>

3-4. Double-Click to Open It

Double-click index.html and it pops right up in your browser. Congratulations — you've already built a homepage.

The catch is that right now it's only visible on your own computer. Look at the address bar: it starts with file:///..., right? You need to put it on the internet for other people to see it too.

3-5. Make It Yours (5 min)

Change the name, interests, and email to your own. Save, then refresh the browser (F5).

4. Uploading to GitHub (20 min)

💡 Getting the concept straight: "git" is one thing, and "GitHub" is a company service that uses git. We won't use git commands — for this first upload, we'll click our way through the GitHub website. It's the easiest way.

4-1. Creating a New Repository

1. Log in to GitHub, then in the top right click + → New repository
2. Repository name: enter my-website
3. Select Public (if it's Private, connecting Vercel on the free plan gets tricky)
4. Check Add a README file ✅
5. Click Create repository at the bottom

4-2. Uploading the File

The repository page appears. On that screen:

1. Click the Add file button → Upload files
2. Drag and drop the index.html you made earlier
3. Scroll to the bottom → click the green Commit changes button

If index.html now shows up on the screen, you've succeeded.

💡 What is a commit? It means "I want to save these changes." Think of it as a save point in a game. Each commit is a moment you can return to later, whenever you want.

5. Deploying with Vercel (20 min) ⭐ Highlight

This is where the magic happens.

5-1. A New Project in the Vercel Dashboard

1. Go to https://vercel.com/dashboard
2. Click Add New... → Project
3. Your list of GitHub repositories appears in the Import Git Repository section

5-2. Granting Permissions (only the first time)

If your repository isn't showing up, click Adjust GitHub App Permissions or Configure GitHub App → go to GitHub → choose which repositories to allow access to → save.

• Allow all repositories (simple), or
• Allow only specific repositories (more secure)

For your first time, allowing all repositories is fine.

5-3. Import & Deploy

1. Click the Import button next to my-website
2. A settings screen appears — don't touch anything
   • Framework Preset: Other (detected automatically)
   • Root Directory: ./
   • Build Command: leave it empty
3. Click the big Deploy button

5-4. Wait 30 Seconds

Build logs scroll by on the screen. When the colorful confetti falls (🎉 the confetti animation), the deployment is done.

5-5. Checking Your Homepage Address

An address like my-website-xxx.vercel.app appears on the screen. Click it!

Congratulations. Now anyone in the world can visit this address. Send it to a friend in a message.

6. Try Editing It — The Real Magic Starts Now (20 min)

6-1. Editing Directly on GitHub

1. Go back to your GitHub repository
2. Click the index.html file
3. Click the pencil (✏️) icon at the top right → edit mode
4. Change any text you like (e.g., Hello → Nice to meet you)
5. Click Commit changes at the bottom of the screen
6. Click Commit changes once more (the commit message dialog)

6-2. Watch Vercel

Go to the Vercel dashboard and a new build is already running automatically. When it finishes, refresh your homepage. It has changed.

This is the core idea.

Just upload your code to GitHub → Vercel notices → it automatically deploys a new version. All we have to do is write the code.

6-3. Exercise: Decorate Your About Page

Use the remaining time to decorate your own page.

Challenge Tasks (easiest to hardest)

1. 🟢 Change the color of the h1 to your favorite color (color: red, #ff5733, etc.)
2. 🟢 Add a photo (<img src="IMAGE_URL" width="200">)
   • You can grab images from Unsplash
3. 🟡 Create a new section (copy a <div class="card"> and add it)
4. 🟡 Add a link (<a href="https://github.com/your-username">My GitHub</a>)
5. 🔴 Create a second page (add about.html → link to it from index.html)

6-4. Common Sticking Points

• Changes aren't saving: after editing on GitHub you must click Commit changes twice (the button that starts the edit + the final save button).
• Changes don't show up: it may be the browser cache. Do a hard refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac).
• Build failed: if a red error appears in the Vercel dashboard, it's usually because the HTML file isn't named index.html or isn't at the top level of the repository.

7. Wrap-up & Next Steps (10 min)

What We Did Today

[Wrote index.html]
    ↓
[Uploaded it to a GitHub repository]
    ↓
[Connected it to Vercel]
    ↓
[Automatic deployment]
    ↓
[https://my-website-xxx.vercel.app — public to the whole world]
    ↓
[Edit → commit → automatic redeployment]

If this flow has clicked in your head, you already understand 80% of professional web development. Truly. Companies work on this same cycle. The only difference is that their code is more complicated.

Things Worth Learning Next

Recommended Learning Resources (all free)

• MDN Web Docs (https://developer.mozilla.org) — the official reference for HTML/CSS/JS
• Opentutorials (https://opentutorials.org) — beginner web development courses
• Official Vercel Docs (https://vercel.com/docs) — in English, but the illustrations are friendly

One Last Word

The page you made today stays alive. Visit that address a week from now or a year from now and it will still be there. A year from now, looking at the first page you ever built, you'll surely feel a little embarrassed — and proud.

Code grows one line at a time. Today is the day you wrote that first line. 🎉

Appendix A. Frequently Asked Questions (FAQ)

Q. Is it really free? Do I need a credit card? Yes. Both GitHub Free and the Vercel Hobby plan are free forever, with no card required. You won't be charged unless you go over 100GB of traffic a month or use it heavily for commercial purposes.

Q. I want to change my domain to .com. You can. Buy a domain from a registrar (Namecheap, Cloudflare, etc.), then connect it in the Domains tab of your Vercel project settings. Domains usually cost about $10–15 a year.

Q. What if someone copies my code? Anyone can see the code in a public repository. But at the beginner stage, don't worry about it. Similar code is all over the internet anyway, and the truly valuable thing isn't the code — it's the idea of the person who made it.

Q. Can I view it on my phone? Yes. But to make it look good automatically on any screen size, you'll need to learn responsive design in CSS separately. That's a great topic for the next lesson.

Q. If I delete the repository, does the homepage disappear too? Yes. If you delete your GitHub repository or make it private, the Vercel deployment stops soon after. Don't delete your repository carelessly.

Appendix B. Tips for Instructors

• Give a break signal every 15 minutes. Beginners go blank for five minutes as soon as they get stuck on one step. Catch it early.
• The account creation step is where people get stuck the most. The verification email doesn't arrive, the password rules are fussy, and so on. Budget extra time.
• Vercel's interface changes once every one to two years. Right before the lecture, it's worth running through the whole thing yourself once and retaking the screenshots.
• It's good when every student ends up with a different result. The final 20 minutes of free practice time determines satisfaction.
• When the question "why does it work this way?" comes up, don't go deep. In a 1–2 hour special lecture, deferring with "that's for next time" is the right call.

Written: 2026-05 / License: free to modify and redistribute