add page for how to contribute

Roshanjossey · Roshanjossey · commit ac056613edb0 · 2025-03-01T01:31:36.000+01:00
diff --git a/.astro/data-store.json b/.astro/data-store.json
@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
diff --git a/src/cra-project/App.css b/src/cra-project/App.css
@@ -12,6 +12,11 @@
   color: white;
 }
 
+.App-header a {
+  text-decoration: unset;
+  color: unset;
+}
+
 .App-header > h1 {
   /* padding-top: 6%; */
   font-size: 5.1rem;
@@ -32,4 +37,4 @@
     font-weight: 700;
   }
 
-}
+}
diff --git a/src/cra-project/App.jsx b/src/cra-project/App.jsx
@@ -10,7 +10,7 @@ const App = () => {
   return (
     <div className="App">
         <div className="App-header">
-            <h1>Make your first <br/> open source <span>contribution</span> <br/> in 5 minutes</h1>
+            <h1>Make your first <br/> <a href="https://firstcontributions.github.io/contribute-to-opensource"> open source <span>contribution</span> </a> <br/> in 5 minutes</h1>
         </div>
         <LinkButton />
         <CardsContainer />
diff --git a/src/pages/contribute-to-opensource.astro b/src/pages/contribute-to-opensource.astro
@@ -0,0 +1,297 @@
+---
+---
+
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <title>
+    How to Contribute to Open Source: A Complete Guide for Beginners
+  </title>
+  <meta
+    name="title"
+    content="How to Contribute to Open Source: A Complete Guide for Beginners"
+  />
+  <meta
+    name="description"
+    content="Learn how to contribute to open source with this beginner-friendly guide. Discover the benefits, steps, and best practices for making your first contribution."
+  />
+  <meta name="author" content="sudo !!" />
+  <meta
+    name="keywords"
+    content="open source, github, contribute to open source, beginner programmer, open source contributions, git basics, pull requests, coding, software development, programming"
+  />
+
+  <meta property="og:type" content="article" />
+  <meta
+    property="og:url"
+    content="https://firstcontributions.github.io/contribute-to-opensource"
+  />
+  <meta
+    property="og:title"
+    content="How to Contribute to Open Source: A Complete Guide for Beginners"
+  />
+  <meta
+    property="og:description"
+    content="Learn how to contribute to open source with this beginner-friendly guide. Discover the benefits, steps, and best practices for making your first contribution."
+  />
+  <meta
+    property="og:image"
+    content="https://firstcontributions.github.io/assets/preview-image.jpg"
+  />
+
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta
+    property="twitter:url"
+    content="https://firstcontributions.github.io/contribute-to-opensource"
+  />
+  <meta
+    property="twitter:title"
+    content="How to Contribute to Open Source: A Complete Guide for Beginners"
+  />
+  <meta
+    name="twitter:description"
+    content="Learn how to contribute to open source with this beginner-friendly guide. Discover the benefits, steps, and best practices for making your first contribution."
+  />
+  <meta
+    property="twitter:image"
+    content="https://firstcontributions.github.io/assets/preview-image.jpg"
+  />
+
+  <!-- Canonical URL -->
+  <meta
+    rel="canonical"
+    href="https://firstcontributions.github.io/contribute-to-opensource"
+  />
+
+  <!-- Favicon -->
+  <link
+    rel="icon"
+    type="image/png"
+    href="https://firstcontributions.github.io/assets/first-contributions-logo.svg"
+  />
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/chota@0.9.2/dist/chota.min.css"
+  />
+
+  <!-- Structured Data / Schema.org -->
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Article",
+      "headline": "How to Contribute to Open Source: A Complete Guide for Beginners",
+      "description": "Learn how to start contributing to open source projects with this comprehensive guide. Perfect for beginners, including step-by-step instructions, best practices, and expert tips.Learn how to contribute to open source with this beginner-friendly guide. Discover the benefits, steps, and best practices for making your first contribution.",
+      "image": "https://firstcontributions.github.io/assets/preview-image.jpg",
+      "author": {
+        "@type": "Person",
+        "name": "sudo !!"
+      },
+      "publisher": {
+        "@type": "Organization",
+        "name": "First contributions",
+        "logo": {
+          "@type": "ImageObject",
+          "url": "https://firstcontributions.github.io/assets/first-contributions-logo.svg"
+        }
+      },
+      "datePublished": "2025-02-01",
+      "dateModified": "2025-02-01"
+    }
+  </script>
+</head>
+<body>
+  <main class="container">
+    <article>
+      <section>
+        <h1>
+          How to Contribute to Open Source: A Comprehensive Guide for Beginners
+        </h1>
+        <p>
+          TL;DR if you prefer making your first pull request on GitHub right away, go to <a href="https://github.com/firstcontributions/first-contributions">first contributions</a>
+        </p>
+        <p>
+          Contributing to open source is one of the most rewarding ways to grow
+          as a developer, build your portfolio, and give back to the community.
+          Whether you're a seasoned programmer or just starting out, open source
+          offers endless opportunities to learn, collaborate, and make an
+          impact. In this guide, we’ll walk you through everything you need to
+          know about contributing to open source, from finding the right project
+          to making your first contribution.
+        </p>
+      </section>
+      <section>
+        <h2>Why Contribute to Open Source?</h2>
+        <p>
+          Before diving into the "how," let’s explore the "why." Contributing to
+          open source offers numerous benefits:
+        </p>
+
+        <ul>
+          <li>
+            Skill Development: Open source projects expose you to real-world
+            codebases, helping you improve your coding, debugging, and
+            collaboration skills.
+          </li>
+          <li>
+            Portfolio Building: Contributions to well-known projects can enhance
+            your resume and GitHub profile, making you stand out to potential
+            employers.
+          </li>
+          <li>
+            Networking: You’ll connect with developers worldwide, learn from
+            experts, and become part of a global community.
+          </li>
+          <li>
+            Giving Back: Open source powers much of the software we use daily.
+            Contributing is a way to support the tools and technologies you rely
+            on.
+          </li>
+          <li>
+            Career Opportunities: Many companies actively seek developers with
+            open source experience, as it demonstrates initiative and teamwork.
+          </li>
+        </ul>
+      </section>
+      <section>
+        <h2>How to Get Started with Open Source Contributions</h2>
+        <h3>1. Choose the Right Project</h3>
+        <p>
+          Finding the right project is crucial. Look for projects that align
+          with your interests, skill level, and goals. Here’s how to find them:
+        </p>
+        <ul>
+          <li>
+            Explore GitHub: Use GitHub’s Explore page or search for topics like
+            "good-first-issue" or "help-wanted."
+          </li>
+          <li>
+            Check Open Source Programs: Programs like Google Summer of Code or
+            Hacktoberfest are great for beginners.
+          </li>
+          <li>
+            Follow Your Tools: Contribute to libraries, frameworks, or tools you
+            already use.
+          </li>
+        </ul>
+
+        <h3>2. Understand the Project</h3>
+        <p>Before contributing, take time to understand the project:</p>
+
+        <ul>
+          <li>
+            Read the Documentation: Start with the README file, contribution
+            guidelines, and code of conduct.
+          </li>
+          <li>
+            Explore the Codebase: Familiarize yourself with the project
+            structure and coding style.
+          </li>
+          <li>
+            Join the Community: Participate in discussions on forums, Slack, or
+            Discord to get a feel for the community.
+          </li>
+        </ul>
+        <h3>3. Start Small</h3>
+        <p>Begin with small, manageable tasks to build confidence:</p>
+
+        <ul>
+          <li>
+            Fix Bugs: Look for issues labeled "good-first-issue" or
+            "beginner-friendly."
+          </li>
+          <li>
+            Improve Documentation: Documentation updates are often overlooked
+            but highly valuable.
+          </li>
+          <li>
+            Write Tests: Adding tests is a great way to contribute and learn
+            about the codebase.
+          </li>
+        </ul>
+
+        <h3>4. Follow Best Practices</h3>
+        <p>When contributing, adhere to the project’s guidelines:</p>
+
+        <ul>
+          <li>
+            Fork and Clone: Fork the repository and clone it to your local
+            machine.
+          </li>
+          <li>Create a Branch: Work on a separate branch for your changes.</li>
+          <li>
+            Write Clean Code: Follow the project’s coding standards and write
+            clear, concise code.
+          </li>
+          <li>
+            Test Your Changes: Ensure your changes don’t break existing
+            functionality.
+          </li>
+          <li>
+            Submit a Pull Request (PR): Write a clear PR description, reference
+            related issues, and be open to feedback.
+          </li>
+        </ul>
+      </section>
+      <section>
+        <h2>Tips for Success in Open Source</h2>
+
+        <p>
+          Communicate Effectively: Be respectful and professional in all
+          interactions. Ask questions when unclear about requirements. Thank
+          reviewers for their time and feedback. Stay patient during the review
+          process
+        </p>
+        <p>
+          Be Consistent: Regular contributions, even small ones, can have a big
+          impact over time.
+        </p>
+        <p>
+          Learn from Feedback: Code reviews are a learning opportunity. Embrace
+          feedback and improve your skills.
+        </p>
+        <p>
+          Give Back: Once you’re comfortable, help others by reviewing PRs,
+          answering questions, or mentoring newcomers.
+        </p>
+      </section>
+      <section>
+        <h2>Common Challenges and How to Overcome Them</h2>
+        <ul>
+          <li>
+            Imposter Syndrome: Many beginners feel they’re not skilled enough to
+            contribute. Remember, everyone starts somewhere, and even small
+            contributions matter.
+          </li>
+          <li>
+            Finding Time: Start with small, manageable tasks. Even 30 minutes a
+            week can make a difference.
+          </li>
+          <li>
+            Navigating Large Codebases: Break down the learning process: - Start
+            by reading the documentation thoroughly - Focus on understanding one
+            component at a time - Use debugging tools to trace code execution -
+            Don't hesitate to ask for clarification
+          </li>
+        </ul>
+      </section>
+      <section>
+        <h2>Conclusion</h2>
+        <p>
+          Contributing to open source is a journey that offers immense personal
+          and professional growth. By starting small, staying consistent, and
+          engaging with the community, you can make meaningful contributions
+          while honing your skills. Remember, open source thrives on
+          collaboration, and every contribution—no matter how small—helps build
+          a better digital world. Ready to take the plunge? Find a project that
+          excites you, make your first contribution, and join the global open
+          source movement today!
+        </p>
+      </section>
+    </article>
+  </main>
+</body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
	`1`	+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]