diff --git a/Learn.md b/Learn.md index 0c4546721..a8537cac7 100644 --- a/Learn.md +++ b/Learn.md @@ -3,11 +3,13 @@ Visit our website [CodeHarbourHub](https://www.codeharborhub.live/) ## Table of Contents -- [Introduction](#introduction) -- [Features](#features) -- [Contributing Guidelines](#contributing-guidelines) -- [Code of Conduct](#code-of-conduct) -- [Socials](#socials) +- [CodeHarbourHub](#codeharbourhub) + - [Table of Contents](#table-of-contents) + - [Introduction](#introduction) + - [Features](#features) + - [Contributing Guidelines](#contributing-guidelines) + - [Code of Conduct](#code-of-conduct) + - [Socials](#socials) ## Introduction @@ -16,16 +18,16 @@ We're the exclusive platform offering a comprehensive tech curriculum, taught by ## Features - **In-Depth Tutorials**: Dive into comprehensive tutorials covering a wide range of programming languages like C++, Java, Python, JavaScript and Typescript and frameworks like ReactJS along with Data Structures and Algorithms. -![](/assets/Tutorials.png) + - **Courses for Mastery**: Enroll in structured courses designed to take your skills to the next level. They range from learning a particular language and implementing them hands-on as projects to enhance learning. -![](/assets/Courses.png) + - **Inspiring Showcases**: Explore inspiring showcases of real-world projects and innovative web solutions. -![](/assets/Showcase.png) + - **Engaging Community**: Connect with a vibrant community of developers, share knowledge, and collaborate on projects. -![](/assets/Community.png) + ## Contributing Guidelines diff --git a/community/Learn.md b/community/Learn.md new file mode 100644 index 000000000..26ad4ab2e --- /dev/null +++ b/community/Learn.md @@ -0,0 +1,39 @@ +--- +id: learn +title: Welcome to CodeHarbourHub +sidebar_label: Learn +sidebar_position: 6 +--- + +Visit our website [CodeHarbourHub](https://codeharborhub.github.io/) + +## Introduction + +Welcome to "CodeHarbourHub" - Our mission at CodeHarbourHub to provide accessible and comprehensive educational resources to learners of all levels, from Beginners learners to Advanced professionals. +We're the exclusive platform offering a comprehensive tech curriculum, taught by industry masters, completely free. Join our vibrant community, master in-demand skills, and launch your dream tech career. + +## Features +- **In-Depth Tutorials**: Dive into comprehensive tutorials covering a wide range of programming languages like C++, Java, Python, JavaScript and Typescript and frameworks like ReactJS along with Data Structures and Algorithms. + + +- **Courses for Mastery**: Enroll in structured courses designed to take your skills to the next level. They range from learning a particular language and implementing them hands-on as projects to enhance learning. + + +- **Inspiring Showcases**: Explore inspiring showcases of real-world projects and innovative web solutions. + + +- **Engaging Community**: Connect with a vibrant community of developers, share knowledge, and collaborate on projects. + + +## Contributing Guidelines + +For the enthusiasts who want to contribute to CodeHarbourHub, please refer to our [Contributing Guildelines](https://github.com/CodeHarborHub/codeharborhub/blob/main/CONTRIBUTING.md) + +## Code of Conduct + +For all the enthusiastic contributers, please refer to the [Code of Conduct](https://github.com/CodeHarborHub/codeharborhub/blob/main/CODE_OF_CONDUCT.md) + +## Socials +Stay updated with the latest news and announcements: +- [LinkedIn](https://www.linkedin.com/groups/14232119/) +- [Twitter](https://twitter.com/CodesWithAjay) diff --git a/courses/index.md b/courses/index.md index 5760836dc..127fffc59 100644 --- a/courses/index.md +++ b/courses/index.md @@ -24,9 +24,16 @@ Our courses are designed to help you learn new skills and advance your career. W Explore our courses to find the one that suits your interests and goals. Whether you are looking to learn a new programming language, build a web application, analyze data, or improve your project management skills, we have a course for you. Start your learning journey today! -import courses from '@site/src/data/courses'; + - + + + + + To get started, select a course from the list above or explore our recommended courses below. If you have any questions or need help, feel free to reach out to us. diff --git a/courses/recommend.md b/courses/recommend.md deleted file mode 100644 index d164b2e0a..000000000 --- a/courses/recommend.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: recommended-courses -title: Recommended Courses -sidebar_label: Recommended Courses -sidebar_position: 2 -description: "Recommended courses for learning web development, data science, project management, security, and more." -tags: [courses] -keywoards: [courses] -author: [CodeHarborHub, Ajay Dhangar] -hide_table_of_contents: true ---- - -import courses from '@site/src/database/courses'; - - diff --git a/docs/html/forms/building-form.md b/docs/html/forms/building-form.md index 890703dbb..ffc8b740d 100644 --- a/docs/html/forms/building-form.md +++ b/docs/html/forms/building-form.md @@ -1,3 +1,218 @@ --- +id: building-forms +title: Building Forms in HTML +sidebar_label: Building Forms +sidebar_position: 1 +tags: [html, web-development, forms, user-input, front-end-development, web-design] +description: Learn how to create forms in HTML to collect user input effectively, with detailed examples and best practices. +--- + +Forms are an essential part of any website or web application. They allow users to interact with the website by providing input, such as text, selections, and buttons. Forms are used for various purposes, such as user registration, login, search, feedback, and more. + + + +In this tutorial, you will learn how to create forms in HTML to collect user input effectively. + +## Creating a Simple Form + +To create a form in HTML, you need to use the `
` element. The `` element is used to define an HTML form that collects user input. Here's an example of a simple form that collects the user's name and email address: + +```html title="index.html" showLineNumbers + + + + + + + Simple Form + + +

Simple Form

+ + + +

+ + +

+ +
+ + +``` + +In the example above: +- We have created a simple form that collects the user's name and email address. +- The `
` element contains two `` elements for the name and email fields. +- The `type="text"` attribute specifies that the input field is a text field. +- The `type="email"` attribute specifies that the input field is an email field, which helps in validating the email address. +- The `required` attribute specifies that the input field is required and must be filled out before submitting the form. +- The ` + ``` + + + +### `` element is used to create a dropdown list within a form. It allows the user to select one or more options from a list of predefined options. + +Here's an example of a ` + + + + +``` + +### ` +``` + +In the example above, the `rows` and `cols` attributes specify the number of rows and columns of the textarea, respectively. + +## Form Validation + +Form validation is an essential part of creating forms to ensure that the user input is correct and complete. HTML provides built-in form validation features that can be used to validate user input without writing custom JavaScript code. + +Here are some common form validation attributes that can be added to form elements: + +- **required:** Specifies that the input field is required and must be filled out. +- **minlength:** Specifies the minimum length of the input field. +- **maxlength:** Specifies the maximum length of the input field. +- **pattern:** Specifies a regular expression pattern that the input field must match. +- **type:** Specifies the type of input field (e.g., email, number, date). +- **min:** Specifies the minimum value for number and date input fields. + +Here's an example of a form with validation attributes: + +```html title="index.html" + + + +

+ + +

+ + +``` + +In the example above: + +- The `required` attribute specifies that both the username and password fields are required. +- The `minlength="3"` attribute specifies that the username must be at least 3 characters long. +- The `minlength="6"` attribute specifies that the password must be at least 6 characters long. + +When the user submits the form, the browser will automatically validate the input fields based on the specified attributes. If the input is invalid, the browser will display an error message to the user. + + + +:::tip Key Components +1. **`
` Tag** + - Defines the start and end of a form. + - Attributes: + - `action`: URL where form data is sent. + - `method`: HTTP method (e.g., `GET` or `POST`). + +2. **Input Elements** + - **Text Input (``)**: Single-line text input. + - **Email Input (``)**: Input validation for email addresses. + - **Textarea (` + + +
+``` + +By using the `form` attribute and other form attributes, you can create interactive and functional forms in HTML that collect user input and submit it to the server for processing. + + + +## Summary Table of Attributes + +| Attribute | Description | Example Value | +|-----------------|------------------------------------------------------------|---------------------------| +| `action` | URL to submit form data to | `/submit-data` | +| `method` | HTTP method (`GET`, `POST`) | `post` | +| `target` | Specifies where to display the response | `_blank`, `_self` | +| `autocomplete` | Enables/disables browser autofill | `on`, `off` | +| `novalidate` | Disables browser validation | `novalidate` (boolean) | +| `enctype` | Encoding type for form data | `multipart/form-data` | +| `name` | Unique identifier for the form | `registrationForm` | +| `accept-charset`| Character encodings supported | `UTF-8` | + + diff --git a/docs/html/forms/form-input-element.md b/docs/html/forms/form-input-element.md index e69de29bb..eb84d2da1 100644 --- a/docs/html/forms/form-input-element.md +++ b/docs/html/forms/form-input-element.md @@ -0,0 +1,352 @@ +--- +id: form-input-element +title: HTML Form Input Element +sidebar_label: Form Input Element +sidebar_position: 2 +tags: [html input element, html form input element, html input types, html input text, html input password, html input email] +description: "Learn about the HTML element and its various types such as text, password, email, etc., used to create input fields within a form." +keywords: [html input element, html form input element, html input types, html input text, html input password, html input email] +--- + +The `` element is used to create input fields within a form. It can be used to create text fields, checkboxes, radio buttons, buttons, and more. The `type` attribute of the `` element specifies the type of input field to be created. + + + +## Common Input Types + +Here are some common input types: + +1. **text:** Creates a single-line text input field. + + For example: + ```html + + ``` + +2. **password:** Creates a password input field where the entered text is masked. + + For example: + ```html + + ``` + +3. **email:** Creates an email input field that validates the input as an email address. + + For example: + ```html + + ``` + +4. **checkbox:** Creates a checkbox input field that allows the user to select multiple options. + + For example: + ```html + Coding + Design + ``` + +5. **radio:** Creates a radio button input field that allows the user to select a single option from a list. + + For example: + ```html + Computer Science + Engineering + ``` + +6. **submit:** Creates a submit button that submits the form data to the server. + + For example: + ```html + + ``` + +7. **button:** Creates a button that can be used to trigger JavaScript functions. + + For example: + ```html + + ``` + + + +## Additional Input Types + +In addition to the common input types mentioned above, there are several other input types that can be used to create different types of input fields. Here are some additional input types: + +1. **number:** Creates a numeric input field that allows the user to enter numbers. + + For example: + ```html + + ``` + +2. **date:** Creates a date input field that allows the user to select a date from a calendar. + + For example: + ```html + + ``` + +3. **file:** Creates a file input field that allows the user to upload files. + + For example: + ```html + + ``` + +4. **color:** Creates a color input field that allows the user to select a color from a color picker. + + For example: + ```html + + ``` + +5. **range:** Creates a range input field that allows the user to select a value from a range. + + For example: + ```html + + ``` + +6. **time:** Creates a time input field that allows the user to select a time. + + For example: + ```html + + ``` + +7. **url:** Creates a URL input field that validates the input as a URL. + + For example: + ```html + + ``` + +8. **search:** Creates a search input field that allows the user to enter search queries. + + For example: + ```html + + ``` + +9. **tel:** Creates a telephone input field that validates the input as a phone number. + + For example: + ```html + + ``` + +10. **hidden:** Creates a hidden input field that is not displayed on the form but is submitted with the form data. + + For example: + ```html + + ``` + +These input types provide a wide range of options for creating different types of input fields within a form. + + + +## Challenge Yourself + +### Problem description + +Create a form with the following input fields: + +1. A text input field for the user's name. +2. An email input field for the user's email address. +3. A password input field for the user's password. +4. A checkbox input field for the user's interests (e.g., coding, design). +5. A radio button input field for the user's major (e.g., Computer Science, Engineering). +6. A submit button to submit the form. +7. A button to clear the form. + +### Criteria + +1. Use appropriate input types for each input field. +2. Include labels for each input field. +3. Use the `name` attribute to identify each input field. +4. Use the `value` attribute for checkboxes and radio buttons. +5. Use the `required` attribute for required input fields. +6. Use the `form` attribute to associate the input fields with the form. +7. Use the `onclick` event to clear the form when the "Clear" button is clicked. +8. Use the `onsubmit` event to validate the form before submission. +9. Use CSS to style the form elements. + +### Solution + +You can try to create the form with the specified input fields and functionality. Here's an example solution to get you started: + +```html title="index.html" showLineNumbers + + + + + + + Form Challenge + + + +
+

Challenge Yourself

+
+ + + + + + + + + + + + + +
+ Select Your Interests + + + +
+ + +
+ Select Your Major + + + +
+ + +
+ + +
+
+
+ + + + +``` + +This example demonstrates how you can create a form with various input fields and functionality using HTML and CSS. You can further enhance the form by adding more styling, validation, or custom functionality based on your requirements. + +## Conclusion + +HTML provides a wide range of input types that you can use to create different types of input fields within a form. By understanding the various input types and their attributes, you can create interactive and user-friendly forms for collecting user input on your website. \ No newline at end of file diff --git a/docs/web-socket/Introduction.md b/docs/web-socket/Introduction.md index c14c94e8b..a03586c4a 100644 --- a/docs/web-socket/Introduction.md +++ b/docs/web-socket/Introduction.md @@ -10,6 +10,7 @@ description: WebSocket is a communication protocol that provides full-duplex com WebSocket is a communication protocol that provides full-duplex communication channels over a single TCP connection. It is designed to be a more efficient and real-time alternative to traditional HTTP polling mechanisms for web applications. ### Introduction: + In WebSocket, web applications typically used HTTP for communication between the client (browser) and the server. HTTP, however, is a request-response protocol, which means the client sends a request to the server and the server responds with the requested data. This model is not suitable for scenarios where real-time, bidirectional communication is required because: 1. **Polling:** Clients need to continuously poll the server for updates, which can be inefficient and result in latency. @@ -19,6 +20,7 @@ In WebSocket, web applications typically used HTTP for communication between the WebSocket addresses these limitations by establishing a persistent connection between the client and the server, allowing both parties to initiate data exchange at any time, asynchronously. This connection is established through an initial handshake between the client and the server during which the protocol details are negotiated. ### Explanation: + WebSocket operates on top of TCP and provides a full-duplex communication channel between a client (typically a web browser) and a server. Here's how it works: 1. **Handshake:** The client and server establish a WebSocket connection through a handshake mechanism. The client sends an HTTP request with specific headers indicating its intent to upgrade to WebSocket. If the server supports WebSocket and agrees to the upgrade, it responds with an HTTP 101 status code (Switching Protocols) and WebSocket-specific headers. @@ -32,6 +34,7 @@ WebSocket operates on top of TCP and provides a full-duplex communication channe 5. **Compatibility:** WebSocket is supported by all modern web browsers and is widely used in web applications that require real-time communication. ### Use Cases: + WebSocket is particularly useful in applications requiring real-time updates or interaction, such as: - **Chat applications:** Enables instant messaging and group chats. diff --git a/src/css/custom.css b/src/css/custom.css index 45f862d4c..9a71d4c24 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -390,9 +390,9 @@ th { border-radius: 8px; } -[data-theme="dark"] #__docusaurus_skipToContent_fallback { +/* [data-theme="dark"] #__docusaurus_skipToContent_fallback { background: linear-gradient(rgba(15, 23, 42, 0.796), rgba(15, 23, 42, 0.23)); -} +} */ [data-theme="dark"] .navbar { background: rgba(15, 23, 42, 0.862); border-bottom: 1px solid #4e8da0db;