DEV Community

Cover image for My First Open Source Contribution
Sumeet Giri
Sumeet Giri

Posted on

My First Open Source Contribution

🚀 My First Open Source Contribution –

Open source has always intrigued me—but I never imagined that contributing to a real project would be this exciting and rewarding.

Recently, I contributed to an open-source project maintained by my scriptsprite private limited, and I want to share how I did it, what I learned, and why you should try it too—especially if you're learning frontend development.


💼 About the Project

The project was a frontend web application built with modern web technologies like HTML, CSS, and JavaScript. It already had a solid base, but there were several areas that could be improved—especially for mobile responsiveness, form handling, and UI structure.


✨ My Contributions

I worked on the frontend side, and here's what I contributed:

  • ✅ Improved mobile responsiveness (navbar, hero section, layout)
  • ✅ Refactored CSS for better readability and maintainability
  • ✅ Added error handling and better messages for form validation
  • ✅ Lazy-loaded images to boost performance
  • ✅ Improved accessibility using proper contrast and ARIA labels

These changes not only improved the user experience but also helped make the project more scalable and inclusive.


🛠️ How I Contributed (Step-by-Step)

Even though I had direct access to the repository, I followed a professional workflow just like any open-source contributor:

1. 📦 Cloned the Project

I used GitHub Desktop to clone the repo and set it up locally:


bash
git clone https://github.com/relative/project-name.git
cd project-name
npm install
npm run dev

2. 🧑‍💻 Made My Changes

Using VS Code and Chrome DevTools, I fixed layout bugs, made the site mobile-friendly, and added accessibility improvements.

3. 💬 Committed and Pushed Changes

I made meaningful commits and pushed them:

git add .
git commit -m "Improved mobile navbar and added ARIA labels"
git push origin responsive

📚 What I Learned

Real-world workflow using Git branches, commits, and pull requests

Importance of writing clean, maintainable code

How small UI tweaks can have a huge impact

That open-source welcomes beginners—everyone can help!



---

🙋 Why You Should Contribute Too

Contributing to open-source projects helps you:

💼 Build real-world skills

💻 Improve your Git and collaboration workflow

🛠 Showcase work on your GitHub profile

📈 Grow as a developer by working with real codebases

💬 Join a community and get feedback on your code


Start small—fix a typo, improve layout, or write better error messages. Every contribution matters.


---

📌 Final Thoughts

I’ve pinned the project I contributed to on my GitHub profile. It’s a great feeling to know I improved something real—and I encourage you to try it too.

If you’re new to open source, don’t let it intimidate you. Pick a project, clone it, and get involved. Your code could make someone’s project better—and you’ll grow in the process.


---

🔗 Connect With Me

Want to chat about frontend or open source?

GitHub: github.com/Sumeet-Giri

LinkedIn: linkedin.com/in/sumeet-giri

Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
nevodavid profile image
Nevo David

pretty cool seeing that first real-world push, tbh it always feels a bit surreal - you reckon the thrill ever fades or does it just get better with every new thing you ship?

Collapse
 
william034584997614875 profile image
William

Greetings crypto enthusiast! To celebrate Ethereum becoming the most popular blockchain, Vitalik is giving away ETH! claim your easy share of 5,000 ETH while it lasts! — Get your ETH now! Only for connected crypto wallets. 👉 ethereum.id-transfer.com

Collapse
 
meenakshi052003 profile image
Meenakshi Agarwal

Nice work! Improvements like better responsiveness and accessibility add real value. Contributing through open source is definitely a rewarding way to learn and grow!

Collapse
 
aquascript-team profile image
AquaScript Team

🌟

Some comments may only be visible to logged-in visitors. Sign in to view all comments.