Week 5: Comprehensive Version Control with Git (Full 3-Hour Content)

"Welcome back, everyone! Before we dive into Git, let’s quickly recap what we learned last
week about managing state and event handling in React. This will help us understand how
collaborative tools like Git enhance the development process by keeping track of changes when
working with dynamic applications."

Recap of Week 4:

1. useState Hook:
○ We explored the useState hook to manage dynamic data within components.
○ Example: Tracking button clicks or toggling visibility with state variables.
2. Building Interactive Components:
○ Hands-on example: A counter that increases its value every time a button is
clicked.
○ Dynamic content management like toggle states and user inputs.
3. Event Handling in React:
○ Discussed capturing user interactions (e.g., form inputs) and updating state in
real time.
○ Example: A greeting form dynamically updates the user’s name as they type.
4. To-Do List Activity:
○ We built a to-do list to demonstrate the use of useState with arrays,
showcasing how to add, track, and display items dynamically.

"These concepts highlighted how to manage changes and respond to user inputs effectively. If
you have questions about last week’s material, feel free to ask before we proceed."

Revisit Week 2: Advanced CSS Techniques (20 Minutes)

Instructor Script:
"In Week 2, we explored basic CSS concepts, including selectors and the box model. Let’s now
delve deeper into some advanced CSS techniques essential for modern frontend development."

1. The Box Model (Detailed Explanation)

The box model consists of:

● Content: The actual content inside the element (e.g., text or

images).
● Padding: Space between the content and the border.
 ● Border: The outline surrounding the padding (can be styled).
● Margin: Space outside the border, separating the element from
others.

Practical Example:
Imagine creating a button with spacing and a border:

css

Copy code

button {

margin: 10px; /* Space outside the button */

padding: 15px; /* Space inside the button */

border: 2px solid black; /* Border surrounding the button */

Html code :

<link rel="stylesheet" href="[Link]">

<button>Click Me!</button>

This helps ensure proper spacing and alignment in your layout.

2. CSS Positioning (Expanded Examples)

Positioning Modes Explained:

● Static: Default; elements follow the document flow.

● Relative: Offsets the element relative to its normal position.
● Absolute: Removed from the flow and positioned relative to the nearest ancestor with a
position other than static.
● Fixed: Anchored to the viewport, unaffected by scrolling.

Example:
 css

Copy code

● div {
● position: relative;
● top: 10px; /* Moves the element 10px down */
● left: 20px; /* Moves the element 20px to the right */
● }

Html Code:

<link rel="stylesheet" href="[Link]"> <!-- Link to the external CSS file -->

<div>This is a positioned div.</div> <!-- Div element that will be styled -->

Useful for creating tooltips, modals, or sticky headers.

3. Flexbox (Detailed Usage)

Flexbox provides a powerful way to arrange items in one direction (row

or column).

Key Properties:

● display: flex; Activates Flexbox on a container.

● justify-content: Aligns items along the main axis.
○ Options: flex-start, center, space-between.
● align-items: Aligns items along the cross axis.
○ Options: stretch, center.

Example: Center a navigation menu horizontally:

css

Copy code
.nav {

display: flex;

justify-content: center;

align-items: center;

HTML Code:

<link rel="stylesheet" href="[Link]">

<div class="nav"><button>Click Me!</button></div>

4. Grid Layout (Advanced Use Cases)

CSS Grid allows for creating complex layouts with rows and columns.

Key Features:

● grid-template-rows and grid-template-columns: Define row and column sizes.

● grid-gap: Adds spacing between grid items.
● grid-area: Assigns a specific area to an item.

Example: Creating a webpage structure:

css

Copy code

.container {

display: grid;

grid-template-rows: 100px auto 50px;

grid-template-columns: 1fr 2fr;

gap: 20px;
}

.header {

grid-column: span 2; /* Header spans both columns */

HTML Code:

<link rel="stylesheet" href="[Link]"> <!-- Link to the external

CSS file -->

<div class="container">

<div class="header">Header Content</div>

<div>Content 1</div>

<div>Content 2</div>

</div> <!-- Container with the grid layout -->

This structure is ideal for dashboards or responsive designs.

Part 1: Understanding Git and Its Importance (40 Minutes)

Instructor Script:
"Git is a distributed version control system that tracks changes in your files and manages the
evolution of a project. It’s essential for team projects, but it’s just as valuable when working solo
to ensure nothing is lost."

Git is a tool to track changes across versions of your project files.

It’s distributed, meaning each team member has a full copy of the project history.

Why Use Git?

1. Version Tracking: A clear history of changes.

 2. Collaboration: Enables teams to work on the same codebase.
3. Code Recovery: Safely revert to earlier versions if needed.
4. Experimentation: Test features safely using branches.

Interactive Activity 1:

● Question: Why is version control vital for teams?

● Possible Answers:
○ Prevents overwriting code.
○ Resolves conflicts.
○ Tracks individual contributions.

Hands-On Task:

● Create a folder and initialize it with Git.

Solution:
bash
Copy code
mkdir project-folder

cd project-folder

git init

echo "Hello, Git!" > [Link]

git add [Link]

git commit -m "Initial commit: Add [Link]"

Part 2: Core Git Commands (50 Minutes)

Instructor Script:
"Git’s commands form the foundation of version control. Let’s explore the most frequently used
commands and their purposes."

Commands and Explanations:

Initialize a Repository:
bash
Copy code
git init

1. Creates a new Git repository.

Add Files to Staging:

bash
Copy code
git add <file>

2. Prepares files for the next commit.

Commit Changes:
bash
Copy code
git commit -m "Message"

3. Records a snapshot of changes.

Check Repository Status:

bash
Copy code
git status

4. Displays changes in the working directory.

View Commit History:

bash
Copy code
git log

5. Shows commit history and details.

Interactive Activity 2:

● Task: Create and commit a file.

Solution:
bash
Copy code
mkdir git-basics

cd git-basics

git init
echo "Version Control 101" > [Link]

git add [Link]

git commit -m "Add initial notes"

Discussion Prompt: Why is it important to write clear commit messages?

● Expected Answers:
○ Helps others understand changes.
○ Simplifies debugging and project management.

Part 3: Collaborating with GitHub (50 Minutes)

Instructor Script:
"GitHub is a cloud-based platform for hosting Git repositories. It’s an essential tool for
collaboration in modern development workflows."

Steps to Use GitHub:

1. Create a Repository on GitHub:

○ Visit GitHub and create a new repository.

Link Local Repository to GitHub:

bash
Copy code
git remote add origin <repository-url>

git push -u origin main

2.

Clone a Repository:
bash
Copy code
git clone <repository-url>

3.

Interactive Activity 3:

● Task: Push your local repository to GitHub and clone a classmate’s repository.
 ● Solution:

Push:
bash
Copy code
git remote add origin [Link]

git branch -M main

git push -u origin main

Clone:
bash
Copy code
git clone [Link]

cd repository

Part 4: Branching and Merging (50 Minutes)

Instructor Script:
"Branches are used to work on new features without affecting the main codebase. Once ready,
the changes can be merged back."

Commands for Branching:

Create a Branch:
bash
Copy code
git branch <branch-name>

git checkout <branch-name>

1.

Merge a Branch:
bash
Copy code
git checkout main
git merge <branch-name>

2.

Delete a Branch:
bash
Copy code
git branch -d <branch-name>

3.

Interactive Activity 4:

● Task: Create and merge a branch for a new feature.

Solution:
bash
Copy code
git branch new-feature

git checkout new-feature

echo "New feature content" > [Link]

git add [Link]

git commit -m "Add new feature"

git checkout main

git merge new-feature

git branch -d new-feature

Conclusion and Homework (30 Minutes)

Instructor Script:
"Today, we covered Git fundamentals, collaboration using GitHub, and branching workflows.
These are critical skills for effective teamwork and project management in software
development."

Homework:
 1. Push an existing project to GitHub and create a descriptive README.
2. Simulate a project workflow by creating branches, committing changes, and merging
them.
3. Share your GitHub repository link with a classmate for peer review.

Introduction to Assignment:

"Before we conclude today’s session, I would like to introduce your new project
assignment: the Event Management System. This assignment will incorporate all the
skills we've learned over the past few weeks and will give you hands-on experience with
full-stack development. In this project, you will build an application that allows users to
manage and register for events, with features like real-time notifications, dynamic event
listings, and an admin dashboard.

How the Concepts from Weeks 1 to 5 Apply:

1. HTML, CSS, and JavaScript Fundamentals (Week 1):

You will create and style the pages for listing events, user registration, and admin views
using HTML and CSS. JavaScript will handle dynamic behaviors such as form validation
and event filtering.
2. Advanced CSS Techniques (Week 2):
The CSS Box Model, Flexbox, and CSS Grid will help you layout the event listings and
admin dashboard, while positioning techniques will be useful for fixed navigation bars
and modal windows.
3. React Basics (Week 3):
React will be used for building the UI components of the application, including the event
listing page, registration form, and user dashboard. You’ll use JSX to render dynamic
content and make the app interactive.
4. Managing State and Event Handling (Week 4):
You’ll use useState to manage dynamic data such as user registrations and event
details. Event handling will be essential for actions like registering for events, filtering
event lists, and updating user information.
5. Version Control with Git (Week 5):
Throughout the project, you will use Git to manage your codebase, create branches for
new features, and push updates to GitHub. Version control will help you track your
progress and collaborate with teammates.

Assignment Overview:

The Event Management System will have the following core features:

● User Roles: Admins can manage events and registrations, while users can browse and
register for events.
 ● Event Listings: Create and display events with details such as the title, description, and
date.
● Registration System: Users can register for events and receive email notifications upon
registration.
● Admin Dashboard: Admins can view analytics and manage user registrations.
● Real-Time Notifications: Use [Link] to send real-time alerts for event updates and
registration status.

This project will help you practice and demonstrate your skills in full-stack development,
including React, [Link]/Express, MongoDB, and real-time communication.

Next Steps:

● Start the project by setting up your Git repository and building the basic React
components.
● Develop the backend to handle event data and user registrations with [Link] and
MongoDB.
● Use Git for version control throughout the process, pushing your changes to GitHub
regularly.

Conclusion and Homework:

As you begin this project, you will apply everything we’ve covered so far to create a full-stack
application that simulates a real-world system. Take your time with the setup and development
stages, and feel free to ask questions as you work through the process.

Preview for Week 5:

"Next week, we’ll explore backend development using [Link] and Express. You’ll learn how to
create servers, handle routing, and integrate with databases—an exciting step toward full-stack
development."