This project is waiting for your contribution. If you have never contributed code on GitHub before, this is the project to get you started.
See the code
Logo Created with 💖 By CandidDeer
Announcement:
Would you like to become a maintainer on this project and help keeping it going? If you are interested, read the maintainer's guide, join our Discord server, and request to join the team from the project maintainers.
This is a tutorial to help first-time contributors to participate in a simple and easy project.
<a href="" target=""></a> then you should be able to do it.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](https://codeburst.io/number-one-piece-of-advice-for-new-developers-ddd08abc8bfa 'New Developer? You should've learned Git yesterday. by Brandon Morelli, creator of CodeBurst.io').
You are going to contribute a card just like this one to this project's web page. It will include your name, your contact details, a short description, and 3 links to useful resources for web developers that you recommend.
You will copy a ready-made card template file, fill it in with your own information, and submit it.
Already contributed a card? There are other ways to help — translations, bug fixes, accessibility improvements, and more. See CONTRIBUTING.md for the full guide.
This tutorial is also available in other languages
Translations for project documentation are welcome. Read
Translation Guideto contribute.
[!Note] This tutorial is based on GitHub Desktop. If you're comfortable with the terminal go to this tutorial (Click Here)
First let's get set up to do the work.
Want to improve the project itself? Translations, bug fixes, and other improvements are very welcome — but please keep them in a separate PR from your card. See CONTRIBUTING.md for the full process.
Now that you are all set up let's get on with the business of contributing to the project.
Become an open source contributor in 10 easy steps.
Estimated time: Less than 30 minutes.
 |
|---|
| Click on the Fork button |
 |
|---|
| Click on File then Clone repository |
<your-github-username>/Contribute-To-This-Project. |
|---|
| ↪️ A forked project will have the fork symbol on the left. Your fork will have your own GitHub user name |  |
|---|
..\Documents\GitHub.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, then click on Create branch |  |
| ↪️ Publish your new branch to GitHub |  |
your-name-card is good practice because it keeps the intention of this branch clear.Do NOT work on the master branch
The project has a ready-made card template waiting for you in the cards/ folder.
Find the project folder on your computer. If you kept the default path this will be something like your-computer > Documents > GitHub > Contribute-To-This-Project > cards.
In the cards/ folder you will find a file called template.html. That is your starting point.
Make a copy of template.html and rename the copy to your-github-username.html. For example, if your GitHub username is octocat, your file should be named octocat.html.
Now open cards/your-github-username.html in your code editor. This is the only file you will be editing.
<div class="card">
<p class="name">Your name</p>
<p class="contact">
<!-- Add one or more contact links. At minimum, include your GitHub. -->
<i class="fab fa-github"></i>
<a href="https://www.github.com/your_user_handle" target="_blank">Your handle</a>
</p>
<p class="about">Write a sentence or two about yourself.</p>
<div class="resources">
<p>3 Useful Dev Resources</p>
<ul>
<li>
<a href="#" target="_blank" title="First Resource">Resource 1</a>
</li>
<li>
<a href="#" target="_blank" title="Second Resource">Resource 2</a>
</li>
<li>
<a href="#" target="_blank" title="Third Resource">Resource 3</a>
</li>
</ul>
</div>
</div>
Replace Your name with your name. Do not change class="name".
Replace the GitHub link and handle with your own. You can add more contact links if you like — go to Font Awesome Icons and search for the right icon (e.g. fab fa-linkedin, fab fa-x-twitter). Same pattern, just swap the class.
Replace Write a sentence or two about yourself with a short description. Think of it more like a tweet than a blog post.
For each resource, replace # with a real link, add a short description in title="", and replace the link text. Share anything useful to web developers — a video, a talk, a podcast, an article, a tool. If you are a beginner don't be put off by this, share whatever you know even if you think it's basic. You'll be surprised how many people will benefit.
href="https://the-real-url.com" — use the full URL, no shorteners.title="Brief description" — a few words is enough.>Name of resource</a>.Make sure you have saved all your changes.
Note: Don't change any class names or the structure of the HTML. The bot that validates your PR checks for these.
https://, and nothing looks obviously wrong. |
|---|
↪️ The next step is called Commit. This roughly means confirm the changes |
 |
↪️ This is what your GitHub Desktop header should look like. Notice the fork symbol next to the project name in Current repository, and your Current branch will have the name you gave it in step 3 |
 |
↪️ To Commit you must fill in the Summary field. This is the commit message explaining what you have changed. In this case "Add my card information" would be a reasonable message. Optionally you can add a more detailed Description. Click the Commit button. Your button will say something like Commit to "your-branch-name" |
↪️ Click the Push button |  |
|---|
 |
|---|
↪️ Click on Compare and pull request |
 |
↪️ This is what the Open a pull request page looks like. |
Master branch on your fork. |
|---|
↪️ Create a pull request: Write a title, add optional information in the description, and click Create pull request |
Allow edits from maintainers ticked.That's it. You have done it! You have now contributed to open source on GitHub.
You have added code to a live web page: https://syknapse.github.io/Contribute-To-This-Project
Your card will be automatically reviewed and merged if everything is correct. If the bot finds an issue it will leave a comment on your PR explaining exactly what needs fixing — push the fix to the same branch and it will re-check automatically.
Where did my HTML file go? After a while, submitted cards are automatically archived to keep the repository lightweight. Your html file will be automatically removed from the cards/ directory, but its data is conserved in the archive. Your card still appears on the site. Find out more.
label for beginner-friendly contribution options.This project is heavily influenced by Roshan Jossey's great first-contributions project with its excellent tutorial.
It is also particularly inspired by the great community around #GoogleUdacityScholars The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe.
This project is licensed under the MIT License.
48 followers · starred Jan 2024
92 followers · starred Dec 2022
25 followers · starred Apr 2026
31 followers · starred Jul 2020
This project is waiting for your contribution. If you have never contributed code on GitHub before, this is the project to get you started.
See the code
Logo Created with 💖 By CandidDeer
Announcement:
Would you like to become a maintainer on this project and help keeping it going? If you are interested, read the maintainer's guide, join our Discord server, and request to join the team from the project maintainers.
This is a tutorial to help first-time contributors to participate in a simple and easy project.
<a href="" target=""></a> then you should be able to do it.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](https://codeburst.io/number-one-piece-of-advice-for-new-developers-ddd08abc8bfa 'New Developer? You should've learned Git yesterday. by Brandon Morelli, creator of CodeBurst.io').
You are going to contribute a card just like this one to this project's web page. It will include your name, your contact details, a short description, and 3 links to useful resources for web developers that you recommend.
You will copy a ready-made card template file, fill it in with your own information, and submit it.
Already contributed a card? There are other ways to help — translations, bug fixes, accessibility improvements, and more. See CONTRIBUTING.md for the full guide.
This tutorial is also available in other languages
Translations for project documentation are welcome. Read
Translation Guideto contribute.
[!Note] This tutorial is based on GitHub Desktop. If you're comfortable with the terminal go to this tutorial (Click Here)
First let's get set up to do the work.
Want to improve the project itself? Translations, bug fixes, and other improvements are very welcome — but please keep them in a separate PR from your card. See CONTRIBUTING.md for the full process.
Now that you are all set up let's get on with the business of contributing to the project.
Become an open source contributor in 10 easy steps.
Estimated time: Less than 30 minutes.
|
|---|
| Click on the Fork button |
|
|---|
| Click on File then Clone repository |
<your-github-username>/Contribute-To-This-Project. |
|---|
| ↪️ A forked project will have the fork symbol on the left. Your fork will have your own GitHub user name | |
|---|
..\Documents\GitHub.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, then click on Create branch | |
| ↪️ Publish your new branch to GitHub | |
your-name-card is good practice because it keeps the intention of this branch clear.Do NOT work on the master branch
The project has a ready-made card template waiting for you in the cards/ folder.
Find the project folder on your computer. If you kept the default path this will be something like your-computer > Documents > GitHub > Contribute-To-This-Project > cards.
In the cards/ folder you will find a file called template.html. That is your starting point.
Make a copy of template.html and rename the copy to your-github-username.html. For example, if your GitHub username is octocat, your file should be named octocat.html.
Now open cards/your-github-username.html in your code editor. This is the only file you will be editing.
<div class="card">
<p class="name">Your name</p>
<p class="contact">
<!-- Add one or more contact links. At minimum, include your GitHub. -->
<i class="fab fa-github"></i>
<a href="https://www.github.com/your_user_handle" target="_blank">Your handle</a>
</p>
<p class="about">Write a sentence or two about yourself.</p>
<div class="resources">
<p>3 Useful Dev Resources</p>
<ul>
<li>
<a href="#" target="_blank" title="First Resource">Resource 1</a>
</li>
<li>
<a href="#" target="_blank" title="Second Resource">Resource 2</a>
</li>
<li>
<a href="#" target="_blank" title="Third Resource">Resource 3</a>
</li>
</ul>
</div>
</div>
Replace Your name with your name. Do not change class="name".
Replace the GitHub link and handle with your own. You can add more contact links if you like — go to Font Awesome Icons and search for the right icon (e.g. fab fa-linkedin, fab fa-x-twitter). Same pattern, just swap the class.
Replace Write a sentence or two about yourself with a short description. Think of it more like a tweet than a blog post.
For each resource, replace # with a real link, add a short description in title="", and replace the link text. Share anything useful to web developers — a video, a talk, a podcast, an article, a tool. If you are a beginner don't be put off by this, share whatever you know even if you think it's basic. You'll be surprised how many people will benefit.
href="https://the-real-url.com" — use the full URL, no shorteners.title="Brief description" — a few words is enough.>Name of resource</a>.Make sure you have saved all your changes.
Note: Don't change any class names or the structure of the HTML. The bot that validates your PR checks for these.
https://, and nothing looks obviously wrong. |
|---|
↪️ The next step is called Commit. This roughly means confirm the changes |
|
↪️ This is what your GitHub Desktop header should look like. Notice the fork symbol next to the project name in Current repository, and your Current branch will have the name you gave it in step 3 |
|
↪️ To Commit you must fill in the Summary field. This is the commit message explaining what you have changed. In this case "Add my card information" would be a reasonable message. Optionally you can add a more detailed Description. Click the Commit button. Your button will say something like Commit to "your-branch-name" |
↪️ Click the Push button | |
|---|
|
|---|
↪️ Click on Compare and pull request |
|
↪️ This is what the Open a pull request page looks like. |
Master branch on your fork. |
|---|
↪️ Create a pull request: Write a title, add optional information in the description, and click Create pull request |
Allow edits from maintainers ticked.That's it. You have done it! You have now contributed to open source on GitHub.
You have added code to a live web page: https://syknapse.github.io/Contribute-To-This-Project
Your card will be automatically reviewed and merged if everything is correct. If the bot finds an issue it will leave a comment on your PR explaining exactly what needs fixing — push the fix to the same branch and it will re-check automatically.
Where did my HTML file go? After a while, submitted cards are automatically archived to keep the repository lightweight. Your html file will be automatically removed from the cards/ directory, but its data is conserved in the archive. Your card still appears on the site. Find out more.
label for beginner-friendly contribution options.This project is heavily influenced by Roshan Jossey's great first-contributions project with its excellent tutorial.
It is also particularly inspired by the great community around #GoogleUdacityScholars The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe.
This project is licensed under the MIT License.
48 followers · starred Jan 2024
92 followers · starred Dec 2022
25 followers · starred Apr 2026
31 followers · starred Jul 2020