recodehive · sanjay-kv · Oct 4, 2025 · Oct 4, 2025
diff --git a/docs/GitHub/GitHub-basics/first-opensource-code.md b/docs/GitHub/GitHub-basics/first-opensource-code.md
@@ -8,109 +8,132 @@ description: In this tutorial, you will learn about HTML elements and tags. HTML
 keywords: [html, web development, elements, tags, html elements, html tags, html tutorial, html basics, web design, web pages, websites, html structure, html elements tutorial, html tags tutorial, html in 2024]
 ---
 
-HTML Attributes and Values are used to provide additional information about HTML elements
+# First Open Source Project – HTML Basics & GitHub Contribution
 
-## HTML Attributes
+## Introduction
+
+In this tutorial, you will learn about HTML elements, attributes, and their values, as well as how to make your first open source contribution directly through GitHub—no command line required!
+
+## What Are HTML Attributes?
+
+HTML attributes provide additional information about HTML elements and change their behavior or appearance. They are written inside the opening tag of an element.
 
-HTML attributes are used to provide additional information about HTML elements. 
 Here is an example of an HTML element with attributes:
 
-Go to this repository https://github.com/sanjay-kv/Open-source-Practice
-```html title="fork the repository"
-https://github.com/sanjay-kv/Open-source-Practice
-```
+Go to this repository [https://github.com/sanjay-kv/Open-source-Practice](https://github.com/sanjay-kv/Open-source-Practice)
 
-    <BrowserWindow url="https://github.com/sanjay-kv/Open-source-Practice" bodyStyle={{padding: 0}}>    
-     [![GitHub](./assets/23-opensource.png)](https://github.com/sanjay-kv/Open-source-Practice)
-    </BrowserWindow>
 
+<BrowserWindow url="https://github.com/sanjay-kv/Open-source-Practice" bodyStyle={{padding: 0}}>
+  [![GitHub](./assets/23-opensource.png)](https://github.com/sanjay-kv/Open-source-Practice)
+  <div align="center"><small>Step 1: Repository Home Page</small></div>
+</BrowserWindow>
 
-In this example, the `<a>` element is an 
+In this example, the `<a>` element is an anchor tag that links to a GitHub repository.
 
-## HTML Attribute Values
+## Understanding HTML Attribute Values
 
 HTML attribute values define specific settings or properties for attributes. They are assigned to attributes using the `=` sign and enclosed in quotes (`"` or `'`). The value of an attribute can be a string, number, URL, color, or other data types depending on the attribute.
 
 Here is an example of an HTML element with attribute values:
 
+<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub/fork" bodyStyle={{padding: 0}}>
+  [![GitHub](./assets/21-final-fork.png)](https://github.com/sanjay-kv/Learn-GitHub/fork)
+  <div align="center"><small>Step 2: Forking the Repository</small></div>
+</BrowserWindow>
 
-    <BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub/fork" bodyStyle={{padding: 0}}>    
-     [![GitHub](./assets/21-final-fork.png)](https://github.com/sanjay-kv/Learn-GitHub/fork)
-    </BrowserWindow>
-
-
-In this example, the `<img>`
+In this example, the `<img>` element uses attributes like `src`, `alt`, and `width` to define the image source, alternative text, and width.
 
 :::tip
 ### Best Practices for Using HTML Attributes and Values
 
 - Use attributes to provide additional information about elements and improve accessibility.
 - Use attribute values that are relevant and descriptive to enhance the user experience.
 
-
-By following these best practices, 
+By following these best practices, you can create engaging and informative web pages.
 :::
 
+## Fork the Repository
 
+<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
+  [![GitHub](./assets/24-opensource-fork.png)](https://github.com/sandemouser/Learn-GitHub)
+  <div align="center"><small>Step 3: Fork Button</small></div>
+</BrowserWindow>
 
-    <BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>    
-     [![GitHub](./assets/24-opensource-fork.png)](https://github.com/sandemouser/Learn-GitHub)
-    </BrowserWindow>
-
+<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
+  [![GitHub](./assets/25-opensource-done.png)](https://github.com/sandemouser/Learn-GitHub)
+  <div align="center"><small>Step 4: Fork Complete</small></div>
+</BrowserWindow>
 
-    <BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>    
-     [![GitHub](./assets/25-opensource-done.png)](https://github.com/sandemouser/Learn-GitHub)
-    </BrowserWindow>
+## Edit Files Directly on GitHub
 
+We will follow the process without using command line and edit directly on the page.
 
-## Will follow without using command line and direct edit on the page. 
+<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
+  [![GitHub](./assets/26-add-name.png)](https://github.com/sandemouser/Learn-GitHub)
+  <div align="center"><small>Step 5: Add Your Name</small></div>
+</BrowserWindow>
 
+<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
+  [![GitHub](./assets/27-added-git-line.png)](https://github.com/sandemouser/Learn-GitHub)
+  <div align="center"><small>Step 6: Added Git Line</small></div>
+</BrowserWindow>
 
 
+## Commit Your Changes
 
-    <BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>    
-     [![GitHub](./assets/26-add-name.png)](https://github.com/sandemouser/Learn-GitHub)
-    </BrowserWindow>
+<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
+  [![GitHub](./assets/28-opensource-commit.png)](https://github.com/sandemouser/Learn-GitHub)
+  <div align="center"><small>Step 7: Commit Changes</small></div>
+</BrowserWindow>
 
+By using attributes and values effectively, you can create engaging and informative web pages that provide a rich user experience.
 
+<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
+  [![GitHub](./assets/29-git-final-commit.png)](https://github.com/sandemouser/Learn-GitHub)
+  <div align="center"><small>Step 8: Final Commit Review</small></div>
+</BrowserWindow>
 
+## Create a Pull Request
 
-    <BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>    
-     [![GitHub](./assets/27-added-git-line.png)](https://github.com/sandemouser/Learn-GitHub)
-    </BrowserWindow>
+After committing your changes, create a Pull Request to submit your contribution to the original repository.
 
-```html title="fork the repository"
-  - [A Demo user](https://github.com/sanjay)
-```
+### Steps to Create a Pull Request:
 
-    <BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>    
-     [![GitHub](./assets/28-opensource-commit.png)](https://github.com/sandemouser/Learn-GitHub)
-    </BrowserWindow>
+1. Navigate to the original repository
+2. Click on **Pull Requests** tab
+3. Click **New pull request**
+4. Select **Compare across forks**
+5. Choose your fork and branch from the dropdowns
+6. Review the changes
+7. Add a title and description
+8. Click **Create pull request**
 
-Let's consider an e
-By using attributes and values effectively, you can create engaging and informative web pages that provide a rich user experience.
 
+<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
+  [![GitHub](./assets/30-opensource-final-check.png)](https://github.com/sandemouser/Learn-GitHub)
+  <div align="center"><small>Step 9: Create Pull Request</small></div>
+</BrowserWindow>
 
-    <BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>    
-     [![GitHub](./assets/29-git-final-commit.png)](https://github.com/sandemouser/Learn-GitHub)
-    </BrowserWindow>
+## Comparing Across Forks
 
+The **Compare across forks** feature allows you to compare changes between your forked repository and the original repository. This helps you review what modifications you've made before submitting your Pull Request.
 
+This comparison view shows a side-by-side diff of commits and file changes, making it easier to:
 
+- Identify added, modified, or deleted lines of code or documentation.
+- Ensure that only intended changes are included before proposing a merge.
+- Detect any inadvertent or unrelated changes early in the Pull Request process.
+- Confirm that your feature branch or fork is updated against the base branch to reduce merge conflicts.
 
-    <BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>    
-     [![GitHub](./assets/30-opensource-final-check.png)](https://github.com/sandemouser/Learn-GitHub)
-    </BrowserWindow>
+You select your fork and branch as the "compare" source and the original repository as the "base." GitHub then displays the exact changes, commits, and file differences between these two.
 
+Using this feature is a vital step to maintain code quality and smooth collaboration when contributing to open source or shared projects. It helps maintainers and contributors clearly understand the scope and impact of proposed changes before merging.
 
-    <BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>    
-     [![GitHub](./assets/30-opensource-final-check.png)](https://github.com/sandemouser/Learn-GitHub)
-    </BrowserWindow>
 
 ## Watch this video
-<iframe width="883" height="480" src="https://www.youtube.com/embed/R7NReLBCT_8?list=PLrLTYhoDFx-kiuFiGQqVpYYZ56pIhUW63" title="How to do your first opensource on  GitHub" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
+<iframe width="883" height="480" src="https://www.youtube.com/embed/R7NReLBCT_8?list=PLrLTYhoDFx-kiuFiGQqVpYYZ56pIhUW63" title="How to do your first opensource on GitHub" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 ## Conclusion
 
-HTML attributes and values play a crucial role in web development 
+HTML attributes and values play a crucial role in web development. You have now learned how to fork a repository, edit files directly on GitHub, commit changes, compare across forks, and create a Pull Request—making your first open source contribution!