diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..f84f2ac
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,46 @@
+# Code Guidelines for Static Sites
+
+## Required File Structure
+
+## HTML Standards
+- Use HTML5 doctype and specify language attribute
+- Include charset (UTF-8) and responsive viewport meta tags
+- Place scripts at bottom of body with appropriate defer/async attributes
+- Use semantic elements with proper ARIA attributes where needed
+- Ensure proper heading hierarchy (h1-h6)
+- Include meta description for SEO
+
+## CSS Organization
+Group styles in this order:
+1. Reset/Normalize
+2. CSS Custom Properties (variables)
+3. Base styles
+4. Layout/Grid
+5. Components
+6. Utilities
+7. Media queries
+8. Print styles
+
+## JavaScript Guidelines
+
+- Adhere to JSDoc standards, similar to the below example
+/**
+ * @description Clear description of purpose and behavior
+ * @param {type} name - Description with valid/invalid values
+ * @returns {type} Description of return value/state
+ * @throws {ErrorType} Description of error conditions
+ * @example
+ * // Include multiple examples showing edge cases
+ * functionName(validInput);
+ */
+
+## Code Quality Rules
+- Use consistent naming:
+ - camelCase: JavaScript variables/functions
+ - PascalCase: Classes/Components
+ - kebab-case: CSS classes, file names
+ - SCREAMING_SNAKE_CASE: Constants
+- Implement error boundaries and logging
+- Clean up event listeners and subscriptions
+- Maximum line length: 80 characters
+- Document breaking changes
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..3d974d8
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy to GitHub Pages
+
+on:
+ # Runs on pushes targeting the default branch
+ push:
+ branches: ["main"]
+
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+ group: "pages"
+ cancel-in-progress: false
+
+jobs:
+ # Single deploy job since we're just deploying
+ deploy:
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+ - name: Set up Pages
+ uses: actions/configure-pages@v4
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v3
+ with:
+ # Upload entire repository
+ path: '.'
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v4
diff --git a/README.md b/README.md
index 79f0e6a..529ae92 100644
--- a/README.md
+++ b/README.md
@@ -1,100 +1,123 @@
-# Build Conway's Game of Life with GitHub Copilot
-
-This repository contains a companion walkthrough to the video on
-[Using GitHub Copilot to create Conway's Game of Life][youtube-video].
-You can follow the steps in this repository to achieve a similar result to the video.
-
-In this tutorial, we'll build Conway's Game of Life from scratch using GitHub Copilot
-as our pair programming assistant. This simulation demonstrates how complex patterns
-can emerge from simple rules, making it an interesting project for learning both
-programming concepts and GitHub Copilot's capabilities.
-
-## Getting Started
-
-Before you get started, make sure you have the following:
-
-- [A GitHub account][github-signup]
-- [A GitHub Copilot subscription (or trial)][github-copilot]
-- [Visual Studio Code][visual-studio-code] with the [GitHub Codespaces
- extension][visual-studio-code-codespaces] installed
-
-### Create a New Repository
-
-To get started, you need to [create a fork of this repository][repo-fork].
-Follow these steps:
-
-1. Click the `Fork` button on this repository page.
-
- 
-
-> [!NOTE]
-> This tutorial contains steps to publish your code to GitHub Pages. If you want
-> to follow along with this part, then you should either make your repository public
-> or make sure you have access to a plan that allows private repositories to be
-> published to GitHub Pages.
-
-1. Fill in the repository name and description, and click the `Create fork` button.
-
- 
-
-### Set Up your Development Environment
-
-Now that you have your repository set up, you need to set up your development
-environment. We'll use [Visual Studio Code][visual-studio-code] and
-[GitHub Codespaces][visual-studio-code-codespaces] for this tutorial.
-
-1. Open Visual Studio Code and install the
- [GitHub Codespaces extension][visual-studio-code-codespaces] if you haven't already.
-
-2. Sign in to your GitHub account in Visual Studio Code.
-
-3. Open the Command Palette:
- - On Windows / Linux: Ctrl + Shift + P
- - On macOS: Cmd + Shift + P
-
-4. Type `> Codespaces: Create New Codespace`, and select that option.
-
- 
-
-5. Type in the name of your repository (e.g. `mona/game-of-life-walkthrough`) and
- select it from the list. After that, you will be asked to select an instance
- type for your Codespace.
-
- 
-
-6. This will create a new Codespace for you. It may take a few moments to set up,
- but once it's ready, you'll be able to see the code in your editor.
-
- 
-
-### Next Steps
-
-Now that you have your development environment set up, proceed to
-[Getting Started with GitHub Copilot Chat](docs/1-copilot-chat.md) to begin
-exploring GitHub Copilot's capabilities.
-
-## Table of Contents
-
-1. [Copilot Chat](docs/1-copilot-chat.md)
-2. [Copilot Edits](docs/2-copilot-edits.md)
-3. [Copilot Instructions](docs/3-copilot-instructions.md)
-4. [Using Inline Chat and Slash Commands](docs/4-slash-commands.md)
-5. [README and Copilot Extensions](docs/5-readme-and-extensions.md)
-6. [GitHub Actions and GitHub Pages](docs/6-actions-and-pages.md)
-
-## License
-
-This project is licensed under the MIT License - see
-the [LICENSE](LICENSE) file for details.
+# Conway's Game of Life
+
+This project is an interactive, browser-based simulation of Conway's Game of Life, a cellular automaton devised by the British mathematician John Horton Conway in 1970. It's a zero-player game, meaning its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves.
+
+## Implementation Summary
+
+This implementation is built purely with web technologies:
+- **`index.html`**: Provides the basic structure of the web page, including the canvas element where the game is rendered.
+- **`styles.css`**: Contains all the styling rules, making the simulation full-screen and defining the visual appearance of the cells and background.
+- **`script.js`**: Houses all the logic for the Game of Life, including grid initialization, drawing, applying game rules, and handling responsiveness.
+
+### Key Features:
+- **Responsive Design**: The simulation dynamically adjusts to the browser window size, reinitializing the grid to fit.
+- **GitHub-Themed Colors**: Live cells are colored using a palette inspired by GitHub's contribution graph, with color intensity varying based on the number of live neighbors.
+- **Toroidal Grid**: The grid boundaries wrap around (toroidal array), meaning cells on one edge of the grid consider cells on the opposite edge as their neighbors.
+- **Dynamic Simulation**: The game state updates every 0.5 seconds, allowing observation of evolving patterns.
+- **Standardized Code**: The codebase adheres to guidelines outlined in `.github/copilot-instructions.md`, including JSDoc commenting for JavaScript functions.
+
+## Running the Application
+
+To run the simulation:
+1. Clone or download this repository to your local machine.
+2. Navigate to the project's root directory.
+3. Open the `index.html` file in any modern web browser (e.g., Chrome, Firefox, Safari, Edge).
+
+No build steps or external dependencies are required.
+
+## Code Structure Overview (Conceptual)
+
+The JavaScript code (`script.js`) is organized around several key functions and state variables. Here's a conceptual overview:
+
+```mermaid
+graph TD
+ subgraph "Setup & Configuration"
+ direction LR
+ CELL_SIZE["CELL_SIZE"]
+ NEIGHBOR_COLORS["NEIGHBOR_COLORS"]
+ DEAD_CELL_COLOR["DEAD_CELL_COLOR"]
+ SIMULATION_UPDATE_INTERVAL_MS["SIMULATION_UPDATE_INTERVAL_MS"]
+ RESIZE_DEBOUNCE_MS["RESIZE_DEBOUNCE_MS"]
+ INITIAL_LIVE_CELL_RATIO["INITIAL_LIVE_CELL_RATIO"]
+
+ canvas["canvas DOM Element"]
+ ctx["2D Rendering Context"]
+ end
+
+ subgraph "State Variables"
+ direction LR
+ gridWidth["gridWidth"]
+ gridHeight["gridHeight"]
+ grid["grid (2D Array)"]
+ animationId["animationId"]
+ resizeTimeoutId["resizeTimeoutId"]
+ end
+
+ subgraph "Core Logic & Control Flow"
+ direction TB
+ startSimulation["startSimulation()"]
+ gameLoop["gameLoop()"]
+ updateGrid["updateGrid()"]
+ drawGrid["drawGrid()"]
+ countLiveNeighbors["countLiveNeighbors(x, y)"]
+ initializeGrid["initializeGrid()"]
+ resizeCanvasAndGrid["resizeCanvasAndGrid()"]
+ handleResize["handleResize()"]
+ end
+
+ subgraph "Event Handling"
+ direction TB
+ eventResize["Window: 'resize'"]
+ eventDOMContentLoaded["Document: 'DOMContentLoaded'"]
+ end
+
+ startSimulation --> resizeCanvasAndGrid
+ startSimulation --> initializeGrid
+ startSimulation --> drawGrid
+ startSimulation --> gameLoop
+
+ gameLoop --> updateGrid
+ gameLoop --> drawGrid
+
+ updateGrid --> countLiveNeighbors
+ drawGrid --> countLiveNeighbors
+
+ eventResize --> handleResize
+ handleResize --> startSimulation
+ eventDOMContentLoaded --> startSimulation
+
+ classDef config fill:#fdf,stroke:#333,stroke-width:2px,color:#333;
+ classDef state fill:#ebf,stroke:#333,stroke-width:2px,color:#333;
+ classDef logic fill:#ccf,stroke:#333,stroke-width:2px,color:#333;
+ classDef eventh fill:#cfc,stroke:#333,stroke-width:2px,color:#333;
+
+ class CELL_SIZE,NEIGHBOR_COLORS,DEAD_CELL_COLOR,SIMULATION_UPDATE_INTERVAL_MS,RESIZE_DEBOUNCE_MS,INITIAL_LIVE_CELL_RATIO,canvas,ctx config;
+ class gridWidth,gridHeight,grid,animationId,resizeTimeoutId state;
+ class startSimulation,gameLoop,updateGrid,drawGrid,countLiveNeighbors,initializeGrid,resizeCanvasAndGrid,handleResize logic;
+ class eventResize,eventDOMContentLoaded eventh;
+```
+
+**Explanation of Diagram:**
+- **Setup & Configuration**: Global constants and references to DOM elements defining core parameters and rendering context.
+- **State Variables**: Mutable variables holding the grid dimensions, the grid data structure, and IDs for managing animation and timeouts.
+- **Core Logic & Control Flow**: Functions responsible for the simulation's mechanics, initialization, and dynamic updates.
+ - `startSimulation()`: Orchestrates the setup and initiation of the game loop.
+ - `gameLoop()`: The recurring cycle that updates and redraws the grid.
+ - `updateGrid()`: Applies Conway's rules to determine the next cell states.
+ - `drawGrid()`: Renders the current state of the grid onto the canvas.
+ - `countLiveNeighbors()`: Calculates live neighbors for a cell using toroidal logic.
+ - `initializeGrid()`: Populates the grid with an initial random configuration of cells.
+ - `resizeCanvasAndGrid()`: Adjusts canvas dimensions and grid parameters upon window resize.
+ - `handleResize()`: Manages window resize events, typically debouncing `startSimulation`.
+- **Event Handling**: Listeners for browser/document events that trigger core logic.
## Contributing
-Found a mistake or want to suggest an improvement? Contributions are welcome!
-Submit a Pull Request.
+Contributions are welcome! If you'd like to improve the simulation or add new features:
+1. Fork the repository.
+2. Create a new branch for your changes.
+3. Make your modifications, ensuring they align with the coding standards outlined in `.github/copilot-instructions.md`.
+4. Submit a pull request with a clear description of your changes.
-[github-copilot]: https://github.com/features/copilot
-[github-signup]: https://github.com/join
-[repo-fork]: https://github.com/github-samples/game-of-life-walkthrough/fork
-[visual-studio-code]: https://code.visualstudio.com
-[visual-studio-code-codespaces]: https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces
-[youtube-video]: https://youtu.be/pGV_T6g1hcU
+---
+*This Conway's Game of Life simulation was developed as part of a guided project and has been progressively refined.*
diff --git a/index.html b/index.html
index e69de29..d8cc3d0 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ Conway's Game of Life
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..45855f7
--- /dev/null
+++ b/script.js
@@ -0,0 +1,232 @@
+// Global canvas and context variables
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+// Configuration constants
+const CELL_SIZE = 10;
+const CELL_BORDER_RADIUS = 2;
+const NEIGHBOR_COLORS = [
+ '#9be9a8', // 0-1 neighbor
+ '#40c463', // 2 neighbors
+ '#30a14e', // 3 neighbors
+ '#216e39' // 4+ neighbors
+];
+const DEAD_CELL_COLOR = '#161b22';
+const SIMULATION_UPDATE_INTERVAL_MS = 500;
+const RESIZE_DEBOUNCE_MS = 250;
+const INITIAL_LIVE_CELL_RATIO = 0.25; // (1 - 0.75 from original)
+
+// Mutable global state variables
+let gridWidth, gridHeight;
+let grid; // 2D array representing cell states (0 = dead, 1 = live)
+let animationId; // Stores the ID from setInterval for the game loop
+let resizeTimeoutId; // Stores the ID from setTimeout for debouncing resize
+
+/**
+ * @description Resizes the canvas to fill the window and calculates the
+ * number of cells that fit in the new dimensions.
+ * @returns {void}
+ */
+function resizeCanvasAndGrid() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ gridWidth = Math.floor(canvas.width / CELL_SIZE);
+ gridHeight = Math.floor(canvas.height / CELL_SIZE);
+}
+
+/**
+ * @description Initializes the game grid as a 2D array with random live/dead
+ * cells based on INITIAL_LIVE_CELL_RATIO.
+ * @returns {void}
+ */
+function initializeGrid() {
+ grid = new Array(gridHeight);
+ for (let y = 0; y < gridHeight; y++) {
+ grid[y] = new Array(gridWidth);
+ for (let x = 0; x < gridWidth; x++) {
+ // Math.random() > (1 - 0.25) means Math.random() > 0.75
+ grid[y][x] = Math.random() > (1 - INITIAL_LIVE_CELL_RATIO) ? 1 : 0;
+ }
+ }
+}
+
+/**
+ * @description Counts the number of live neighbors for a given cell.
+ * This function implements toroidal boundary conditions, meaning the
+ * grid wraps around at the edges. For example, a cell at the top
+ * edge of the grid will consider cells at the bottom edge as its
+ * neighbors, and similarly for the left and right edges.
+ * @param {number} x - The x-coordinate (column index) of the cell in the grid.
+ * Must be an integer from 0 to gridWidth - 1.
+ * @param {number} y - The y-coordinate (row index) of the cell in the grid.
+ * Must be an integer from 0 to gridHeight - 1.
+ * @returns {number} The total count of live neighboring cells (0-8).
+ * @example
+ * // Consider a 3x3 grid:
+ * // grid = [
+ * // [1, 0, 1],
+ * // [0, 1, 0],
+ * // [1, 0, 1]
+ * // ];
+ * // gridWidth = 3, gridHeight = 3;
+ *
+ * // For cell (0,0) (top-left, value 1):
+ * // Neighbors are:
+ * // (2,2) (wrap) -> grid[2][2] = 1
+ * // (2,0) (wrap) -> grid[2][0] = 1
+ * // (2,1) (wrap) -> grid[2][1] = 0
+ * // (0,2) (wrap) -> grid[0][2] = 1
+ * // (0,1) -> grid[0][1] = 0
+ * // (1,2) (wrap) -> grid[1][2] = 0
+ * // (1,0) -> grid[1][0] = 0
+ * // (1,1) -> grid[1][1] = 1
+ * // countLiveNeighbors(0,0) would return 4.
+ *
+ * // For cell (1,1) (center, value 1):
+ * // Neighbors are all adjacent cells:
+ * // (0,0), (0,1), (0,2), (1,0), (1,2), (2,0), (2,1), (2,2)
+ * // countLiveNeighbors(1,1) would return 4 (sum of surrounding 1s and 0s).
+ */
+function countLiveNeighbors(x, y) {
+ let count = 0;
+ for (let i = -1; i <= 1; i++) {
+ for (let j = -1; j <= 1; j++) {
+ if (i === 0 && j === 0) continue; // Skip the cell itself
+
+ // Apply toroidal wrap-around logic
+ // (x + j + gridWidth) ensures the result is non-negative before modulo
+ const neighborX = (x + j + gridWidth) % gridWidth;
+ // (y + i + gridHeight) ensures the result is non-negative before modulo
+ const neighborY = (y + i + gridHeight) % gridHeight;
+
+ count += grid[neighborY][neighborX];
+ }
+ }
+ return count;
+}
+
+/**
+ * @description Draws the entire grid of cells onto the canvas.
+ * Live cells are colored based on their number of live neighbors.
+ * Dead cells are drawn with DEAD_CELL_COLOR.
+ * @returns {void}
+ */
+function drawGrid() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ for (let y = 0; y < gridHeight; y++) {
+ for (let x = 0; x < gridWidth; x++) {
+ ctx.beginPath();
+ const cellXPos = x * CELL_SIZE;
+ const cellYPos = y * CELL_SIZE;
+
+ if (ctx.roundRect) {
+ ctx.roundRect(
+ cellXPos, cellYPos,
+ CELL_SIZE, CELL_SIZE,
+ [CELL_BORDER_RADIUS]
+ );
+ } else {
+ // Fallback for browsers not supporting roundRect
+ ctx.rect(cellXPos, cellYPos, CELL_SIZE, CELL_SIZE);
+ }
+
+ if (grid[y][x] === 1) { // If cell is alive
+ const liveNeighbors = countLiveNeighbors(x, y);
+ // Color based on current number of live neighbors
+ if (liveNeighbors <= 1) {
+ ctx.fillStyle = NEIGHBOR_COLORS[0];
+ } else if (liveNeighbors === 2) {
+ ctx.fillStyle = NEIGHBOR_COLORS[1];
+ } else if (liveNeighbors === 3) {
+ ctx.fillStyle = NEIGHBOR_COLORS[2];
+ } else { // 4 or more neighbors
+ ctx.fillStyle = NEIGHBOR_COLORS[3];
+ }
+ } else { // If cell is dead
+ ctx.fillStyle = DEAD_CELL_COLOR;
+ }
+ ctx.fill();
+ }
+ }
+}
+
+/**
+ * @description Updates the grid state for the next generation based on
+ * Conway's Game of Life rules.
+ * @returns {void}
+ */
+function updateGrid() {
+ // Create a deep copy of the grid to base calculations on current state
+ const newGrid = grid.map(arr => [...arr]);
+
+ for (let y = 0; y < gridHeight; y++) {
+ for (let x = 0; x < gridWidth; x++) {
+ const liveNeighbors = countLiveNeighbors(x, y);
+ const cellIsAlive = grid[y][x] === 1;
+
+ if (cellIsAlive) {
+ // Rule 1: Live cell < 2 live neighbors dies (underpopulation).
+ // Rule 3: Live cell > 3 live neighbors dies (overpopulation).
+ if (liveNeighbors < 2 || liveNeighbors > 3) {
+ newGrid[y][x] = 0; // Cell dies
+ }
+ // Rule 2: Live cell with 2 or 3 live neighbors lives on.
+ } else { // Dead cell
+ // Rule 4: Dead cell with 3 live neighbors becomes live (reproduction).
+ if (liveNeighbors === 3) {
+ newGrid[y][x] = 1; // Cell becomes alive
+ }
+ }
+ }
+ }
+ grid = newGrid; // Update the main grid with the new state
+}
+
+/**
+ * @description Main game loop function. Updates the grid and redraws it.
+ * @returns {void}
+ */
+function gameLoop() {
+ updateGrid();
+ drawGrid();
+}
+
+/**
+ * @description Initializes and starts the Game of Life simulation.
+ * Clears any existing simulation interval, sets up the canvas and
+ * grid, draws the initial state, and starts the game loop interval.
+ * @returns {void}
+ */
+function startSimulation() {
+ if (animationId) {
+ clearInterval(animationId);
+ }
+ resizeCanvasAndGrid();
+ initializeGrid();
+ drawGrid(); // Draw initial state immediately
+ animationId = setInterval(gameLoop, SIMULATION_UPDATE_INTERVAL_MS);
+}
+
+/**
+ * @description Handles the window resize event. It debounces the call to
+ * `startSimulation` to prevent frequent restarts during resizing.
+ * @returns {void}
+ */
+function handleResize() {
+ clearTimeout(resizeTimeoutId);
+ resizeTimeoutId = setTimeout(() => {
+ startSimulation(); // Restart simulation with new dimensions
+ }, RESIZE_DEBOUNCE_MS);
+}
+
+// Event Listeners
+window.addEventListener('resize', handleResize);
+
+// Initial Setup
+// Ensures the DOM is fully loaded before starting the simulation.
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', startSimulation);
+} else {
+ startSimulation();
+}
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..fd197d5
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,36 @@
+/* 1. Reset/Normalize */
+body, html {
+ margin: 0;
+ padding: 0;
+ overflow: hidden; /* Prevents scrollbars from appearing due to full-screen canvas */
+ height: 100%;
+ width: 100%;
+}
+
+/* 2. CSS Custom Properties (variables) */
+/* (No custom properties currently used) */
+
+/* 3. Base styles */
+body, html {
+ background-color: #0d1117; /* GitHub dark background */
+ font-family: sans-serif; /* Basic font for potential future text elements */
+}
+
+canvas {
+ display: block; /* Removes extra space below the canvas if it were inline */
+}
+
+/* 4. Layout/Grid */
+/* (Layout is primarily handled by body/html full screen and canvas display:block) */
+
+/* 5. Components */
+/* (No specific components defined) */
+
+/* 6. Utilities */
+/* (No utility classes defined) */
+
+/* 7. Media queries */
+/* (No media queries currently needed as canvas resizes via JavaScript) */
+
+/* 8. Print styles */
+/* (No print styles defined) */
diff --git a/walkthrough-README.md b/walkthrough-README.md
new file mode 100644
index 0000000..79f0e6a
--- /dev/null
+++ b/walkthrough-README.md
@@ -0,0 +1,100 @@
+# Build Conway's Game of Life with GitHub Copilot
+
+This repository contains a companion walkthrough to the video on
+[Using GitHub Copilot to create Conway's Game of Life][youtube-video].
+You can follow the steps in this repository to achieve a similar result to the video.
+
+In this tutorial, we'll build Conway's Game of Life from scratch using GitHub Copilot
+as our pair programming assistant. This simulation demonstrates how complex patterns
+can emerge from simple rules, making it an interesting project for learning both
+programming concepts and GitHub Copilot's capabilities.
+
+## Getting Started
+
+Before you get started, make sure you have the following:
+
+- [A GitHub account][github-signup]
+- [A GitHub Copilot subscription (or trial)][github-copilot]
+- [Visual Studio Code][visual-studio-code] with the [GitHub Codespaces
+ extension][visual-studio-code-codespaces] installed
+
+### Create a New Repository
+
+To get started, you need to [create a fork of this repository][repo-fork].
+Follow these steps:
+
+1. Click the `Fork` button on this repository page.
+
+ 
+
+> [!NOTE]
+> This tutorial contains steps to publish your code to GitHub Pages. If you want
+> to follow along with this part, then you should either make your repository public
+> or make sure you have access to a plan that allows private repositories to be
+> published to GitHub Pages.
+
+1. Fill in the repository name and description, and click the `Create fork` button.
+
+ 
+
+### Set Up your Development Environment
+
+Now that you have your repository set up, you need to set up your development
+environment. We'll use [Visual Studio Code][visual-studio-code] and
+[GitHub Codespaces][visual-studio-code-codespaces] for this tutorial.
+
+1. Open Visual Studio Code and install the
+ [GitHub Codespaces extension][visual-studio-code-codespaces] if you haven't already.
+
+2. Sign in to your GitHub account in Visual Studio Code.
+
+3. Open the Command Palette:
+ - On Windows / Linux: Ctrl + Shift + P
+ - On macOS: Cmd + Shift + P
+
+4. Type `> Codespaces: Create New Codespace`, and select that option.
+
+ 
+
+5. Type in the name of your repository (e.g. `mona/game-of-life-walkthrough`) and
+ select it from the list. After that, you will be asked to select an instance
+ type for your Codespace.
+
+ 
+
+6. This will create a new Codespace for you. It may take a few moments to set up,
+ but once it's ready, you'll be able to see the code in your editor.
+
+ 
+
+### Next Steps
+
+Now that you have your development environment set up, proceed to
+[Getting Started with GitHub Copilot Chat](docs/1-copilot-chat.md) to begin
+exploring GitHub Copilot's capabilities.
+
+## Table of Contents
+
+1. [Copilot Chat](docs/1-copilot-chat.md)
+2. [Copilot Edits](docs/2-copilot-edits.md)
+3. [Copilot Instructions](docs/3-copilot-instructions.md)
+4. [Using Inline Chat and Slash Commands](docs/4-slash-commands.md)
+5. [README and Copilot Extensions](docs/5-readme-and-extensions.md)
+6. [GitHub Actions and GitHub Pages](docs/6-actions-and-pages.md)
+
+## License
+
+This project is licensed under the MIT License - see
+the [LICENSE](LICENSE) file for details.
+
+## Contributing
+
+Found a mistake or want to suggest an improvement? Contributions are welcome!
+Submit a Pull Request.
+
+[github-copilot]: https://github.com/features/copilot
+[github-signup]: https://github.com/join
+[repo-fork]: https://github.com/github-samples/game-of-life-walkthrough/fork
+[visual-studio-code]: https://code.visualstudio.com
+[visual-studio-code-codespaces]: https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces
+[youtube-video]: https://youtu.be/pGV_T6g1hcU