Design with Code

Exercise 1

Create Your GitHub Account

Learn what GitHub is, how it stores code in the cloud, and why we use it throughout this course.

What you'll learn

Key takeaways from this exercise

  • Understanding where code lives and how to collaborate on it
  • Understanding the difference between open-source and closed-source software
  • Learning the basics of Git and version control
  • Learning key Git vocabulary: commit, repository, and branch
  • Exploring GitHub and its key features

Introduction

The problem with version control

If you've ever worked on a design project in Photoshop or Sketch, you know the pain of managing file versions. You end up with folders full of files named things like homepage-final.psd, homepage-final-v2.psd, homepage-ACTUALLY-final.psd. It's a mess. And if you're collaborating with other people on the same files, it gets even worse.

Cloud tools like Figma and Google Docs solved part of this problem with real-time collaboration and basic version history. But their version control is still limited — you can't easily work on two different things at the same time, compare versions side by side, or roll back to a specific moment with confidence.

What is Git?

This is why developers have used version control systems for decades. The most popular one is called Git. Git tracks every change you make to your files, organized into snapshots called commits. Each commit is like a save point with a descriptive message attached — "Updated the homepage layout" or "Fixed the navigation bug." You can go back to any commit at any time, see exactly what changed between two versions using a diff, and maintain completely separate versions of your project using branches.

GitHub

Git runs on your computer. It's a tool, not a website. But to store your code in the cloud — so it's backed up, shareable, and accessible from anywhere — you need a platform. The most popular one is GitHub.

Think of GitHub as Google Drive for code, combined with a social network for developers. It's a cloud-based platform where you store your repositories (projects), collaborate with others, and discover what other people are building. It's built on top of Git, so everything you do in Git can be synced to GitHub.

Repositories and files

Repositories on GitHub can be public (visible to everyone) or private (only visible to you and people you invite). Both are free. You'll find that most of the popular tools and frameworks you'll encounter in this course — things like React, Next.js, and VS Code — are actually open-source projects hosted on GitHub. Open-source means the source code is publicly available for anyone to view, use, and contribute to, typically under a license that defines the terms.

A repository can store virtually any type of file: code files (HTML, CSS, JavaScript), text files, images, data files (JSON, CSV), PDFs, and more. That said, Git works best with text-based files because it can track changes line by line. Binary files like images and videos can be stored too, but Git treats each change as a complete file replacement rather than tracking individual differences.

On GitHub you'll find not just software like apps and websites, but also resources like icon sets, fonts, and design tokens — all stored as source code. What's stored in a repository is always the source code of a project, which is the human-readable version of the codebase — not the compiled, production-ready version. We'll talk more about that distinction soon.

Why this matters

Understanding Git and GitHub is essential for working with code in any capacity. Whether you're making changes yourself or working with AI tools, Git is how your work gets tracked, shared, and deployed. AI coding agents use Git constantly — they commit changes, create branches, and push code just like a human developer would. Knowing how Git works means you understand what these tools are doing on your behalf.

You'll use Git and GitHub throughout this entire course.

Create a free account to access the full course

In order to access full course content and track your progress, please sign in