Build and Deploy Your Personal Website

Build a personal website with HTML and CSS, then deploy it live.

Introduction

30 Second Summary

Every professional has a corner of the internet that's theirs. A personal website is the simplest way to say "I exist, I build things, and here's how to find me."

In this project, you will build a personal landing page from scratch using HTML and CSS, then deploy it live to the internet using GitHub Pages. Everything happens in your browser with zero installs.

What You'll Build

A polished personal landing page with a hero section, an about blurb, and social links, hosted live on the internet for anyone to visit.

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

  • A complete index.html file with semantic HTML structure for your page.
  • A style.css file with modern CSS styling including colors, layout, and typography.
  • A live website hosted on GitHub Pages at your own username.github.io URL.
  • Secret Mission: Add a dark mode toggle using JavaScript.

Are there any prerequisites?

You need a GitHub account and a web browser. If you don't have a GitHub account yet, sign up for free at github.com before starting.

Create Your Repository

Every website needs a home for its code. On GitHub, that home is called a repository. It stores all your files and tracks every change you make.

In this step, you'll create your repository and open a browser-based code editor called github.dev. No downloads or installations needed.

In this step, get ready to:
  • Create a new GitHub repository named after your username.
  • Open the github.dev browser-based code editor.
  • Get familiar with the editor layout.
Create a new GitHub repository

GitHub Pages serves your website from a repository that matches your username. You need to create this specific repository so your site appears at yourusername.github.io.

  • In your browser, go to github.com and sign in to your account.
  • In the upper-right corner of the page, click the + icon.
  • Select New repository from the dropdown menu.
  • In the Repository name field, type your GitHub username followed by .github.io.
  • Make sure Public is selected (this is the default).
  • Scroll down and check the box next to Add a README file.
  • Click Create repository.

Why does the repository name matter?

GitHub Pages looks for a repository named exactly yourusername.github.io to serve as your personal website. For example, if your GitHub username is janedoe, your repository name must be janedoe.github.io.

This special naming convention tells GitHub to automatically host your site at https://yourusername.github.io.

Can't find the + icon?

Make sure you're signed in to GitHub. The + icon only appears in the upper-right corner when you're logged in. If you still don't see it, try refreshing the page.

help me find where to create a new repository on GitHub

Open the github.dev editor

Now that your repository exists, you need a code editor to write your HTML and CSS files. github.dev is a full code editor that runs entirely in your browser. No downloads required.

  • On your new repository page, press the . key on your keyboard (the period/dot key).

The page transforms into a code editor that looks and works like VS Code. You should see the Explorer panel on the left with your README.md file listed.

What is github.dev?

github.dev is a lightweight browser-based editor provided by GitHub. It gives you the same interface as VS Code (file explorer, syntax highlighting, source control) without installing anything on your computer.

Your work is saved in the browser's local storage until you commit it. You should commit your changes regularly to make sure they're always accessible.

Nothing happened when you pressed the dot key?

Make sure your cursor is not inside a text field or search box on the page. Click somewhere on the white space of the repository page first, then press the . key. You can also try changing github.com to github.dev in your URL bar.

help me open the github.dev editor for my repository

Get familiar with the editor layout

Before you start writing code, take a moment to learn where things are in the editor. There are two areas you'll use throughout this project.

  • Look at the left sidebar (called the Activity Bar). The top icon opens the Explorer panel, which shows your file tree.
  • Confirm you see README.md listed in the Explorer.
  • Look for the Source Control icon further down the Activity Bar (it looks like a branching line). This is where you'll save your changes later.

What is Source Control?

Source Control is how you save snapshots of your code (called commits). Think of it like pressing "Save" on a document, but with a description of what changed. You'll use this in a later step to publish your website files.

Your editor is open and ready. Next up, you'll create your HTML file and start building the structure of your personal website.

Build Your HTML Page

Your repository is set up and the github.dev editor is ready to go. Now it's time to write the actual code that becomes your website.

Every website starts with an HTML file that defines the page's content and structure. In this step, you'll create the main page file and fill it with the sections that make up your personal site.

In this step, get ready to:
  • Create your index.html file in the editor.
  • Write the full HTML structure with content sections.
  • Create your style.css file for styling later.
Create your HTML file

Browsers look for a file called index.html as the main entry point of a website. This is the file that loads when someone visits your URL.

  • In the Explorer panel on the left side of the editor, hover over the file area until you see small icons appear.
  • Click the New File icon (it looks like a page with a plus sign).
  • Type index.html as the file name and press Enter.

The file opens in the main editor area, ready for you to add code.

Don't see the New File icon?

Make sure you're hovering directly over the file list area in the Explorer panel. The icons only appear when you hover. You can also right-click in the Explorer area and select New File from the menu.

Help me find the New File icon in github.dev

Write the HTML structure

Your page needs a complete HTML structure including metadata in the head, and visible content in the body. You'll add a header with your name, a hero tagline, an about section, and links to your profiles.

  • Click inside the empty index.html file in the editor, then copy and paste the following code:
<!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>
    <div class="container">
        <header>
            <h1>Your Name</h1>
        </header>

        <section class="hero">
            <p class="tagline">Aspiring web developer building cool things on the internet.</p>
        </section>

        <section class="about">
            <h2>About Me</h2>
            <p>Hi there! I'm learning web development and this is my very first website. I built it from scratch using HTML and CSS, and deployed it using GitHub Pages. Pretty cool, right?</p>
        </section>

        <section class="links">
            <h2>Find Me Online</h2>
            <a href="https://github.com/yourusername" class="link-button">GitHub</a>
            <a href="https://linkedin.com" class="link-button">LinkedIn</a>
            <a href="mailto:your-email@example.com" class="link-button">Email Me</a>
        </section>
    </div>
</body>
</html>

What does this code do?

  • <!DOCTYPE html> tells the browser this is a modern HTML5 document.
  • The <head> section contains metadata the browser needs but doesn't display, including the page title and a link to your CSS file.
  • The <body> section contains everything visible on the page, organized into a header, hero, about, and links section.
  • Each <section> has a class attribute that you'll use later to target it with CSS styling.
  • Customize the placeholder text to make it yours. Replace Your Name in the <h1> and <title> tags with your actual name.
  • Update the links in the links section with your real profile URLs if you'd like, or leave them as placeholders for now.

Personalize it later

You can always come back and change the text, tagline, and links after your site is live. Focus on getting the structure right for now.

You won't see this rendered as a webpage yet. That will happen after you deploy to GitHub Pages in a later step.

Seeing red or yellow underlines in the editor?

The editor may highlight certain lines if it detects a potential issue. Double-check that all opening tags like <section> have matching closing tags like </section>. Make sure there are no missing angle brackets or quotation marks.

Help me fix errors in my HTML file

✔️ Awesome, I've got everything!

Great. Make sure the code is visible in the editor. Your work is saved in the browser's local storage until you commit it.

ⓧ I'd like to double check the full code

Here's the complete index.html file for comparison:

<!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>
    <div class="container">
        <header>
            <h1>Your Name</h1>
        </header>

        <section class="hero">
            <p class="tagline">Aspiring web developer building cool things on the internet.</p>
        </section>

        <section class="about">
            <h2>About Me</h2>
            <p>Hi there! I'm learning web development and this is my very first website. I built it from scratch using HTML and CSS, and deployed it using GitHub Pages. Pretty cool, right?</p>
        </section>

        <section class="links">
            <h2>Find Me Online</h2>
            <a href="https://github.com/yourusername" class="link-button">GitHub</a>
            <a href="https://linkedin.com" class="link-button">LinkedIn</a>
            <a href="mailto:your-email@example.com" class="link-button">Email Me</a>
        </section>
    </div>
</body>
</html>
Create your CSS file

Your HTML references a file called style.css in the <link> tag. You need to create this file so the browser can find it when styling is added in the next step.

  • In the Explorer panel, click the New File icon again (the page with a plus sign).
  • Type style.css as the file name and press Enter.
  • Leave this file empty for now. You'll add styling in the next step.

You should now see three files listed in the Explorer panel: README.md, index.html, and style.css.

Why create an empty file?

Your HTML already links to style.css with the <link rel="stylesheet" href="style.css"> tag. Creating the file now means the connection is ready when you add styles in the next step.

Don't see all three files?

Make sure you created the files at the top level of the repository, not inside a subfolder. All three files should appear at the same level in the Explorer panel. If you accidentally created a file inside a folder, right-click it and select Delete, then create it again at the top level.

Help me find my missing files in github.dev

Your page structure is complete with all the content sections in place. Next up, you'll bring it to life with CSS styling.

Style It with CSS

Your HTML is giving your page structure, but right now it would look like plain text in a browser.

CSS is what makes a webpage look polished. It controls colors, fonts, spacing, and layout. In this step, you'll write styles that transform your plain HTML into a centered, modern-looking landing page.

In this step, get ready to:
  • Add a CSS reset and base layout styles.
  • Style each section of your page with colors, fonts, and spacing.
  • Verify your CSS class names match your HTML.
Set up base styles

Browsers add their own default spacing to elements, which causes inconsistent layouts. A CSS reset removes those defaults so you start from a clean slate.

  • Click on style.css in the Explorer panel to open it in the editor.
  • Add the following base styles:
/* Reset browser defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Center the page content */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f0f4f8;
    color: #2d3748;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Constrain the content width */
.container {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

What does this code do?

The * selector targets every element on the page. Setting margin: 0 and padding: 0 removes the browser's default spacing so you have full control.

The body styles use flexbox (display: flex) to center your content both horizontally and vertically on the page. The .container class limits how wide your content stretches, keeping it readable.

You won't see a visual change yet. The github.dev editor doesn't include a live preview, so you'll see your styled page come to life when you deploy it in Step 5.

Why is there no preview?

The github.dev editor is lightweight and runs entirely in your browser. It doesn't have a built-in web server to render your HTML and CSS together. Your code is still being saved correctly. You'll confirm everything looks right once it's deployed.

Seeing red underlines or warnings?

Make sure every opening curly brace { has a matching closing brace }. A missing brace will break all the styles that come after it.

Check that you typed a colon : between property names and values, and a semicolon at the end of each line.

Help me fix a CSS syntax error in my style.css file.

Style each section

Now that your layout foundation is set, you'll add styles for each content section. These control how your name, tagline, about text, and links look.

  • In style.css, add the following code below your .container block:
/* Header name styling */
header h1 {
    font-size: 2.5rem;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

/* Hero tagline styling */
.hero .tagline {
    font-size: 1.2rem;
    color: #4a5568;
    margin-bottom: 2rem;
}

/* About section spacing */
.about {
    margin-bottom: 2rem;
}

.about h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: #1a202c;
}

.about p {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
}

/* Links section styling */
.links {
    margin-bottom: 2rem;
}

.links h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #1a202c;
}

/* Pill-shaped link buttons */
.link-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin: 0.5rem;
    background-color: #4299e1;
    color: #ffffff;
    text-decoration: none;
    border-radius: 9999px;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

.link-button:hover {
    background-color: #2b6cb0;
}

What does this code do?

  • header h1 makes your name large (2.5rem) and dark.
  • .hero .tagline styles the tagline in a lighter gray to create visual hierarchy.
  • .about and .links sections get spacing between them with margin-bottom.
  • .link-button creates pill-shaped buttons using border-radius: 9999px. The transition property makes the color change smooth when hovering.

You still won't see a preview, but your styling is all in place. You'll see it rendered once the site is deployed.

Styles not looking right later when deployed?

Check that your CSS class names match the ones in your HTML exactly. For example, .link-button in CSS must match class="link-button" in HTML. Class names are case-sensitive.

Make sure each property line ends with a semicolon. A missing semicolon can silently break the properties that follow it.

Help me troubleshoot why my CSS styles aren't applying to my HTML.

Review your code

Since you can't preview your site in github.dev, a quick review now saves you debugging time later.

  • Read through style.css and check that every opening brace { has a matching closing brace }.
  • Switch to index.html and confirm that each class attribute matches a selector in your CSS.
  • Check these pairs: class="tagline" matches .tagline in CSS, and class="link-button" matches .link-button in CSS.

✔️ Awesome, I've got everything!

Great. Double check you've saved your file by pressing Cmd+S (macOS) or Ctrl+S (Windows).

ⓧ I'd like to double check the full code

Here is the complete style.css file. Compare it with yours and fix any differences.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f0f4f8;
    color: #2d3748;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.container {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

header h1 {
    font-size: 2.5rem;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.hero .tagline {
    font-size: 1.2rem;
    color: #4a5568;
    margin-bottom: 2rem;
}

.about {
    margin-bottom: 2rem;
}

.about h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: #1a202c;
}

.about p {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
}

.links {
    margin-bottom: 2rem;
}

.links h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #1a202c;
}

.link-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin: 0.5rem;
    background-color: #4299e1;
    color: #ffffff;
    text-decoration: none;
    border-radius: 9999px;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

.link-button:hover {
    background-color: #2b6cb0;
}

Your styles are written and ready. Next up, you'll commit your code so it's saved permanently in your repository.

Commit Your Code

Your HTML and CSS are written, but right now the code only lives in your browser's local storage. If you closed this tab or cleared your browser data, everything would disappear.

In this step, you'll commit your changes to save them permanently in your GitHub repository. Committing is like pressing "save" on a document, but for code. Once committed, your files are safely stored on GitHub's servers.

In this step, get ready to:
  • Open the Source Control panel in github.dev.
  • Stage and commit your files with a descriptive message.
  • Verify that your changes are saved to the repository.
Open the Source Control panel
  • Click the **Source Control** icon in the left sidebar.
  • It looks like a branching line with dots, and should show a badge with the number 2 (representing your two changed files).

You should see your index.html and style.css files listed under Changes.

What is committing?

A commit is a snapshot of your project at a particular point in time. It records the changes you made and stores them permanently in your repository.

Until you commit, your work is only saved in your browser's local storage. Committing moves it to GitHub's servers where it's safe and accessible from any device.

Stage and commit your changes

Staging tells GitHub which files you want to include in your commit. You can stage files individually or all at once.

  • Click the + icon next to Changes to stage all your files at once.
  • Your files move from the Changes section into a Staged Changes section.
  • In the text box at the top of the Source Control panel, type Add my personal website as your commit message.
  • Click the checkmark icon to commit.
  • When prompted, choose Yes to commit directly to the main branch.

Why write a commit message?

Commit messages describe what changed and why. They create a history log so you (or teammates) can understand what each set of changes accomplished.

Good messages are short and descriptive, like "Add my personal website" or "Fix broken link in about section."

Why don't I need to push?

In a typical Git workflow, you commit locally and then "push" your changes to a remote server. In github.dev, your changes are committed directly to the branch on GitHub. No separate push step is needed.

Verify your files are saved
  • Check that the Source Control badge (the number on the icon) has disappeared. This means there are no more pending changes.
  • Click the Explorer icon at the top of the left sidebar (the stacked-files icon).
  • Confirm that index.html and style.css are listed alongside your README.md file.

Still seeing the badge?

If the Source Control badge still shows a number, your commit did not go through. Go back to the Source Control panel and check for an error message at the top.

Make sure you clicked the checkmark icon after typing your commit message, and selected Yes when prompted about committing to the main branch.

Help me figure out why my commit didn't save in github.dev.

Your code is now safely stored in your GitHub repository. Next up, you'll turn this repository into a live website that anyone on the internet can visit.

Deploy with GitHub Pages

Your code is committed and safely stored in your GitHub repository.

Now comes the exciting part. You'll turn that repository into a live website that anyone on the internet can visit using GitHub Pages.

In this step, get ready to:
  • Navigate back to your repository on GitHub.
  • Enable GitHub Pages for your repository.
  • See your personal website live on the internet.
Go back to GitHub

You've been writing code in the github.dev editor, but configuring your repository's deployment settings happens on github.com.

  • In the browser tab where you have github.dev open, click on the URL bar at the top of your browser.
  • Change github.dev to github.com in the address and press Enter.
  • You should now see your repository page on github.com, with index.html, style.css, and README.md listed in the file browser.

Closed the editor tab?

No problem. Open a new tab, go to github.com, and click on your repository name from the left sidebar or your profile page.

Enable GitHub Pages

GitHub Pages is a free hosting service that takes your repository's files and publishes them as a website. You just need to tell GitHub which branch to deploy from.

  • Click Settings in the tab bar at the top of your repository page.
  • In the left sidebar, look for the Code and automation section.
  • Click Pages under that section.
  • Under Build and deployment, find the Source dropdown and select Deploy from a branch.
  • Under Branch, select main from the branch dropdown.
  • Keep the folder set to / (root).
  • Click Save.

What is GitHub Pages?

GitHub Pages takes the HTML, CSS, and JavaScript files from your repository and publishes them as a website. Because your repository is named yourusername.github.io, GitHub automatically serves it as your personal user site.

By selecting "Deploy from a branch" with the main branch and root folder, you're telling GitHub to publish every file at the top level of your repository.

Don't see the Settings tab?

If you can't see Settings in the tab bar, look for a ... dropdown menu at the end of the tabs and click it. Settings will be listed there.

help me find the Settings tab in my GitHub repository

Visit your live website

GitHub is now building and deploying your website. This usually takes 1-2 minutes for the first deployment.

  • Wait 1-2 minutes for GitHub to finish deploying.
  • Open a new browser tab.
  • Type your website URL into the address bar. Your URL is https:// followed by your GitHub username, followed by .github.io.
  • Press Enter to load the page.

Your personal website is now live on the internet. You should see your name in large text, your tagline, an about section, and your link buttons styled with the blue pill-shaped design.

What URL format should I use?

Your site lives at https://yourusername.github.io where yourusername is your actual GitHub username. For example, if your GitHub username is janedoe, your URL is https://janedoe.github.io.

Seeing a 404 page?

This is normal if you visit the URL too quickly. GitHub Pages can take up to 10 minutes for the first deployment.

Wait a few more minutes and refresh the page. If it still doesn't work, go back to your repository's Settings > Pages and confirm the source is set to the main branch with / (root) folder.

Also check that your repository name matches the format yourusername.github.io exactly (using your actual GitHub username, all lowercase).

help me troubleshoot why my GitHub Pages site is showing a 404 error

Secret mission

Add Dark Mode Toggle

Your website looks great, but what about visitors who prefer dark backgrounds? In this bonus challenge, you'll add a dark mode toggle using JavaScript, CSS custom properties, and localStorage to remember the user's preference.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely in the browser and is hosted for free on GitHub Pages. There are no ongoing costs to worry about.

Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • GitHub repository (yourusername.github.io).
  • GitHub Pages site (live at https://yourusername.github.io).

Keep everything running

No action needed. Choose this if you want your personal website to stay live on the internet.

  • Your site will remain available at https://yourusername.github.io for free.
  • GitHub Pages has no monthly fees for public repositories.
  • You can continue editing your site anytime by pressing . on your repository page to reopen github.dev.

Pause - I'll come back to this later

Take your site offline while keeping all your code intact. You can re-publish anytime by changing the setting back.

  • Go to your repository on github.com.
  • Click Settings (tab at the top of the repo).
  • In the left sidebar under "Code and automation", click Pages.
  • Under "Build and deployment", under "Source", select Deploy from a branch.
  • Use the branch dropdown menu and select None as the publishing source.
  • Click Save.

Your site will go offline, but all your files remain in the repository. To republish later, set the branch back to main and folder to / (root).

Delete - I don't want to use this again

Remove your repository and site entirely. This deletes all your code and takes the site offline permanently.

  • Go to your repository on github.com.
  • Click Settings (tab at the top of the repo).
  • Scroll down to the "Danger Zone" section.
  • Click Delete this repository.
  • Click I want to delete this repository.
  • Read the warnings and click I have read and understand these effects.
  • Type your repository name (yourusername.github.io) to confirm.
  • Click Delete this repository.

Deleting the repository also removes the GitHub Pages site. Your URL will stop working within a few minutes.

That's a Wrap!

That's a Wrap!

Congratulations! You just went from zero to a live website on the internet, all without installing a single thing.

You've learned how to:

  • Write a complete webpage using HTML (structure) and CSS (styling).
  • Use a professional code editor (github.dev) entirely in the browser.
  • Commit code changes to a GitHub repository and deploy a website to GitHub Pages for free.
  • Added a dark mode toggle using JavaScript, CSS variables, and localStorage.

Ready to quiz yourself?