Merge branch 'main' of https://github.com/Tirth-chokshi/codeharborhub

Author: Tirth-chokshi

.github/FUNDING.yml

@@ -1,7 +1,7 @@
 # These are supported funding model platforms
 
 github: Ajay-Dhangar # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
+patreon: ajay_dhangar # Replace with a single Patreon username
 open_collective: codeharborhub # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel

.github/pull_request_template.md

@@ -0,0 +1,26 @@
+## Related Issue
+[Cite any related issue(s) this pull request addresses. If none, simply state "None”]
+
+## Description
+[Please include a brief description of the changes or features added]
+
+## Type of PR
+
+- [ ] Bug fix
+- [ ] Feature enhancement
+- [ ] Documentation update
+- [ ] Other (specify): _______________
+
+## Screenshots / videos (if applicable)
+[Attach any relevant screenshots or videos demonstrating the changes]
+
+## Checklist:
+- [ ] I have performed a self-review of my code
+- [ ] I have read and followed the Contribution Guidelines.
+- [ ] I have tested the changes thoroughly before submitting this pull request.
+- [ ] I have provided relevant issue numbers, screenshots, and videos after making the changes.
+- [ ] I have commented my code, particularly in hard-to-understand areas.
+<!-- [X] - put a cross/X inside [] to check the box -->
+
+## Additional context:
+[Include any additional information or context that might be helpful for reviewers.]

README.md

@@ -88,3 +88,9 @@ This project is licensed under the [MIT License](LICENSE).
 Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
 
 ![image](https://github.com/CodeHarborHub/codeharborhub/assets/99037494/a8645938-5269-4d97-93e7-206059266035)
+
+
+## Chat with us
+
+[![Chat with us](https://github.com/CodeHarborHub/codeharborhub/assets/99037494/e898e0e8-7985-4adb-9730-a2588fcba78e)](https://www.patreon.com/ajay_dhangar/membership)
+

courses/react-js/begginer-level/intro-to-react/lesson_3.md

@@ -125,7 +125,7 @@ console.log('Hello, Node.js!');
 
 Save the file and open a terminal or command prompt in the same directory. Run the following command to execute the JavaScript code using Node.js:
 
-```bash title="Run hello.js with Node.js"
+```bash
 node hello.js
 ```
 

docs/html/links-and-anchors/creating-hyperlinks.md

@@ -1,8 +1,191 @@
 ---
 id: creating-hyperlinks
-title: Creating Hyperlinks in HTML
+title: Mastering the Art of Creating Hyperlinks in HTML
 sidebar_label: Creating Hyperlinks
 sidebar_position: 1
 tags: [html, web-development, hyperlinks, links]
 description: In this tutorial, you will learn how to create hyperlinks in HTML. Hyperlinks are used to link one web page to another, or to link to a specific section within the same web page.
----
+---
+
+# Mastering the Art of Creating Hyperlinks in HTML
+
+Hello, web enthusiasts! Today, we're embarking on a journey through the magical world of hyperlinks in HTML. Whether you're a budding developer or a seasoned coder looking to brush up on the basics, understanding how to create and use hyperlinks effectively is essential. So, grab your favorite drink, get comfortable, and let's explore the wonders of `<a>` tags and the endless possibilities they bring to your web pages.
+
+## What Are Hyperlinks Anyway?
+
+Hyperlinks are the backbone of the web, allowing users to navigate between different web pages, documents, or even specific sections within a page. They are created using the `<a>` (anchor) tag in HTML and can link to various resources such as web pages, email addresses, files, and more.
+
+### The Essential Tags
+
+Before we dive into examples and practical applications, let’s get acquainted with the key HTML tags used to create hyperlinks:
+
+1. `<a>`: This tag stands for "anchor" and is used to define the hyperlink.
+2. `href`: This attribute specifies the destination URL or resource for the hyperlink.
+
+## The Basics
+
+Let’s start with an example. Suppose you want to create a hyperlink to your favorite website. Here’s how you might do it:
+
+```html
+<a href="https://www.example.com">Visit Example</a>
+```
+
+In this example, the `<a>` tag creates a clickable link that directs the user to https://www.example.com when clicked. The text "Visit Example" is the clickable part of the link.
+
+## Understanding the `href` Attribute
+
+The `href` attribute is the heart of the hyperlink, defining where the link will take the user. It can point to various types of destinations, such as web pages, email addresses, phone numbers, and even specific sections within a page.
+
+### Linking to External Websites
+
+Here’s how you link to an external website:
+
+```html
+<a href="https://www.google.com">Google</a>
+```
+
+### Linking to an Email Address
+
+To create a link that opens the user's email client:
+
+```html
+<a href="mailto:example@example.com">Send an Email</a>
+```
+
+### Linking to a Phone Number
+
+To create a link that allows users to call a phone number:
+
+```html
+<a href="tel:+1234567890">Call Us</a>
+```
+
+### Linking to a Section Within the Same Page
+
+To create a link that jumps to a specific section within the same page, you need to use the `id` attribute on the target element and link to it with a `#` symbol:
+
+```html
+<a href="#section1">Go to Section 1</a>
+
+<!-- Somewhere else on the page -->
+<h2 id="section1">Section 1</h2>
+```
+
+Clicking "Go to Section 1" will scroll the page to the section with the `id` "section1".
+
+### Opening Links in a New Tab
+
+To open a link in a new tab, use the `target="_blank"` attribute:
+
+```html
+<a href="https://www.example.com" target="_blank">Visit Example in a New Tab</a>
+```
+
+When using `target="_blank"`, it's a good practice to add rel="noopener noreferrer" to enhance security and performance:
+
+```html
+<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example in a New Tab</a>
+```
+## Styling Hyperlinks with CSS
+
+To make your hyperlinks stand out or match the design of your website, you can style them using CSS. Here’s a basic example:
+
+```css
+a {
+  color: #007BFF;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+```
+
+```html
+<a href="https://www.example.com">Stylish Link</a>
+```
+
+In this example, the hyperlink has a custom color and removes the default underline, but it underlines again on hover to indicate interactivity.
+
+## Practical Applications
+
+Now that we’ve covered the basics and some advanced techniques, let’s look at real-world applications of hyperlinks.
+
+### Navigation Menus
+
+Hyperlinks are essential for creating navigation menus. Here’s a simple example:
+
+```html
+<nav>
+  <ul>
+    <li><a href="#home">Home</a></li>
+    <li><a href="#about">About</a></li>
+    <li><a href="#services">Services</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ul>
+</nav>
+```
+
+### Link Collections
+
+Use hyperlinks to create collections of resources, such as a list of favorite websites or helpful tools:
+
+```html
+<ul>
+  <li><a href="https://www.example1.com">Example 1</a></li>
+  <li><a href="https://www.example2.com">Example 2</a></li>
+  <li><a href="https://www.example3.com">Example 3</a></li>
+</ul>
+```
+
+### Linking to Documents
+
+Provide links to downloadable documents like PDFs:
+
+```html
+<a href="/files/sample.pdf" download>Download Sample PDF</a>
+```
+
+## Enhancing User Experience with Hyperlinks
+
+Effective use of hyperlinks can significantly enhance the user experience. Here are a few tips:
+
+### Descriptive Link Text
+
+Always use descriptive text for hyperlinks. Avoid "click here" and instead use meaningful text that describes the link's destination:
+
+```html
+<a href="https://www.example.com/features">Learn more about our features</a>
+```
+
+### Accessible Links
+
+Ensure your links are accessible by providing enough contrast and making them keyboard-navigable. Use the `title` attribute to give additional context if necessary:
+
+```html
+<a href="https://www.example.com" title="Visit Example's homepage">Example</a>
+```
+
+### Mobile-Friendly Links
+
+Make sure your links are easy to tap on mobile devices by using larger touch targets:
+
+```css
+a {
+  padding: 10px;
+  display: inline-block;
+}
+```
+
+```html
+<a href="https://www.example.com">Tap-friendly Link</a>
+```
+
+## In Conclusion
+
+Creating hyperlinks in HTML is a fundamental skill that every web developer should master. Hyperlinks connect the vast web of information and make navigation intuitive and seamless for users. Whether you're linking to external websites, internal sections, or downloadable documents, the `<a>` tag is your go-to tool.
+
+So go ahead, experiment with hyperlinks in your next project. Use them to create navigation menus, link collections, and more. Your users will appreciate the improved navigation and interactivity.
+
+Happy coding!