Build Your First Personal Website

Build and deploy a personal website from scratch using HTML and CSS.

Introduction

30 Second Summary

Every website you visit is built with two core languages: HTML for structure and CSS for styling. Learning them is the first step into the world of web development.

In this project, you will build a personal introduction website from scratch using HTML and CSS, then publish it to the internet with a live URL anyone can visit.

What You'll Build

A professionally styled personal website with a gradient header, skills section with Flexbox layout, and hover effects.

By the end of this project, you'll have:

  • A complete index.html file with semantic HTML structure including hero, about, skills, and footer sections.
  • A style.css file with modern styling including gradients, flexbox layout, and hover effects.
  • A live website hosted on Netlify with a public URL you can share with anyone.
  • Secret Mission: Add a "Contact Me" section with styled links to your email and social media profiles.

Do I need any coding experience?

Nope. This project is designed for complete beginners. You just need a computer with VS Code installed. Everything else is covered step by step.

Set Up Your Workspace

Every website is made of files stored in a folder on your computer. Before writing any code, you need a dedicated project folder and the two core files that every basic website uses.

In this step, you'll create your project folder and the two files you'll build your entire website in.

In this step, get ready to:
  • Create a project folder called my-website on your Desktop.
  • Create your two website files: index.html and style.css.
Create your project folder

Your website files need a dedicated home. You'll create a folder on your Desktop and open it in VS Code so all your work stays in one place.

  • Press Windows+E to open File Explorer.
  • Click Desktop in the left sidebar.
  • Right-click in an empty area on the right side.
  • Select New, then select Folder.
  • Type my-website as the folder name and press Enter.

Now open this folder in VS Code so you can start working inside it.

  • Switch back to VS Code.
  • Click File in the top menu bar.
  • Click Open Folder.
  • In the dialog that opens, navigate to your Desktop.
  • Click the my-website folder to select it.
  • Click Select Folder.

Seeing a trust dialog?

VS Code may ask if you trust the authors of the files in this folder when you open a new folder. Click Yes, I trust the authors to continue. This is a normal security feature that appears for every new folder.

You should see MY-WEBSITE appear in the Explorer sidebar on the left side of VS Code. The folder is empty for now.

Don't see the folder in VS Code?

Make sure you clicked Select Folder after highlighting my-website. If the Explorer sidebar isn't visible, press Ctrl+Shift+E to open it.

Help me find my folder in VS Code

Create your project files

Every website needs at least two files. index.html holds the structure and content of your page. style.css controls how everything looks.

  • In VS Code's Explorer sidebar, hover over the MY-WEBSITE heading to reveal the action icons.
  • Click the New File icon (it looks like a page with a small plus sign).
  • Type index.html and press Enter.
  • Click the New File icon again.
  • Type style.css and press Enter.

You should now see both index.html and style.css listed in the Explorer sidebar.

Why these two files?

Browsers look for index.html by default when loading a website. It's the standard name for a homepage file.

The style.css file is where all your visual design rules live, kept separate from your content for clean organization.

Don't see the New File icon?

The icons only appear when you hover over the folder name in the Explorer sidebar. Make sure your mouse is directly over the MY-WEBSITE text. If you still don't see it, right-click inside the Explorer sidebar and select New File from the context menu instead.

Help me create a new file in VS Code

Your workspace is ready. Next up, you'll write the HTML structure that gives your website its content and layout.

Write Your HTML Structure

Your workspace is set up with VS Code and an empty index.html file ready to go. Now it's time to write your first lines of real code.

Every website starts with an HTML document that tells the browser what content to display. In this step, you'll build the skeleton that every webpage needs, then add your first visible content inside it.

In this step, get ready to:
  • Write the standard HTML document skeleton that every webpage needs.
  • Build a hero section with your name, tagline, and a button link.
  • Preview your page live in the browser using Live Server.
Write the HTML skeleton

Every HTML page follows the same basic structure. It starts with a declaration that tells the browser which version of HTML you're using, then wraps all content in opening and closing tags.

  • Open index.html in VS Code by clicking on it in the Explorer panel (left sidebar).
  • Type the following HTML skeleton into the file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Personal Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

What does this code do?

  • <!DOCTYPE html> tells the browser this is a modern HTML5 document.
  • <html lang="en"> wraps everything and declares the page is in English.
  • <head> contains invisible setup information the browser needs (character encoding, how to scale on mobile, the page title, and a link to your CSS file).
  • <body> is where all visible content goes. Right now it's empty.
  • <link rel="stylesheet" href="style.css"> connects your CSS file so styles will apply once you write them later.
  • Save index.html by pressing Ctrl+S.

You won't see a visible change yet because the body is empty. The next chunk adds your first visible content.

Build the hero section

A hero section is the large, eye-catching banner at the top of a webpage. Yours will show your name, a short tagline, and a button that links down to the next section.

  • In index.html, click inside the empty <body> tags (between <body> and </body>).
  • Add the following hero section code inside the body:
    <!-- Hero Section -->
    <header class="hero">
        <h1>Hi, I'm Your Name</h1>
        <p class="tagline">Aspiring web developer learning to build amazing things</p>
        <a href="#about" class="btn">Learn More About Me</a>
    </header>

What does this code do?

  • <header class="hero"> creates a header element. The class="hero" gives it a name you'll use later in CSS to style it.
  • <h1> is the biggest heading on the page. There should only be one per page.
  • <p class="tagline"> is a paragraph with a class name for styling later.
  • <a href="#about" class="btn"> creates a link that jumps to a section with id="about" (you'll add that section in the next step). The class="btn" lets you style it like a button later.
  • Save index.html by pressing Ctrl+S.

Your file is saved, but you still can't see anything in a browser yet. The next substep launches your page live.

Seeing red or yellow underlines in VS Code?

Make sure every opening tag has a matching closing tag. For example, <header> needs </header>, and <h1> needs </h1>.

Also check that your hero section code is between the <body> and </body> tags, not inside the <head> section.

help me fix HTML tag errors in my index.html

✔️ Awesome, I've got everything!

Great. Double check you've saved your file before moving on.

ⓧ I'd like to double check the full code

Here's what your complete index.html file should look like at this point:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Personal Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Hero Section -->
    <header class="hero">
        <h1>Hi, I'm Your Name</h1>
        <p class="tagline">Aspiring web developer learning to build amazing things</p>
        <a href="#about" class="btn">Learn More About Me</a>
    </header>

</body>
</html>
Preview your page live

Live Server launches a local web server and opens your page in the browser. Every time you save a file, the browser refreshes automatically so you can see changes instantly.

  • In VS Code's Explorer panel (left sidebar), right-click on index.html.
  • Click Open with Live Server in the context menu.

Your default browser opens showing your page. You should see your name as a large heading, your tagline below it, and a "Learn More About Me" link. Everything looks plain and unstyled right now. That's completely normal.

Why does it look so plain?

HTML only defines the structure and content of your page. It doesn't control colors, fonts, spacing, or layout. That's what CSS does, and you'll add that in Step 4.

Leave this browser tab open. Every time you save a change in VS Code, Live Server will automatically refresh the page for you.

Browser didn't open?

Make sure you right-clicked on index.html specifically (not style.css or the folder). If you don't see Open with Live Server in the menu, the Live Server extension may not have installed correctly. Go back to Extensions (Ctrl+Shift+X) and confirm Live Server by Ritwick Dey shows as installed.

You can also try clicking Go Live in the bottom status bar of VS Code as an alternative way to start the server.

help me get Live Server working in VS Code

Your HTML structure is complete and you can see it live in the browser. Next up, you'll add more sections to fill out the rest of your page.

Add the About and Skills Sections

In Step 2, you built the hero section of your page. You now have a working page showing your name and tagline in the browser.

A personal website needs more than just a greeting. In this step, you'll add sections that tell visitors who you are and what you're learning.

In this step, get ready to:
  • Add an About Me section with a paragraph about yourself.
  • Add a Skills section with three skill cards.
  • Add a footer to close out the page.
Create the About section

Your hero section greets visitors, but they'll want to know more about you. An About section gives them a short introduction to who you are and what you're working on.

  • Switch back to index.html in VS Code.
  • Find the closing </header> tag. Copy the following code below it:
    <!-- About Section -->
    <section class="about" id="about">
        <h2>About Me</h2>
        <p>I'm a beginner web developer on a mission to learn coding and build real projects. I started learning HTML and CSS recently and I'm already building my first website. I love turning ideas into things people can actually see and use on the internet.</p>
    </section>

What does this code do?

  • <section> creates a distinct part of the page. The class="about" gives it a name for styling later, and id="about" makes it a target that your hero button can link to.
  • <h2> is a second-level heading. Your page title uses <h1>, so sections use <h2> to show they're one level below.
  • <p> is a paragraph element. It holds a block of text that browsers display with spacing above and below.
  • Save index.html by pressing Ctrl+S.
  • Check your browser. You should see "About Me" as a heading followed by the paragraph text below your hero section.

Don't see the About Me section?

  • Make sure you pasted the code below the closing </header> tag, not inside it.
  • Check that you saved the file. The dot on the file tab in VS Code disappears when the file is saved.
  • Confirm Live Server is still running. Look for "Port: 5500" in the VS Code status bar at the bottom.

Still stuck? Help me figure out why my About section isn't showing up in the browser.

Create the Skills section

A skills section shows visitors what you're working on. You'll build this one using a set of "cards" that will sit side by side once you add CSS in the next step.

  • In index.html, find the closing </section> tag of your About section. Copy the following code below it:
    <!-- Skills Section -->
    <section class="skills" id="skills">
        <h2>What I'm Learning</h2>
        <div class="skills-container">
            <div class="skill-card">
                <h3>HTML</h3>
                <p>Building the structure and content of web pages</p>
            </div>
            <div class="skill-card">
                <h3>CSS</h3>
                <p>Styling and designing beautiful layouts</p>
            </div>
            <div class="skill-card">
                <h3>JavaScript</h3>
                <p>Adding interactivity and dynamic features (coming next!)</p>
            </div>
        </div>
    </section>

What does this code do?

  • The outer <section class="skills"> wraps the entire skills area so you can style it as one block later.
  • <div class="skills-container"> is a container that groups all three cards together. In Step 4, you'll turn this into a Flexbox layout so the cards sit side by side.
  • Each <div class="skill-card"> is one card. The <h3> is the card title and the <p> is the card description.
  • Save index.html.
  • Check your browser. You should now see "What I'm Learning" as a heading, followed by three skill names (HTML, CSS, JavaScript) stacked vertically with their descriptions.

Skills section not showing up?

  • Check that the code is pasted after the About section's closing </section> tag, not inside it.
  • Make sure every opening <div> tag has a matching closing </div> tag. There should be four </div> tags total (one for the container and one for each card).

Need a hand? Help me troubleshoot my Skills section HTML.

Add a footer

A footer closes out the page. It typically holds a copyright notice and your name.

  • In index.html, find the closing </section> tag of your Skills section. Copy the following code below it:
    <!-- Footer -->
    <footer>
        <p>&copy; 2026 Your Name. Built from scratch with HTML &amp; CSS.</p>
    </footer>

What does this code do?

  • <footer> is a semantic HTML element that tells the browser "this is the bottom of the page."
  • &copy; is a special code that displays the © copyright symbol. &amp; displays the & character. These are called HTML entities.
  • Save index.html.
  • Check your browser. You should see a copyright line with the © symbol and your name at the very bottom of the page.

Footer not appearing at the bottom?

  • Scroll down in your browser. The footer might be below the fold if your screen is small.
  • Make sure the <footer> code is placed after the Skills section's closing </section> tag but still inside the <body> tags.

Still stuck? Help me figure out why my footer isn't showing up correctly.

✔️ Awesome, I've got everything!

Great. Double check you've saved your file before moving on.

ⓧ I'd like to double check the full code

Here's the complete index.html file as it should look right now. Compare yours against it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Personal Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Hero Section -->
    <header class="hero">
        <h1>Hi, I'm Your Name</h1>
        <p class="tagline">Aspiring web developer learning to build amazing things</p>
        <a href="#about" class="btn">Learn More About Me</a>
    </header>

    <!-- About Section -->
    <section class="about" id="about">
        <h2>About Me</h2>
        <p>I'm a beginner web developer on a mission to learn coding and build real projects. I started learning HTML and CSS recently and I'm already building my first website. I love turning ideas into things people can actually see and use on the internet.</p>
    </section>

    <!-- Skills Section -->
    <section class="skills" id="skills">
        <h2>What I'm Learning</h2>
        <div class="skills-container">
            <div class="skill-card">
                <h3>HTML</h3>
                <p>Building the structure and content of web pages</p>
            </div>
            <div class="skill-card">
                <h3>CSS</h3>
                <p>Styling and designing beautiful layouts</p>
            </div>
            <div class="skill-card">
                <h3>JavaScript</h3>
                <p>Adding interactivity and dynamic features (coming next!)</p>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <p>&copy; 2026 Your Name. Built from scratch with HTML &amp; CSS.</p>
    </footer>

</body>
</html>

Your page now has all its content in place. It's readable, but it looks plain. Next up, you'll add CSS to transform this into a polished, professional-looking website.

Style Your Website with CSS

Your HTML is complete. You have a hero section, an about section, skill cards, and a footer all in place. Right now everything looks like plain text on a white background because your browser only knows the structure of the page.

CSS is what transforms that plain text into a professional-looking website. In this step, you'll add colors, spacing, fonts, and layout to bring your page to life.

In this step, get ready to:
  • Set up a clean base with a universal reset and body font.
  • Style the hero section with a gradient background and button.
  • Style the about, skills, and footer sections with layout and visual polish.
Set up base styles

Every browser adds its own default spacing and fonts to HTML elements. A universal reset removes that inconsistency so your design looks the same everywhere.

  • Switch to style.css in VS Code (it should still be empty) and add the base styles by pasting this code:
/* Reset default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333333;
    line-height: 1.6;
}

What does this code do?

  • The * selector targets every element on the page. Setting margin: 0 and padding: 0 removes the default spacing browsers add around headings, paragraphs, and other elements.
  • box-sizing: border-box makes sure padding and borders don't add extra width to your elements. This makes layout math much simpler.
  • The body rule sets a clean sans-serif font, a dark gray text color, and comfortable line spacing for the entire page.
  • Save style.css by pressing Ctrl+S.
  • Check your browser. The text should now appear in a cleaner font (Segoe UI instead of the default serif), and the spacing around the edges of the page disappears.

Page looks exactly the same?

  • Make sure you saved style.css (look for the dot or circle on the file tab that disappears after saving).
  • Confirm your index.html has <link rel="stylesheet" href="style.css"> in the <head>. This is what connects your CSS file to your HTML.
  • Check that both files are in the same my-website folder. If style.css is in a different location, the link won't find it.

Help me figure out why my CSS isn't showing up in the browser.

Style the hero section

The hero section is the first thing visitors see. A bold gradient background and centered text makes an immediate visual impact.

  • In style.css, add the hero styles below your body rule by pasting this code:
/* Hero Section */
.hero {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    text-align: center;
    padding: 100px 20px;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 16px;
}

.hero .tagline {
    font-size: 20px;
    opacity: 0.9;
    margin-bottom: 32px;
}

.btn {
    display: inline-block;
    background-color: #ffffff;
    color: #4f46e5;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
}

.btn:hover {
    background-color: #e0e7ff;
}

What does this code do?

  • linear-gradient(135deg, #4f46e5, #7c3aed) creates a diagonal gradient that blends from indigo to purple. The 135deg controls the angle.
  • opacity: 0.9 on the tagline makes it slightly transparent, creating visual hierarchy so the heading stands out more.
  • The .btn styles turn your <a> link into a button shape with padding, rounded corners, and bold text. The :hover rule changes the background color when the mouse hovers over it.
  • Save style.css.
  • Check your browser. You should see a bold purple gradient banner at the top with your name in large white text, a tagline below it, and a white button labeled "Learn More About Me".
  • Hover your mouse over the button. It should change to a lighter blue-white color.

Don't see the gradient?

  • Check that your CSS selector says .hero (with a dot). The dot tells CSS to look for a class name. Without it, CSS looks for a <hero> HTML tag that doesn't exist.
  • Make sure the class in your HTML says class="hero" (no dot in HTML). The dot is only used in CSS.

Help me debug why my hero section gradient isn't showing.

Style the about, skills, and footer sections

The remaining sections need their own visual identity. The about section stays clean and centered, the skills section uses a card layout, and the footer anchors the bottom of the page.

  • In style.css, add the about section styles below your .btn:hover rule by pasting this code:
/* About Section */
.about {
    padding: 80px 20px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about h2 {
    font-size: 32px;
    margin-bottom: 16px;
    color: #4f46e5;
}

.about p {
    font-size: 18px;
    color: #555555;
}

What does this code do?

  • max-width: 800px prevents the text from stretching too wide on large screens. Reading long lines of text is tiring, so capping the width keeps it comfortable.
  • margin: 0 auto centers the section horizontally within the page. 0 is the top/bottom margin, and auto splits the remaining space evenly on left and right.
  • The heading color matches the purple from the hero gradient, creating a consistent color theme across the page.
  • Save style.css and check your browser.
  • You should see the "About Me" heading in purple with the paragraph text centered below it. The section has generous space above and below it.

About section text not centering?

  • Check that your CSS selector says .about and your HTML has class="about" on the <section> element. Both names must match exactly.
  • Make sure each CSS rule ends with a semicolon and each block ends with a closing curly brace }.

Help me figure out why my about section styles aren't applying.

  • Add the skills section styles below your .about p rule by pasting this code:
/* Skills Section */
.skills {
    padding: 80px 20px;
    background-color: #f8f9fa;
    text-align: center;
}

.skills h2 {
    font-size: 32px;
    margin-bottom: 40px;
    color: #4f46e5;
}

.skills-container {
    display: flex;
    justify-content: center;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.skill-card {
    background-color: #ffffff;
    padding: 32px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 200px;
    max-width: 280px;
    transition: transform 0.2s;
}

.skill-card:hover {
    transform: translateY(-4px);
}

.skill-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
    color: #333333;
}

.skill-card p {
    font-size: 16px;
    color: #666666;
}

What does this code do?

  • display: flex on .skills-container activates Flexbox layout. This places the three skill cards side by side instead of stacking them vertically.
  • gap: 24px adds equal spacing between each card without needing margins on individual cards.
  • flex-wrap: wrap means the cards will stack on smaller screens instead of overflowing off the page.
  • box-shadow adds a subtle shadow beneath each card, making them look like they float above the background.
  • The :hover rule with transform: translateY(-4px) lifts the card slightly when the mouse hovers over it. The transition: transform 0.2s makes that movement smooth instead of instant.
  • Save style.css and check your browser.
  • You should see three white cards arranged side by side on a light gray background. Each card has rounded corners and a soft shadow.
  • Hover your mouse over each card. It should lift up slightly with a smooth animation.

Cards stacking vertically instead of side by side?

  • Make sure display: flex is on .skills-container, not on .skills. Flexbox only arranges the direct children of the flex container.
  • Check your HTML has the <div class="skills-container"> wrapper around the three skill-card divs. Without this wrapper, there's nothing for display: flex to target.

Help me get my skill cards to display side by side with Flexbox.

  • Add the footer styles below your .skill-card p rule by pasting this code:
/* Footer */
footer {
    text-align: center;
    padding: 32px 20px;
    background-color: #1f2937;
    color: #9ca3af;
    font-size: 14px;
}

What does this code do?

  • The footer selector has no dot because it targets the HTML element directly (there's only one <footer> on the page), not a class.
  • The dark background and muted gray text create a visual anchor at the bottom of the page, signaling that the content ends here.
  • Save style.css and scroll to the bottom of your page in the browser.
  • You should see a dark strip at the bottom with your copyright text in small, muted gray letters.

Footer still has a white background?

  • Make sure your selector says footer (no dot, no hash). Since <footer> is an HTML element (not a class or ID), the CSS selector is just the tag name.
  • Check that the closing brace } of the previous rule (.skill-card p) is present. A missing brace breaks all the CSS that follows it.

Help me debug why my footer styles aren't showing up.

✔️ Awesome, I've got everything!

Great. Double check you've saved your file, then scroll through your entire page in the browser to admire your work.

ⓧ I'd like to double check the full code

Here's the complete style.css file. Compare it against yours to find any differences.

/* Reset default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333333;
    line-height: 1.6;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    text-align: center;
    padding: 100px 20px;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 16px;
}

.hero .tagline {
    font-size: 20px;
    opacity: 0.9;
    margin-bottom: 32px;
}

.btn {
    display: inline-block;
    background-color: #ffffff;
    color: #4f46e5;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
}

.btn:hover {
    background-color: #e0e7ff;
}

/* About Section */
.about {
    padding: 80px 20px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about h2 {
    font-size: 32px;
    margin-bottom: 16px;
    color: #4f46e5;
}

.about p {
    font-size: 18px;
    color: #555555;
}

/* Skills Section */
.skills {
    padding: 80px 20px;
    background-color: #f8f9fa;
    text-align: center;
}

.skills h2 {
    font-size: 32px;
    margin-bottom: 40px;
    color: #4f46e5;
}

.skills-container {
    display: flex;
    justify-content: center;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.skill-card {
    background-color: #ffffff;
    padding: 32px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 200px;
    max-width: 280px;
    transition: transform 0.2s;
}

.skill-card:hover {
    transform: translateY(-4px);
}

.skill-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
    color: #333333;
}

.skill-card p {
    font-size: 16px;
    color: #666666;
}

/* Footer */
footer {
    text-align: center;
    padding: 32px 20px;
    background-color: #1f2937;
    color: #9ca3af;
    font-size: 14px;
}

Your website looks professional and polished. Next up, you'll take this page live on the internet so anyone with a link can see it.

Publish Your Website to the Internet

Your website is fully styled and looking professional on your local machine. Now it's time for the most exciting part: putting it on the real internet where anyone in the world can see it.

You'll use a free service called Netlify Drop to host your files and give you a public URL. No account is needed to get started, and deployment takes just a few seconds.

In this step, get ready to:
  • Open Netlify Drop in your browser.
  • Deploy your my-website folder to the internet.
  • Visit your live website at its unique public URL.
Open Netlify Drop

Netlify Drop is a free drag-and-drop hosting service. You upload your folder and it gives you a live URL instantly.

  • Open a new tab in Google Chrome.
  • Type https://app.netlify.com/drop in the address bar and press Enter.

You should see a page with the heading "Drag & drop. It's online." and a large drop zone area.

Why Netlify Drop instead of GitHub Pages?

GitHub Pages requires a GitHub account, Git knowledge, and repository setup. Netlify Drop lets you drag a folder and get a live URL with zero configuration. This keeps you focused on learning HTML and CSS rather than deployment infrastructure.

Page not loading?

Make sure you typed the full URL including https:// at the start. If the page still won't load, check that you have an active internet connection.

help me load the Netlify Drop page

Deploy your site by dragging your folder

Deploying means uploading your website files to a server so the internet can access them. With Netlify Drop, all you need to do is drag your project folder onto the page.

  • Open File Explorer by pressing the Windows key and typing File Explorer, then press Enter.
  • Navigate to your Desktop.
  • Find the my-website folder.
  • Drag the entire my-website folder from File Explorer and drop it onto the Netlify Drop zone in your browser.
  • Wait a few seconds for the upload to complete.

What happens when you drop the folder?

Netlify uploads your index.html and style.css files to its servers. It then distributes them across a global network so anyone in the world can load your page quickly.

The upload only takes a moment because your project is just two small text files.

After the upload finishes, Netlify shows you a dashboard with your new site's URL.

Upload not working?

Make sure you are dragging the my-website folder itself, not the individual files inside it. Netlify needs the entire folder to be dropped at once.

Also confirm your folder contains an index.html file. Netlify requires this file to know which page to show first.

help me deploy my folder to Netlify Drop

Visit your live website

Netlify gives you a unique URL for your site. This URL is public, meaning anyone with the link can see your website.

  • Find the URL on your Netlify dashboard. It ends in .netlify.app (for example, random-name-12345.netlify.app).
  • Click the URL to open your live website in a new tab.

You should see the exact same website you built locally, but now it's live on the internet. The gradient hero section, your about section, the skill cards, and the footer are all there.

How long does this site stay online?

Without an account, your site is temporary and will be deleted within an hour. To keep it permanently, create a free Netlify account (no credit card required) and claim the site.

  • To keep your site permanently, click the option to sign up for a free account on the Netlify page.
  • Follow the sign-up prompts to create your account and claim ownership of the site.

Share it with someone

Copy your .netlify.app URL and send it to a friend or family member. They can open it on their phone or computer and see the website you just built from scratch.

Secret mission

Add a Contact Section

Your website looks great, but visitors have no way to reach you. Add a professional "Get In Touch" section with styled links to your email and social profiles, then re-deploy the updated site to Netlify.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely locally and uses Netlify's free tier, so there are no ongoing costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • The my-website folder on your Desktop (containing index.html and style.css).
  • Your Netlify site (the live URL where your website is hosted).
  • The Live Server extension in VS Code.

Keep everything running

No action needed. Choose this if you're still actively building or want to keep your site live and your files accessible.

  • Your my-website folder stays on your Desktop.
  • Your Netlify site remains live at its URL (free, no ongoing charges).
  • The Live Server extension stays installed in VS Code for future projects.

Pause - I'll come back to this later

Stop Live Server to free up your local port, but keep your files and Netlify site intact.

  • In VS Code, click Go Live in the bottom status bar (or press Alt+L, Alt+C) to stop the Live Server.
  • Close the browser tab showing your local preview.
  • Your Netlify site stays live at its URL. No action needed there.
  • Your my-website folder stays on your Desktop for when you're ready to return.

Delete - I don't want to use this again

Remove all project resources and start fresh.

  • Stop Live Server by clicking Go Live in the VS Code status bar (or press Alt+L, Alt+C).
  • Delete the my-website folder from your Desktop. Open File Explorer, navigate to your Desktop, right-click the my-website folder, and select Delete.
  • Delete your Netlify site (if you created an account). Go to your site's dashboard on Netlify, then navigate to Project configuration, select General, scroll down to Danger zone, and follow the guided steps to delete your site.
  • Uninstall the Live Server extension. In VS Code, press Ctrl+Shift+X to open Extensions, search for Live Server, click on it, and select Uninstall.

That's a Wrap!

That's a Wrap!

Nice work! You just built your first website from scratch and put it on the internet for anyone to see.

You've learned how to:

  • Written HTML to structure a complete webpage with a hero, about, skills, and footer sections.
  • Written CSS to style it with gradients, Flexbox layouts, hover effects, and responsive design.
  • Deployed your site to Netlify and got a live URL anyone can visit.
  • Added a contact section with styled email and social links.

Ready to quiz yourself?