Use Git and GitHub as a solo developer

Course

Level 1 · Web Introduction

Module

Project tools and web concepts

Expected effort

120–210 minutes

Estimate assumptions: You completed the semantic HTML lesson and still have its html-elements folder. The estimate includes checking or installing Git, configuring a commit identity, creating two commits, connecting GitHub, authentication, verification, and likely recovery steps. Account, installation, or authentication problems can add time. Optional extension work is not included.

Outcome

You will turn your semantic HTML project into a Git repository, save two meaningful commits, and push the repository to GitHub. You will finish with a short workflow that you can repeat while building the profile-page project.

Why this matters

Git records useful versions of a project on your computer. GitHub stores a connected copy online and gives you a place to inspect and share the repository. A solo developer can use both tools before any teamwork begins.

What you will practice

• Explain the different roles of Git and GitHub.
• Inspect a project with git status and git diff before saving a commit.
• Stage a selected file and create a commit with a specific message.
• Connect a local repository to GitHub and push the main branch.
• Use a repeatable edit, inspect, stage, commit, and push workflow as a solo developer.

What is new and what is reused

• New: Repositories, working-tree changes, the staging area, commits, branches, remotes, and pushes.
• Reused: The completed html-elements/index.html page, the VS Code workspace, using a terminal, saving files, and checking a result before continuing.

Starting point

Before you start

• The completed html-elements folder and index.html file from the semantic HTML lesson.
• VS Code with html-elements open as the workspace root.
• A GitHub account that you can sign in to, or approval to create one.
• Permission to install Git for your Windows account if Git is not already installed.
• Project content that is safe to store in a private online repository.

Current state

The semantic HTML page works, but Git does not yet record its versions and GitHub does not have a connected copy.

First action

Open a terminal and run git --version. You can use Terminal > New Terminal in VS Code, PowerShell, Command Prompt, or another terminal that can run Git.

First checkpoint

The terminal prints a Git version number.

Help trigger

Ask for help if Git is unavailable, an installer or sign-in needs administrator approval, the terminal is not inside html-elements, or an authentication prompt does not match this lesson.

Required result

You have completed the lesson when:

• html-elements is a Git repository on a branch named main;
• Git records index.html in an initial commit;
• a second commit records one deliberate footer change;
• the local repository has a remote named origin;
• a private GitHub repository shows both commits on main; and
• git status reports a clean working tree after the final push.

Check content before you commit or push

A private repository limits normal access, but it is not a suitable place for passwords, API keys, private addresses, or other secrets. Git history can keep earlier content after you edit the current file. Check the staged change before each commit.

Type Git commands in a terminal

Type each Git command in this lesson into a terminal. Do not type the commands into an HTML file, a browser address bar, or the GitHub website. You can use:

• the integrated terminal in VS Code;
• PowerShell;
• Command Prompt (cmd); or
• another terminal where the git command is available.

This lesson uses the VS Code terminal because it usually opens in the folder that is open as the VS Code workspace. The current folder, also called the working directory, is the folder that the terminal acts on.

The location does not matter when you run git --version or a git config --global command. The --global option saves settings for your Windows account instead of one project.

For every other Git command in this lesson, the terminal must have html-elements as its current folder. This means that html-elements is the folder shown in the VS Code Explorer and that index.html is directly inside it. In VS Code, open the html-elements folder and select Terminal > New Terminal. If you use PowerShell or Command Prompt outside VS Code, use cd to move to the folder first:

PowerShell or Command Prompt

cd "C:\path\to\html-elements"
dir

Replace the example path with the path on your computer. The dir output must list index.html. Keep this project terminal open for the remaining commands. If a command lists files from another project or a parent folder, stop before you stage or commit anything and return to html-elements.

Check Git and your commit identity

Open your chosen terminal. You can run the next command from any folder.

Run:

Any terminal

git --version

Expected result: The command prints text that starts with git version.

If Windows reports that git is not recognized, download the current installer from the official Git for Windows page. Keep Git Credential Manager selected during installation. Close and reopen VS Code after the installer finishes, then run git --version again.

Git writes an author name and email address into each commit. These values are separate from the GitHub username. Choose a name that you are comfortable showing in repository history.

Sign in at github.com. If you do not have an account, open GitHub sign-up. Create and use your own account. Choose a username that you are comfortable using for development work, use an email address that you can access, and keep your password and sign-in codes private.

GitHub can supply a private noreply email address. Sign in to GitHub, open Settings > Emails, enable email privacy if you want it, and copy the noreply address that GitHub shows. You can also use an email address that is verified on your GitHub account.

On your own Windows account, configure the identity for future repositories. Because these commands use --global, you can run them from any terminal folder:

Set your Git commit identity

git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL OR NOREPLY EMAIL"

Replace both placeholder values, including the quotation marks around each complete value. Then check the saved values:

Check your Git commit identity

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

Shared computer

The --global option applies the identity to repositories in the current Windows account. If several people use the same Windows account, stop and ask your teacher how identities are managed on that computer.

Check

Confirm that git --version prints a version and that both configuration checks print the values you chose.

If it does not work

• If git remains unavailable after installation, close every VS Code window and reopen the html-elements folder.
• If a configuration check prints nothing, repeat the matching git config command with your value.
• If the wrong person’s identity appears on a shared computer, do not create a commit. Ask your teacher to correct the setup first.

Checkpoint: Git and the commit identity are ready

What now works

The VS Code terminal can run Git, and Git reports the intended author name and email address.

Files changed

Git configuration outside the project

What remains

Initialize the html-elements repository and create its first commit.

Next action

Confirm that HTML-ELEMENTS is the VS Code workspace root, then run git init -b main.

If it does not work

Run git --version and both git config checks again. Continue only when all three commands return the expected values.

Create the local repository

A repository is a project that Git tracks. The project files remain normal files. Git adds a hidden .git folder that stores the repository history and configuration.

From this point, run each Git command in the project terminal with html-elements as its current folder. Confirm that HTML-ELEMENTS is the top folder in the VS Code Explorer, or that dir lists index.html if you use a separate terminal. Then run:

Initialize the repository

git init -b main
git status

git init -b main creates the repository and names its first branch main. A branch is a named line of commits. This lesson uses one branch because the current project and workflow are small.

The first git status output should report:

• the branch name main;
• no commits yet; and
• index.html as an untracked file.

An untracked file exists in the project folder, but no commit contains it yet.

If it does not work

• If Git reports that -b is an unknown option, update Git for Windows before continuing.
• If git status lists unrelated folders or many unrelated files, the terminal is in the wrong folder. Do not stage anything. Open html-elements as the VS Code workspace root and open a new terminal.
• If Git reports that this is already a repository, run git status. Continue when the branch and listed files belong to html-elements; otherwise, ask for help before changing repository settings.

Stage and commit the completed page

Git does not commit every saved file automatically. You select the content for the next commit by adding it to the staging area.

Run:

Stage the page and inspect the staged change

git add index.html
git status
git diff --staged

git add index.html stages the current saved content of that file. git diff --staged shows the exact content prepared for the next commit.

Read the staged diff. Confirm that it contains the semantic HTML journal and no private information. Then create the commit:

Create the first commit

git commit -m "Create semantic HTML journal"
git log --oneline

A commit is a recorded project snapshot with author information, a time, an identifier, and a message. The log should show one abbreviated identifier followed by Create semantic HTML journal.

Check

Run git status. The result should include On branch main and nothing to commit, working tree clean.

Checkpoint: The local project has its first commit

What now works

Git tracks index.html on main, the log shows Create semantic HTML journal, and the working tree is clean.

Files changed

html-elements/index.html, html-elements/.git/

What remains

Create an empty private repository on GitHub, connect it as origin, and push main.

Next action

Sign in to GitHub and open the New repository page.

If it does not work

Run git status. If index.html remains staged, run the git commit command. If it is still untracked, repeat git add index.html first.

Connect the project to GitHub

Git and GitHub have different roles:

Tool	Current role
Git	Records commits in the local html-elements repository
GitHub	Stores a connected remote repository that you access through your GitHub account

The local repository works without GitHub. Connecting GitHub lets you push committed versions to another location and inspect them in a browser.

Create an empty GitHub repository

Open github.com/new and use these settings:

• Owner: Your GitHub account.
• Repository name: html-elements.
• Description: Optional.
• Visibility: Private.
• Initialize this repository with a README: Off.
• Add .gitignore: None.
• Choose a license: None.

Create the repository. Keeping it empty avoids adding a separate history before you push the existing local history.

Add the remote

On the new repository page, copy the HTTPS URL. It has this pattern:

HTTPS repository URL

https://github.com/YOUR-USERNAME/html-elements.git

In the project terminal, run the next commands. Replace the complete example URL with the URL that you copied.

Connect and verify the remote

git remote add origin https://github.com/YOUR-USERNAME/html-elements.git
git remote -v

A remote is a named connection to another repository. origin is the conventional name for the primary remote. The check should show the same URL for fetch and push.

Push the main branch

Run:

Push the first commit

git push -u origin main

The first HTTPS push can open a Git Credential Manager browser sign-in. Follow the GitHub sign-in and authorization prompts for your account. GitHub does not accept an account password as Git authentication in the terminal. Current Git for Windows includes Git Credential Manager so you can authenticate through the browser instead.

Reload the repository page on GitHub. It should show index.html and the commit message Create semantic HTML journal.

If it does not work

• remote origin already exists: Run git remote -v. If the URL is correct, continue to the push. If it is wrong, ask for help before changing it.
• Repository not found: Compare the URL from git remote -v with the browser address. Confirm the owner and repository name, then confirm that you signed in to the account that owns the repository.
• Push rejected because the remote contains work: The GitHub repository was probably initialized with a README, .gitignore, or license. Do not force the push. Ask your teacher to help you use a new empty repository or combine the histories safely.
• Authentication does not open or repeatedly fails: Read GitHub’s Git Credential Manager guidance for Windows or ask for help. Do not paste an account password into the terminal.

Checkpoint: The first commit is on GitHub

What now works

The private GitHub repository shows index.html and the Create semantic HTML journal commit on main.

Files changed

html-elements/index.html, html-elements/.git/

What remains

Make one deliberate change and repeat the complete solo-development loop.

Next action

Return to index.html in VS Code and update the page footer.

If it does not work

Run git remote -v and compare its URL with the repository page. Then run git push -u origin main again and read the first error line.

Repeat the solo-development loop

In index.html, find the page-level footer and change its paragraph to:

index.html — updated footer

<p>Web learning journal · Level 1 HTML practice</p>

Save the file. Then inspect the working tree:

Inspect the saved change

git status
git diff

git status should list index.html as modified. git diff should show one removed footer line and one added footer line.

Stage and inspect the selected version:

Prepare the second commit

git add index.html
git diff --staged

Confirm that the staged diff contains only the intended footer change. Then commit and push it:

Commit and push the footer change

git commit -m "Update journal footer"
git push

The first push used -u origin main to connect the local main branch with the remote main branch. Later pushes can use git push while that connection remains in place.

Reload the GitHub repository page. Open the commit history and confirm that it shows both messages in this order, newest first:

1. Update journal footer
2. Create semantic HTML journal

Finally, run:

Verify the final local state

git status
git log --oneline

Expected result: The working tree is clean, and the log shows both commits.

If it does not work

• If git status is clean before the second commit, save index.html and confirm that the footer text changed in the source file.
• If git commit reports nothing to commit, run git status. Stage the saved file with git add index.html when it is listed as modified.
• If GitHub still shows one commit, run git push and reload the repository page after the command succeeds.

Self-check

Complete these checks against the required result.

1. Run git status and confirm that the branch is main and the working tree is clean.
2. Run git log --oneline and identify the two commit messages.
3. Run git remote -v and identify origin as the GitHub connection.
4. Open the private GitHub repository and confirm that index.html contains the revised footer.
5. Explain which command inspects an unstaged change and which command inspects the staged version.
6. Explain why saving a file, committing it, and pushing it are three separate actions.

Use the workflow on your own projects

For a small solo project, use this loop at a meaningful working checkpoint:

Solo Git workflow

Edit and save
→ git status
→ git diff
→ git add FILE
→ git diff --staged
→ git commit -m "Describe the completed change"
→ git push

Commit a coherent result that you can name. Examples include Add profile navigation, Add project entries, or Fix contact link target. A commit message such as stuff does not tell your future self what changed.

Git does not replace saving the file. A commit does not automatically reach GitHub. A push does not include unstaged or uncommitted changes.

For the small profile-page project, working on main is a suitable solo workflow. A separate branch becomes useful when you want to isolate an experiment or when a project has a review and merge process.

Where teamwork fits

The same Git model supports teamwork. Team members can work on separate branches, push them to a shared remote, review changes in a pull request, and merge accepted commits. Two people can also change the same lines and create a merge conflict that they must resolve.

Those collaboration steps are not required in this lesson. The current focus is the individual workflow that teamwork builds on: inspect your changes, make clear commits, keep your local state understandable, and push the commits that belong on the remote.

2Assistance 2 — Map each Git term to the project state

• Working tree: The current saved files in html-elements.
• Staging area: The exact file content selected by git add for the next commit.
• Commit: A recorded project snapshot and message in the local history.
• Branch: The named line of commits. This lesson uses main.
• Remote: The saved connection named origin.
• Push: The operation that sends local commits to the connected GitHub branch.

Official references

Use these references when an interface or setup differs from the lesson:

• Install Git for Windows
• Set your Git username
• Set your commit email address
• Add locally hosted code to GitHub
• Use Git Credential Manager on Windows

Optional Git investigations

The required lesson is complete before these investigations. Choose a route that gives you useful practice.

Inspect one commit on GitHub

Open Update journal footer in the GitHub commit history. Identify the changed file, removed line, added line, author, and commit identifier. Compare that view with the earlier git diff --staged output.

Isolate an experiment on a branch

Create a branch with git switch -c journal-experiment. Change one journal paragraph and commit it. Use git switch main to return to the required result. Confirm that the experimental text is not present on main. Ask for help before merging or deleting the branch if those actions are new.

Verify the remote copy in another folder

Use GitHub’s HTTPS URL and git clone to create a separate copy under your Level 1 resources folder. Open the cloned folder and confirm that its log contains both commits. Keep editing in the original html-elements folder after this check.

Next step or safe stopping point

The lesson is complete when the local and GitHub repositories show both commits, git status is clean, and you can explain the solo workflow from edit to push.

Continue to How websites work to compare the local HTML journal with a page requested from a web server.

If you stop here, leave yourself this resume note: The html-elements repository is clean and pushed. Next, open the How websites work lesson with the local journal ready in the browser.