Demo Configure a Codespace

In this guide you’ll create a GitHub Codespace for the example “block-buster” repository, preview the app in the browser, make a UI change in a feature branch, and push that branch back to GitHub. Using Codespaces lets you skip local environment setup and jump directly into a cloud-hosted VS Code instance with common developer tools preinstalled.

The image shows a GitHub repository page with a code files list, including HTML, CSS, and JavaScript files, and indicates that no codespaces are currently checked out for this repository.

1. Create a Codespace

From the repository page open the Codespaces menu and click Create codespace (choose the main branch or another branch you prefer). After a short initialization step, GitHub launches a browser-hosted Visual Studio Code session with common tools and language runtimes already installed.

The image displays a Visual Studio Code interface running in a web browser, with a project named "block-buster" open, showing files like index.html and script.js in the explorer panel. The terminal window displays a welcome message for Codespaces, and a "Build with Agent" section is visible on the right.

2. Verify common developer tools

Confirm that Node.js and the GitHub CLI are available in the Codespace terminal:

# check Node.js and GitHub CLI versions
node -v
gh --version

Example output:

$ node -v
v24.14.0

$ gh --version
gh version 2.8.0 (2026-03-10)
https://github.com/cli/cli/releases/tag/v2.8.0

Quick reference — useful commands:

Purpose	Command
Check Node	`node -v`
Check GitHub CLI	`gh --version`
Create and switch branch	`git checkout -b feature-workspace`
Stage changes	`git add <files>`
Commit changes	`git commit -m "message"`
Push branch to remote	`git push -u origin <branch>`

3. Install optional VS Code extensions

Install any extensions you need inside the Codespace just like you would locally. For live HTML previews, consider:

Live Preview: https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server-preview
Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Open the Extensions view in Codespaces and install the extension that matches your workflow.

4. Preview the app

The project already includes a simple HTML entry point. Open the file in the editor and use Live Server / Live Preview to launch a browser tab that shows the running game:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Block Buster - Enhanced Edition</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="container">
        <!-- Welcome Screen -->
        <div class="screen active welcome-screen" id="welcomeScreen">
            <div class="header">
                <h1 class="title">BLOCK BUSTER</h1>
                <p class="subtitle">Enhanced Edition with Random Levels & Power-ups</p>
            </div>
        </div>
        <div class="game-screen"></div>
    </div>
</body>
</html>

Open the app with your chosen preview extension and a new browser tab will display the game.

The image displays a screenshot of a video game called "Block Buster," featuring colorful blocks arranged in a pattern with a paddle and ball at the bottom. The game screen shows various statistics like score, high score, lives, and level indicators.

5. Make a UI change in a feature branch

Create and switch to a new branch before editing:

# create and switch to a feature branch
git checkout -b feature-workspace

Open style.css (or style.scss) and locate the :root variables. The existing variables might look like this:

:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f09f3f 0%, #f5576c 100%);
  --dark-bg: #0f1f20;
  --card-bg: rgba(255, 255, 255, 0.2);
  --card-border: rgba(255, 255, 255, 0.2);
  --accent-cyan: #00d4fa;
  --accent-lime: #8fdc5f;
  --accent-purple: #c24cf6;
  --text-primary: #ffffff;
  --text-secondary: #bbbb0c;
  --power-multi: #ff6bb6;
}

To switch the UI accent color, update the variables — here is an example pinker theme:

:root {
  --primary-gradient: linear-gradient(180deg, #764ba2 100%);
  --secondary-gradient: linear-gradient(180deg, #f5576c 100%);
  --dark-bg: #0a0a0a;
  --card-bg: #ffffff;
  --card-border: #eaeaea;
  --accent-cyan: #1eb1b7;
  --accent-lime: #78d20a;
  --accent-purple: #c24cf6;
  --text-primary: #ffffff;
  --text-secondary: #bbbb0c;
  --power-multi: #f6bbcb;
}

Save the file and refresh the Live Preview tab — CSS variables update immediately so you can iterate quickly.

The image shows a game menu for "Block Buster" featuring options for game type, levels, power-ups, high scores, and features, with buttons to start the game or reset scores.

6. Commit and publish your branch

When you’re satisfied with the change, stage, commit, and push the branch:

git add style.css
git commit -m "Update accent colors for UI theme"
git push -u origin feature-workspace

VS Code may prompt to publish the branch for you (creating the upstream). It can also offer to open a pull request — you can create that PR immediately or from the GitHub UI later. After pushing, confirm the branch and commit appear on GitHub.

This image shows a GitHub repository page titled "block-buster," featuring various files such as .github, .gitignore, and README.md, along with additional repository details on the right side.

7. Codespace lifecycle: stopped vs deleted

A convenient detail of Codespaces is that stopping a Codespace preserves the VM state (open files and uncommitted changes) so you can resume work later. However, deleting the Codespace permanently removes its data.

The image shows a Visual Studio Code editor with a project containing several files in the sidebar, including "index.html," "README.md," and "script.js." The content of "newfile" is displayed in the main window with the text "some content."

Before deleting a Codespace, commit and push any changes you want to keep. Stopping preserves open files and uncommitted work for your next start, but deleting removes all Codespace data permanently.

Summary

Create a Codespace to get an instant cloud-hosted VS Code environment.
Verify Node.js and gh are available, and install any needed extensions.
Use Live Server / Live Preview to iterate on UI changes quickly.
Branch, commit, and push changes back to GitHub.
Stop Codespaces to preserve state; delete only when you no longer need the instance.

Links and References

Watch Video

Customizations With GitHub Codespaces

Adding and Configuring Dev Containers

Introduction

Git and GitHub Basics

GitHub Entities

GitHub Markdown

GitHub Desktop

GitHub Mobile

GitHub Repositories

Issues

Pull Requests

Discussions

Notifications

Gists, Wikis, and GitHub Pages

GitHub Actions

GitHub Copilot

GitHub Codespaces

Manage Your Work with GitHub Projects

Authentication and Security

GitHub Administration

Benefits of Open-Source Community

Benefits of Open Source – Applications

Demo Configure a Codespace

1. Create a Codespace

2. Verify common developer tools

3. Install optional VS Code extensions

4. Preview the app

5. Make a UI change in a feature branch

6. Commit and publish your branch

7. Codespace lifecycle: stopped vs deleted

Summary

Links and References

Watch Video

​1. Create a Codespace

​2. Verify common developer tools

​3. Install optional VS Code extensions

​4. Preview the app

​5. Make a UI change in a feature branch

​6. Commit and publish your branch

​7. Codespace lifecycle: stopped vs deleted

​Summary

​Links and References

Watch Video

1. Create a Codespace

2. Verify common developer tools

3. Install optional VS Code extensions

4. Preview the app

5. Make a UI change in a feature branch

6. Commit and publish your branch

7. Codespace lifecycle: stopped vs deleted

Summary

Links and References