Track a Personal Profile Page with Git

Learn core Git workflows by building and versioning an HTML profile page.

Introduction

30 Second Summary

Every time you press Ctrl+Z to undo a mistake, you are wishing for version control. Professional developers use a tool called Git to track every change they make to their code, so they can undo mistakes, experiment safely, and collaborate without overwriting each other's work.

In this project, you will build a personal profile page and track it with Git from the very first line of code. You will finish with a public GitHub repository that proves you understand the daily workflow used by professional developers.

What You'll Build

A simple HTML profile page tracked in a local Git repository, then pushed to a public GitHub repository with a clean commit history showing branches and merges.

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

A local Git repository with 4+ commits showing a clear history of changes.
A feature branch merged back into main, demonstrating how teams collaborate on code.
A public GitHub repository with your full commit history visible to anyone.
Secret Mission: Simulate a merge conflict between two branches and resolve it manually.

Are there any prerequisites?

None. This guide walks you through installing Git and setting everything up from scratch. All you need is a Mac with a code editor (like VS Code or Cursor) and a free GitHub account.

Before We Start

Before We Start...

Install Git and Set Your Identity

Before you can track changes to your profile page, you need Git installed on your machine. Git is the version control tool that records every change you make, so you can always rewind or review your work.

In this step, you'll install Git, tell it who you are, and create the folder where your project will live.

In this step, get ready to:

Install Git on your machine.
Configure your name and email for commits.
Create your project folder.

Install Git on macOS

Git comes pre-installed on many Macs. Running a version check tells you whether Git is ready or needs to be installed.

Press Cmd+Space to open Spotlight search.
Type Terminal and press Enter to open it.

Check if Git is already installed by running this command:

git --version

✔️ I see a version number

You're all set. Git is installed and ready to use. Move on to the next substep below.

ⓧ I see a dialog asking to install developer tools

macOS is asking you to install Xcode Command Line Tools. This package includes Git.

Click Install in the dialog that appears.
Wait for the installation to complete. This can take a few minutes.
Once finished, confirm Git is installed by running this command:

git --version

You should now see a version number in the output, such as git version 2.54.0.

Still not seeing a version number?

Try closing Terminal completely and reopening it before running git --version again. The install sometimes requires a fresh Terminal session to take effect.

help me troubleshoot my Git installation on macOS

Configure your Git identity

Every commit you make in Git carries your name and email. This is how collaborators (and future-you) know who made each change.

Set your name and email for future commits by running these commands:

git config --global user.name "[[YOURNAME="Your Name"]]"
git config --global user.email "[[YOUR_EMAIL="your-email@example.com"]]"

What do these commands do?

git config --global saves a setting that applies to every Git project on your machine.
user.name and user.email are the identity fields Git attaches to each commit you make.

Verify your identity is set correctly by running:

git config --global --list

You should see your name and email printed in the output.

Not seeing your name or email?

Make sure you included the --global flag in both commands. Without it, the config only applies to a specific project folder (which you haven't created yet).

help me fix my Git global config

Create your project folder

Every Git project lives in its own folder. You'll create a folder called my-profile in your home directory and navigate into it.

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

mkdir ~/my-profile
cd ~/my-profile

What does ~ mean?

The ~ symbol is a shortcut for your home directory (e.g. /Users/yourname on macOS). So ~/my-profile creates the folder right inside your home folder where you can always find it.

Confirm you're in the right folder by running:

pwd

You should see a path ending in /my-profile.

Seeing "No such file or directory"?

Make sure you typed mkdir (with a d) and not mkdr. Also check that there is no space between ~ and /my-profile.

help me create my project folder in Terminal

Your environment is ready. Next up, you'll initialize your first Git repository and make your first commit.

Initialize Your Repository and Make Your First Commit

You have Git installed and your identity configured. Now it's time to turn your empty project folder into something Git can actually track.

A repository is the hidden structure Git uses to record every change you make to your files. In this step, you'll create one and save your very first snapshot of code.

In this step, get ready to:

Initialize a new Git repository in your project folder.
Create your first HTML file.
Make your first commit to save a snapshot of your work.

Initialize a Git repository

Right now, your my-profile folder is just a regular folder. Git won't track anything inside it until you explicitly tell it to start.

Initialize your Git repository by running this command:

git init -b main

What does this command do?

git init creates a hidden .git folder inside your project. This folder stores all of Git's tracking data.

The -b main flag sets your default branch name to main. This is the modern convention used by most teams.

Confirm the repository was created by running:

git status

You should see a message saying On branch main and No commits yet. This confirms Git is watching your folder.

Seeing an error instead?

Make sure your Terminal is inside the my-profile folder. Run pwd to check your current location. If you're somewhere else, run cd ~/my-profile to get back.

Help me troubleshoot my git init command

Create your HTML file and make your first commit

Now that Git is watching your folder, any file you create can be tracked. Let's create a simple HTML profile page and save it as your first commit.

Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
Type the name of your code editor (such as VS Code or Cursor) and press Enter to open it.
Click File in the top menu bar, then Open Folder.
Navigate to your Desktop, select the my-profile folder, and click Open.
In the Explorer sidebar on the left, hover over the folder name and click the New File icon.
Type index.html and press Enter.
Add this HTML code to index.html:

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

What does this code do?

<!DOCTYPE html> tells browsers this is an HTML5 document.
<title> sets the text that appears in the browser tab.
<h1> is your page's main heading. Replace Your Name with your actual name.

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

✔️ Awesome, I've got everything!

Great. Make sure you've saved the file before moving on to the next commands.

ⓧ I'd like to double check the full code

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

Your file is saved, but Git hasn't recorded it yet. You need to stage the file (tell Git you want to include it) and then commit it (save the snapshot permanently).

Stage your new file by running this command in Terminal:

git add index.html

Commit your staged file with a descriptive message by running:

git commit -m "Add basic HTML skeleton with page title"

What is staging and committing?

Staging (git add) tells Git which changes you want to include in your next commit. Think of it as placing items in a box before sealing it.

Committing (git commit) seals the box and labels it. The -m flag attaches a message describing what changed so you can find it later.

You should see a confirmation message showing the branch name (main), a short ID, and your commit message.

Seeing an error when you commit?

If you see a message about "nothing to commit", make sure you ran git add index.html first.
If you see an error about your identity, go back and run the git config --global user.name and git config --global user.email commands from Step 1.
Check that your commit message is wrapped in straight quotes ("), not curly quotes.

Help me fix my git commit error

Check your history

Every commit Git saves becomes part of your project's history. You can look back at this history at any time.

View your commit history by running:

git log

You should see your commit with the message Add basic HTML skeleton with page title, along with your name, email, and a timestamp.

Exit the log view

If your terminal seems stuck after running git log, press q to exit the log viewer and return to your normal prompt.

Your repository has its first commit. Next up, you'll build out your profile page with more content and practice making multiple commits to grow your history.

Build Out Your Profile with Multiple Commits

Your repository is live and your first commit is in the books. Now it's time to add real content to your profile page.

Professional developers don't dump all their code into one giant commit. Each commit captures one logical change, making it easy to understand what happened and when.

In this step, get ready to:

Add an About section to your profile page.
Add a Skills list to showcase your abilities.
View your full commit history.

Add an About section

Your profile page currently has just a heading. A short bio paragraph tells visitors who you are.

In your code editor, open index.html from the my-profile folder.
Find the <h1>Your Name</h1> line.
Add an empty line below it, then paste the following code:

    <p>Hi! I'm a developer learning Git and version control. I'm building projects to grow my skills and land my first tech role.</p>

What does this code do?

The <p> tag creates a paragraph element. This one contains a short bio that introduces you to anyone viewing your profile page.

Save index.html.
Stage and commit your change by running these commands in your Terminal:

git add index.html
git commit -m "Add about section with short bio"

What do these commands do?

git add index.html moves your changes into the staging area, marking them ready for the next commit.
git commit -m "..." saves a snapshot of the staged changes with a descriptive message.

You should see a message confirming 1 file changed with insertions.

Don't see '1 file changed'?

Make sure you saved index.html before running git add. Unsaved changes won't be staged.
Check that you're still in the my-profile folder by running pwd.

Why isn't my Git commit working?

Add a Skills list

Now add a Skills section so your profile shows what you're learning. This will be your second content commit.

In index.html, find the closing </p> tag at the end of your About paragraph.
Add an empty line below it, then paste the following code:

    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Git</li>
    </ul>

What does this code do?

<h2>Skills</h2> creates a subheading for this section of your page.
<ul> starts an unordered (bulleted) list.
Each <li> represents one skill in your list.

Save index.html.
Stage and commit your change by running these commands:

git add index.html
git commit -m "Add skills list"

You should see another message confirming 1 file changed.

Commit says 'nothing to commit'?

This means you either forgot to save the file, or already committed this change.
Run git status to check whether index.html shows as modified.

Why is Git saying 'nothing to commit'?

✔️ Awesome, I've got everything!

Great. Double check you've saved index.html and both commits went through.

ⓧ 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>My Profile</title>
</head>
<body>
    <h1>Your Name</h1>

    <p>Hi! I'm a developer learning Git and version control. I'm building projects to grow my skills and land my first tech role.</p>

    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Git</li>
    </ul>
</body>
</html>

View your commit history

You now have three commits in your repository. Let's confirm they're all recorded.

View your full commit history in a compact format by running this command:

git log --oneline

What should I see?

Three lines, each with a short commit ID and your message. The most recent commit ("Add skills list") appears at the top.

The --oneline flag condenses each commit to a single line. Without it, git log shows the full details (author, date, and message) for every commit.

Your commit history is growing. Next up, you'll create a feature branch to add a new section without touching your main branch.

Create a Feature Branch and Merge It

Your profile page now has a solid foundation with three clean commits. In a real team, you would never add new features directly on main. You would work on a separate branch first.

Branches let you experiment without risking the stable version of your project. In this step, you will create a feature branch, add a Contact section to your profile, and merge it back into main.

In this step, get ready to:

Create a feature branch for your new Contact section.
Add and commit a Contact section on that branch.
Merge the branch back into main and verify the history.

Create and switch to a new branch

A branch is a parallel copy of your project where you can make changes without affecting the original. Professional developers create a new branch for every feature or bug fix.

Create a new branch called add-contact-section and switch to it by running this command:

git checkout -b add-contact-section

You should see the message Switched to a new branch 'add-contact-section'.

What does this command do?

The -b flag tells Git to create a new branch AND switch to it in one step. Without -b, the command would try to switch to an existing branch.

Seeing an error about the branch already existing?

If you see a message saying the branch already exists, you may have run this command before. Switch to it with git checkout add-contact-section (without the -b flag).

Help me fix a branch error in Git

Add a Contact section on the branch

You are now working on the add-contact-section branch. Any changes you make here stay isolated from main until you explicitly merge them.

Open index.html in your code editor.
Find the closing </ul> tag at the end of your Skills list.
Add the following Contact section below </ul>, before the closing </body> tag:

    <h2>Contact</h2>
    <p>Email: yourname@example.com</p>

What does this code do?

This adds a Contact heading and an email paragraph to your profile. Feel free to replace yourname@example.com with your real email or leave it as a placeholder.

Save index.html.
Stage and commit your changes by running these commands:

git add index.html
git commit -m "Add contact section"

You should see a message confirming 1 file changed with insertions.

Seeing 'nothing to commit'?

This means your file was not saved before staging. Save index.html in your editor, then run git add index.html and the commit command again.

Help me fix my Git commit

Merge back to main

Your Contact section is committed on the feature branch. Now you need to bring those changes into main so your profile is complete.

Switch back to the main branch by running this command:

git checkout main

Merge the add-contact-section branch into main by running:

git merge add-contact-section

What just happened?

Git took all the changes from add-contact-section and applied them to main. Because nobody changed main while you were working on the branch, Git performed a "fast-forward" merge. This simply moves main forward to include your new commit.

Verify your full commit history by running:

git log --oneline

You should see four commits listed. The most recent is Add contact section at the top.

Only seeing three commits?

Make sure you ran git merge add-contact-section while on the main branch. Run git branch to check which branch you are on. The branch with an asterisk (*) is your current branch.

Help me merge my branch correctly

✔️ Awesome, I've got everything!

Great. Double check you have saved index.html and are back on the main branch.

ⓧ I'd like to double check the full code

Here is the complete index.html file as it should look after the merge:

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

    <p>Hi! I'm a developer learning Git and version control. I'm building projects to grow my skills and land my first tech role.</p>

    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Git</li>
    </ul>

    <h2>Contact</h2>
    <p>Email: yourname@example.com</p>
</body>
</html>

Your profile is complete and your commit history shows a clean branch-and-merge workflow. Next up, you will push everything to GitHub so the world can see your work.

Push to GitHub

Your profile page is complete. Your local Git history tells the full story of how you built it, commit by commit.

Right now, all of that work lives only on your machine. In this step, you'll push your repository to GitHub so your code is accessible from anywhere and your commit history is publicly visible.

In this step, get ready to:

Create a public repository on GitHub.
Connect your local repository to the remote.
Push all your commits to GitHub.

Create a new repository on GitHub

GitHub needs an empty repository to receive your local commits. You'll create one through the GitHub web interface.

Go to github.com in your browser.
Click the + icon in the top-right corner of the page.
Select New repository.
Enter my-profile in the Repository name field.
Keep the repository set to Public.
Do NOT check any of the initialization boxes (README, .gitignore, or license).
Click Create repository.

After clicking Create repository, you'll land on a Quick Setup page. This page shows the HTTPS URL for your new repository.

Why skip the README and .gitignore?

Initializing with a README or .gitignore creates a commit on GitHub that doesn't exist in your local repository. This would cause a merge conflict when you try to push.

Starting with an empty remote lets you push your existing local history cleanly.

Connect your local repo to GitHub

Your local repository doesn't know about the GitHub repository yet. You need to register it as a remote so Git knows where to send your commits.

Copy the HTTPS URL shown on the Quick Setup page.
Add the remote by running this command (replacing the URL with your own):

git remote add origin [[YOUR_REPO_URL="https://github.com/your-username/my-profile.git"]]

What does this command do?

git remote add registers a remote repository that your local repo can communicate with.
origin is the conventional name for your primary remote. Think of it as a nickname for the full URL.
The URL tells Git where to find the remote repository on GitHub.

Confirm the remote was added by running:

git remote -v

You should see two lines showing your GitHub URL. One is for fetch and one is for push.

See a typo in the URL?

If the URL is wrong, remove the remote and add it again with the correct URL:

git remote remove origin

Then re-run the git remote add origin command with the correct URL.

Help me fix my remote URL

Push your code to GitHub

With the remote connected, you can now send all your local commits to GitHub in one command.

Push your commits to GitHub by running this command:

git push -u origin main

What does this command do?

git push sends your local commits to the remote repository.
-u sets origin/main as the default upstream branch. Future pushes only need git push with no extra arguments.
origin main tells Git to push the main branch to the remote named origin.

GitHub may ask you to sign in

If this is your first time pushing from Terminal, GitHub may open a browser window asking you to authenticate. Follow the prompts to sign in with your GitHub account. This only happens once.

Refresh your GitHub repository page in the browser.

You should see index.html listed in the file view. Click on the commit count (it should show 4 commits) to see your full commit history.

Push failed?

Check your remote URL is correct by running git remote -v. The URL must match the one on your GitHub repository page.
Make sure the repository on GitHub is named exactly my-profile and was created without a README or .gitignore.
If you see "repository not found", verify you're signed into the correct GitHub account in your browser.

Help me fix my git push

Your profile page now lives on GitHub for the world to see. Your commit history proves you understand the daily Git workflow that professional developers use. Ready for a bonus challenge?

Secret mission

Simulate and Resolve a Merge Conflict

A merge conflict happens when two branches edit the same line of code. This is the scenario that trips up beginners working on teams. You are going to simulate one on purpose and resolve it manually.

Clean Up Your Resources

This project runs entirely locally and on a free GitHub account, 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 my-profile folder on your Desktop.
GitHub repository (my-profile).
Git global configuration (user name and email).

Keep everything running

No action needed. Choose this if you plan to keep building on your profile page or want to reference this project later.

Your local my-profile folder stays on your Desktop.
Your GitHub repository remains public and visible on your profile.
Your Git global config persists for future projects.

Pause - I'll come back to this later

Free up space on your Desktop while keeping your work safe on GitHub. You can re-clone the repo anytime.

Delete the local folder from your Desktop (see the Delete tab for the command).
Keep your GitHub repository online. You can clone it again later with git clone.

Delete - I don't want to use this again

Remove all project resources completely. This cannot be undone for the GitHub repository.

Delete your local project folder by running this command in Terminal:

rm -rf ~/Desktop/my-profile

Delete the GitHub repository:

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

Optionally, clear your Git global config by running:

git config --global --unset user.name
git config --global --unset user.email

Nice Work!

You did it. You went from zero Git knowledge to a public GitHub repository with a professional commit history.

You've learned how to:

Initialized a repository and built a clean commit history with multiple meaningful commits.
Created a feature branch, made changes on it, and merged it back to main.
Connected a local repository to a remote on GitHub and pushed your full history.
Simulated a merge conflict between two branches and resolved it manually.

Ready to quiz yourself?