Getting Started with Git and GitHub for Your First Web Project

You've built your first web project—maybe a personal portfolio or a simple landing page. Now you need to save your work properly and share it with the world. That's where Git and GitHub come in. Let me walk you through the setup process step by step, using a real example from PythonSkillset.

Why You Need Version Control

Imagine you're working on a PythonSkillset tutorial about building a weather dashboard. You make changes, break something, and can't remember what the original code looked like. Without version control, you're stuck manually saving copies like "index_final_v3_actuallyfinal.html". Git solves this by tracking every change you make, letting you go back to any previous version instantly.

Installing Git

First, check if Git is already installed on your system. Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux) and type:

git --version

If you see a version number, you're good. If not, head to git-scm.com and download the installer for your operating system. The installation is straightforward—just keep clicking "Next" with the default options.

Configuring Git for the First Time

Once Git is installed, you need to introduce yourself. Git attaches your name and email to every change you make, so it knows who did what. Open your terminal and run:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Use the same email you'll use for GitHub. This makes it easier to connect your local work to your GitHub account later.

Creating Your First Local Repository

A repository (or "repo") is just a folder that Git watches for changes. Navigate to your web project folder in the terminal:

cd ~/Documents/my-web-project

Now initialize Git in this folder:

git init

You'll see a message like "Initialized empty Git repository in /Users/yourname/Documents/my-web-project/.git/". Git has created a hidden folder that tracks everything. Your project files are now being watched.

Making Your First Commit

Let's say your project has an index.html file and a style.css file. First, check what Git sees:

git status

You'll see your files listed in red under "Untracked files". This means Git knows they exist but isn't tracking changes yet. To start tracking them, use:

git add index.html style.css

Or if you want to add everything in the folder:

git add .

Now create your first snapshot (called a "commit"):

git commit -m "Initial commit: basic HTML and CSS files"

The -m flag lets you add a message describing what this commit contains. Good commit messages are short but descriptive—think of them as notes to your future self.

Setting Up a GitHub Account

Head over to github.com and sign up for a free account. Choose a username that looks professional—something like "pythonskillset-dev" rather than "coolgamer99". Your GitHub profile is often the first thing employers see, so keep it clean.

Creating Your First Remote Repository

Once logged in, click the "+" icon in the top right corner and select "New repository". Give it a name that matches your project, like "weather-dashboard". You can add a short description, but leave the "Initialize this repository with a README" box unchecked for now—we'll do that locally.

Click "Create repository". You'll see a page with instructions. Look for the section that says "…or push an existing repository from the command line". Copy the two lines that look like:

git remote add origin https://github.com/yourusername/weather-dashboard.git
git branch -M main
git push -u origin main

Connecting Your Local Repository to GitHub

Go back to your terminal where your local repository is. Run the first command to link your local repo to the remote one on GitHub:

git remote add origin https://github.com/yourusername/weather-dashboard.git

This tells Git: "Hey, there's a remote repository called 'origin' at this URL." The name "origin" is just a convention—you could call it anything, but everyone uses "origin".

Pushing Your Code to GitHub

Now push your local commits to GitHub:

git branch -M main
git push -u origin main

The first command renames your default branch to "main" (Git used to call it "master", but most projects now use "main"). The second command uploads your code and sets up tracking so future pushes are simpler.

You'll be prompted for your GitHub username and password. Starting in 2021, GitHub no longer accepts passwords for command-line operations. Instead, you need a personal access token. Here's how to create one:

1. Go to GitHub Settings > Developer settings > Personal access tokens
2. Click "Generate new token (classic)"
3. Give it a name like "my-first-project"
4. Select the "repo" scope
5. Click "Generate token"
6. Copy the token immediately—you won't see it again

Use this token as your password when Git asks for it. Save it somewhere safe, like a password manager.

Understanding the Workflow

Let's say you're working on a PythonSkillset tutorial about building a contact form. You've just added a new contact.html page. Here's how the workflow looks:

1. Check what's changed: git status shows you which files are modified or new
2. Stage the changes: git add contact.html tells Git "I want to include this file in my next commit"
3. Commit the changes: git commit -m "Add contact page with form" creates a permanent snapshot
4. Push to GitHub: git push uploads your commit to the remote repository

A Real Example from PythonSkillset

When I was building the PythonSkillset article on web scraping, I made a mess of my code. I had three different versions of the scraper function floating around. With Git, I could see exactly what I changed in each version:

git log --oneline

This showed me:

a3f2b1c Added error handling for network timeouts
9e8d7f6 Fixed CSS selector for article titles
4c5b6a7 Initial scraper implementation

I could jump back to any version with git checkout 9e8d7f6 and see exactly what my code looked like at that point. No more guessing.

Cloning an Existing Project

Sometimes you'll want to work on a project that's already on GitHub. For example, if you're contributing to an open-source PythonSkillset project, you'd "clone" it:

git clone https://github.com/pythonskillset/awesome-project.git

This downloads the entire project history to your computer. You can then make changes, commit them, and push them back.

Branching: Your Safety Net

Branches let you work on new features without messing up your main code. Think of it like having a separate copy of your project where you can experiment freely.

To create a new branch for adding a dark mode feature:

git branch dark-mode
git checkout dark-mode

Or do it in one line:

git checkout -b dark-mode

Now you can make changes to your CSS file, add dark mode styles, and commit them. Your main branch stays untouched. When you're happy with the result, merge it back:

git checkout main
git merge dark-mode

Handling Merge Conflicts

Sometimes Git can't automatically merge changes because two people (or you on different branches) modified the same line. Git will mark the conflict in your file with special markers:

<<<<<<< HEAD
background-color: white;
=======
background-color: black;
>>>>>>> dark-mode

You need to manually edit the file to keep the correct version, remove the markers, then commit the resolved file. It sounds scary, but after doing it once or twice, it becomes second nature.

Ignoring Files You Don't Need

Your web project probably has files that shouldn't be tracked—like .DS_Store on Mac, node_modules if you're using npm, or .env files with API keys. Create a file called .gitignore in your project root and list the files or folders to ignore:

.DS_Store
node_modules/
.env
*.log

Git will now skip these files when you run git add .. This keeps your repository clean and prevents accidentally sharing sensitive information.

Writing Good Commit Messages

Your commit messages should tell a story. Instead of "fixed stuff", write something like "Add responsive navigation menu for mobile devices". When you look back at your project history six months from now, you'll thank yourself.

A good format is: - Short summary (50 characters or less) - Blank line - Longer description if needed

For example:

Add contact form with validation

- Added HTML form with name, email, and message fields
- Implemented client-side validation using JavaScript
- Styled form to match the existing design

Pushing Changes Regularly

After you've made a few commits locally, push them to GitHub:

git push

The first time you pushed, you used -u origin main to set up tracking. Now you can just type git push and Git knows where to send your changes.

Pulling Changes from GitHub

If you're working on multiple computers or with a team, you'll need to pull changes others have made:

git pull

This downloads any new commits from GitHub and merges them into your local branch. Always pull before you start working to avoid conflicts.

A Practical Workflow for Your Web Project

Here's how I use Git for my PythonSkillset articles. When I start a new tutorial, I:

1. Create the project folder and initialize Git
2. Make an initial commit with the basic structure
3. Create a branch for each major feature (like "add-search-bar" or "fix-mobile-layout")
4. Commit frequently—every time I complete a small, logical piece of work
5. Push to GitHub at the end of each work session

This way, if I mess something up, I can always go back to the last working version without losing everything.

Common Mistakes Beginners Make

Forgetting to add files before committing: If you edit a file and run git commit without running git add first, Git won't include those changes. Always check git status before committing.

Committing too much at once: A commit should represent one logical change. "Fixed typo in header" is better than "Updated everything". This makes it easier to find specific changes later.

Pushing to the wrong branch: Always check which branch you're on with git branch before pushing. Pushing experimental code to main can cause headaches.

What to Do When Things Go Wrong

You accidentally committed something you shouldn't have. No panic. If you haven't pushed yet, you can undo the last commit while keeping your changes:

git reset --soft HEAD~1

This removes the commit but keeps your files as they were. If you want to completely discard the changes too, use --hard instead of --soft—but be careful, that deletes your work.

Setting Up GitHub Pages for Your Web Project

One of the best things about GitHub for web developers is GitHub Pages. It hosts your static website for free. Here's how to set it up:

1. Push your code to a repository named yourusername.github.io (replace with your actual username)
2. Go to the repository settings on GitHub
3. Scroll down to "GitHub Pages"
4. Under "Source", select "main branch"
5. Your site will be live at https://yourusername.github.io within a few minutes

For project-specific sites, create a repository with any name, then in settings, select the branch and folder (usually /root). Your site will be at https://yourusername.github.io/repository-name.

A Quick Tip for PythonSkillset Readers

When you're following along with PythonSkillset tutorials, you'll often see code snippets that need to be saved in specific files. Instead of copying each file manually, clone the tutorial's repository:

git clone https://github.com/pythonskillset/tutorial-name.git

This gives you the exact starting point the instructor used. You can then follow along, make changes, and commit your own versions.

The Daily Workflow

Here's what a typical day looks like when you're working on your web project:

1. Pull latest changes (if working with others): git pull
2. Create a branch for your new feature: git checkout -b add-footer
3. Make changes to your HTML and CSS files
4. Stage and commit your work: git add . then git commit -m "Add footer with social media links"
5. Push to GitHub: git push -u origin add-footer
6. Create a pull request on GitHub to merge your branch into main

A Note on Commit Messages

At PythonSkillset, we follow a simple rule: commit messages should complete the sentence "This commit will…". So "Add footer with social media links" becomes "This commit will add footer with social media links." It forces you to be specific and useful.

What's Next?

Once you're comfortable with these basics, explore branching strategies like Git Flow, learn about pull requests for code review, and discover how to use .gitignore effectively. But for now, you have everything you need to version control your first web project and share it with the world.

Your code is safe, your history is tracked, and you're ready to collaborate. That's the power of Git and GitHub.