DEV Community: zainaboyedeji

The Complete Git Commands Cheat Sheet - Everything You Need to Know

zainaboyedeji — Wed, 19 Feb 2025 19:01:56 +0000

Git is the free and open source distributed version control system that's responsible for everything GitHub-related that happens locally on your computer. This comprehensive cheat sheet features the most important and commonly used Git commands for easy reference.

1. Getting Started & Configuration 🏁

Installation & GUIs

With platform specific installers for Git, GitHub also provides the ease of staying up-to-date with the latest releases of the command line tool while providing a graphical user interface for day-to-day interaction, review, and repository synchronization.

Installation Setup

Configuring user information used across all local repositories:

# Check Git version
git --version

# Set username
git config --global user.name "[name]"

# Set email
git config --global user.email "[email]"

# List all configurations
git config --list

# Enable helpful colorization
git config --global color.ui auto

# Display help documentation
git help

Repository Initialization

# Initialize a new Git repository
git init

# Create repository in specific directory
git init [directory]

# Clone a repository
git clone [url]

# Clone into specific directory
git clone [url] [directory]

# Clone specific branch
git clone --branch [branch_name] [repository_url]

2. Basic Snapshotting 📸

Adding Files

# Add file to staging
git add [file]

# Add all new and changed files
git add .

# Add all files (including deleted)
git add -A

# Interactive staging
git add -p

Committing Changes

# Commit with message
git commit -m "[descriptive message]"

# Add and commit tracked files
git commit -am "[message]"

# Modify most recent commit
git commit --amend

# Amend without changing message
git commit --amend --no-edit

# Create new note
git notes add

# Restore file to last commit
git restore <file>

Status & Differences

# Show modified files
git status

# Show ignored files
git status --ignored

# Show working directory changes
git diff

# Show staged changes
git diff --staged
git diff --cached

# Compare branches
git diff [branch1] [branch2]

# Unstage file
git reset [file]

# Compare with last commit
git diff HEAD

3. Branching and Merging 🌲

Branch Management

# List local branches
git branch

# List all branches
git branch -a

# Create new branch
git branch [branch-name]

# Delete branch locally
git branch -d [branch-name]

# Force delete branch
git branch -D [branch-name]

# Rename branch
git branch -m [old-name] [new-name]

# Switch to branch
git switch -c [branch-name]

Navigation

# Switch branches
git checkout [branch-name]

# Create and switch
git checkout -b [branch-name]

# Switch to last branch
git checkout -

# Check out commit
git checkout [commit-hash]

Merging

# Merge branch
git merge [branch]

# Abort merge
git merge --abort

# Create merge commit
git merge --no-ff [branch]

4. Remote Operations 🌐

Remote Management

# List remote repositories
git remote -v

# Add remote
git remote add [name] [url]

# Remove remote
git remote remove [name]

# Delete file
git rm [file]

# Rename remote
git remote rename [old-name] [new-name]

Syncing

# Fetch branches
git fetch [remote]

# Remove obsolete branches
git fetch --prune

# Fetch and merge
git pull

# Fetch and rebase
git pull --rebase

# Push changes
git push [branch]

# Push and set upstream
git push -u origin [branch]

# Force push
git push --force

5. History and Comparison 📚

Logging

# Show commit history
git log

# One line format
git log --oneline

# Show as graph
git log --graph

# Show with stats
git log --stat -M

# Show file changes by author
git blame [file]

# Compare branch commits
git log branchB..branchA

# Show file history
git log --follow [file]

Inspection

# Show commit details
git show [commit]

# Show current commit hash
git rev-parse HEAD

# Show reference logs
git reflog

# Show object details
git show [SHA]

6. Undoing Changes ↩️

Working Directory

# Discard changes
git checkout -- [file]

# Preview cleanup
git clean -n

# Remove untracked files
git clean -f

# Remove untracked directories
git clean -fd

Staged Changes

# Unstage file
git reset [file]

# Unstage all
git reset

# Reset to commit
git reset --hard [commit]

Commits

# Undo commits
git reset [commit]

# Create undo commit
git revert [commit]

# Revert without commit
git revert --no-commit <commit>

# Soft reset
git reset --soft [commit]

# Hard reset
git reset --hard [commit]

7. Ignoring Patterns 🚫

# Common .gitignore patterns
logs/
*.notes
pattern*/

# Set global ignore file
git config --global core.excludesfile [file]

8. Advanced Operations 🔧

Stashing

# Save changes
git stash

# List stashes
git stash list

# Apply top stash
git stash pop

# Apply without removing
git stash apply

# Remove top stash
git stash drop

# Clear all stashes
git stash clear

Rebasing

# Rebase onto branch
git rebase [branch]

# Interactive rebase
git rebase -i HEAD~[n]

# Abort rebase
git rebase --abort

# Continue rebase
git rebase --continue

# Move file
git mv [existing-path] [new-path]

9. Maintenance and Data Recovery 🛠️

Maintenance

# Check integrity
git fsck

# Clean up repository
git gc

# Remove unreachable objects
git prune

# Verify packed objects
git verify-pack -v .git/objects/pack/pack-*.idx

Recovery

# Expire reflog
git reflog expire --expire=now --all

# Recover commit
git checkout [lost-commit-hash]

# Cherry-pick commit
git cherry-pick [commit]

10. GitHub Specific Commands 🐙

Pull Requests

# Fetch PR
git fetch origin pull/[PR-number]/head:[branch-name]

# Check out PR
git checkout pr/[PR-number]

# Push to PR
git push origin [branch]:[PR-branch]

GitHub CLI

# Create repository
gh repo create

# Create pull request
gh pr create

# Create issue
gh issue create

# Fork repository
gh repo fork

11. Configuration and Info ⚙️

Help and Information

# Get command help
git help [command]

# Alternative help
git [command] --help

# Quick help
git -h

Advanced Configuration

# Set default editor
git config --global core.editor "[editor]"

# Create alias
git config --global alias.[shortcut] "[command]"

# Configure line endings
git config --global core.autocrlf true

# Cache credentials
git config --global credential.helper cache

# Set default branch
git config --global init.defaultBranch main

📖 Glossary

Git: An open-source, distributed version control system that tracks changes in code.
GitHub: A web-based platform for hosting, sharing, and collaborating on Git repositories.
Commit: A snapshot of the entire repository at a given point in time, identified by a unique SHA (hash).
Branch: A movable pointer to a commit, allowing parallel development without affecting the main codebase.
Clone: A local copy of a Git repository, including all commits, branches, and history.
Remote: A shared repository (typically on GitHub) that team members use to push and pull changes.
Fork: A personal copy of someone else's repository on GitHub, allowing independent modifications.
Pull Request (PR): A request to merge changes from one branch into another, often reviewed with comments, tests, and approvals.
HEAD: The current reference point in a Git repository, typically pointing to the latest commit on the active branch.

📚 Resources for Further Learning

Official Resources

Educational Platforms

Additional References

🤝 Contributing

Found this helpful?
Consider sharing it with your network!
If you spot any errors or have suggestions for improvement, feel free to leave a comment below.

Happy coding! 🚀

Git and Github for beginners

zainaboyedeji — Mon, 17 Feb 2025 13:00:48 +0000

Introduction

Git and GitHub are essential tools in modern software development. They allow developers to manage different versions of their code, collaborate effectively, and maintain a streamlined workflow.

What is Git?

Git is a distributed version control system (VCS) that helps developers track changes in their codebase, collaborate efficiently, and manage project versions. The term "distributed" means that each developer has a complete copy of the project repository, allowing them to work independently and merge changes when needed.

Key Features of Git:

Version Control: Track and revert changes in your project.
Collaboration: Multiple developers can work on the same project without conflicts.
Branching & Merging: Developers can create separate branches for features and merge them into the main project.
Offline Access: Work on your code without an internet connection.

What is GitHub?

GitHub is a web-based platform built on Git that provides a space for developers to store, manage, and share code. It enhances Git by offering a graphical interface, project management tools, and collaboration features.

Key Features of GitHub:

Repositories (Repos): Store your project files and history.
Branching & Merging: Create branches for new features and merge them after review.
Pull Requests: Submit code changes for review before merging.
Issues & Project Management: Track bugs and tasks.
GitHub Actions: Automate workflows like testing and deployment.

Other alternatives to GitHub include Bitbucket and Gitlab.

What is Git Bash?

Git Bash is a command-line interface (CLI) that enables interaction with Git. It is especially useful for Windows users as it provides a Unix-like terminal for executing Git commands.

Getting Started with Git and GitHub

1. Installing Git

To start using Git, you need to install it on your local machine.

You can download Git here. Ensure to choose based on your operating system.

2. Setting Up Git

Once installed, configure Git with your name and email:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

This associates your commits with your identity.

3. Creating a GitHub Account

Go to GitHub enter the same email you configured above then click on the Sign up for GitHub button.

4. Creating a Repository on GitHub

a. Log in to GitHub.
b. Click the "+" icon and select New repository.

c. Enter a repository name, a description (optional), and choose the visibility (public or private).

d. Click Create repository.

e. After creating a repository, you are directed to this page.

5. Connecting a Local Repository to GitHub

If you have an existing project, navigate to its directory and initialize Git:

cd /path/to/your/project
git init

Then, connect it to your GitHub repository:

git remote add origin https://github.com/zainaboyedeji/git-github-tutorial.git

6. Uploading Files to GitHub

a. Add all files to the staging area:

   git add .

b. Commit the changes:

   git commit -m "Initial commit"

c. Push to GitHub:

   git push

d. Your new repository will contain your initial commit, just like the screenshot below.

GitHub Flow: A Simple Workflow for Collaboration

a. Create a Branch

git checkout -b feature-branch

This ensures that changes are made separately without affecting the main branch.

b. Make Commits

git add .
git commit -m "Add new feature"

Frequent commits help keep track of changes.

c. Push Your Branch to GitHub

git push origin feature-branch

d. Open a Pull Request

On GitHub, navigate to your repository and open a Pull Request (PR). Add a description and request reviews.

a. Click on the New Pull Request button

b. Select the branch you want to compare against the main branch, then click on 'Create Pull Request' button.

c. Add an appropriate description to your PR explaining the changes made in that branch, then click on the 'Create Pull Request' button.

d. You are then directed to this page, where you can review the changes and click on 'Merge Pull Request' once you're done.

e. You review before merging, ensuring all checks have passed and there are no conflicts.

f. The pull request has been successfully merged.

Advanced Git Features

1. Rebasing

Rebasing moves or combines commits to a new base, making your commit history cleaner.

git rebase main

2. Resolving Merge Conflicts

If conflicts arise when merging, Git will notify you. Open the conflicting files, make necessary changes, then:

git add .
git commit -m "Resolved merge conflict"
git push origin main

3. Forking and Contributing to Open Source

Fork a repository on GitHub.
Clone your forked repo:

   git clone https://github.com/your-username/forked-repo.git

Make changes and push them.
Open a pull request to contribute.

Resources to Learn Git and GitHub

If you want to dive deeper into Git and GitHub, here are some helpful courses and articles:

Git Documentation – Official GitHub documentation to help you get started.
An Ultimate Guide to Git and GitHub – Comprehensive guide on GeeksforGeeks.
Introduction to GitHub – Learn the basics of GitHub.
The Beginner's Guide to Git & GitHub – A beginner-friendly guide from freeCodeCamp.
Git and GitHub for Beginners - Crash Course – A free crash course from freeCodeCamp.
Git Documentation – Official Git documentation for in-depth learning.

Conclusion

Git and GitHub are powerful tools that streamline version control and collaboration. Whether you're working on personal projects or contributing to open-source, mastering Git and GitHub will significantly improve your development workflow.

🤝 Contributing

Found this helpful?
Consider sharing it with your network!
If you spot any errors or have suggestions for improvement, feel free to leave a comment below.

Happy coding! 🚀

A Beginner's Guide to Frontend Development

zainaboyedeji — Thu, 06 Feb 2025 15:43:30 +0000

Entering the tech industry as a frontend developer can be overwhelming, especially when you're unsure of where to start.
Many beginners ask, "Where do I begin? I'm confused!" To address this, I’ve created this step-by-step guide to give you a clear roadmap, helping you navigate your learning journey with confidence.

Understanding Frontend Development

A frontend developer is responsible for designing and building the visual and interactive elements of websites and applications using HTML, CSS, and JavaScript. Their goal is to create a responsive, accessible, and visually appealing interface that users can easily interact with. Everything you see on a website—buttons, menus, animations—is crafted by a frontend developer.

The Role of a Frontend Developer

While not a complete job description, the role of a frontend developer generally includes:

Creating user interfaces that are visually appealing and user-friendly.
Collaborating with designers, backend developers, and project managers to bring a project to life.
Ensuring responsive design across different devices and screen sizes.
Optimizing website performance and accessibility.
Implementing best practices for SEO and security.

Essential Frontend Technologies

One advantage of frontend development is that there are a few core technologies you need to master:

HTML – Defines the structure of a webpage.
CSS – Styles the HTML elements, making the page visually appealing.
JavaScript – Adds interactivity and dynamic behavior to web pages.
TypeScript (optional) – A superset of JavaScript that adds static typing for better code quality.

Additional Skills to Learn

Accessibility – Ensuring web content is usable by people with disabilities.
Version Control (Git & GitHub) – Tracking changes in your code and collaborating with others.
Responsive Design – Making sure websites work on different screen sizes.
User Experience (UX) Principles – Designing intuitive and user-friendly interfaces.
SEO Basics – Understanding how search engines rank web pages.
RESTful APIs – Learning how to fetch data from external sources.
Testing & Debugging – Writing test cases and fixing issues efficiently.
Developer Tools – Using browser dev tools for debugging.
Frontend Frameworks – Learning libraries like React,NextJs, Vue, or Angular.
Web Performance Optimization – Improving loading speed and efficiency.
TypeScript – Enhancing JavaScript with type safety.

Frontend Developer Roadmap

A roadmap serves as a structured guide that outlines the key technologies, tools, and skills needed to become a proficient frontend developer. It helps you track your progress.

Where to Begin?

Start with the basics before diving into advanced concepts:

1. Learn Git & Github

Many beginners underestimate the importance of the command line and Git. While it may seem unnecessary at first, version control and command-line operations become essential in real-world projects. Understanding GitHub early on will help you manage your code efficiently.
Create a GitHub profile now.
You can also check out my Git and Github for beginners
article for a deeper understanding.

2. Master HTML, CSS & JavaScript

If you're completely new, start with the fundamental building blocks:

HTML – Structure of web pages.
CSS – Styling and layout (consider learning CSS frameworks like Tailwind or Bootstrap).
JavaScript – Making web pages interactive.

3. Choose a Frontend Framework

Once you're comfortable with JavaScript, it's time to pick a framework. Popular choices include: React,NextJs,Vue.js,Angular.

React is preferred by many companies (e.g., Meta, Netflix, Uber).

I personally recommend React due to its popularity and vast community support.

After learning the basics of React, focus on state management (Redux, Context API, etc.). As projects grow in complexity, managing application state becomes crucial. Redux and the Context API are commonly used solutions in React applications.

4. Explore TypeScript

Once comfortable with JavaScript, learning TypeScript can improve your code quality and maintainability.

Building Your Portfolio

After mastering the basics and frameworks, start building real projects to showcase your skills. A well-designed portfolio increases your chances of landing a job.

Project Ideas:

A responsive blog website
A weather app using a public API
An e-commerce product listing page
A personal portfolio website
A calculator
A todo-list app

Networking & Continuous Learning

Join Developer Communities:

Contribute to open-source projects on Github.
Participate in forums like Stack Overflow and Dev.to.
Attend meetups and tech conferences.

Stay Updated

Frontend development is constantly evolving. Keep learning by following:

Advanced Frontend Path

Once you have mastered the fundamentals, follow this Frontend Developer Roadmap for advanced learners. This guide outlines the key technologies, tools, and skills you need to become a well-rounded frontend developer.

Image source: roadmap.sh

This Frontend Developer Roadmap is interactive—you can click on nearly every node to get more details and links to learn more. Above is an example screenshot of what the roadmap looks like.

Final Thoughts

Becoming a frontend developer takes time and consistent practice. At first, it might feel overwhelming, but with patience, you'll see progress. The key is building projects, asking for help, and staying persistent.

For more in-depth knowledge, explore these resources:

Git

Git Official Website

HTML

CSS

CSS Framework

Javascript

React

NextJs

NextJS Official Website

Typescript

Typescript Official Website

🤝 Contributing

Found this helpful?
Consider sharing it with your network!
If you spot any errors or have suggestions for improvement, feel free to leave a comment below.

Happy coding! 🚀

DEV Community: zainaboyedeji

The Complete Git Commands Cheat Sheet - Everything You Need to Know

1. Getting Started & Configuration 🏁

Installation & GUIs

Installation Setup

Repository Initialization

2. Basic Snapshotting 📸

Adding Files

Committing Changes

Status & Differences

3. Branching and Merging 🌲

Branch Management

Navigation

Merging

4. Remote Operations 🌐

Remote Management

Syncing

5. History and Comparison 📚

Logging

Inspection

6. Undoing Changes ↩️

Working Directory

Staged Changes

Commits

7. Ignoring Patterns 🚫

8. Advanced Operations 🔧

Stashing

Rebasing

Tags

9. Maintenance and Data Recovery 🛠️

Maintenance

Recovery

10. GitHub Specific Commands 🐙

Pull Requests

GitHub CLI

11. Configuration and Info ⚙️

Help and Information

Advanced Configuration

📖 Glossary

📚 Resources for Further Learning

Official Resources

Educational Platforms

Additional References

🤝 Contributing

Git and Github for beginners

Introduction

What is Git?

Key Features of Git:

What is GitHub?

Key Features of GitHub:

What is Git Bash?

Getting Started with Git and GitHub

1. Installing Git

2. Setting Up Git

3. Creating a GitHub Account

4. Creating a Repository on GitHub

5. Connecting a Local Repository to GitHub

6. Uploading Files to GitHub

GitHub Flow: A Simple Workflow for Collaboration

Advanced Git Features

1. Rebasing

2. Resolving Merge Conflicts

3. Forking and Contributing to Open Source

Resources to Learn Git and GitHub

Conclusion

🤝 Contributing

A Beginner's Guide to Frontend Development

Understanding Frontend Development

The Role of a Frontend Developer

Essential Frontend Technologies

Additional Skills to Learn

Frontend Developer Roadmap

Where to Begin?

1. Learn Git & Github

2. Master HTML, CSS & JavaScript

3. Choose a Frontend Framework

4. Explore TypeScript

Building Your Portfolio

Project Ideas:

Networking & Continuous Learning