Fix: bugs

Author: ajay-dhangar

docs/html/how-html-works.md renamed to docs/html/how-html-works.mdx

@@ -4,7 +4,7 @@ title: Advanced HTML Topics
 sidebar_label: Advanced HTML Topics
 sidebar_position: 2
 tags: [html, web-development, advanced]
-description: In this tutorial, we will explore advanced HTML topics such as web components, microdata, and more.
+description: "In this tutorial, we will explore advanced HTML topics such as web components, microdata, and more."
 keywords:
   [
     advanced html,
@@ -14,11 +14,13 @@ keywords:
     html5,
     html best practices,
   ]
+hide_table_of_contents: true
 ---
 
 In this tutorial, we will explore advanced HTML topics such as web components, microdata, semantic HTML, and more.
 
 <AdsComponent />
+<br />
 
 ## Web Components
 
@@ -61,6 +63,7 @@ Here's an example of how to create a custom element using the Custom Elements AP
 In the above example, we define a custom element called `my-element` that displays the text "Hello, World!" when inserted into the document.
 
 <AdsComponent />
+<br />
 
 ## Microdata
 

docs/html/intro-html.md renamed to docs/html/intro-html.mdx

@@ -4,7 +4,8 @@ title: Community Support
 sidebar_label: Community Support
 sidebar_position: 3
 tags: [html, web-development, community, support]
-description: In this tutorial, we will explore the community support available for HTML and web development.
+description: "In this tutorial, we will explore the community support available for HTML and web development."
+hide_table_of_contents: true
 ---
 
 Now, If you are stuck with a problem or have a question, you can always ask for help from the community. keep in mind that the community is always there to help you.

docs/html/next-steps-and-resources/advanced-html-topics.md renamed to docs/html/next-steps-and-resources/advanced-html-topics.mdx

@@ -4,7 +4,7 @@ title: Further Learning Resources
 sidebar_label: Further Learning Resources
 sidebar_position: 1
 tags: [html, web-development, resources]
-description: In this tutorial, we will explore further learning resources for HTML and web development.
+description: "In this tutorial, we will explore further learning resources for HTML and web development."
 keywords:
   [
     html resources,
@@ -19,4 +19,12 @@ keywords:
 hide_table_of_contents: true
 ---
 
-<Comming />
+import ComingSoon from '@site/src/components/ComingSoon';
+
+In this tutorial, we will explore further learning resources for HTML and web development. These resources include online tutorials, courses, books, and more.
+
+<!-- Coming soon -->
+
+<ComingSoon />
+
+<br/>

docs/html/next-steps-and-resources/community-support.md renamed to docs/html/next-steps-and-resources/community-support.mdx

@@ -4,7 +4,7 @@ title: Flexbox and Grid Layout
 sidebar_label: Flexbox and Grid Layout
 sidebar_position: 3
 tags: [html, web-development, flexbox, grid-layout]
-description: In this tutorial, you will learn how to use Flexbox and Grid Layout to create responsive web designs and build complex layouts in HTML and CSS.
+description: "In this tutorial, you will learn how to use Flexbox and Grid Layout to create responsive web designs and build complex layouts in HTML and CSS."
 keywords:
   [
     flexbox,
@@ -15,11 +15,13 @@ keywords:
     web layout,
     web design,
   ]
+hide_table_of_contents: true
 ---
 
 In this tutorial, you will learn how to use Flexbox and Grid Layout to create responsive web designs and build complex layouts in HTML and CSS.
 
 <AdsComponent />
+<br />
 
 ## What is Flexbox?
 
@@ -64,6 +66,7 @@ Here's an example of how to create a simple Flexbox layout:
 In the above example, we create a flex container with three flex items. We use the `display: flex` property on the container to enable Flexbox layout. We also use the `justify-content: space-between` property to distribute the items evenly within the container.
 
 <AdsComponent />
+<br />
 
 ## What is Grid Layout?
 
@@ -108,6 +111,7 @@ Here's an example of how to create a simple Grid Layout:
 In the above example, we create a grid container with three grid items. We use the `display: grid` property on the container to enable Grid Layout. We also use the `grid-template-columns: repeat(3, 1fr)` property to define a three-column grid with equal widths. The `gap: 10px` property adds spacing between the grid items.
 
 <AdsComponent />
+<br />
 
 ## Flexbox vs. Grid Layout
 

docs/html/next-steps-and-resources/further-learning-resources.md renamed to docs/html/next-steps-and-resources/further-learning-resources.mdx

@@ -4,7 +4,7 @@ title: Introduction to Responsive Web Design
 sidebar_label: Introduction to Responsive Design
 sidebar_position: 1
 tags: [html, web-development, responsive-web-design]
-description: In this tutorial, you will learn the basics of responsive web design and how to create responsive websites that work on all devices.
+description: "In this tutorial, you will learn the basics of responsive web design and how to create responsive websites that work on all devices."
 keywords:
   [
     responsive web design,
@@ -15,11 +15,13 @@ keywords:
     responsive web design basics,
     responsive web design examples,
   ]
+hide_table_of_contents: true
 ---
 
 In this tutorial, you will learn the basics of responsive web design and how to create responsive websites that work on all devices.
 
 <AdsComponent />
+<br />
 
 ## What is Responsive Web Design?
 

docs/html/responsive-web-design/flexbox-and-grid-layout.md renamed to docs/html/responsive-web-design/flexbox-and-grid-layout.mdx

@@ -4,7 +4,7 @@ title: Media Queries and Breakpoints in Responsive Web Design
 sidebar_label: Media Queries and Breakpoints
 sidebar_position: 2
 tags: [html, web-development, responsive-web-design, media-queries, breakpoints]
-description: In this tutorial, you will learn how to use media queries and breakpoints to create responsive web designs that adapt to different screen sizes and devices.
+description: "In this tutorial, you will learn how to use media queries and breakpoints to create responsive web designs that adapt to different screen sizes and devices."
 keywords:
   [
     media queries,
@@ -14,13 +14,15 @@ keywords:
     css media queries,
     responsive breakpoints,
   ]
+hide_table_of_contents: true
 ---
 
 In responsive web design, media queries and breakpoints are essential tools for creating websites that adapt to different screen sizes and devices. Media queries allow you to apply specific styles based on the device's characteristics, such as screen width, height, and orientation. Breakpoints define the points at which the layout of a website changes to accommodate different screen sizes.
 
 In this tutorial, you will learn how to use media queries and breakpoints to create responsive web designs that work well on desktops, laptops, tablets, and mobile phones.
 
 <AdsComponent />
+<br />
 
 ## What are Media Queries?
 

docs/html/responsive-web-design/introduction-to-responsive-design.md renamed to docs/html/responsive-web-design/introduction-to-responsive-design.mdx

@@ -4,13 +4,15 @@ title: Benefits of Semantic HTML
 sidebar_label: Benefits of Semantic HTML
 sidebar_position: 3
 tags: [html, web-development, semantic-html, benefits-of-semantic-html]
-description: In this tutorial, you will learn about the benefits of using semantic HTML to improve the accessibility, search engine optimization (SEO), and maintainability of your web pages.
+description: "In this tutorial, you will learn about the benefits of using semantic HTML to improve the accessibility, search engine optimization (SEO), and maintainability of your web pages."
 keywords: [semantic html benefits, semantic html advantages, semantic html importance, semantic html benefits for seo, semantic html accessibility]
+hide_table_of_contents: true
 ---
 
 Semantic HTML provides a structured and meaningful way to organize web content. By using semantic elements, you can enhance the accessibility, search engine optimization (SEO), and maintainability of your web pages. Let's explore some key benefits of using semantic HTML:
 
 <AdsComponent />
+<br />
 
 ## 1. Improved Accessibility
 
@@ -25,6 +27,7 @@ Search engines rely on the structure and semantics of your HTML content to under
 Semantic HTML encourages a clear separation of content and presentation, making your code more maintainable and easier to update. By using semantic elements to define the structure of your web pages, you create a consistent and logical layout that is easier to modify and extend. This separation also allows you to update the styling and layout without affecting the underlying content.
 
 <AdsComponent />
+<br />
 
 ## 4. Consistent User Experience
 

docs/html/responsive-web-design/media-queries-and-breakpoints.md renamed to docs/html/responsive-web-design/media-queries-and-breakpoints.mdx

@@ -4,13 +4,15 @@ title: Semantic HTML5 Elements
 sidebar_label: Semantic HTML5 Elements
 sidebar_position: 2
 tags: [html, web-development, semantic-html, semantic-html5-elements]
-description: In this tutorial, you will learn about semantic HTML5 elements and how they can improve the structure, accessibility, and search engine optimization (SEO) of your web pages.
+description: "In this tutorial, you will learn about semantic HTML5 elements and how they can improve the structure, accessibility, and search engine optimization (SEO) of your web pages."
 keywords: [semantic html5 elements, semantic html5 tags, semantic html5 benefits, semantic html5 importance, html5 semantic elements]
+hide_table_of_contents: true
 ---
 
 Semantic HTML5 elements provide meaning to web content beyond mere presentation. They help in creating accessible and search engine friendly web pages by clearly defining the structure and purpose of different parts of web content.
 
 <AdsComponent />
+<br />
 
 ## Common Semantic HTML5 Elements
 
@@ -83,6 +85,7 @@ Defines content aside from the content it is placed in (like a sidebar). The con
 </BrowserWindow>
 
 <AdsComponent />
+<br />
 
 ### `<footer>`
 
@@ -131,6 +134,7 @@ Defines a header for a document or a section. It typically contains introductory
 </BrowserWindow>
 
 <AdsComponent />
+<br />
 
 ### `<nav>`
 
@@ -191,6 +195,7 @@ Represents a specific time or date. It can be used to mark up dates, times, or d
 </BrowserWindow>
 
 <AdsComponent />
+<br />
 
 ## Benefits of Semantic HTML5 Elements