Using Git in Frontend Projects

If you're building websites or frontend apps, Git is a powerful tool to help you stay organized and track your progress. Whether you’re working solo or with a team, using Git in your frontend workflow makes it easy to manage changes and go back if something breaks. In this lesson, you'll learn how to use Git with your HTML, CSS, and JavaScript files, and even how to publish your projects online using GitHub Pages.

Setting Up Version Control for Frontend

When starting a new frontend project, it's a good idea to set up Git right away. This lets you keep track of every change you make as you build your website or app.

Start by creating a new folder for your project. Inside it, run:

bash
1
          git init

Now, Git is watching this folder. Create your usual files like index.html, style.css, and main.js. Then, run:

bash
1
2
          git add .
git commit -m "Initial commit"

This saves a snapshot of your project. From here, you can commit changes as you go, keeping a history of your work.

Tracking Changes in HTML/CSS/JS

Every time you change your code—maybe you styled a new button or added a script—Git can help you see exactly what was updated.

Use this command to view what changed:

bash
1
          git status

To see the details of your edits:

bash
1
          git diff

You can then stage and commit your changes:

bash
1
2
          git add .
git commit -m "Added button styles"

This way, every part of your frontend—layout, styling, scripts—can be saved step-by-step, so you never lose progress.

Using GitHub Pages for Demo Hosting

Once your project looks good, you can share it with others using GitHub Pages—a free way to host simple websites directly from a GitHub repo.

Here’s how:

  1. 1
    Push your project to a public GitHub repository.
  2. 2
    Go to the repo settings on GitHub.
  3. 3
    Scroll down to the “Pages” section.
  4. 4
    Choose the branch (like main) and folder (usually /root) to publish.
  5. 5
    GitHub will give you a link to view your live site.

This is perfect for showing off projects, testing layouts on real devices, or sharing your portfolio with the world—all using just Git and GitHub.