Contribute To This Project

Announcement: Would you like to become a maintainer on this project and help keeping it going? If you are interested send me a DM on Twitter and read the maintainer's guide.

Introduction

This is a tutorial to help first-time contributors to participate in a simple and easy project.

This tutorial is also available in other languages (Portuguese, Spanish, and Italian currently. Translations very welcome).

Objectives

• Make a contribution to an open source project.
• Get more comfortable in using GitHub.

Who is this for?

• This is for absolute beginners. If you know how to write and edit an anchor tag <a href="" target=""></a> then you should be able to do it.
• It is for those with a little more experience but who want to make their first open source contribution, or get more contributions for more experience and confidence.

Why do I need to do this?

Any web developer, aspiring or experienced needs to use Git version control, and GitHub is the most popular Git hosting service used by everyone. It is also the heart of the Open Source community. Getting comfortable using GitHub is an essential skill. Making a contribution to a project boosts your confidence and gives you something to show on your GitHub profile.

If you are a new developer and you are wondering if you need to learn Git and GitHub then here is the answer: You Should've Learned Git Yesterday.

What am I going to contribute?

You are going to contribute a card just like this one to this project's web page. It will include your name, your Twitter handle, a short description, and 3 links to useful resources for web developers that you recommend.

You will make a copy of the card template inside the HTML file and customise it with your own information.

Quick Access Index

Introduction What am I going to contribute? Setup Contribute → Next Steps Acknowledgements	Contribute: Step 1: Fork this repository Step 2: Clone the repository Step 3: Create a new branch Step 4: Open the index.html file Step 5: Copy the card template Step 6: Apply your changes Step 7: Commit your changes Step 8: Push your changes to GitHub Step 9: Submit a PR Step 10: Celebrate!

Setup

First let's get setup to do the work

1. Login to your GitHub account. If you don't yet have an account then join GitHub. I recommend that you do the GitHub Hello World tutorial before you continue.
2. Download GitHub Desktop app.
3. Alternatively if you are comfortable using Git on the command line you can do so (here's first-contributions, a similar project that can serve as a guide for the commands needed). OR
4. If you use VS Code it comes with integrated Git and allows you to do what we need straight from the editor.
5. However the simplest and easiest way to follow this tutorial is using GitHub Desktop.

Now that you are all setup let's get on with the business of contributing to the project.

---

---

Contribute

Become an open source contributor in 10 easy steps.

Estimated time: Less than 30 minutes.

Step 1: Fork this repository

• The objective here is to make a copy of this project and place it in your account.
• A repository (repo) is how a project is called on GitHub and a fork is a copy of it.
• Make sure you are on the main page of this repo.

Click on the Fork button

• You now have a complete copy of the project in your own account

---

Step 2: Clone the repository

• Now we want to make a local copy of the project. That is a copy saved on your own machine.
• Open the GitHub desktop app. In the app:

Click on File then Clone repository

You will see a list of your projects and forks on GitHub. Select <your-github-username>/Contribute-To-This-Project. Click Clone
A forked project will have the fork symbol on the left. Your fork will have your own GitHub user name.

• This will take a moment as the project is copied to your hard disk. I recommend that you keep the default path which is usually ..\Documents\GitHub.
• Now you have a local copy of the project.

---

Step 3: Create a new branch

• Once the repo has been cloned and you have it open in GitHub desktop it is time to create a new branch.
• A branch is a way to keep your changes separate from the main part of the project called Master. For example if things go wrong and you are not happy with your changes you can simply delete the branch and the main project won't be affected.

Click on Current branch Then click on New

Give your branch a name Click Create branch

• You can name it whatever you want, but since this is a branch to add a card with your name to the project, calling it your-name-card is good practice because it keeps the intention of this branch clear.

Publish your new branch to Github

• Now you have created a new branch separate from the master.
• For the next steps make sure you are working in this branch. You will see the name of the branch you are on at the top center of the GitHub desktop app where it says Current branch.

Do NOT work on the master branch

---

Step 4: Open the index.html file

• Now we need to open the file we are going to edit with your favourite code editor.
• Find the project folder on your computer. If you have kept the default this should be something like your-computer > Documents > GitHub > Contribute-To-This-Project
• The index.html file is directly in the Contribute-To-This-Project folder.

Open your code editor (Sublime, VS Code, Atom..etc) and use the Open file command and locate the index.html file in the main directory of the project Alternatively you can locate the file on your hard drive, right click, and open with your editor

• Now you have the file you are going to edit open in your editor and you are ready to start making changes to it.

---

Step 5: Copy the card template

• We will make a copy of the card template to start working on it

At the top of the html file, under the <head> and <header> sections you will find the section labelled == TEMPLATE == Copy everything within the red square in the image, from the Contributor card START comment to the Contributor card END comment

Paste the whole thing directly below the comment indicating it Make sure there is a single line of space between your card start and the last card end. It's good practice to keep our code as clear as possible Never use a linters or style formatters. The project has Prettier setup

• This now is your card for you to customise and edit.

---

Step 6: Apply your changes

• We will now start editing the html, changing the customizable fields in our card.

Replace 'Name' with your name Note: Don't change class="name"

Insert the URL of your Twitter account href="https://github.com/Syknapse/Contribute-To-This-Project/raw/v3.1.0/Insert URL here" Type your handle in the text field

• If you prefer to use a contact other than Twitter you will need to replace the twitter icon <i class="fa fa-twitter"></i> by going to Font Awesome Icons searching for the right icon and replacing only the fa-twitter part with the ne