diff --git a/courses/html/_category_.json b/courses/html/_category_.json
new file mode 100644
index 000000000..3d1e28d90
--- /dev/null
+++ b/courses/html/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "HTML",
+ "position": 3,
+ "link": {
+ "type": "generated-index",
+ "description": "Getting started with HTML, the language that powers the web."
+ }
+}
diff --git a/courses/html/basic/_category_.json b/courses/html/basic/_category_.json
new file mode 100644
index 000000000..5627ea81c
--- /dev/null
+++ b/courses/html/basic/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "HTML Basics",
+ "position": 2,
+ "link": {
+ "type": "generated-index",
+ "description": "Learn the basics of HTML, the language that powers the web."
+ }
+}
diff --git a/courses/html/basic/intro-html.md b/courses/html/basic/intro-html.md
new file mode 100644
index 000000000..66915f85d
--- /dev/null
+++ b/courses/html/basic/intro-html.md
@@ -0,0 +1,83 @@
+---
+id: introduction-to-html
+title: Introduction to HTML
+sidebar_label: Introduction to HTML
+sidebar_position: 1
+description: "Learn the basics of HTML, the foundation of web development, and create your first web page."
+tags: [html courses, web development in html courses, html basic]
+keywoards: [html courses, web development in html courses, html basic]
+author: [CodeHarborHub, Ajay Dhangar]
+---
+
+
+
+
+
+In this section, you will learn the basics of HTML, the foundation of web development, and create your first web page. HTML stands for HyperText Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
+
+## What is HTML?
+
+HTML is the standard markup language for creating web pages. It stands for **Hyper Text Markup Language**. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
+
+HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as `` and `` directly introduce content into the page. Other tags such as `
` surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.
+
+## What is a Web Page?
+
+A web page is a document that is suitable for the World Wide Web and web browsers. A web browser displays a web page on a monitor or mobile device. The web page is what displays, but the term also refers to a computer file, usually written in HTML or comparable markup language. Web browsers coordinate the various web resource elements for the written web page, such as style sheets, scripts, and images, to present the web page.
+
+## Creating Your First Web Page
+
+To create your first web page, you need to create an HTML file. An HTML file is a text file that contains the HTML code for your web page. You can create an HTML file using a text editor such as Notepad or a code editor such as **Visual Studio Code**.
+
+Here is an example of a simple HTML file:
+
+```html title="index.html"
+
+
+
+ My First Web Page
+
+
+
Hello, World!
+
Welcome to my first web page.
+
+
+```
+
+
+
Hello, World!
+
Welcome to my first web page.
+
+
+In this example, the HTML file contains the following elements:
+
+- ``: This declaration defines the document type and version of HTML.
+- ``: This element is the root element of an HTML page.
+- ``: This element contains meta-information about the HTML document.
+- ``: This element specifies the title of the HTML document.
+- `<body>`: This element contains the content of the HTML document.
+- `<h1>`: This element defines a heading.
+- `<p>`: This element defines a paragraph.
+- The text between the opening and closing tags of each element is the content of that element.
+- The HTML file is saved with the `.html` extension, such as `index.html`.
+- You can open the HTML file in a web browser to view the web page.
+
+Congratulations! You have created your first web page using HTML. In the next section, you will learn more about HTML elements and attributes.
+
+## Why Learn HTML?
+
+HTML is the foundation of web development. Learning HTML is essential for anyone who wants to create web pages and web applications. HTML is easy to learn and use, making it an ideal starting point for beginners. By learning HTML, you will gain a solid understanding of how web pages are structured and how content is displayed on the web.
+
+:::tip Key Points
+
+- First version of HTML was introduced in 1991 by **Tim Berners-Lee**.
+- HTML stands for **Hyper Text Markup Language**.
+- **Tim Berners-Lee** is the inventor of the World Wide Web. He is a British computer scientist who invented the World Wide Web in 1989 while working at CERN.
+- HTML is the standard markup language for creating web pages.
+- There are many versions of HTML such as HTML 4, HTML 5, and XHTML.
+
+:::
+
+## Summary
+
+In this section, you learned the basics of HTML, the foundation of web development. You created your first web page using HTML and learned about HTML elements and attributes. HTML is the standard markup language for creating web pages, and it is essential for anyone who wants to create web pages and web applications. In the next section, you will learn more about HTML elements and attributes.
diff --git a/docs/html/best-practices-and-optimization/Performance-optimization.md b/docs/html/best-practices-and-optimization/Performance-optimization.md
deleted file mode 100644
index da3996877..000000000
--- a/docs/html/best-practices-and-optimization/Performance-optimization.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-id: performance-optimization
-title: Performance Optimization
-sidebar_label: Performance Optimization
-sidebar_position: 2
-tags: [html, best-practices, optimization]
-description: In this tutorial, we will learn about performance optimization in HTML.
----
-
-# Performance Optimization in HTML
-
-## Introduction
-Optimizing the performance of HTML code is crucial for improving the loading times and responsiveness of web pages. Similar to the principles of writing clean HTML code, performance optimization focuses on efficient coding practices that enhance the user experience, especially in terms of speed and efficiency. This guide will delve into the best practices for optimizing your HTML code for better performance, drawing parallels with the clean code principles outlined in the "Writing Clean HTML Code" tutorial.
-
-## Importance of Performance Optimization
-
-Performance optimization is vital for several reasons:
-
-1. **Enhanced User Experience**: Faster loading times lead to a smoother and more enjoyable user experience, which is crucial for keeping users engaged and reducing bounce rates.
-
-2. **Improved SEO Rankings**: Search engines prioritize websites that load quickly. Optimizing your HTML code can lead to better search engine rankings and increased visibility.
-
-3. **Reduced Resource Consumption**: Efficient code requires fewer server resources, which can lower hosting costs and reduce the environmental impact of your website.
-
-4. **Accessibility Improvements**: Performance optimization also benefits users with slow internet connections or those using low-powered devices, making your website more accessible to a wider audience.
-
-## Best Practices for Performance Optimization
-
-### Minimize HTTP Requests
-Reduce the number of HTTP requests by combining files, using CSS sprites, and minimizing the use of external scripts and stylesheets. This is akin to keeping your HTML structure simple to enhance readability and maintainability.
-
-### Optimize Images
-Use appropriate image formats (e.g., WebP for complex images and SVG for icons and logos) and compress images to reduce their file size without significantly impacting quality. This practice mirrors the principle of eliminating unnecessary tags and whitespace in HTML for cleaner code.
-
-### Use Lazy Loading
-Implement lazy loading for images and iframes, so they are only loaded when they enter the viewport. This technique improves initial page load times, similar to how clean code enhances performance by removing redundant elements.
-
-### Minify HTML, CSS, and JavaScript
-Minify your code by removing whitespace, comments, and unnecessary characters. Tools like HTMLMinifier, CSSNano, and UglifyJS can automate this process. This is an extension of the clean code principle of proper indentation and formatting, focusing on efficiency.
-
-### Leverage Browser Caching
-Use caching techniques to store frequently accessed resources on the user's device, reducing load times for repeat visits. This strategy aligns with the goal of writing efficient code that enhances the user experience.
-
-### Prioritize Above-the-Fold Content
-Optimize the loading of above-the-fold content to ensure it appears quickly, while deferring the loading of other resources. This approach is similar to using semantic HTML to structure your content logically and efficiently.
-
-## Conclusion
-Performance optimization in HTML is a critical aspect of web development that directly impacts user experience, SEO, and operational costs. By applying the best practices outlined in this guide, developers can create efficient, fast-loading web pages. Remember, the goal of optimization is to complement clean code practices, ensuring your website is not only well-coded but also performs excellently across all devices and connections.
\ No newline at end of file
diff --git a/docs/html/best-practices-and-optimization/_category_.json b/docs/html/best-practices-and-optimization/_category_.json
deleted file mode 100644
index e59b6dbde..000000000
--- a/docs/html/best-practices-and-optimization/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Best Practices and Optimization",
- "position": 16,
- "link": {
- "type": "generated-index",
- "description": "In this section, you will learn about best practices and optimization in html. You will learn about the importance of using semantic html, how to optimize images, and how to minify html."
- }
-}
diff --git a/docs/html/best-practices-and-optimization/accessibility-best-practices.md b/docs/html/best-practices-and-optimization/accessibility-best-practices.md
deleted file mode 100644
index 2d037906b..000000000
--- a/docs/html/best-practices-and-optimization/accessibility-best-practices.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-id: accessibility-best-practices
-title: Accessibility Best Practices
-sidebar_label: Accessibility Best Practices
-sidebar_position: 3
-tags: [html, best-practices, accessibility]
-description: In this tutorial, we will learn about accessibility best practices in HTML.
----
-
-# Accessibility Best Practices
-
-## Introduction
-In the realm of web development, accessibility is paramount. It signifies the practice of making websites usable for everyone, including people with disabilities. This encompasses designing and coding websites in a manner that enables users to perceive, understand, navigate, and interact with the Web seamlessly. Accessibility transcends social responsibility and enters the domain of legal obligation in numerous jurisdictions. This guide aims to delve into the best practices for crafting accessible HTML code, drawing parallels with the principles of writing clean HTML code and performance optimization, thereby ensuring a universally usable web.
-
-## The Critical Importance of Accessibility
-
-Accessibility stands at the forefront for several compelling reasons:
-
-1. **Inclusivity**: An accessible website guarantees equal access to information and functionalities for all users, including those with disabilities, fostering an inclusive digital environment.
-2. **Legal Compliance**: With the advent of laws and regulations mandating digital accessibility across many countries, ensuring accessibility is not just ethical but a legal necessity.
-3. **SEO Improvement**: Accessible websites are favored by search engines, as they tend to provide a superior user experience and adhere to web standards, thus improving search engine rankings.
-4. **Broader Audience Reach**: By catering to users with diverse needs, you not only adhere to ethical standards but also significantly expand your content's reach, tapping into a wider audience base.
-
-## Comprehensive Best Practices for Accessibility
-
-### Embrace Semantic HTML
-Utilizing semantic HTML elements such as `<header>`, `<nav>`, `<main>`, `<footer>`, `<article>`, and `<section>` imbues your web content with meaning. These elements are pivotal for screen readers and assistive technologies, aiding users in navigating and comprehending the structure of your website efficiently.
-
-### Keyboard Navigation
-It's imperative to ensure that all interactive elements on your website are navigable and operable via a keyboard. This includes but is not limited to links, buttons, forms, and custom widgets, catering to users who are unable to use a mouse.
-
-### Alternative Text for Images
-Employing the `alt` attribute to furnish alternative text for images is crucial. This text should succinctly convey the image's function or purpose for users who are visually impaired.
-
-### Accessible Forms
-Creating accessible forms involves labeling all form inputs with descriptive labels and ensuring that form feedback and error messages are accessible. Employing `fieldset` and `legend` elements to group related inputs enhances form accessibility significantly.
-
-### ARIA Roles and Properties
-The use of Accessible Rich Internet Applications (ARIA) roles and properties introduces additional semantics to your HTML, augmenting accessibility when HTML's inherent capabilities fall short. However, it's vital to exercise caution and use ARIA judiciously, as improper application can detract from your site's accessibility.
-
-### Color Contrast
-Ensuring sufficient color contrast between text and its background is essential for users with visual impairments. Tools such as the WebAIM Color Contrast Checker are invaluable for evaluating and optimizing your color choices.
-
-### Multimedia Text Alternatives
-For multimedia content, providing captions for videos and transcripts for audio content is indispensable. This practice makes your multimedia accessible to users who are deaf or hard of hearing.
-
-### Testing with Assistive Technologies
-A proactive approach to accessibility involves regular testing of your website with screen readers and other assistive technologies. Additionally, user testing with individuals who have disabilities can offer profound insights into the practical accessibility of your content.
-
-## Conclusion
-Prioritizing accessibility from the inception of your web development project is not merely a best practice but a cornerstone of ethical and inclusive web design. By adhering to the comprehensive best practices outlined in this guide, you can ensure that your website is not only accessible but also provides an enjoyable experience for everyone. Remember, an accessible website not only enhances usability for users with disabilities but elevates the overall user experience, contributing significantly to the success and reach of your web projects.
\ No newline at end of file
diff --git a/docs/html/best-practices-and-optimization/writing-clean-html-code.md b/docs/html/best-practices-and-optimization/writing-clean-html-code.md
deleted file mode 100644
index fb1a03ba7..000000000
--- a/docs/html/best-practices-and-optimization/writing-clean-html-code.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-id: writing-clean-html-code
-title: Writing Clean HTML Code
-sidebar_label: Writing Clean HTML Code
-sidebar_position: 1
-tags: [html, best-practices, optimization]
-description: In this tutorial, we will learn about writing clean HTML code.
----
-
-# Writing Clean HTML Code
-
-## Introduction
-Writing clean HTML code is a fundamental practice in web development that ensures your web pages are readable, maintainable, and efficient. Clean code not only makes it easier for developers to understand and modify but also plays a crucial role in website performance and accessibility. This guide will explore the best practices for writing clean HTML code, drawing parallels with the principles of using the W3C Validator for ensuring code quality.
-
-## Importance of Clean HTML Code
-
-Clean HTML code is essential for several reasons:
-
-1. **Readability and Maintenance**: Well-organized code with proper indentation and comments is easier to read and maintain. It allows developers to quickly understand the structure and purpose of the code, facilitating easier updates and debugging.
-
-2. **Performance Optimization**: Clean code helps in reducing page load times by eliminating unnecessary tags, comments, and whitespace. Efficient code ensures a smoother user experience, especially on mobile devices with limited bandwidth.
-
-3. **SEO Benefits**: Search engines favor well-structured, error-free HTML code. Clean code helps in better indexing and ranking of web pages, leading to increased visibility and traffic.
-
-4. **Cross-browser Compatibility**: Following HTML standards and best practices reduces inconsistencies across different browsers and ensures your website functions correctly on all platforms.
-
-5. **Accessibility**: Writing clean code with proper semantic elements and attributes enhances the accessibility of web pages, making content accessible to people with disabilities and users of assistive technologies.
-
-## Best Practices for Writing Clean HTML Code
-
-### Use Semantic HTML
-Semantic HTML involves using HTML elements for their given purpose. For example, use `<header>`, `<footer>`, `<nav>`, and `<article>` to define the structure of your document. This improves accessibility and SEO, as search engines and assistive technologies can better understand the content structure.
-
-### Keep It Simple
-Avoid unnecessary divs and nested structures. Aim for simplicity in your HTML structure, which makes it easier to maintain and style with CSS.
-
-### Proper Indentation and Formatting
-Consistently indent your code and use a readable format. This practice is not just for aesthetics; it makes your code easier to read and understand. Tools like Prettier or Beautify can automate this process.
-
-### Use Comments Sparingly
-Comments are essential for explaining complex parts of your code, but overusing them can clutter your HTML. Use comments to explain "why" something is done a certain way, not "what" is being done.
-
-### Validate Your HTML
-As highlighted in the "Using the W3C HTML Validator" guide, regularly validating your HTML with the W3C Validator ensures it is error-free and adheres to web standards. This step is crucial for maintaining the quality and performance of your website.
-
-### Responsive and Mobile-First Design
-Design your HTML structure with responsiveness in mind. Use fluid layouts, flexible images, and media queries to ensure your website looks great on all devices.
-
-## Conclusion
-Writing clean HTML code is a skill that benefits developers, users, and search engines alike. By following the best practices outlined in this guide and regularly using tools like the W3C Validator, you can ensure your web pages are efficient, accessible, and maintainable. Remember, clean code is the foundation of a successful web project, impacting everything from performance to user experience.
\ No newline at end of file
diff --git a/docs/html/forms/_category_.json b/docs/html/forms/_category_.json
deleted file mode 100644
index 5d3431758..000000000
--- a/docs/html/forms/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Forms",
- "position": 10,
- "link": {
- "type": "generated-index",
- "description": "In this section, you will learn how to create forms in html. You will learn how to create text fields, radio buttons, checkboxes, and more."
- }
- }
\ No newline at end of file
diff --git a/docs/html/forms/building-forms.md b/docs/html/forms/building-forms.md
deleted file mode 100644
index 637687587..000000000
--- a/docs/html/forms/building-forms.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-id: building-forms
-title: Building Forms in HTML
-sidebar_label: Building Forms
-sidebar_position: 1
-tags: [html, web-development, forms, building-forms]
-description: In this tutorial, you will learn how to build forms in HTML. Forms are used to collect user input on web pages, such as login forms, contact forms, and search forms.
----
-
-HTML forms are essential for interactive web pages, allowing users to enter data that can be sent to a server for processing. Forms can include a variety of elements such as text fields, checkboxes, radio buttons, and submit buttons.
-
-## Creating Forms
-
-To create a form in HTML, you use the `<form>` element. This element serves as the container for the form elements.
-
-```html
-<form>
- <!-- Form elements go here -->
-</form>
-```
-
-## Form Fields
-The `<input type="text">` defines a single-line input field for text input.
-A form can contain various elements to collect user input:
-
-<Tabs>
- <TabItem value="HTML">
- ```html {2,4,5}
- <form>
- <label for="name">Name:</label>
- <input type="text" id="name" name="name">
- <label for="email">Email:</label>
- <input type="email" id="email" name="email">
- <input type="submit" value="Submit">
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow url ="http://127.0.0.1:5500/index.html">
- <div>
- <form>
- <label for="name">Name:</label>
- <input type="text" id="name" name="name"></input>
- <br></br>
- <label for="email">Email:</label>
- <input type="email" id="email" name="email"></input>
- <br></br>
- <input type="submit" value="Submit"></input>
- </form>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-- **Text Fields** : The `<input type="text">` element defines a one-line text input field.
-- **Email Fields**: The `<input type="email">` element is used for input fields that should contain an e-mail address.
-- **Submit Button**: The `<input type="submit">` element is used to submit the form to the server.
-
-## Handling Form Data
-
-When a form is submitted, the form data is sent to the server. The method of sending the data can be specified using the `method` attribute in the `<form>` element:
-
-- **GET**: The form data is appended to the action URL as query parameters and sent in the URL of the request.
-- **POST**: The form data is sent in the body of the request, not in the URL.
-
-```html {1}
-<form action="/submit-form" method="post">
- <!-- Form elements -->
-</form>
-```
-
-## The `<input>` Element
-The HTML `<input>` element is the most used form element.
-An `<input>` element can be displayed in many ways, depending on the type attribute.
-
-Here are some examples:
-<table class="ws-table-all">
- <tbody><tr>
- <th>Type</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><input type="text"></td>
- <td>Displays a single-line text input field</td>
- </tr>
- <tr>
- <td><input type="radio"></td>
- <td>Displays a radio button (for selecting one of many choices)</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>Displays a checkbox (for selecting zero or more of many choices)</td>
- </tr>
- <tr>
- <td><input type="submit"></td>
- <td>Displays a submit button (for submitting the form)</td>
- </tr>
- <tr>
- <td><input type="button"></td>
- <td>Displays a clickable button</td>
- </tr>
- </tbody></table>
-
-
-## Conclusion
-
-HTML forms are a crucial part of web development, enabling user interaction and data collection. By understanding how to create forms, use form elements, and handle form submissions, you can create dynamic and interactive web pages. Remember to validate user input and consider security practices to protect user data and your website.
\ No newline at end of file
diff --git a/docs/html/forms/form-attributes.md b/docs/html/forms/form-attributes.md
deleted file mode 100644
index bae0e7ea8..000000000
--- a/docs/html/forms/form-attributes.md
+++ /dev/null
@@ -1,259 +0,0 @@
----
-id: form-attributes
-title: Form Attributes in HTML
-sidebar_label: Form Attributes
-sidebar_position: 3
-tags: [html, web-development, form-attributes, forms]
-description: In this tutorial, you will learn about form attributes in HTML. Form attributes define the appearance, behavior, and structure of forms on web pages.
----
-
-HTML forms and their input elements can be customized and controlled using various attributes. These attributes define the behavior and characteristics of the form and its elements, such as where to send the form data, how to send it, and more. This document provides an overview of the most commonly used HTML form attributes, along with code examples and their outputs.
-
-## The `action` Attribute
-
-The `action` attribute specifies where to send the form data when a form is submitted.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="/submit-form" method="post">
- <!-- Form elements go here -->
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- Form data is sent to "/submit-form" when submitted.
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## The `method` Attribute
-
-The `method` attribute specifies how to send form data (the form-submitting method).
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="/submit-form" method="post">
- <!-- Form elements go here -->
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- Form data is sent using the POST method.
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## The `enctype` Attribute
-
-The `enctype` attribute specifies how the form data should be encoded when submitting it to the server.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="/submit-form" method="post" enctype="multipart/form-data">
- <!-- Form elements go here -->
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- Form data is encoded as multipart/form-data.
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## The `autocomplete` Attribute
-
-The `autocomplete` attribute specifies whether a form or an input element should have autocomplete enabled.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="/submit-form" method="post" autocomplete="on">
- <!-- Form elements go here -->
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- Autocomplete is enabled for this form.
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## The `novalidate` Attribute
-
-The `novalidate` attribute specifies that the form should not be validated when submitted.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="/submit-form" method="post" novalidate>
- <!-- Form elements go here -->
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- This form will not be validated upon submission.
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## The `name` Attribute
-
-The name attribute specifies the name of the form. This name can be used to reference the form in JavaScript.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form name="contactForm">
- <label for="name">Name:</label>
- <input type="text" id="name" name="name">
- <label for="email">Email:</label>
- <input type="email" id="email" name="email">
- <input type="submit" value="Submit">
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- <form name="contactForm">
- <label for="name">Name:</label>
- <input type="text" id="name" name="name"></input>
- <label for="email">Email:</label>
- <input type="email" id="email" name="email"></input>
- <input type="submit" value="Submit"></input>
- </form>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## The `target` Attribute
-
-The target attribute specifies where to display the response after submitting the form. Common values include `_self`, `_blank`, `_parent`, and `_top`.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="/submit-form" method="post" target="_blank">
- <label for="name">Name:</label>
- <input type="text" id="name" name="name">
- <label for="email">Email:</label>
- <input type="email" id="email" name="email">
- <input type="submit" value="Submit">
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- <form action="/submit-form" method="post" target="_blank">
- <label for="name">Name:</label>
- <input type="text" id="name" name="name"></input>
- <label for="email">Email:</label>
- <input type="email" id="email" name="email"></input>
- <input type="submit" value="Submit"></input>
- </form>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## The `rel` Attribute
-
-The rel attribute specifies the relationship between the current document and the linked document. It is often used in conjunction with the `target` attribute.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="https://example.com" method="post" target="_blank" rel="noopener noreferrer">
- <label for="name">Name:</label>
- <input type="text" id="name" name="name">
- <label for="email">Email:</label>
- <input type="email" id="email" name="email">
- <input type="submit" value="Submit">
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- <form action="https://example.com" method="post" target="_blank" rel="noopener noreferrer">
- <label for="name">Name:</label>
- <input type="text" id="name" name="name"></input>
- <label for="email">Email:</label>
- <input type="email" id="email" name="email"></input>
- <input type="submit" value="Submit"></input>
- </form>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## Other Form Attributes
-
-Here are other form attributes you can use in HTML:
-
-<table>
- <tbody><tr>
- <th>Attribute</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><a href="/docs/html/forms/form-attributes#the-action-attribute">action</a></td>
- <td>Specifies where to send the form-data when a form is submitted</td>
- </tr>
- <tr>
- <td><a href="/docs/html/forms/form-attributes#the-autocomplete-attribute">autocomplete</a></td>
- <td>Specifies whether a form should have autocomplete on or off</td>
- </tr>
- <tr>
- <td><a href="/docs/html/forms/form-attributes#the-enctype-attribute">enctype</a></td>
- <td>Specifies how the form-data should be encoded when submitting it to the
- server (only for method="post")</td>
- </tr>
- <tr>
- <td><a href="/docs/html/forms/form-attributes#the-method-attribute">method</a></td>
- <td>Specifies the HTTP method to use when sending form-data</td>
- </tr>
- <tr>
- <td><a href="/docs/html/forms/form-attributes#the-name-attribute">name</a></td>
- <td>Specifies the name of the form</td>
- </tr>
- <tr>
- <td><a href="/docs/html/forms/form-attributes#the-novalidate-attribute">novalidate</a></td>
- <td>Specifies that the form should not be validated when submitted</td>
- </tr>
- <tr>
- <td><a href="/docs/html/forms/form-attributes#the-rel-attribute">rel</a></td>
- <td>Specifies the relationship between a linked resource and the current
- document</td>
- </tr>
- <tr>
- <td><a href="/docs/html/forms/form-attributes#the-target-attribute">target</a></td>
- <td>Specifies where to display the response that is received after submitting
- the form</td>
- </tr>
-</tbody>
-</table>
-
-## Conclusion
-
-HTML form attributes provide powerful ways to control the behavior of forms and their elements. By understanding and utilizing these attributes effectively, developers can create more functional and user-friendly forms. Always consider the best practices for form design and user experience when working with these attributes.
\ No newline at end of file
diff --git a/docs/html/forms/form-input-elements.md b/docs/html/forms/form-input-elements.md
deleted file mode 100644
index fcd089cff..000000000
--- a/docs/html/forms/form-input-elements.md
+++ /dev/null
@@ -1,246 +0,0 @@
----
-id: form-input-elements
-title: Form Input Elements in HTML
-sidebar_label: Form Input Elements
-sidebar_position: 1
-tags: [html, web-development, forms, form-input-elements]
-description: In this tutorial, you will learn about form input elements in HTML. Form input elements are used to collect user input on web pages, such as text fields, radio buttons, checkboxes, and more.
----
-
-HTML forms support a variety of input elements to collect user data efficiently. Each input type serves a specific purpose, enabling users to enter data in a format that suits the information being collected. This document provides an overview of the most commonly used HTML input elements, along with code examples and their outputs.
-
-## Text Input
-
-The `<input type="text">` element displays a single-line text input field, allowing users to enter free text.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <label for="fname">First name:</label>
- <input type="text" id="fname" name="fname">
- ```
- </TabItem>
- <TabItem value="Ouput">
- <BrowserWindow>
- <div>
- <label for="fname">First name:</label>
- <input type="text" id="fname" name="fname"></input>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## Radio Buttons
-
-The `<input type="radio">` element displays a radio button, which allows users to select one option from a set of predefined options.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form>
- <input type="radio" id="male" name="gender" value="male">
- <label for="male">Male</label><br>
- <input type="radio" id="female" name="gender" value="female">
- <label for="female">Female</label><br>
- </form>
- ```
- </TabItem>
- <TabItem value="Ouput">
- <BrowserWindow>
- <div>
- <form>
- <input type="radio" id="male" name="gender" value="male"></input>
- <label for="male">Male</label><br></br>
- <input type="radio" id="female" name="gender" value="female"></input>
- <label for="female">Female</label><br></br>
- </form>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## Checkbox
-
-The `<input type="checkbox">` element displays a checkbox, allowing users to select zero or more options from a set of choices.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form>
- <input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
- <label for="subscribe">Subscribe to newsletter</label>
- </form>
- ```
- </TabItem>
- <TabItem value="Ouput">
- <BrowserWindow>
- <div>
- <form>
- <input type="checkbox" id="subscribe" name="subscribe" value="newsletter"></input>
- <label for="subscribe">Subscribe to newsletter</label>
- </form>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## Submit Button
-
-The `<input type="submit">` element displays a submit button, which is used to submit the form to the server.
-
-<Tabs>
- <TabItem value="HTML">
-```html
-<form>
- <input type="submit" value="Submit">
-</form>
-```
- </TabItem>
- <TabItem value="Ouput">
- <BrowserWindow>
- <div>
- <form>
- <input type="submit" value="Submit"></input>
-</form>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## Button
-
-The `<input type="button">` element displays a clickable button, not specifically for form submission.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <input type="button" value="Click Me" onclick="alert('Hello World!')"></input>
- ```
- </TabItem>
- <TabItem value="Ouput">
- <BrowserWindow>
- <div>
- <input type="button" value="Click Me" onclick="alert('Hello World!')"></input>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## Email Field
-
-The `<input type="email">` element is used for input fields that should contain an e-mail address.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <label for="email">Email:</label>
- <input type="email" id="email" name="email">
- ```
- </TabItem>
- <TabItem value="Ouput">
- <BrowserWindow>
- <div>
- <label for="email">Email:</label>
- <input type="email" id="email" name="email"></input>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## Password Field
-
-The `<input type="password">` element displays a field where the user can enter a password.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <label for="pwd">Password:</label>
- <input type="password" id="pwd" name="pwd">
- ```
- </TabItem>
- <TabItem value="Ouput">
- <BrowserWindow>
- <div>
- <label for="pwd">Password:</label>
- <input type="password" id="pwd" name="pwd"></input>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## Input elements Example
-<Tabs>
- <TabItem value="HTML">
- ```html {3,4,6,8,11,13,14,15}
- <form action="/submit" method="post">
- <label for="fname">First name:</label>
- <input type="text" id="fname" name="fname"></input>
- <input type="radio" id="male" name="gender" value="male"></input>
- <label for="male">Male</label>
- <input type="radio" id="female" name="gender" value="female"></input>
- <label for="female">Female</label>
- <input type="checkbox" id="subscribe" name="subscribe" value="newsletter"></input>
- <label for="subscribe">Subscribe to newsletter</label>
- <label for="email">Email:</label>
- <input type="email" id="email" name="email"></input>
- <label for="pwd">Password:</label>
- <input type="password" id="pwd" name="pwd"></input>
- <input type="button" value="Click Me"></input>
- <input type="submit" value="Submit"></input>
- </form>
- ```
- </TabItem>
- <TabItem value="Ouput">
- <BrowserWindow>
- <div>
- <form action="/submit" method="post">
- <label for="fname">First name:</label>
- <input type="text" id="fname" name="fname"></input><br></br>
- <input type="radio" id="male" name="gender" value="male"></input>
- <label for="male">Male</label>
- <input type="radio" id="female" name="gender" value="female"></input>
- <label for="female">Female</label><br></br>
- <input type="checkbox" id="subscribe" name="subscribe" value="newsletter"></input>
- <label for="subscribe">Subscribe to newsletter</label><br></br>
- <label for="email">Email:</label>
- <input type="email" id="email" name="email"></input><br></br>
- <label for="pwd">Password:</label>
- <input type="password" id="pwd" name="pwd"></input><br></br>
- <input type="button" value="Click Me" onclick="alert('Hello World!')"></input><br></br>
- <input type="submit" value="Submit"></input>
- </form>
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## Other Input Types
-Here are the different input types you can use in HTML:
-
-- `<input type="button">`
-- `<input type="checkbox">`
-- `<input type="color">`
-- `<input type="date">`
-- `<input type="datetime-local">`
-- `<input type="email">`
-- `<input type="file">`
-- `<input type="hidden">`
-- `<input type="image">`
-- `<input type="month">`
-- `<input type="number">`
-- `<input type="password">`
-- `<input type="radio">`
-- `<input type="range">`
-- `<input type="reset">`
-- `<input type="search">`
-- `<input type="submit">`
-- `<input type="tel">`
-- `<input type="text">`
-- `<input type="time">`
-- `<input type="url">`
-- `<input type="week">`
-
-
-## Conclusion
-
-HTML forms provide a wide range of input elements designed to facilitate the collection of user data. By understanding how to use these elements effectively, developers can create forms that are both user-friendly and functional. Remember to validate user input to ensure data integrity and security.
\ No newline at end of file
diff --git a/docs/html/forms/form-validation.md b/docs/html/forms/form-validation.md
deleted file mode 100644
index 9b1141da4..000000000
--- a/docs/html/forms/form-validation.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-id: form-validation
-title: Form Validation in HTML
-sidebar_label: Form Validation
-sidebar_position: 4
-tags: [html, web-development, forms, form-validation]
-description: In this tutorial, you will learn how to validate forms in HTML using built-in form validation attributes and JavaScript.
----
-
-HTML forms are crucial for collecting user input, but it's equally important to ensure that the input is valid. Form validation can be performed on the client side (in the browser) or on the server side. This document focuses on client-side validation using HTML5 attributes, providing an overview of the most commonly used validation techniques, along with code examples and their outputs.
-
-## The required Attribute
-
-The `required` attribute is a simple way to make an input field mandatory.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="/submit-form" method="post">
- <label for="name">Name:</label>
- <input type="text" id="name" name="name" required>
- <input type="submit" value="Submit">
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- The form will prompt the user to fill out the 'Name' field if it's left empty upon submission.
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## The type Attribute for Validation
-
-Using the `type` attribute, you can specify the kind of data expected in an input field, which helps in validating the input.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="/submit-form" method="post">
- <label for="email">Email:</label>
- <input type="email" id="email" name="email" required>
- <input type="submit" value="Submit">
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- The form will validate the 'Email' field to ensure it contains a valid email address format.
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## The pattern Attribute
-
-The `pattern` attribute allows you to define a regular expression that the input field's value must match.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="/submit-form" method="post">
- <label for="phone">Phone (123-456-7890):</label>
- <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
- <input type="submit" value="Submit">
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- The form will only accept the phone number if it matches the specified pattern.
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## The minlength and maxlength Attributes
-
-These attributes define the minimum and maximum length of the input data.
-
-<Tabs>
- <TabItem value="HTML">
- ```html
- <form action="/submit-form" method="post">
- <label for="username">Username:</label>
- <input type="text" id="username" name="username" minlength="4" maxlength="8" required>
- <input type="submit" value="Submit">
- </form>
- ```
- </TabItem>
- <TabItem value="Output">
- <BrowserWindow>
- <div>
- The form will enforce the 'Username' field to be between 4 and 8 characters.
- </div>
- </BrowserWindow>
- </TabItem>
-</Tabs>
-
-## Conclusion
-
-Client-side form validation in HTML helps ensure that users fill out forms correctly, improving the quality of the data collected. By using HTML5 validation attributes like `required`, `type`, `pattern`, `minlength`, and `maxlength`, developers can create forms that are both user-friendly and robust. Remember, client-side validation does not replace the need for server-side validation, as client-side validation can be bypassed.
\ No newline at end of file
diff --git a/docs/html/html-basics/attributes-and-values.md b/docs/html/html-basics/attributes-and-values.md
deleted file mode 100644
index c56fbf5d9..000000000
--- a/docs/html/html-basics/attributes-and-values.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-id: attributes-and-values
-title: HTML Attributes and Values
-sidebar_label: Attributes and Values
-sidebar_position: 3
-tags: [html, web-development, attributes, values]
-description: In this tutorial, you will learn about HTML attributes and values. HTML attributes are used to provide additional information about HTML elements, and values are the data that is assigned to attributes.
----
\ No newline at end of file
diff --git a/dsa-solutions/gfg-solutions/Easy problems/square-root.md b/dsa-solutions/gfg-solutions/Easy problems/square-root.md
index cbe2cf0d3..c249e2811 100644
--- a/dsa-solutions/gfg-solutions/Easy problems/square-root.md
+++ b/dsa-solutions/gfg-solutions/Easy problems/square-root.md
@@ -1,188 +1,193 @@
----
-id: square-root
-title: Square Root
-sidebar_label: Square-Root
-tags:
-- Math
-- Binary Search
-description: "This document provides solutions to the problem of finding the Square Root of an integer."
----
-
-## Problem
-
-Given an integer `x`, find the square root of `x`. If `x` is not a perfect square, then return the floor value of √x.
-
-### Examples
-
-**Example 1:**
-
-```
-Input: x = 5
-Output: 2
-Explanation: Since 5 is not a perfect square, the floor of the square root of 5 is 2.
-```
-
-**Example 2:**
-
-```
-Input: x = 4
-Output: 2
-Explanation: Since 4 is a perfect square, its square root is 2.
-```
-
-### Your Task
-
-You don't need to read input or print anything. The task is to complete the function `floorSqrt()` which takes `x` as the input parameter and returns its square root. Note: Try solving the question without using the sqrt function. The value of `x` ≥ 0.
-
-**Expected Time Complexity:** $O(log N)$
-**Expected Auxiliary Space:** $O(1)$
-
-**Constraints**
-- `1 ≤ x ≤ 10^7`
-
-## Solution
-
-### Intuition & Approach
-
-To find the square root of a number without using the built-in `sqrt` function, we can use binary search. This approach leverages the fact that the square root of `x` must lie between `0` and `x`. By repeatedly narrowing down the range using binary search, we can efficiently find the floor value of the square root.
-
-### Implementation
-
-<Tabs>
- <TabItem value="python" label="Python">
-
-```python
-class Solution:
- def floorSqrt(self, x: int) -> int:
- if x == 0 or x == 1:
- return x
- start, end = 1, x
- ans = 0
- while start <= end:
- mid = (start + end) // 2
- if mid * mid == x:
- return mid
- if mid * mid < x:
- start = mid + 1
- ans = mid
- else:
- end = mid - 1
- return ans
-```
-
- </TabItem>
- <TabItem value="java" label="Java">
-
-```java
-class Solution {
- long floorSqrt(long x) {
- if (x == 0 || x == 1) {
- return x;
- }
- long start = 1, end = x, ans = 0;
- while (start <= end) {
- long mid = (start + end) / 2;
- if (mid * mid == x) {
- return mid;
- }
- if (mid * mid < x) {
- start = mid + 1;
- ans = mid;
- } else {
- end = mid - 1;
- }
- }
- return ans;
- }
-}
-```
-
- </TabItem>
- <TabItem value="cpp" label="C++">
-
-```cpp
-class Solution {
-public:
- long long int floorSqrt(long long int x) {
- if (x == 0 || x == 1)
- return x;
- long long int start = 1, end = x, ans = 0;
- while (start <= end) {
- long long int mid = (start + end) / 2;
- if (mid * mid == x)
- return mid;
- if (mid * mid < x) {
- start = mid + 1;
- ans = mid;
- } else {
- end = mid - 1;
- }
- }
- return ans;
- }
-};
-```
-
- </TabItem>
- <TabItem value="javascript" label="JavaScript">
-
-```javascript
-class Solution {
- floorSqrt(x) {
- if (x === 0 || x === 1) {
- return x;
- }
- let start = 1, end = x, ans = 0;
- while (start <= end) {
- let mid = Math.floor((start + end) / 2);
- if (mid * mid === x) {
- return mid;
- }
- if (mid * mid < x) {
- start = mid + 1;
- ans = mid;
- } else {
- end = mid - 1;
- }
- }
- return ans;
- }
-}
-```
-
- </TabItem>
- <TabItem value="typescript" label="TypeScript">
-
-```typescript
-class Solution {
- floorSqrt(x: number): number {
- if (x === 0 || x === 1) {
- return x;
- }
- let start = 1, end = x, ans = 0;
- while (start <= end) {
- let mid = Math.floor((start + end) / 2);
- if (mid * mid === x) {
- return mid;
- }
- if (mid * mid < x) {
- start = mid + 1;
- ans = mid;
- } else {
- end = mid - 1;
- }
- }
- return ans;
- }
-}
-```
-
- </TabItem>
-</Tabs>
-
-## Complexity Analysis
-
-The provided solutions efficiently find the floor value of the square root of a given integer `x` using binary search. This approach ensures a time complexity of $ O(log N) and an auxiliary space complexity of $O(1)$. The algorithms are designed to handle large values of `x` up to 10^7 efficiently without relying on built-in square root functions.
-
-**Time Complexity:** $O(log N)$
-**Auxiliary Space:** $O(1)$
\ No newline at end of file
+---
+id: square-root
+title: Square Root
+sidebar_label: Square-Root
+tags:
+ - Math
+ - Binary Search
+description: "This document provides solutions to the problem of finding the Square Root of an integer."
+---
+
+## Problem
+
+Given an integer `x`, find the square root of `x`. If `x` is not a perfect square, then return the floor value of √x.
+
+### Examples
+
+**Example 1:**
+
+```
+Input: x = 5
+Output: 2
+Explanation: Since 5 is not a perfect square, the floor of the square root of 5 is 2.
+```
+
+**Example 2:**
+
+```
+Input: x = 4
+Output: 2
+Explanation: Since 4 is a perfect square, its square root is 2.
+```
+
+### Your Task
+
+You don't need to read input or print anything. The task is to complete the function `floorSqrt()` which takes `x` as the input parameter and returns its square root. Note: Try solving the question without using the sqrt function. The value of `x` ≥ 0.
+
+**Expected Time Complexity:** $O(log N)$
+**Expected Auxiliary Space:** $O(1)$
+
+**Constraints**
+
+- `1 ≤ x ≤ 10^7`
+
+## Solution
+
+### Intuition & Approach
+
+To find the square root of a number without using the built-in `sqrt` function, we can use binary search. This approach leverages the fact that the square root of `x` must lie between `0` and `x`. By repeatedly narrowing down the range using binary search, we can efficiently find the floor value of the square root.
+
+### Implementation
+
+<Tabs>
+ <TabItem value="python" label="Python">
+
+```python
+class Solution:
+ def floorSqrt(self, x: int) -> int:
+ if x == 0 or x == 1:
+ return x
+ start, end = 1, x
+ ans = 0
+ while start <= end:
+ mid = (start + end) // 2
+ if mid * mid == x:
+ return mid
+ if mid * mid < x:
+ start = mid + 1
+ ans = mid
+ else:
+ end = mid - 1
+ return ans
+```
+
+ </TabItem>
+ <TabItem value="java" label="Java">
+
+```java
+class Solution {
+ long floorSqrt(long x) {
+ if (x == 0 || x == 1) {
+ return x;
+ }
+ long start = 1, end = x, ans = 0;
+ while (start <= end) {
+ long mid = (start + end) / 2;
+ if (mid * mid == x) {
+ return mid;
+ }
+ if (mid * mid < x) {
+ start = mid + 1;
+ ans = mid;
+ } else {
+ end = mid - 1;
+ }
+ }
+ return ans;
+ }
+}
+```
+
+ </TabItem>
+ <TabItem value="cpp" label="C++">
+
+```cpp
+class Solution {
+public:
+ long long int floorSqrt(long long int x) {
+ if (x == 0 || x == 1)
+ return x;
+ long long int start = 1, end = x, ans = 0;
+ while (start <= end) {
+ long long int mid = (start + end) / 2;
+ if (mid * mid == x)
+ return mid;
+ if (mid * mid < x) {
+ start = mid + 1;
+ ans = mid;
+ } else {
+ end = mid - 1;
+ }
+ }
+ return ans;
+ }
+};
+```
+
+ </TabItem>
+ <TabItem value="javascript" label="JavaScript">
+
+```javascript
+class Solution {
+ floorSqrt(x) {
+ if (x === 0 || x === 1) {
+ return x;
+ }
+ let start = 1,
+ end = x,
+ ans = 0;
+ while (start <= end) {
+ let mid = Math.floor((start + end) / 2);
+ if (mid * mid === x) {
+ return mid;
+ }
+ if (mid * mid < x) {
+ start = mid + 1;
+ ans = mid;
+ } else {
+ end = mid - 1;
+ }
+ }
+ return ans;
+ }
+}
+```
+
+ </TabItem>
+ <TabItem value="typescript" label="TypeScript">
+
+```typescript
+class Solution {
+ floorSqrt(x: number): number {
+ if (x === 0 || x === 1) {
+ return x;
+ }
+ let start = 1,
+ end = x,
+ ans = 0;
+ while (start <= end) {
+ let mid = Math.floor((start + end) / 2);
+ if (mid * mid === x) {
+ return mid;
+ }
+ if (mid * mid < x) {
+ start = mid + 1;
+ ans = mid;
+ } else {
+ end = mid - 1;
+ }
+ }
+ return ans;
+ }
+}
+```
+
+ </TabItem>
+</Tabs>
+
+## Complexity Analysis
+
+The provided solutions efficiently find the floor value of the square root of a given integer `x` using binary search. This approach ensures a time complexity of $ O(log N) and an auxiliary space complexity of $O(1)$. The algorithms are designed to handle large values of `x` up to 10^7 efficiently without relying on built-in square root functions.
+
+**Time Complexity:** $O(log N)$
+**Auxiliary Space:** $O(1)$
diff --git a/dsa-solutions/lc-solutions/0200-0299/0240-search-a-2d-matrix-ii.md b/dsa-solutions/lc-solutions/0200-0299/0240-search-a-2d-matrix-ii.md
index e3b9a1324..bdd389ce2 100644
--- a/dsa-solutions/lc-solutions/0200-0299/0240-search-a-2d-matrix-ii.md
+++ b/dsa-solutions/lc-solutions/0200-0299/0240-search-a-2d-matrix-ii.md
@@ -69,6 +69,7 @@ Output: false
### Intuition and Approach
To search for a value in this matrix efficiently, we can utilize the properties of the matrix. Since the matrix is sorted both row-wise and column-wise, we can start our search from the top-right corner of the matrix. From here, we have two options:
+
1. If the target is greater than the current value, move downwards.
2. If the target is less than the current value, move leftwards.
@@ -76,7 +77,7 @@ This approach ensures that we eliminate one row or one column in each step, lead
<Tabs>
<tabItem value="Greedy Search" label="Greedy Search">
-
+
### Approach: Greedy Search
By leveraging the sorted properties of the matrix, we can search for the target value efficiently using a greedy approach. This involves starting from the top-right corner and adjusting our search direction based on the current value.
@@ -108,7 +109,7 @@ const matrix = [
[2, 5, 8, 12, 19],
[3, 6, 9, 16, 22],
[10, 13, 14, 17, 24],
- [18, 21, 23, 26, 30]
+ [18, 21, 23, 26, 30],
];
const target = 5;
const result = searchMatrix(matrix, target);
@@ -116,13 +117,8 @@ const result = searchMatrix(matrix, target);
return (
<div>
<p>
- <b>Input:</b> matrix = [
- [1, 4, 7, 11, 15],
- [2, 5, 8, 12, 19],
- [3, 6, 9, 16, 22],
- [10, 13, 14, 17, 24],
- [18, 21, 23, 26, 30]
- ], target = 5
+ <b>Input:</b> matrix = [ [1, 4, 7, 11, 15], [2, 5, 8, 12, 19], [3, 6, 9,
+ 16, 22], [10, 13, 14, 17, 24], [18, 21, 23, 26, 30] ], target = 5
</p>
<p>
<b>Output:</b> {result ? "true" : "false"}
@@ -182,7 +178,7 @@ return (
```
</TabItem>
- <TabItem value="Python" label="Python">
+ <TabItem value="Python" label="Python">
<SolutionAuthor name="@aryansh-patel"/>
```python
def searchMatrix(matrix: List[List[int]], target: int) -> bool:
@@ -259,7 +255,7 @@ return (
};
```
- </TabItem>
+ </TabItem>
</Tabs>
#### Complexity Analysis
@@ -269,7 +265,8 @@ return (
- The time complexity is linear in terms of the dimensions of the matrix. Each step eliminates either a row or a
- column, leading to a linear time complexity of $O(m + n)$.
+column, leading to a linear time complexity of $O(m + n)$.
+
- The space complexity is constant because we only use a few extra variables regardless of the matrix size.
</tabItem>
@@ -287,8 +284,8 @@ This solution leverages the matrix's properties to reduce the search space effic
<TabItem value="en" label="English">
- ---
-
+---
+
<Tabs>
<TabItem value="javascript" label="JavaScript">
<LiteYouTubeEmbed
@@ -296,7 +293,7 @@ This solution leverages the matrix's properties to reduce the search space effic
params="autoplay=1&autohide=1&showinfo=0&rel=0"
title="Search a 2D Matrix II Problem Explanation | Search a 2D Matrix II Solution"
poster="maxresdefault"
- webp
+ webp
/>
</TabItem>
@@ -306,7 +303,7 @@ This solution leverages the matrix's properties to reduce the search space effic
params="autoplay=1&autohide=1&showinfo=0&rel=0"
title="Search a 2D Matrix II Problem Explanation | Search a 2D Matrix II Solution"
poster="maxresdefault"
- webp
+ webp
/>
</TabItem>
<TabItem value="java" label="Java">
@@ -315,7 +312,7 @@ This solution leverages the matrix's properties to reduce the search space effic
params="autoplay=1&autohide=1&showinfo=0&rel=0"
title="Search a 2D Matrix II Problem Explanation | Search a 2D Matrix II Solution"
poster="maxresdefault"
- webp
+ webp
/>
</TabItem>
</Tabs>
@@ -328,7 +325,7 @@ This solution leverages the matrix's properties to reduce the search space effic
params="autoplay=1&autohide=1&showinfo=0&rel=0"
title="Search a 2D Matrix II Problem Explanation | Search a 2D Matrix II Solution"
poster="maxresdefault"
- webp
+ webp
/>
</TabItem>
diff --git a/dsa-solutions/lc-solutions/0900-0999/0905-sort-array-by-parity.md b/dsa-solutions/lc-solutions/0900-0999/0905-sort-array-by-parity.md
index 4eacd7aa6..4278ec3fb 100644
--- a/dsa-solutions/lc-solutions/0900-0999/0905-sort-array-by-parity.md
+++ b/dsa-solutions/lc-solutions/0900-0999/0905-sort-array-by-parity.md
@@ -2,15 +2,15 @@
id: Sort-Array-By-Parity
title: Sort Array By Parity
sidebar_label: Sort Array By Parity
-tags:
- - Arrays
- - Sorting
+tags:
+ - Arrays
+ - Sorting
---
## Problem Description
-| Problem Statement | Solution Link | LeetCode Profile |
-| :------------------------------------------------------ | :------------------------------------------------------------------------- | :------------------------------------------------------ |
+| Problem Statement | Solution Link | LeetCode Profile |
+| :-------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------- |
| [Sort Array By Parity](https://leetcode.com/problems/sort-array-by-parity/description/) | [Sort Array By Parity Solution on LeetCode](https://leetcode.com/problems/sort-array-by-parity/solutions/) | [Nikita Saini](https://leetcode.com/u/Saini_Nikita/) |
## Problem Description
@@ -21,13 +21,13 @@ Return any array that satisfies this condition.
### Example 1:
-**Input:** `nums = [3, 1, 2, 4]`
-**Output:** `[2, 4, 3, 1]`
+**Input:** `nums = [3, 1, 2, 4]`
+**Output:** `[2, 4, 3, 1]`
**Explanation:** The outputs `[4, 2, 3, 1]`, `[2, 4, 1, 3]`, and `[4, 2, 1, 3]` would also be accepted.
### Example 2:
-**Input:** `nums = [0]`
+**Input:** `nums = [0]`
**Output:** `[0]`
## Constraints
@@ -64,7 +64,7 @@ public class EvenOddArray {
public static int[] sortArrayByParity(int[] nums) {
List<Integer> even = new ArrayList<>();
List<Integer> odd = new ArrayList<>();
-
+
for (int num : nums) {
if (num % 2 == 0) {
even.add(num);
@@ -72,11 +72,11 @@ public class EvenOddArray {
odd.add(num);
}
}
-
+
even.addAll(odd);
return even.stream().mapToInt(i -> i).toArray();
}
-
+
public static void main(String[] args) {
int[] nums = {3, 1, 2, 4};
System.out.println(Arrays.toString(sortArrayByParity(nums))); // Output: [2, 4, 3, 1]
@@ -122,7 +122,7 @@ int main() {
void sortArrayByParity(int* nums, int numsSize, int* returnSize) {
int* result = (int*)malloc(numsSize * sizeof(int));
int evenIndex = 0, oddIndex = numsSize - 1;
-
+
for (int i = 0; i < numsSize; ++i) {
if (nums[i] % 2 == 0) {
result[evenIndex++] = nums[i];
@@ -142,7 +142,7 @@ int main() {
int numsSize = sizeof(nums) / sizeof(nums[0]);
int returnSize;
sortArrayByParity(nums, numsSize, &returnSize);
-
+
for (int i = 0; i < numsSize; ++i) {
printf("%d ", nums[i]);
}
@@ -155,23 +155,23 @@ int main() {
```javascript
function sortArrayByParity(nums) {
- let even = [];
- let odd = [];
-
- for (let num of nums) {
- if (num % 2 === 0) {
- even.push(num);
- } else {
- odd.push(num);
- }
+ let even = [];
+ let odd = [];
+
+ for (let num of nums) {
+ if (num % 2 === 0) {
+ even.push(num);
+ } else {
+ odd.push(num);
}
-
- return [...even, ...odd];
+ }
+
+ return [...even, ...odd];
}
// Example usage
let nums = [3, 1, 2, 4];
-console.log(sortArrayByParity(nums)); // Output: [2, 4, 3, 1]
+console.log(sortArrayByParity(nums)); // Output: [2, 4, 3, 1]
```
## Step-by-Step Algorithm
@@ -185,4 +185,4 @@ console.log(sortArrayByParity(nums)); // Output: [2, 4, 3, 1]
## Conclusion
-This problem can be solved efficiently by iterating through the array once and separating the integers into even and odd lists/arrays. The time complexity is O(n), where n is the length of the array, making this approach optimal for the given constraints.
\ No newline at end of file
+This problem can be solved efficiently by iterating through the array once and separating the integers into even and odd lists/arrays. The time complexity is O(n), where n is the length of the array, making this approach optimal for the given constraints.
diff --git a/dsa-solutions/lc-solutions/0900-0999/0906-super-palindromes.md b/dsa-solutions/lc-solutions/0900-0999/0906-super-palindromes.md
index b4c6801dc..bdc410957 100644
--- a/dsa-solutions/lc-solutions/0900-0999/0906-super-palindromes.md
+++ b/dsa-solutions/lc-solutions/0900-0999/0906-super-palindromes.md
@@ -2,15 +2,15 @@
id: super-palindromes
title: Super Palindromes
sidebar_label: Super Palindromes
-tags:
- - Palindrome
- - Math
+tags:
+ - Palindrome
+ - Math
---
## Problem Description
-| Problem Statement | Solution Link | LeetCode Profile |
-| :------------------------------------------------------ | :------------------------------------------------------------------------- | :------------------------------------------------------ |
+| Problem Statement | Solution Link | LeetCode Profile |
+| :-------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------- | :--------------------------------------------------- |
| [Super Palindromes](https://leetcode.com/problems/super-palindromes/description/) | [Super Palindromes Solution on LeetCode](https://leetcode.com/problems/super-palindromes/solutions/) | [Nikita Saini](https://leetcode.com/u/Saini_Nikita/) |
## Problem Description
@@ -62,7 +62,7 @@ def super_palindromes(left, right):
left, right = int(left), int(right)
count = 0
limit = int(math.sqrt(right)) + 1
-
+
for i in range(1, limit):
s = str(i)
pal = s + s[::-1]
@@ -71,14 +71,14 @@ def super_palindromes(left, right):
break
if num >= left and is_palindrome(str(num)):
count += 1
-
+
pal = s + s[-2::-1]
num = int(pal) ** 2
if num > right:
break
if num >= left and is_palindrome(str(num)):
count += 1
-
+
return count
```
@@ -178,7 +178,7 @@ int superPalindromes(char* left, char* right) {
for (long long i = 1; i < limit; i++) {
sprintf(s, "%lld", i);
int len = strlen(s);
-
+
// Palindrome of even length
snprintf(pal, 40, "%s%s", s, strrev(strdup(s)));
long long num1 = atoll(pal) * atoll(pal);
@@ -200,28 +200,29 @@ int superPalindromes(char* left, char* right) {
```javascript
function isPalindrome(s) {
- return s === s.split('').reverse().join('');
+ return s === s.split("").reverse().join("");
}
function superPalindromes(left, right) {
- let l = BigInt(left), r = BigInt(right);
- let count = 0;
- let limit = BigInt(Math.sqrt(Number(r))) + BigInt(1);
-
- for (let i = BigInt(1); i < limit; i++) {
- let s = i.toString();
- let pal1 = s + s.split('').reverse().join('');
- let num1 = BigInt(pal1) ** BigInt(2);
- if (num1 > r) break;
- if (num1 >= l && isPalindrome(num1.toString())) count++;
-
- let pal2 = s + s.slice(0, -1).split('').reverse().join('');
- let num2 = BigInt(pal2) ** BigInt(2);
- if (num2 > r) break;
- if (num2 >= l && isPalindrome(num2.toString())) count++;
- }
-
- return count;
+ let l = BigInt(left),
+ r = BigInt(right);
+ let count = 0;
+ let limit = BigInt(Math.sqrt(Number(r))) + BigInt(1);
+
+ for (let i = BigInt(1); i < limit; i++) {
+ let s = i.toString();
+ let pal1 = s + s.split("").reverse().join("");
+ let num1 = BigInt(pal1) ** BigInt(2);
+ if (num1 > r) break;
+ if (num1 >= l && isPalindrome(num1.toString())) count++;
+
+ let pal2 = s + s.slice(0, -1).split("").reverse().join("");
+ let num2 = BigInt(pal2) ** BigInt(2);
+ if (num2 > r) break;
+ if (num2 >= l && isPalindrome(num2.toString())) count++;
+ }
+
+ return count;
}
```
@@ -230,12 +231,13 @@ function superPalindromes(left, right) {
1. **Generate Palindromes:**
- Iterate through possible values of `i` from 1 to the square root of the right boundary.
- Construct palindromes by concatenating `s` with its reverse and with its reverse minus the last character.
-
2. **Square Palindromes:**
+
- Compute the square of each palindrome.
- Check if the squared value is within the range `[left, right]`.
3. **Check for Super-Palindromes:**
+
- Verify if the squared palindrome is also a palindrome.
4. **Count and Return:**
diff --git a/static/courses/html/html-course.png b/static/courses/html/html-course.png
new file mode 100644
index 000000000..865d8b1f2
Binary files /dev/null and b/static/courses/html/html-course.png differ
diff --git a/static/courses/html/intro-html.png b/static/courses/html/intro-html.png
new file mode 100644
index 000000000..8862a5b60
Binary files /dev/null and b/static/courses/html/intro-html.png differ
+
+