123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->
<script>
   window.console = window.console || function(t) {};
  </script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
  </script>
 </head>
  <body translate="no">
 <nav id="navbar"> 
   <header>Git Cheat Sheet</header>
   <ul>
     <a class="nav-link" href="#Intro_GitHub"><li>Intro GitHub</li></a>
     <a class="nav-link" href="#Install_Git"><li>Install Git</li></a>
     <a class="nav-link" href="#Configure_Tooling"><li>Configure Tooling</li></a>
     <a class="nav-link" href="#Create_Repositories"><li>Create Repositories</li></a>
     <a class="nav-link" href="#Refactor_Filenames"><li>Refactor Filenames</li></a>
     <a class="nav-link" href="#Suppress_Tracking"><li>Suppress Tracking</li></a>
     <a class="nav-link" href="#Save_Fragments"><li>Save Fragments</li></a>
     <a class="nav-link" href="#Make_Changes"><li>Make Changes</li></a>
     <a class="nav-link" href="#Group_Changes"><li>Group Changes</li></a>
     <a class="nav-link" href="#Review_History"><li>Review History</li></a>
     <a class="nav-link" href="#Redo_Commits"><li>Redo Commits</li></a>
     <a class="nav-link" href="#Synchronize_Changes"><li>Synchronize Changes</li></a>
     <a class="nav-link" href="#GitHub_Training"><li>GitHub Training</li></a>
     </ul>
    </nav>
  <main id="main-doc">
   <section class="main-section" id="Intro_GitHub">
     <header>Intro GitHub</header>
    <p>
     Git is the open source distributed version control system that facilitates GitHub activities on your laptop or desktop.</p>
     <ul>
     <li>This cheat sheet summarizes commonly used Git command line instructions for quick reference.</li>
     </ul>
  </section>
   <section class="main-section" id="Install_Git">
    <header>Install Git</header>
      <p>GitHub provides desktop clients that include a graphical user
       interface for the most common repository actions and an automati-
       cally updating command line edition of Git for advanced scenarios.</p>
       <ul>
     <li>
      GitHub for Windows
      https://windows.github.com</li>
   <li>GitHub for Mac
       https://mac.github.com</li>
     <li>
      Git distributions for Linux and POSIX systems are available on the
      official Git SCM web site.</li>
     <li>
      Git for All Platforms
      http://git-scm.com
     </li>
    </ul>
  </section>
    <section class="main-section" id="Configure_Tooling">
     <header>Configure Tooling</header>
    <p>
     Configure user information for all local repositories.
    </p>
     <code>$ git config --global user.name "[name]".</code>
     <p>Sets the name you want attached to your commit transactions</p>
     <code>$ git config --global user.email "[email address]".</code>
     Sets the email you want attached to your commit transactions</li>
     <code>$ git config --global color.ui auto.</code>
     <p>Enables helpful colorization of command line output
    </p>
  </section>
    <section class="main-section" id="Create_Repositories">
     <header>Create Repositories</header>
      <p>
      Start a new repository or obtain one from an existing URL.
      </p>
      <li>
       $ git init [project-name].
       Creates a new local repository with the specified name</li>
       <li>
       $ git clone [url] $ git branch -d [branch-name].
       Downloads a project and its entire version history
       </li> 
      </p>
  </section>
    <section class="main-section" id="Refactor_Filenames">
     <header>Refactor Filenames</header>
      <p>
        Relocate and remove versioned files.
      <li>
        $ git rm [file] -
        Deletes the file from the working directory and stages the deletion.</li>
       <li>
        $ git rm --cached [file] -
        Removes the file from version control but preserves the file locally.</li>
       <li>
        $ git mv [file-original] [file-renamed] -
        Changes the file name and prepares it for commit.
      </li>
     </p>
   </section>
    <section class="main-section" id="Suppress_Tracking">
     <header>Suppress Tracking</header>
       <p>
        Exclude temporary files and paths.
       <code>
        *.log
        build/
        temp-*
       </code>
      </p>
      <p>
       A text file named .gitignore suppresses accidental versioning of
       files and paths matching the specified patterns.
      <li>
       $ git ls-files --other --ignored --exclude-standard -
       Lists all ignored files in this project.
      </li>
    </p>
  </section>
    <section class="main-section" id="Save_Fragments">
     <header>Save Fragments</header>
       <p>
        Shelve and restore incomplete changes
       <li>
        $ git stash -
        Temporarily stores all modified tracked files.</li>
       <li>
         $ git stash pop -
         Restores the most recently stashed files.</li>
       <li>
         $ git stash list -
         Lists all stashed changesets.</li>
       <li>
         $ git stash drop -
         Discards the most recently stashed changeset.
        </li>  
      </p>
  </section>
    <section class="main-section" id="Make_Changes">
     <header>Make Changes</header>
       <p>
        Review edits and craft a commit transaction.
       </p>
         <code>$ git status</code>
         <p>Lists all new or modified files to be committed.</p>
       <code>$ git diff</code>
         <p>Shows file differences not yet staged.</p>
       <code>$ git add [file]</code>
         <p>Snapshots the file in preparation for versioning.</p>
       <code>$ git diff --staged</code>
         <p>Shows file differences between staging and the last file version.</p>
        <code>$ git reset [file]</code>
          <p>Unstages the file, but preserve its contents.</p>
        <code>$ git commit -m "[descriptive message]"</code>
          <p>Records file snapshots permanently in version history.   
       </p>
  </section>
    <section class="main-section" id="Group_Changes">
     <header>Group Changes</header>
      <p>
       Name a series of commits and combine completed efforts.
      <li>
        $ git branch -
        Lists all local branches in the current repository.</li>
      <li>
        $ git branch [branch-name] -
        Creates a new branch.</li>
      <li>
        $ git checkout [branch-name] -
        Switches to the specified branch and updates the working directory.</li>
       <li>
         $ git merge [branch] -
         Combines the specified branch’s history into the current branch.</li>
       <li>
         $ git branch -d [branch-name] -
         Deletes the specified branch.
        </li>
      </p>
  </section>
    <section class="main-section" id="Review_History">
     <header>Review History</header>
      <p>
       Browse and inspect the evolution of project files.
      <li>
        $ git log -
        Lists version history for the current branch.</li>
      <li>
       $ git log --follow [file] -
       Lists version history for a file, including renames.</li>
      <li>
        $ git diff [first-branch]...[second-branch] -
        Shows content differences between two branches.</li>
      <li>
        $ git show [commit] -
        Outputs metadata and content changes of the specified commit.</li>
       </p>
   </section>
    <section class="main-section" id="Redo_Commits">
     <header>Redo Commits</header>
      <p>
        Erase mistakes and craft replacement history.
      <li>
        $ git reset [commit] -
        Undoes all commits after [commit] , preserving changes locally.</li>
      <li>
        $ git reset --hard [commit] -
       Lists version history for a file, including renames.</li>
      <li>
        $ git diff [first-branch]...[second-branch] -
        Discards all history and changes back to the specified commit.
       </li>
      </p>
  </section>
    <section class="main-section" id="Synchronize_Changes">
     <header>Synchronize Changes</header>
      <p>
       Register a repository bookmark and exchange version history.
      <li>
       $ git fetch [bookmark] -
       Downloads all history from the repository bookmark.</li>
      <li>
       $ git merge [bookmark]/[branch] -
       Combines bookmark’s branch into current local branch.</li>
      <li>
       $ git push [alias] [branch] -
       Uploads all local branch commits to GitHub</li>
      <li>
       $ git pull -
       Downloads bookmark history and incorporates changes.
      </li>
    </p>
  </section>
    <section class="main-section" id="GitHub_Training">
     <header>GitHub Training</header>
      <p>Learn more about using GitHub and Git. Email the Training Team or visit
      our web site for learning event schedules and private class availability.<a href="https://services.github.com/" target="_blank">Learning</a></p>
   </section>
    </main>
            
          
!
            
              <style>
 html,
 body {
  min-width: 290px;
  color: #4d4e53;
  background-color: #ffffff;
  font-family: "Open Sans", Arial, sans-serif;
  line-height: 1.5;
}

 #navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

 header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: thin;
}

 #main-doc header {
  text-align: left;
  margin: 0px;
}

 #navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

 #navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

 #navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}

 #main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

 section article {
  color: #4d4e53;
  margin: 15px;
  font-size: 0.96em;
}

 section li {
  margin: 15px 0px 0px 20px;
}

code {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
 #navbar ul {
  border: 1px solid;
  height: 207px;
 }

 #navbar {
  background-color: white;
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  max-height: 275px;
  border: none;
  z-index: 1;
  border-bottom: 2px solid;
 }

 #main-doc {
  position: relative;
  margin-left: 0px;
  margin-top: 270px;
 }
}

@media only screen and (max-width: 400px) {
 #main-doc {
   margin-left: -10px;
 }
 code {
  margin-left: -20px;
  width: 100%;
  padding: 15px;
  padding-left: 10px;
  padding-right: 45px;
  min-width: 233px;
  }
 }
</style>
            
          
!
            
              // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console