Build and Deploy a Portfolio Site

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

Introduction

30 Second Summary

You have skills, projects, and ideas. But without a website, they're invisible to anyone who doesn't already know you.

In this project, you will build a personal portfolio website from scratch using HTML and CSS, then deploy it live to the internet using GitHub Pages so anyone with the link can see it.

What You'll Build

You'll type your own URL into a browser and see a clean, modern portfolio page with your name, your projects in a card grid, and your contact info ready for anyone to find.

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

  • A live portfolio website at your own public URL that you can share with anyone.
  • A responsive HTML and CSS codebase you understand and can update anytime with a sticky nav bar, project card grid, and professional typography.
  • A Git-powered workflow where pushing code to GitHub automatically updates your live site.
  • Secret Mission: Add a dark mode toggle that lets visitors switch between light and dark color schemes with one click.

Are there any prerequisites?

None. This project includes setup instructions for every tool you need. You do not need any prior coding experience.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters to you. By the end of this project, you'll have a personal portfolio website live on the internet at your own URL.

Set Up Your Tools

To build and deploy your portfolio site, you need a code editor where you'll write HTML and CSS files.

This project uses Cursor, a code editor with built-in AI assistance that can help when you get stuck. In this step, you'll install Cursor and create a project folder to hold your website files.

In this step, get ready to:
  • Install Cursor on your computer.
  • Create a project folder on your Desktop.
  • Open the folder in Cursor and confirm your workspace is ready.
Install Cursor

✔️ I already have Cursor installed

You're all set. Skip ahead to the next substep below.

ⓧ I don't have Cursor yet

  • Go to cursor.com/download in your browser.
  • Click the download button for your operating system.
  • Open the downloaded file.

macOS

  • Drag Cursor into your Applications folder.

Windows

  • Run the installer and follow the prompts.

That's it. You'll open Cursor and sign in next.

What is Cursor?

Cursor is a code editor built on top of VS Code. It has the same interface, file explorer, and terminal, but adds AI features that can help you understand code and fix errors.

If you've used VS Code before, Cursor will feel identical. The skills you build here transfer directly to any VS Code-based editor.

Create your project folder and open it in Cursor
  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Cursor and press Enter to open it.

First time opening Cursor?

Cursor will ask you to sign in or create a free account. Follow the prompts to sign up at cursor.com if you don't have an account yet.

  • In Cursor, click Terminal in the top menu bar.
  • Click New Terminal.
  • Move to your Desktop and create your project folder by running these commands:
cd ~/Desktop
mkdir portfolio
  • Confirm the folder exists by running:
ls

You should see portfolio listed in the output.

Don't see the portfolio folder?

  • If you see mkdir: portfolio: File exists, the folder is already there. Run ls to confirm.
  • Make sure you ran cd ~/Desktop first. If you skipped it, the folder was created in your home directory instead.
  • help me find or create my portfolio folder
  • Click File in Cursor's top menu bar.
  • Click Open Folder.
  • Navigate to your Desktop.
  • Select the portfolio folder and click Open.

Cursor's file explorer sidebar on the left now shows portfolio at the top. The folder is empty — that's expected.

Your editor is ready and your project folder is waiting. Next up, you'll fill it with HTML to build the actual content of your portfolio.

Build Your HTML Page

In the last step, you set up your tools and created an empty workspace. Now it's time to build the actual content people will see when they visit your portfolio.

HTML is the language that gives a webpage its structure. Every heading, paragraph, link, and section you see on any website starts as HTML. Building HTML first lets you see your content in the browser immediately.

In this step, get ready to:
  • Create an HTML file with proper document structure and a navigation bar.
  • Add About, Projects, and Contact sections with real content.
  • Preview your page in a browser and see what HTML looks like without styling.
Create the HTML file with document structure and navigation

Every webpage starts with a standard skeleton: a DOCTYPE declaration, a head for metadata, and a body for visible content. Your navigation bar lives inside a header element at the top.

  • In Cursor's file explorer sidebar, right-click inside the empty portfolio folder and select New File.
  • Name the file index.html and press Enter.
  • Paste the following code into index.html to set up the document structure and navigation:

Can't see the file explorer sidebar?

If the left panel shows the AI Chat or Composer interface instead of your folder structure, the File Explorer is hidden. Press Ctrl+Shift+E (Windows) or Cmd+Shift+E (macOS) to toggle the File Explorer into view.

You can also click View in the top menu bar, then select Explorer. Your portfolio folder and its contents appear in the left panel.

Help me find the file explorer in Cursor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Portfolio</title>
</head>
<body>
    <header>
        <nav>
            <a href="#about" class="logo">Your Name</a>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

What does this code do?

The first few lines are metadata that every HTML page needs. <!DOCTYPE html> tells the browser this is a modern HTML5 document. The <meta charset="UTF-8"> tag ensures special characters display correctly.

The <header> contains a <nav> element with your name as a logo link and a list of navigation links. Each link's href uses #about style anchors that will jump to matching section IDs on the page.

  • Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
  • Right-click index.html in Cursor's file explorer sidebar and select Reveal in Finder (macOS) or Reveal in File Explorer (Windows).
  • Double-click index.html in Finder or File Explorer to open it in your browser.

You should see your name and the words About, Projects, and Contact displayed as plain blue links on a white page.

Don't see anything in the browser?

  • Make sure you saved the file (Ctrl+S). Unsaved files show a dot on the tab in Cursor.
  • Confirm the file is named exactly index.html with no extra spaces or capital letters. If your tab says Untitled-1, the file was never formally saved with a name.
  • If you accidentally typed index.html as text inside the file instead of naming it, clear the file content, press Ctrl+S (Windows) or Cmd+S (macOS) to open the Save As dialog, and save it as index.html inside your portfolio folder.
  • help me figure out why my HTML file isn't displaying in the browser
Add the About, Projects, and Contact sections

Your navigation links point to sections that don't exist yet. Now you will build the main content area with three sections that match those links.

  • In index.html, find the closing </header> tag.
  • Delete the </body> and </html> closing tags below it (you will add them back at the end).
  • Below </header>, paste the following code to add the About section inside a <main> element:
    <main>
        <section id="about">
            <h1>Hi, I'm Your Name</h1>
            <p>I'm a developer who loves building things for the web. Welcome to my corner of the internet where I showcase my projects and share what I'm learning.</p>
        </section>
    </main>

What does this code do?

The <main> element wraps all your primary content (everything except the header and footer). The <section id="about"> creates a named region that the navigation link #about can jump to.

The <h1> is the most important heading on the page. A page should only have one <h1> to clearly signal what it's about.

  • Place your cursor right before the closing </main> tag.
  • Paste the following code above </main> to add the Projects section with three project cards:
        <section id="projects">
            <h2>My Projects</h2>
            <div class="projects-grid">
                <article class="project-card">
                    <h3>Project One</h3>
                    <p>A brief description of what this project does and what you learned building it.</p>
                </article>
                <article class="project-card">
                    <h3>Project Two</h3>
                    <p>A brief description of what this project does and what you learned building it.</p>
                </article>
                <article class="project-card">
                    <h3>Project Three</h3>
                    <p>A brief description of what this project does and what you learned building it.</p>
                </article>
            </div>
        </section>

What does this code do?

Each <article class="project-card"> represents a self-contained project. The projects-grid wrapper div groups them together so CSS can arrange them into a grid layout later.

Using <article> instead of a generic <div> tells browsers and screen readers that each card is a standalone piece of content.

  • Save index.html and switch to your browser tab.
  • Refresh the page. You should now see your introduction heading and the three project titles listed as plain text.

Only seeing the nav links from before?

  • Make sure you deleted the old </body> and </html> tags before pasting. Duplicate closing tags can hide content.
  • Check that the Projects section code is placed above </main>, not below it.
  • help me figure out why my HTML sections aren't showing up
  • Back in Cursor, place your cursor right before the closing </main> tag again.
  • Paste the following code above </main> to add the Contact section:
        <section id="contact">
            <h2>Get In Touch</h2>
            <p>I'm always open to new opportunities and conversations.</p>
            <p class="email">your.email@example.com</p>
            <div class="social-links">
                <a href="https://github.com/yourusername">GitHub</a>
                <a href="https://linkedin.com/in/yourusername">LinkedIn</a>
            </div>
        </section>

What does this code do?

The class="email" and class="social-links" attributes don't change how the page looks yet. They are hooks that CSS will use later to style these elements differently from regular text.

  • Finally, add a footer and close out the document. Paste the following code below the closing </main> tag:
    <footer>
        <p>2026 Your Name</p>
    </footer>
</body>
</html>
  • Save index.html.

Seeing broken layout or missing text?

  • Make sure </body> and </html> appear only once at the very end of the file.
  • Check that each <section> has a matching </section> and <main> has a matching </main>.
  • If you customized the text content (your name, bio, project descriptions), make sure you only changed the words between the tags. Do not delete the tags themselves (like <section>, <p>, or <h1>). Pasting plain text over an entire block removes the structural HTML that CSS needs to target.
  • help me fix my HTML structure
Preview the raw HTML in your browser

Your HTML file now has all the content a portfolio needs. Before you refresh, take a guess: what do you think the page looks like with all this structure in place?

  • Switch to your browser and refresh the page.

You should see your name, section headings, project titles, and contact links all displayed as plain text on a white background. Default serif font, blue underlined links, no spacing, no layout.

Why does it look so plain?

This is what HTML looks like without CSS. HTML only defines the structure and content of a page. It has no opinion about colors, fonts, spacing, or layout.

The browser applies its own default styles (serif font, blue links, stacked blocks), which is why every unstyled page looks like a document from the 1990s. In the next step, CSS will transform this into a modern, professional design.

✔️ Awesome, I've got everything!

Great. Double check you've saved index.html and your browser shows all the content (nav links, headings, project titles, contact info).

ⓧ I'd like to double check the full code

Your index.html should contain these sections in order. Scroll through your file and confirm each one is present:

  • The <!DOCTYPE html> declaration and <head> with charset, viewport, and title.
  • A <header> containing a <nav> with your name link and three list items (About, Projects, Contact).
  • A <main> element containing three <section> elements with IDs about, projects, and contact.
  • Three <article class="project-card"> elements inside a <div class="projects-grid">.
  • A <footer> with copyright text.
  • Closing </body> and </html> tags at the very end.

Your page has all the right content, but it looks like a plain text document. Next up, you will add CSS to transform this raw structure into a professional, modern portfolio.

Style with CSS

In the last step you built your HTML page and opened it in the browser. You saw all your content displayed, but it looks like a plain text document from the 1990s.

CSS transforms raw HTML into a professional design with layout, colors, and typography. By the end of this step, your portfolio will look like something you would be proud to share.

In this step, get ready to:
  • Create a CSS file and link it to your HTML page.
  • Style your navigation, layout, and project cards with modern CSS.
  • See the full transformation from plain text to professional portfolio.
Create the stylesheet and add base styles

A stylesheet is a separate file that controls how your HTML looks. You define styles once and they apply across the entire page.

  • In Cursor's file explorer on the left, right-click in the empty space below index.html.
  • Select New File.
  • Name the file style.css and press Enter.
  • Paste the following base styles into your new style.css file:
/* Remove all default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Define reusable color variables for the whole site */
:root {
    --color-bg: #ffffff;
    --color-text: #1a1a2e;
    --color-accent: #4361ee;
    --color-card-bg: #f8f9fa;
    --color-header-bg: #ffffff;
    --color-border: #e9ecef;
    --color-muted: #555555;
}

/* Set the base font and colors for the page */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

What does this code do?

This CSS does three things to set a clean foundation for your portfolio.

  • The * selector removes all default margins and padding that browsers add. Every element starts from a blank slate.
  • The :root block defines CSS custom properties (variables) for colors. Instead of typing #4361ee everywhere, you write var(--color-accent) and change it in one place later.
  • The body rule sets a modern system font stack and applies your color variables.

Now you need to tell your HTML page to use this stylesheet.

  • Switch to index.html in Cursor by clicking its tab at the top.
  • Find this line inside the <head> section:
<title>Your Name - Portfolio</title>
  • Add this new line directly below it:
<link rel="stylesheet" href="style.css">
  • Save both files by pressing Cmd+S (macOS) or Ctrl+S (Windows) in each tab.
  • Refresh your browser tab showing index.html.

Your page now uses a clean sans-serif font instead of the default serif. The text is darker and all default spacing has collapsed, so your content presses tightly against the left edge of the browser window.

Why is my text pressed against the left edge?

This is the expected effect of the universal CSS reset rule * { margin: 0; padding: 0; }. It strips every default browser margin so you start with a blank slate.

The next code chunk adds max-width: 900px and margin: 0 auto to the main element, which centers your content and gives it breathing room. The tight margin is temporary.

🙋‍♀️ Page still looks the same?

  • Make sure style.css is in the same folder as index.html. If it is inside a subfolder, the link won't find it.
  • Check that the <link> tag is inside the <head> section, not inside <body>.
  • Confirm the filename is exactly style.css (lowercase, no spaces) in both the file explorer and the href attribute.

Help me figure out why my CSS file isn't loading.

Style the header and main content sections

With the foundation set, you can now style individual sections. The navigation bar and content layout make the biggest visual impact.

  • Switch back to style.css in Cursor.
  • Add the following header and navigation styles below your existing body rule:
/* Make the header stick to the top when scrolling */
header {
    position: sticky;
    top: 0;
    background-color: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 2rem;
    z-index: 100;
}

/* Arrange nav items in a row with space between */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

/* Style the site name as a bold logo link */
.logo {
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--color-text);
}

What does this code do?

  • The position: sticky property keeps the header visible at the top as visitors scroll down the page.
  • Flexbox (display: flex) arranges the logo and nav links in a horizontal row with space between them.
  • The max-width: 900px with margin: 0 auto centers the nav content so it doesn't stretch across ultra-wide screens.
  • Add the navigation link styles and main content layout below the .logo rule:
/* Arrange nav links horizontally with spacing */
nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

/* Remove default link underlines */
nav ul a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
}

/* Highlight links on hover with accent color */
nav ul a:hover {
    color: var(--color-accent);
}

/* Center the main content with comfortable padding */
main {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

/* Add vertical breathing room between sections */
section {
    padding: 4rem 0;
}

What does this code do?

  • The list-style: none removes the bullet points from the nav links, and gap: 2rem spaces them out evenly.
  • The :hover pseudo-class changes link color when someone moves their cursor over a link.
  • The main and section rules center your content and add vertical spacing so sections don't feel cramped.
  • Save style.css and refresh your browser.

You should see a sticky navigation bar at the top with your name on the left and links on the right. The content below is now centered with comfortable spacing between sections.

Navigation links still stacked vertically?

  • Check that your nav ul rule includes display: flex. Without it, list items stack vertically by default.
  • Make sure there is a space between nav and ul in the selector. Writing navul without a space targets nothing.

Help me debug my navigation layout.

  • Add the About section, heading, and project card styles below the section rule:
/* Make the main heading large and bold */
#about h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Style the intro paragraph with muted color */
#about p {
    font-size: 1.2rem;
    color: var(--color-muted);
    max-width: 600px;
}

/* Style all section headings consistently */
h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

/* Create a responsive grid that adapts to screen width */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* Style each project as a bordered card */
.project-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
}

/* Color project titles with the accent color */
.project-card h3 {
    margin-bottom: 0.5rem;
    color: var(--color-accent);
}

What does this code do?

  • CSS Grid (display: grid) creates a responsive layout for your project cards. The auto-fit keyword with minmax(250px, 1fr) means cards are at least 250px wide and automatically wrap to new rows on smaller screens.
  • The .project-card rules give each card a subtle background, rounded corners, and a thin border to make them feel like physical cards.
  • The max-width: 600px on the About paragraph keeps line length comfortable for reading.
  • Save style.css and refresh your browser.

Your projects now display as a grid of cards with rounded borders and a light background. The main heading is large, and the intro text sits at a comfortable reading width.

Cards not appearing side by side?

  • If your browser window is narrow, the cards will stack. Widen your window past 800px to see them side by side.
  • Check that the class name in your CSS (.projects-grid) matches exactly with class="projects-grid" in your HTML. Class names are case-sensitive.

Help me fix my CSS Grid layout for project cards.

Style the contact section and footer
  • Add the final styles for the contact section and footer below your .project-card h3 rule:
/* Style contact section text */
#contact p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* Make the email address stand out */
.email {
    font-weight: 600;
    color: var(--color-accent);
}

/* Arrange social links in a row */
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* Style social links with accent color */
.social-links a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}

/* Add underline on hover for social links */
.social-links a:hover {
    text-decoration: underline;
}

/* Center footer text with a top divider */
footer {
    text-align: center;
    padding: 2rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
}

What does this code do?

  • The .email class makes your email address bold and uses the accent color so it draws the eye.
  • The .social-links uses flexbox to arrange GitHub and LinkedIn links side by side.
  • The footer gets a subtle top border to visually separate it from the main content.
  • Save style.css.

Before you refresh, think about what you expect to see. Your HTML content was plain text with default browser styling. What do you think a sticky nav bar, centered layout, card grid, and custom colors will look like together?

  • Refresh your browser.

You should see a modern portfolio with a sticky navigation bar at the top, proper spacing between sections, a responsive card grid for projects, professional typography, and accent-colored links.

Some styles not applying?

  • Open your browser's DevTools by pressing F12. Check the Console tab for errors like "Failed to load resource" which means the CSS file path is wrong.
  • Make sure every CSS rule has matching opening { and closing } braces. A missing brace breaks all rules below it.
  • Check that your class selectors start with a dot (.projects-grid not projects-grid).

Help me figure out why some CSS styles are not showing up.

💡 Why use CSS custom properties?

The color variables you defined in :root at the top of your stylesheet mean you can change your entire color scheme by editing just 7 lines. Every rule that references var(--color-accent) updates automatically.

This pattern also makes features like dark mode possible. You only need to override the variables, not rewrite every rule.

✔️ Awesome, I've got everything!

Great. Double check you have saved both index.html and style.css.

ⓧ I'd like to double check the full code

Your style.css file should contain all of the chunks you added above, in this order:

  • Universal reset (* selector with margin, padding, box-sizing).
  • CSS custom properties (:root with 7 color variables).
  • Body font and color rules.
  • Header (sticky, border-bottom, z-index).
  • Nav (flexbox, max-width, centered).
  • Logo styles.
  • Nav ul and link styles with hover.
  • Main and section spacing.
  • About heading and paragraph styles.
  • H2 heading style.
  • Projects grid (CSS Grid with auto-fit).
  • Project card styles.
  • Contact, email, and social links.
  • Footer (centered, border-top, muted color).

Your index.html should have this line inside the <head>, right after the <title> tag:

<link rel="stylesheet" href="style.css">

Your portfolio looks professional and is ready to share. Next up, you will deploy it to the internet so anyone with the link can see it.

Deploy to GitHub Pages

Your portfolio looks professional with proper layout, typography, and color. Right now though, it only exists on your computer.

GitHub Pages lets you host websites for free directly from a GitHub repository. Every time you push a change, your live site updates automatically.

In this step, get ready to:
  • Initialize a Git repository to track your project files.
  • Push your code to a new GitHub repository.
  • Enable GitHub Pages and see your portfolio live on the internet.
Initialize a Git repository and commit your files

Git tracks every change you make to your code. Before you can publish your site to GitHub, Git needs to know about your files.

  • Initialize a new Git repository and create your first commit by running these commands in Cursor's terminal:
git init
git add .
git commit -m "Initial portfolio site"

What do these commands do?

  • git init creates a new Git repository inside your portfolio folder.
  • git add . stages all your files (the . means everything in the folder).
  • git commit -m "Initial portfolio site" saves a snapshot of your files with a descriptive message.

You should see output ending with something like 2 files changed and the names of your two files (index.html and style.css).

Seeing an error about identity?

If Git says something like Please tell me who you are or Author identity unknown, it needs your name and email before it can save a commit. Run these two commands to configure your identity:

git config --global user.email "your.email@example.com"
git config --global user.name "Your Name"

Replace the email and name with your own. Once configured, retry the commit by running:

git commit -m "Initial portfolio site"

Help me fix my Git identity error.

Create a GitHub repository and push your code

Your Git repository lives on your computer. To host your site with GitHub Pages, you need a copy of your repository on GitHub with a special name.

  • Open your browser and go to github.com.
  • Click the + icon in the top-right corner, then click New repository.
  • In the Repository name field, enter your-username.github.io (replacing the first part with your actual GitHub username).
  • Leave all other options unchecked. Do not add a README, .gitignore, or license.
  • Click Create repository.

Why this specific repository name?

GitHub Pages gives you a free URL based on your repository name. A repository named yourusername.github.io automatically becomes your site's address. Any other name would result in a longer URL with a path prefix.

GitHub shows a setup page with commands. You already have a repository, so you just need to connect it and push.

  • Return to Cursor's terminal and connect your local repository to GitHub by running these commands:
git remote add origin https://github.com/[[GITHUB_USERNAME="your GitHub username"]]/[[GITHUB_USERNAME="your GitHub username"]].github.io.git
git branch -M main
git push -u origin main

What do these commands do?

  • git remote add origin tells Git where to send your code on GitHub.
  • git branch -M main renames your branch to main (the standard name GitHub expects).
  • git push -u origin main uploads your code to GitHub.

💡 GitHub will ask you to sign in

When you run git push for the first time, a popup window appears asking you to sign in to GitHub. Sign in with your GitHub account and authorize access. The push continues automatically once you authenticate.

After a successful push, you should see output mentioning your branch main and the remote URL.

  • Switch to your browser and refresh your GitHub repository page.

You should see index.html and style.css listed in your repository. Your code is on GitHub.

Push failed or GitHub still shows an empty repository?

Double-check that the repository name in your command matches exactly what you created on GitHub. Make sure you replaced the username placeholder with your actual GitHub username in both places.

If the authentication popup did not appear or you dismissed it, run git push -u origin main again to trigger it.

If your push succeeded but GitHub still shows the empty "Quick setup" page, there is likely a username mismatch in your remote URL. Fix it by removing the old remote and adding the correct one:

git remote remove origin
git remote add origin https://github.com/YOUR-ACTUAL-USERNAME/YOUR-ACTUAL-USERNAME.github.io.git
git push -u origin main

Replace YOUR-ACTUAL-USERNAME with the exact username shown in the top-right corner of GitHub when you're signed in. This is case-sensitive and must match the repository you created.

Help me fix my git push error.

Enable GitHub Pages and verify your live site

Your code is on GitHub, but it is not published as a website yet. You need to tell GitHub to serve your files as a live site.

  • On your repository page on GitHub, click the Settings tab near the top of the page.
  • In the left sidebar under Code and automation, click Pages.
  • Under Build and deployment > Source, select Deploy from a branch.
  • Under Branch, select main and leave the folder as / (root).
  • Click Save.

What is GitHub Pages?

GitHub Pages takes the files in your repository and serves them as a website. Because your repository has an index.html at the root, GitHub Pages uses it as your site's homepage automatically.

GitHub Pages takes a minute or two to build and deploy your site. Before you check, what do you expect to see when you visit your URL?

  • Wait 2 minutes, then open a new browser tab.
  • Visit your live portfolio at:
https://[[GITHUB_USERNAME="your GitHub username"]].github.io

You should see your complete portfolio site with the sticky nav bar, your introduction, the project cards grid, and the contact section. This is the same page you had locally, now live on the internet for anyone to visit.

✔️ I see my portfolio site

Your site is live. Anyone with this URL can now see your portfolio.

ⓧ I see a 404 page

This usually means GitHub Pages has not finished deploying yet. Changes can take up to 10 minutes to publish.

  • Wait a few more minutes and refresh the page.
  • Go back to your repository Settings > Pages and confirm the source is set to main branch with / (root) folder.
  • Make sure your file is named exactly index.html (lowercase, case-sensitive).

Help me troubleshoot my GitHub Pages 404 error.

ⓧ I see unstyled text only

This means GitHub found your index.html but cannot find style.css.

  • Confirm style.css appears in your GitHub repository file list.
  • Check that your <link> tag in index.html says href="style.css" (no folder path, just the filename).
  • If the file is missing from GitHub, run git add ., git commit -m "Add stylesheet", and git push again.

Secret mission

Add a Dark Mode Toggle

Your portfolio looks great, but what if visitors prefer a darker color scheme? Add a dark mode toggle button that switches the entire page between light and dark themes with a single click. This introduces JavaScript, DOM manipulation, and the power of CSS custom properties for theming.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely locally and uses GitHub Pages for free hosting, 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:

  • Local portfolio folder containing index.html, style.css, and script.js.
  • GitHub repository (yourusername.github.io) with live GitHub Pages site.
  • Git (installed via winget).
  • GitHub account (only if you created one for this project).

Keep everything running

No action needed. Choose this if you plan to keep updating your portfolio site.

  • Your site stays live at your GitHub Pages URL for free.
  • You can update it anytime by editing your files and pushing to GitHub.
  • Git stays installed on your machine for future projects.
  • Your GitHub account gives you access to free repositories and hosting.

Pause - I'll come back to this later

Your portfolio site is static and hosted for free, so there is nothing to pause. If you want to temporarily hide your site without deleting anything, you can disable GitHub Pages.

  • Go to your repository on GitHub and click Settings.
  • In the sidebar under Code and automation, click Pages.
  • Under Build and deployment, change the branch dropdown to None and click Save.
  • Your site goes offline but your code and repository remain intact.
  • To re-enable later, set the branch back to main and folder to / (root).

Delete - I don't want to use this again

Remove all project resources and start fresh. Follow each step below.

Delete the local project folder:

  • Open File Explorer and navigate to the location of your portfolio folder.
  • Right-click the portfolio folder and select Delete.

Delete the GitHub repository (this also removes your live site):

  • Go to your repository on GitHub and click Settings.
  • Scroll down to the Danger Zone section.
  • Click Delete this repository.
  • Click I want to delete this repository, read the warnings, then click I have read and understand these effects.
  • Type the repository name to confirm and click Delete this repository.

Uninstall Git (optional):

  • Open a terminal (PowerShell or Command Prompt) and run:
winget uninstall --id Git.Git -e --source winget

Delete your GitHub account (only if you created it solely for this project):

  • On GitHub, click your profile picture and select Settings.
  • In the left sidebar, click Account.
  • Scroll to the bottom and click Delete your account.
  • Follow the confirmation prompts to finalize deletion. This action is permanent.

Nice Work!

Nice Work!

You just built and deployed a professional portfolio website from scratch. Your site is live on the internet at your own public URL, ready for anyone to visit.

Here's what you learned:

  • Built a complete HTML page with semantic structure (header, nav, main, sections, footer).
  • Styled it with CSS using custom properties, flexbox, and CSS Grid for a responsive layout.
  • Learned Git basics: init, add, commit, push.
  • Deployed a live website to GitHub Pages at your own public URL.
  • Secret Mission: Added JavaScript interactivity with a dark mode toggle using DOM manipulation and CSS class toggling.

Ready to quiz yourself?