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 Your deployed site must be live at the correct GitHub Pages URL. That URL is part of your assessment evidence.

Your Roadmap

Section	Time	Required?
Fork and clone the repo	10 min	⚑ Required
Make your changes	2 hours	⚑ Required
Deploy with GitHub Pages	10 min	⚑ Required
Reflect	15 min	⚑ Required

Fork and clone the repo

Fork the my-collection repo to your own GitHub account:

Origin: https://github.com/dev-academy-foundations/my-collection
Destination: https://github.com/YOUR-USERNAME/my-collection

Fork GitHub Repo — **Figure 1:** Fork the repo from the original

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:

Replace the placeholder content with your own collection
Add your own images to the public folder and update the <img> src attributes
Add at least one HTML element of your own (e.g. a <p>, a <h3>, a <ul>)
Write at least three new CSS rules of your own — not just changing existing values, but adding new ones
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

Go to your my-collection repo on GitHub
Click Settings
Click Pages in the left sidebar
Under Source, select the main branch
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!

How to know you've nailed it

	Level	You can...
🪨	Intro Climb	Fork, clone, run the site locally, and explain what the existing HTML and CSS does	⚑ Required
🧗	Core Ascent	Add your own content, a new HTML element, three new CSS rules, and deploy live	⚑ Required
🏔️	Summit	Explain every CSS rule you wrote and why you chose it — and optionally deploy your blog the same way	◎ Optional

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.

DevTools Tutorial

Technical Blog — CSS Concepts