basic.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
    />
    <title>Basics guide to making your first Pull Request (PR)</title>
  </head>
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300&family=Roboto:wght@300&display=swap");

    * {
      box-sizing: border-box;
      margin: 0;    
    }
    /* nav bar  */
nav{
    background: #1f5d64;
    height:4.8rem ;
    width: 100%;
    border-radius: 0px 0pc 14px 14px;
    
}
label.logo
{
    color: white;
    font-family: var(--primary-font);
    font-size: 2rem;
    padding: 0rem 1rem;
    line-height: 4.5rem;
    font-weight: bold;
    margin: 0;
}

nav ul  {
    float: right;
    
    margin-left: -3rem;
    margin-right: 2rem;
}
nav ul li {
    display: inline-block;
    list-style-type: none;
    line-height:4.5rem ;
    padding-left: 1rem;
}
nav ul li a {
    color: white;
    font-size: 1rem;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1rem;
    border-radius: 10px;
}

ul li a:hover{
    color: #072c30;
    background-color: antiquewhite;
    transition: .5s;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

.checkboxbtn span
{
    font-size:2rem ;
    color: white;
    float: right;
    line-height: 4.5rem;
    margin-right:20px;
    cursor: pointer;
    display: none;
}
#checkbox{
    display: none;
}
/* nav media Queries */
@media (max-width: 992px)
 {
     label.logo
     {
         font-size:1.5rem;
         padding-left: 2rem;
     }
     nav ul li a {
         font-size: 0.8rem;
         
 
     }
 }
 @media (max-width:786px)
 {  
  

     .checkboxbtn span {
         display: block;
     }
     nav ul  li{
         display: block;
     }
     nav ul{
         display:block;
         position:fixed;
         width: 100%;
         height: 100vh;
         background-color: #072c30;
         top: 4.8rem;
         margin: 0;
         text-align: center;
         left: -100%;
         transition: all .5s;
         border-radius: 14px;
     }
     nav ul li a{
         font-size: 1rem;
     }
    nav ul li a:hover{
         color: antiquewhite;
         background: none;
         transition: .5s;
     }
     #checkbox:checked ~ul {
        left: 0;

     }
    
 
 }
 /* nav end */

    body {
      font-size: 16px;
      line-height: 2rem;
      font-weight: 400;
      font-family: "Roboto", sans-serif;
      margin: 0 auto;
      height: 100%;
      
    }
    .bodydiv
    {
      padding: 0 2% 2% 2%;
    }

    pre {
    padding: 0.66001rem 9.5px 9.5px;
    line-height: 2rem;
    background: linear-gradient(to bottom,#fff 0,#fff 0.75rem,#f5f7fa 0.75rem,#f5f7fa 2.75rem,#fff 2.75rem,#fff 4rem);
    background-size: 100% 4rem;
    border: 1px solid #D3DAEA;
    }

  code {
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    font-family: 'monospace', monospace;
  }

  a {
    text-decoration: none;
    cursor: pointer;
    color: #0B826E;
  }

  h3 {
    font-size: 1.6rem;
    font-weight: 700;
  }

  img {
    width: 50%;
    height: auto;
    margin: 0 auto;
  }
  </style>
  <!-- mav -->
    <nav>
      <input placeholder="#" type="checkbox" id="checkbox" />
      <label for="checkbox" class="checkboxbtn">
      <span class="material-symbols-outlined">
          menu
          </span></i
      ></label>
      <label class="logo">Hackathon Git Labs</label>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a class="active" href="#">Pages</a></li>
        <li><a class="active" href="#">Pages</a></li>
        <li><a class="active" href="#">Form</a></li>
        <li><a class="active" href="#">Contact Us</a></li>
      </ul>
    </nav>
  
  <body>
    <div class="bodydiv">
    <header>
  <h1>Basics guide to making your first Pull Request (PR)</h1>
    </header>
  <main>
    <p>
      By following the below guide, your actions will have created a card on the
      Landing page of the project, with some information displayed about you.
      It's a fun little exercise that gives you the steps to navigate the
      project and make your first Open Source Contribution to this project (or
      maybe it is your very first ever!) via Pull Request (PR). 🤜
    </p>
    <p>
      Get started! Make your first PR and get going into the world of open
      source!
    </p>
    <h2>👇 Participant steps: 👇</h2>
    <h3>1. Project Setup</h3>
    <hr />
    <ul>
      <li>
        Fork the repo. Super simple here, go to
        <a href="https://github.com/auxfuse/hackathon-git-labs">the repo</a>
        , and click on the "Fork" button in the top right of the screen. The
        window should then refresh, and you should be redirected to your newly
        created Fork of the project.
      </li>
      <p>
        🍴 <-- So what is a fork? It's a copy of the original repository. But
        one that you own. Any changes you make to the project in the fork won't
        affect the original. To affect the original, continue following the
        steps below to make a Pull Request! 😉
        <a
          href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks"
          >Learn more about Forks</a
        >
      </p>
      <li>
        Go to your preferred IDE/Editor and clone the Forked repo.
        <ul>
          <li>
            Go to the forked repository in Github. This can be found in your
            account, under "repositories".
          </li>
          <li>
            Hit the green "Code" button, and then click on "HTTPS" and copy the
            link.
          </li>
        </ul>
        <img src="docs/images/clone.png" alt="Repository clone" />
      </li>
      <li>
        <ul>
          <li>
            In your IDE/Editor, open a terminal/command line, and enter the
            following: <code>git clone {insert copied url here}</code> and hit
            "Enter" on your keyboard.
          </li>
          <li>
            The Forked repository will now clone to your preferred development
            method.
          </li>
          <ul>
            <li>
              If you are using Gitpod, you do not need to do these steps.
              Instead, you can go to the forked repository and click on the
              green "Gitpod" Extension button to open the project for editing.
            </li>
          </ul>
        </ul>
      </li>
      <li>
        Your project should already be opened in your preferred IDE/Editor at
        this point, but just in case. Open your IDE/Editor, and then open the
        project. 😀
      </li>
      <li>Before doing any code, lets open a terminal/command line.</li>
      <li>
        Set the upstream by running this command
        <code
          >git remote add upstream
          https://github.com/auxfuse/hackathon-git-labs.git</code
        >, in your opened terminal/command line.
        <ul>
          <li>
            We can then check to ensure that the remote has been added correctly
            by running <code>git remote -v</code> in the terminal. And you
            should get this type of response.
          </li>
        </ul>
        <pre>
          <code>
        $ git remote -v
        origin https://github.com/YOUR_USERNAME/hackathon-git-labs.git (fetch)
        origin https://github.com/YOUR_USERNAME/hackathon-git-labs.git (push)
        upstream https://github.com/auxfuse/hackathon-git-labs.git (fetch)
        upstream https://github.com/auxfuse/hackathon-git-labs.git (push)
        </code>
          </pre>
        <p>
          The <em>"origin"</em> in the above snapshot is your Forked repository.
          The <em>"upstream"</em> is the link we just set so that our newly
          Forked repository can <b>see</b> the original repository and
          vice-versa. Lots of thought here, and it does take a bit of getting
          used to! So stick with it. 🤔💭 Basically all we are doing here, is
          setting up the relationship between the original repository and the
          fork. 🤝 Without this step, we can't make a Pull Request.
        </p>
        <p>
          <b>N.B</b>: If you are using Gitpod, and you open the forked
          repository using Gitpod this step will be done for you by default. But
          make sure to double check using the
          <code>git remote -v</code> command. 😀
        </p>
      </li>
      <li>
        Our last step before we jump into the project is to Create a branch.
      </li>
      <ul>
        <li>
          A branch is another layer of security for us to lean on. It's a
          diverging path from the main branch that exists by default in every
          repository.
          <a
            href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
          >
            Learn more about Branches</a
          >
        </li>
        <li>
          Inside your terminal/command line in your IDE/Editor, run this
          command: <code>git checkout -b branch-name</code>, replacing the
          "branch-name" with something more unique to you.
        </li>
        <li>
          This command creates a branch, and automatically moves you into that
          branch 😁.
        </li>
        <li>
          Lastly, we need to tell Git that this new branch is to be the current
          <b>tracked</b> branch. Back into our terminal, we now run:
          <code>git push -u origin branch-name</code>. 🌿🌳
        </li>
      </ul>
    </ul>
    <p>
      <em>
        <b>
          All of the initial git setup is done. All in all, if you follow this
          to the letter, this is a few minutes of work. 😅 Crazy to think of
          something you do regularly just by muscle memory alone, when viewed in
          the written word, is quite a lengthy process. 🤯🧠
        </b>
      </em>
    </p>
    <h3>2. Adding to Project</h3>
    <hr />
    <ul>
      
        Go to the <code>community.json</code> file and copy the following JSON
        object and replace the  <b>values</b> with your own:
      </li>
      <pre>
        <code>
      {
        "name": "your_name_or_alias",
        "course_start": "year_of_course_start",
        "course_stage": "student_alum_staff_mentor",
        "favorite_language": "favorite_language",
        "currently_learning": "latest_learning"
      }
        </code>
      </pre>
      <p>For reference, the <b>values</b> are on the right side of the colon <code>(:)</code>, and are contained inside the double quotes (""). Take a look at this snapshot:</p>
    <img src="docs/images/JSONvalue.png" alt="JSON values">
    <p>Keep these short and sweet. This is just a small blurb about you as a developer. <em>Anything that exceeds the bounds of the card itself will be truncated.</em></p>
    
  <li> Paste this updated JSON Object after the latest object in the <code>community.json</code> file. Keeping to the current format. Separate your pasted JSON Object from the last using a comma, (,).</li>
  <li>A small example of the json file, to take note of the structure, including the separation of each JSON Object using a comma, (,):</li>
    <img src="docs/images/JSONseparator.png" alt="JSON separator">
    <li>The JSON is formatted as follows:</li>
    <ul>
      <li> Notice that the JSON objects, those inside the curly braces, and inclusive of the curly braces {}, are separated by a comma. 👈 <b>This part is super important when pasting in your own JSON Object.</b></li>
      <li>Each individual set of key/value pair inside the JSON objects, are also separated by a comma.</li>
      <li>Keys and values are separated by a colon, <code>:</code>. With keys on the left of the colon, and values on the right. And both are surrounded by double quotes, ("").</li>
      <li>Take note of the following example of a Key/Value pair:</li>
      <img src="docs/images/KVpair.png" alt="Json format">
      <li>After you have added yourself to the <code>community.json</code> file, you can now view the project in preview mode to see your card added to the website.</li>
      <ul>
        <li> Depending on your IDE/Editor of choice, there are a few ways to do this. Most IDEs/Editors will have a built in preview option. If you are unsure, a quick google search on how to do this for your editor is the best course of action.</li>
      </ul>
    </ul>
</ul>
<h3>3. Git and The Pull Request</h3>
<hr>
<ul>
  <li>Add all your work to the branch using <code>git add .</code>, using the terminal/command line in your IDE/Editor.</li>
  <li>Commit it using <code>git commit -m "meaningful commit message here".</code></li>
  <li> Push your work using <code>git push</code>. 👋 And say goodbye to your IDE/Editor for now....because now it's time to go to our Forked Repository in our Github account 💻😁.</li>
  <ul>
    <li>At this stage, if you didn't earlier, you might be reminded to set the branch as the current trackable option. In that case just run <code>git push -u origin branch-name</code>. 🌿🌳 Don't worry, the terminal is very good and will tell you if it needs to be set or not.</li>
    <p>We are almost there!</p>
    <li> Go to the original repo: https://github.com/auxfuse/hackathon-git-labs.</li>
    <li>From here, click on the "Pull requests" tab, located in the top navigational menu of the repository.</li>
    <img src="docs/images/PRtab.PNG" alt="Pull request tab">
    <li>You should see the following screen:</li>
    <ul>
      <li> As long as you have followed all the steps above to this point, you should see a banner at the top of this screen with a Green Github Button saying "Compare & Pull Request".</li>
      <p><b>N.B</b>: If you do not see this, make sure that you have added, commited, and pushed your work to a branch within your forked repository.</p>
    </ul>
    <img src="docs/images/ComparePR.PNG" alt="Compare PR">
  </ul>
  <li>Click on the green button, "Compare & Pull Request" to start the PR process.</li>
  <ul>
    <li>You should see the following, and more so you should see the PR Template information in the "Write" tab.</li>
  </ul>
  <img src="docs/images/PRwindow.PNG" alt="Pull request window">
  <li>On this screen we have multiple things going on, but the main thing is to follow the template and replace the values with your own.
- When you are ready, click on "Create pull request". 🎉💥💥🎉</li>
</ul>
<h3>4. Closing comments:</h3>
<hr>
<p>And Voila! Well done...you've just added your very first Pull Request. So what happens now?</p>
<p>Now, your PR will go through some simple checks and balances, and if all is satisfied it will be approved and merged by one of a few select Maintainers of this repo.</p>
<p>If there is anything wrong, we will notify you back through the PR itself, which you will get notified via email.😉</p>
<p>This is just the start. Get your PR in, wait for it to be reviewed/approved/merged. And then throw your efforts at adding another PR, but this time following along to the <a href="intermediate.md">Intermediate guide</a>, and making adding a HTML & CSS Single page creation.</p>
<p>🤜 Thank you! 😀</p>
</main>
</div>
  </body>
</html>