Your first commits

Time to put Git to work on your website. In this lesson you'll turn your my-website folder into a repository, save your first snapshots and learn the small loop of commands you'll use every day as a developer.

Open your my-website folder in VS Code and open the terminal. Make sure you're in the right folder with pwd, then run:

Git answers with something like "Initialized empty Git repository". That's it. Your folder is now a repository.

Git created a hidden folder called .git inside your project. That's where it stores the whole history. You'll never need to touch it, but don't delete it, because that would delete your history too.

The command you'll run more than any other is:

It tells you what's changed since your last commit. Right now it lists all your files under Untracked files, because Git sees them but isn't tracking them yet.

Whenever you're unsure what state your project is in, run git status. It often even suggests what to do next.

Saving a snapshot in Git happens in two steps.

Step 1: choose what goes in the snapshot with git add. This moves changes to the staging area, which is like a waiting room for your next commit:

The dot means "everything in this folder". You can also add single files, like git add index.html.

Step 2: save the snapshot with git commit and a short message describing the change:

Run git status again. It now says there's nothing to commit, because everything is saved.

Why two steps? Because sometimes you've changed several things but only want to save some of them together. The staging area lets you pick exactly what goes into each commit.

From now on, working on your website looks like this:

1. Change some files and check the result in the browser
2. git status to see what changed
3. git add . to stage the changes
4. git commit -m "Describe what you did" to save the snapshot

Commit whenever you reach a small point that works. Finished the footer? Commit. Fixed the menu on phones? Commit. Small, frequent commits are much easier to understand and undo than one huge commit at the end of the day.

Your future self will read these messages when trying to find out when something broke, so make them useful.

• Describe what the change does, like Add contact form or Fix menu overlapping on phones
• Keep it short, around 50 characters is a good target
• Write it like an instruction: "Add footer", not "Added footer" or "Adding footer"

Messages like stuff, fix or asdf feel fine in the moment and are useless a week later.

To see all your commits, run:

Each line is one commit, with a short id and your message. The newest is at the top. As your project grows, this becomes a diary of everything you've built.

You don't have to use the terminal for everything. VS Code has Git built in. Click the Source Control icon in the Activity Bar (it looks like a little branching line) or press Ctrl+Shift+G (Cmd+Shift+G on Mac).

There you can see changed files, click one to see exactly what changed side by side, stage files with the + button and write a commit message in the box at the top. It's the same Git underneath, just with buttons.

It's still worth knowing the commands, because every guide you'll find online uses them. Use whichever feels more comfortable day to day.