🌿 Git & GitHub: Version Control for Your Website
A one-day, hands-on class. Put the website you built in HTML & CSS under version control, learn to undo anything, work safely on branches, and publish through GitHub so every push updates your live site.
📚 About This Class
Remember about-final-v2-REALLY-final.html? Git ends that. It keeps a complete, searchable history of your project, lets you try risky ideas without fear, and is how nearly every developer and team in the world shares code.
This class is built for people who just finished the HTML & CSS course. You'll use your own website folder as the project all day, working in the same VS Code setup you already know. No terminal experience needed: every command is explained, and you'll see the same steps in VS Code's Source Control panel.
What You'll Be Able to Do by the End of the Day
- Install and configure Git, and explain the working folder → staging area → commit model
- Commit your site in small, well-described snapshots, and ignore files that don't belong
- Read your history, compare versions, and undo mistakes safely (
restore,amend,revert) - Experiment on branches, merge them back, and resolve a merge conflict calmly
- Push to GitHub, pull changes down, and clone a repository
- Connect Netlify to GitHub so every push deploys, and merge your first pull request
Who This Class Is For
- Graduates of HTML & CSS: Build and Publish Your First Website, or anyone with a small website project and VS Code
- Anyone who has been deploying by drag-and-drop and wants a safer, automatic workflow
- Future JavaScript learners: the Front-End JavaScript course assumes you can commit and push
📖 The Day at a Glance
Morning · Module 1: Git on Your Computer
Install and configure Git, turn your site folder into a repository, and learn to look back through history and undo safely.
- Lesson 1: Why Version Control? Installing & Configuring Git · 40 min
- Lesson 2: Your First Repository · 60 min
- Lesson 3: History & Undo · 40 min
Afternoon · Module 2: Branches, GitHub & Deploying
Work on branches and resolve a real conflict, put your site on GitHub, and let Netlify deploy it automatically, starting with your first pull request.
🌟 Going Further: Reference & Practice
Keep these open after class. They go beyond the one-day scope and are there when you need them.
- Git Quick Reference: a one-page cheat sheet
- Git with VS Code: the Source Control panel, Timeline, and GitHub extensions in depth
- Practice Projects: extra hands-on scenarios to build confidence
- Team Workflows: GitHub Flow, code review, CI, and conventions for working with others
- Advanced Git: rebase, stash, bisect, reflog, and other power tools
✅ Before You Start
- A computer where you can install software (Windows, macOS, or Linux)
- VS Code with Live Server, set up in the HTML & CSS course
- Your website folder from the HTML & CSS course (no site yet? any small folder of HTML and CSS files works)
- A free GitHub account (you can create it in Lesson 5) and your Netlify login
🔗 Resources
Reference
- Official Git documentation and the free Pro Git book
- GitHub Docs: Get started
- VS Code: Source Control
- Netlify Docs
Related Courses
- HTML & CSS: Build and Publish Your First Website: the course before this one
- Front-End JavaScript: Make Your Web Pages Come Alive: the course after this one
Support
Questions or feedback? Reach out: