Introduction

Welcome 👋 to this blog. What is open-source? Did you hear about open-source and think "Can I contribute?" or thought "Is it difficult to contribute to open source?".
I know only HTML, CSS etc. Can I able to contribute? or I don't have an IT background Can I able to contribute?
If these types of questions come to your mind then this blog is for you 😊.

While reading and following the steps of this blog from beginning to end. I guarantee you will able to make a Pull Request and merge after review in this open-source web application. Please have a look at this web application.

Let's break down the part of contribution into steps:

1. Fork the repository
2. Clone the repository to your local system.
3. Open it in code-editor
4. Install dependencies(If needed)
5. Make a separate branch and make your changes there.
6. Commit and Push your changes to your forked repository.
7. Make a Pull Request (PR).

Step 1 Fork the repository

To contribute to any open-source project you must make a fork of it. What do you mean by that? Let's understand it. Let's take an example of my repository The whole codebase is hosted in https://github.com/ankur0904/card by URL it is absolutely clear that the card repository belongs to the ankur0904 account. That means you or anyone in the world don't have permission to make changes in the repository.
But contributing to open source means you can contribute to this project. BUT HOW?? The solution is to make a copy of the same codebase with your account. You can do it by simply clicking the Fork button.
Go to this URL and click on the Fork button

Step 2 Clone the repository to your local system

The next step is to clone the repository to your local environment. For this copy the https URL.

After then open the terminal and run this command

$ git clone https://github.com/<YOUR_USERNAME>/card.git

Note: For cloning the repository you must have git installed on your local environment. If not installed, install it from here.

Step 3 Open it in code-editor

Open the cloned folder into your favourite code editors.

Step 4 Install dependencies

Open the integrated terminal into your code editors and run the following command to install the required dependencies (in this case node_modules)

$ npm install

If you want to start the project you can run this command

$ npm start

Then go to the web browser and open http://localhost:3000.

Note: For installing the dependencies and running the project you must have installed node.js into your local environment if not. Download it from here.

Step 5 Make a separate branch and make your changes

To make a separate branch, you can run this command

$ git branch <BRANCH_NAME>

To switch to the new created branch, you can run this command.

$ git checkout <BRANCH_NAME>

BRANCH_NAME can be anything related to the issue or feature, you are working on or some projects have guidelines for the branch name convention.

Make your changes

On checking the file structure, you will notice there is a file names data.js.

The content of data.js is like that

const data = [
    {name: "Ankur Singh", technology: "Python, Javascript, C, C++", lastProject: "React.js", svg: `
      <svg xmlns="http://www.w3.org/2000/svg" width="250" fill="currentColor" class="bi bi-emoji-laughing pt-4" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
        <path d="M12.331 9.5a1 1 0 0 1 0 1A4.998 4.998 0 0 1 8 13a4.998 4.998 0 0 1-4.33-2.5A1 1 0 0 1 4.535 9h6.93a1 1 0 0 1 .866.5zM7 6.5c0 .828-.448 0-1 0s-1 .828-1 0S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 0-1 0s-1 .828-1 0S9.448 5 10 5s1 .672 1 1.5z" />
      </svg>
    `,},
]


export default data;

In this file you will add your code(Contribution), you will add a JSON Object like this

{name: "", technology: "", lastProject: "", svg: ``},

name: Write name
technology: Technology name
lastProject: Last project built on
svg: svg element

If you don't want to fill all the field, you can leave it blank by simply adding "-"

You can take the svg element from here. In the filter section type emoji and choose your desired emoji and copy the HTML. It will look like this

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-wink" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
</svg>

Note:

• In the class attribute, we have this bi bi-emoji-wink values, you please 🙏 add two another class pt-4 and my-svg to this and it'll look like this bi bi-emoji-wink pt-4 my-svg and remove any height and width attributes (if present)
• Add svg element in the (backtick) only.

Updated HTML element will look like this

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-emoji-wink pt-4 my-svg" viewBox="0 0 16 16">
    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
    <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
  </svg>

Everything till here is done. But let's cross-check. Your data.js folder will look something like that "" is filled with some data or -.

const data = [
  {name: "", technology: "", lastProject: "",svg: ``},
  {name: "", technology: "", lastProject: "",svg: ``},
]

export default data;

Step 6 Commit and Push your changes to your forked repository.

It's time to commit to your changes. You can think of committing as save. Run these commands

$ git add .
$ git commit -m "YOUR MESSAGE"

You can replace YOUR MESSAGE with any relevant message you want.

Time to push the code to your repository. To push run these commands

$ git push origin <BRANCH_NAME>

Step 7 Make a Pull Request

Then go to your profile and switch the branch to the new which is created by you.

There you see an option of Compare and Pull request Click on it and make a Pull Request.

You can change the title and description. You can write Adds new profile in the title.

Congrats!🥳🥳🥳 You made your first open-source contribution.

I will merge your PR within 24 hours.

You got it 🤩

You have learned how to contribute to open-source projects. Thanks for reading till the end. If you have any feedback, the comment section is yours. If you find this blog useful you can star this repository and connect with me.

Hire me: ankursingh91002@gmail.com
LinkedIn
Twitter