diff --git a/docs/HTML Basics/_category_.json b/docs/HTML Basics/_category_.json
deleted file mode 100644
index bb516bd..0000000
--- a/docs/HTML Basics/_category_.json	
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "label": "HTML - Basics",
-  "position": 2,
-  "link": {
-    "type": "generated-index",
-    "description": "You will learn the complete basics of HTML here."
-  }
-}
diff --git a/docs/HTML Forms/_category_.json b/docs/HTML Forms/_category_.json
deleted file mode 100644
index d3f5d4d..0000000
--- a/docs/HTML Forms/_category_.json	
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "label": "HTML - Forms",
-  "position": 13,
-  "link": {
-    "type": "generated-index",
-    "description": "HTML Forms are used to take input from the user."
-  }
-}
diff --git a/docs/HTML Forms/a-sample-html-form.md b/docs/HTML Forms/a-sample-html-form.md
deleted file mode 100644
index cbeb8a7..0000000
--- a/docs/HTML Forms/a-sample-html-form.md	
+++ /dev/null
@@ -1,50 +0,0 @@
----
-sidebar_position: 14
-keywords: [html, sample html, basic html]
----
-
-# A Sample HTML Form
-
-Before starting out to discuss about HTML Forms, let's take a look at the same HTML form.
-
-```html title=sample-form.html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>My First HTML Document</title>
-  </head>
-  <body>
-    <h1>This is my first HTML Form.</h1>
-    <form>
-      <label for="username">Username</label>
-      <input type="text" placeholder="john123" id="username" />
-      <label for="password">Password</label>
-      <input type="password" placeholder="********" id="password" />
-      <button type="submit">Login</button>
-    </form>
-  </body>
-</html>
-```
-
-## Explanation
-
-The code above is a simple example of a login form.
-
-- `<form>` is the declaration of the form in HTML.
-- `<label>` give the label to the particular input box.
-- `<input>` is the element that allows user to input certain values to them.
-- `<button>` lets the user to submit the form once the form is filled.
-
-The output of the following code is as follows:
-
----
-
-<label for="username">Username</label>
-<input type="text" placeholder="john123" id="username" />
-<label for="password">Password</label>
-<input type="password" placeholder="********" id="password" />
-<button>Login</button>
-
----
-
-More depth description about HTML forms are in the later pages.
diff --git a/docs/HTML Basics/a-sample-html-document.md b/docs/a-sample-html-document.md
similarity index 100%
rename from docs/HTML Basics/a-sample-html-document.md
rename to docs/a-sample-html-document.md
diff --git a/docs/html-accessibility.md b/docs/html-accessibility.md
new file mode 100644
index 0000000..7d5457c
--- /dev/null
+++ b/docs/html-accessibility.md
@@ -0,0 +1,112 @@
+---
+sidebar_position: 18
+keywords: [html, sample html, basic html]
+---
+
+# Accessibility in HTML
+
+Ensuring accessibility is essential for making web content usable by people with disabilities. HTML provides several features and best practices to improve accessibility and ensure inclusivity for all users.
+
+## Semantic Elements
+
+Using semantic HTML elements properly helps screen readers and other assistive technologies understand the structure and context of the content.
+
+### `<header>`
+
+```html title="header.html"
+<header>
+    <h1>Welcome to My Website</h1>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+        </ul>
+    </nav>
+</header>
+```
+
+### `<main>`
+
+```html title="main.html"
+<main>
+    <article>
+        <h2>Article Title</h2>
+        <p>Article content goes here...</p>
+    </article>
+</main>
+```
+
+### `<nav>`
+
+```html title="nav.html"
+<nav>
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/products">Products</a></li>
+        <li><a href="/services">Services</a></li>
+    </ul>
+</nav>
+```
+
+## ARIA Roles and Attributes
+
+The Accessible Rich Internet Applications (ARIA) specification provides additional attributes to enhance the accessibility of HTML elements.
+
+### `role` Attribute
+
+```html
+<div role="navigation">
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/products">Products</a></li>
+        <li><a href="/services">Services</a></li>
+    </ul>
+</div>
+```
+
+### `aria-label` Attribute
+
+```html
+<button aria-label="Close">X</button>
+```
+
+## Form Accessibility
+
+Forms should be accessible to users with disabilities, providing clear labels and error messages.
+
+### Labeling Inputs
+
+```html
+<label for="username">Username:</label>
+<input type="text" id="username" name="username" />
+```
+
+### Error Messages
+
+```html
+<input type="email" id="email" name="email" required aria-describedby="email-error">
+<span id="email-error" role="alert">Please enter a valid email address</span>
+```
+
+## Keyboard Accessibility
+
+Ensure all interactive elements can be accessed and operated using the keyboard alone.
+
+### Focus Styles
+
+```css
+:focus {
+    outline: 2px solid blue;
+}
+```
+
+### Tabindex Attribute
+
+```html
+<div tabindex="0">Focusable Div</div>
+```
+
+## Testing and Validation
+
+Regularly test your website with screen readers and other assistive technologies to ensure it's accessible to all users.
diff --git a/docs/HTML Basics/html-attributes.md b/docs/html-attributes.md
similarity index 100%
rename from docs/HTML Basics/html-attributes.md
rename to docs/html-attributes.md
diff --git a/docs/HTML Basics/html-comments.md b/docs/html-comments.md
similarity index 100%
rename from docs/HTML Basics/html-comments.md
rename to docs/html-comments.md
diff --git a/docs/html-form-handeling.md b/docs/html-form-handeling.md
new file mode 100644
index 0000000..d6c1571
--- /dev/null
+++ b/docs/html-form-handeling.md
@@ -0,0 +1,130 @@
+---
+sidebar_position: 16
+keywords: [html, sample html, basic html]
+---
+
+# HTML Forms Handling
+
+Handling forms in HTML involves collecting user input and submitting it to a server for processing. Understanding different attributes and methods associated with HTML forms is crucial for creating interactive and functional web applications.
+
+## Form Submission
+
+Forms can be submitted using two HTTP methods: `GET` and `POST`.
+
+### GET Method
+
+The `GET` method submits form data as URL parameters. It's suitable for small amounts of data and retrieving information.
+
+```html title="get-form.html"
+<form action="/submit-form.php" method="get">
+  <input type="text" name="username" />
+  <input type="submit" value="Submit" />
+</form>
+```
+
+### POST Method
+
+The `POST` method submits form data in the request body. It's suitable for sensitive or large amounts of data.
+
+```html title="post-form.html"
+<form action="/submit-form.php" method="post">
+  <input type="text" name="username" />
+  <input type="submit" value="Submit" />
+</form>
+```
+
+## Form Elements
+
+HTML provides various form elements to collect different types of user input.
+
+### Text Input
+
+```html
+<input type="text" name="username" />
+```
+
+### Password Input
+
+```html
+<input type="password" name="password" />
+```
+
+### Checkbox Input
+
+```html
+<input type="checkbox" name="subscribe" value="1" />
+```
+
+### Radio Input
+
+```html
+<input type="radio" name="gender" value="male" />
+<input type="radio" name="gender" value="female" />
+```
+
+### Select Dropdown
+
+```html
+<select name="country">
+  <option value="usa">United States</option>
+  <option value="uk">United Kingdom</option>
+</select>
+```
+
+### Textarea
+
+```html
+<textarea name="message"></textarea>
+```
+
+## Form Validation
+
+HTML5 introduced built-in form validation attributes to ensure data integrity and improve user experience.
+
+### Required Attribute
+
+```html
+<input type="text" name="fullname" required />
+```
+
+### Pattern Attribute
+
+```html
+<input type="text" name="zipcode" pattern="\d{5}" />
+```
+
+## Client-Side Scripting
+
+You can use JavaScript to enhance form functionality and perform client-side validation.
+
+```html
+<script>
+  function validateForm() {
+    var x = document.forms["myForm"]["email"].value;
+    if (x == "") {
+      alert("Email must be filled out");
+      return false;
+    }
+  }
+</script>
+
+<form name="myForm" onsubmit="return validateForm()">
+  <input type="email" name="email">
+  <input type="submit" value="Submit">
+</form>
+```
+
+## Server-Side Processing
+
+After form submission, the data is typically processed on the server using server-side scripting languages like PHP, Python, or Node.js.
+
+```php
+<?php
+$username = $_POST['username'];
+$password = $_POST['password'];
+
+// Process form data...
+?>
+```
+
+Understanding these concepts and techniques allows you to create robust and interactive forms that efficiently collect and process user input in web applications.
diff --git a/docs/HTML Basics/html-formatting.md b/docs/html-formatting.md
similarity index 100%
rename from docs/HTML Basics/html-formatting.md
rename to docs/html-formatting.md
diff --git a/docs/html-forms.md b/docs/html-forms.md
new file mode 100644
index 0000000..efae204
--- /dev/null
+++ b/docs/html-forms.md
@@ -0,0 +1,183 @@
+---
+sidebar_position: 13
+keywords: [html, sample html, basic html]
+---
+
+# HTML Forms
+
+HTML forms are integral for user interaction on the web. They allow users to input data and interact with web applications. Below, we'll cover various aspects and attributes related to HTML forms.
+
+## Form Structure
+
+Forms are enclosed within `<form>` tags and consist of various input elements.
+
+```html
+<form action="/submit-form.php" method="post">
+  <!-- Form fields will be here -->
+</form>
+```
+
+### Action Attribute
+
+The `action` attribute specifies where to send the form-data when submitted.
+
+### Method Attribute
+
+The `method` attribute defines the HTTP method for sending form-data.
+
+## Input Elements
+
+Input elements are fundamental for gathering user input.
+
+### Text Input
+
+```html
+<input type="text" name="username" />
+```
+
+### Password Input
+
+```html
+<input type="password" name="password" />
+```
+
+### Checkbox Input
+
+```html
+<input type="checkbox" name="subscribe" value="1" />
+```
+
+### Radio Input
+
+```html
+<input type="radio" name="gender" value="male" />
+<input type="radio" name="gender" value="female" />
+```
+
+### File Input
+
+```html
+<input type="file" name="file" />
+```
+
+## Select Dropdowns
+
+Select elements are used for dropdown lists.
+
+```html
+<select name="country">
+  <option value="usa">United States</option>
+  <option value="uk">United Kingdom</option>
+</select>
+```
+
+### Multiple Selection
+
+```html
+<select name="colors" multiple>
+  <option value="red">Red</option>
+  <option value="green">Green</option>
+</select>
+```
+
+## Buttons
+
+Buttons trigger actions within forms.
+
+### Submit Button
+
+```html
+<button type="submit">Submit</button>
+```
+
+### Reset Button
+
+```html
+<button type="reset">Reset</button>
+```
+
+### Custom JavaScript Action
+
+```html
+<button onclick="myFunction()">Click me</button>
+```
+
+## Form Attributes
+
+Various attributes enhance the functionality of forms.
+
+### Name Attribute
+
+The `name` attribute identifies form data when submitted.
+
+### Value Attribute
+
+The `value` attribute sets initial values for input fields.
+
+### Required Attribute
+
+```html
+<input type="text" name="fullname" required />
+```
+
+### Placeholder Attribute
+
+```html
+<input type="text" name="username" placeholder="Enter your username" />
+```
+
+### Disabled Attribute
+
+```html
+<input type="text" name="city" disabled />
+```
+
+## Form Layout
+
+Proper layout enhances form usability and aesthetics.
+
+### Fieldset and Legend
+
+```html
+<fieldset>
+  <legend>Contact Information</legend>
+  <!-- Form fields here -->
+</fieldset>
+```
+
+### Label Element
+
+```html
+<label for="username">Username:</label>
+<input type="text" id="username" name="username" />
+```
+
+### Grouping Controls
+
+```html
+<fieldset>
+  <legend>Payment Method</legend>
+  <!-- Radio buttons or other inputs -->
+</fieldset>
+```
+
+## Accessibility
+
+Ensuring forms are accessible is essential for users with disabilities.
+
+### Labeling Inputs
+
+```html
+<label for="username">Username:</label>
+<input type="text" id="username" name="username" />
+```
+
+### ARIA Roles
+
+```html
+<input type="text" name="search" role="searchbox" />
+```
+
+## Conclusion
+
+HTML forms are versatile tools for collecting user data and interacting with web applications. Understanding the various input elements and attributes allows developers to create intuitive and user-friendly forms.
\ No newline at end of file
diff --git a/docs/html-frameworks-and-libraries.md b/docs/html-frameworks-and-libraries.md
new file mode 100644
index 0000000..ef53664
--- /dev/null
+++ b/docs/html-frameworks-and-libraries.md
@@ -0,0 +1,121 @@
+---
+sidebar_position: 22
+keywords: [html, sample html, basic html]
+---
+
+
+# HTML Frameworks and Libraries
+
+HTML frameworks and libraries provide pre-designed and reusable components to streamline the process of building responsive and visually appealing web applications. These tools offer a foundation of CSS and JavaScript resources that simplify the development process and ensure consistency across projects.
+
+## Bootstrap
+
+Bootstrap is one of the most popular HTML, CSS, and JavaScript frameworks for building responsive and mobile-first web projects. It provides a wide range of components, such as navigation bars, buttons, forms, and modal dialogs, along with a responsive grid system.
+
+```html title="bootstrap-example.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bootstrap Example</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Hello, Bootstrap!</h1>
+        <button class="btn btn-primary">Click me</button>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>
+```
+
+## Foundation
+
+Foundation is a responsive front-end framework developed by ZURB. It offers a comprehensive set of customizable UI components, including grids, navigation menus, buttons, and forms, along with built-in accessibility features.
+
+```html title="foundation-example.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Foundation Example</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css">
+</head>
+<body>
+    <div class="grid-container">
+        <div class="grid-x">
+            <div class="cell">
+                <h1>Hello, Foundation!</h1>
+                <button class="button primary">Click me</button>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"></script>
+</body>
+</html>
+```
+
+## Semantic UI
+
+Semantic UI is a development framework that uses human-friendly HTML to create responsive and intuitive user interfaces. It provides a variety of UI components and themes, along with a concise and readable syntax.
+
+```html title="semantic-ui-example.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Semantic UI Example</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
+</head>
+<body>
+    <div class="ui container">
+        <h1 class="ui header">Hello, Semantic UI!</h1>
+        <button class="ui primary button">Click me</button>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
+</body>
+</html>
+```
+
+## Tailwind CSS
+
+Tailwind CSS is a utility-first CSS framework that provides a set of low-level utility classes to style your HTML directly. It enables rapid development and allows for easy customization without writing custom CSS.
+
+```html title="tailwind-css-example.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tailwind CSS Example</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container mx-auto">
+        <h1 class="text-4xl font-bold">Hello, Tailwind CSS!</h1>
+        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
+    </div>
+</body>
+</html>
+```
+
+## Bulma
+
+Bulma is a modern CSS framework based on Flexbox. It offers a clean and modular architecture with a set of responsive and customizable components, making it easy to create beautiful and consistent web interfaces.
+
+```html title="bulma-example.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bulma Example</title>
+    <
\ No newline at end of file
diff --git a/docs/HTML Basics/html-headings.md b/docs/html-headings.md
similarity index 100%
rename from docs/HTML Basics/html-headings.md
rename to docs/html-headings.md
diff --git a/docs/HTML Basics/html-links.md b/docs/html-links.md
similarity index 100%
rename from docs/HTML Basics/html-links.md
rename to docs/html-links.md
diff --git a/docs/HTML Basics/html-lists.md b/docs/html-lists.md
similarity index 100%
rename from docs/HTML Basics/html-lists.md
rename to docs/html-lists.md
diff --git a/docs/html-media.md b/docs/html-media.md
new file mode 100644
index 0000000..5ef0580
--- /dev/null
+++ b/docs/html-media.md
@@ -0,0 +1,68 @@
+---
+sidebar_position: 15
+keywords: [html, sample html, basic html]
+---
+
+# Media in HTML
+
+HTML provides various elements to embed media content such as images, audio, and video into web pages. Utilizing these elements allows you to enhance the visual and auditory experience for your website visitors.
+
+## Image `<img>`
+
+The `<img>` tag is used to embed images into a web page. It is a self-closing tag and requires the `src` attribute to specify the image file's URL.
+
+```html title="image.html"
+<img src="image.jpg" alt="Description of the image">
+```
+
+## Audio `<audio>`
+
+The `<audio>` tag is used to embed audio content into a web page. It supports various audio formats such as MP3, OGG, and WAV. You can use the `controls` attribute to add audio controls like play, pause, and volume.
+
+```html title="audio.html"
+<audio controls>
+  <source src="audio.mp3" type="audio/mpeg">
+  Your browser does not support the audio element.
+</audio>
+```
+
+## Video `<video>`
+
+The `<video>` tag is used to embed video content into a web page. Like the `<audio>` tag, it supports multiple video formats and can also have controls added using the `controls` attribute.
+
+```html title="video.html"
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+  Your browser does not support the video element.
+</video>
+```
+
+## Picture `<picture>`
+
+The `<picture>` tag allows you to define multiple image sources based on different conditions such as screen size or device resolution. This helps in delivering the most appropriate image for the user's device.
+
+```html title="picture.html"
+<picture>
+  <source srcset="image-large.jpg" media="(min-width: 1024px)">
+  <source srcset="image-medium.jpg" media="(min-width: 768px)">
+  <img src="image-small.jpg" alt="Description of the image">
+</picture>
+```
+
+## Embed `<embed>`
+
+The `<embed>` tag is used to embed external content such as plugins, interactive media, or other non-HTML content into a web page. It requires the `src` attribute to specify the URL of the content.
+
+```html title="embed.html"
+<embed src="plugin.swf" type="application/x-shockwave-flash">
+```
+
+## Iframe `<iframe>`
+
+The `<iframe>` tag is used to embed another HTML document within the current document. It's commonly used for embedding maps, social media content, or other web pages.
+
+```html title="iframe.html"
+<iframe src="https://www.youtube.com/embed/video-id" width="560" height="315" frameborder="0" allowfullscreen></iframe>
+```
+
+By utilizing these HTML elements, you can seamlessly integrate various media types into your web pages, enriching the user experience and making your content more engaging and interactive.
diff --git a/docs/HTML Basics/html-paragraphs.md b/docs/html-paragraphs.md
similarity index 100%
rename from docs/HTML Basics/html-paragraphs.md
rename to docs/html-paragraphs.md
diff --git a/docs/HTML Basics/html-quotes.md b/docs/html-quotes.md
similarity index 100%
rename from docs/HTML Basics/html-quotes.md
rename to docs/html-quotes.md
diff --git a/docs/html-responsive-design.md b/docs/html-responsive-design.md
new file mode 100644
index 0000000..4dfebb8
--- /dev/null
+++ b/docs/html-responsive-design.md
@@ -0,0 +1,130 @@
+---
+sidebar_position: 19
+keywords: [html, sample html, basic html]
+---
+
+
+# Responsive Design in HTML
+
+Responsive web design aims to create web pages that adapt to various screen sizes and devices, providing an optimal viewing experience for users across desktops, tablets, and smartphones.
+
+## Viewport Meta Tag
+
+The viewport meta tag controls the layout and scaling of a web page on different devices.
+
+```html title="viewport.html"
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+```
+
+## Media Queries
+
+Media queries allow you to apply CSS styles based on the characteristics of the device, such as screen width, height, and orientation.
+
+```css title="media-queries.css"
+/* Styles for screens larger than 768px */
+@media (min-width: 768px) {
+    /* Add your CSS rules here */
+}
+
+/* Styles for screens smaller than 768px */
+@media (max-width: 767px) {
+    /* Add your CSS rules here */
+}
+```
+
+## Fluid Layouts
+
+Creating fluid layouts with percentage-based widths ensures that elements resize proportionally with the viewport.
+
+```css title="fluid-layout.css"
+.container {
+    width: 90%;
+    margin: 0 auto;
+}
+
+.column {
+    width: 50%;
+    float: left;
+}
+
+@media (max-width: 767px) {
+    .column {
+        width: 100%;
+    }
+}
+```
+
+## Flexible Images
+
+Making images responsive by setting their `max-width` to 100% ensures they scale down proportionally on smaller screens.
+
+```css title="flexible-images.css"
+img {
+    max-width: 100%;
+    height: auto;
+}
+```
+
+## Breakpoint Strategy
+
+Define breakpoints at which your layout will change to accommodate different screen sizes.
+
+```css title="breakpoints.css"
+/* Small screens */
+@media (max-width: 576px) {
+    /* Add styles for small screens */
+}
+
+/* Medium screens */
+@media (min-width: 577px) and (max-width: 992px) {
+    /* Add styles for medium screens */
+}
+
+/* Large screens */
+@media (min-width: 993px) {
+    /* Add styles for large screens */
+}
+```
+
+## Flexbox and Grid
+
+Using CSS flexbox and grid layouts provides powerful tools for creating responsive designs with flexible and easily adaptable layouts.
+
+```css title="flexbox-grid.css"
+.container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.item {
+    flex: 1 1 300px;
+    margin: 10px;
+}
+
+@media (max-width: 767px) {
+    .item {
+        flex-basis: calc(50% - 20px);
+    }
+}
+```
+
+## Mobile-First Approach
+
+Start designing your website for mobile devices first, then progressively enhance the layout and features for larger screens.
+
+```css title="mobile-first.css"
+/* Styles for mobile devices */
+@media (min-width: 320px) {
+    /* Add styles for mobile devices */
+}
+
+/* Styles for tablets */
+@media (min-width: 768px) {
+    /* Add styles for tablets */
+}
+
+/* Styles for desktops */
+@media (min-width: 1200px) {
+    /* Add styles for desktops */
+}
+```
diff --git a/docs/html-semantics-and-seo.md b/docs/html-semantics-and-seo.md
new file mode 100644
index 0000000..7917e71
--- /dev/null
+++ b/docs/html-semantics-and-seo.md
@@ -0,0 +1,135 @@
+---
+sidebar_position: 20
+keywords: [html, sample html, basic html]
+---
+
+# HTML Semantics and SEO
+
+HTML semantics refer to the use of HTML elements to convey meaning and structure to both browsers and search engines. Proper use of semantic elements can improve the accessibility and search engine ranking of your website.
+
+## Semantic Elements
+
+HTML5 introduced several semantic elements that provide meaning to the content structure.
+
+### `<header>`
+
+```html title="header.html"
+<header>
+    <h1>Welcome to My Website</h1>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+        </ul>
+    </nav>
+</header>
+```
+
+### `<article>`
+
+```html title="article.html"
+<article>
+    <h2>Article Title</h2>
+    <p>Article content goes here...</p>
+</article>
+```
+
+### `<section>`
+
+```html title="section.html"
+<section>
+    <h2>Section Title</h2>
+    <p>Section content goes here...</p>
+</section>
+```
+
+## Semantic HTML5 Tags
+
+Using semantic HTML5 tags can improve the structure and readability of your code, making it easier for search engines to understand your content.
+
+### `<main>`
+
+```html title="main.html"
+<main>
+    <article>
+        <h2>Article Title</h2>
+        <p>Article content goes here...</p>
+    </article>
+</main>
+```
+
+### `<footer>`
+
+```html title="footer.html"
+<footer>
+    <p>&copy; 2024 My Website. All rights reserved.</p>
+</footer>
+```
+
+### `<nav>`
+
+```html title="nav.html"
+<nav>
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/products">Products</a></li>
+        <li><a href="/services">Services</a></li>
+    </ul>
+</nav>
+```
+
+## SEO Best Practices
+
+Improving your website's search engine optimization (SEO) involves optimizing various HTML elements for better visibility and ranking in search engine results pages (SERPs).
+
+### Title Tag
+
+```html
+<head>
+    <title>My Website - Home</title>
+</head>
+```
+
+### Meta Description
+
+```html
+<meta name="description" content="Welcome to My Website. Learn about our products and services.">
+```
+
+### Heading Tags
+
+```html
+<h1>My Website</h1>
+<h2>About Us</h2>
+<h3>Our Products</h3>
+```
+
+### Alt Attribute for Images
+
+```html
+<img src="image.jpg" alt="Description of the image">
+```
+
+### Proper Use of Links
+
+```html
+<a href="/about">About Us</a>
+<a href="/contact">Contact Us</a>
+```
+
+### Schema.org Markup
+
+```html
+<div itemscope itemtype="https://schema.org/LocalBusiness">
+    <h1 itemprop="name">My Business</h1>
+    <p itemprop="description">Description of my business.</p>
+    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
+        <span itemprop="streetAddress">123 Main Street</span>,
+        <span itemprop="addressLocality">City</span>,
+        <span itemprop="addressRegion">State</span>
+    </div>
+</div>
+```
+
+By incorporating semantic HTML elements and following SEO best practices, you can improve the accessibility, readability, and search engine ranking of your website.
diff --git a/docs/HTML Basics/html-tables.md b/docs/html-tables.md
similarity index 100%
rename from docs/HTML Basics/html-tables.md
rename to docs/html-tables.md
diff --git a/docs/html-validation.md b/docs/html-validation.md
new file mode 100644
index 0000000..40abeb1
--- /dev/null
+++ b/docs/html-validation.md
@@ -0,0 +1,55 @@
+---
+sidebar_position: 21
+keywords: [html, sample html, basic html]
+---
+
+
+# HTML Validation
+
+Validating your HTML code ensures that it complies with the standards set by the World Wide Web Consortium (W3C). Valid code improves cross-browser compatibility, accessibility, and overall quality of your web pages.
+
+## Online Validators
+
+Several online tools are available for validating HTML code. These tools check your code against HTML standards and provide detailed error reports.
+
+### W3C Markup Validation Service
+
+The W3C Markup Validation Service is a widely used tool for validating HTML code. Simply enter the URL or upload the HTML file to validate your code.
+
+[Visit W3C Markup Validation Service](https://validator.w3.org/)
+
+### Validator.nu (HTML5 Validator)
+
+Validator.nu is an HTML5 validator that checks your code against the latest HTML standards. It provides real-time validation as you type and supports custom validation profiles.
+
+[Visit Validator.nu](https://validator.nu/)
+
+## Browser Developer Tools
+
+Most modern web browsers come with built-in developer tools that include HTML validation features. These tools can quickly identify syntax errors and other issues in your HTML code.
+
+### Google Chrome Developer Tools
+
+Google Chrome's Developer Tools include a built-in HTML validator. Simply right-click on a web page, select "Inspect", and navigate to the "Console" tab to view HTML validation errors.
+
+### Mozilla Firefox Developer Tools
+
+Mozilla Firefox's Developer Tools also include an HTML validator. Access it by right-clicking on a web page, selecting "Inspect Element", and navigating to the "Console" tab.
+
+## Command-Line Tools
+
+If you prefer working from the command line, you can use command-line HTML validators to validate your HTML code locally.
+
+### HTML Tidy
+
+HTML Tidy is a command-line tool that can clean up and validate HTML code. It checks for syntax errors, deprecated tags, and other issues in your HTML files.
+
+[Download HTML Tidy](https://www.html-tidy.org/)
+
+### Nu Html Checker (v.Nu)
+
+v.Nu is a command-line HTML5 validator based on the Validator.nu service. It validates HTML files against the HTML5 specification and provides detailed error reports.
+
+[Visit v.Nu GitHub Repository](https://github.com/validator/validator)
+
+By regularly validating your HTML code using these tools, you can ensure that your web pages adhere to HTML standards and maintain high quality and compatibility across different browsers and devices.
diff --git a/docs/html5-features.md b/docs/html5-features.md
new file mode 100644
index 0000000..626f359
--- /dev/null
+++ b/docs/html5-features.md
@@ -0,0 +1,126 @@
+---
+sidebar_position: 17
+keywords: [html, sample html, basic html]
+---
+
+
+# HTML5 Features
+
+HTML5 introduces several new features and improvements over previous versions, enabling developers to create more dynamic, interactive, and accessible web applications.
+
+## Semantic Elements
+
+HTML5 introduces new semantic elements that provide clearer structure and meaning to web content, enhancing accessibility and SEO.
+
+### `<header>`
+
+Represents introductory content or navigation links at the beginning of a document or section.
+
+```html title="header.html"
+<header>
+    <h1>Welcome to My Website</h1>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+        </ul>
+    </nav>
+</header>
+```
+
+### `<article>`
+
+Represents a self-contained piece of content that could be distributed and reused independently.
+
+```html title="article.html"
+<article>
+    <h2>Article Title</h2>
+    <p>Article content goes here...</p>
+</article>
+```
+
+### `<section>`
+
+Defines a thematic grouping of content, typically with a heading.
+
+```html title="section.html"
+<section>
+    <h2>Section Title</h2>
+    <p>Section content goes here...</p>
+</section>
+```
+
+## Form Enhancements
+
+HTML5 introduces several new form elements and attributes to improve form usability and user experience.
+
+### `<input>` types
+
+HTML5 adds new input types like `email`, `url`, `tel`, `date`, `number`, and `color` for better data validation and user interface.
+
+```html title="input-types.html"
+<input type="email" name="email" placeholder="Enter your email">
+<input type="date" name="birthdate">
+<input type="color" name="favorite-color">
+```
+
+### `required` Attribute
+
+Specifies that an input field must be filled out before submitting the form.
+
+```html title="required-attribute.html"
+<input type="text" name="fullname" required>
+```
+
+## Multimedia
+
+HTML5 introduces native support for audio, video, and graphics without the need for third-party plugins.
+
+### `<audio>`
+
+Embeds audio content into a web page with built-in controls.
+
+```html title="audio.html"
+<audio controls>
+  <source src="audio.mp3" type="audio/mpeg">
+  Your browser does not support the audio element.
+</audio>
+```
+
+### `<video>`
+
+Embeds video content into a web page with built-in controls.
+
+```html title="video.html"
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+  Your browser does not support the video element.
+</video>
+```
+
+## Canvas
+
+The `<canvas>` element allows for dynamic, scriptable rendering of 2D shapes and bitmap images.
+
+```html title="canvas.html"
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+```javascript
+var canvas = document.getElementById('myCanvas');
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 150, 80);
+```
+
+## Local Storage
+
+HTML5 introduces the `localStorage` object for storing key-value pairs locally in the browser.
+
+```javascript
+localStorage.setItem('username', 'john_doe');
+var username = localStorage.getItem('username');
+```
+
+HTML5 brings a wealth of new features and enhancements that empower developers to create more powerful and engaging web applications.
diff --git a/docs/semantic-html.md b/docs/semantic-html.md
new file mode 100644
index 0000000..44bbcef
--- /dev/null
+++ b/docs/semantic-html.md
@@ -0,0 +1,100 @@
+---
+sidebar_position: 14
+keywords: [html, sample html, basic html]
+---
+
+# Semantic HTML
+
+Semantic HTML refers to the use of specific HTML tags that convey meaning beyond their appearance. By using semantic elements, you provide clearer structure and context to your web content, which improves accessibility, SEO, and overall understanding of your document's hierarchy.
+
+## Header `<header>`
+
+The `<header>` tag represents introductory content at the beginning of a document or section. It typically includes logos, navigation menus, and other introductory elements.
+
+```html title="header.html"
+<header>
+    <h1>My Website</h1>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+        </ul>
+    </nav>
+</header>
+```
+
+## Navigation `<nav>`
+
+The `<nav>` tag defines a section of navigation links. It's used to group together links for navigating within the website or to external pages.
+
+```html title="nav.html"
+<nav>
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/products">Products</a></li>
+        <li><a href="/services">Services</a></li>
+    </ul>
+</nav>
+```
+
+## Main Content `<main>`
+
+The `<main>` tag represents the main content of the document. It should contain the central content unique to the page.
+
+```html title="main.html"
+<main>
+    <article>
+        <h2>Article Title</h2>
+        <p>Article content goes here...</p>
+    </article>
+</main>
+```
+
+## Section `<section>`
+
+The `<section>` tag defines a thematic grouping of content, typically with a heading. It helps to organize content into distinct sections.
+
+```html title="section.html"
+<section>
+    <h2>Section Title</h2>
+    <p>Section content goes here...</p>
+</section>
+```
+
+## Article `<article>`
+
+The `<article>` tag represents a self-contained piece of content that could be distributed and reused independently.
+
+```html title="article.html"
+<article>
+    <h2>Article Title</h2>
+    <p>Article content goes here...</p>
+</article>
+```
+
+## Aside `<aside>`
+
+The `<aside>` tag is used for content tangentially related to the main content, such as sidebars, pull quotes, or advertisements.
+
+```html title="aside.html"
+<aside>
+    <h3>Related Articles</h3>
+    <ul>
+        <li><a href="/article1">Article 1</a></li>
+        <li><a href="/article2">Article 2</a></li>
+    </ul>
+</aside>
+```
+
+## Footer `<footer>`
+
+The `<footer>` tag represents a footer for its nearest section or the document as a whole. It typically contains authorship information, copyright notices, and links to related documents.
+
+```html title="footer.html"
+<footer>
+    <p>&copy; 2024 My Website. All rights reserved.</p>
+</footer>
+```
+
+Using semantic HTML elements like these enhances the clarity and structure of your web documents, making them more accessible to both users and search engines.
diff --git a/static/img/ComputeNepal-logo.jpg b/static/img/ComputeNepal-logo.jpg
index 2e3e7b0..e74d157 100644
Binary files a/static/img/ComputeNepal-logo.jpg and b/static/img/ComputeNepal-logo.jpg differ
