Build a Developer Profile Page

Build a semantic HTML profile page and deploy it live with GitHub Pages.

Introduction

30 Second Summary

Every developer needs a home on the internet. A personal profile page is the simplest way to show the world who you are and what you're building.

In this project, you will write a developer profile page from scratch using HTML, track your work with Git, and deploy it live on the internet using GitHub Pages.

What You'll Build

When you share your GitHub Pages link with someone, they'll see a structured page with your name, bio, skills, and projects, all navigable with clickable section links that jump to the right spot.

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

A complete developer profile page built with semantic HTML elements like header, nav, main, section, and footer.
Clickable anchor navigation that jumps between page sections, plus rich content with your photo, skill lists, and external links.
A live URL on GitHub Pages that anyone can visit, version-controlled with a meaningful Git commit history.
Secret Mission: Add a second HTML page with a project portfolio table and multi-page navigation.

Are there any prerequisites?

You'll need a GitHub account and a web browser (Chrome, Edge, or Firefox). VS Code should already be installed on your machine. Git installation is covered in Step 1.

Before We Start

Before We Start...

Before we dive in, let's lock in what you're about to build and why it matters for your front-end engineering journey.

Set Up Your Tools

Your developer profile page will eventually live on the internet, hosted through GitHub. To get it there, you need a tool called Git on your computer.

Git tracks changes to your files and pushes them to GitHub for the world to see. In this step, you'll install Git, tell it who you are, and create the folder where your HTML will live.

In this step, get ready to:

Install and verify Git.
Configure Git with your name and email.
Create your project folder and open it in VS Code.

Check if Git is installed

Git is the tool that will track every change you make to your code. It also pushes your finished page to GitHub so people can visit it online.

Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
Type Terminal (macOS) or Command Prompt (Windows) and press Enter to open it.
Check if Git is already on your machine by running this command:

git --version

✔️ I see a version number

You should see something like git version 2.55.0. The exact number might differ slightly, and that's fine.

Git is ready to go. Skip ahead to the next substep.

ⓧ Command not found

Git isn't installed yet. Follow the instructions for your operating system below.

macOS

Install Git through Xcode Command Line Tools by running this command:

xcode-select --install

A dialog will appear asking you to install the tools. Click Install and wait for the download to complete.
Once installation finishes, close and reopen your Terminal.
Verify Git is now installed by running:

git --version

You should now see a version number printed back.

Windows

Install Git using winget by running this command:

winget install --id Git.Git -e --source winget

Wait for the installation to complete. You'll see a progress bar in the terminal.
Close your Command Prompt window completely, then reopen it (press the Windows key, type Command Prompt, and press Enter).
Verify Git is now installed by running:

git --version

You should now see a version number like git version 2.55.0 printed back.

Still not seeing a version number?

Make sure you fully closed and reopened your terminal after installation. The old terminal session does not know about newly installed programs.

On Windows, if winget itself is not recognized, open the Microsoft Store app and update App Installer. Then try again.

Help me troubleshoot my Git installation

Configure Git with your identity

Every commit you make in Git is stamped with your name and email. This is how GitHub knows who made each change.

Tell Git your name and email by running these three commands one at a time (replace the placeholder values with your own name and the email tied to your GitHub account):

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
git config --global core.editor "code --wait"

What do these commands do?

user.name sets the name attached to every commit you make.
user.email sets the email. Use the same email as your GitHub account so commits are linked to your profile.
core.editor tells Git to open VS Code whenever it needs you to type a message (like a commit description).

Confirm your name was saved by running:

git config --global user.name

You should see the name you just entered printed back in the terminal.

Seeing a blank response?

If nothing prints, you may have a typo in the earlier command. Re-run the git config --global user.name "Your Name" command, making sure the quotes are straight quotes, not curly quotes.

Help me fix my Git config

Create your project folder

You need a dedicated folder to hold your HTML files. You'll create it on your Desktop so it's easy to find.

Move to your Desktop by running this command:

cd ~/Desktop

Create your project folder and move into it by running these commands:

mkdir developer-profile
cd developer-profile

Confirm the folder was created by running:

pwd

You should see a path ending in developer-profile, confirming you're inside your new project folder.

Open this folder in VS Code by running:

code .

VS Code opens with developer-profile shown in the Explorer sidebar on the left. The folder is empty for now.

What does code . do?

The code command launches VS Code from the terminal. The dot (.) means "the current folder." Together, code . opens VS Code with your current folder loaded as the workspace.

code command not recognized?

If your terminal says code is not found, you need to add VS Code to your system PATH.

In VS Code, press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows) to open the Command Palette. Type Shell Command: Install 'code' command in PATH and select it. Then close and reopen your terminal and try code . again.

Help me get the code command working in my terminal

Your tools are locked and loaded. Next up, you'll write your very first HTML file and see your own content appear in the browser.

Write Your First HTML Page

Your environment is set up and your developer-profile folder is open in VS Code. Now it's time to write your first web page.

Every web page starts with an HTML skeleton that tells the browser how to interpret your content. You'll write one from scratch, add a header with navigation links, and see it rendered in your browser.

In this step, get ready to:

Create an HTML file with the foundational page skeleton.
Add a header with your name and navigation links.
Open the file in a browser to see your first page rendered.

Create your HTML file and skeleton

HTML documents all start with the same basic structure. A declaration tells the browser which version of HTML you're using. A head section holds metadata. A body section holds all visible content.

In VS Code's Explorer sidebar on the left, hover over the DEVELOPER-PROFILE folder name.
Click the New File icon (a page with a plus sign) that appears.
Type index.html and press Enter.
Paste the following HTML skeleton into your new file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jane Smith - Developer Profile</title>
</head>
<body>

</body>
</html>

What does this code do?

<!DOCTYPE html> tells the browser this is an HTML5 document.
<html lang="en"> is the root element. The lang attribute tells search engines and screen readers the page is in English.
The <head> holds metadata that doesn't appear on the page: character encoding, viewport settings for mobile devices, and the page title shown in the browser tab.
The <body> is where all visible content goes. It's empty for now.

Use your own name

Replace "Jane Smith" in the <title> with your own name. The title appears in the browser tab, not on the page itself.

Save the file with Ctrl+S (Windows) or Cmd+S (macOS).
In the Explorer sidebar, you should now see index.html listed under your developer-profile folder.

Don't see index.html in the sidebar?

An unsaved file shows a dot on its tab in VS Code. Press Ctrl+S (Windows) or Cmd+S (macOS) to save.
Make sure VS Code has the developer-profile folder open. If you see a different folder, click File, then Open Folder, and select your developer-profile folder.

Help me figure out why my file isn't showing in VS Code's sidebar.

Add a header with your name and navigation links

Your page needs visible content. A <header> element marks the introductory section of a page, containing things like your name, a tagline, and navigation.

In index.html, find the empty space between the opening <body> and closing </body> tags.
Add the following code between them:

    <header>
        <h1>Jane Smith</h1>
        <p>Aspiring Front-End Engineer</p>
        <nav>
            <a href="#about">About</a> |
            <a href="#skills">Skills</a> |
            <a href="#projects">Projects</a> |
            <a href="#contact">Contact</a>
        </nav>
    </header>

What does this code do?

<header> is a semantic element that tells the browser this is the introductory content for the page.
<h1> is the largest heading on the page. Every page should have exactly one.
<nav> marks a navigation section. The <a> elements inside are anchor links.
The href="#about" syntax tells the browser to scroll to whatever element on this page has id="about".

Personalise your header

Replace "Jane Smith" with your own name and "Aspiring Front-End Engineer" with a subtitle that describes you.

Save index.html with Ctrl+S (Windows) or Cmd+S (macOS).

Open your page in the browser

Before you open the file, think about this: what do you expect will happen when you click one of those navigation links?

Open File Explorer (Windows) or Finder (macOS) and navigate to your developer-profile folder on your Desktop.
Right-click index.html, select Open with, and choose your browser (Chrome, Edge, or Firefox).

You should see your name as a large heading, your subtitle below it, and a row of navigation links (About | Skills | Projects | Contact).

Now click one of the nav links. Nothing happens. The href="#about" tries to find an element with id="about" on the page, but no such element exists yet. This is exactly the gap you'll close in the next step.

Seeing a blank page?

Check that your header code is between <body> and </body>. Content inside the <head> section does not render on screen.
Make sure you saved the file before opening it. Look for the dot on the file tab in VS Code.
Try refreshing the browser page. If you edited the file after opening it, the browser still shows the old version.

Help me figure out why my HTML page is blank in the browser.

✔️ Awesome, I've got everything!

Great. Double check you've saved your file, then move on to the next step.

ⓧ I'd like to double check the full code

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jane Smith - Developer Profile</title>
</head>
<body>
    <header>
        <h1>Jane Smith</h1>
        <p>Aspiring Front-End Engineer</p>
        <nav>
            <a href="#about">About</a> |
            <a href="#skills">Skills</a> |
            <a href="#projects">Projects</a> |
            <a href="#contact">Contact</a>
        </nav>
    </header>
</body>
</html>

Your first web page is alive in the browser. Next up, you'll add the content sections that make those navigation links actually work.

Add Semantic Structure and Sections

Your page has a header with navigation links, but clicking them does nothing. That is because the links point to #about, #skills, and so on, but no elements with those IDs exist yet.

In this step, you will create the page sections those links point to. Once an element has an id that matches a link's # fragment, the browser knows where to jump. Your navigation will come alive.

In this step, get ready to:

Add a semantic page structure with <main> and <section> elements.
Write formatted paragraph content using <strong> and <em>.
Add a page footer with an HTML entity for the copyright symbol.

Add a main element with four sections

HTML has dedicated elements that describe the role of each part of your page. A <main> element wraps your primary content, and <section> elements group related content together under a heading.

In VS Code, open index.html.
Find the closing </header> tag.
Add the following code below </header>:

    <main>
        <section id="about">
            <h2>About Me</h2>
        </section>

        <section id="skills">
            <h2>Skills</h2>
        </section>

        <section id="projects">
            <h2>Projects</h2>
        </section>

        <section id="contact">
            <h2>Contact</h2>
        </section>
    </main>

What does this code do?

The <main> element tells the browser (and screen readers) that everything inside it is your page's primary content.

Each <section> has an id attribute like id="about". When you click a nav link with href="#about", the browser finds the element whose id matches about and scrolls it into view.

Save index.html.
Refresh your browser tab.

Before you click anything, do you think the nav links will scroll the page now, or still do nothing?

Click Skills or Contact in the navigation. The browser jumps straight to that section. Your navigation works.

Nav links still not jumping?

Check that each id value matches the nav link exactly. href="#skills" needs id="skills" (case-sensitive, no spaces).
Make sure your <main> block is placed after the closing </header> tag, not inside it.
If the page is too short for scrolling to be visible, try making your browser window smaller.

help me debug why my navigation anchor links are not jumping to sections

Fill in the About section with formatted text

Sections need content to be useful. You will add paragraphs to the About section and learn two inline formatting elements: <strong> for important text and <em> for emphasis.

Find the <h2>About Me</h2> line inside your About section.
Add the following two paragraphs directly below it:

            <p>Hello! I'm a developer passionate about building things for the web. I'm currently learning <strong>front-end engineering</strong> and documenting my journey one project at a time.</p>
            <p>When I'm not coding, I enjoy <em>reading</em>, hiking, and exploring new technologies.</p>

What do strong and em do?

The <strong> element marks text as important. Browsers display it in bold by default.

The <em> element marks text with emphasis. Browsers display it in italics by default.

Add a footer with a copyright notice

A <footer> element sits at the bottom of your page and typically holds copyright or contact info. You will use an HTML entity (©) to render the copyright symbol.

Find the closing </main> tag.
Add this code directly below </main>:

    <footer>
        <p>&copy; 2026 Jane Smith. Built with HTML.</p>
    </footer>

What is an HTML entity?

Some characters have special meaning in HTML (like < and &). To display special symbols, you use entities that start with & and end with ;. The entity © renders as the © symbol in the browser.

Save index.html.
Refresh your browser.

You should now see your About section with a bold phrase and an italicized word, plus a © copyright line at the bottom of the page. Click the nav links again to confirm they still jump to each section.

Don't see bold or italic text?

Make sure you saved the file. Unsaved changes do not appear in the browser.
Check that <strong> and <em> have matching closing tags (</strong> and </em>).
Verify the paragraphs are inside the <section id="about"> block, not outside it.

help me fix formatting tags in my HTML About section

✔️ Awesome, I've got everything!

Great. Double check you have saved index.html and confirmed the nav links jump to their sections.

ⓧ I'd like to double check the full code

Here is what your complete index.html should look like at this point:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jane Smith - Developer Profile</title>
</head>
<body>
    <header>
        <h1>Jane Smith</h1>
        <p>Aspiring Front-End Engineer</p>
        <nav>
            <a href="#about">About</a> |
            <a href="#skills">Skills</a> |
            <a href="#projects">Projects</a> |
            <a href="#contact">Contact</a>
        </nav>
    </header>

Followed by the main content and footer:

    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>Hello! I'm a developer passionate about building things for the web. I'm currently learning <strong>front-end engineering</strong> and documenting my journey one project at a time.</p>
            <p>When I'm not coding, I enjoy <em>reading</em>, hiking, and exploring new technologies.</p>
        </section>

        <section id="skills">
            <h2>Skills</h2>
        </section>

        <section id="projects">
            <h2>Projects</h2>
        </section>

        <section id="contact">
            <h2>Contact</h2>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Jane Smith. Built with HTML.</p>
    </footer>
</body>
</html>

Your page now has real structure. The navigation connects to each section, and you have formatted content in your About area. Next up, you will fill the remaining sections with lists, images, and links to make the page truly useful.

Add Rich Content

Your page now has a solid skeleton with navigation that scrolls between sections. But each section is mostly empty.

Real web pages use images, lists, and links to organize information and connect to the wider web. In this step, you'll fill your sections with meaningful content that showcases different HTML elements.

In this step, get ready to:

Add ordered and unordered lists to your Skills section.
Add a profile image to your About section.
Add external links and a mailto link to your Projects and Contact sections.

Add lists to the Skills section

HTML gives you two types of lists. An unordered list (<ul>) shows bullet points. An ordered list (<ol>) shows numbered items.

In index.html, find the <section id="skills"> element.
Below the <h2>Skills</h2> line, add the following code:

            <h3>Languages I Know</h3>
            <ul>
                <li>C#</li>
                <li>Python</li>
                <li>HTML</li>
            </ul>
            <h3>Learning Roadmap</h3>
            <ol>
                <li>HTML &amp; Semantic Web</li>
                <li>CSS &amp; Responsive Design</li>
                <li>JavaScript &amp; DOM Manipulation</li>
            </ol>

What does this code do?

You're using two types of lists here, each wrapped in list items (<li>).

<ul> creates a bulleted list for items with no particular order (languages you already know).
<ol> creates a numbered list for items in a specific sequence (your learning roadmap, in order).
& is an HTML entity that displays the & symbol. The ampersand character has special meaning in HTML, so you use the entity instead.

Save index.html and refresh your browser.
You should see a bulleted list of languages (C#, Python, HTML) and a numbered list of your roadmap items (1, 2, 3) under the Skills heading.

Don't see your lists?

Make sure your code is between the <section id="skills"> opening and </section> closing tags, below the <h2>.
Check that every <li> has a matching </li> closing tag.
Make sure you're using &amp; (not just &) in your list items. A bare ampersand can cause rendering issues.

Help me fix my HTML lists

Add an image to the About section

Images make your page visual and personal. The <img> element is a self-closing tag that pulls in an image file from your project folder.

Find any image you'd like to use as a profile picture. This can be a photo of yourself, an avatar, or any picture you like.
Save (or copy) that image into your developer-profile folder and rename it to profile.jpg.

No image handy?

Right-click any image on the web and select Save image as... to download it into your project folder. Rename it to profile.jpg.

In index.html, find the <section id="about"> element.
Find this line inside the About section:

            <h2>About Me</h2>

Add this line directly below it (above the first <p> tag):

            <img src="profile.jpg" alt="Photo of Jane Smith" width="150" height="150">

What do these attributes do?

src tells the browser where to find the image file. Since profile.jpg is in the same folder as index.html, just the filename works.
alt provides a text description for screen readers and for when the image can't load.
width and height set the display size in pixels so the image doesn't take over the whole page.

Save index.html and refresh your browser.
You should see your profile image appear above the About Me paragraphs, displayed at 150x150 pixels.

See a broken image icon instead?

Check that your image file is named exactly profile.jpg (lowercase, no spaces) and is inside the developer-profile folder.
Make sure the src value in your HTML matches the exact filename, including the extension.
If your image is a PNG, rename it to profile.jpg or change the src to profile.png to match.

Help me fix my broken image

Add links to the Projects and Contact sections

Links are what connect web pages to each other. The <a> (anchor) tag creates clickable text that takes the visitor somewhere else.

Find the <section id="projects"> element in your file.
Below the <h2>Projects</h2> line, add this list with links:

            <ul>
                <li>
                    <a href="https://github.com" target="_blank">My GitHub Profile</a> - Where I share my code
                </li>
                <li>
                    <strong>Developer Profile Page</strong> - This page! Built with semantic HTML
                </li>
            </ul>

What does target="_blank" do?

The target="_blank" attribute tells the browser to open the link in a new tab. Without it, the link replaces your current page. This is useful for external links so visitors don't leave your site.

Save index.html and refresh your browser.
You should see two project items under the Projects heading. Click My GitHub Profile and confirm it opens GitHub in a new tab.

Link not opening in a new tab?

Make sure target="_blank" is inside the opening <a> tag, after the href attribute.
Check that the quotes around _blank are straight quotes ("), not curly quotes. Some text editors auto-correct these.

Help me fix my link

Now let's fill in the Contact section with links, including a special mailto link that opens the visitor's email app.

Find the <section id="contact"> element.
Below the <h2>Contact</h2> line, add this content:

            <p>Want to connect? Reach out through these platforms:</p>
            <ul>
                <li><a href="https://github.com" target="_blank">GitHub</a></li>
                <li><a href="mailto:jane@example.com">Email Me</a></li>
            </ul>

What is a mailto link?

When the href starts with mailto:, the browser opens the visitor's email app with a new message pre-addressed to that email. You can replace jane@example.com with your own email address.

Before you save and refresh, what do you expect to see in the Contact section?

Save index.html and refresh your browser.
You should see a paragraph and two clickable links in the Contact section. Click GitHub to confirm it opens in a new tab. Click Email Me and your email app should open with a new message.

Email Me link not working?

Make sure the href starts with mailto: (with the colon) followed by the email address with no spaces.
If nothing happens when you click it, your computer may not have a default email app configured. The link is still correct.

Help me fix my mailto link

✔️ Awesome, I've got everything!

Great. Double check you've saved index.html and that all your sections are populated when you refresh.

ⓧ I'd like to double check the full code

Scroll up and confirm each of these chunks is present in your file, in order:

The <img> tag sitting directly below <h2>About Me</h2> and above the first <p> in the About section.
Two <h3> headings in the Skills section, followed by a <ul> (3 items) and an <ol> (3 items using &amp;).
A <ul> in the Projects section with an external link using target="_blank" and a <strong> item.
A <p> and <ul> in the Contact section with a target="_blank" link and a mailto: link.

Your profile page now has real, rich content. In the next step, you'll take everything live on the internet using Git and GitHub Pages so anyone with the link can see what you've built.

Go Live with Git and GitHub Pages

Your profile page is complete, but right now it only exists on your computer. If you close your browser, it's gone from the web.

In this step, you'll use Git to take a snapshot of your project and push it to GitHub. From there, GitHub Pages will host your page as a live website with its own URL that anyone can visit.

In this step, get ready to:

Initialize a Git repository and commit your project files.
Push your code to a public GitHub repository.
Enable GitHub Pages and get a live URL.

Initialize a Git repository and make your first commit

Git tracks snapshots of your project called commits. Each commit is a saved checkpoint you can return to later.

Make sure your VS Code terminal is open and you're inside the developer-profile folder.
Initialize a Git repository and commit all your files by running these commands:

git init
git add .
git commit -m "Add developer profile page"

What do these commands do?

git init creates a new Git repository in your folder. This adds a hidden .git directory that tracks all changes.
git add . stages every file in the folder, telling Git you want to include them in the next snapshot.
git commit -m "Add developer profile page" saves the snapshot with a descriptive message.

Verify your commit exists by running:

git log --oneline

You should see one line with a short hash and your commit message: Add developer profile page.

Don't see a commit?

Make sure you ran all three commands in order. If git add . was skipped, there's nothing staged to commit.
Check that you're inside the developer-profile folder (not a parent directory). Run pwd to check.
If you see an error about identity, make sure you configured git config --global user.name and git config --global user.email in Step 1.

Still stuck? Help me troubleshoot my git commit

Push your code to GitHub

Your commit is saved locally, but nobody else can see it. You need a remote repository on GitHub to store your code online.

Open GitHub in your browser and sign in.
In the upper-right corner of the page, click the + icon, then click New repository.
Type developer-profile in the Repository name field.
Select Public for the repository visibility.
Leave all checkboxes unchecked (no README, no .gitignore, no license).
Click Create repository.

Why skip the README and .gitignore?

You already have files in your local repository. If GitHub creates a README or .gitignore, your local and remote repositories will have different starting histories. That makes pushing your code more complicated.

GitHub shows a Quick Setup page with instructions. You'll use the commands for pushing an existing repository.

Back in your VS Code terminal, connect your local repository to GitHub by running this command:

git remote add origin https://github.com/[[GITHUB_USERNAME="your GitHub username"]]/developer-profile.git

Rename your branch to main and push your code by running these commands:

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. The URL points to your new GitHub repository.
git branch -M main ensures your branch is named main, which is what GitHub expects.
git push -u origin main uploads your commit to GitHub. The -u flag links your local branch to the remote so future pushes are simpler.

What about authentication?

When you push for the first time, Git will ask you to sign in to GitHub. A browser window may pop up asking you to authorize Git Credential Manager. Follow the prompts to sign in with your GitHub account.

If you see a terminal prompt asking for a username and password, enter your GitHub username and a personal access token (not your GitHub password). You can create a token at github.com/settings/tokens.

Refresh your GitHub repository page in the browser.

You should see index.html and profile.jpg listed in the repository. Your code is now on GitHub.

Push failed or files not showing?

If you see "remote origin already exists", you already added the remote. Skip that command and proceed to git push.
If authentication fails, make sure you're signed in to the correct GitHub account. Try closing and reopening your terminal, then run git push -u origin main again.
If you see "src refspec main does not match", make sure you ran git commit successfully in the previous substep.

Still stuck? Help me push my code to GitHub

Enable GitHub Pages

Your code is on GitHub, but it's not a live website yet. GitHub Pages turns any repository into a hosted site for free.

On your repository page on GitHub, click Settings in the top navigation bar.
In the left sidebar under Code and automation, click Pages.
Under Build and deployment, set Source to Deploy from a branch.
Select the main branch and / (root) folder.
Click Save.

GitHub Pages takes a couple of minutes to deploy your site. It can take up to 10 minutes in some cases.

Wait 1-2 minutes, then open a new browser tab.

Before you visit your URL, what do you expect to see? Think about what content your index.html file contains.

Visit your live site at this URL (replace your username):

https://[[GITHUB_USERNAME="your GitHub username"]].github.io/developer-profile

Your developer profile page appears live on the internet. You see your name, subtitle, navigation links, and all the sections you built. Anyone with this URL can see your page.

Seeing a 404 page?

GitHub Pages can take up to 10 minutes to deploy. Wait a few more minutes and refresh.
Make sure your file is named exactly index.html (all lowercase). GitHub Pages looks for this file as the entry point.
Double-check that you selected the main branch and / (root) folder in the Pages settings. Click Save again if needed.
Verify your URL matches the format: https://yourusername.github.io/developer-profile. The repository name must match exactly.

Still stuck? Help me get my GitHub Pages site working

Secret mission

Add a Projects Page with Table Navigation

Real websites have multiple pages. Can you create a second HTML page with a data table and link both pages together with consistent navigation?

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely on free services, so there are no ongoing costs.

Resources you used:

A public GitHub repository (developer-profile) hosted on GitHub.
A GitHub Pages site serving your HTML files at no cost.
A local project folder (developer-profile) on your Desktop.

Keep everything running

No action needed. Choose this if you want your developer profile page to stay live on the internet. GitHub Pages is free for public repositories, so your site will remain accessible for as long as the repository exists.

Your site stays live at your GitHub Pages URL at no cost.
Your local developer-profile folder stays on your Desktop for future edits.
Git remains installed on your machine for future projects.

Pause - I'll come back to this later

Take your site offline while keeping the code and repository intact. You can re-enable GitHub Pages later to bring it back.

On GitHub, go to your developer-profile repository.
Click Settings in the top menu bar.
In the left sidebar under Code and automation, click Pages.
Under Build and deployment, change the Source to None and click Save.
Your site goes offline, but all code stays in the repository. To bring it back, set the source back to Deploy from a branch and select main.

Delete - I don't want to use this again

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

Delete the GitHub repository (this also removes your GitHub Pages site):
Go to your developer-profile repository on GitHub.
Click Settings in the top menu bar.
Scroll down to the Danger Zone section.
Click Delete this repository.
Click I want to delete this repository, then click I have read and understand these effects.
Type the full repository name to confirm, then click the delete button.

Delete the local project folder by running these commands in your terminal:

cd ~/Desktop
rm -rf developer-profile

On Windows, use this command instead:

cd ~/Desktop
rmdir /s /q developer-profile

Confirm the folder is gone by running:

ls

You should no longer see developer-profile in the output.

Nice Work!

You just built a developer profile page from scratch and put it live on the internet. Anyone with your URL can now see what you're working on and how to reach you.

You've learned how to:

Build a multi-section web page using semantic HTML elements (header, nav, main, section, footer) with rich content including images, lists, links, and formatted text.
Create anchor navigation that jumps between page sections using fragment identifiers and matching IDs.
Track your work with Git and deploy a live website on GitHub Pages with a shareable URL anyone can visit.
Secret Mission: Created a multi-page site with HTML table markup and consistent cross-page navigation.

Ready to quiz yourself?