How to participate in the Hacktoberfest as a Code Newbie 💻
Tags: hacktoberfest, github, git, webdev
Published: 2020-10-04 17:04:31

## What I Learned From Hacktoberfest so far

This is my first Hacktoberfest event to participate in as a code newbie. To be honest at first, when I had the about the event, I thought it was a month where hackers come together and hack their way into any server. In the end, those that hack into the most 'secure' servers win. (Don't laugh at me, I blame MR.Robot😂, in my defense, I didn't even know what HTML was, at that time.) But since last month I have engaged in a few open-source projects and to be honest, I have learned so much. At times I just look back at how little I knew and laugh, I was so nervous to even make my first Pull request. (Will it be good enough to be merged, do I know what I am doing 👀). The first try I ever did, It got rejected cause I forget to make a branch (I was so frustrated that I could forget something so simple 😒). But when I started to contribute to more projects, I made fewer errors, and a lot of my PRs(Pull Requests) got merged. I am now participating more and even rising issues to different projects that I participate in. Mostly the accessibility issues because I find most people build amazing projects but tend to forget the little things like contrast errors, not using labels in the inputs or having the same alt text in all images, etc. If you just started coding a few weeks ago and this is your first time contributing to an open-source project, I will show you step by step on how to do it. (basics common steps)

![happy cat gif](https://media.giphy.com/media/xT0xeQfucCAPaq3nQ4/giphy.gif)

### How to participate with basic HTML and CSS or JS skills

If you are a beginner in the coding world you might be nervous or scared this event will pass by without you participating. But the good news is, you don't have to be a hardcore developer to participate. I will show you, where you find beginner-friendly projects and engage with the open-source community.

### 1) Register for the event

One thing you should have before registering is creating a Github account (If you already have one, you are good to go). You will be able to sign in to your account and they will track your Pull request for this month. Plus there is a 14 days review window, so you can get your Pull request sorted during this time. 

- Click the `start hacking button` and you will be directed to connect to your GitHub account.

    ![https://i.ibb.co/JFxRpws/Screenshot-246.png](https://i.ibb.co/JFxRpws/Screenshot-246.png)

- Click the `sign in with Github` button
This will direct you to log in to your GitHub account and authorize it. Now you have successfully registered as a contributor to the event.
![hacktoberfest website screenshot](https://i.ibb.co/ZVVPknZ/Screenshot-250.png)

### 2) Find projects you can participate in

In the other years, you could participate in any Public GitHub project that was open source. But this year there are new rules (at least the few ones that were updated from 3rd October). For your Pull Request to count the project you want to be involved in must have a hacktoberfest topic in the repository. This just means they have accepted to participate in the event.
I made a PR on a hacktoberfest label issue but the repository didn't have the topic. So the PR was marked as `❗Ineligible Repository`. If you find such projects you can raise an issue about it(ask the maintainer to add the hacktoberfest topic) or move on to valid projects.

<blockquote>

PRs count if:
Submitted in a repo with the hacktoberfest topic AND
during the month of October AND (
  The PR is merged OR
  The PR is labeled as hacktoberfest-accepted by a maintainer OR
  The PR has been approved
)

</blockquote>

**Important** : [Check out the 2020 hacktoberfest updated rules](https://hacktoberfest.digitalocean.com/hacktoberfest-update)

### Where to find projects?

- Go to the [Hacktoberfest website]
(https://hacktoberfest.digitalocean.com/).
The official website has everything you will need, from which projects you can participate in and the questions you what some clarification(FAQ).

![hacktoberfest website scrrenshot](https://i.ibb.co/1s6761c/Screenshot-245.png)

- Go to your Github account and filter projects with the [Hacktoberfest Topic](https://github.com/topics/hacktoberfest)
Yes, if the repository doesn't have the hacktoberfest topic your PR will be marked as `❗Ineligible Repository`. Play it safe and follow the rules. But if you just want to contribute without partaking in the event you can contribute to any open-source repo.

![hactoberfest topic on github](https://i.ibb.co/9nNfkfG/Screenshot-251.png)

- Create your own project. If you have Html, CSS, or even Javascript skills you can create your own project and ask your dev friends to participate. Yes, you can be a maintainer even if it's a small project. Then create issues like: make the navbar responsive, make the website have zero contrast errors on [wave](https://wave.webaim.org/extension/) or post design with a zip folder to your assets and other devs can turn it to code. There are many possibilities. If you see other projects are too complex, create your own and in the process, you will help other beginners learn how to code. You can follow resources lists of the Hacktoberfest website and get to see how to be an [effective maintainer](https://hacktoberfest.digitalocean.com/details#maintainers)💕

### 2) Steps to take to make your contribution
When you find the right project for you, remember to follow the [PR etiquette](https://dev.to/devteam/hacktoberfest-etiquette-for-contributors-ec6).
Let's do any easy step to a [beginner project](https://github.com/muchirijane/learning-code-through-github-repos), just to give you a visual guide on how to do this yourself. I love learning as I follow along. Hope you understand as you follow the steps with me.🙂

### 1) Fork the Github project

This is done by clicking the fork button on top of the page. This will create a copy of the repository in your own Github account.

![fork a github repo](https://i.ibb.co/CHRWsxF/Screenshot-253.png)

### 2) Step two: Clone the project

![Clone a project](https://i.ibb.co/nRxH5yX/Screenshot-157.png)

Click on the clone button and then click on the copy to clipboard icon.
This will create a copy of the project files to your local environment.
Ps: You can create an 'open source' folder where you want to copy the project files.
Open your terminal or in my case 'cdmer' and run

```
   git clone <URL>

   ## Let's get the URL for the contributions repo
   git clone https://github.com/muchirijane/learning-code-through-github-repos

```

### 3) Run git status

Before you start coding run git status to make sure everything in the project files are updated with the 'origin/master/main branch'.

```
   git status

```

### 4) Create a new branch

In this small open-source project for beginners, your task is to add Github repositories with resources and tools.
The branch will include your resource under the feature flag

```
   git checkout -b feature/<add-your-resource-in-the-branch>
   ## In my situation the branch should be 
   git checkout -b feature/react-resource

```

### 5) Make your contribution

In this case, you are required to add your resource to the readme.md file. But you have to use the feature flag and compare it to the develop branch, not the main branch.
After that run git add, git commit and push your branch

```
   git add .
   ## commit the changes
   git commit -m "added awesome react resource GitHub repository  to the readme file"
   ## Let's push our branch
   git push origin <branch-name-you-created>
   git push origin feature/react-resource develop

```

### 6) Compare and Pull request

Nope! you are not done yet, one more step.
To contribute your code to the origin repository.
Click Compare and pull request

![compare your pull request](https://i.ibb.co/RcQGR20/Screenshot-158.png)

### 7) Create a new pull request

In some projects, you will have to really go into detail because they are using a PR template. You got to check [x] the correct checkboxes depending on your pull request. Ensure your pull request has a hacktoberfest-accepted label(I don't know how crucial this step is but you can ask around). This action should be taken by the maintainer of the project. (Take a look at the updated [rules](https://hacktoberfest.digitalocean.com/hacktoberfest-update))

![open source contribution on github](https://i.ibb.co/SK0RZcS/Screenshot-252.png)

That's it, congratulations you just made your first successful hacktoberfest pull request. I'm so proud of you!!!

![happy cat dance](https://media.giphy.com/media/l49JIRwXxVUS0VBTy/giphy.gif)

### In conclusion

Let me just say this, don't make pull requests just for the sake of making them or getting a T-shirt/platting a tree. Take this, a serious way to learn how to contribute and be part of the open-source community. Don't spam repos by deleting and adding the same code just for a commit. (I have seen messed up things on twitter 😒). Take your time to understand the project, go to the [contribution.md](http://contribution.md/) file, and see the steps to take to contribute to the project. Ensure you make meaningful commits. 
- Example of a bad commit I have seen going around twitter
![bad commit](https://i.ibb.co/4f68CRP/bad-commit.jpg)
For more details about Hacktoberfest follow the [Dev series](https://dev.to/devteam) here on dev.to. You will get updates and things you need to know during the event. If you want to learn more about [Git and Github for beginners, Check out my first post](https://dev.to/tracycss/git-and-github-for-beginners-po3).
If you want to practice on how to make a pull request, I have a [small open-source project](https://github.com/muchirijane/learning-code-through-github-repos) about adding useful resources. Read the contribution.md file and make a pull request. I will merge it Asap. 
You can also join the [Hacktoberfest Discord channel](https://discord.com/invite/hacktoberfest) for updates, help in your open-source project, or sharing your project for others to contribute.
Apart from that, I want to wish you a happy hacktoberfest, and thank you for your support. I truly appreciate it.

If you find this post useful share it with your peers or beginners who are learning how to contribute to open-source projects - Hacktoberfest event. They might find these guidelines useful in their journey. You can also buy me coffee. 🙂

<a href="https://www.buymeacoffee.com/janetracy" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" height="41" width="174" loading="lazy"></a>