Someone just finished creating a website to document BCC contributors in 2022. Since the creator wanted new contributors to create PR for the first time, the author didn't write all the names of the contributors themselves. However, giving contributors the freedom to do it themselves.
https://bcc-contributor.netlify.app
- Make a contribution to an open source project.
- Get more comfortable in using GitHub.
- This is for absolute beginners.
- It is for those with a little more experience but who want to make their first open source contribution.
You are going to contribute a card just like this one to this project's web page. It will include your name, picture, a short description, your Instagram profile URL handle, and Github link. You will make a copy of the card template inside the HTML file and customise it with your own information.
1️⃣ Fork this repository
2️⃣ Create a new branch
3️⃣ Clone the repository
4️⃣ Open the directory file in the VSCode
5️⃣ Copy the card template and make changes
6️⃣ Commit and push your changes
7️⃣ Submit a PR
8️⃣ Celebrate!
9️⃣ See your card
Get your hand dirty
Click Fork to copy this repo to your github account
 |
|---|
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.
So, you can click "Create branch: ..." like the picture below
 |
|---|
Copy the URL and open your terminal. Then write command like the picture below
 |
|---|
 |
First, open the directory using VSCode
 |
|---|
Then, change the active branch "main" to the branch you created. Command : git checkout <YOUR-BRANCH>
 |
|---|
You can copy the card template from here. Then put the code file after </div> belongs to <div class="card">
<!-- Copy from this line -->
<div class="card">
<div class="card-header">
<img src="YOUR_PICTURE_URL" />
</div>
<div class="card-body">
<span class="tag tag-teal">Your Departement</span>
<h3>YOUR_NAME</h3>
<p>
YOUR_SHORT_DESCRIPTION
</p>
<div class="sosmed">
<a href="https://github.com/YOUR_USERNAME">
<i class="bi-github" style="font-size: 1.8rem; color: black;"></i>
</a>
<a href="https://instagram.com/YOUR_USERNAME">
<i class="bi-instagram" style="font-size: 1.8rem; color: black;"></i>
</a>
</div>
</div>
</div>
<!-- Until this line -->You can use another color for your tag. This is color code in the style.css. So, you can customization on tag color freely.
<style>
.tag-teal {
background-color: #47bcd4;
}
.tag-purple {
background-color: #5e76bf;
}
.tag-pink {
background-color: #cd5b9f;
}
</style>After that, make any changes to your template. Make sure your changes are only in the index.html file.
 |
|---|
To commit and push your changes. Follow the command below
git add .
git commit -m "<YOUR-MESSAGE-COMMIT>"
git push -u origin <YOUR-NEW-BRANCH>
 |
|---|
Click Compare & pull request to copy this repo to make pull request from your branch to main branch.
If the text Able to merged is visible that means, your changes do not create conflict. So, you can click Create pull request after write a comment.
 |
|---|
 |
Congratulation! you have been able to make a pull request. Wait for an update from the owner to see if the PR you have created is merged or rejected.
If the owner has approved your pull request, you can check to this link.
Thank you for considering contributing our Repository! The contribution guide can be found in the Contribution Guidelines.
For educational purposes only, not commercial.
Thanks for the random repos which have good documentation on README.md and CONTRIBUTING.md. So I can write this markdown clearly.