## 1. Project Overview & Quickstart (sadanandpai/frontend-learning-kit)

Frontend Learning Kit

> [!IMPORTANT] > **Explore our curated collection of AI resources and start your journey into AI Engineering with the [AI Learning Kit](https://github.com/sadanandpai/ai-learning-kit)** > Become a better software engineer by working on projects that actually challenge you at [CodeCrafters](https://app.codecrafters.io/join?via=sadanandpai) --- **πŸ’‘ How to use this guide** This is a curated toolkit, not a rigid curriculum. While structured in a logical sequence, feel free to jump to any topic that fits your goals. Explore resources that match your background and learning style β€” one may be enough, or you might need to combine several based on your objectives. **Resource Types:** > πŸ“ Roadmap   πŸ“— Free Text/Book   πŸ“˜ Paid Text/Book   πŸŽ₯ Free/Paid Video/Course   πŸ“ Repository   πŸš‰ Practice Platform ## πŸ—ΊοΈ Roadmaps - πŸ“  [Road Map](https://roadmap.sh/frontend) - Comprehensive visual guide to frontend paths ## 🧱 HTML - πŸ“—  [MDN HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) - The authoritative reference for HTML elements and attributes - πŸ“—  [W3 Schools](https://www.w3schools.com/html/) - Beginner-friendly, interactive HTML tutorials and examples - πŸ“—  [HTML Tutorial](https://www.scaler.com/topics/html/) - Structured lessons on HTML fundamentals - πŸŽ₯  [Complete Guide to HTML](https://www.udemy.com/course/the-complete-guide-to-html/) - Comprehensive course covering HTML from scratch ## 🎨 CSS - πŸ“—  [MDN CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) - The official and exhaustive reference documentation for CSS - πŸ“—  [Web Dev](https://web.dev/learn/css/) - An evergreen CSS course and reference by Google - πŸŽ₯  [CSS Complete Guide - Udemy](https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/) - Top-rated course covering CSS, Flexbox, Grid, and Sass - πŸ“˜  [CSS for JS developers](https://css-for-js.dev/) - A premium course to help JS devs master CSS deeply ## ✨ Advanced CSS - πŸ“˜  [Debugging CSS](https://debuggingcss.com/) - Learn how to systematically diagnose and fix CSS issues - πŸŽ₯  [CSS Demystified](https://cssdemystified.com/) - A course to demystify complex CSS concepts and behaviors - πŸŽ₯  [Advanced CSS](https://www.udemy.com/course/advanced-css-and-sass/) - Deep dive into advanced CSS, Sass, Flexbox, Grid, and animations ## 🟑 JavaScript - πŸŽ₯  [Complete JavaScript](https://www.udemy.com/course/the-complete-javascript-course/) - One of the best-selling comprehensive JS courses - πŸ“—  [Eloquent JavaScript](https://eloquentjavascript.net/) - A deeply respected, free online book on JavaScript programming - πŸ“—  [JavaScript Info](https://javascript.info/) - The modern JavaScript tutorial, from basics to advanced topics - πŸ“—  [MDN JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - The ultimate canonical reference documentation for JavaScript - πŸ“—  [JavaScript Tutorial](https://www.javascripttutorial.net/) - Step-by-step tutorials to master modern JavaScript - πŸ“˜  [JavaScript for Impatient Programmers](https://exploringjs.com/impatient-js/toc.html) - A quick, deep guide to JS for those who already know how to code - πŸ“˜  [Just Javascript](https://justjavascript.com/) - A mental model approach to understanding JavaScript deeply by Dan Abramov ## 🧠 Advanced JavaScript - πŸ“—  [You don't know JS](https://github.com/getify/You-Dont-Know-JS) - An iconic book series diving deep into core JS mechanisms - πŸ“—  [Secrets of the JavaScript Ninja](https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition) - Advanced techniques and best practices for JS mastery - πŸ“˜  [Deep JavaScript](https://exploringjs.com/deep-js/toc.html) - Exploring advanced JS concepts and edge cases - πŸ“˜  [Professional JavaScript for Web developers](https://www.oreilly.com/library/view/professional-javascript-for/9781119366447/) - A comprehensive guide to building robust web applications - πŸŽ₯  [Deep JavaScript Foundations](https://frontendmasters.com/courses/deep-javascript-v3/) - Kyle Simpson's thorough exploration of core JS behavior - πŸŽ₯  [JavaScript Hard Parts](https://frontendmasters.com/courses/javascript-hard-parts-v3/) - Master callbacks, closures, and the event loop with Will Sentance - πŸŽ₯  [JavaScript: Understanding the Weird Parts](https://www.udemy.com/course/understand-javascript/) - Learn how JavaScript works under the hood ## πŸ”· TypeScript - πŸ“—  [TypeScript Deepdive](https://basarat.gitbook.io/typescript/) - A free, open-source advanced guide to TypeScript - πŸ“—  [Tackling TypeScript](https://exploringjs.com/ts/) - A comprehensive book on upgrading from JavaScript to TypeScript - πŸ“—  [TypeScript Tutorial](https://www.typescripttutorial.net/) - Step-by-step TS tutorials from basics to advanced - πŸ“—  [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) - The official starting point for learning TypeScript - πŸ“˜  [Programming TypeScript](https://www.oreilly.com/library/view/programming-typescript/9781492037644/) - O'Reilly's definitive guide to building complex apps with TS - πŸŽ₯  [Understanding TypeScript](https://www.udemy.com/course/understanding-typescript/) - A top-rated Udemy course by Maximilian SchwarzmΓΌller - πŸŽ₯  [TypeScript Course by ui.dev](https://ui.dev/typescript/) - An interactive course to master TypeScript conceptually - πŸŽ₯  [Total TypeScript](https://www.totaltypescript.com/) - The ultimate, interactive masterclass for TypeScript by Matt Pocock ## βš›οΈ React - πŸ“—  [React Dev](https://react.dev/) - Official, modern documentation and interactive guides for React - πŸŽ₯  [React - The Complete Guide](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) - Max's comprehensive guide covering Hooks, Redux, Next.js - πŸŽ₯  [Ultimate React](https://www.udemy.com/course/the-ultimate-react-course/) - A massive, project-based React course by Jonas Schmedtmann - πŸŽ₯  [Joy of React](https://www.joyofreact.com/) - Interactive, premium course to learn React visually by Josh W. Comeau - πŸŽ₯  [Scrimba - Learn React for free interactively](https://scrimba.com/learn/learnreact) - An excellent interactive environment for learning React basics ## πŸ“ React Repositories - πŸ“  [React TypeScript Cheatsheet](https://github.com/typescript-cheatsheets/react) - Essential cheatsheets for migrating and using React with TypeScript - πŸ“  [React code base as visual block](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS) - Deep dive into React's internal architecture visually - πŸ“  [Bulletproof React](https://github.com/alan2207/bulletproof-react) - Scalable patterns and best practices for enterprise React apps ## πŸ› οΈ Frameworks & Libraries - πŸŽ₯  [NextJS](https://www.udemy.com/course/nextjs-react-the-complete-guide/) - Comprehensive course for React's most popular full-stack framework - πŸŽ₯  [Angular](https://www.udemy.com/course/the-complete-guide-to-angular-2/) - Maximilian's top-rated, complete guide to Angular - πŸŽ₯  [Vue:Complete guide](https://www.udemy.com/course/vuejs-2-the-complete-guide/) - Master Vue.js and the composition API - πŸŽ₯  [Sveltejs: Complete Guide](https://www.udemy.com/course/sveltejs-the-complete-guide/) - Build highly reactive, compiled frontend applications ## πŸ•ΈοΈ GraphQL - πŸŽ₯  [Apollo GraphQL](https://www.apollographql.com/tutorials/browse?certifications=apollo-graph-associate) - Official tutorials to master the Apollo GraphQL ecosystem - πŸŽ₯  [GraphQL Course for Beginners](https://www.youtube.com/watch?v=5199E50O7SI) - A free crash course on using GraphQL APIs ## 🌐 HTTP & Web Standards - πŸ“—  [MDN HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) - Comprehensive reference for HTTP concepts and headers - πŸ“˜  [HTTP2 in Action](https://livebook.manning.com/book/http2-in-action/about-this-book/) - Practical guide to optimizing speed using HTTP/2 ## 🌳 Git & Version Control - πŸ“—  [Become a git guru](https://www.atlassian.com/git/tutorials) - Atlassian's thorough tutorials on Git workflows - πŸ“—  [Pro Git](https://git-scm.com/book/en/v2) - The official, complete reference book for everything Git - πŸ“  [Practical Git Guide](https://github.com/sadanandpai/git-guide) - A concise, practical cheat sheet and guide for Git ## ⚑ Web Performance - πŸ“—  [MDN Performance](https://developer.mozilla.org/en-US/docs/Learn/Performance) - Mozilla's guides on measuring and improving web performance - πŸ“—  [Web Dev Performance](https://web.dev/learn/performance) - Google's deep dive into core web vitals and fast loading - πŸ“—  [Google Dev - Performance](https://developers.google.com/web/fundamentals/performance/get-started) - Best practices for performant web experiences - πŸ“—  [Smashing Magazine - Performance](https://www.smashingmagazine.com/guides/performance/) - Curated articles and insights on frontline performance tuning - πŸŽ₯  [Web Performance Fundamentals](https://frontendmasters.com/courses/web-perf-v2/) - Learn how to trace, audit, and fix performance bottlenecks ## πŸ›‘οΈ Web Security - πŸŽ₯  [Web Security](https://frontendmasters.com/courses/web-security/) - Learn to protect your web apps from common vulnerabilities - πŸ“—  [Google Web Fundamentals: Security](https://web.dev/security/) - Guidelines for building safe and secure web properties - πŸ“—  [MDN Web Docs: Security](https://developer.mozilla.org/en-US/docs/Web/Security) - Documentation covering web security features like CSP and CORS ## β™Ώ Accessibility - πŸŽ₯  [Accessibility in JavaScript Applications](https://frontendmasters.com/courses/javascript-accessibility/) - Interactive course dealing with modern a11y challenges - πŸŽ₯  [Develop Accessible Web Apps with React](https://egghead.io/courses/develop-accessible-web-apps-with-react) - Learn to build accessible components in React - πŸŽ₯  [Practical Accessibility](https://practical-accessibility.today/) - Fast and comprehensive course strictly focused on accessibility - πŸ“—  [Web Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) - The official global standard for web accessibility ## πŸ§ͺ Frontend Testing - πŸ“—  [Vitest](https://vitest.dev/) - A blazing fast unit test framework powered by Vite - πŸ“—  [Jest Docs](https://jestjs.io/) - Official documentation for the popular JavaScript testing framework - πŸ“—  [Cypress](https://www.cypress.io/) - Reliable, fast end-to-end testing for browser applications - πŸŽ₯  [JavaScript unit testing](https://www.udemy.com/course/javascript-unit-testing-the-practical-guide/) - A practical guide to testing JavaScript codebases - πŸ“˜  [The art of unit testing](https://www.manning.com/books/the-art-of-unit-testing-third-edition) - Essential principles for writing maintainable robust unit tests ## πŸ“± Progressive Web Apps (PWAs) - πŸ“—  [MDN Guide to PWAs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) - Build apps that offer native-like experiences on the web - πŸ“—  [Google Developers: PWAs](https://web.dev/progressive-web-apps/) - Google's best practices and patterns for reliable PWAs - πŸŽ₯  [PWA - The Complete Guide](https://www.udemy.com/course/progressive-web-app-pwa-the-complete-guide/?couponCode=24T2MT111824) - Course to convert web apps to PWAs ## πŸ“ JS Design Patterns - πŸ“—  [Modern Web App Design Patterns](https://www.patterns.dev/) - Free resource for frontend and Node.js design patterns - πŸ“˜  [JS Design Patterns](https://patterns.addy.ie/) - Addy Osmani's classic book on learning JS design patterns - πŸ“  [Design Patterns for Humans](https://github.com/kamranahmedse/design-patterns-for-humans) - An ultra-simplified explanation of design patterns ## 🧹 JS Best Practices - πŸ“˜  [Refactoring JavaScript](https://refactoringjs.com/files/refactoring-javascript.pdf) - Techniques to turn bad code into good code safely - πŸŽ₯  [Writing Clean Code](https://www.udemy.com/course/writing-clean-code/) - Principles constraints, and techniques for writing clean JavaScript - πŸŽ₯  [MicroFrontends](https://www.udemy.com/course/microfrontend-course) - Architecture guide to scaling frontend apps with Microfrontends ## πŸ”§ Functional JavaScript - πŸ“—  [Mostly adequate Guide](https://mostly-adequate.gitbook.io/mostly-adequate-guide/) - A highly acclaimed free book on functional programming in JS - πŸ“—  [Functional Light JavaScript](https://aguru.gitbooks.io/functional-light-javascript/content/) - Kyle Simpson's pragmatic approach to functional programming - πŸŽ₯  [Functional JavaScript](https://frontendmasters.com/courses/functional-javascript-v3/) - Learn compose, currying, and monads clearly ## πŸ—οΈ Frontend System Design - πŸ“  [Awesome Frontend System Design](https://github.com/greatfrontend/awesome-front-end-system-design) - Curated materials and resources for frontend system design - πŸ“  [Frontend System Design](https://github.com/devkodeio/frontend-system-design) - A repository compiling essential concepts and examples - πŸŽ₯  [Front-End Engineer](https://www.youtube.com/c/FrontEndEngineer) - YouTube channel deeply focused on frontend architecture - πŸŽ₯  [Designing Scalable Frontend Systems](https://www.udemy.com/course/designing-scalable-frontend-systems/) - Complete guide to designing large-scale frontend solutions - πŸŽ₯  [Namaste System Design](https://namastedev.com/learn/namaste-frontend-system-design) - Detailed breakdown of frontend system design principles - πŸŽ₯  [Chakde System Design](https://www.youtube.com/watch?v=sV_4pOGosnU&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU) - High-level frontend estimations and design - πŸŽ₯  [Frontend System Design Course](https://alpha.learnersbucket.com/course-item?item-id=66e46d5466de7fee7de65890) - Structured course by LearnersBucket for cracking design rounds - πŸ“—  [Frontend Geek](https://www.frontendgeek.com/frontend-interview/system-design) - Collection of reading materials on system design principles ## πŸ“š Interview Prep Resources - πŸ“  [Front End Interview Handbook](https://github.com/yangshun/front-end-interview-handbook) - Comprehensive checklist and answers to common interview questions - πŸ“  [JavaScript Interview Questions](https://github.com/sudheerj/javascript-interview-questions) - 1000+ most frequently asked JS questions - πŸ“  [JavaScript Code Challenges](https://github.com/sadanandpai/javascript-code-challenges) - Curated set of JS algorithms and polyfills - πŸ“  [React Interview Questions](https://github.com/sudheerj/reactjs-interview-questions) - A massive list of React-specific interview questions - πŸ“  [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) - Generic SWE interview materials curated by an ex-Meta engineer - πŸ“  [JavaScript Questions MCQ](https://github.com/lydiahallie/javascript-questions) - A long list of advanced JavaScript multiple choice questions - πŸ“  [Frontend Mini Challenges](https://github.com/sadanandpai/frontend-mini-challenges) - Build bite-sized frontend projects to hone your UI skills - πŸ“  [FreeCodeCamp Interview Prep](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/curriculum/challenges/english/10-coding-interview-prep) - Curated coding challenges across algorithms, JS, and more - πŸ“—  [Interview Ant](https://www.interviewant.com/) - A collaborative, flashcard-based interview prep platform - πŸ“  [The DOM Challenge](https://github.com/devkodeio/the-dom-challenge) - A repository filled with practical DOM manipulation tasks - πŸ“  [FrontendAtlas](https://frontendatlas.com/coding) - Comprehensive roadmap and challenges for UI interviews - πŸ“—  [JavaScript 30](https://javascript30.com/) - 30 days of building vanilla JS projects, without frameworks - πŸ“  [Web-Dev-For-Beginners - by Microsoft](https://github.com/microsoft/Web-Dev-For-Beginners) - A free, 12-week comprehensive web development curriculum - πŸ“  [React Coding Challenges](https://github.com/alexgurr/react-coding-challenges/) - Series of exercises focused on testing React knowledge ## 🎬 Interview Prep Channels - πŸŽ₯  [Namaste JavaScript](https://www.youtube.com/watch?v=pN6jk0uUrD8&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP) - Deep dive into JS core concepts, ideal for interviews - πŸŽ₯  [Devtools Tech Frontend Interview Series](https://www.youtube.com/watch?v=qMkUziVZvzs&list=PL4ruoTJ8LTT96O258zzjRwdiNxzDoas-G&index=2) - Actual machine coding and problem-solving sessions - πŸŽ₯  [RoadsideCoder](https://www.youtube.com/@RoadsideCoder) - Excellent mock interviews and practical react coding challenges - πŸŽ₯  [JS Cafe](https://www.youtube.com/@js_cafe) - In-depth breakdown of machine coding problems and JS internals - πŸŽ₯  [Uncommon Geeks](https://www.youtube.com/watch?v=qcixpy3HQ9s&list=PLmcRO0ZwQv4QMslGJQg7N8AzaHkC5pJ4t) - Covers frontend interview topics and system design questions ## πŸ“Ί Frontend YouTube Channels - πŸŽ₯  [Traversy Media](https://www.youtube.com/c/TraversyMedia) - Crash courses and practical tutorials on major web technologies - πŸŽ₯  [Net Ninja](https://www.youtube.com/c/TheNetNinja) - Structured tutorial playlists for frontend frameworks - πŸŽ₯  [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified) - Complex web concepts broken down and simplified - πŸŽ₯  [Academind](https://www.youtube.com/c/Academind) - Thorough tech tutorials by Udemy favorite Max SchwarzmΓΌller - πŸŽ₯  [Dev Ed](https://www.youtube.com/c/DevEd) - Fun, design-focused frontend tutorials and animations - πŸŽ₯  [Kevin Powell](https://www.youtube.com/kepowob) - The ultimate channel for mastering all things CSS - πŸŽ₯  [Codevolution](https://www.youtube.com/c/Codevolution) - Complete tutorial series for React, NextJS, and more - πŸŽ₯  [JavaScript Mastery](https://www.youtube.com/@javascriptmastery) - Huge project-based tutorials using modern stacks like Next.js - πŸŽ₯  [Code With Antonio](https://www.youtube.com/@codewithantonio) - Modern full-stack clone builds and massive Next.js projects - πŸŽ₯  [Clever Programmer](https://www.youtube.com/c/CleverProgrammer) - High-energy clone builds and full-stack integration projects ## 🏁 Coding Challenges - πŸš‰  [Big Frontend Dev](https://bigfrontend.dev/) - Essential platform simulating real frontend machine coding rounds - πŸš‰  [Great Frontend Dev](https://www.greatfrontend.com?fpr=sadanand83) - Premium platform for comprehensive frontend interview preparation - πŸš‰  [Leetcode](https://leetcode.com/problemset/javascript/) - The canonical home for testing core algorithm skills via JavaScript - πŸš‰  [Frontend Expert](https://algoexpert.io/frontend/coding-questions) - High-quality frontend and logic questions created by AlgoExpert - πŸš‰  [JS Challenger](https://www.jschallenger.com/) - Learn JavaScript by solving coding exercises - πŸš‰  [Codedamn](https://codedamn.com/problems) - Hands-on frontend and backend interactive practice environment - πŸš‰  [Devtools Tech](https://www.devtools.tech/?ref=frontend-learning-kit) - Highly specific frontend machine coding challenges - πŸš‰  [Frontend Mentor](https://www.frontendmentor.io/) - Build functional responsive sites from professional Figma designs - πŸš‰  [Exercism](https://exercism.org/tracks/javascript) - Mentor-guided problem solving track to master JS fundamentals - πŸš‰  [FrontendPro](https://www.frontendpro.dev/) - Real-world frontend coding challenges for your portfolio - πŸš‰  [Frontend Lead](https://frontendlead.com/) - Curated questions heavily targeting senior UI roles - πŸš‰  [CSS Battle](https://cssbattle.dev/) - Gamified, competitive CSS-only drawing challenges - πŸš‰  [Kode Karma](https://www.kodekarma.dev/) - Practical web development problem-solving exercises - πŸš‰  [Namaste Dev](https://namastedev.com/practice) - Practice platform to test JavaScript basics - πŸš‰  [Clientside Dev](https://www.clientside.dev/) - Platform specifically made to test client-side application logic - πŸš‰  [Frontend Churn](https://www.algochurn.com/frontend) - A curated list of frontend interview assessments - πŸš‰  [Reacterry](https://www.reacterry.com/) - Enhance your React skills through specialized challenges - πŸš‰  [Edabit](https://edabit.com/challenges) - Bite-sized JS coding challenges spanning all difficulty levels - πŸš‰  [Dev Challenges](https://devchallenges.io/) - Complete web developer challenges to solve - πŸš‰  [ICodeThis](https://icodethis.com/) - Daily practical web development challenges - πŸš‰  [Prepare Frontend](https://preparefrontend.com/) - Simulated frontend challenges aligned with top tech company bars - πŸš‰  [Ebat Dev](https://www.ebat.dev/frontend/javascript/challenges) - Designed for developers to practice real frontend interview questions ## πŸ› οΈ Browser DevTools - πŸ“—  [Chrome DevTools](https://developer.chrome.com/docs/devtools/) - Official documentation for diagnosing web pages in Chrome - πŸ“—  [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) - Extensive tools and reference for Mozilla's Firefox browser - πŸŽ₯  [Mastering Dev Tools](https://frontendmasters.com/courses/dev-tools-v4/) - Demystifies advanced browser debugging and performance profiling ## πŸ”’ DSA for JS Devs - πŸŽ₯  [JavaScript Algorithms fundamentals](https://pro.academind.com/p/javascript-algorithms-the-fundamentals) - Intro course to JS patterns and complexity analysis - πŸŽ₯  [Practical Algorithms](https://frontendmasters.com/courses/practical-algorithms/) - Engaging DSA course taught with JavaScript - πŸŽ₯  [JavaScript Algorithms & Data Structures](https://www.youtube.com/playlist?list=PLC3y8-rFHvwjPxNAKvZpdnsr41E0fCMMP) - Codevolution's thorough ongoing playlist for JS logic - πŸŽ₯  [JS algorithms and data structures masterclass](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/) - Colt Steele's legendary mega-course for DSA on JS - πŸŽ₯  [The last algorithms course you'll need](https://frontendmasters.com/courses/algorithms/) - The Primeagen's incredible fast-paced DSA course using TS - πŸ“—  [DSA Interview Challenges](https://dsa-interview-challenges.vercel.app/) - Interactive platform covering common interview DSA prompts - πŸ“  [Javascript Algo](https://github.com/trekhleb/javascript-algorithms) - The massive open-source library of algorithms implemented in JS --- ### License This repository is MIT-licensed. [Read more](./LICENSE) ## 2. Official Technical Reference & Guides (sadanandpai/git-guide) --- ### Contents 1. [I want to clone a project and start going through the code.](#1-i-want-to-clone-a-project-and-start-going-through-the-code) 1. [I have cloned the repo. But I am not able to see the proper code!!!](#2-i-have-cloned-the-repo-but-i-am-not-able-to-see-the-proper-code) 1. [Someone has made a few changes in the code and asked me to pull those changes. What should I do?](#3-someone-has-made-a-few-changes-in-the-code-and-asked-me-to-pull-those-changes-what-should-i-do) 1. [I have modified the code and added changes. How do I commit my changes?](#4-i-have-modified-the-code-and-added-changes-how-do-i-commit-my-changes) 1. [What if I want only some of my files added and pushed instead of all the changes?](#5-what-if-i-want-only-some-of-my-files-added-and-pushed-instead-of-all-the-changes) 1. [I have modified/formatted some code while going through it. Now I want the code to be back to the state as it was.](#6-i-have-modifiedformatted-some-code-while-going-through-it-now-i-want-the-code-to-be-back-to-the-state-as-it-was) 1. [I have committed my changes. How can I undo my change?](#7-i-have-committed-my-changes-how-can-i-undo-my-change) 1. [I have made some changes to the branch. Also, I wanted to pull the new changes. But it is not working.](#8-i-have-made-some-changes-to-the-branch-also-i-wanted-to-pull-the-new-changes-but-it-is-not-working) 1. [After applying the stash, I am getting a lot of conflicts in the code.](#9-after-applying-the-stash-i-am-getting-a-lot-of-conflicts-in-the-code) 1. [I have made some code changes. But I want to commit to a new separate branch.](#10-i-have-made-some-code-changes-but-i-want-to-commit-to-a-new-separate-branch) 1. [I just committed but forgot to add a few files to the commit. Is there a way to update the same commit with some modifications?](#11-i-just-committed-but-forgot-to-add-a-few-files-to-the-commit-is-there-a-way-to-update-the-same-commit-with-some-modifications) 1. [I am asked to raise a Pull Request (PR) to a branch. What am I supposed to do?](#12-i-am-asked-to-raise-a-pull-request-pr-to-a-branch-what-am-i-supposed-to-do) 1. [I do not want a branch anymore. How can I delete the branch?](#13-i-do-not-want-a-branch-anymore-how-can-i-delete-the-branch) 1. [I want to rename my local and remote branches. How can I do it?](#14-i-want-to-rename-my-local-and-remote-branches-how-can-i-do-it) 1. [I have made some changes to the code on the branch on which all of the developers are working. How can I publish my changes?](#15-i-have-made-some-changes-to-the-code-on-the-branch-on-which-all-of-the-developers-are-working-how-can-i-publish-my-changes) 1. [I created a commit and also pushed it. Is it possible to update that commit now?](#16-i-created-a-commit-and-also-pushed-it-is-it-possible-to-update-that-commit-now) 1. [I have created single/multiple commits. When I am trying to push my changes, getting a rejected message. I am stuck!!!](#17-i-have-created-singlemultiple-commits-when-i-am-trying-to-push-my-changes-getting-a-rejected-message-i-am-stuck) 1. [I followed the above steps but got conflicts after git pull.](#18-i-followed-the-above-steps-but-got-conflicts-after-git-pull) 1. [I have created single/multiple commits. When I am trying to push my changes, getting a rejected message. Can I pull the new changes without merging the commit (Rebase)?](#19-i-have-created-singlemultiple-commits-when-i-am-trying-to-push-my-changes-getting-a-rejected-message-can-i-pull-the-new-changes-without-merging-the-commit-rebase) 1. [I have raised a PR (Pull Request). But it is showing conflicts.](#20-i-have-raised-a-pr-pull-request-but-it-is-showing-conflicts) 1. [I have many commits. How can I transform them into a single commit (squash)?](#21-i-have-many-commits-how-can-i-transform-them-into-a-single-commit-squash) 1. [I have many commits. How can I transform them into a single commit (squash) with just commands?](#22-i-have-many-commits-how-can-i-transform-them-into-a-single-commit-squash-with-just-commands) 1. [I am trying to rebase my branch with the same or another branch. As I have many commits, I am getting a lot of conflicts on every commit to rebase.](#23-i-am-trying-to-rebase-my-branch-with-the-same-or-another-branch-as-i-have-many-commits-i-am-getting-a-lot-of-conflicts-on-every-commit-to-rebase) 1. [I have made changes and committed to a branch. I want to copy the same changes to another branch.](#24-i-have-made-changes-and-committed-to-a-branch-i-want-to-copy-the-same-changes-to-another-branch) 1. [I have tried to cherry-pick as shown in [24]. But I am getting conflicts.](#25-i-have-tried-to-cherry-pick-as-shown-in-24-but-i-am-getting-conflicts) 1. [I have multiple commits which I want to move to a different branch.](#26-i-have-multiple-commits-which-i-want-to-move-to-a-different-branch) 1. [I have pushed my changes and got it merged. I want to revert it immediately.](#27-i-have-pushed-my-changes-and-got-it-merged-i-want-to-revert-it-immediately) 1. [How do I reset the code of my branch to the code of a different branch?](#28-how-do-i-reset-the-code-of-my-branch-to-the-code-of-a-different-branch) 1. [I want to delete/undo the previous commit from my branch which I have already pushed. I am not looking for a revert. I just want to delete it.](#29-i-want-to-deleteundo-the-previous-commit-from-my-branch-which-i-have-already-pushed-i-am-not-looking-for-a-revert-i-just-want-to-delete-it) ### 1. I want to clone a project and start going through the code. - Get the repo URL/link - Open your terminal - Navigate to the location in the terminal where you want your project to be cloned - Enter the command `git clone URL` The repo URL can be found inside the repo. **Github repo link example** **Bitbucket repo link example** --- ### 2. I have cloned the repo. But I am not able to see the proper code!!! By default the main/master branch is active. Ask which branch has the relevant code - Navigate inside the cloned folder `cd repo<-name>` - Enter the command `git switch ` Note: The **checkout** command can also be used to switch the branch. `git checkout ` --- ### 3. Someone has made a few changes in the code and asked me to pull those changes. What should I do? - Pull the changes `git pull` --- ### 4. I have modified the code and added changes. How do I commit my changes? First stage all the files and then commit your changes. You can create multiple commits. - Stage the files `git add *` - Commit the changes `git commit -m 'Your commit message'` --- ### 5. What if I want only some of my files added and pushed instead of all the changes? You can add files by mentioning the file/files with relative or full path. You can add files one by one or multiple files at a time using the commands - Add single file `git add ` - Add multiple files `git add ` Similarly, to unstage a file use the command `git reset ` --- ### 6. I have modified/formatted some code while going through it. Now I want the code to be back to the state as it was. - To reset all the changes `git reset --hard` - To reset a single file `git checkout HEAD -- ` --- ### 7. I have committed my changes. How can I undo my change? You can undo the commit by resetting the HEAD. If you just want to undo the commit but let the changes be present then use the `soft` attribute else if you do want the commit along with the changes then use the `hard` attribute - `git reset --soft HEAD~1` (undo with changes preserved) - `git reset --hard HEAD~1` (undo with changes removed) --- ### 8. I have made some changes to the branch. Also, I wanted to pull the new changes. But it is not working. The command `git pull` may not work if the changes are done by someone else to the same files which you have also modified. - Stash the changes `git stash save -u` - Pull the changes now `git pull` - Retrieve the changes `git stash apply ` where n is the stash number. To get the list of stashes `git stash list` Note: You can stash multiple changes and bring them back as and when you like to --- ### 9. After applying the stash, I am getting a lot of conflicts in the code. If there are changes in the code on the region of the stashed code, it is expected to get conflicts. You will have to manually resolve all the conflicts. (Do it carefully) Below is the view of the VSCode, which helps in easily resolving the conflicts. --- ### 10. I have made some code changes. But I want to commit to a new separate branch. You can create a separate branch out of the current branch and commit it. This works both if you have already made changes or are yet to start making changes. - Create a new branch `git switch -c ` - Stage all the changes `git add *` - Commit the changes `git commit -m ""` To switch between the branches use the command `git checkout ` Alternatively, **checkout** command can also be used to create the branch. `git checkout -b ` Note: `my-branch-name` is your local branch and not available for anyone else unless you push it --- ### 11. I just committed but forgot to add a few files to the commit. Is there a way to update the same commit with some modifications? Yes. You can update the commit by amending your changes. - To add files `git add ...` - To update the commit `git commit --amend --no-edit` To update with new commit message `git commit --amend -m 'My new commit message'` (This command can also be used to simply update the previous commit message without any code modifications) `--no-edit` is used to avoid the prompt to edit the commit message. If you want to modify the commit message as well during the update of the commit, then do not include `-m` along with your commit message Note: The `amend` updates the previous commit without creating a new one on top of the previous. (in reality, Git discards the previous commit and replaces it with a new commit) --- ### 12. I am asked to raise a Pull Request (PR) to a branch. What am I supposed to do? You can follow the same steps as given in the previous question. Once done you will push the code and raise a PR. It's that simple. Here we assume you are on the 'develop' branch and raising PR to the 'main' branch. - Create a new branch `git switch -c ` - Stage all the changes `git add *` - Commit the changes `git commit -m ""` - Push the changes `git push` (as the branch is not present on the remote, it will show the command to use) - Enter `git push --set-upstream origin ` The URL to raise the PR will be automatically available as shown above. Use the link and open it in the browser. Now select the base branch to which you want to raise a PR and click on 'Create a PR' --- ### 13. I do not want a branch anymore. How can I delete the branch? To delete a branch locally, check out a different branch than the one you want to delete. Here we will delete the branch named 'develop' - Switch to other branch `git checkout ` - Delete branch `git branch -d ` To delete the branch from remote as well - Delete remote branch `git push -d ` Note: If `-d` does not allow to delete a branch, use the `-D`. Example: `git branch -D ` --- ### 14. I want to rename my local and remote branches. How can I do it? To rename a branch, checkout to the branch and rename it. - Check out other branch `git checkout ` - Rename your branch `git branch -m ` - Push to remote `git push : ` - Set upstream `git push -u ` <remote> is usually origin --- ### 15. I have made some changes to the code on the branch on which all of the developers are working. How can I publish my changes? To move the changes from your local machine to remote (called origin), follow the below steps in your terminal - Stage the files `git add *` - Commit the changes `git commit -m ""` - Push the changes `git push` --- ### 16. I created a commit and also pushed it. Is it possible to update that commit now? Yes. You can update the commit even after it is pushed. Everything will follow as mentioned in the previous question, but you will have to force push. - `git add ...` - `git commit --amend --no-edit` or `git commit --amend` - `git push -f` or `git push --force` Note: You need to be very careful while pushing forcefully, as it may eliminate other commits if someone has done in between. Make sure you are working on the branch and no one else is simultaneously working on the same or branching out from the branch at your commit. --- ### 17. I have created single/multiple commits. When I am trying to push my changes, getting a rejected message. I am stuck!!! The rejection could be because the remote branch might be ahead of the local branch. Different techniques can be used here to achieve sync. - Pull the changes `git pull` - Continue with the merge commit created automatically - `git push` If there are conflicts, then resolve them manually to proceed ahead as shown below. --- ### 18. I followed the above steps but got conflicts after git pull. If there are code changes on the same region from multiple commits, conflicts will occur. You need to resolve all the conflicts and proceed. - Resolve all the conflicts - Stage files `git add ` - Continue the merge `git merge --continue` - Push the changes `git push` Note: If something goes wrong, in any of the above steps, then there is nothing to panic about. Just run `git merge --abort` and redo the steps. --- ### 19. I have created single/multiple commits. When I am trying to push my changes, getting a rejected message. Can I pull the new changes without merging the commit (Rebase)? Yes. You can pull the changes without a merge. This is called **Rebase**. I know you have heard it a lot. It is very simple though. - Pull with rebase `git pull --rebase` - Push the changes `git push` If you get conflicts, then solve all the conflicts. Then - `git rebase --continue` - Resolve all conflicts - Push the changes `git push` Note: If something goes wrong, in any of the above steps, then there is nothing to panic about. Just run `git rebase --abort` and redo the steps. --- ### 20. I have raised a PR (Pull Request). But it is showing conflicts. PR will show conflicts if the new changes added to the source branch are conflicting with your changes or your branch is lagging. There are 2 main approaches to solve this. - [Merge approach](#merge-approach) - [Rebase approach](#rebase-approach) **Follow any one of the approaches.** Don't try both of them. Assuming that your branch is `develop` and the source branch is `main` #### Merge approach - Checkout to main branch `git checkout main` - Pull changes `git pull` - Checkout to your branch `git checkout develop` - Merge the changes `git merge main` - Resolve all the conflicts and add to staging `git add ` - If conflicts are present `git merge --continue` - Push the changes `git push` #### Rebase approach - Checkout to main branch `git checkout main` - Pull changes `git pull` - Checkout to your branch `git checkout develop` - Rebase the branch `git rebase main` - Resolve all the conflicts and add to staging `git add ` - Run `git rebase --continue` after resolving the conflicts - Push the changes `git push -f` Note: You may have to run `git rebase --continue` multiple times if there are multiple conflicts on your multiple commits. --- ### 21. I have many commits. How can I transform them into a single commit (squash)? Converting multiple commits into one is known as **Squashing**. We will achieve this by rebasing with the help of the interactive feature of the editor (VSCode). This will be both easier and simple. - Run `git rebase -i HEAD~` (where n refers to the number of commits to squash) - Mark all the commits as 'Squash' except the oldest one - Click on 'Start rebase' - Enter the commit message Note: If you had already pushed the commits, then you will have to use the command `git push -f` to reflect squash on the remote branch as well. --- ### 22. I have many commits. How can I transform them into a single commit (squash) with just commands? You can use the technique of undoing to achieve this easily. - Undo the number of commits you need to squash `git reset --soft HEAD~` - Commit them again `git commit -m 'Commit message'` Note: If you had already pushed the commits, then you will have to use the command `git push -f` to reflect squash on the remote branch as well. --- ### 23. I am trying to rebase my branch with the same or another branch. As I have many commits, I am getting a lot of conflicts on every commit to rebase. - You can first squash all commits to one commit (Refer [21](#21-i-have-many-commits-how-can-i-transform-them-into-a-single-commit-squash)). - Once done, rebase the branch and resolve all conflicts in a single go. (Refer [20](#rebase-approach)) --- ### 24. I have made changes and committed to a branch. I want to copy the same changes to another branch. To copy the changes of a commit from one branch to another, you can use **cherry pick**. First obtain the commit id of the commit, which you want to copy. - Checkout the branch `git checkout ` - Cherry-pick the commit `git cherry-pick ` --- ### 25. I have tried to cherry-pick as shown in [24](#24-i-have-made-changes-and-committed-to-a-branch-i-want-to-copy-the-same-changes-to-another-branch). But I am getting conflicts. If you get any conflicts, resolve the conflicts first. Once all the conflicts are resolved, they continue the cherry-pick. - Add resolved files to stage `git add ` - Continue cherry-pick `git cherry-pick --continue` Note: If something goes wrong in between, reset the process by using the command `git cherry-pick --abort` (You can start the process again) --- ### 26. I have multiple commits which I want to move to a different branch. To copy a range of commits from one branch to another, you can note down the older commit id from history and the newer commit id. - Checkout the branch `git checkout ` - Cherry pick the commit `git cherry-pick ..` --- ### 27. I have pushed my changes and got it merged. I want to revert it immediately. Revert creates a reverse commit where the changes made will reverse and is created as a new commit. To revert a particular commit first, obtain its commit id. - Revert the commit `git revert ` - Push the commit `git push` --- ### 28. How do I reset the code of my branch to the code of a different branch? When resetting a branch to a different branch, the codebase on your branch will become the same as the other branch. To achieve this, you can use the 'reset' command. - Checkout to the branch `git checkout ` - Reset with the branch name `git reset --hard ` In this case, 'your-branch-name' will match the codebase of 'source-branch' --- ### 29. I want to delete/undo the previous commit from my branch which I have already pushed. I am not looking for a revert. I just want to delete it. Revert will reverse the changes creating a new commit. If you want to remove the previous commit, then you can undo and force push the branch. - Reset by undoing `git reset --hard HEAD~` (n is the number of commits to undo) - Push the changes `git push -f` Note: Force push is needed as the history of the branch is changing in this. If the commit is not pushed then it is not needed. --- ### License This repository is MIT licensed. [Read more](./LICENSE)