← Week 3
DESN 368

GitHub Pages // Your Learning Log

Week 3 · Homework · 30 pts

README vs. index.html

Remember from Assignment 2 — your project has two front doors:

  • Your README.md is the front door for GitHub — people see it when they visit your repo.
  • Your index.html is the front door for the web — people see it when they visit your site.
  • Same project, two doors, two audiences.
  • Right now your repo has a README (from Assignment 2). Now you're building the website version.
Step 1

Create Your Files

  1. Open your repo in Codespaces.
  2. In the root of your repo (not inside any week folder), create a new file: index.html
  3. Create a new folder in the root: styles/
  4. Inside styles/, create a new file: style.css

Your updated folder structure should look like this:

your-repo/
├── week-1/
├── week-2/
├── week-3/
├── styles/
│   └── style.css
├── index.html        ← NEW
└── README.md
Done When

You have index.html at the root and styles/style.css in place.

Step 2

Ask Copilot to Build Your Scaffold

  1. Open Copilot Chat in Codespaces.
  2. Give Copilot this prompt:
Look at my repo's folder structure. I need you to create an index.html
that serves as my learning log / portfolio page.

Requirements:
- Link to styles/style.css in the <head>
- Add a <h1> with a title for my page (something like "My Learning Log"
  or "My Web Design Journey" — make it personal)
- Add an <h2> for "Week 1" with links to each HTML file in my week-1/ folder
- Add an <h2> for "Week 2" with links to each HTML file in my week-2/ folder
  (including the html-101/ subfolder files)
- Add an <h2> for "Week 3" (can be empty for now — I'll add to it)
- If a file doesn't exist yet, add a placeholder link with the text
  "(coming soon)" next to it
- Keep it simple and clean — no frameworks, just semantic HTML

Also add some basic styles to styles/style.css:
- A readable font (system font stack is fine)
- Some padding and max-width for readability
- Style the links so they look clickable
- Simple, clean — nothing fancy
  1. Review what Copilot generates — make sure the links point to the right files.
  2. Customize the <h1> title — make it yours.
  3. Check each link path: ./week-1/newspaper.html should match the actual file names you created in the Setup Lab.
Info

Copilot builds the scaffold. You verify the links and make it personal. The links use relative paths — ./week-1/newspaper.html means “in the week-1 folder next to this file, open newspaper.html.” This is how files find each other on the web.

Done When

Your index.html has a title, week sections, and links to your work files. styles/style.css has basic styling applied.

Step 3

Fix Placeholder Links

Some of your links might point to files that don't exist yet (you didn't finish a CodePen, or you skipped one). That's fine!

For any missing files, either:

  • Add “(coming soon)” text next to the link
  • Or create a simple placeholder HTML file in the correct location with just a heading saying what will go there

Example placeholder:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lost Pet Flyer</title>
</head>
<body>
  <h1>Lost Pet Flyer</h1>
  <p>Coming soon — will be migrated from CodePen.</p>
</body>
</html>
Done When

Every link in your index.html either points to a real file or has a clear placeholder.

Step 4

Commit and Push Before You Deploy

Important

GitHub Pages deploys from what’s on GitHub, not what’s in Codespaces. If you don’t push first, your site will be empty or outdated.

Same workflow from the Setup Lab:

  1. Open Source Control (Ctrl+Shift+G / Cmd+Shift+G)
  2. Click + next to “Changes” to stage all files
  3. Commit message: Add learning log index.html and styles
  4. Click the checkmark (✓) to commit
  5. Click Sync Changes to push to GitHub
Done When

You can see your index.html and styles/ folder on GitHub.com. Now you’re ready to deploy.

Step 5

Deploy with GitHub Pages

  1. Go to your GitHub repo in a browser (not Codespaces — the actual repo page).
  2. Click Settings (gear icon, top menu bar).
  3. In the left sidebar, scroll down and click Pages.
  4. Under Source, select Deploy from a branch.
  5. Under Branch, select main and / (root).
  6. Click Save.
  7. Wait 1–2 minutes for GitHub to build your site.
  8. Refresh the page — you'll see a URL like: https://yourusername.github.io/your-repo-name/
Your Site Is Live

This URL is yours. Anyone with the link can see your work. Click through your links to make sure they work.

Done When

Your GitHub Pages URL loads your learning log page, and at least some of the links navigate to your actual work files.

Step 6

Verify Your Links

  1. Visit your GitHub Pages URL.
  2. Click each link under Week 1 and Week 2.
  3. Each link should open the HTML file in the browser.
  4. If a link is broken (404 error), go back to Codespaces and check:
  • Is the file name spelled correctly?
  • Is the path correct? (./week-1/newspaper.html — does it match?)
  • Did you commit and push the latest changes?

Submission

Submit your GitHub Pages URL (e.g., https://yourusername.github.io/your-repo-name/)

Your page should show your learning log with working links to your Week 1 and Week 2 projects.