diff --git "a/blog/Beginner\342\200\231s Guide to the Top 5 React Hooks.md" b/blog/2024-06-19/beginners-guide-to-the-top-5-react-hooks.md
similarity index 100%
rename from "blog/Beginner\342\200\231s Guide to the Top 5 React Hooks.md"
rename to blog/2024-06-19/beginners-guide-to-the-top-5-react-hooks.md
diff --git a/blog/automating-tasks-with-python.md b/blog/2024-07-13/automating-tasks-with-python.md
similarity index 100%
rename from blog/automating-tasks-with-python.md
rename to blog/2024-07-13/automating-tasks-with-python.md
diff --git a/blog/Dockerize Spring-boot with Github-Actions/images/image01.png b/blog/2024-07-28/dockerize-spring-boot-with-github-actions/images/image01.png
similarity index 100%
rename from blog/Dockerize Spring-boot with Github-Actions/images/image01.png
rename to blog/2024-07-28/dockerize-spring-boot-with-github-actions/images/image01.png
diff --git a/blog/Dockerize Spring-boot with Github-Actions/images/image02.png b/blog/2024-07-28/dockerize-spring-boot-with-github-actions/images/image02.png
similarity index 100%
rename from blog/Dockerize Spring-boot with Github-Actions/images/image02.png
rename to blog/2024-07-28/dockerize-spring-boot-with-github-actions/images/image02.png
diff --git a/blog/Dockerize Spring-boot with Github-Actions/images/image03.png b/blog/2024-07-28/dockerize-spring-boot-with-github-actions/images/image03.png
similarity index 100%
rename from blog/Dockerize Spring-boot with Github-Actions/images/image03.png
rename to blog/2024-07-28/dockerize-spring-boot-with-github-actions/images/image03.png
diff --git a/blog/Dockerize Spring-boot with Github-Actions/images/image04.png b/blog/2024-07-28/dockerize-spring-boot-with-github-actions/images/image04.png
similarity index 100%
rename from blog/Dockerize Spring-boot with Github-Actions/images/image04.png
rename to blog/2024-07-28/dockerize-spring-boot-with-github-actions/images/image04.png
diff --git a/blog/Dockerize Spring-boot with Github-Actions/images/image05.png b/blog/2024-07-28/dockerize-spring-boot-with-github-actions/images/image05.png
similarity index 100%
rename from blog/Dockerize Spring-boot with Github-Actions/images/image05.png
rename to blog/2024-07-28/dockerize-spring-boot-with-github-actions/images/image05.png
diff --git a/blog/Dockerize Spring-boot with Github-Actions/index.md b/blog/2024-07-28/dockerize-spring-boot-with-github-actions/index.md
similarity index 100%
rename from blog/Dockerize Spring-boot with Github-Actions/index.md
rename to blog/2024-07-28/dockerize-spring-boot-with-github-actions/index.md
diff --git a/blog/ai-in-healthcare.md b/blog/2024-07-30/ai-in-healthcare.md
similarity index 100%
rename from blog/ai-in-healthcare.md
rename to blog/2024-07-30/ai-in-healthcare.md
diff --git a/blog/containerization-with-docker-and-kubernetes.md b/blog/2024-07-30/containerization-with-docker-and-kubernetes.md
similarity index 100%
rename from blog/containerization-with-docker-and-kubernetes.md
rename to blog/2024-07-30/containerization-with-docker-and-kubernetes.md
diff --git a/blog/cloud-native-development with-microservices-and-kubernetes.md b/blog/2024-07-31/cloud-native-development with-microservices-and-kubernetes.md
similarity index 100%
rename from blog/cloud-native-development with-microservices-and-kubernetes.md
rename to blog/2024-07-31/cloud-native-development with-microservices-and-kubernetes.md
diff --git a/blog/Web-Development-with-Django.md b/blog/Web-Development-with-Django.md
index de8c7d6d7..33c5b48f7 100644
--- a/blog/Web-Development-with-Django.md
+++ b/blog/Web-Development-with-Django.md
@@ -6,7 +6,7 @@ tags:
   - Web Development
   - Frontend Development
   - Backend Development
-date: 2024-06-10 09:32:00
+date: 2024-06-10
 ---
 
 Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. This guide will introduce you to Django, walk you through setting up a Django project, and cover key features and best practices for developing robust web applications.
@@ -53,10 +53,10 @@ A Django project is a collection of settings and configurations for an instance
 
 ### Key Files and Directories
 
-manage.py: A command-line utility for interacting with your project.
-settings.py: Configuration settings for your project.
-urls.py: URL declarations for your project.
-wsgi.py and asgi.py: Entry points for WSGI/ASGI-compatible web servers.
+- **manage.py:** A command-line utility for interacting with your project.
+- **settings.py:** Configuration settings for your project.
+- **urls.py:** URL declarations for your project.
+- **wsgi.py and asgi.py:** Entry points for WSGI/ASGI-compatible web servers.
 
 ## 4. Building Your First Django App
 
@@ -70,9 +70,9 @@ python manage.py startapp myapp
 
 ### Defining Models
 
-Models are Python classes that define the structure of your database tables. Define a model in models.py:
+Models are Python classes that define the structure of your database tables. Define a model in `models.py`:
 
-```python
+```python title="myapp/models.py"
 from django.db import models
 
 class Post(models.Model):
@@ -94,7 +94,7 @@ python manage.py migrate
 
 Register your models to be managed via the Django admin interface:
 
-```python
+```python title="myapp/admin.py"
 from django.contrib import admin
 from .models import Post
 
@@ -104,10 +104,10 @@ admin.site.register(Post)
 
 ## 5. Django Views and Templates
 
-Creating Views
-Views handle the logic of your application and return responses. Define a view in views.py:
+### Creating Views
+Views handle the logic of your application and return responses. Define a view in `views.py`:
 
-```python
+```python title="myapp/views.py"
 from django.shortcuts import render
 from .models import Post
 
@@ -118,9 +118,9 @@ def index(request):
 
 ### URL Routing
 
-Map URLs to views in urls.py:
+Map URLs to views in `urls.py`:
 
-```python
+```python title="myapp/urls.py"
 from django.urls import path
 from . import views
 
@@ -131,9 +131,9 @@ urlpatterns = [
 
 ### Using Templates
 
-Create HTML templates in the templates directory. For example, index.html:
+Create HTML templates in the templates directory. For example, `index.html`:
 
-```html
+```html title="myapp/templates/index.html"
 <!doctype html>
 <html>
   <head>
@@ -152,9 +152,9 @@ Create HTML templates in the templates directory. For example, index.html:
 
 ### Template Inheritance
 
-Use template inheritance to avoid redundancy. Create a base template base.html:
+Use template inheritance to avoid redundancy. Create a base template `base.html`:
 
-```html
+```html title="myapp/templates/base.html"
 <!doctype html>
 <html>
   <head>
@@ -166,11 +166,12 @@ Use template inheritance to avoid redundancy. Create a base template base.html:
 </html>
 ```
 
-Extend it in index.html:
+Extend it in `index.html`:
 
-```html
-{% extends 'base.html' %} {% block title %}Home{% endblock %} {% block content
-%}
+```html title="myapp/templates/index.html"
+{% extends 'base.html' %}
+{% block title %}Home{% endblock %}
+{% block content %}
 <h1>Posts</h1>
 <ul>
   {% for post in posts %}
@@ -184,9 +185,9 @@ Extend it in index.html:
 
 ### Creating Forms
 
-Define a form in forms.py:
+Define a form in `forms.py`:
 
-```python
+```python title="myapp/forms.py"
 from django import forms
 from .models import Post
 
@@ -196,10 +197,10 @@ class PostForm(forms.ModelForm):
         fields = ['title', 'content']
 ```
 
-Handling Form Submissions
+### Handling Form Submissions
 Handle form submissions in a view:
 
-```python
+```python title="myapp/views.py"
 from django.shortcuts import render, redirect
 from .forms import PostForm
 
@@ -214,10 +215,10 @@ def create_post(request):
     return render(request, 'create_post.html', {'form': form})
 ```
 
-Form Validation
+### Form Validation
 Django forms automatically handle validation, but you can add custom validation methods to your form fields if needed.
 
-Using Django Forms with Models
+### Using Django Forms with Models
 Django forms can be used directly with models to simplify data handling and validation.
 
 ## 7. Deploying Django Applications
diff --git a/blog/debugging.md b/blog/debugging.md
index 4940f611a..6514158e2 100644
--- a/blog/debugging.md
+++ b/blog/debugging.md
@@ -2,7 +2,7 @@
 title: Step-by-Step Guide Debugging Tests in Create React App
 authors: [ajay-dhangar]
 tags: [Debugging Tests]
-date: 2024-03-14 14:37:46
+date: 2024-03-14
 description: Step-by-Step Guide Debugging Tests in Create React App
 draft: false
 ---
diff --git a/blog/from-ftp-client-to-github-action.md b/blog/from-ftp-client-to-github-action.md
index 5f099de58..52bcb041d 100644
--- a/blog/from-ftp-client-to-github-action.md
+++ b/blog/from-ftp-client-to-github-action.md
@@ -2,7 +2,7 @@
 title: "CI evolution: From FTP client to GitHub Action"
 authors: [ajay-dhangar]
 tags: [ftp, sftp, GitHub Action, ftp deploy]
-date: 2024-03-15 11:37:46
+date: 2024-03-15
 decription: The evolution of remote file management
 draft: false
 ---
diff --git a/blog/JavaScript ES6 features.md b/blog/javascript-es6-features.md
similarity index 100%
rename from blog/JavaScript ES6 features.md
rename to blog/javascript-es6-features.md
diff --git a/blog/Leveraging GPT model for Natural Language Processing Tasks.md b/blog/leveraging-gpt-model- for-natural-language-processing-tasks.md
similarity index 100%
rename from blog/Leveraging GPT model for Natural Language Processing Tasks.md
rename to blog/leveraging-gpt-model- for-natural-language-processing-tasks.md
diff --git a/blog/Mastering Data Structures in Python.md b/blog/mastering-data-structures-in-python.md
similarity index 100%
rename from blog/Mastering Data Structures in Python.md
rename to blog/mastering-data-structures-in-python.md
diff --git a/blog/Mastering Design Patterns in Java.md b/blog/mastering-design-patterns-in-Java.md
similarity index 100%
rename from blog/Mastering Design Patterns in Java.md
rename to blog/mastering-design-patterns-in-Java.md
diff --git a/blog/Mastering OOP concepts in JAVA.md b/blog/mastering-oops-concepts-in-java.md
similarity index 99%
rename from blog/Mastering OOP concepts in JAVA.md
rename to blog/mastering-oops-concepts-in-java.md
index 94045373c..2c5ffacfc 100644
--- a/blog/Mastering OOP concepts in JAVA.md	
+++ b/blog/mastering-oops-concepts-in-java.md
@@ -1,6 +1,6 @@
 ---
 title: "Mastering OOP concepts in JAVA"
-sidebar_label: OOP
+sidebar_label: OOPs in Java
 authors: [dharshibalasubramaniyam]
 tags: [oop, java, best-practices]
 date: 2024-06-18
diff --git a/blog/Mastering SOLID principles in Java.md b/blog/mastering-solid-principles-in-java.md
similarity index 100%
rename from blog/Mastering SOLID principles in Java.md
rename to blog/mastering-solid-principles-in-java.md
diff --git a/blog/Quantum computing and it's application.md b/blog/quantum-computing-and-its-application.md
similarity index 97%
rename from blog/Quantum computing and it's application.md
rename to blog/quantum-computing-and-its-application.md
index fd9fbd82c..7052f66d9 100644
--- a/blog/Quantum computing and it's application.md	
+++ b/blog/quantum-computing-and-its-application.md
@@ -1,9 +1,9 @@
 ---
-title: "Introduction to Quantum Computing and Its Applications"
+title: "Introduction to Quantum Computing and It's Applications"
 sidebar_label: Quantum Computing
 authors: [pujan-sarkar]
 tags: [Quantum Computing, Applications]
-date: 2024-07-22
+date: 2024-11-25
 ---
 
 In the realm of computing, quantum computing stands as a revolutionary field that leverages the principles of quantum mechanics to process information in fundamentally different ways compared to classical computing. This blog aims to introduce the basics of quantum computing, explore its potential applications, and provide resources for further learning.
@@ -24,7 +24,9 @@ Quantum computing harnesses the peculiar principles of quantum mechanics, such a
 
 A qubit is the fundamental unit of quantum information. Unlike a classical bit, which can be either 0 or 1, a qubit can exist in a state that is a linear combination of both. This property is called superposition. Mathematically, a qubit's state can be represented as:
 
-$$ |\psi\rangle = \alpha|0\rangle + \beta|1\rangle $$
+$$ 
+|\psi\rangle = \alpha|0\rangle + \beta|1\rangle 
+$$
 
 where $|\alpha|^2$ and $|\beta|^2$ are the probabilities of the qubit being in the state $|0\rangle$ and $|1\rangle$ respectively, and $|\alpha|^2 + |\beta|^2 = 1$.
 
diff --git a/blog/react-js.md b/blog/react-js.md
index fc499227e..4c3361d18 100644
--- a/blog/react-js.md
+++ b/blog/react-js.md
@@ -3,7 +3,7 @@ title: "React JS"
 sidebar_label: React JS
 authors: [hitesh-gahanolia]
 tags: [javascript, framework, frontend, react, node]
-date: 2024-06-13 12:29
+date: 2024-06-13
 hide_table_of_contents: true
 ---
 
diff --git a/blog/reactjs-mongodb-chrome-extension.md b/blog/reactjs-mongodb-chrome-extension.md
index e5195f681..f8068a326 100644
--- a/blog/reactjs-mongodb-chrome-extension.md
+++ b/blog/reactjs-mongodb-chrome-extension.md
@@ -3,7 +3,7 @@ title: "Chrome Extension Using MERN"
 sidebar_label: Chrome Extension Using MERN
 authors: [khushi-kalra]
 tags: [chrome extension, web dev, React, Express, MongoDB, Node, UI]
-date: 2024-06-13 23:23:23
+date: 2024-06-13
 hide_table_of_contents: true
 ---
 
diff --git a/blog/sed-normalize-md-file-with-regex.md b/blog/sed-normalize-md-file-with-regex.md
index 65cce2d6e..c83e589ab 100644
--- a/blog/sed-normalize-md-file-with-regex.md
+++ b/blog/sed-normalize-md-file-with-regex.md
@@ -2,8 +2,8 @@
 title: "Sed: Normalize markdown file with Regex"
 authors: [ajay-dhangar]
 tags: [sed, regex, web clipper]
-date: 2024-03-15 14:37:46
-description: How to normalize markdown file with Regex
+date: 2024-03-15
+description: How to normalize markdown file with Regex using sed command-line utility in Linux, macOS, and Windows.
 draft: false
 ---
 
@@ -16,7 +16,7 @@ One of the common issues I encounter is inconsistent formatting of the front mat
 ```markdown
 ---
 title: "Sed: Normalize markdown file with Regex"
-author: Ajay Dhangar
+author: [ajay-dhangar]
 tags: [sed, regex, web clipper]
 date: 2020-11-26 21:13:28
 description: How to normalize markdown file with Regex
@@ -32,7 +32,7 @@ To make the front matter consistent across all my markdown files, I decided to u
 sed -i -E "s/^---\n(.*: .*\n)+---\n//g" file.md
 ```
 
-Let's break down the regular expression:
+**Let's break down the regular expression:**
 
 - `^---\n` matches the opening three dashes at the beginning of the file, followed by a newline character.
 - `(.*: .*\n)+` matches one or more lines containing a key-value pair, where the key is followed by a colon and a space, and the value is followed by a newline character.
diff --git a/blog/sql.md b/blog/sql.md
index 394cdbe29..748127797 100644
--- a/blog/sql.md
+++ b/blog/sql.md
@@ -1,9 +1,9 @@
 ---
-title: "SQL"
-sidebar_label: SQL - Structured Query Language
-authors: [hitesh-gahanolia]
+title: "SQL - Structured Query Language"
+sidebar_label: "SQL"
+authors: [ajay-dhangar, hitesh-gahanolia]
 tags: [sql, databases, data]
-date: 2024-06-12 5:17
+date: 2024-06-12
 hide_table_of_contents: true
 ---
 
diff --git a/courses/css/intro.md b/courses/css/intro.md
index 2ac1f56a7..05319894f 100644
--- a/courses/css/intro.md
+++ b/courses/css/intro.md
@@ -13,10 +13,4 @@ Hello, and welcome to the CSS Learning Path! In this page, you will find a colle
 
 ## Core Courses
 
-The following courses are designed to help you learn the fundamentals of CSS, including selectors, properties, values, and more. These courses will guide you through the basics of CSS and help you build a solid foundation in front-end web development.
-
-import CSSCourses from '@site/src/database/all-courses/CSSCourses';
-
-<div className="Courses">
-    <Courses courses={CSSCourses} />
-</div>
\ No newline at end of file
+The following courses are designed to help you learn the fundamentals of CSS, including selectors, properties, values, and more. These courses will guide you through the basics of CSS and help you build a solid foundation in front-end web development.
\ No newline at end of file
diff --git a/deployment-app.yml b/deployment-app.yml
deleted file mode 100644
index c435acaa3..000000000
--- a/deployment-app.yml
+++ /dev/null
@@ -1,22 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  # Unique key of the Deployment instance
-  name: my-node-app
-spec:
-  # 2 Pods should exist at all times.
-  replicas: 2
-  selector:
-    matchLabels:
-      app: node-app
-  template:
-    metadata:
-      labels:
-        # Apply this label to pods and default
-        # the Deployment label selector to this value
-        app: node-app
-    spec:
-      containers:
-        - name: node-app
-          # Run this image
-          image: #put your image name which you push in dockerhub
diff --git a/docs/html/assets/image-1.png b/docs/html/assets/image-1.png
new file mode 100644
index 000000000..08b3ef5ff
Binary files /dev/null and b/docs/html/assets/image-1.png differ
diff --git a/docs/html/assets/image-2.png b/docs/html/assets/image-2.png
new file mode 100644
index 000000000..a4be13563
Binary files /dev/null and b/docs/html/assets/image-2.png differ
diff --git a/docs/html/assets/img-3.png b/docs/html/assets/img-3.png
new file mode 100644
index 000000000..88b76752e
Binary files /dev/null and b/docs/html/assets/img-3.png differ
diff --git a/docs/html/assets/img-4.png b/docs/html/assets/img-4.png
new file mode 100644
index 000000000..a35649882
Binary files /dev/null and b/docs/html/assets/img-4.png differ
diff --git a/docs/html/elements-and-tags-html.md b/docs/html/elements-and-tags-html.md
deleted file mode 100644
index 0868e7511..000000000
--- a/docs/html/elements-and-tags-html.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-id: elements-and-tags-html
-title: Introduction of HTML Tags and Elements
-sidebar_label: HTML Tags and Elements
-tags: [html, elements, tags, web-development, front-end-development, web-design]
-description: In this tutorial, you will learn about HTML Elements and HTML Tags and about their differences
----
-
-<AdsComponent />
-
-HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It consists of various tags and elements that define the structure and content of a web page.
-
-## HTML Tags
-
-HTML tags are the building blocks of an HTML document. They are enclosed in angle brackets (`<>`) and are used to define the structure and formatting of the content. Tags are usually paired with an opening tag and a closing tag, with the content placed between them.
-
-For example, the `<h1>` tag is used to define a heading, and it is written as `<h1>Heading</h1>`. The opening tag `<h1>` indicates the start of the heading, and the closing tag `</h1>` indicates the end of the heading.
-
-
-Commonly used HTML Tags:-
-![Commonly used HTMl Tags](image.png)
-
-## HTML Elements
-
-HTML elements are made up of tags, along with the content placed between them. An element consists of an opening tag, the content, and a closing tag. The content can be text, images, links, or other HTML elements.
-
-For example, in the HTML element `<p> This is a paragraph.</p>`, `<p>` and `</p>` are HTML tags, and the entire string together is considered an HTML element
-
-<AdsComponent />
-
-## Difference between HTML Elements and HTML Tags
-
-| HTML Tags | HTML Elements |
-|-----------|--------------|
-| HTML Tags are used to hold HTML Elements | HTML Elements hold the content |
-| Enclosed in angle brackets (`<>`) | Consist of opening tag, content, and closing tag |
-| Used to define structure and formatting | Can contain text, images, links, or other HTML elements |
-| Paired with opening and closing tags | Content placed between opening and closing tags |
-
-## Conclusion
-
-In conclusion, HTML consists of various tags and elements that define the structure and content of a web page. HTML tags are the building blocks of an HTML document, used to define the structure and formatting of the content. HTML elements are made up of tags and the content placed between them, which can be text, images, links, or other HTML elements. Understanding the difference between HTML elements and HTML tags is essential for creating well-structured web pages.
diff --git a/docs/html/how-html-works.md b/docs/html/how-html-works.md
index 440fcdd62..abb13db28 100644
--- a/docs/html/how-html-works.md
+++ b/docs/html/how-html-works.md
@@ -7,11 +7,11 @@ tags: [html, web-development, front-end-development, web-design, web-browsers, w
 description: In this tutorial, you will learn about How HTML works with web browsers and how web browsers render HTML content.
 ---
 
-<AdsComponent />
-
 > *We have already learned HTML in the previous tutorial. In this tutorial, we will learn about how HTML works with web browsers and how web browsers render HTML content.*
 
-HTML, which stands for HyperText Markup Language, serves as the backbone of the World Wide Web. It is the standard language used to create web pages, providing the structure and content that browsers render for users to interact with. Understanding how HTML works with web browsers is fundamental for anyone diving into web development.
+HTML, which stands for **HyperText Markup Language**, serves as the backbone of the World Wide Web. It is the standard language used to create web pages, providing the structure and content that browsers render for users to interact with. Understanding how HTML works with web browsers is fundamental for anyone diving into web development.
+
+<AdsComponent />
 
 ## HTML: The Building Blocks of Web Pages
 
@@ -40,6 +40,9 @@ HTML is a markup language that uses tags to define the structure and content of
         <p>This is my first web page.</p>
       </BrowserWindow>
     </TabItem>
+    <TabItem value="how-html-works" label="How HTML Works">
+      ![alt text](./assets/image-1.png)
+    </TabItem>
 </Tabs>
 
 In this example, the `<h1>` tag creates a heading, and the `<p>` tag creates a paragraph. The browser interprets these tags and displays the content accordingly. HTML tags can be nested within each other to create more complex structures, such as lists, tables, forms, and more.
diff --git a/docs/html/image.png b/docs/html/image.png
deleted file mode 100644
index 8c6c317d0..000000000
Binary files a/docs/html/image.png and /dev/null differ
diff --git a/docs/html/intro-html.md b/docs/html/intro-html.md
index 10c2cdbca..56487f73a 100644
--- a/docs/html/intro-html.md
+++ b/docs/html/intro-html.md
@@ -3,19 +3,21 @@ id: intro-html
 title: Introduction of HTML
 sidebar_label: Introduction of HTML
 sidebar_position: 1
-tags: [html, introduction, web development, markup language, hyper text, web pages, career opportunities, personal growth, web-development, web design, web pages, websites, career opportunities, contribute to the web, stay relevant, express yourself, learn other technologies, have fun, how to use html, steps to start using html, set up your development environment, create your first html document, learn html syntax and structure, explore html elements and-attributes]
+tags: [html, introduction of html, what is html, why learn html, how to use html, html syntax, html structure, html elements, html attributes]
 description: In this tutorial, you will learn about HTML, its importance, what is HTML, why learn HTML, how to use HTML, steps to start using HTML, and more.
 ---
 
-<AdsComponent />
+HTML stands for **Hyper Text Markup Language**. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
 
-HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
+<AdsComponent />
 
-> HTML is a markup language that defines the structure of your content. HTML consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
+:::note
+HTML is a markup language that defines the structure of your content. HTML consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
+:::
 
 ## What is HTML?
 
-HTML, which stands for Hyper Text Markup Language, is the standard markup language for creating Web pages and design documents on the World Wide Web. It is a system of tags and codes that define the structure and presentation of text and images in a document. HTML is a markup language, not a programming language, and is used to create static web pages that are displayed in web browsers. HTML is important because it provides a standardized way to define elements, making it easier for computers and software applications to interpret and display the content correctly.
+HTML, which stands for **Hyper Text Markup Language**, is the standard markup language for creating Web pages and design documents on the World Wide Web. It is a system of tags and codes that define the structure and presentation of text and images in a document. HTML is a markup language, not a programming language, and is used to create static web pages that are displayed in web browsers. HTML is important because it provides a standardized way to define elements, making it easier for computers and software applications to interpret and display the content correctly.
 
 :::info
 
@@ -50,7 +52,7 @@ HTML, which stands for Hyper Text Markup Language, is the standard markup langua
        ```
        </TabItem>
        <TabItem value="Output">
-       <BrowserWindow url="http://127.0.0.1:5500/index.html">
+       <BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{backgroundColor: "#f5f5f5", color: "#333"}}>
        <div>
          <h1>This is a Heading</h1>
          <p>This is a paragraph.</p>
diff --git a/docs/html/setup-environment.md b/docs/html/setup-environment.md
index d9786ae27..0d5faa840 100644
--- a/docs/html/setup-environment.md
+++ b/docs/html/setup-environment.md
@@ -19,96 +19,150 @@ tags:
 description: In this tutorial, you will learn how to set up your development environment for HTML development.
 ---
 
-<AdsComponent />
+Setting up your development environment is the first step towards becoming a proficient web developer. Whether you're a beginner or an experienced coder, having the right tools can make a significant difference in your productivity and coding experience. In this tutorial, we'll explore the importance of an Integrated Development Environment (IDE) or text editor for HTML coding, compare some of the top IDEs and text editors available, and guide you through setting up your development environment using Visual Studio Code, a popular choice among developers.
 
-Hello, future coding wizards and web development enthusiasts! Ready to dive into the world of HTML coding but feeling overwhelmed by the sheer number of tools and setups available? Fear not! Today, we're going to embark on a detailed journey to set up your development environment for HTML coding. We’ll compare and contrast different Integrated Development Environments (IDEs) and text editors, and help you find the perfect fit for your needs. So, buckle up and let’s get started!
+<AdsComponent />
 
 ## What is an IDE and Why Do You Need One?
 
-An Integrated Development Environment (IDE) is a software suite that provides comprehensive facilities to programmers for software development. It typically includes a code editor, compiler or interpreter, and a debugger, all accessible through a single graphical user interface (GUI). For HTML coding, a good IDE or text editor will help you write, test, and debug your code efficiently.
+An Integrated Development Environment (IDE) is a software application that provides comprehensive facilities to computer programmers for software development. It typically includes a source code editor, build automation tools, and a debugger. IDEs are designed to streamline the coding process by providing features like syntax highlighting, auto-completion, and debugging tools, making it easier for developers to write, test, and debug code.
 
 ### Key Features to Look for in an IDE/Text Editor
 
-1. **Syntax Highlighting**: Different colors for different parts of the code for better readability.
-2. **Auto-completion**: Helps to write code faster and with fewer errors.
-3. **Debugging Tools**: Identify and fix errors quickly.
-4. **Extensions/Plugins**: Add extra features tailored to your needs.
-5. **Version Control Integration**: Work seamlessly with Git or other version control systems.
-
-## Comparing the Top IDEs and Text Editors
-
-### 1. Visual Studio Code (VS Code)
-
-**Pros:**
-
-- Free and open-source
-- Extensive library of extensions
-- Built-in Git integration
-- Excellent for HTML, CSS, and JavaScript
-- Cross-platform (Windows, macOS, Linux)
-
-**Cons:**
-
-- Can be overwhelming for absolute beginners due to the sheer number of features
-
-**Best For:** Both beginners and experienced developers looking for a powerful and customizable editor.
-
-**Get It Here:** [Visual Studio Code](https://code.visualstudio.com/)
+1. **Syntax Highlighting:** Color-coding of keywords, variables, and strings to make code more readable.
+2. **Auto-Completion:** Suggestions for code completion as you type to speed up coding.
+3. **Code Formatting:** Automatic formatting of code to maintain consistency and readability.
+4. **Debugging Tools:** Built-in tools to help identify and fix errors in your code.
+5. **Version Control Integration:** Support for version control systems like Git to track changes.
+6. **Extensions and Plugins:** A library of extensions and plugins to customize and extend the functionality of the IDE.
+7. **Live Preview:** Real-time preview of your code changes in a web browser for web development.
+8. **Customization Options:** Ability to customize the editor's appearance and behavior to suit your preferences.
+9. **Cross-Platform Support:** Availability on multiple operating systems for flexibility.
+10. **Community Support:** Active community of users and developers for help and resources.
+11. **Performance:** Fast and responsive performance to handle large codebases efficiently.
+12. **Cost:** Free vs. paid software based on your budget and requirements.
+13. **Ease of Use:** Intuitive interface and user-friendly features for a smooth coding experience.
+14. **Language Support:** Support for multiple programming languages and frameworks to cater to diverse needs.
 
 <AdsComponent />
 
-### 2. Sublime Text
-
-**Pros:**
-
-- Lightweight and fast
-- Clean and simple interface
-- Powerful search and replace functionality
-- Supports a wide range of plugins
-
-**Cons:**
-
-- Paid software (though you can use the free trial indefinitely with occasional reminders to purchase)
-
-**Best For:** Developers who want a lightweight editor with powerful features and don’t mind paying for it.
-
-**Get It Here:** [Sublime Text](https://www.sublimetext.com/)
-
-### 3. Brackets
-
-**Pros:**
+## Comparing the Top IDEs and Text Editors
 
-- Free and open-source
-- Designed specifically for web development
-- Live preview feature for HTML and CSS
-- Inline editors for quick editing
+There are many IDEs and text editors available for web development, each with its own set of features and benefits. Here's a comparison of some of the most popular choices:
 
-**Cons:**
+### 1. Visual Studio Code (VS Code)
 
-- Less powerful than VS Code in terms of extensions and plugins
-- Development has slowed since Adobe ended support
+- **Features:** Lightweight, powerful, and customizable with a rich extension library.
+- **Language Support:** Extensive support for various programming languages and frameworks.
+- **Price:** Free and open-source.
+- **Platforms:** Windows, macOS, Linux.
+- **Community:** Large and active community with plenty of resources and support.
+- **Live Preview:** Available through extensions like Live Server.
+- **Extensions:** Rich library of extensions for customization and additional features.
+- **Debugging:** Built-in debugging tools for Node.js and other languages.
+- **IntelliSense:** Intelligent code completion and suggestions.
+- **Version Control:** Integrated Git support.
+- **Performance:** Fast and responsive performance.
+- **Customization:** Highly customizable with themes and settings.
+- **Ease of Use:** Intuitive interface and user-friendly features.
+- **Recommended For:** Beginners and experienced developers looking for a versatile and powerful editor.
+- **Website:** [Visual Studio Code](https://code.visualstudio.com/)
+- **Download:** [Download VS Code](https://code.visualstudio.com/Download)
 
-**Best For:** Web developers looking for a simple, web-focused editor with live preview capabilities.
+### 2. Sublime Text
 
-**Get It Here:** [Brackets](https://brackets.io/)
+- **Features:** Fast, lightweight, and customizable with a distraction-free mode.
+- **Language Support:** Extensive language support with syntax highlighting and auto-completion.
+- **Price:** Free trial with a one-time purchase for a license.
+- **Platforms:** Windows, macOS, Linux.
+- **Community:** Active community with a variety of plugins and resources.
+- **Live Preview:** Available through plugins like LiveReload.
+- **Extensions:** Rich library of plugins for additional features.
+- **Debugging:** Requires third-party packages for debugging.
+- **IntelliSense:** Limited auto-completion compared to VS Code.
+- **Version Control:** Requires plugins for Git integration.
+- **Performance:** Fast and responsive performance.
+- **Customization:** Highly customizable with themes and settings.
+- **Ease of Use:** Intuitive interface with a minimalistic design.
+- **Recommended For:** Developers looking for a fast and customizable editor with a focus on simplicity.
+- **Website:** [Sublime Text](https://www.sublimetext.com/)
+- **Download:** [Download Sublime Text](https://www.sublimetext.com/download)
+- **Pricing:** $80 for a single-user license.
+- **Free Trial:** Unlimited evaluation period with occasional pop-up reminders.
+
+### 3. Atom
+
+- **Features:** Customizable, hackable, and open-source with a modern interface.
+- **Language Support:** Extensive language support with syntax highlighting and auto-completion.
+- **Price:** Free and open-source.
+- **Platforms:** Windows, macOS, Linux.
+- **Community:** Active community with a variety of packages and themes.
+- **Live Preview:** Available through packages like atom-live-server.
+- **Extensions:** Rich library of packages for additional features.
+- **Debugging:** Requires third-party packages for debugging.
+- **IntelliSense:** Limited auto-completion compared to VS Code.
+- **Version Control:** Requires packages for Git integration.
+- **Performance:** Slower performance compared to VS Code.
+- **Customization:** Highly customizable with themes and settings.
+- **Ease of Use:** Intuitive interface with a modern design.
+- **Recommended For:** Developers looking for a customizable and extensible editor with a modern interface.
+- **Website:** [Atom](https://atom.io/)
+- **Pricing:** Free and open-source.
+- **GitHub Integration:** Developed by GitHub and integrates with GitHub repositories.
 
 ### 4. Notepad++
 
-**Pros:**
-
-- Free and open-source
-- Lightweight and fast
-- Supports many programming languages
-- Simple and easy to use
-
-**Cons:**
-
-- Limited features compared to other editors
-- Windows only
-
-**Best For:** Beginners or those needing a straightforward, no-frills text editor for HTML.
-
-**Get It Here:** [Notepad++](https://notepad-plus-plus.org/)
+- **Features:** Lightweight, fast, and simple with syntax highlighting.
+- **Language Support:** Basic language support with syntax highlighting.
+- **Price:** Free and open-source.
+- **Platforms:** Windows.
+- **Community:** Limited community support compared to other editors.
+- **Live Preview:** Not available.
+- **Extensions:** Limited extensibility compared to other editors.
+- **Debugging:** Not available.
+- **IntelliSense:** Basic auto-completion for keywords.
+- **Version Control:** Requires external tools for version control.
+- **Performance:** Fast and responsive performance.
+- **Customization:** Limited customization options.
+- **Ease of Use:** Simple interface with basic features.
+- **Recommended For:** Beginners and users looking for a lightweight and simple editor.
+- **Website:** [Notepad++](https://notepad-plus-plus.org/)
+- **Pricing:** Free and open-source.
+- **Platforms:** Windows only.
+
+### 5. Brackets
+
+- **Features:** Lightweight, open-source, and focused on web development.
+- **Language Support:** Extensive language support with live preview and preprocessor support.
+- **Price:** Free and open-source.
+- **Platforms:** Windows, macOS, Linux.
+- **Community:** Active community with a variety of extensions and themes.
+- **Live Preview:** Built-in live preview feature for web development.
+- **Extensions:** Rich library of extensions for additional features.
+- **Debugging:** Requires third-party extensions for debugging.
+- **IntelliSense:** Limited auto-completion compared to VS Code.
+- **Version Control:** Requires extensions for Git integration.
+- **Performance:** Fast and responsive performance.
+- **Customization:** Limited customization options compared to other editors.
+- **Ease of Use:** Intuitive interface with a focus on web development.
+- **Recommended For:** Web developers looking for a lightweight editor with live preview features.
+- **Website:** [Brackets](http://brackets.io/)
+- **Pricing:** Free and open-source.
+- **Live Preview:** Built-in live preview feature for web development.
+- **Preprocessor Support:** Support for preprocessors like LESS and SCSS.
+
+### other IDEs and Text Editors
+
+- **WebStorm:** A powerful IDE for web development by JetBrains with advanced features.
+- **Eclipse:** An open-source IDE for Java development with support for other languages.
+- **NetBeans:** An open-source IDE for Java development with support for web technologies.
+- **PHPStorm:** A PHP-focused IDE by JetBrains with advanced features for PHP development.
+- **Vim:** A highly customizable text editor with a steep learning curve but powerful features.
+- **Emacs:** An extensible text editor with a steep learning curve but powerful features.
+- **Notepad:** A simple text editor built into Windows for basic text editing tasks.
+- **TextMate:** A lightweight text editor for macOS with a focus on simplicity and ease of use.
+
+When choosing an IDE or text editor for HTML development, consider your workflow, requirements, and preferences. Each editor has its strengths and weaknesses, so it's essential to find the one that best suits your needs and coding style.
 
 <AdsComponent />
 
@@ -119,6 +173,11 @@ Let’s set up a development environment using Visual Studio Code, a favorite am
 ### Step 1: Download and Install VS Code
 
 1. Go to the [Visual Studio Code website](https://code.visualstudio.com/).
+
+    <BrowserWindow url="https://code.visualstudio.com/" bodyStyle={{padding: 0}}>    
+     [![Visual Studio Code](./assets/image-2.png)](https://code.visualstudio.com/)
+    </BrowserWindow>
+
 2. Download the version appropriate for your operating system.
 3. Install the software by following the on-screen instructions.
 
@@ -129,24 +188,31 @@ Let’s set up a development environment using Visual Studio Code, a favorite am
    - Open VS Code.
    - Go to the Extensions view by clicking the Extensions icon in the Activity Bar on the side or pressing Ctrl+Shift+X.
    - Search for and install useful extensions like:
-     - HTML Snippets: Adds rich HTML snippets.
-     - Live Server: Launch a local development server with live reload feature.
-     - Prettier: Code formatter.
-
+     - **Live Server:** Launch a local development server with live reload feature.
+          
+          ![ive Server](./assets/img-3.png)
+
+     - **Prettier:** Code formatter to maintain consistent code style.
+          
+          ![Prettier](./assets/img-4.png)
+          
+  
 2. Customize Settings:
-   - Open the settings by clicking the gear icon at the bottom left and selecting "Settings".
-   - Customize the editor according to your preference (e.g., font size, theme).
+   
+   - Go to `File` &rarr; `Preferences` &rarr; `Settings` or press `Ctrl+,`.
+   - Customize your settings, themes, and keybindings to suit your preferences.
+   - Explore the available options to personalize your coding environment.
 
 <AdsComponent />
 
 ### Step 3: Start Coding
 
-1. Create a new file by clicking `File > New File`.
+1. Create a new file by clicking `File` &rarr; `New File`.
 2. Save it with a `.html` extension (e.g., `index.html`).
-3. Write your HTML code. Here’s a simple example:
+3. Write your HTML code. For example:
 
-```html
-<!doctype html>
+```html title="index.html"
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -160,20 +226,21 @@ Let’s set up a development environment using Visual Studio Code, a favorite am
 </html>
 ```
 
-4. To see your work in action, right-click on the index.html file and select "Open with Live Server". Your default web browser should open and display your HTML page.
+4. To see your work in action, right-click on the index.html file and select "Open with Live Server". Your default web browser should open and display your HTML page. `http://localhost:5500/index.html` will be the URL.
 
-<AdsComponent />
-
-### Tips for a Smooth Coding Experience
+   <BrowserWindow url="http://localhost:5500/index.html">
+    <>
+      <h1>Hello, World!</h1>
+      <p>This is my first HTML page using VS Code.</p>
+    </>
+   </BrowserWindow>
+   
+5. Make changes to your code and see the live preview update automatically.
 
-1. Use Version Control: Integrate Git into your workflow to track changes and collaborate with others.
-2. Stay Organized: Keep your files organized in a logical folder structure.
-3. Learn Shortcuts: Familiarize yourself with keyboard shortcuts to boost your productivity.
+Congratulations! You've successfully set up your development environment using Visual Studio Code and created your first HTML page. You're now ready to start coding and building amazing web projects.
 
-## In Conclusion
-
-Setting up your development environment for HTML coding is a crucial step towards becoming a proficient web developer. Whether you choose a powerful IDE like Visual Studio Code, a lightweight editor like Sublime Text, or a simple tool like Notepad++, the key is to find what works best for you and your workflow.
+<AdsComponent />
 
-For most users, especially beginners, Visual Studio Code is an excellent choice due to its extensive features, flexibility, and community support. It strikes a great balance between power and usability, making it a favorite among developers of all skill levels.
+## Conclusion
 
-So, go ahead, set up your development environment, and start coding your way to web development greatness. Happy coding, and may your HTML always be well-formed!
\ No newline at end of file
+Setting up your development environment is a crucial step in your journey as a web developer. By choosing the right IDE or text editor and customizing it to suit your needs, you can enhance your coding experience and productivity. Visual Studio Code is a popular choice among developers due to its versatility, powerful features, and active community support. By following the steps outlined in this tutorial, you can set up your development environment using VS Code and start coding HTML like a pro.
\ No newline at end of file
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 899b00480..b71c2a3d7 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -57,7 +57,8 @@ const config = {
           showReadingTime: true,
           editUrl:
             "https://github.com/codeharborhub/codeharborhub.github.io/edit/main/",
-          remarkPlugins: [[npm2yarn, { converters: ["pnpm"] }]],
+          remarkPlugins: [[npm2yarn, { converters: ["pnpm"] }], remarkMath],
+          rehypePlugins: [rehypeKatex],
         },
         theme: {
           customCss: "./src/css/custom.css",
@@ -209,8 +210,8 @@ const config = {
             position: "left",
             items: [
               {
-                label: "🌍 Web Dev",
-                to: "/web-dev/",
+                label: "Projects",
+                to: "/projects/",
               },
               {
                 label: "📚 E-books",
@@ -263,13 +264,13 @@ const config = {
           //   className: "header-github-link",
           //   "aria-label": "GitHub repository",
           // },
-          {
-            href: "https://www.codeharborhub.live/register",
-            position: "right",
-            className: "header-signup-link",
-            "aria-label": "Auth",
-            label: "Auth",
-          },
+          // {
+          //   href: "https://www.codeharborhub.live/register",
+          //   position: "right",
+          //   className: "header-signup-link",
+          //   "aria-label": "Auth",
+          //   label: "Auth",
+          // },
         ],
         // hideOnScroll: true,
       },
@@ -410,16 +411,16 @@ const config = {
         theme: prismThemes.github,
         darkTheme: prismThemes.dracula,
         additionalLanguages: [
-          'java',
-          'latex',
-          'haskell',
-          'matlab',
-          'PHp',
-          'powershell',
-          'bash',
-          'diff',
-          'json',
-          'scss',
+          "java",
+          "latex",
+          "haskell",
+          "matlab",
+          "PHp",
+          "powershell",
+          "bash",
+          "diff",
+          "json",
+          "scss",
         ],
       },
       docs: {
@@ -547,21 +548,6 @@ const config = {
     //     showLastUpdateTime: true,
     //   },
     // ],
-    [
-      "@docusaurus/plugin-content-docs",
-      /** @type {import('@docusaurus/plugin-content-docs').Options} */
-      {
-        id: "web-dev",
-        path: "web-dev",
-        routeBasePath: "web-dev",
-        // editUrl: "#",
-        sidebarPath: require.resolve("./sidebarsCommunity.js"),
-        remarkPlugins: [[npm2yarn, { sync: true }], remarkMath, rehypeKatex],
-        showLastUpdateAuthor: true,
-        showLastUpdateTime: true,
-      },
-    ],
-
     [
       "@docusaurus/plugin-content-docs",
       /** @type {import('@docusaurus/plugin-content-docs').Options} */
@@ -576,7 +562,6 @@ const config = {
         showLastUpdateTime: true,
       },
     ],
-    
     [
       path.join(__dirname, "/plugins/my-plugin"),
       {
@@ -585,6 +570,21 @@ const config = {
         keys: "Some-keys",
       },
     ],
+    
+    [
+      "@docusaurus/plugin-content-docs",
+      /** @type {import('@docusaurus/plugin-content-docs').Options} */
+      {
+        id: "projects",
+        path: "projects",
+        routeBasePath: "projects",
+        // editUrl: "#",
+        sidebarPath: require.resolve("./sidebarsCommunity.js"),
+        remarkPlugins: [[npm2yarn, { sync: true }], remarkMath, rehypeKatex],
+        showLastUpdateAuthor: true,
+        showLastUpdateTime: true,
+      },
+    ],
   ],
 };
 
diff --git a/projects/index.md b/projects/index.md
new file mode 100644
index 000000000..f39e76fc0
--- /dev/null
+++ b/projects/index.md
@@ -0,0 +1,7 @@
+---
+id: projects
+title: Welcome to our Projects
+sidebar_label: WelCome to our Projects
+sidebar_position: 1
+slug: /
+---
diff --git a/src/css/custom.css b/src/css/custom.css
index 6ad9c2dc5..958d29d20 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -53,6 +53,19 @@
   --ifm-text-color: #fff;
 }
 
+body {
+  background-image: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.575)
+    ),
+    url('/landing/grid-light.svg');
+}
+
+[data-theme="dark"] body {
+  background-image: url('/landing/grid-dark.svg');
+}
+
 .header-github-link::before {
   content: "";
   width: 24px;
diff --git a/src/database/all-courses/CSSCourses/index.tsx b/src/database/all-courses/CSSCourses/index.tsx
deleted file mode 100644
index add74e83f..000000000
--- a/src/database/all-courses/CSSCourses/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-const CSSCourses = [
-  {
-    id: 1,
-    title: "Getting Started with CSS",
-    description:
-      "Learn the basics of CSS and how to use it to style your HTML web pages.",
-    imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNX13lb7HMEfoxyMU47dsYLrQqJJoyWf33MA&usqp=CAU",
-    category: "css",
-    author: "Ajay Dhangar",
-    link: "/code-harbor-hub/courses/category/getting-started-with-css/",
-  },
-
-  {
-    id: 2,
-    title: "CSS Foundations",
-    description: "Learn the foundations of CSS and how to use it to style your HTML web pages",
-    imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOWMEmg2lu57ybdsDfJ7XV-7ZZa8otGU5i9Q&usqp=CAU",
-    category: "css",
-    author: "Ajay Dhangar",
-    link: "/code-harbor-hub/courses/",
-  },
-
-  {
-    id: 3,
-    title: "CSS Grid & Flexbox for Responsive Layouts",
-    description: "Learn how to use CSS Grid and Flexbox to create responsive layouts.",
-    imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMAASFPcDWt5gtTMLyfcFjmi9G5PyV4HDRX_WzEdPcB8wswFL0Hx1gWXb8ywnTMD3FKUU&usqp=CAU",
-    category: "css",
-    author: "Ajay Dhangar",
-    link: "/code-harbor-hub/courses/",
-  },
-
-  {
-    id: 4,
-    title: "Practical CSS Layouts",
-    description: "Learn how to create practical layouts using CSS.",
-    imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmG8jnDeRNg1EU-P38Y0BqliXlhqM_oy3f6w&usqp=CAU",
-    category: "css",
-    author: "Ajay Dhangar",
-    link: "/code-harbor-hub/courses/",
-  },
-
-  {
-    id: 5,
-    title: "CSS Animations and Transitions",
-    description: "Learn CSS Animations and Transitions in full details",
-    imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNx845ildDdt-Ot_cS_wSaloaQki9p9_Dms-Tr4vU7ZPxGvdS0SUmInoXuf947dQrHU74&usqp=CAU",
-    category: "css",
-    author: "Ajay Dhangar",
-    link: "/code-harbor-hub/courses/",
-  },
-
-  {
-    id: 6,
-    title: "Intermediate HTML & CSS",
-    description: "Learn Intermediate HTML & CSS for better understanding.",
-    imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTN5aQO8bVP5byod5FdrX3hfmzT1bTDJHkb7Q&usqp=CAU",
-    category: "css",
-    author: "Ajay Dhangar",
-    link: "/code-harbor-hub/courses/",
-  },
-
-  {
-    id: 7,
-    title: "CSS Projects",
-    description: "Learn How to make CSS Projects",
-    imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUvIo0qL04kykHdiQGhWCvEanAJa-onN4rTw&usqp=CAU",
-    category: "css",
-    author: "Ajay Dhangar",
-    link: "/code-harbor-hub/courses/",
-  },
-
-  // Add more courses here
-];
-
-export default CSSCourses;
diff --git a/src/database/blogs/index.tsx b/src/database/blogs/index.tsx
index d1cc9e94e..35d83218e 100644
--- a/src/database/blogs/index.tsx
+++ b/src/database/blogs/index.tsx
@@ -55,30 +55,15 @@ const blogs: Blog[] = [
       "Git is a powerful tool for managing the development of software projects, but it can be challenging to use effectively. ",
     slug: "git-best-practicies",
   },
-  {
-    id: 7,
-    title: "Mastering Data Structures in Python",
-    image: "/img/svg/programming.svg",
-    description:
-      "Data structures are essential components in computer science, enabling efficient data storage, manipulation, and retrieval.",
-    slug: "Mastering Data Structures in Python",
-  },
   {
     id: 8,
     title: "Automating Tasks with Python",
     image: "/img/svg/progress.svg",
     description:
       "Automation is a powerful way to boost productivity and efficiency by minimizing manual intervention in repetitive tasks.",
-    slug: "automating-tasks-with-python",
-  },
-  {
-    id: 9,
-    title: "A Beginner’s Guide to the Top 5 React Hooks",
-    image: "/img/svg/react.svg",
-    description:
-      "Since its inception, React has undergone significant evolution, with each new release introducing enhancements and improvements to the framework.",
-    slug: "Beginner’s Guide to the Top 5 React Hooks",
+    slug: "#",
   },
+ 
   {
     id: 10,
     title: "DOM manipulation in JavaScript",
diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx
index 19e163841..f44e66cb3 100644
--- a/src/theme/Footer/index.tsx
+++ b/src/theme/Footer/index.tsx
@@ -130,7 +130,7 @@ const Footer: React.FC = () => {
                 </li>
                 <li>
                   <Link
-                    to="/web-dev/"
+                    to="#"
                     className="mb-3 inline-block text-base text-gray-300 hover:text-[--ifm-color-primary]"
                   >
                     Web Development
diff --git a/static/landing/calendar.svg b/static/landing/calendar.svg
new file mode 100644
index 000000000..b345ddb78
--- /dev/null
+++ b/static/landing/calendar.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.6875" width="48" height="48" rx="8" fill="#2160FD"/>
+<path d="M32 15.6875H31V14.6875C31 14.1375 30.55 13.6875 30 13.6875C29.45 13.6875 29 14.1375 29 14.6875V15.6875H19V14.6875C19 14.1375 18.55 13.6875 18 13.6875C17.45 13.6875 17 14.1375 17 14.6875V15.6875H16C14.9 15.6875 14 16.5875 14 17.6875V33.6875C14 34.7875 14.9 35.6875 16 35.6875H32C33.1 35.6875 34 34.7875 34 33.6875V17.6875C34 16.5875 33.1 15.6875 32 15.6875ZM31 33.6875H17C16.45 33.6875 16 33.2375 16 32.6875V20.6875H32V32.6875C32 33.2375 31.55 33.6875 31 33.6875Z" fill="#F5F5F7"/>
+</svg>
diff --git a/static/landing/chat.svg b/static/landing/chat.svg
new file mode 100644
index 000000000..3e9ad2317
--- /dev/null
+++ b/static/landing/chat.svg
@@ -0,0 +1,11 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.666992" y="0.6875" width="48" height="48" rx="8" fill="#2160FD"/>
+<g clip-path="url(#clip0_2586_29443)">
+<path d="M32.667 18.6875H31.667V26.6875C31.667 27.2375 31.217 27.6875 30.667 27.6875H18.667V28.6875C18.667 29.7875 19.567 30.6875 20.667 30.6875H30.667L34.667 34.6875V20.6875C34.667 19.5875 33.767 18.6875 32.667 18.6875ZM29.667 23.6875V16.6875C29.667 15.5875 28.767 14.6875 27.667 14.6875H16.667C15.567 14.6875 14.667 15.5875 14.667 16.6875V29.6875L18.667 25.6875H27.667C28.767 25.6875 29.667 24.7875 29.667 23.6875Z" fill="#F5F5F7"/>
+</g>
+<defs>
+<clipPath id="clip0_2586_29443">
+<rect width="24" height="24" fill="white" transform="translate(12.667 12.6875)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/landing/customer.svg b/static/landing/customer.svg
new file mode 100644
index 000000000..f462a1f12
--- /dev/null
+++ b/static/landing/customer.svg
@@ -0,0 +1,14 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.333008" y="0.6875" width="48" height="48" rx="8" fill="#2160FD"/>
+<g clip-path="url(#clip0_2586_29433)">
+<path d="M34.8327 24.9442C34.8327 18.5392 29.8627 14.1875 24.3327 14.1875C18.861 14.1875 13.8327 18.4458 13.8327 25.0142C13.1327 25.4108 12.666 26.1575 12.666 27.0208V29.3542C12.666 30.6375 13.716 31.6875 14.9993 31.6875C15.641 31.6875 16.166 31.1625 16.166 30.5208V24.9092C16.166 20.4408 19.6077 16.5325 24.076 16.4042C25.1696 16.3709 26.2587 16.5575 27.2789 16.9529C28.299 17.3483 29.2294 17.9444 30.0149 18.706C30.8004 19.4676 31.425 20.3791 31.8518 21.3865C32.2786 22.3939 32.4988 23.4768 32.4993 24.5708V32.8542H24.3327C23.691 32.8542 23.166 33.3792 23.166 34.0208C23.166 34.6625 23.691 35.1875 24.3327 35.1875H32.4993C33.7827 35.1875 34.8327 34.1375 34.8327 32.8542V31.4308C35.521 31.0692 35.9993 30.3575 35.9993 29.5175V26.8342C35.9993 26.0175 35.521 25.3058 34.8327 24.9442Z" fill="#F5F5F7"/>
+<path d="M20.8327 27.0208C21.477 27.0208 21.9993 26.4985 21.9993 25.8542C21.9993 25.2098 21.477 24.6875 20.8327 24.6875C20.1884 24.6875 19.666 25.2098 19.666 25.8542C19.666 26.4985 20.1884 27.0208 20.8327 27.0208Z" fill="#F5F5F7"/>
+<path d="M27.8327 27.0208C28.477 27.0208 28.9993 26.4985 28.9993 25.8542C28.9993 25.2098 28.477 24.6875 27.8327 24.6875C27.1883 24.6875 26.666 25.2098 26.666 25.8542C26.666 26.4985 27.1883 27.0208 27.8327 27.0208Z" fill="#F5F5F7"/>
+<path d="M31.3326 23.5558C31.0544 21.9157 30.2049 20.4268 28.9344 19.3528C27.664 18.2788 26.0545 17.6889 24.3909 17.6875C20.8559 17.6875 17.0526 20.6158 17.3559 25.2125C18.7946 24.6238 20.0652 23.6882 21.0545 22.4892C22.0438 21.2903 22.7211 19.8651 23.0259 18.3408C24.5542 21.4092 27.6926 23.5208 31.3326 23.5558Z" fill="#F5F5F7"/>
+</g>
+<defs>
+<clipPath id="clip0_2586_29433">
+<rect width="28" height="28" fill="white" transform="translate(10.333 10.6875)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/landing/grid-dark.svg b/static/landing/grid-dark.svg
new file mode 100644
index 000000000..e77359a72
--- /dev/null
+++ b/static/landing/grid-dark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+<rect x="0.25" y="0.25" width="47.5" height="47.5" stroke="white" stroke-opacity="0.04" stroke-width="0.5"/>
+</svg>
diff --git a/static/landing/grid-light.svg b/static/landing/grid-light.svg
new file mode 100644
index 000000000..45f1f9759
--- /dev/null
+++ b/static/landing/grid-light.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+<rect x="0.25" y="0.25" width="47.5" height="47.5" stroke="black" stroke-opacity="0.04" stroke-width="0.5"/>
+</svg>
diff --git a/web-dev/CSS/css.md b/web-dev/CSS/css.md
deleted file mode 100644
index e41a8c219..000000000
--- a/web-dev/CSS/css.md
+++ /dev/null
@@ -1,498 +0,0 @@
----
-id: welcome-css
-title: Welcome to the CSS
-sidebar_label: Welcome To CSS
-sidebar_position: 3
-tags: [css]
----
-
-## Topics Covered in CSS
-
-### 1. Basic Syntax
-Understanding the structure and syntax of CSS rules, including selectors, properties, and values.
-
-### 2. Selectors
-Different types of selectors to target HTML elements for styling, such as element selectors, class selectors, ID selectors, attribute selectors, pseudo-classes, and pseudo-elements.
-
-### 3. Box Model
-Understanding the box model, which describes how elements are structured in CSS, including content, padding, border, and margin.
-
-### 4. Typography
-Styling text elements with properties like font-family, font-size, font-weight, line-height, text-align, text-decoration, and text-transform.
-
-### 5. Colors and Backgrounds
-Applying colors to elements using properties like color, background-color, opacity, gradients, and background images.
-
-### 6. Layout
-Creating layouts and positioning elements using properties like display, position, float, flexbox, and grid.
-
-### 7. Responsive Design
-Designing web pages that adapt to different screen sizes and devices using techniques like media queries and responsive units (like percentages and ems).
-
-### 8. Transitions and Animations
-Adding dynamic effects to elements with properties like transition, animation, and keyframes.
-
-### 9. Transforms
-Modifying the appearance of elements in 2D or 3D space using properties like transform, translate, rotate, scale, and skew.
-
-### 10. Pseudo-classes and Pseudo-elements
-Understanding and using pseudo-classes (:hover, :focus, :active) and pseudo-elements (::before, ::after) to style elements based on their state or create decorative elements.
-
-### 11. Selectors Specificity and Inheritance
-Understanding how CSS specificity affects which styles are applied to elements and how inheritance works in CSS.
-
-### 12. Units
-Understanding different units of measurement in CSS, including pixels, percentages, ems, rems, viewport units, and others.
-
-
-
-## 13. CSS Grid and Flexbox
-Comprehensive knowledge of CSS Grid and Flexbox layout models for creating complex and responsive layouts.
-
-
-## Basic Syntax
-
-CSS (Cascading Style Sheets) follows a simple syntax for styling HTML elements. Each CSS rule consists of a selector, followed by a set of declarations enclosed in curly braces.
-
-Example CSS rule:
-
-```css
-selector {
-    property: value;
-}
-```
-
-# Cascading Style Sheets
-
-## What is CSS
-CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS defines how elements should be rendered on screen, on paper, in speech, or on other media.
-
-## Core Concepts
-1. Selectors:
-Patterns used to select the elements to style.
-Examples include element selectors (p), class selectors (.className), ID selectors (#idName), and attribute selectors ([attribute]).
-
-2. Properties and Values:
-Define the styles to apply to selected elements.
-Each property has a set of values, e.g., color: red;, font-size: 16px;.
-
-3. Cascade and Inheritance:
-Determines which styles are applied when multiple rules match the same element.
-Cascade: Refers to the order of precedence based on specificity, source order, and importance.
-Inheritance: Certain properties can be inherited from parent elements to children, simplifying styling.
-
-4. Box Model:
-Describes the rectangular boxes generated for elements in the document tree.
-Components: content, padding, border, and margin.
-
-5. Layouts:
-Techniques to arrange elements on the page, such as Flexbox and Grid Layout.
-Provides powerful tools for creating complex and responsive designs.
-
-## Usage Examples
-
-1. Inline CSS:
-
-Applied directly to an HTML element using the style attribute.
-
-```html
-<p style="color: blue; font-size: 14px;">Hello World</p>
-```
-
-2. Internal CSS:
-
-Defined within a `<style>` tag in the HTML document's `<head>` .
-
-```html
-<head>
-    <style>
-        p {
-            color: blue;
-            font-size: 14px;
-        }
-    </style>
-</head>
-```
-
-3. External CSS:
-
-Linked via a separate .css file, using the `<link>`  tag.
-
-```html
-<head>
-    <link rel="stylesheet" type="text/css" href="styles.css">
-</head>
-```
-
-# CSS Padding
-
-Padding is used to create space around an element's content, inside of any defined borders. The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
-
-With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
-
-## Padding - Individual Sides
-
-CSS has properties for specifying the padding for each side of an element:
-
-- `padding-top`
-- `padding-right`
-- `padding-bottom`
-- `padding-left`
-
-All the padding properties can have the following values:
-
-- `length` - specifies a padding in px, pt, cm, etc.
-- `%` - specifies a padding in % of the width of the containing element
-- `inherit` - specifies that the padding should be inherited from the parent element
-
-Note: Negative values are not allowed.
-
-### Example
-
-Set different padding for all four sides of a `<div>` element:
-
-```css
-div {
-  padding-top: 50px;
-  padding-right: 30px;
-  padding-bottom: 50px;
-  padding-left: 80px;
-}
-```
-
-#### Output
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<div style={{paddingTop: "50px", paddingRight: "30px", paddingBottom: "50px", paddingLeft: "80px", border: "1px solid blue"}}>
-  This div has different padding for all four sides.
-</div>
-</BrowserWindow>
-## Padding - Shorthand Property
-
-To shorten the code, it is possible to specify all the padding properties in one property.
-
-The `padding` property is a shorthand property for the following individual padding properties:
-
-- `padding-top`
-- `padding-right`
-- `padding-bottom`
-- `padding-left`
-
-### If the padding property has four values:
-
-```css
-padding: 25px 50px 75px 100px;
-```
-
-- `top` padding is 25px
-- `right` padding is 50px
-- `bottom` padding is 75px
-- `left` padding is 100px
-
-### Example
-
-Use the padding shorthand property with four values:
-
-```css
-div {
-  padding: 25px 50px 75px 100px;
-}
-```
-
-#### Output
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<div style={{padding: "25px 50px 75px 100px", border: "1px solid green"}}>
-  This div uses the padding shorthand with four values.
-</div>
-</BrowserWindow>
-### If the padding property has three values:
-
-```css
-padding: 25px 50px 75px;
-```
-
-- `top` padding is 25px
-- `right` and `left` paddings are 50px
-- `bottom` padding is 75px
-
-### Example
-
-Use the padding shorthand property with three values:
-
-```css
-div {
-  padding: 25px 50px 75px;
-}
-```
-
-#### Output
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<div style={{padding: "25px 50px 75px", border: "1px solid red"}}>
-  This div uses the padding shorthand with three values.
-</div>
-</BrowserWindow>
-### If the padding property has two values:
-
-```css
-padding: 25px 50px;
-```
-
-- `top` and `bottom` paddings are 25px
-- `right` and `left` paddings are 50px
-
-### Example
-
-Use the padding shorthand property with two values:
-
-```css
-div {
-  padding: 25px 50px;
-}
-```
-
-#### Output
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<div style={{padding: "25px 50px", border: "1px solid purple"}}>
-  This div uses the padding shorthand with two values.
-</div>
-</BrowserWindow>
-### If the padding property has one value:
-
-```css
-padding: 25px;
-```
-
-- all four paddings are 25px
-
-### Example
-
-Use the padding shorthand property with one value:
-
-```css
-div {
-  padding: 25px;
-}
-```
-
-#### Output
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<div style={{padding: "25px", border: "1px solid orange"}}>
-  This div uses the padding shorthand with one value.
-</div>
-</BrowserWindow>
-## Padding and Element Width
-
-The CSS `width` property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).
-
-So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
-
-### Example
-
-Here, the `<div>` element is given a width of 300px. However, the actual width of the `<div>` element will be 350px (300px + 25px of left padding + 25px of right padding):
-
-```css
-div {
-  width: 300px;
-  padding: 25px;
-}
-```
-
-#### Output
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<div style={{width: "300px", padding: "25px", border: "1px solid brown"}}>
-  This div's total width is 350px due to padding.
-</div>
-</BrowserWindow>
-To keep the width at 300px, no matter the amount of padding, you can use the `box-sizing` property. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.
-
-### Example
-
-Use the `box-sizing` property to keep the width at 300px, no matter the amount of padding:
-
-```css
-div {
-  width: 300px;
-  padding: 25px;
-  box-sizing: border-box;
-}
-```
-
-# CSS Outlines
-
-An outline is a line drawn outside the element's border.
-An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".
-
-CSS has the following outline properties:
-
-- `outline-style`
-- `outline-color`
-- `outline-width`
-- `outline-offset`
-- `outline`
-
-Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height are not affected by the width of the outline.
-
-## CSS Outline Style
-
-The `outline-style` property specifies the style of the outline, and can have one of the following values:
-
-- `dotted` - Defines a dotted outline
-- `dashed` - Defines a dashed outline
-- `solid` - Defines a solid outline
-- `double` - Defines a double outline
-- `groove` - Defines a 3D grooved outline
-- `ridge` - Defines a 3D ridged outline
-- `inset` - Defines a 3D inset outline
-- `outset` - Defines a 3D outset outline
-- `none` - Defines no outline
-- `hidden` - Defines a hidden outline
-
-The following example shows the different outline-style values:
-
-```css
-p.dotted {outline-style: dotted;}
-p.dashed {outline-style: dashed;}
-p.solid {outline-style: solid;}
-p.double {outline-style: double;}
-p.groove {outline-style: groove;}
-p.ridge {outline-style: ridge;}
-p.inset {outline-style: inset;}
-p.outset {outline-style: outset;}
-```
-
-#### Output
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<p class="dotted" style={{outlineStyle: 'dotted'}}>A dotted outline.</p>
-<p class="dashed" style={{outlineStyle: 'dashed'}}>A dashed outline.</p>
-<p class="solid" style={{outlineStyle: 'solid'}}>A solid outline.</p>
-<p class="double" style={{outlineStyle: 'double'}}>A double outline.</p>
-<p class="groove" style={{outlineStyle: 'groove'}}>A groove outline. The effect depends on the outline-color value.</p>
-<p class="ridge" style={{outlineStyle: 'ridge'}}>A ridge outline. The effect depends on the outline-color value.</p>
-<p class="inset" style={{outlineStyle: 'inset'}}>An inset outline. The effect depends on the outline-color value.</p>
-<p class="outset" style={{outlineStyle: 'outset'}}>An outset outline. The effect depends on the outline-color value.</p>
-</BrowserWindow>
-## CSS Outline Width
-
-The `outline-width` property specifies the width of the outline, and can have one of the following values:
-
-- `thin` (typically 1px)
-- `medium` (typically 3px)
-- `thick` (typically 5px)
-- A specific size (in px, pt, cm, em, etc)
-
-The following example shows some outlines with different widths:
-
-```css
-p.ex1 {
-  border: 1px solid black;
-  outline-style: solid;
-  outline-color: red;
-  outline-width: thin;
-}
-
-p.ex2 {
-  border: 1px solid black;
-  outline-style: solid;
-  outline-color: red;
-  outline-width: medium;
-}
-
-p.ex3 {
-  border: 1px solid black;
-  outline-style: solid;
-  outline-color: red;
-  outline-width: thick;
-}
-
-p.ex4 {
-  border: 1px solid black;
-  outline-style: solid;
-  outline-color: red;
-  outline-width: 4px;
-}
-```
-
-#### Output
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<p class="ex1" style={{border: '1px solid black', outlineStyle: 'solid', outlineColor: 'red', outlineWidth: 'thin'}}>A thin outline.</p>
-<p class="ex2" style={{border: '1px solid black', outlineStyle: 'solid', outlineColor: 'red', outlineWidth: 'medium'}}>A medium outline.</p>
-<p class="ex3" style={{border: '1px solid black', outlineStyle: 'solid', outlineColor: 'red', outlineWidth: 'thick'}}>A thick outline.</p>
-<p class="ex4" style={{border: '1px solid black', outlineStyle: 'solid', outlineColor: 'red', outlineWidth: '4px'}}>A 4px thick outline.</p>
-</BrowserWindow>
-## CSS Outline Color
-
-The `outline-color` property is used to set the color of the outline.
-
-The color can be set by:
-
-- Name - specify a color name, like "red"
-- HEX - specify a hex value, like "#ff0000"
-- RGB - specify an RGB value, like "rgb(255,0,0)"
-- HSL - specify an HSL value, like "hsl(0, 100%, 50%)"
-- invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)
-
-The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:
-
-```css
-p.ex1 {
-  border: 2px solid black;
-  outline-style: solid;
-  outline-color: red;
-}
-
-p.ex2 {
-  border: 2px solid black;
-  outline-style: dotted;
-  outline-color: blue;
-}
-
-p.ex3 {
-  border: 2px solid black;
-  outline-style: outset;
-  outline-color: grey;
-}
-```
-
-#### Output
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<p class="ex1" style={{border: '2px solid black', outlineStyle: 'solid', outlineColor: 'red'}}>A solid red outline.</p>
-<p class="ex2" style={{border: '2px solid black', outlineStyle: 'dotted', outlineColor: 'blue'}}>A dotted blue outline.</p>
-<p class="ex3" style={{border: '2px solid black', outlineStyle: 'outset', outlineColor: 'grey'}}>An outset grey outline.</p>
-</BrowserWindow>
-## CSS Outline - Shorthand property
-
-The `outline` property is a shorthand property for setting the following individual outline properties:
-
-- `outline-width`
-- `outline-style` (required)
-- `outline-color`
-
-The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.
-
-The following example shows some outlines specified with the shorthand outline property:
-
-```css
-p.ex1 {outline: dashed;}
-p.ex2 {outline: dotted red;}
-p.ex3 {outline: 5px solid yellow;}
-p.ex4 {outline: thick ridge pink;}
-```
-
-#### Output
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<p class="ex1" style={{outline: 'dashed'}}>A dashed outline.</p>
-<p class="ex2" style={{outline: 'dotted red'}}>A dotted red outline.</p>
-<p class="ex3" style={{outline: '5px solid yellow'}}>A 5px solid yellow outline.</p>
-<p class="ex4" style={{outline: 'thick ridge pink'}}>A thick ridge pink outline.</p>
-</BrowserWindow>
-
-
-
-#### Output
-
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<div style={{width: "300px", padding: "25px", boxSizing: "border-box", border: "1px solid black"}}>
-  This div's total width remains 300px due to box-sizing.
-</div>
-</BrowserWindow>
-
-
diff --git a/web-dev/HTML/html.md b/web-dev/HTML/html.md
deleted file mode 100644
index 9bbc46be3..000000000
--- a/web-dev/HTML/html.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-id: welcome-html
-title: Welcome to the HTML
-sidebar_label: Welcome To HTML
-sidebar_position: 2
-tags: [html]
----
-
-HTML (HyperText Markup Language) is the standard language used to create and design web pages. It structures the content on the web and ensures that text, images, links, and other media elements are displayed correctly. HTML consists of a series of elements, represented by tags, that define the different parts of a webpage.
-
-### Use of HTML in Web Development 
-In web development, HTML is essential for creating and structuring web content. It serves several critical purposes:
-
-1. **Content Structuring**: HTML provides the basic structure of a webpage, allowing developers to organize content into elements like headings, paragraphs, lists, and tables. This structure ensures that the content is displayed in a coherent and readable manner.
-
-2. **Embedding Media**: HTML allows for the integration of various media types, such as images, videos, and audio, enhancing the user experience by making the content more engaging.
-
-3. **Hyperlinks**: HTML uses the `<a>` tag to create links, enabling navigation between different web pages or resources, which is a fundamental aspect of the web’s interconnected nature.
-
-4. **Forms and Input**: HTML provides elements like forms, buttons, and input fields, allowing users to interact with websites, submit data, and perform actions like searches or filling out surveys.
-
-5. **SEO and Accessibility**: Proper use of HTML tags and attributes ensures that web content is accessible to search engines and assistive technologies. This improves the site's search engine ranking and makes it usable for people with disabilities.
-
-6. **Integration with CSS and JavaScript**: HTML works in tandem with CSS (Cascading Style Sheets) and JavaScript. While HTML provides the structure, CSS is used for styling and layout, and JavaScript adds interactivity and dynamic behavior to web pages.
-
-Overall, HTML is the foundation of web development, providing the essential framework upon which all websites are built.
-
-
-Using HTML involves writing and structuring your content with HTML tags. Here are the basic steps to get started:
-
-1. **Create a Basic HTML Document**:
-   Start with a simple text editor (like Notepad on Windows or TextEdit on Mac) or a more advanced code editor (like Visual Studio Code or Sublime Text).
-
-2. **HTML Document Structure**:
-   A basic HTML document includes the following structure:
-
-   ```html
-   <!DOCTYPE html>
-   <html lang="en">
-   <head>
-       <meta charset="UTF-8">
-       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-       <title>My First HTML Page</title>
-   </head>
-   <body>
-       <h1>Welcome to My Website</h1>
-       <p>This is a paragraph of text on my first web page.</p>
-       <a href="https://www.example.com">Visit Example.com</a>
-       <img src="image.jpg" alt="Description of image">
-   </body>
-   </html>
-   ```
-
-
- ### How to use HTML?
-3. **Explanation of Basic Tags**:
-   - `<!DOCTYPE html>`: Declares the document type and version of HTML.
-   - `<html>`: The root element that contains all other HTML elements.
-   - `<head>`: Contains meta-information about the document (like the title and character set).
-   - `<meta charset="UTF-8">`: Sets the character encoding for the document.
-   - `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Ensures proper rendering on mobile devices.
-   - `<title>`: Sets the title of the webpage, which appears in the browser tab.
-   - `<body>`: Contains the content of the webpage that is visible to users.
-   - `<h1>`: Represents a top-level heading.
-   - `<p>`: Defines a paragraph of text.
-   - `<a>`: Creates a hyperlink to another webpage.
-   - `<img>`: Embeds an image into the webpage, with `src` specifying the image source and `alt` providing alternative text.
-
-4. **Save and View the HTML File**:
-   Save the file with an `.html` extension (e.g., `index.html`). Open this file in a web browser to view your webpage.
-
-5. **Add More Content and Structure**:
-   You can add more HTML elements to enhance your webpage, such as:
-   - Lists (`<ul>` for unordered lists and `<ol>` for ordered lists)
-   - Tables (`<table>`, `<tr>`, `<td>`, etc.)
-   - Forms (`<form>`, `<input>`, `<textarea>`, etc.)
-
-6. **Style with CSS**:
-   To style your HTML content, you can use CSS either by adding a `<style>` tag within the `<head>` section or by linking to an external CSS file with the `<link>` tag.
-
-   ```html
-   <head>
-       <link rel="stylesheet" href="styles.css">
-   </head>
-   ```
-
-7. **Add Interactivity with JavaScript**:
-   For interactive features, you can include JavaScript within your HTML document using the `<script>` tag or by linking to an external JavaScript file.
-
-   ```html
-   <body>
-       <script src="script.js"></script>
-   </body>
-   ```
-
-By following these steps and understanding the basic HTML tags, you can start building and designing your own web pages.
-
-## Conclusion
- HTML (HyperText Markup Language) is the foundational language used for creating and structuring content on the web. It provides the essential framework for all web pages, defining the structure and layout of a website through a series of elements and tags. Understanding and using HTML is crucial for anyone involved in web development, as it allows for the integration of text, images, links, forms, and multimedia elements, creating a cohesive and interactive user experience.
-
-HTML works in conjunction with CSS (Cascading Style Sheets) for styling and layout and JavaScript for interactivity and dynamic content. Together, these technologies form the backbone of web development, enabling the creation of visually appealing, functional, and accessible websites. Mastering HTML is the first step in becoming proficient in web development and is essential for building modern, user-friendly websites.
\ No newline at end of file
diff --git a/web-dev/HTML/operation.md b/web-dev/HTML/operation.md
deleted file mode 100644
index a29072e95..000000000
--- a/web-dev/HTML/operation.md
+++ /dev/null
@@ -1,746 +0,0 @@
----
-id: operations-html
-title: HTML Operations
-sidebar_label: HTML Operations
-sidebar_position: 3
-tags: [html, operations]
----
-
-HTML operations involve the creation, structuring, and manipulation of web content using HTML elements. Here are some key operations you can perform with HTML:
-HTML operations involve the creation, structuring, and manipulation of web content using HTML elements. Here are some key operations you can perform with HTML:
-
-## 1. **Structuring Content**
-   HTML provides a variety of tags to structure content logically and semantically.
-
-### Headings
-   `<h1>` to `<h6>` for different levels of headings.
-   ```html
-   <h1>This is a heading</h1>
-   ```
-### Paragraphs
-   `<p>` for paragraphs.
-   ```html
-   <p>This is a paragraph element.</p>
-   ```
-### Divisions
-   `<div>` for block-level elements.
-    
-```html
-<div>
-    <h1>This is a heading</h1>
-    <p>This is a paragraph element.</p>
-</div>
-```
-
-### Spans
-     The `<span>` element in HTML is an inline container used to group text or other inline elements. Unlike block-level elements (such as `<div>`), `<span>` does not inherently apply any style or layout to its contents. Instead, it is primarily used for applying styles or manipulating specific parts of the content with CSS or JavaScript.
-
-**When to Use `<span>`**
-
-- To apply styles to a part of the text within a larger block of text.
-- To target specific text with JavaScript.
-- To wrap text or inline elements for CSS styling without affecting the layout.
-
-     
-**Example**
-
-1.**Styling Text:**
-
-   ```html
-       <p>This is a <span style="color: red;">red</span> word in a paragraph.</p>
-   ```
-
-2.**Applying Classes and IDs:**
-
-   ```html
-   <p>Here is some <span class="highlight">highlighted</span> text.</p>
-
-   <style>
-       .highlight {
-           background-color: yellow;
-       }
-   </style>
-   ```
-
-3. **JavaScript Manipulation:**
-```html
-<p id="text">This is a <span id="word">word</span> in a paragraph.</p>
-<button onclick="changeText()">Change Text</button>
-
-<script>
-    function changeText() {
-        document.getElementById("word").innerText = "changed word";
-    }
-</script>
-```
-
-**Benefits of Using `<span>`**
-- **Flexibility**: Allows for styling and manipulation of inline content without disrupting the flow of the text.
-- **Target Specific Content**: Helps in applying styles or JavaScript functions to specific parts of the text.
-- **Minimal Impact on Layout**: Being an inline element, it does not introduce additional spacing or layout changes.
-
-**Differences from `<div>`**
-- `<div>` is a block-level element, meaning it takes up the full width available and starts on a new line.
-- `<span>` is an inline element, meaning it takes up only as much width as necessary and does not start on a new line.
-
-By using the `<span>` element effectively, you can enhance the presentation and interactivity of your web content.
-
-### Lists
-`<ul>` for unordered lists, `<ol>` for ordered lists, and `<li>` for list items.
-
-Definition lists with `<dl>`,` <dt>`, and `<dd>` for terms and descriptions.
-   ```html
-   <ul>
-        <li>Unordered list item 1</li>
-        <li>Unordered list item 2</li>
-    </ul>
-
-    <ol>
-        <li>Ordered list item 1</li>
-        <li>Ordered list item 2</li>
-    </ol>
-    <dl>
-        <dt>Term 1</dt>
-        <dd>Description 1</dd>
-        <dt>Term 2</dt>
-        <dd>Description 2</dd>
-    </dl>
-   ```
-**Nested Lists**
-You can also create nested lists by placing one list inside a list item of another list.
-```html
-<ul>
-    <li>Item 1
-        <ul>
-            <li>Subitem 1.1</li>
-            <li>Subitem 1.2</li>
-         </ul>
-    </li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-</ul>
-
-<ol>
-    <li>First item
-        <ol>
-            <li>Subitem 1.1</li>
-            <li>Subitem 1.2</li>
-        </ol>
-    </li>
-    <li>Second item</li>
-    <li>Third item</li>
-</ol>
-```
-## 2. **Embedding Media**
-   Incorporate images, videos, and audio files into your webpage.
-
-### Images
-   In HTML, the `<img>` element is used to embed images into web pages. This element is an empty element (meaning it does not have a closing tag) and requires specific attributes to function correctly.
-
-#### Basic Syntax
-The basic syntax of the `<img>` tag is as follows:
-
-```html 
-<img src="image.jpg" alt="Description of image">
-```
-
-#### Attributes
-- **`src` (source)**: Specifies the path to the image file. This can be a relative path, an absolute path, or a URL.
-- **`alt` (alternative text)**: Provides descriptive text for the image if it cannot be displayed. This is important for accessibility and SEO.
-
-**Example** 
-```html
-<img src="https://www.example.com/image.jpg" alt="Description of the image">
-```
-
-** Attributes**
-- **`width` and `height`**: Specify the dimensions of the image in pixels.
-
-  ```html
-  <img src="image.jpg" alt="Description" width="300" height="200">
-  ```
-
-- **`title`**: Provides additional information about the image, typically displayed as a tooltip when the user hovers over the image.
-
-  ```html
-  <img src="image.jpg" alt="Description" title="Tooltip text">
-  ```
-
-- **`loading`**: Specifies the loading behavior of the image. Values can be `lazy` (defer loading until the image is near the viewport) or `eager` (load immediately).
-
-  ```html
-  <img src="image.jpg" alt="Description" loading="lazy">
-  ```
-
-#### Responsive Images
-To create responsive images that adjust to different screen sizes, use the `srcset` and `sizes` attributes.
-
-- **`srcset`**: Defines a list of different images for different screen resolutions or sizes.
-- **`sizes`**: Defines the size of the image in different viewport conditions.
-
-```html
-<img src="small.jpg" 
-     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
-     sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px" 
-     alt="Description">
-```
-
-**Example**
-```html
-<img src="small.jpg" 
-     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
-     sizes="(max-width: 600px) 500px, 
-            (max-width: 1200px) 1000px, 
-            1500px" 
-     alt="Beautiful landscape">
-```
-
-- The browser will use `small.jpg` for devices with a screen width up to 500 pixels.
-- `medium.jpg` will be used for screen widths up to 1000 pixels.
-- `large.jpg` will be used for larger screens.
-
-#### Decorative Images
-For purely decorative images that do not convey important content, use the `role="presentation"` attribute to indicate that the image should be ignored by screen readers.
-
-```html
-<img src="decorative.jpg" alt="" role="presentation">
-```
-
-#### Best Practices
-- Always provide an `alt` attribute for accessibility.
-- Use descriptive `alt` text for images that convey important information.
-- Use `width` and `height` attributes to reserve space for the image and prevent layout shifts.
-- Optimize image file sizes to improve page load times.
-
-By understanding and utilizing the `<img>` element and its attributes, you can effectively incorporate images into your web pages, enhancing visual appeal and user experience.
-
-### Audio
-Certainly! Here's a guide to handling audio in HTML, ranging from basic to advanced techniques.
-
-#### Basic: Embedding Audio with `<audio>` Tag
-
-The simplest way to embed audio in an HTML document is by using the `<audio>` tag.
-
-**Example**
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Basic Audio Example</title>
-</head>
-<body>
-    <h1>Basic Audio</h1>
-    <audio controls>
-        <source src="path/to/your-audio-file.mp3" type="audio/mpeg">
-        <source src="path/to/your-audio-file.ogg" type="audio/ogg">
-        Your browser does not support the audio element.
-    </audio>
-</body>
-</html>
-```
-
-#### Intermediate: Adding Attributes and Customizing Controls
-
-You can customize the audio playback with various attributes and JavaScript for more control.
-
-**Attributes**
-- `controls`: Displays default audio controls (play, pause, volume).
-- `autoplay`: Automatically starts playing the audio when the page loads.
-- `loop`: Loops the audio after it finishes playing.
-- `muted`: Starts the audio in a muted state.
-- `preload`: Specifies if and how the author thinks the audio should be loaded (auto, metadata, none).
-
-**Example**
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Intermediate Audio Example</title>
-</head>
-<body>
-    <h1>Intermediate Audio</h1>
-    <audio id="myAudio" controls autoplay loop muted preload="auto">
-        <source src="path/to/your-audio-file.mp3" type="audio/mpeg">
-        <source src="path/to/your-audio-file.ogg" type="audio/ogg">
-        Your browser does not support the audio element.
-    </audio>
-</body>
-</html>
-```
-
-#### Advanced: Custom Audio Controls with JavaScript
-
-For a more advanced implementation, you can create custom audio controls using JavaScript.
-
-**Example**
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Advanced Audio Example</title>
-    <style>
-        .audio-controls button {
-            margin: 5px;
-            padding: 10px;
-            font-size: 16px;
-        }
-    </style>
-</head>
-<body>
-    <h1>Advanced Audio</h1>
-    <audio id="myAudio">
-        <source src="path/to/your-audio-file.mp3" type="audio/mpeg">
-        <source src="path/to/your-audio-file.ogg" type="audio/ogg">
-        Your browser does not support the audio element.
-    </audio>
-    <div class="audio-controls">
-        <button onclick="playAudio()">Play</button>
-        <button onclick="pauseAudio()">Pause</button>
-        <button onclick="stopAudio()">Stop</button>
-        <button onclick="muteAudio()">Mute</button>
-        <button onclick="unmuteAudio()">Unmute</button>
-    </div>
-    <script>
-        const audio = document.getElementById('myAudio');
-
-        function playAudio() {
-            audio.play();
-        }
-
-        function pauseAudio() {
-            audio.pause();
-        }
-
-        function stopAudio() {
-            audio.pause();
-            audio.currentTime = 0;
-        }
-
-        function muteAudio() {
-            audio.muted = true;
-        }
-
-        function unmuteAudio() {
-            audio.muted = false;
-        }
-    </script>
-</body>
-</html>
-```
-
-- **Basic**: Use the `<audio>` tag with the `controls` attribute.
-- **Intermediate**: Add more attributes for customization.
-- **Advanced**: Create custom audio controls with JavaScript.
-
-### Video
-To embed a video in HTML, you can use the `<video>` tag. Here's a basic example:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Video Example</title>
-</head>
-<body>
-
-    <h1>Embedding a Video in HTML</h1>
-    
-    <video width="640" height="360" controls>
-        <source src="path/to/your-video.mp4" type="video/mp4">
-        Your browser does not support the video tag.
-    </video>
-
-</body>
-</html>
-```
-
-- `<video width="640" height="360" controls>`: This is the main tag for embedding a video. The `width` and `height` attributes set the dimensions of the video player. The `controls` attribute adds play, pause, and other controls to the video.
-- `<source src="path/to/your-video.mp4" type="video/mp4">`: This specifies the path to the video file and its type. You can include multiple `<source>` tags for different video formats to ensure compatibility with various browsers.
-- `Your browser does not support the video tag.`: This fallback text will be displayed if the browser does not support the `<video>` element.
-
-**Attributes**
-
-- `autoplay`: Starts playing the video automatically when the page loads.
-- `loop`: Makes the video play in a loop.
-- `muted`: Mutes the audio of the video.
-- `poster="path/to/poster-image.jpg"`: Specifies an image to be shown while the video is downloading or until the user hits the play button.
-
-```html
-<video width="640" height="360" controls autoplay loop muted poster="path/to/poster-image.jpg">
-    <source src="path/to/your-video.mp4" type="video/mp4">
-    Your browser does not support the video tag.
-</video>
-```
-
-
-## 3. **Creating Links**
-Creating links in HTML is done using the `<a>` (anchor) element. Here's a basic structure of an HTML link:
-
-```html
-<a href="url">Link text</a>
-```
-
-- `href`: This attribute specifies the destination address (URL) where the link goes when clicked.
-- `Link text`: This is the visible part of the link that users click on.
-
-For example, to create a link to Google:
-
-```html
-<a href="https://www.google.com/">Go to Google</a>
-```
-
-When rendered in a browser, this would appear as a clickable link that, when clicked, takes the user to Google's homepage.
-
-####  Attributes
-
-- `target="_blank"`: Opens the linked document in a new browser window or tab.
-- `title="..."`: Provides a tooltip or additional information about the link when the user hovers over it.
-
-Here’s an example using these attributes:
-
-```html
-<a href="https://www.google.com/" target="_blank" title="Go to Google">Google</a>
-```
-
-#### Relative URLs
-
-You can also use relative URLs within your own website or project structure:
-
-```html
-<a href="/about">About Us</a>
-```
-
-In this case, clicking the link would take the user to a page named `about` within the current website or project.
-
-#### Anchors (Hash Links)
-
-To link to a specific section within the same page (known as anchors), you can use:
-
-```html
-<a href="#section-id">Link to Section</a>
-```
-
-Where `section-id` is the `id` attribute of the section you want to link to.
-
-#### Mailto Links
-
-For email links, use `mailto:` followed by the email address:
-
-```html
-<a href="mailto:example@example.com">Contact Us</a>
-```
-
-This creates a link that opens the user's default email client with the specified email address pre-filled.
-
-#### Image Links
-
-You can also make images clickable by wrapping an `<img>` tag inside an `<a>` tag:
-
-```html
-<a href="https://www.example.com">
-    <img src="image.jpg" alt="Description of the image">
-</a>
-```
-
-## 4. **Building Forms**
-Building forms in HTML involves using the `<form>` element along with various input elements to collect user input. Here’s a basic structure of an HTML form:
-
-```html
-<form action="submit-url" method="post">
-    <label for="username">Username:</label>
-    <input type="text" id="username" name="username" required>
-    
-    <label for="password">Password:</label>
-    <input type="password" id="password" name="password" required>
-    
-    <label for="email">Email:</label>
-    <input type="email" id="email" name="email" required>
-    
-    <input type="submit" value="Submit">
-</form>
-```
-
-- `<form>`: Defines the start of the form. The `action` attribute specifies where to send the form data when submitted (`submit-url` is a placeholder for the actual URL). The `method` attribute specifies how to send form data (`post` or `get`).
-
-- `<label>`: Provides a label for each input field. The `for` attribute should match the `id` of the corresponding input field to associate them.
-
-- `<input>`: Creates various types of input fields (`text`, `password`, `email`, etc.). The `type` attribute specifies the type of input. The `id` and `name` attributes are used for identification and are crucial for accessibility and form handling.
-
-- `required`: This attribute makes the input field mandatory. The form cannot be submitted unless all required fields are filled out.
-
-- `<input type="submit">`: This creates a submit button that users can click to submit the form data to the server.
-
-#### Additional Input Types:
-
-HTML supports various input types apart from `text`, `password`, and `email`. Some common ones include:
-
-- `number`: Allows only numeric input.
-- `date`: Allows selection of a date from a calendar.
-- `checkbox` and `radio`: For selecting multiple options.
-- `file`: Allows users to upload files.
-
-#### Textareas:
-
-For larger blocks of text, you can use `<textarea>`:
-
-```html
-<label for="message">Message:</label><br>
-<textarea id="message" name="message" rows="4" cols="50"></textarea>
-```
-
-#### Select Dropdowns:
-
-To create dropdown menus:
-
-```html
-<label for="country">Country:</label>
-<select id="country" name="country">
-    <option value="USA">United States</option>
-    <option value="UK">United Kingdom</option>
-    <option value="CA">Canada</option>
-</select>
-```
-
-##### Form Attributes
-
-- `action`: Specifies where to send the form data.
-- `method`: Specifies the HTTP method (`post` or `get`).
-- `target`: Specifies where to display the response after submitting the form (`_self`, `_blank`, etc.).
-- `enctype`: Specifies how form data should be encoded when submitting (`multipart/form-data` for file uploads).
-
-**Example with Full Structure**
-
-```html
-<form action="submit-form.php" method="post" enctype="multipart/form-data">
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="name" required><br><br>
-    
-    <label for="email">Email:</label>
-    <input type="email" id="email" name="email" required><br><br>
-    
-    <label for="message">Message:</label><br>
-    <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
-    
-    <label for="file">Upload File:</label>
-    <input type="file" id="file" name="file"><br><br>
-    
-    <input type="submit" value="Submit">
-</form>
-```
-
-This structure covers the basics of creating forms in HTML. Depending on your needs, you can customize further using CSS for styling and JavaScript for additional functionality. 
-
-## 5. **Using Tables**
-Using tables in HTML allows you to organize and display data in rows and columns. 
-
-```html
-<table>
-    <caption>Employee Information</caption>
-    <thead>
-        <tr>
-            <th>ID</th>
-            <th>Name</th>
-            <th>Position</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>1</td>
-            <td>John Doe</td>
-            <td>Manager</td>
-        </tr>
-        <tr>
-            <td>2</td>
-            <td>Jane Smith</td>
-            <td>Developer</td>
-        </tr>
-    </tbody>
-</table>
-```
-- `<table>`: Defines the start of the table.
-- `<caption>`: Provides a title or caption for the table.
-- `<thead>`: Defines the header section of the table.
-- `<tr>`: Defines a row within the table.
-- `<th>`: Defines a header cell within the header row (`<thead>`). Use `<th>` for headers and `<td>` for data cells.
-- `<tbody>`: Defines the body section of the table where actual data rows (`<tr>`) are placed.
-- `<td>`: Defines a standard data cell within a row (`<tr>`).
-
-**Example**
-
-```html
-<table>
-    <caption>Product Inventory</caption>
-    <thead>
-        <tr>
-            <th>Product ID</th>
-            <th>Product Name</th>
-            <th>Price</th>
-            <th>Stock</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>1</td>
-            <td>Keyboard</td>
-            <td>20000</td>
-            <td>50</td>
-        </tr>
-        <tr>
-            <td>2</td>
-            <td>Mouse</td>
-            <td>1500</td>
-            <td>75</td>
-        </tr>
-        <tr>
-            <td>3</td>
-            <td>Monitor</td>
-            <td>150000.00</td>
-            <td>30</td>
-        </tr>
-    </tbody>
-</table>
-```
-
-##### Spanning Columns and Rows
-
-You can span columns or rows using `colspan` and `rowspan` attributes:
-
-```html
-<table>
-    <caption>Sales Report</caption>
-    <thead>
-        <tr>
-            <th>Month</th>
-            <th>Sales(lakhs)</th>
-            <th>Region</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td rowspan="2">January</td>
-            <td>10</td>
-            <td>North</td>
-        </tr>
-        <tr>
-            <td>12 </td>
-            <td>South</td>
-        </tr>
-        <tr>
-            <td>February</td>
-            <td colspan="2">15 (total)</td>
-        </tr>
-    </tbody>
-</table>
-```
-
-#### Styling Tables
-
-You can use CSS to style tables, such as adjusting borders, background colors, and text alignment:
-
-```html
-<style>
-    table {
-        width: 100%;
-        border-collapse: collapse;
-    }
-    th, td {
-        border: 1px solid black;
-        padding: 8px;
-        text-align: left;
-    }
-    caption {
-        font-weight: bold;
-        font-size: 1.2em;
-        margin-bottom: 10px;
-    }
-</style>
-```
-
-#### Accessibility Considerations
-
-- Use `<caption>` to provide a summary or title for the table.
-- Use `<thead>`, `<tbody>`, and `<tfoot>` for semantic structure.
-- Ensure headers (`<th>`) are used correctly to assist screen readers and other accessibility tools.
-
-Tables in HTML are versatile and commonly used for displaying structured data. 
-
-## 6. **Metadata and Head Elements**
-In HTML, the `<head>` element contains metadata and other information about the HTML document, which is not displayed directly on the web page. Here's a breakdown of common elements you'll find inside the `<head>` section:
-
-#### Basic Structure of `<head>`
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Page Title</title>
-    <meta name="description" content="Description of the page">
-    <meta name="keywords" content="keyword1, keyword2, keyword3">
-    <link rel="stylesheet" href="styles.css">
-    <script src="script.js"></script>
-</head>
-<body>
-    <!-- Content goes here -->
-</body>
-</html>
-```
-
-1. `<meta charset="UTF-8">`: Specifies the character encoding for the document. UTF-8 is widely used and supports many languages and characters.
-
-2. `<title>`: Defines the title of the document, which appears in the browser's title bar or tab.
-
-3. `<meta name="description" content="...">`: Provides a concise explanation of the page's content. This is often used by search engines.
-
-4. `<meta name="keywords" content="...">`: Specifies a list of keywords relevant to the page's content. However, modern search engines mostly ignore this meta tag.
-
-5. `<link rel="stylesheet" href="styles.css">`: Links an external CSS file (`styles.css` in this example) to style the HTML document.
-
-6. `<script src="script.js"></script>`: Links an external JavaScript file (`script.js` in this example) to add interactivity or functionality to the HTML document.
-
-#### `<meta>` Tags
-
-- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Specifies how the browser should control the page's dimensions and scaling on different devices.
-
-- `<meta http-equiv="X-UA-Compatible" content="ie=edge">`: Ensures the page renders correctly in old versions of Internet Explorer.
-
-#### Other `<link>` Tags
-
-- `<link rel="icon" href="favicon.ico" type="image/x-icon">`: Specifies the favicon (icon displayed in the browser tab).
-
-- `<link rel="canonical" href="https://example.com/page">`: Helps prevent duplicate content issues by specifying the preferred URL for search engines.
-
-**Example**
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>My Website</title>
-    <meta name="description" content="Welcome to my website">
-    <meta name="keywords" content="HTML, CSS, JavaScript">
-    <meta name="author" content="John Doe">
-    <link rel="stylesheet" href="styles.css">
-    <link rel="icon" href="favicon.ico" type="image/x-icon">
-</head>
-<body>
-    <!-- Content of the webpage -->
-</body>
-</html>
-```
-
-- Use semantic `<meta>` tags for accessibility and SEO.
-- Ensure the `<title>` accurately reflects the content of the page.
-- Link external resources like stylesheets and scripts using `<link>` and `<script>` tags respectively.
-- Keep the `<head>` section organized and relevant to enhance the usability and search engine visibility of your webpage.
-
-The `<head>` section of an HTML document is crucial for defining how the document should be interpreted and presented by browsers and search engines.
\ No newline at end of file
diff --git a/web-dev/index.md b/web-dev/index.md
deleted file mode 100644
index f9f5258ae..000000000
--- a/web-dev/index.md
+++ /dev/null
@@ -1,278 +0,0 @@
----
-id: all-web-dev
-title: Introduction to Web Development
-sidebar_label: Introduction Web Dev
-sidebar_position: 1
----
-
-> Web development is the work involved in developing a Web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex Web-based Internet applications (Web apps), electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development. Among Web professionals, "Web development" usually refers to the main non-design aspects of building Web sites: writing markup and coding. Web development may use content management systems (CMS) to make content changes easier and available with basic technical skills.
-
-
-## Overview of Web Development
-
-Web development has been a growing industry since the commercialization of the web. It encompasses a wide range of topics and skills, including but not limited to creating and maintaining web applications, creating and maintaining websites, and creating and maintaining web services. Web development includes many types of web content creation. Some examples include hand coding web pages in a text editor, building a website in a program like Dreamweaver, and updating a blog via a blogging website. In recent years, content management systems like WordPress, Drupal, and Joomla have also become popular means of web development. These tools make it easy for anyone to create and edit their own website using a web-based interface.
-
-
-## Introduction to Web Development
-
-Web Development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). If you want to share your thoughts, ideas, and information with the world, you need a website. And if you want to create a website, you need to learn web development. Web development is the process of building and maintaining a website. It includes aspects such as web design, web publishing, web programming, and database management. While the terms **web developer** and **web designer** are often used synonymously, they do not mean the same thing. Technically, a web designer only designs website interfaces using HTML and CSS. A web developer may be involved in designing a website, but may also write web scripts in languages such as PHP and ASP. Additionally, a web developer may help maintain and update a database used by a dynamic website.
-
-## Web Development Tools
-
-Web development tools have come a long way in just a few short years. Thanks to the rapid advancement of technology, web development tools are no longer limited to text editors. Today, we have a wide range of tools available to help streamline the web development process. These tools are designed to help developers create, debug, and maintain websites and applications. They also help to ensure that the final product is both functional and visually appealing. Some of the most popular web development tools include:
-
-### Text Editors and IDEs
-
-Text editors and Integrated Development Environments (IDEs) are the most basic tools you need to get started with web development. They allow you to write and edit code, and they often come with features like syntax highlighting, code completion, and debugging tools. 
-
-**Some popular text editors and IDEs include:**
-
-- **Sublime Text:** A popular text editor that is lightweight and easy to use.
-- **Visual Studio Code:** A free, open-source text editor that is highly customizable and has a large library of extensions.
-- **Atom:** Another free, open-source text editor that is highly customizable and has a large library of extensions.
-- **WebStorm:** A powerful IDE for modern JavaScript development.
-- **Eclipse:** A popular IDE for Java development.
-- **NetBeans:** Another popular IDE for Java development.
-- **Xcode:** An IDE for macOS that is used to develop apps for iOS, macOS, watchOS, and tvOS.
-- **Android Studio:** An IDE for Android app development.
-- **IntelliJ IDEA:** A powerful IDE for Java development.
-- **PyCharm:** An IDE for Python development.
-- **Rider:** An IDE for .NET development.
-- **CLion:** An IDE for C and C++ development.
-- **PhpStorm:** An IDE for PHP development.
-- **RubyMine:** An IDE for Ruby development.
-- **AppCode:** An IDE for iOS/macOS app development.
-
-### Version Control Systems (VCS)
-
-Version Control Systems (VCS) are tools that help developers manage changes to their code over time. They allow developers to track changes to their code, collaborate with other developers, and revert to previous versions of their code if necessary. 
-
-**Some popular version control systems include:**
-
-- **Git:** A distributed version control system that is widely used in the web development community.
-- **GitHub:** A web-based platform that provides hosting for software development and version control using Git.
-- **Subversion:** A centralized version control system that is widely used in the web development community.
-- **Mercurial:** Another distributed version control system that is widely used in the web development community.
-- **Perforce:** A centralized version control system that is widely used in the web development community.
-- **Bitbucket:** A web-based platform that provides hosting for software development and version control using Git and Mercurial.
-
-### Package Managers 
-
-Package managers are tools that help developers manage the dependencies of their projects. They allow developers to install, update, and remove packages from their projects, and they often come with features like version management and dependency resolution.
-
-**Some popular package managers include:**
-
-- **npm:** A package manager for JavaScript that is widely used in the web development community.
-- **Yarn:** Another package manager for JavaScript that is widely used in the web development community.
-- **Bower:** A package manager for front-end web development that is widely used in the web development community.
-- **Composer:** A package manager for PHP that is widely used in the web development community.
-- **NuGet:** A package manager for .NET that is widely used in the web development community.
-- **RubyGems:** A package manager for Ruby that is widely used in the web development community.
-- **Pip:** A package manager for Python that is widely used in the web development community.
-- **CocoaPods:** A package manager for iOS/macOS app development that is widely used in the web development community.
-- **Carthage:** Another package manager for iOS/macOS app development that is widely used in the web development community.
-- **Gradle:** A build automation tool that is widely used in the web development community.
-- **Maven:** Another build automation tool that is widely used in the web development community.
-- **Ant:** A build automation tool that is widely used in the web development community.
-- **Gulp:** A build system that is widely used in the web development community.
-
-### Task Runners
-
-Task runners are tools that help developers automate repetitive tasks in their projects. They allow developers to run tasks like compiling code, minifying files, and running tests with a single command.
-
-**Some popular task runners include:**
-
-- **Grunt:** A JavaScript task runner that is widely used in the web development community.
-- **Gulp:** Another JavaScript task runner that is widely used in the web development community.
-- **Webpack:** A module bundler that is widely used in the web development community.
-- **Parcel:** Another module bundler that is widely used in the web development community.
-- **Rollup:** A module bundler that is widely used in the web development community.
-- **Brunch:** Another module bundler that is widely used in the web development community.
-- **Broccoli:** A build tool that is widely used in the web development community.
-- **NPM Scripts:** A build tool that is widely used in the web development community.
-- **Make:** A build tool that is widely used in the web development community.
-- **Ant:** A build tool that is widely used in the web development community.
-
-### Browser Developer Tools 
-
-Browser developer tools are tools that help developers debug and profile their web applications. They allow developers to inspect and modify the HTML, CSS, and JavaScript of their web applications, and they often come with features like network monitoring and performance analysis.
-
-**Some popular browser developer tools include:**
-
-- **Chrome DevTools:** A set of web developer tools built directly into the Google Chrome browser.
-- **Firefox Developer Tools:** A set of web developer tools built directly into the Mozilla Firefox browser.
-- **Safari Web Inspector:** A set of web developer tools built directly into the Apple Safari browser.
-- **Edge DevTools:** A set of web developer tools built directly into the Microsoft Edge browser.
-- **Opera Dragonfly:** A set of web developer tools built directly into the Opera browser.
-- **Internet Explorer F12 Developer Tools:** A set of web developer tools built directly into the Microsoft Internet Explorer browser.
-- **Brave DevTools:** A set of web developer tools built directly into the Brave browser.
-- **Vivaldi DevTools:** A set of web developer tools built directly into the Vivaldi browser.
-- **Tor Browser DevTools:** A set of web developer tools built directly into the Tor Browser.
-- **UC Browser DevTools:** A set of web developer tools built directly into the UC Browser.
-- **Samsung Internet DevTools:** A set of web developer tools built directly into the Samsung Internet browser.
-- **Puffin DevTools:** A set of web developer tools built directly into the Puffin browser.
-
-### Testing Tools 
-
-Testing tools are tools that help developers ensure that their web applications are functioning as expected. They allow developers to write and run tests for their web applications, and they often come with features like test coverage and continuous integration.
-
-**Some popular testing tools include:**
-
-- **Jest:** A JavaScript testing framework that is widely used in the web development community.
-- **Mocha:** Another JavaScript testing framework that is widely used in the web development community.
-- **Jasmine:** A behavior-driven development framework for testing JavaScript code that is widely used in the web development community.
-- **Karma:** A test runner for JavaScript that is widely used in the web development community.
-- **Protractor:** An end-to-end test framework for Angular and AngularJS applications that is widely used in the web development community.
-- **Cypress:** A test runner for JavaScript that is widely used in the web development community.
-- **Selenium:** A suite of tools for automating web browsers that is widely used in the web development community.
-- **Appium:** An open-source test automation framework for use with native, hybrid, and mobile web apps that is widely used in the web development community.
-- **TestCafe:** A test automation tool that is widely used in the web development community.
-- **Nightwatch.js:** A test automation tool that is widely used in the web development community.
-
-### Web Servers 
-
-Web servers are tools that help developers serve their web applications to the world. They allow developers to host their web applications on the internet, and they often come with features like load balancing and security.
-
-**Some popular web servers include:**
-
-- **Apache:** A popular open-source web server that is widely used in the web development community.
-- **Nginx:** Another popular open-source web server that is widely used in the web development community.
-- **IIS:** A popular web server that is widely used in the web development community.
-
-### Database Management Systems
-
-Database management systems are tools that help developers manage the data of their web applications. They allow developers to store, retrieve, and update data in their web applications, and they often come with features like data modeling and query optimization.
-
-**Some popular database management systems include:**
-
-- **MySQL:** A popular open-source relational database management system that is widely used in the web development community.
-- **PostgreSQL:** Another popular open-source relational database management system that is widely used in the web development community.
-- **SQLite:** A popular open-source relational database management system that is widely used in the web development community.
-- **SQL Server:** A popular relational database management system that is widely used in the web development community.
-- **Oracle Database:** A popular relational database management system that is widely used in the web development community.
-- **MongoDB:** A popular open-source NoSQL database management system that is widely used in the web development community.
-- **Cassandra:** Another popular open-source NoSQL database management system that is widely used in the web development community.
-- **Couchbase:** A popular open-source NoSQL database management system that is widely used in the web development community.
-- **CouchDB:** Another popular open-source NoSQL database management system that is widely used in the web development community.
-
-## Technologies Used in Web Development
-
-Web development are the technologies and tools that are used to create and maintain websites and web applications. They include everything from simple HTML and CSS to more advanced technologies like PHP, JavaScript, and Ruby on Rails. Web development technologies are constantly evolving, and new technologies are being developed all the time. 
-
-**We are categorizing the technologies used in web development into two main categories:**
-
-- **Front-End Technologies:** These are the technologies that are used to create the user interface of a website or web application. They include HTML, CSS, and JavaScript, as well as frameworks and libraries like React, Angular, and Vue.js.
-
-- **Back-End Technologies:** These are the technologies that are used to create the server-side of a website or web application. They include programming languages like PHP, Python, and Ruby, as well as frameworks and libraries like Node.js, Django, and Ruby on Rails.
-
-### Front-End Technologies
-
-Front-end technologies are the technologies that are used to create the user interface of a website or web application. They include HTML, CSS, and JavaScript, as well as frameworks and libraries like React, Angular, and Vue.js.
-
-```mermaid
-graph LR
-    HTML[HTML] --> CSS[CSS]
-    CSS --> JavaScript[JavaScript]
-    JavaScript --> DOM[DOM Manipulation]
-    JavaScript --> Events[Events and Event Handling]
-    JavaScript --> Async[Asynchronous JavaScript]
-    CSS --> Flexbox[Flexbox]
-    CSS --> Grid[Grid Layout]
-    HTML --> Accessibility[Accessibility]
-    CSS --> Responsive[Responsive Design]
-    JavaScript --> ES6[ES6+ Features]
-    JavaScript --> Fetch[Fetch API]
-    Fetch --> JSON[JSON Manipulation]
-    DOM --> Animation[Animation]
-    JavaScript --> Frameworks[Languages/Frameworks]
-    Frameworks --> React
-    Frameworks --> Vue
-    Frameworks --> Angular
-```
-
-### Back-End Technologies
-
-Back-end technologies are the technologies that are used to create the server-side of a website or web application. They include programming languages like PHP, Python, and Ruby, as well as frameworks and libraries like Node.js, Django, and Ruby on Rails.
-
-```mermaid
-graph TD;
-    A[Back-End Technologies] --> B(Node.js);
-    A --> C(Python);
-    A --> D(Ruby on Rails);
-    A --> E(PHP);
-    A --> F(Java);
-    B --> G(Express.js);
-    C --> H(Django);
-    C --> I(Flask);
-    E --> J(Laravel);
-    F --> K(Spring Boot);
-```
-
-### Front-End Path 
-
-```mermaid
-%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
-pie showData
-    title Front-End Learning Path 
-    "HTMl" : 10
-    "CSS" : 20
-    "JavaScript" : 30
-    "Responsive Web Design" : 10
-    "CSS Preprocessors" : 10
-    "Version Control" : 5
-    "Front-End Build Tools" : 5
-    "CSS Frameworks" : 5
-    "JavaScript Frameworks/Libraries" : 15
-    "Web Performance Optimization" : 15
-```
-
-### Back-End Path 
-
-```mermaid
-%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
-pie showData
-    title Back-End Learning Path
-    "Node.js" : 25
-    "Python (Django)" : 20
-    "Ruby on Rails" : 20
-    "PHP (Laravel)" : 20
-    "Database Management" : 10
-    "Authentication and Authorization" : 5
-    "Error Handling and Debugging" : 5
-    "Asynchronous Programming" : 5
-```
-
-## Popular Frameworks/Libraries
-
-### Front-End Frameworks/Libraries
-
-- **React:** A JavaScript library for building user interfaces.
-- **Angular:** A platform and framework for building single-page client applications using HTML and TypeScript.
-- **Vue.js:** A progressive JavaScript framework for building user interfaces.
-- **Svelte:** A new way to build web applications.
-- **Ember.js:** A framework for building ambitious web applications.
-- **Next.js:** A framework for building server-rendered React applications.
-- **Gatsby:** A static site generator for React.
-- **Nuxt.js:** A framework for building server-side rendered Vue.js applications.
-
-### Back-End Frameworks/Libraries
-
-- **Express.js:** A minimal and flexible Node.js web application framework.
-- **Django:** A high-level Python web framework that encourages rapid development and clean, pragmatic design.
-- **Flask:** A micro web framework written in Python.
-- **Laravel:** A PHP framework for web artisans.
-- **Koa:** A new web framework designed by the team behind Express.
-- **Hapi:** A rich framework for building applications and services.
-- **Sails.js:** A web framework that makes it easy to build custom, enterprise-grade Node.js apps.
-- **Nest.js:** A progressive Node.js framework for building efficient, reliable, and scalable server-side applications.
-- **AdonisJS:** A Node.js web framework with a focus on developer ergonomics and speed.
-- **Meteor:** An ultra-simple, database-everywhere, data-on-the-wire, pure-Javascript web framework.
-- **Feathers:** A web-framework for creating real-time applications.
-
-## Conclusion
-
-Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). It encompasses a wide range of topics and skills, including but not limited to creating and maintaining web applications, creating and maintaining websites, and creating and maintaining web services. Web development includes many types of web content creation. Some examples include hand coding web pages in a text editor, building a website in a program like Dreamweaver, and updating a blog via a blogging website. In recent years, content management systems like WordPress, Drupal, and Joomla have also become popular means of web development. These tools make it easy for anyone to create and edit their own website using a web-based interface.
-
-## Feedback
-
-<GiscusComponent />
\ No newline at end of file
diff --git a/web-dev/javascript/welcome-js.md b/web-dev/javascript/welcome-js.md
deleted file mode 100644
index 6c8baf4c1..000000000
--- a/web-dev/javascript/welcome-js.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-id: welcome-javascript
-title: Welcome to the JavaScript
-sidebar_label: Welcome To JavaScript
-sidebar_position: 1
-tags: [javascript]
----
-
-# Welcome to JavaScript
-
-JavaScript is a versatile and powerful programming language that is primarily used for creating interactive and dynamic web content. It is an essential tool for web developers, enabling them to build engaging user interfaces, interactive web applications, and dynamic websites. JavaScript is a client-side scripting language, meaning it runs on the user's browser, allowing for real-time interactions without the need to communicate with the server.
-
-### Use of JavaScript in Web Development
-
-JavaScript plays a crucial role in web development, offering several key features and functionalities:
-
-1. **Dynamic Content**: JavaScript allows developers to create dynamic and interactive content on web pages. This includes animations, pop-ups, form validations, and other interactive elements that enhance the user experience.
-2. **Event Handling**: JavaScript enables developers to respond to user actions like clicks, scrolls, and keyboard inputs. This allows for the creation of responsive and interactive web applications.
-3. **DOM Manipulation**: JavaScript can manipulate the Document Object Model (DOM) of a webpage, allowing developers to dynamically update and change the content, structure, and style of the page.
-4. **Asynchronous Programming**: JavaScript supports asynchronous programming, allowing developers to execute multiple tasks simultaneously without blocking the main thread. This is essential for handling tasks like fetching data from servers or processing user inputs.
-5. **Client-Side Validation**: JavaScript can perform client-side form validation, checking user inputs before submitting data to the server. This helps improve the user experience by providing instant feedback on input errors.
-6. **Integration with HTML and CSS**: JavaScript works seamlessly with HTML and CSS, allowing developers to create interactive and visually appealing web applications. While HTML provides the structure, CSS handles the styling, and JavaScript adds interactivity and dynamic behavior.
-7. **Frameworks and Libraries**: JavaScript has a rich ecosystem of frameworks and libraries like React, Angular, and Vue.js that simplify web development and provide pre-built components and functionalities.
-8. **Cross-Browser Compatibility**: JavaScript is supported by all major web browsers, ensuring that web applications built with JavaScript can run on different platforms and devices.
-9. **Server-Side Development**: With Node.js, JavaScript can also be used for server-side development, allowing developers to build full-stack applications using a single programming language.
-
-Overall, JavaScript is a versatile and powerful language that is essential for modern web development. Whether you are building a simple website or a complex web application, JavaScript provides the tools and capabilities needed to create engaging and interactive user experiences.
-
-### How to Get Started with JavaScript?
-
-To start using JavaScript, you need to include JavaScript code in your HTML documents. Here are the basic steps to get started:
-
-1. **Create a Basic HTML Document**:
-   Start with a simple text editor (like Notepad on Windows or TextEdit on Mac) or a more advanced code editor (like Visual Studio Code or Sublime Text).
-
-2. **Include JavaScript Code**:
-    Add JavaScript code to your HTML document using the `<script>` tag. You can include JavaScript code directly in the HTML file or link to an external JavaScript file.
-    
-    ```html title="index.html"
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-         <meta charset="UTF-8">
-         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-         <title>My First JavaScript Page</title>
-    </head>
-    <body>
-         <h1>Welcome to My JavaScript Page</h1>
-         <p>This is a paragraph of text on my first JavaScript page.</p>
-         <button onclick="alert('Hello, World!')">Click Me</button>
-         <script>
-              // JavaScript code goes here
-              console.log('Hello, JavaScript!');
-         </script>
-    </body>
-    </html>
-    ```
-
-3. **Run JavaScript Code**:
-
-    - **Inline JavaScript**: Write JavaScript code directly within the `<script>` tags in your HTML document.
-    - **External JavaScript**: Create a separate JavaScript file (e.g., `script.js`) and link it to your HTML document using the `<script>` tag.
-    - **Browser Console**: You can also run JavaScript code in the browser console for testing and debugging purposes.
-
-4. **Explore JavaScript Features**:
-
-    - **Variables and Data Types**: Learn about variables, data types, and operators in JavaScript.
-    - **Functions and Control Structures**: Understand how to define functions and use control structures like loops and conditionals.
-    - **DOM Manipulation**: Practice manipulating the DOM using JavaScript to create dynamic web content.
-    - **Event Handling**: Experiment with event listeners and handling user interactions in JavaScript.
-    - **Asynchronous Programming**: Explore asynchronous programming using callbacks, promises, and async/await.
-    - **Frameworks and Libraries**: Get familiar with popular JavaScript frameworks and libraries like React, Angular, and Vue.js.
-    - **Server-Side Development**: Learn about server-side development with Node.js and Express to build full-stack applications.
-    - **Debugging and Testing**: Use browser developer tools and testing frameworks to debug and test your JavaScript code.
-    - **Best Practices**: Follow JavaScript best practices and coding conventions to write clean, maintainable code.
-
-5. **Practice and Build Projects**:
-
-    - **Code Challenges**: Solve coding challenges on platforms like LeetCode, HackerRank, and CodeSignal to improve your JavaScript skills.
-    - **Mini Projects**: Build small projects like calculators, to-do lists, and weather apps to apply your JavaScript knowledge.
-    - **Web Applications**: Develop interactive web applications using JavaScript frameworks and libraries to create real-world projects.
-    - **Open Source Contributions**: Contribute to open-source projects on GitHub to collaborate with other developers and gain experience.
-    - **Portfolio Development**: Showcase your JavaScript projects and skills by creating a portfolio website or GitHub repository.
-    - **Continuous Learning**: Stay updated with the latest JavaScript trends, tools, and technologies to enhance your web development skills.
-
-By following these steps and practicing regularly, you can master JavaScript and become proficient in building dynamic and interactive web applications. JavaScript is a valuable skill for web developers, and learning it opens up a world of possibilities for creating innovative and engaging web experiences. Happy coding! 🚀
\ No newline at end of file