Learn

Lesson 01 / Setup

Developer Environment Setup

Time
43 min
Type
Reading + Practice
Level
Beginner
Use
Core

A step-by-step guide to setting up GitHub, GitHub Desktop, Visual Studio Code, the starter repository, and GitHub Pages.

Course Role

Core

Part of the main course path. Prioritize this before moving to optional polish or deeper references.

See course roadmap Minimum viable paths
Teacher Notes / In-Class Use

Demo Live

  • Create a small throwaway repository live so students see GitHub Desktop, VS Code, commit, push, and Pages as one workflow.
  • Narrate the difference between the local folder, the GitHub repository, and the published website URL.

Try In Class

  • Have students open their project folder in VS Code and confirm they can find the same files in GitHub Desktop.
  • Have students make a tiny homepage text change, commit it, push it, and refresh the live GitHub Pages URL.

Submit Or Check

  • Every student should have a GitHub repo, a local folder, and a live Pages URL before moving on.
  • Ask students to paste their live URL somewhere visible so broken setup can be caught early.

Watch For

  • Students editing the extracted starter ZIP folder instead of the GitHub Desktop repository folder.
  • GitHub Pages publishing from the wrong branch or waiting on the first deploy without refreshing the Pages settings.

Learning Goals

  • Set up a professional-grade web development environment
  • Create and publish a class website repository
  • Deploy the site with GitHub Pages

Step-by-Step Environment Setup for Web Development

This guide walks you through setting up a professional-grade developer environment using GitHub, GitHub Desktop, and Visual Studio Code.

By the end of the lesson, you will be prepared to manage code collaboratively and deploy websites.

1. Create a GitHub Account

Visit GitHub and click "Sign Up" to create your account.

2. Download and Install GitHub Desktop

Visit GitHub Desktop to download the app.

After installation, open Settings, go to the Accounts tab, and sign in with your GitHub credentials.

3. Download Visual Studio Code

Visit the Visual Studio Code download page to download and install the editor.

4. Access Class Demo Repositories

Navigate to the LSU Web Design GitHub organization to browse class demos.

5. Download the Starter Repository

Go to the starter-site-22 repository.

Click the "Code" button, then "Download ZIP." Extract the ZIP file and remember its location.

GitHub repository page for starter-site-22 with the Code button open and Download ZIP highlighted.
Use the Code menu on the starter repository to download the ZIP file for the class starter site.

6. Prepare Your Project Directory

Export the contents of starter-site-22-main.zip.

This folder will be your working website base folder.

7. Create a New Repository in GitHub Desktop

Open GitHub Desktop.

Click File -> New Repository.

Name your site using dashes instead of spaces, such as my-website.

Click "Create Repository."

GitHub Desktop File menu with New Repository highlighted.
Start a new local repository from File -> New Repository in GitHub Desktop.
GitHub Desktop Create a New Repository dialog with my-website entered as the repository name.
Use a simple dashed name, choose the local path carefully, and create the repository.

8. Publish Your Repository

Click "Publish Repository" to make it accessible on GitHub online.

GitHub Desktop showing the Publish repository button in the toolbar and panel.
Publishing sends the local repository to GitHub so it can be shared and later deployed with GitHub Pages.

9. Understanding the GitHub Desktop Interface

  • Open in Visual Studio Code: opens the project in VS Code.
  • Show in Finder: opens the local folder.
  • View on GitHub: opens the GitHub page in the browser.
GitHub Desktop interface with labels for the code editor, project folder, GitHub page, commit summary, and commit button.
GitHub Desktop connects your editor, project folder, GitHub page, and commit workflow in one interface.
GitHub Desktop empty changes screen with the Show in Finder button highlighted.
The Show in Finder button is a fast way to locate the exact project folder on your computer.
GitHub Desktop Repository menu with Show in Finder highlighted.
You can also use Repository -> Show in Finder from the menu bar.

10. Move Starter Files

With both your empty project folder and the extracted starter folder open, copy all starter files into the new GitHub project folder.

11. Commit and Push Changes

Back in GitHub Desktop, verify the file changes listed.

Write a descriptive commit message, then click "Commit to main."

Afterward, click "Push origin" to upload changes to GitHub.

If you have changes and need to find your files, use Repository -> Show in Finder.

12. Enable GitHub Pages

On your GitHub repository page, go to Settings -> Pages.

Under Build and Deployment, set the Branch dropdown to main.

Click "Save."

GitHub repository settings page showing the Pages section and branch dropdown set to main.
In GitHub repository settings, open Pages and choose the main branch as the publishing source.

13. Launch Your Website

Wait a few minutes, then refresh the Pages settings.

A public URL to your live website will appear.

Click "Visit Site" to see your published work.

Congratulations. You now have a fully functioning developer setup and a live website hosted with GitHub Pages.

GitHub Pages settings showing a live published site URL and a Visit site button.
After GitHub Pages finishes deploying, the published site URL appears in the Pages settings.

Checkpoint

Before moving on, make sure these feel true.

  • I can open the correct project folder in VS Code.
  • I can commit and push a small change through GitHub Desktop.
  • I can find and refresh my published GitHub Pages URL.

Project Connection

This lesson supports current class projects.

Project 01 Basic Webpage Create a basic webpage using HTML to practice structure, semantic markup, headings, paragraphs, lists, links, images, and basic styling.

Practice

  • Create your GitHub account.
  • Install GitHub Desktop and Visual Studio Code.
  • Download the class starter repository.
  • Create a new repository in GitHub Desktop.
  • Move the starter files into your project folder.
  • Commit, push, enable GitHub Pages, and open the live URL.

Resources