first-opensource-code.md

id	first-opensource-code
title	Let's Do First Opensource Project
sidebar_label	First Opensource Project
sidebar_position	5
tags	html web-development elements tags
description	In this tutorial, you will learn about HTML elements and tags. HTML elements are the building blocks of HTML pages, and tags are used to define the structure of the content.
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

First Open Source Project – HTML Basics & GitHub Contribution

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.

Here is an example of an HTML element with attributes:

Go to this repository https://github.com/sanjay-kv/Open-source-Practice

<BrowserWindow url="https://github.com/sanjay-kv/Open-source-Practice" bodyStyle={{padding: 0}}>

Step 1: Repository Home Page

In this example, the <a> element is an anchor tag that links to a GitHub repository.

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}}>

Step 2: Forking the Repository

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, you can create engaging and informative web pages. :::

Fork the Repository

<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>

Step 3: Fork Button

<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>

Step 4: Fork Complete

Edit Files Directly on GitHub

We will follow the process without using command line and edit directly on the page.

<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>

Step 5: Add Your Name

<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>

Step 6: Added Git Line

Commit Your Changes

<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>

Step 7: Commit Changes

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}}>

Step 8: Final Commit Review

Create a Pull Request

After committing your changes, create a Pull Request to submit your contribution to the original repository.

Steps to Create a Pull Request:

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

<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>

Step 9: Create Pull Request

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.

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.

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>

Conclusion

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!