← Resources
Week 2 & 3 – Lab
DESN 368

Week 2 & 3 – Lab

Repo sync, GitHub Codespaces, and Netlify deployment

In-class lab Required
Important

WE DID MOST OF THIS IN CLASS TODAY. IF YOU MISSED CLASS AND/OR NEED A REFRESHER, READ THIS. Follow these steps during class as your instructor demonstrates. You'll submit your final Netlify URL in the assignment after completing all steps.

Step 1: Organize Files on GitHub

Goal: Add your week 1 and week 2 projects to your existing portfolio repository

1A. Navigate to Your Repository

  1. Navigate to your code-design-workspace

1B. Open Codespace (2 min)

  1. Click the green "Code" button
  2. Click the "Codespaces" tab
  3. Click "Create codespace on main" (or "Resume" if you have an existing codespace)
  4. Wait 1-2 minutes for VS Code to load in your browser

1C. Create Folder Structure & Upload Files

We are now going to mimic what we just did locally. In the future I will show you how to work locally and just sync to repo. But for now we are doing things the long math way.

Create your folders:

  1. In the Codespace file explorer (left sidebar) – this should be familiar, Codespaces uses VSCode (Microsoft owns GitHub btw):
    • Right-click in the empty space → "New Folder" → name it week-1
    • Right-click again → "New Folder" → name it week-2

Upload your files:

  1. Open your local file explorer (on your computer) to find the HTML files you created earlier
  2. Drag and drop into Codespace:
    • Drag newspaper.html, lost-pet.html, favorite-band.html into the week-1 folder
    • Drag recipe.html and your recipe image into the week-2 folder

Commit your changes:

  1. Click the Source Control icon in the left sidebar (looks like a branch/fork symbol)
  2. You'll see all your new files listed as changes
  3. !!! This is VERY IMPORTANT !!! If you don't add a commit message it messes things up!!!
    In the message box at the top, type: Add week 1 and 2 projects
  4. Click the blue "Commit" button
  5. Click "Sync Changes" to push your files to GitHub

1D. Verify on GitHub

  1. Go back to your GitHub repository page in another browser tab
  2. Refresh the page
  3. You should now see your week-1/ and week-2/ folders with all your files inside!

Your repository structure should look like this:

code-design-workspace/
├── projects/
├── setup/
├── week-0/
│   ├── about-me.md
├── week-1/
│   ├── newspaper.html
│   ├── lost-pet.html
│   ├── favorite-band.html
│   └── img
│       ├── band-photo.jpg
│       └── pet-photo.jpg
│
└── week-2/
    ├── recipe/
        ├── recipe.html
        └── img
            └── recipe-photo.jpg

Stop Here

WE WILL COMPLETE THIS LAB ON MONDAY OCT 13TH.

Step 2: Create Your Site Index with GitHub Copilot

Goal: Use AI to help create a navigation page for your site

2A. Introduction to GitHub Copilot

What is GitHub Copilot?

Week 2 AI Level: Reference and Validator

Copilot Chat Interface:

2B. Create index.html with Copilot Help

Follow along with your instructor:

  1. Open Copilot Chat (click the chat icon in the left sidebar)
  2. Copy and paste this prompt into Copilot Chat:
Create an index.html file with:
- A heading that says "DESN368 - Code and Design Workspace"
- A paragraph that says "This is the index page for mini-sites developed so far. Eventually this page will transform into my portfolio for the course. Please check back often."
- Navigation links to:
  - week-1/newspaper.html
  - week-1/lost-pet.html
  - week-1/favorite-band.html
  - week-2/recipe.html
  1. Review Copilot's suggestion – it should generate HTML code for you
  2. Create the file:
    • Right-click in your file explorer → "New File"
    • Name it index.html (at the root of your repository, not inside a folder)
  3. Copy Copilot's code into your new index.html file
  4. Save the file (Ctrl+S or Cmd+S)

Your index.html should look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DESN368 - Code and Design Workspace</title>
</head>
<body>
    <h1>DESN368 - Code and Design Workspace</h1>
    <p>This is the index page for mini-sites developed so far. Eventually this page will transform into my portfolio for the course. Please check back often.</p>

    <nav>
        <ul>
            <li><a href="week-1/newspaper.html">Newspaper Article</a></li>
            <li><a href="week-1/lost-pet.html">Lost Pet Poster</a></li>
            <li><a href="week-1/favorite-band.html">Favorite Band Page</a></li>
            <li><a href="week-2/recipe.html">My Favorite Recipe</a></li>
        </ul>
    </nav>
</body>
</html>

Preview your page:

Commit your changes:

Step 3: Deploy with Netlify

Goal: Get a live URL for your portfolio so anyone can see it on the web!

3A. Sign Up for Netlify

  1. Go to https://app.netlify.com
  2. Click "Sign up" and choose "Sign up with GitHub"
  3. Authorize Netlify to access your GitHub account

3B. Import Your Project

  1. Click "Add new site" → "Import an existing project"
  2. Click "Deploy with GitHub"
  3. You may need to authorize Netlify again
  4. Find and select your code-design-workspace repository from the list

3C. Configure & Deploy

  1. Site settings:
    • Site name: auto-generated (you can customize this later)
    • Branch to deploy: main
    • Build command: leave empty
    • Publish directory: leave empty
  2. Click the blue "Deploy site" button
  3. Wait for deployment:
    • Watch the build log (usually takes 30-60 seconds)
    • You'll see "Site is live" when it's ready
    • Your URL will look something like: random-name-123.netlify.app

3D. Test Your Live Site

  1. Click on your live site URL
  2. Navigate through all your pages:
    • Click each link in your navigation menu
    • Make sure all pages load correctly
    • Check that your recipe image displays
  3. Copy your URL – you'll need this for your assignment submission!

🎉 Congratulations! Your site is now live on the internet!

Step 4: Add Netlify Link to your index.html

  1. Go to your GitHub repository page (not Codespace)
    • Navigate to code-design-workspace on GitHub.com
  2. Open your README file:
    • Click on the README.md file (if you don't have one, click "Add file" → "Create new file" and name it README.md)
  3. Edit the README:
    • Click the pencil icon (✏️) to edit
    • Add your Netlify link at the top of the file

Example README content:

# DESN368 - Code and Design Workspace

🌐 **Live Site:** https://your-site-name.netlify.app

This repository contains my weekly projects for DESN368 as I learn HTML, CSS, and web development.
  1. Commit the changes:
    • Scroll down and click "Commit changes"
    • Add commit message: "Add Netlify link to README"
    • Click "Commit changes"
  2. Verify:
    • Your README should now display on your repository homepage
    • The Netlify link should be visible and clickable