> For the complete documentation index, see [llms.txt](https://tbhp.gitbook.io/thebeta/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tbhp.gitbook.io/thebeta/lesson-plans/6.-vercel-and-github.md).

# 7. Vercel & Github

## Lesson objectives

* Students learn git - A source control management system
  * Understand importance of source control
  * Create a github account
  * Do not cover git command line
* Students publish a website live on the internet using vercel

## Lesson time to deliever:

1 sessions, 1.5hrs

## Git

### Importance of source control

Explain benefits of source control

* Backups
* Allows team to collaborate together

Surprisingly hard to teach. Think should split so step by step walk through steps of how to create a repositiory on github

{% hint style="info" %}
Firstly get everyone to signup for github
{% endhint %}

1. **Clone** that repository locally
2. **Add** a file to it
3. **Commit** 
4. Set up stream then **push** to it
5. Then update file in vs code
6. **Stage/Commit** the file commit
7. **Push** it
8. Then update file again/add a new file
9. Repeat same in vscode
10. Then repeat using command line.

These links may help trainers come up with content for the lesson:

* <https://dev.to/tracycss/git-and-github-for-beginners-po3>
* <https://dev.to/ravirajthedeveloper/what-is-git-and-github-and-how-to-use-github-2mb1>
* <https://dev.to/chrisachard/confused-by-git-here-s-a-git-crash-course-to-fix-that-4cmi>
* And this explained the concepts well: <https://rachelcarmena.github.io/2018/12/12/how-to-teach-git.html>
* &#x20;Git Game - <https://learngitbranching.js.org/>

### Vercel

Was dead easy for students to work out by themselves and get it done\
Just point them at vercel website and get them to add github project they just created online

Important points:

* The root of the project must be named index.html otherwise shows folder structure.