Learning by doing with GitHub Codespaces

Most coding tutorials follow a familiar pattern: watch, read, repeat. You absorb concepts, but never quite reach the point of applying them. That gap between theory and practice is where many beginners stall. GitHub Codespaces gives you a browser-based development environment with a live preview, making it easy to modify a working project and see the results immediately.

You don't need to install anything or configure a local setup. If you have a GitHub account, you're ready to start. New users can sign up for free at GitHub.com. Once logged in, you can create a Codespace from a template repository that includes a simple React web app.

Your first Codespace

From the template, choose "Use this template" to launch a pre-configured Codespace. Once it finishes loading, you'll see a live preview of the web app in the "Simple Browser" tab. If the preview isn't visible immediately, wait a few minutes for it to appear.

The template includes an App.js file already open in the editor, which contains the app's content. To make your first change:

  1. Locate line 9 in App.js, which contains the text "GitHub Codespaces ♥️ React" inside paragraph tags.
  2. Replace "GitHub Codespaces" with your GitHub username.
  3. Save the file with Command + S on Mac or Control + S on Windows.
  4. Check the Simple Browser tab — Codespaces automatically detects the saved change and reloads the preview.

Adjusting styles

The web app's styling lives in App.css inside the src folder. On line 11, you'll find the background color set to the hex code #282c34, a gray. Replace that value with a color name like purple, save the file, and the preview updates instantly.

If you need more guidance, the template includes a guided CodeTour. Open the Explorer icon in the left sidebar, toggle the CodeTour panel, and press the play button to walk through the same steps interactively.

Saving your work to a repository

Feeling confident with your changes? You can preserve your work by publishing the Codespace to a GitHub repository, which stores your project files and lets you share them with others.

  1. Navigate to https://github.com/codespaces. Your changes are saved automatically as you work.
  2. Find your Codespace at the bottom of the page. It may have an auto-generated name like "ubiquitous acorn."
  3. Click the three-dot menu and select "Publish to new repository."
  4. Give the project a descriptive name, choose public or private visibility, and confirm.

Your code now lives in a repository on GitHub, where you can share the link for collaboration or continue building. You can even delete the Codespace afterward — the code stays safe in the repository. To reopen it in a Codespace later, click the "Code" button in your repository and select the "+" option in the Codespaces tab.

Templates for further exploration

GitHub's quickstart templates include boilerplate projects for popular frameworks like Next.js, React.js, Django, Express, Ruby on Rails, Preact, Flask, and Jupyter Notebook. These templates give you a working starting point, letting you focus on modifying code rather than setting up a project from scratch. They're also useful for understanding how a framework structures its files and how those files interact.

For example, a Jupyter Notebook template can serve as an entry point for experimenting with AI and machine learning, with tools already configured so you only need to tweak a few lines of code. The template approach works for any language or framework you want to explore.

For more advanced Codespaces features, consult the official documentation. If you build something you're proud of, share it with the hashtag #ShareYourCodespace.