GitHub Pages

Learning Competencies

By the end of this, you should be able to:

• Fork an existing repository
• Practice making edits to HTML and CSS
• Understand what GitHub pages are

Summary

Today you'll practice using HTML and CSS to make a website your own, as well as learn how to deploy it live to the internet if you haven't done so already. You'll do so using a service called GitHub Pages. You'll fork a repo, clone it locally, change some files and push it up to GitHub Pages.

Time Box

Introduction

The purpose of the My Collection site is:

• To continue honing your skills in GitHub workflow
• To deploy a simple site to the internet
• To practice HTML and CSS

A functional appearance is what we're aiming for. Try out what you're curious about when it comes to HTML and CSS, make it your own, but don't spend more time than necessary. The goal of this site ultimately is to have something that is functional, it should work as a website. That means all the links actually link somewhere and be available on the internet.

As always, keep your learning objectives in mind and hone your practice. Follow the timebox suggestions and reach out to the community if you feel blocked.

Fork the My Collection Repo

1. Fork the My Collection repository into your own personal GitHub.

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

Destination: https://github.com/YOUR-GITHUB-USERNAME/my-collection

Clone Repo

Important! On your computer, do not clone into an existing repo (e.g. reflections).

Cloning to the same parent directory is fine, for example:

Example: Good
User/Kiri/Dev-Academy/reflections
User/Kiri/Dev-Academy/ko-wai-koe
User/Kiri/Dev-Academy/my-collection

Example: Incorrect
User/Kiri/Dev-Academy/ko-wai-koe/my-collection

1. Navigate to the directory where you want to clone your my-collection repo
2. Clone it

Open the files to work on them

1. Navigate INTO the my-collection repo using cd.
2. Open the whole folder with VS. (code .)
3. In your terminal use npx vite to start the website and view it in your browser at http://localhost:5173

Make your changes

1. Decide what collection you would like to show (favourite movies, books, games?)
2. Make changes to the HTML files (create more if you like!)
3. Use images of your own (you can put them in the 'public' folder and change the <img> tag src attribute to the new filename)
4. Update the style.css CSS file to personalise the colours / design

Commit and Push

1. Commit and Push the changes to your GitHub
2. Navigate to your my-collection repo on GitHub
3. Enter the settings menu for that repo and click on the Pages tab in the left sidebar
4. Under the Source option, select the main branch
5. You can check out your live site by visiting http://[USERNAME].github.io/my-collection

Reflect

Open my-reflections-sprint-1 and answer the questions following GitHub Pages.

Add, commit and push! Share your live collection if you like! http://[USERNAME].github.io/my-collection