GitHub Pages

The Big Idea

GitHub Pages turns any GitHub repository into a live website — for free. In this challenge you will fork a starter repo, personalise it, and deploy it to the internet. Once you know how, you can optionally use the same process to deploy your blog too.

⚑ This task is assessed — FND02 Deploy a Static Website Your deployed site must be live at the correct GitHub Pages URL. That URL is part of your assessment evidence. You will submit your links and a screenshot via the Assessment Tracker (AT) — see Submit via AT below.

Your Roadmap

Fork and clone the repo

Fork your cohort's my-collection repo to your own GitHub account: my-collection — select your cohort in the top-right corner of this page to see the link

• Origin: your cohort's my-collection repo
• Destination: https://github.com/YOUR-USERNAME/my-collection

Clone it to your Dev-Academy folder — not inside an existing repo:

Dev-Academy/
  reflections/
  blog/
  my-collection/    ← here

cd Dev-Academy
git clone git@github.com:YOUR-USERNAME/my-collection.git
cd my-collection

Open and run it:

code .
npx vite

Visit http://localhost:5173 to see the starter site.

Make your changes

Decide on a collection to display — favourite movies, books, games, or anything you like.

Before you change anything, read the code first. Open index.html and style.css and work through these questions:

• What HTML tags are being used? Can you name what each one does?
• How is the layout built — flexbox, grid, or something else?
• Where does the box model show up? Find at least one example of padding and one of margin.
• Which CSS selectors are targeting which elements?

If anything is unclear, look it up or ask your chatbot: "Explain what this CSS is doing: [paste the code]"

Then make these changes — all of them:

1. Replace the placeholder content with your own collection
2. Add your own images to the images folder and update the <img> src attributes
3. Add at least one HTML element of your own (e.g. a <p>, a <h3>, a <ul>)
4. Write at least three new CSS rules of your own — not just changing existing values, but adding new ones
5. Make sure the layout still works on a phone screen (check in DevTools)

Keep it functional. All links should work.

Commit as you go:

git add -A
git commit -m "Personalise my-collection"
git push

Deploy with GitHub Pages

1. Go to your my-collection repo on GitHub
2. Click Settings
3. Click Pages in the left sidebar
4. Under Source, select the main branch
5. Click Save

Your site will be live at http://YOUR-USERNAME.github.io/my-collection within a minute or two.

🎉 You just published a real website. Share the link with someone!

Submit via AT

Once your site is live, submit FND02 — Deploy a Static Website in the Assessment Tracker (AT).

Take one screenshot before you submit:

• Your deployed site, live in the browser at http://YOUR-USERNAME.github.io/my-collection

Submit this screenshot, along with a link to your live site and a link to your my-collection repository.

How to know you've nailed it

The Big Idea (revisited)

GitHub Pages turns any GitHub repository into a live website — for free. You now know how to fork a repo, personalise it with your own HTML and CSS, and deploy it to a real URL. This same process works for any static site you build from here on.

Reflect

Open sprint-2/my-reflections-sprint-2.md and add your answers under the GitHub Pages heading.

Stage, commit, and push.