Getting Started with github.dev

Getting Started with Your Course Repository

In this course, you will be working with a GitHub repository ("repo") that contains everything you need for both your practice exercises and your course project. GitHub is a free online platform that lets you store and share code, and github.dev is a browser-based editor where you can make changes without installing anything on your computer. Follow the steps below to create your own copy of the course repository and get set up.

Step 1: Create a GitHub account

  1. Go to https://github.com/
  2. Click "Sign up"
  3. Create your account, or click on "Continue with Google"
  4. Follow the prompts to create a free account

The GitHub user account registration interface with text fields for Email, Password, Username, and Region.

Step 2: Copy the Template Repository

  1. Opening the Template: While signed into GitHubg, navigate to the PRDV251 Course Template Repository.
  2. Initializing the Copy: Click the green Use this template button near the top right of the file list, then select Create a new repository.Note: If you don't see this button, ensure you are logged into your GitHub account.

    GitHub repository page for Saylor_PRDV251 showing the Use this template dropdown menu open.

  3. Name Your Project: In the Repository name field, enter a unique name. We recommend: prdv251-portfolio-yourname.
  4. Set Visibility: Ensure the Public radio button is selected.
    • Why? Your repository must be public so that you can use GitHub Pages to host and view your live website later in the course.

      • The "Create a new repository" setup page on GitHub has a customized repository name text input field pre-filled.

  5. Finalize: Leave the "Include all branches" box unchecked (unless specifically instructed otherwise) and click the Create repository button.

Success! GitHub will now generate your new repository. After a few seconds, you will be redirected to your own personal version of the course files.

Step 3: Open your Repository in github.dev

  1. Go to your new repository page on GitHub.
  2. Press the . (period) key on your keyboard.
  3. This opens your repo in github.dev, a web-based version of Visual Studio Code (VS Code).
  4. On the left sidebar (Explorer), you will see one main folder:
    • project/ - your personal portfolio project (this is what will be published online)

Step 4: Preview the Folder Structure

Inside the project/ folder you'll see:

  • index.html - the homepage of your portfolio
  • about.html - an about-me page
  • contact.html - your contact page (to be built over time)
  • project/ - a folder for project subpages
  • assets/css/style.css - the main stylesheet for your site
  • assets/img/ - a place to store images. Note - you will see .keep and test_image.jpg. They are test files that Github uses. No need to do anything with these files. They're tiny. Just leave them.

You will work mainly inside the project/ folder when building your project.

Step 5: Publish your Portfolio with GitHub Pages

  1. Back on your repository page in GitHub, click the Settings tab.
  2. Scroll down to Pages in the left sidebar.
  3. Under Source, select:
    • Branch: main
    • Folder: /(root)
  4. Click Save.
  5. After a minute, GitHub will give you a public URL where your portfolio is live.
    • Example: https://username.github.io/repo-name/
  6. Copy the URL and add "project" to the end
    • Example: https://username.github.io/repo-name/project

You should now be able to see your webpage! From now on, any changes you make in the project/ folder and commit to GitHub will automatically update your live site.

Source: Khalil Abdullah and Saylor University
Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 License.