Skip to content

Commit f380f99

Browse files
authored
Merge pull request #779 from ishitaajain-coder/ishitaajain-coder-opensrcdoc1
Update first-opensource-code.md
2 parents f722536 + ad06c82 commit f380f99

File tree

1 file changed

+76
-53
lines changed

1 file changed

+76
-53
lines changed

docs/GitHub/GitHub-basics/first-opensource-code.md

Lines changed: 76 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -8,109 +8,132 @@ description: In this tutorial, you will learn about HTML elements and tags. HTML
88
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]
99
---
1010

11-
HTML Attributes and Values are used to provide additional information about HTML elements
11+
# First Open Source Project – HTML Basics & GitHub Contribution
1212

13-
## HTML Attributes
13+
## Introduction
14+
15+
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!
16+
17+
## What Are HTML Attributes?
18+
19+
HTML attributes provide additional information about HTML elements and change their behavior or appearance. They are written inside the opening tag of an element.
1420

15-
HTML attributes are used to provide additional information about HTML elements.
1621
Here is an example of an HTML element with attributes:
1722

18-
Go to this repository https://github.com/sanjay-kv/Open-source-Practice
19-
```html title="fork the repository"
20-
https://github.com/sanjay-kv/Open-source-Practice
21-
```
23+
Go to this repository [https://github.com/sanjay-kv/Open-source-Practice](https://github.com/sanjay-kv/Open-source-Practice)
2224

23-
<BrowserWindow url="https://github.com/sanjay-kv/Open-source-Practice" bodyStyle={{padding: 0}}>
24-
[![GitHub](./assets/23-opensource.png)](https://github.com/sanjay-kv/Open-source-Practice)
25-
</BrowserWindow>
2625

26+
<BrowserWindow url="https://github.com/sanjay-kv/Open-source-Practice" bodyStyle={{padding: 0}}>
27+
[![GitHub](./assets/23-opensource.png)](https://github.com/sanjay-kv/Open-source-Practice)
28+
<div align="center"><small>Step 1: Repository Home Page</small></div>
29+
</BrowserWindow>
2730

28-
In this example, the `<a>` element is an
31+
In this example, the `<a>` element is an anchor tag that links to a GitHub repository.
2932

30-
## HTML Attribute Values
33+
## Understanding HTML Attribute Values
3134

3235
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.
3336

3437
Here is an example of an HTML element with attribute values:
3538

39+
<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub/fork" bodyStyle={{padding: 0}}>
40+
[![GitHub](./assets/21-final-fork.png)](https://github.com/sanjay-kv/Learn-GitHub/fork)
41+
<div align="center"><small>Step 2: Forking the Repository</small></div>
42+
</BrowserWindow>
3643

37-
<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub/fork" bodyStyle={{padding: 0}}>
38-
[![GitHub](./assets/21-final-fork.png)](https://github.com/sanjay-kv/Learn-GitHub/fork)
39-
</BrowserWindow>
40-
41-
42-
In this example, the `<img>`
44+
In this example, the `<img>` element uses attributes like `src`, `alt`, and `width` to define the image source, alternative text, and width.
4345

4446
:::tip
4547
### Best Practices for Using HTML Attributes and Values
4648

4749
- Use attributes to provide additional information about elements and improve accessibility.
4850
- Use attribute values that are relevant and descriptive to enhance the user experience.
4951

50-
51-
By following these best practices,
52+
By following these best practices, you can create engaging and informative web pages.
5253
:::
5354

55+
## Fork the Repository
5456

57+
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
58+
[![GitHub](./assets/24-opensource-fork.png)](https://github.com/sandemouser/Learn-GitHub)
59+
<div align="center"><small>Step 3: Fork Button</small></div>
60+
</BrowserWindow>
5561

56-
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
57-
[![GitHub](./assets/24-opensource-fork.png)](https://github.com/sandemouser/Learn-GitHub)
58-
</BrowserWindow>
59-
62+
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
63+
[![GitHub](./assets/25-opensource-done.png)](https://github.com/sandemouser/Learn-GitHub)
64+
<div align="center"><small>Step 4: Fork Complete</small></div>
65+
</BrowserWindow>
6066

61-
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
62-
[![GitHub](./assets/25-opensource-done.png)](https://github.com/sandemouser/Learn-GitHub)
63-
</BrowserWindow>
67+
## Edit Files Directly on GitHub
6468

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

66-
## Will follow without using command line and direct edit on the page.
71+
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
72+
[![GitHub](./assets/26-add-name.png)](https://github.com/sandemouser/Learn-GitHub)
73+
<div align="center"><small>Step 5: Add Your Name</small></div>
74+
</BrowserWindow>
6775

76+
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
77+
[![GitHub](./assets/27-added-git-line.png)](https://github.com/sandemouser/Learn-GitHub)
78+
<div align="center"><small>Step 6: Added Git Line</small></div>
79+
</BrowserWindow>
6880

6981

82+
## Commit Your Changes
7083

71-
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
72-
[![GitHub](./assets/26-add-name.png)](https://github.com/sandemouser/Learn-GitHub)
73-
</BrowserWindow>
84+
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
85+
[![GitHub](./assets/28-opensource-commit.png)](https://github.com/sandemouser/Learn-GitHub)
86+
<div align="center"><small>Step 7: Commit Changes</small></div>
87+
</BrowserWindow>
7488

89+
By using attributes and values effectively, you can create engaging and informative web pages that provide a rich user experience.
7590

91+
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
92+
[![GitHub](./assets/29-git-final-commit.png)](https://github.com/sandemouser/Learn-GitHub)
93+
<div align="center"><small>Step 8: Final Commit Review</small></div>
94+
</BrowserWindow>
7695

96+
## Create a Pull Request
7797

78-
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
79-
[![GitHub](./assets/27-added-git-line.png)](https://github.com/sandemouser/Learn-GitHub)
80-
</BrowserWindow>
98+
After committing your changes, create a Pull Request to submit your contribution to the original repository.
8199

82-
```html title="fork the repository"
83-
- [A Demo user](https://github.com/sanjay)
84-
```
100+
### Steps to Create a Pull Request:
85101

86-
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
87-
[![GitHub](./assets/28-opensource-commit.png)](https://github.com/sandemouser/Learn-GitHub)
88-
</BrowserWindow>
102+
1. Navigate to the original repository
103+
2. Click on **Pull Requests** tab
104+
3. Click **New pull request**
105+
4. Select **Compare across forks**
106+
5. Choose your fork and branch from the dropdowns
107+
6. Review the changes
108+
7. Add a title and description
109+
8. Click **Create pull request**
89110

90-
Let's consider an e
91-
By using attributes and values effectively, you can create engaging and informative web pages that provide a rich user experience.
92111

112+
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
113+
[![GitHub](./assets/30-opensource-final-check.png)](https://github.com/sandemouser/Learn-GitHub)
114+
<div align="center"><small>Step 9: Create Pull Request</small></div>
115+
</BrowserWindow>
93116

94-
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
95-
[![GitHub](./assets/29-git-final-commit.png)](https://github.com/sandemouser/Learn-GitHub)
96-
</BrowserWindow>
117+
## Comparing Across Forks
97118

119+
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.
98120

121+
This comparison view shows a side-by-side diff of commits and file changes, making it easier to:
99122

123+
- Identify added, modified, or deleted lines of code or documentation.
124+
- Ensure that only intended changes are included before proposing a merge.
125+
- Detect any inadvertent or unrelated changes early in the Pull Request process.
126+
- Confirm that your feature branch or fork is updated against the base branch to reduce merge conflicts.
100127

101-
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
102-
[![GitHub](./assets/30-opensource-final-check.png)](https://github.com/sandemouser/Learn-GitHub)
103-
</BrowserWindow>
128+
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.
104129

130+
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.
105131

106-
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
107-
[![GitHub](./assets/30-opensource-final-check.png)](https://github.com/sandemouser/Learn-GitHub)
108-
</BrowserWindow>
109132

110133
## Watch this video
111-
<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>
112134

135+
<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>
113136

114137
## Conclusion
115138

116-
HTML attributes and values play a crucial role in web development
139+
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!

0 commit comments

Comments
 (0)