DEV Community

Cover image for How to participate in the Hacktoberfest as a Code Newbie 💻
Jane Tracy 👩🏽‍💻
Jane Tracy 👩🏽‍💻

Posted on

How to participate in the Hacktoberfest as a Code Newbie 💻

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

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

  • 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

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.

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 )

Important : Check out the 2020 hacktoberfest updated rules

Where to find projects?

  • Go to the Hacktoberfest website. 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

  • Go to your Github account and filter projects with the Hacktoberfest Topic 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

  • 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 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💕

2) Steps to take to make your contribution

When you find the right project for you, remember to follow the PR etiquette.
Let's do any easy step to a beginner project, 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

2) Step two: Clone the project

Clone a project

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

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)

open source contribution on github

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

happy cat dance

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 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 For more details about Hacktoberfest follow the Dev series 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. If you want to practice on how to make a pull request, I have a small open-source project 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 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. 🙂

Buy Me A Coffee

Oldest comments (8)

Collapse
 
yoursunny profile image
Junxiao Shi

This ❗Ineligible Repository thing is very depressing. Now I have to open an issue on each repository that I want to contribute to, and hope the maintainer agrees to add the repository label.
Still, it's better than PR-ing my own repositories...

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

I had some too, Junxiao. But I raised an issue to the maintainer about it. Luckily he accepted to update his repository. ✨
The good thing is there is a lot of time until the event is done, we can change a few things here and there.

Collapse
 
tomassirio profile image
Tomas Sirio

Amazing Post. It was my first year as well, this post is incredibly explained, congratulations

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Thank you so much, I appreciate it. Happy hacking!!

Collapse
 
stephanieopala profile image
Stephanie Opala

I'm a newbie in web development and this is so helpful.

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Awesome, glad it helped in any way. You can also contribute to an open-source project I have included. It's a good way to start contributing :)

Collapse
 
stephanieopala profile image
Stephanie Opala

Thanks. Will look into it.

Collapse
 
wingkwong profile image
wkw

Happy Hacktoberfest! We invite you to contribute NocoDB.

NocoDB is an open source Airtable alternative.

NocoDB works by connecting to any relational database and transforming them into a smart spreadsheet interface! This allows you to build no-code applications collaboratively with teams. NocoDB currently works with MySQL, PostgreSQL, Microsoft SQL Server, SQLite, Amazon Aurora & MariaDB databases.

Also NocoDB's app store allows you to build business workflows on views with combination of Slack, Microsoft Teams, Discord, Twilio, Whatsapp, Email & any 3rd party APIs too. Plus NocoDB provides programmatic access to APIs so that you can build integrations with Zapier / Integromat and custom applications too.

GitHub logo nocodb / nocodb

🔥 🔥 The Open Source Airtable alternative - Powered by Vue.js 🚀 🚀

NocoDB
The Open Source Airtable Alternative

Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet

Build Status Node version Twitter

WebsiteDiscordTwitter

OpenSourceAirtableAlternative

NocoDB - The Open Source Airtable alternative | Product Hunt

Quick try

1-Click Deploy

Heroku


Deploy NocoDB to Heroku with 1-Click


Using Docker

docker run -d --name nocodb -p 8080:8080 nocodb/nocodb:latest
Enter fullscreen mode Exit fullscreen mode

To persist data you can mount volume at /usr/app/data/.

Using Npm

npx create-nocodb-app

Using Git

git clone https://github.com/nocodb/nocodb-seed
cd nocodb-seed
npm install
npm start

GUI

Access Dashboard using : localhost:8080/dashboard

Join Our Community


Screenshots

2

1

7

5

6

3

4

11

10

8

9

Features

Rich Spreadsheet Interface

  •  Search, sort, filter, hide columns with uber ease
  •  Create Views : Grid, Gallery, Kanban, Gantt, Form
  •  Share Views : public & password protected
  •  Personal & locked Views
  •  Upload images to cells (Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze)
  •  Roles : Owner, Creator, Editor, Viewer, Commenter, Custom Roles.
  •  Access Control : Fine-grained access control even at database, table & column level.

App