Show HN: GitByBit — Git course integrated into VSCode and Cursor

4 hours ago (gitbybit.com)

Hi folks! My name is Alexander Shvets. People know me best as an admirer of raccoons and the creator of Refactoring.Guru

Today I'd like to show you the project I've been working on for the past two years: https://gitbybit.com

It's a Git course that runs inside your code editor (VS Code, Cursor, and friends), so you learn Git by using it in real dev environment. It's well-designed and illustrated.

## Who is it for?

The course will be most helpful for three groups of people:

- Developers who “use Git” but mostly as a black box. You know a few commands, but you want to actually understand what you’re doing.

- Builders returning to code (PMs, designers, ex-devs) who now use AI tools for prototypes and internal tools, and need their Git muscles back.

- Hobby coders and beginners who want a practical, confidence-building path from zero to “I can work with Git.”

## What makes it different?

I designed GitByBit as a modern way to learn Git (if we can still say so about a project that doesn't use AI). It's story based, you learn about everything gradually, one concept built upon another. It's is also hyper-focused on practice: building muscle memory for commands, using real Git, real IDE tools, etc.

That's possible because of the unique format: the course is integrated right into your code editor (assuming it's VS Code, Cursor, or any of the clones). It can also be run online via GitHub Codespaces. This format allows it to achieve some pretty cool things:

- Real Git, editor and terminal. You're always using real stuff! Once you finish the course, you're one shortcut away (Open New Window, Ctrl+Shift+N) from applying everything you've just learned about Git in your next project.

- Instant feedback. The course can check the results of your actions, explain errors, suggest workarounds, etc. You don't have to jump between a web page with instructions and the terminal, or search for explanations of cryptic Git errors. It's all in one place.

- Respects your time. The content is presented in bite-sized chunks, which helps you keep focus and stay engaged. No endless videos you have to sit through. The main course can be completed in one sitting, in an evening.

- Gitopedia. While progressing through the course, you build your personal in-editor Git reference, unlocking bits of supplemental material. They go into your personal knowledge base, a thing I called Gitopedia. You can pull up the Gitopedia as a separate tab in the editor, or arrange it to be opened in parallel at all times. It also serves as a map of what you've learned so far.

- Illustrated. There are cool handmade illustrations (see https://gitbybit.com/blog/0005-illustrations)

## What's covered in the course?

There are two parts.

1. The FREE main course, focuses on Git essentials: things that you need to know to work on your personal projects. Setting up and configuring Git, working with the terminal, the staging area, commits, branches, history, remote repos, etc.

The course teaches Git in terminal first, but also shows how to achieve the same thing via graphical user interface of the editor.

Apart from learning Git itself, you also get insights on using the terminal effectively (navigating history, using autocomplete, etc.), learn about software release cycle, semantic versioning, licenses, best practices and more.

2. Optional paid add-on (extra practice and team workflows):

- Selective staging and resetting changes.

- Different ways to clean up the repo or ignore unwanted changes.

- A detective scenario where you investigate project crashes using git history and git blame.

- A deep dive into merging/rebasing branches.

- And my favorite: the full GitHub pull request workflow, from forking someone's repo to updating it according to the maintainer's demands, and the eventual merge.

Enjoy and have fun!

How do you keep the experience consistent across VS Code, Cursor, and clones?

  • All the versions—including the web version available through the gitbybit.com, as well the GitHub Codespaces version—all are compiled from the single source, which is a large React monorepo.

    All the editors share the same VS Code internals and APIs, so once your extension works in VS Code, it'll likely work in other editors. The are different ways to distribute extensions for VS Code and clones, but that's a technical detail.

    Design-wise, even if it's just VS Code, there are mutiple themes, dark modes, etc that may affect your content, so you have to keep reusing VS Code CSS styles and keep your own styling minimal so that the content look good on any crazy theme user might have installed. And on the web, you can carry VS Code theme variables to style things similarly to VS Code's base theme.