Version Control
Web Engineering
What is Version
Control?
• A system that records changes to a file
or set of files over time so you can
recall specific versions later
Why is it important?
Tracking
Backup and Experimentation
Collaboration changes and
recovery with branching
history
Key Concepts of Version Control
Repository • A storage space where your project lives (local or remote)
Commit • A snapshot of your changes
Branch • A copy of the codebase where changes are made separately
clone • clone a github repository on local machine
Merge • Combining changes from different branches
Conflict • When changes from different branches overlap and need manual resolution
Tag • A marker for a specific point in the project's history
Types of Version Control Systems (VCS)
Local Version • Example: Backups using file copies
Control
Centralized Version • Example: Subversion (SVN)
• Central server holds all versions
Control (CVCS) • Requires a network connection
Distributed Version • Example: Git
• Every contributor has a full copy of the repository
Control (DVCS) • Works offline
What is Git? GitHub?
• Version control system is a tool that helps to track changes in
code
1. To track history
2. Collaborate
• Github is a website that allows developers to store and manage
their code using git.
• www://[Link]
Why Git?
Free/Open-source and widely used
Distributed model
Handles projects of all sizes
Fast and scalable
Git : Basic Concepts
The Working The Staging Local Remote
Branches Pull Request Merging
Directory Area / Index Repository Repository
• Where you • Where you • Project history • Version of your • Parallel • A way to • Is the process
make changes prepare your stored on your project hosted versions of propose of integrating
to your files changes computer over internet your project changes form the changes
• Like your before one branch to from one
workspace committing another branches into
• Holding the them • It’s a request another
current state to review, creating a
of the project discuss and single unified
possibility history
merge the
changes into
the target
branch often
used in team
collaborations
Git : Basic Steps
• create account on GitHub
• Setup
• Configuration
• working
Git : Basic Steps: Create account
Git : Basic Steps: Setup
Git : Basic Steps: Configuration
Git : Basic Workflow(Git Bash/Terminal)
1 2 3 4 5
Initialize a Add Files Commit Check Status View History
Repository • git add <filename> Changes • git status • git log
• git init or git add • git commit -m
"Message“
Git : Cloning your github project
• Create a folder with name as web-git
• Jump into web-git by using cd web-git
git clone [Link]
Git Status:
four types
• gitconfig
• git config --global [Link] “engrasimjavaid”
• git config --global [Link]
“asimjavaid1986@[Link]”
• git config --list
• git clone
• git checkout -b <new branch name>
Git • git branch
Commands • git switch <branch name>
• git push <remote> <branch-name>
• git pull
• git show
• git branch –d <branch-name>
• git push --delete <remote> <branch-name>
Working with Branches: why Branches?
• Parallel development by multiple developers
• Isolate new features from stable code
• Fix bugs without affecting main branch
• Support experimentation and prototyping
• Enable code review and controlled merging
• Manage releases and hotfixes
• Reduce risk and maintain code stability
Working with Branches
Create a Branch
Create •git branch -b <branch-name>
Switch to a Branch
Switch •git checkout <branch
-name> or git switch <branch-name>
Merge Branches
Merge •git merge <branch-name>
Delete branch
Delete
git branch –d <branch-name>
Working with Branches
(Merging the code)
Remote Repositories Push
Push Changes
Push
• git push
Pull Changes
Pull
• git pull
Clone a Repository
Clone
• git clone <repo-url>
Git : Conflict
• A conflict occurs when Git cannot
automatically merge changes
from different branches or
contributors
• Happens when
• The same file is modified in
two branches
• Changes overlap in the same
lines of code
Steps to Resolve a
Conflict
• Identify Conflicted Files
• Use git status to see which files are in
conflict
• Open the File
• Look for conflict markers
• Manually Resolve the Conflict
• Edit the file to remove conflict markers
and decide what changes to keep
• Mark Conflict as Resolved
• Stage the resolved file
• Complete the Merge
Commit often with meaningful messages
Use branches for new features
Best Practices
for Version Resolve conflicts immediately
Control
Regularly pull updates to stay in sync
Use .gitignore to exclude unnecessary files
What is GitHub?
• GitHub is the platform for developer to
collaborate and to store their code in the
cloud
GitHub
Creating Repositories
Licenses
Git Ignore
Settings
Uploading Files and Folders
Adding code to your repository
Repositories on
GitHub
• Repositories on GitHub can either
be public or private, determining
who can access and view the
code
Public Repositories
A public repository is visible / accessible to everyone
Anyone on the internet can view, clone, and download the code without requiring special
permissions
Common Uses
• Open-source projects where contributions from the community are encouraged
• Sharing reusable code, libraries, or tools
• Hosting portfolios or public documentation
Important to include a license file (e.g., MIT, GPL) to define how others can use the code
Public Repositories: License
• When you add a license file (like MIT or GPL), you are telling
others:
• What they are allowed to do with your code (use, modify, distribute, sell, etc.)
• What they are NOT allowed to do
• Who owns the code
• Whether they must share changes, credit the author, or keep it open-source
• MIT License → Anyone can use/modify the code with attribution
• GPL License → Modifications must also be open-source
• Example:
[Link]
Private Repositories
A private repository is restricted to authorized users only
The code is not visible to the public or search engines
Common Uses
• Proprietary or confidential projects
• Collaborative team projects within organizations
• Experimentation or early-stage development
Only invited collaborators or team members can access the repository
Team members can be assigned different roles (e.g., admin, developer)
Private vs Public Repositories
Git Ignore
.gitignore is a file used by Git to tell it which files and folders should NOT be tracked or
committed to a repository.
In simple words:
“These files exist, but Git should ignore them.”
Example: [Link]
GitHub workflow
Fork
Clone
•git clone
Create Branch
•git checkout –b <branch name>
Add to Staging
•git add .
Commit Changes
•git commit –m “message”
Push to Remote Repository
•git push <remote> <branch name>
Open a PR
Merge PR and delete branch
Update the Local Repository
Fork
• A fork is a personal copy of a remote
repository that allows you to modify the code
without affecting the original project.
• Contribute to open-source projects
• Experiment without risk
• Propose changes via pull requests
• Learn from existing projects
Fork
[Link]
Fork
Fork
Forked Project
[Link]
GitHub Desktop
• A graphical user interface (GUI) application for managing Git
repositories locally and on GitHub
• Simplifies Git workflows with a user-friendly interface
• Beginners or those who prefer GUI-based tools
• Features
• Visualize changes and commits
• Sync with GitHub repositories
• Manage repositories without using terminal commands
• [Link] (Must watch and try)
GitHub Profile
Secure your GitHub Account
• Enable 2FA
Secure • 2FA is an extra layer of security for your GitHub account.
Update you Profile Readme
GitHub allows you to create a special README file that appears on your profile page.
Update
This is different from READMEs in projects — this one is about you, your skills, projects, and
portfolio
What are GitHub Pages?
GitHub Pages is a static site hosting service provided by GitHub that allows
you to publish and host websites directly from your GitHub repository
It is ideal for hosting personal projects, documentation, or portfolio websites
[Link]
Key Features of GitHub Pages
Static Website Free and Automatic Version
Hosting Customizable Deployment Controlled
• Supports • Free for all • Automatically • All site files are
HTML, CSS, GitHub users, publishes version-
JavaScript, and including changes made controlled via
Markdown files custom to the Git, ensuring
• No backend domain repository to easy updates
(server-side) support your GitHub and rollbacks
functionality • Choose from Pages site
templates or
create your
design
How GitHub Pages Work
• Choose a Repository
• You can use an existing repository or create a new one
• Enable GitHub Pages
• Go to the repository’s Settings > Pages section
• Select the branch and folder (e.g., /root or /docs) to serve
the website from
• Deploy the Site
• Push your code (HTML, CSS, etc.) to the selected branch
or directory
• GitHub will automatically build and deploy the website
• Access Your Site
• The site URL is typically
[Link]
Cloud based version
Control systems
• A system that stores and manages
code repositories online.
• Allows developers to collaborate
from anywhere.
• Provides features beyond version
control:
• Issue tracking
• Pull requests / code reviews
• Continuous integration (CI/CD)
• Example: Git repositories hosted
online (like GitHub or GitLab)
Popular Cloud-Based VCS Platforms
1. GitHub
• Most popular platform for open-source
and personal projects.
• Provides pull requests, CI/CD, and
collaboration tools.
2. GitLab
• Supports private repositories for free.
• Offers built-in CI/CD pipelines and
DevOps tools.
3. Bitbucket
• Supports Git and Mercurial repositories.
• Integrates well with Jira and Trello.
The End
Thanks