Git & GitHub Basics

What is Git?

Git is a version control system that lets you track changes to files and collaborate with others.

What is GitHub?

GitHub is an online platform to store and collaborate on Git repositories.

Keywords:

• Repository (Repo): A folder that contains your project files and the version history tracked by Git.
• Commit: A snapshot of your changes saved with a message describing what you changed.
• Branch: A parallel version of your repository, used to work on features separately before merging them into the main code.
• Merge: Combining changes from one branch into another (often into main).
• Clone: A copy of a remote repository downloaded to your local machine.
• Push: Upload your committed changes to GitHub.
• Pull: Download the latest changes from GitHub to your local machine.
• Fork: Make your own copy of someone else’s repository on GitHub (often used for contributing).
• Pull Request (PR): A request to merge your changes into another branch or repository; used for code reviews.
• README: A file (usually README.md) that explains the project — what it is, how to install/use it, etc.

Basic Commands

                git init                    # Start a new Git repository
                git add .                   # Add all files to staging
                git commit -m "Message"     # Save changes with a message
                git push                    # Upload to GitHub (after setup)
            

Workflow

1. Create Repository on GitHub
2. Clone to your computer
3. Make changes → add → commit → push

Example Screenshot (Placeholder)

Demo

Lets make a repository to house all of the session code and make some branches and talk about each one of these definitions and processes

This is going to be a change that I will commit to show how PR's pushes and changes all relate

What is the DOM?

The Document Object Model (DOM) represents the HTML content of a page as a tree of objects that JavaScript can access and modify.

HTML → DOM → JavaScript

<h1>Hello</h1> → document.querySelector("h1")

Common DOM Methods

• document.getElementById()
• document.querySelector()
• element.textContent = "New text"
• element.style.color = "red"

Example Code

                // HTML CODE
                <h1 id="title">Welcome</h1>

                // JAVASCRIPT CODE
                const title = document.getElementById("title");
                title.textContent = "Hello, DOM!";
                title.style.color = "blue";
            

DEMO

Howdy Partner!

Demo: Color Picker

We’re going to build a color picker that updates the entire background color of the page.

Let’s Build It Together!