diff --git a/docs/GitHub/GitHub-basics/first-opensource-code.md b/docs/GitHub/GitHub-basics/first-opensource-code.md index 1bfea2cf..1ce71ea1 100644 --- a/docs/GitHub/GitHub-basics/first-opensource-code.md +++ b/docs/GitHub/GitHub-basics/first-opensource-code.md @@ -8,38 +8,40 @@ 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) - - [![GitHub](./assets/23-opensource.png)](https://github.com/sanjay-kv/Open-source-Practice) - + + [![GitHub](./assets/23-opensource.png)](https://github.com/sanjay-kv/Open-source-Practice) +
Step 1: Repository Home Page
+ -In this example, the `` element is an +In this example, the `` 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: + + [![GitHub](./assets/21-final-fork.png)](https://github.com/sanjay-kv/Learn-GitHub/fork) +
Step 2: Forking the Repository
+ - - [![GitHub](./assets/21-final-fork.png)](https://github.com/sanjay-kv/Learn-GitHub/fork) - - - -In this example, the `` +In this example, the `` 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 @@ -47,70 +49,91 @@ In this example, the `` - 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 + + [![GitHub](./assets/24-opensource-fork.png)](https://github.com/sandemouser/Learn-GitHub) +
Step 3: Fork Button
+ - - [![GitHub](./assets/24-opensource-fork.png)](https://github.com/sandemouser/Learn-GitHub) - - + + [![GitHub](./assets/25-opensource-done.png)](https://github.com/sandemouser/Learn-GitHub) +
Step 4: Fork Complete
+ - - [![GitHub](./assets/25-opensource-done.png)](https://github.com/sandemouser/Learn-GitHub) - +## 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. + + [![GitHub](./assets/26-add-name.png)](https://github.com/sandemouser/Learn-GitHub) +
Step 5: Add Your Name
+ + + [![GitHub](./assets/27-added-git-line.png)](https://github.com/sandemouser/Learn-GitHub) +
Step 6: Added Git Line
+ +## Commit Your Changes - - [![GitHub](./assets/26-add-name.png)](https://github.com/sandemouser/Learn-GitHub) - + + [![GitHub](./assets/28-opensource-commit.png)](https://github.com/sandemouser/Learn-GitHub) +
Step 7: Commit Changes
+ +By using attributes and values effectively, you can create engaging and informative web pages that provide a rich user experience. + + [![GitHub](./assets/29-git-final-commit.png)](https://github.com/sandemouser/Learn-GitHub) +
Step 8: Final Commit Review
+ +## Create a Pull Request - - [![GitHub](./assets/27-added-git-line.png)](https://github.com/sandemouser/Learn-GitHub) - +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: - - [![GitHub](./assets/28-opensource-commit.png)](https://github.com/sandemouser/Learn-GitHub) - +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. + + [![GitHub](./assets/30-opensource-final-check.png)](https://github.com/sandemouser/Learn-GitHub) +
Step 9: Create Pull Request
+ - - [![GitHub](./assets/29-git-final-commit.png)](https://github.com/sandemouser/Learn-GitHub) - +## 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. - - [![GitHub](./assets/30-opensource-final-check.png)](https://github.com/sandemouser/Learn-GitHub) - +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. - - [![GitHub](./assets/30-opensource-final-check.png)](https://github.com/sandemouser/Learn-GitHub) - ## Watch this video - + ## Conclusion -HTML attributes and values play a crucial role in web development \ No newline at end of file +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!