Build a Portfolio Website

Build and deploy a professional portfolio website using HTML, CSS, and GitHub Pages.

Introduction

30 Second Summary

When you apply for a competitive role like Deloitte Access Economics, your application is one of hundreds. A personal portfolio website gives recruiters an immediate signal that you communicate clearly and take initiative beyond the minimum.

In this project, you will build a professional one-page portfolio website from scratch using HTML and CSS, then deploy it live on the internet using GitHub Pages. By the end, you'll have a shareable URL to paste directly into your resume or application.

What You'll Build

When you share your finished link, recruiters see a polished page with your name, a summary of your analytical skills, your economics coursework and research interests, and a way to contact you. It loads instantly, looks professional, and positions you as someone who communicates complex ideas clearly.

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

A live portfolio page where recruiters instantly see your name, positioning statement, and a clear summary of your quantitative and analytical capabilities.
Tailored content sections connecting your masters coursework directly to the kind of applied economic research Deloitte Access Economics does.
A shareable URL (yourname.github.io) you can paste into your resume, LinkedIn, or application form as proof of initiative.
Secret Mission: Animated CSS skill bars that visually represent your proficiency levels and catch the eye.

Are there any prerequisites?

None. This guide walks you through installing everything you need from scratch, including VS Code and a GitHub account. No prior coding experience is required.

Before We Start

Before We Start...

Before we dive in, let's lock in what you're about to build and why it matters.

You're going to create a live, professional portfolio website tailored specifically for your Deloitte Access Economics application. By the end, you'll have a shareable URL that proves you communicate clearly and take initiative beyond the minimum.

Set Up Your Tools

Before you can build your portfolio website, you need two things: a code editor to write your website files, and a place to host them online for free.

In this step, you will install Visual Studio Code (VS Code) as your code editor, create a free GitHub account to host your site, and set up your project folder with the two files every website needs.

In this step, get ready to:

Install VS Code on your Mac.
Create a free GitHub account for hosting your site.
Set up your project folder with starter files.

Download and install VS Code

VS Code is a free code editor that makes it easy to write and organise your website files.

Open your web browser (Safari or Chrome) and go to https://code.visualstudio.com/.
Click the Download for macOS button.
Open the downloaded .dmg file from your Downloads folder.
Drag Visual Studio Code.app to the Applications folder.
Close the .dmg window once the copy finishes.

VS Code is now in your Applications folder.

Press Cmd+Space to open Spotlight search.
Type Visual Studio Code and press Enter to open it.
If macOS asks whether you want to open an app downloaded from the internet, click Open.

You should see the VS Code Welcome tab appear on your screen.

VS Code not appearing in search?

Make sure you dragged the app into the Applications folder, not just onto your Desktop. If you skipped that step, open your Downloads folder, find the .dmg file again, and drag Visual Studio Code.app into Applications.

help me open VS Code on my Mac

Create a GitHub account

GitHub is the platform that will host your portfolio website for free, giving you a live URL anyone can visit.

Open https://github.com/ in your browser.
Click Sign up.
Enter your email address when prompted.
Create a password.
Choose a username. This will become part of your portfolio URL (yourusername.github.io), so pick something professional.
Complete the verification puzzle if one appears.
Click Create account.
Choose the Free plan when prompted.

Why does my username matter?

Your GitHub username becomes part of your live portfolio URL. If your username is janedoe, your site will live at janedoe.github.io. Choose something you would be comfortable sharing with a recruiter.

Your account needs email verification before you can create repositories.

Open your email inbox (the address you used to sign up).
Find the email from GitHub with the subject about verifying your email address.
Click the verification link inside the email.
You will be taken to your GitHub dashboard, confirming your account is active.

Verification email not arriving?

Check your spam or junk folder. The email comes from GitHub and might take a minute to arrive. If you still do not see it, go to your GitHub settings, navigate to Emails, and click Resend verification email.

help me verify my GitHub email

Create your project folder and files

Every website needs at least two files: one for content (HTML) and one for styling (CSS). You will create both inside a project folder on your Desktop.

Switch back to VS Code.
Click File in the top menu bar.
Click Open Folder.
In the file dialog, navigate to your Desktop.
Click New Folder (bottom-left of the dialog).
Name the folder portfolio and press Enter.
Click Open to open the folder in VS Code.

What about the trust prompt?

VS Code may ask if you trust the authors of the files in this folder. Click Yes, I trust the authors. Since you created this folder yourself, it is safe.

The Explorer sidebar should now show PORTFOLIO as the folder name.

In the VS Code sidebar (the Explorer panel on the left), hover over the PORTFOLIO heading.
Click the new file icon (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.

Only seeing one file or no files?

Make sure you opened the portfolio folder (not your entire Desktop) with File > Open Folder. If the sidebar says DESKTOP instead of PORTFOLIO, repeat the Open Folder step and select the portfolio folder inside your Desktop.

help me create files in VS Code

Your workspace is ready. Next up, you will fill index.html with real content and see your portfolio take shape in the browser.

Build Your Portfolio Page

Your tools are set up and your project folder is ready to go. Now it is time to build the actual page a Deloitte recruiter will see when they click your link.

HTML gives your page structure. It organises your content into sections that make sense for someone scanning your profile quickly. Writing it first without any styling lets you focus on getting the right content in the right places.

In this step, get ready to:

Write a complete HTML document with a header, about, skills, projects, and contact section.
Add tailored content that connects your masters work to the Deloitte Access Economics role.
Preview your page in the browser to confirm all sections appear.

Write the HTML structure

Every webpage starts with an HTML document that tells the browser what content to display and in what order. You will build the foundation of your portfolio: the document head (metadata the browser needs) and the header section visitors see first.

Click on index.html in the VS Code sidebar to open it in the editor.
Copy the following code and paste it into the empty 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 - Business Analytics & Economic Research</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="#about">About</a>
            <a href="#skills">Skills</a>
            <a href="#projects">Research</a>
            <a href="#contact">Contact</a>
        </nav>
        <div class="hero">
            <h1>Your Name</h1>
            <p class="tagline">Business Analytics Masters Student | Quantitative Research & Economic Analysis</p>
        </div>
    </header>

What does this code do?

The <head> section contains metadata the browser uses but does not display. The charset and viewport meta tags ensure text renders correctly and the page scales on mobile devices. The <link> tag connects your stylesheet (which you will fill in during the next step).

The <header> contains a navigation bar with anchor links that will jump to each section, and a hero area with your name and a tagline that positions you immediately.

Now add the About section directly below the closing </header> tag. This tells recruiters who you are and what drives your work.

Place your cursor at the end of the </header> line, press Enter to create a new line, and paste this code:


    <section id="about">
        <h2>About Me</h2>
        <p>I am a Masters of Business Analytics student with a strong interest in applied economic research and quantitative analysis. My studies focus on translating complex data into actionable insights that inform policy decisions and strategic planning.</p>
        <p>I am particularly interested in how economic modelling and data-driven approaches can shape government investment, inform public debate, and influence long-term policy reform across sectors like health, education, transport, and energy.</p>
    </section>

What does the about section do?

The <section id="about"> creates a named block on the page. The id attribute matches the #about link in the nav, so clicking that link later will scroll directly here. The two paragraphs connect your masters to the kind of applied economic work Deloitte does.

Save the file by pressing Cmd+S.
Open Finder, navigate to your Desktop/portfolio folder, and double-click index.html to open it in your browser (Safari or Chrome).
You should see your name as a large heading, the tagline text below it, and an "About Me" heading with two paragraphs of text.

Don't see any content in the browser?

Make sure you saved the file in VS Code (Cmd+S). Unsaved changes show a dot on the file tab.
Check that you opened index.html from the Desktop/portfolio folder, not the style.css file.
If the page is completely blank, look for a red squiggly or missing closing tag in VS Code. Help me figure out why my HTML page is blank in the browser.

Add your tailored content

With the page skeleton working in the browser, you can now add the sections that showcase your skills, research, and contact details.

Switch back to index.html in VS Code.
Place your cursor after the closing </section> tag of the about section, press Enter, and paste this skills section:


    <section id="skills">
        <h2>Skills & Capabilities</h2>
        <ul class="skills-list">
            <li>Quantitative Analysis</li>
            <li>Economic Modelling</li>
            <li>Statistical Software (R, Python)</li>
            <li>Data Visualisation</li>
            <li>Policy Research</li>
            <li>Report Writing</li>
            <li>Applied Econometrics</li>
            <li>Stakeholder Communication</li>
        </ul>
    </section>

What does the skills section do?

The <ul class="skills-list"> creates an unordered list. Each <li> is one skill. The class name skills-list gives you a hook to style these as tags or pills later with CSS. These skills mirror the language from consulting job descriptions: quantitative analysis, economic modelling, policy research.

Directly below the skills section closing tag, paste the projects section:


    <section id="projects">
        <h2>Research & Coursework</h2>
        <div class="projects-grid">
            <div class="project-card">
                <h3>Economic Impact Analysis</h3>
                <p>Analysed the economic impact of policy interventions using quantitative methods and statistical modelling. Applied cost-benefit frameworks to evaluate public investment decisions.</p>
            </div>
            <div class="project-card">
                <h3>Data-Driven Policy Research</h3>
                <p>Conducted applied research using large public datasets to identify trends in health and education spending. Translated findings into clear recommendations for decision-makers.</p>
            </div>
            <div class="project-card">
                <h3>Macroeconomic Forecasting</h3>
                <p>Built forecasting models to project economic indicators, using time-series analysis and econometric techniques to support scenario planning and policy evaluation.</p>
            </div>
        </div>
    </section>

What does the projects section do?

Each project-card div wraps one research area with a heading and description. The projects-grid wrapper will let you arrange them in a grid layout once you add CSS. These are placeholder descriptions you can swap for your real coursework later.

Save the file (Cmd+S) and switch to your browser.
Refresh the page (Cmd+R).
You should now see a "Skills & Capabilities" heading with a bulleted list of eight skills, followed by a "Research & Coursework" heading with three project titles and descriptions.

Missing sections or jumbled text?

Scroll down in the browser. All content is there but may require scrolling since there is no styling yet.
If text from different sections runs together, check that each <section> has a matching </section> closing tag in VS Code.
Help me fix my HTML sections that are not displaying correctly.

The last piece is a contact section so recruiters know how to reach you, plus a small footer.

Switch back to index.html in VS Code.
Place your cursor after the closing </section> tag of the projects section, press Enter, and paste this code:


    <section id="contact">
        <h2>Get in Touch</h2>
        <p>Interested in connecting? Reach out via the links below.</p>
        <div class="contact-links">
            <a href="mailto:your.email@example.com">Email</a>
            <a href="https://www.linkedin.com/in/yourprofile" target="_blank">LinkedIn</a>
        </div>
    </section>

    <footer>
        <p>Built with care. 2026.</p>
    </footer>
</body>
</html>

What does this code do?

The contact section provides two links: one that opens the visitor's email client (mailto:) and one that opens your LinkedIn profile in a new tab (target="_blank"). The footer adds a small finishing line at the bottom of the page.

The </body> and </html> closing tags complete the document structure. Every opening tag needs a matching closing tag for the browser to read your page correctly.

Save the file (Cmd+S).

Preview in browser

Your HTML is complete. Before you refresh, take a guess: what do you think the page will look like with all this content but zero CSS styling?

Switch to your browser and refresh the page (Cmd+R).

You see your name, a tagline, all five sections, and your contact links. Everything is plain, unstyled, and uses the browser's default font and spacing. It looks like a document from the 1990s.

Why does it look so plain?

Without CSS, the browser uses its built-in defaults: Times New Roman font, no colours, no layout, no spacing beyond basic margins. The content is all there and correctly structured. In the next step you will transform this into something a recruiter takes seriously.

Page looks completely broken or blank?

Make sure you saved the file (check for the dot on the index.html tab in VS Code).
Verify your file starts with <!DOCTYPE html> and ends with </html>.
Count your closing tags. Every <section> needs a </section>, every <div> needs a </div>.
Help me debug why my portfolio HTML page looks broken.

✔️ Awesome, I've got everything!

Great. Double check you have saved index.html and that the browser shows all five sections (header, about, skills, projects, contact) plus the footer.

ⓧ I'd like to double check the full code

Your index.html file is longer than 30 lines, so rather than one giant block, confirm these chunks appear in order:

The <!DOCTYPE html> declaration, <head> with meta tags and stylesheet link, and <header> containing <nav> links and the .hero div.
A <section id="about"> with an <h2> and two <p> tags.
A <section id="skills"> with a <ul class="skills-list"> containing eight <li> items.
A <section id="projects"> with a .projects-grid div containing three .project-card divs.
A <section id="contact"> with a .contact-links div holding two anchor tags (Email and LinkedIn).
A <footer> with "Built with care. 2026." followed by </body> and </html>.

Scroll through your file in VS Code and confirm each piece is present and in this order.

Your portfolio content is structured and visible in the browser. Next up, you will add CSS to transform this plain document into a polished, professional-looking page that recruiters take seriously.

Style Your Portfolio Professionally

Your portfolio page has all the right content, but it still looks like a plain text document from the 1990s. No recruiter will take it seriously in this state.

CSS transforms your raw HTML into something polished, professional, and intentional. In this step, you will add a navy colour scheme, clean typography, and structured layouts that match the kind of clear communication Deloitte values.

In this step, get ready to:

Set up a CSS foundation with consistent fonts and spacing.
Style each section with professional colours and layouts.
Add finishing touches like smooth scrolling and hover effects.

Set up the CSS foundation

Your index.html already has a <link> tag connecting it to style.css. The CSS file is currently empty, so let's give it a solid foundation.

In VS Code, click on style.css in the sidebar to open it.
Add the CSS reset and base styles by pasting this code:

/* Reset browser defaults for consistent sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Enable smooth scrolling for nav links */
html {
    scroll-behavior: smooth;
}

/* Set global font, size, and colour */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

What does this code do?

The * selector targets every element on the page, removing default margins and padding that browsers add inconsistently.
box-sizing: border-box makes width and height include padding and borders, so elements stay the size you set.
scroll-behavior: smooth makes clicking a navigation link glide to the target section instead of jumping.
The body styles set a clean system font stack that looks professional on every operating system.

Save style.css by pressing Cmd+S.
Switch to your browser and refresh the page.
You should see the font change from a serif font (like Times New Roman) to a clean sans-serif font, and the default spacing around elements disappears.

Don't see any change?

Make sure you saved style.css (look for the dot on the file tab in VS Code, which means unsaved changes).
Confirm the file is named exactly style.css (not styles.css or style.CSS). The name must match what is in your HTML <link> tag.
help me figure out why my CSS file is not loading

Style each section

Now you will work through each section of the page, transforming the plain content into visually distinct areas.

Add the header and navigation styles below your existing code in style.css:

/* Dark navy header background */
header {
    background-color: #1a2332;
    color: #ffffff;
    padding: 20px 40px 80px;
}

/* Right-aligned navigation links */
nav {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    padding: 10px 0;
}

nav a {
    color: #a8c4e0;
    text-decoration: none;
    font-size: 14px;
}

nav a:hover {
    color: #ffffff;
}

What does this code do?

The header gets a dark navy background (#1a2332) with generous padding at the bottom to give the hero section room.
display: flex with justify-content: flex-end pushes the nav links to the right side.
The hover rule brightens links to white when the learner moves their cursor over them.

Save style.css and refresh your browser.
You should see a dark navy bar at the top with your navigation links aligned to the right in a muted blue colour.

Header not showing the navy background?

Check that you pasted this code below (not inside) the previous block. Each CSS rule needs its own set of curly braces.
Look for any missing closing } brace in the code above it. A missing brace breaks everything that follows.
help me fix my CSS header styles

Next, add the hero area and section base styles below your nav styles:

/* Centred hero text with large name */
.hero {
    text-align: center;
    padding: 60px 20px 20px;
}

.hero h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 12px;
}

.tagline {
    font-size: 18px;
    color: #a8c4e0;
    font-weight: 300;
}

/* Base layout for all content sections */
section {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
}

section h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #1a2332;
}

What does this code do?

The .hero class centres your name and tagline inside the header.
max-width: 800px with margin: 0 auto keeps content at a comfortable reading width and centres it horizontally.
Section headings use the same navy colour as the header for visual consistency.

Save and refresh your browser.
Your name now appears large and centred in the navy header, with the tagline in a lighter blue below it. The content sections below are neatly centred with breathing room on each side.

Add the About and Skills section styles next:

/* About section paragraph spacing */
#about p {
    margin-bottom: 16px;
    color: #555;
}

/* Skills displayed as pill-shaped tags */
.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
}

.skills-list li {
    background-color: #e8f0fa;
    color: #1a2332;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

What does this code do?

display: flex with flex-wrap: wrap lays out the skill items in a row that wraps to the next line when the row fills up.
border-radius: 20px gives each skill item rounded "pill" corners, which is a common tag design pattern.
The light blue background (#e8f0fa) keeps the pills visible without competing with the header.

Save and refresh.
Your skills now appear as rounded pill-shaped tags arranged in a flowing row, instead of a plain bullet list.

Add the projects section styles to create card-like containers:

/* Grid layout for project cards */
.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Card styling with border and hover shadow */
.project-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    transition: box-shadow 0.2s ease;
}

.project-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #1a2332;
}

.project-card p {
    color: #555;
    font-size: 15px;
}

What does this code do?

display: grid stacks the project cards vertically with equal spacing between them.
The transition property makes the shadow appear smoothly when hovering, rather than snapping on instantly.
Each card gets a subtle border and rounded corners to visually separate it from the page.

Save and refresh.
Your three research projects now sit inside distinct bordered cards. Try hovering over a card to see the shadow appear.

Add the contact section layout styles:

/* Centred contact section with subtle background */
#contact {
    text-align: center;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-top: 40px;
    padding: 60px 20px;
}

#contact p {
    margin-bottom: 20px;
    color: #555;
}

/* Contact link buttons layout */
.contact-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

What does this code do?

The contact section gets a light grey background (#f8f9fa) to visually separate it as a call-to-action area.
text-align: center centres all the text and buttons within the section.
The .contact-links flex container places the Email and LinkedIn buttons side by side.

Save and refresh.
The contact section now has a subtle grey background with centred text. The links appear side by side, though they still look like plain text links.

Add the finishing touches

The page is almost there. The contact links need button styling, and the footer needs a subtle presence at the bottom.

Add the contact button styles and footer to complete your stylesheet:

/* Styled contact buttons with hover effect */
.contact-links a {
    background-color: #1a2332;
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.contact-links a:hover {
    background-color: #2c3e50;
}

/* Minimal footer */
footer {
    text-align: center;
    padding: 30px;
    color: #999;
    font-size: 14px;
}

What does this code do?

The contact links become solid navy buttons with white text and rounded corners.
transition: background-color 0.2s ease creates a smooth colour shift when hovering over the buttons.
The footer uses a muted grey colour (#999) so it stays visible without drawing attention away from the main content.

Save style.css.

Before you refresh, what do you think the page will look like now that every section has been styled?

Refresh your browser.

Your portfolio now has a professional navy colour scheme, clean typography, proper spacing, and distinct visual sections. It looks like a real professional website.

Try hovering over the Email and LinkedIn buttons. They should smoothly shift to a slightly lighter navy.
Click About in the navigation bar. The page should glide smoothly down to the About section instead of jumping.

Page still looks broken or unstyled?

Count your curly braces. Every opening { needs a matching }. A single missing brace can break all styles below it.
Check for missing semicolons at the end of property lines. Each CSS property line must end with ; before the next property.
Make sure all the code is in style.css (not accidentally pasted into index.html).
help me debug my CSS styling issues

✔️ Awesome, I've got everything!

Great. Double check you have saved style.css and that all seven code blocks are present in order.

ⓧ I'd like to double check the full code

Your style.css file should contain the following sections in this order. Scroll up and confirm each one is present:

CSS reset (*), html smooth scroll, and body font styles.
header, nav, nav a, and nav a:hover styles.
.hero, .hero h1, .tagline, section, and section h2 styles.
#about p, .skills-list, and .skills-list li styles.
.projects-grid, .project-card, .project-card:hover, .project-card h3, and .project-card p styles.
#contact, #contact p, and .contact-links styles.
.contact-links a, .contact-links a:hover, and footer styles.

If anything is missing, scroll up to the relevant chunk and paste it into the correct position in your file.

Your portfolio is now polished and professional. Next up, you will deploy it live on the internet so anyone with the link can see it.

Deploy Your Site Live on GitHub Pages

Your portfolio looks polished and professional on your computer. The problem is, only you can see it right now.

A recruiter cannot visit a file on your laptop. To make your portfolio useful for the Deloitte application, you need to put it on the internet at a shareable URL. GitHub Pages gives you free hosting with a permanent link you can paste directly into your resume.

In this step, get ready to:

Create a GitHub repository with the special naming convention that activates GitHub Pages.
Upload your portfolio files to the repository through the browser.
Enable GitHub Pages and visit your live site at a public URL.

Create a GitHub repository

GitHub Pages works by serving files from a repository that follows a specific naming pattern. The repository must be named exactly yourusername.github.io where yourusername is your GitHub username.

Return to github.com in your browser (you should already be logged in from Step 1).
Click the + icon in the top-right corner of the page.
Select New repository from the dropdown menu.

You are now on the new repository form.

In the Repository name field, type your GitHub username followed by .github.io (for example, if your username is janedoe, type janedoe.github.io).
Under Visibility, make sure Public is selected.
Do NOT check the Add a README file checkbox. You already have files to upload.
Click Create repository at the bottom of the page.

Why this exact name?

The naming convention username.github.io tells GitHub to treat this repository as a personal website. GitHub automatically serves the files at https://username.github.io for free. Any other repository name would require additional configuration.

You should now see an empty repository page with quick setup instructions.

Upload your files

Instead of using Git commands in a terminal, you can upload files directly through the GitHub website using drag-and-drop.

On the new repository page, look for the Quick Setup area and click the uploading an existing file link.
Open Finder on your Mac and navigate to your Desktop/portfolio folder.
Select both index.html and style.css in Finder.
Drag both files into the upload area on the GitHub page.
Wait for both files to appear in the upload list.
Scroll down, keep the default commit message, and click Commit changes.

GitHub brings you back to the repository page. You should see both index.html and style.css listed in the file tree.

Don't see the upload link?

If the quick setup area does not show the "uploading an existing file" link, look for an Add file button near the top of the repository page and select Upload files from the dropdown.

Help me find the upload option on my GitHub repository page.

Enable GitHub Pages and visit your live site

Your files are in the repository, but GitHub Pages is not serving them yet. You need to tell GitHub which branch and folder to publish from.

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

GitHub is now building and deploying your site. This usually takes 1-2 minutes, but can take up to 10 minutes on the first deploy.

What is GitHub Pages doing?

GitHub Pages looks for an index.html file at the top level of your publishing source. It found yours, so it serves it as the home page at your URL. The style.css file is served alongside it because your HTML links to it.

Before you visit the link, what do you think you will see? Will it look like the local version you previewed earlier, or will something be different?

Wait 2 minutes, then open a new browser tab.
Type your GitHub Pages URL into the address bar: https:// followed by your repository name (for example, https://janedoe.github.io).
Press Enter to visit the page.

Your professionally styled portfolio is now live on the internet. It looks exactly like the local version because GitHub Pages serves your files as-is. Copy the URL from your address bar. This is the link you can paste into your resume or Deloitte application.

Seeing a 404 page?

If your site shows a 404 error, check these common causes:

Make sure your repository name matches your username exactly (case-sensitive). It must be yourusername.github.io.
Confirm that index.html is at the root of the repository, not inside a subfolder. The filename is case-sensitive.
Wait a bit longer. First deploys can take up to 10 minutes.

Help me troubleshoot my GitHub Pages 404 error.

You now have a permanent, shareable URL for your portfolio. Next up, you will take it further with animated skill bars that make your page stand out.

Secret mission

Add Animated Skill Bars

A static list of skills is forgettable. Animated visual skill bars catch the eye and demonstrate you can represent data visually. Replace your plain skills list with horizontal bars that animate to different widths when the page loads, all with pure CSS.

Clean Up Your Resources

This project runs entirely on free tools. Your GitHub Pages site costs nothing and stays live indefinitely as long as your repository exists.

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

Resources you used:

GitHub repository (yourname.github.io) with GitHub Pages enabled.
Local portfolio folder on your Desktop containing index.html and style.css.
Visual Studio Code (installed application).
GitHub account.

Keep everything running

No action needed. Choose this if you plan to use your portfolio for your Deloitte application or want to keep updating it.

Your site stays live at yourname.github.io indefinitely for free.
To update content later, edit the files directly on GitHub or re-upload new versions.
VS Code stays installed on your Mac for future projects.
Your GitHub account remains active for future use.

Pause - I'll come back to this later

Your GitHub Pages site is free to host, so there is nothing to pause for cost reasons. If you want to temporarily hide your site from the public while keeping all your code, you can make the repository private.

On GitHub, navigate to your yourname.github.io repository.
Click the Settings tab at the top of the repository page.
Scroll down to the Danger Zone section.
Click Change visibility next to "Change repository visibility".
Select Private, confirm the repository name, then click I have read and understand these effects.
Click Make this repository private.

What happens when you go private?

On the GitHub Free plan, making a repository private automatically unpublishes your GitHub Pages site. Your code is still there. When you are ready to go live again, change the visibility back to Public and re-enable GitHub Pages.

Delete - I don't want to use this again

Remove all project resources and start fresh. This permanently deletes your live site and local files.

Delete your GitHub repository:

On GitHub, navigate to your yourname.github.io repository.
Click the Settings tab at the top of the repository page.
Scroll down to the Danger Zone section.
Click Delete this repository.
Follow the confirmation prompts to permanently delete the repository and your live site.

Delete your local project files:

Open Finder and navigate to your Desktop.
Drag the portfolio folder to the Trash.
Empty the Trash to permanently remove the files.

Uninstall VS Code (optional):

Open Finder and go to your Applications folder.
Drag Visual Studio Code to the Trash.
Empty the Trash.

What about my GitHub account?

Your GitHub account is free and useful for future projects. You do not need to delete it. If you do want to delete it later, you can find the option under your GitHub account settings.

Nice Work!

You just built a professional portfolio website from scratch and deployed it live on the internet. Anyone with the link can now see your work, your skills, and your positioning for the Deloitte Access Economics role.

You've learned how to:

Build a complete website using HTML for structure and CSS for professional styling, creating distinct sections for your background, skills, research, and contact information.
Deploy a live site to GitHub Pages with a permanent, shareable URL that loads instantly and works on any device.
Tailor portfolio content to mirror the language and priorities of a specific role, demonstrating the analytical and communication skills Deloitte Access Economics values.
Secret Mission: Added animated CSS skill bars that visually communicate your proficiency levels using keyframe animations and CSS custom properties.

Ready to quiz yourself?