From 79a6d9d50f725ddb3ed87efaa68629ce0f706563 Mon Sep 17 00:00:00 2001
From: Varun Sharma <varun@pupilfirst.org>
Date: Tue, 8 Aug 2023 11:21:05 +0530
Subject: [PATCH 01/13] Added community guidelines to Introduction folder.
 Community -guideline-discord has a readme file which lays out the revised
 guidelines

---
 .../community-guideline-discord/README.md     | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 introduction/how-to-get-help/community-guideline-discord/README.md

diff --git a/introduction/how-to-get-help/community-guideline-discord/README.md b/introduction/how-to-get-help/community-guideline-discord/README.md
new file mode 100644
index 0000000..e337f55
--- /dev/null
+++ b/introduction/how-to-get-help/community-guideline-discord/README.md
@@ -0,0 +1,82 @@
+# Thriving in Our Programming Community
+
+
+As you embark on your journey in the landscape of programming, it's essential to recognize that you're not alone. The vast programming community is here to support and enrich your experience every step of the way. Your achievement lies in the interconnected community that shapes it. In this article, we'll delve into the significance of engaging actively with the programming community and how it can improve your coding skills to new heights.
+
+## The Power of Programming Communities
+
+Coding is an art which thrives on collaboration and shared knowledge. By immersing yourself in the programming community, you open doors to a world of collective expertise. Whether you're working on a complex algorithm or seeking guidance on best practices, the community is your go-to resource.
+
+
+The programming community facilitates:
+
+1. **Collaboration**: Bringing together diverse minds can lead to innovative solutions that an individual might not have considered.
+2. **Learning from Others**: Exploring different perspectives helps you grasp concepts faster and broadens your understanding.
+3. **Problem Solving**: Tackling coding challenges becomes smoother with the input and insights of fellow programmers.
+
+The sense of community has a huge impact on human advancement. Here is a [TedX](https://www.youtube.com/watch?v=7yNl-AsQRRw) session about how communities help each other create an exponential impact. An impact not just on your path, but in the path of other people who work along with you too. You are an important part of the community we seek to develop, as an important part of this future, we urge you to be inclusive and help us build this into an impactful ecosystem 
+
+
+## Discord: The Platform for Building Our Coding Community
+
+At the heart of our community lies Discord, a versatile and powerful platform that enhances your coding experience in numerous ways:
+
+1. **Real-time Communication**: Discord provides an interactive space for instant discussions, allowing you to seek help and share insights without delay.
+2. **Dedicated Channels**: Organized channels for specific topics, projects, and interests enable focused conversations and knowledge sharing.
+3. **Support**: A support pipeline of dedicated staff, who are available to answer and offer a helping hand for all your questions and queries related to the course.
+4. **Network**: A network for communication with all the students and alumni taking our courses from across the country. Opening gates to conversations related to your programming stories and problems/solutions you have faced during your learning experience and a network of other developers.
+
+## Open Source Platforms: Pillars of Collaboration
+
+Several open-source platforms serve as pillars of collaboration, enabling programmers to contribute, learn, and grow together:
+
+- **[GitHub](https://github.com)**: A hub for collaborative coding, version control, and open-source project hosting.
+- **[Stackoverflow](https://stackoverflow.com/)**: A platform that supports shared coding endeavors, fostering a strong developer community.
+
+## Embracing the Coding Community Philosophy
+
+Engaging in the programming community requires adopting a set of principles that promote mutual growth and respect:
+
+1. **Inclusivity and Respect**: Every voice matters; create an environment where all feel valued and heard.
+2. **Active Participation**: Engage in discussions, code reviews, and collaborative projects to contribute and learn.
+3. **Giving and Receiving**: Embrace mentorship and offer assistance to fellow programmers, fostering a culture of support.
+4. **Continuous Learning**: Develop a growth mindset by learning from peers and seeking constructive feedback.
+
+
+
+
+
+## Behavioral Rules and Standards
+
+To ensure a positive and productive experience within the programming community, we adhere to the following behavioral rules and standards:
+
+1. **Respectful Communication**: Treat all community members with courtesy and respect. Avoid offensive language, personal attacks, and discriminatory remarks.
+
+2. **Constructive Criticism**: Provide feedback in a constructive manner, focusing on the code and ideas rather than attacking individuals.
+
+3. **Collaborative Environment**: Embrace collaboration, share insights, and engage in healthy discussions to promote collective learning.
+
+4. **Plagiarism-Free Zone**: Give credit where it's due and refrain from submitting others' work as your own. Plagiarism undermines the spirit of learning and growth.
+
+5. **Inclusivity and Diversity**: Embrace diversity of backgrounds, experiences, and perspectives. Our community is strengthened by its rich tapestry of voices.
+
+6. **Helping Others**: Contribute positively by assisting fellow members, particularly those who are newer to coding. A helping hand can make a significant impact.
+
+7. **Adherence to Platform Guidelines**: Respect the guidelines of the platforms we use, such as GitHub and GitLab, when contributing to projects.
+
+## Resources for Cultivating Your Coding Community Involvement
+
+
+Remember community engagement is all about sharing, do not refrain from sharing whenever you come across something interesting, that might intrigue your fellow programmers.To start with consider exploring these resources that we would like to share with you: 
+
+
+The Mythical Man-Month Book by Fred Brooks : An interesting read about software development, presenting some ideas about second-system effect and advocacy of prototyping.
+
+[Some interesting project ideas for when you are done with our WD courses.](https://www.crio.do/projects/category/web-development-projects/)
+
+
+In your coding journey, remember that the programming community is your steadfast companion. Engage, collaborate, and share on the discord channel, and contribute to the community that will shape your path to success.
+
+[Community meme](https://img.devrant.com/devrant/rant/r_660997_XfjvN.jpg)
+
+

From 1d8a0989a2bdedbf60a960a26cdac78abc1828e9 Mon Sep 17 00:00:00 2001
From: Varun <varun@pupilfirst.org>
Date: Tue, 8 Aug 2023 14:22:47 +0530
Subject: [PATCH 02/13] Added community-guidelines-discord to the Introduction
 folder. This file name has a readme with the new guidelines.

---
 .../how-to-get-help/community-guideline-discord/README.md      | 3 +--
 wd101-scripts                                                  | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)
 create mode 160000 wd101-scripts

diff --git a/introduction/how-to-get-help/community-guideline-discord/README.md b/introduction/how-to-get-help/community-guideline-discord/README.md
index e337f55..65e4135 100644
--- a/introduction/how-to-get-help/community-guideline-discord/README.md
+++ b/introduction/how-to-get-help/community-guideline-discord/README.md
@@ -7,7 +7,6 @@ As you embark on your journey in the landscape of programming, it's essential to
 
 Coding is an art which thrives on collaboration and shared knowledge. By immersing yourself in the programming community, you open doors to a world of collective expertise. Whether you're working on a complex algorithm or seeking guidance on best practices, the community is your go-to resource.
 
-
 The programming community facilitates:
 
 1. **Collaboration**: Bringing together diverse minds can lead to innovative solutions that an individual might not have considered.
@@ -22,7 +21,7 @@ The sense of community has a huge impact on human advancement. Here is a [TedX](
 At the heart of our community lies Discord, a versatile and powerful platform that enhances your coding experience in numerous ways:
 
 1. **Real-time Communication**: Discord provides an interactive space for instant discussions, allowing you to seek help and share insights without delay.
-2. **Dedicated Channels**: Organized channels for specific topics, projects, and interests enable focused conversations and knowledge sharing.
+2. **Dedicated Channels**: Organized channels for specific topics, projects, and interests enable focused conversations & knowledge sharing.
 3. **Support**: A support pipeline of dedicated staff, who are available to answer and offer a helping hand for all your questions and queries related to the course.
 4. **Network**: A network for communication with all the students and alumni taking our courses from across the country. Opening gates to conversations related to your programming stories and problems/solutions you have faced during your learning experience and a network of other developers.
 
diff --git a/wd101-scripts b/wd101-scripts
new file mode 160000
index 0000000..54e1479
--- /dev/null
+++ b/wd101-scripts
@@ -0,0 +1 @@
+Subproject commit 54e1479fc6d4e68b1db0c1371f0f934bc7e3bddf

From 9de6d55f0a2fdd6dc908edef70558789854dd09a Mon Sep 17 00:00:00 2001
From: Varun <varun@pupilfirst.org>
Date: Tue, 8 Aug 2023 14:43:21 +0530
Subject: [PATCH 03/13] MInor changes in the guidelines

---
 .../README.md                                               | 6 +++---
 wd101-scripts                                               | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)
 rename introduction/how-to-get-help/{community-guideline-discord => revised-community-guideline}/README.md (92%)
 delete mode 160000 wd101-scripts

diff --git a/introduction/how-to-get-help/community-guideline-discord/README.md b/introduction/how-to-get-help/revised-community-guideline/README.md
similarity index 92%
rename from introduction/how-to-get-help/community-guideline-discord/README.md
rename to introduction/how-to-get-help/revised-community-guideline/README.md
index 65e4135..b801502 100644
--- a/introduction/how-to-get-help/community-guideline-discord/README.md
+++ b/introduction/how-to-get-help/revised-community-guideline/README.md
@@ -66,12 +66,12 @@ To ensure a positive and productive experience within the programming community,
 ## Resources for Cultivating Your Coding Community Involvement
 
 
-Remember community engagement is all about sharing, do not refrain from sharing whenever you come across something interesting, that might intrigue your fellow programmers.To start with consider exploring these resources that we would like to share with you: 
+Remember community engagement is all about sharing, do not refrain from sharing whenever you come across something interesting, that might intrigue your fellow programmers. To start with consider exploring these resources that we would like to share with you: 
 
 
-The Mythical Man-Month Book by Fred Brooks : An interesting read about software development, presenting some ideas about second-system effect and advocacy of prototyping.
+* The Mythical Man-Month Book by Fred Brooks : An interesting read about software development, presenting some ideas about second-system effect and advocacy of prototyping.
 
-[Some interesting project ideas for when you are done with our WD courses.](https://www.crio.do/projects/category/web-development-projects/)
+* [Some interesting project ideas for when you are done with our WD courses.](https://www.crio.do/projects/category/web-development-projects/)
 
 
 In your coding journey, remember that the programming community is your steadfast companion. Engage, collaborate, and share on the discord channel, and contribute to the community that will shape your path to success.
diff --git a/wd101-scripts b/wd101-scripts
deleted file mode 160000
index 54e1479..0000000
--- a/wd101-scripts
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 54e1479fc6d4e68b1db0c1371f0f934bc7e3bddf

From 0f9713a16ad6c85e5efbd84756c2f4cfe55597e8 Mon Sep 17 00:00:00 2001
From: Varun <varun@pupilfirst.org>
Date: Thu, 10 Aug 2023 10:15:15 +0530
Subject: [PATCH 04/13] Have added graduate attributes and made the suggested
 changes

---
 .../revised-community-guideline/README.md            | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/introduction/how-to-get-help/revised-community-guideline/README.md b/introduction/how-to-get-help/revised-community-guideline/README.md
index b801502..fd53ed9 100644
--- a/introduction/how-to-get-help/revised-community-guideline/README.md
+++ b/introduction/how-to-get-help/revised-community-guideline/README.md
@@ -1,7 +1,7 @@
 # Thriving in Our Programming Community
 
 
-As you embark on your journey in the landscape of programming, it's essential to recognize that you're not alone. The vast programming community is here to support and enrich your experience every step of the way. Your achievement lies in the interconnected community that shapes it. In this article, we'll delve into the significance of engaging actively with the programming community and how it can improve your coding skills to new heights.
+As you embark on your journey in the landscape of programming, it's essential to recognize that you're not alone. The vast programming community is here to support and enrich your experience every step of the way. Your achievement lies in the interconnected community that shapes it. In this lesson, we'll delve into the significance of engaging actively with the programming community and how it can improve your coding skills to new heights.
 
 ## The Power of Programming Communities
 
@@ -32,6 +32,7 @@ Several open-source platforms serve as pillars of collaboration, enabling progra
 - **[GitHub](https://github.com)**: A hub for collaborative coding, version control, and open-source project hosting.
 - **[Stackoverflow](https://stackoverflow.com/)**: A platform that supports shared coding endeavors, fostering a strong developer community.
 
+
 ## Embracing the Coding Community Philosophy
 
 Engaging in the programming community requires adopting a set of principles that promote mutual growth and respect:
@@ -41,7 +42,16 @@ Engaging in the programming community requires adopting a set of principles that
 3. **Giving and Receiving**: Embrace mentorship and offer assistance to fellow programmers, fostering a culture of support.
 4. **Continuous Learning**: Develop a growth mindset by learning from peers and seeking constructive feedback.
 
+## Graduate attribute for Web development professionals
+
+While going through your web developpment courses, students will exposed to a range of attributes that are of highly valued in the programming community across the globe. And are some important aspects for the web development professionals. It is important that you take note of these values and focus to build up on these skills as you approach your professional path in the area of web development. Use the discord community and intiate conversations about these topics with your fellow learners.
 
+1. **Comprehensive Web skills** : Develop mastery in HTML,CSS & JS, and other web technologies, enabling you to develop complex and responsive web solutions. 
+2. **Full-stack proficiency** : Acquire front-end and back-end expertise, integrating databases and APIs to build complete web applications.
+3. **Problem-Solving Mastery** : Analyze and practise complex technical issues, enhancing your ability to created optimized solutions. 
+4. **Effective Collaboration** : Utilize Git for version control and teamwork, communicating and contributing effectively within development groups.
+5.**User-Focused Design**: Learn about UI/UX and design principles and understant the importance of catering intelligent user interfaces. 
+6. **Security and Ethical Awareness** : Learn about security measures, prioritizing data privacy, and adhere to ethical standards while showcasing professionalism and accountability.
 
 
 

From 3b8743d8e87bcf2253eb54c279cdde2637db4a7e Mon Sep 17 00:00:00 2001
From: Varun <varun@pupilfirst.org>
Date: Thu, 10 Aug 2023 11:27:06 +0530
Subject: [PATCH 05/13] Adding a reference link to the graduate attributes

---
 .../how-to-get-help/revised-community-guideline/README.md      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/introduction/how-to-get-help/revised-community-guideline/README.md b/introduction/how-to-get-help/revised-community-guideline/README.md
index fd53ed9..7fe114b 100644
--- a/introduction/how-to-get-help/revised-community-guideline/README.md
+++ b/introduction/how-to-get-help/revised-community-guideline/README.md
@@ -44,7 +44,7 @@ Engaging in the programming community requires adopting a set of principles that
 
 ## Graduate attribute for Web development professionals
 
-While going through your web developpment courses, students will exposed to a range of attributes that are of highly valued in the programming community across the globe. And are some important aspects for the web development professionals. It is important that you take note of these values and focus to build up on these skills as you approach your professional path in the area of web development. Use the discord community and intiate conversations about these topics with your fellow learners.
+While going through your web developpment courses, students will be exposed to a range of attributes that are of highly valued in the programming community across the globe. And are some necessary aspects for the web development professionals. It is important that you take note of these values and focus to build up on these skills as you approach your professional path in the area of web development. Use the discord community and intiate conversations about these topics with your fellow learners.
 
 1. **Comprehensive Web skills** : Develop mastery in HTML,CSS & JS, and other web technologies, enabling you to develop complex and responsive web solutions. 
 2. **Full-stack proficiency** : Acquire front-end and back-end expertise, integrating databases and APIs to build complete web applications.
@@ -53,6 +53,7 @@ While going through your web developpment courses, students will exposed to a ra
 5.**User-Focused Design**: Learn about UI/UX and design principles and understant the importance of catering intelligent user interfaces. 
 6. **Security and Ethical Awareness** : Learn about security measures, prioritizing data privacy, and adhere to ethical standards while showcasing professionalism and accountability.
 
+_Here is a [reference link](https://www.ugc.gov.in/e-book/locf/mobile/index.html#p=7), go to page number 6 to read more about graduate attributes._
 
 
 ## Behavioral Rules and Standards

From ec56059d6d3cb7d5a2ca66218df1a871a5580ec6 Mon Sep 17 00:00:00 2001
From: vsharma2288 <varun@pupilfirst.org>
Date: Wed, 13 Sep 2023 12:45:22 +0530
Subject: [PATCH 06/13] Added L1 orignal content

---
 Welcome to the course/About Discord community.md               | 0
 Welcome to the course/About Puilfirst LMS.md                   | 0
 .../Adherence to the Code of Conduct of Pupilfirst School.md   | 0
 Welcome to the course/Build your student profile.md            | 0
 .../For Windows users: VSCode works well with WSL.md           | 0
 ...w to withdraw from LITE Advanced Web Development Program.md | 0
 .../Install Ubuntu using virtual machine software.md           | 0
 .../Installing Ubuntu on Windows, using WSL.md                 | 0
 Welcome to the course/Installing Visual Studio Code.md         | 0
 .../Installing the Prettier VSCode extension.md                | 0
 .../Introduction to command-line for beginners.md              | 0
 Welcome to the course/Welcome to WD 101!.md                    | 0
 Welcome to the course/Where should you keep your code?.md      | 0
 .../how-to-get-help/revised-community-guideline/README.md      | 3 +--
 14 files changed, 1 insertion(+), 2 deletions(-)
 create mode 100644 Welcome to the course/About Discord community.md
 create mode 100644 Welcome to the course/About Puilfirst LMS.md
 create mode 100644 Welcome to the course/Adherence to the Code of Conduct of Pupilfirst School.md
 create mode 100644 Welcome to the course/Build your student profile.md
 create mode 100644 Welcome to the course/For Windows users: VSCode works well with WSL.md
 create mode 100644 Welcome to the course/How to withdraw from LITE Advanced Web Development Program.md
 create mode 100644 Welcome to the course/Install Ubuntu using virtual machine software.md
 create mode 100644 Welcome to the course/Installing Ubuntu on Windows, using WSL.md
 create mode 100644 Welcome to the course/Installing Visual Studio Code.md
 create mode 100644 Welcome to the course/Installing the Prettier VSCode extension.md
 create mode 100644 Welcome to the course/Introduction to command-line for beginners.md
 create mode 100644 Welcome to the course/Welcome to WD 101!.md
 create mode 100644 Welcome to the course/Where should you keep your code?.md

diff --git a/Welcome to the course/About Discord community.md b/Welcome to the course/About Discord community.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/About Puilfirst LMS.md b/Welcome to the course/About Puilfirst LMS.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/Adherence to the Code of Conduct of Pupilfirst School.md b/Welcome to the course/Adherence to the Code of Conduct of Pupilfirst School.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/Build your student profile.md b/Welcome to the course/Build your student profile.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/For Windows users: VSCode works well with WSL.md b/Welcome to the course/For Windows users: VSCode works well with WSL.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/How to withdraw from LITE Advanced Web Development Program.md b/Welcome to the course/How to withdraw from LITE Advanced Web Development Program.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/Install Ubuntu using virtual machine software.md b/Welcome to the course/Install Ubuntu using virtual machine software.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/Installing Ubuntu on Windows, using WSL.md b/Welcome to the course/Installing Ubuntu on Windows, using WSL.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/Installing Visual Studio Code.md b/Welcome to the course/Installing Visual Studio Code.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/Installing the Prettier VSCode extension.md b/Welcome to the course/Installing the Prettier VSCode extension.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/Introduction to command-line for beginners.md b/Welcome to the course/Introduction to command-line for beginners.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/Welcome to WD 101!.md b/Welcome to the course/Welcome to WD 101!.md
new file mode 100644
index 0000000..e69de29
diff --git a/Welcome to the course/Where should you keep your code?.md b/Welcome to the course/Where should you keep your code?.md
new file mode 100644
index 0000000..e69de29
diff --git a/introduction/how-to-get-help/revised-community-guideline/README.md b/introduction/how-to-get-help/revised-community-guideline/README.md
index 7fe114b..c3ffffb 100644
--- a/introduction/how-to-get-help/revised-community-guideline/README.md
+++ b/introduction/how-to-get-help/revised-community-guideline/README.md
@@ -1,6 +1,5 @@
 # Thriving in Our Programming Community
 
-
 As you embark on your journey in the landscape of programming, it's essential to recognize that you're not alone. The vast programming community is here to support and enrich your experience every step of the way. Your achievement lies in the interconnected community that shapes it. In this lesson, we'll delve into the significance of engaging actively with the programming community and how it can improve your coding skills to new heights.
 
 ## The Power of Programming Communities
@@ -53,7 +52,7 @@ While going through your web developpment courses, students will be exposed to a
 5.**User-Focused Design**: Learn about UI/UX and design principles and understant the importance of catering intelligent user interfaces. 
 6. **Security and Ethical Awareness** : Learn about security measures, prioritizing data privacy, and adhere to ethical standards while showcasing professionalism and accountability.
 
-_Here is a [reference link](https://www.ugc.gov.in/e-book/locf/mobile/index.html#p=7), go to page number 6 to read more about graduate attributes._
+Here is a [reference link](https://www.ugc.gov.in/e-book/locf/mobile/index.html#p=7), go to page number 6 to read more about graduate attributes._
 
 
 ## Behavioral Rules and Standards

From 2511e1bf769df7650e06225b91c4a7d67236f07e Mon Sep 17 00:00:00 2001
From: vsharma2288 <varun@pupilfirst.org>
Date: Thu, 14 Sep 2023 17:53:49 +0530
Subject: [PATCH 07/13] Have added some suggestions to L2, and made edits in
 the L1 lesson. Will add move the rest of the files to archive and will
 standardise content and naming as per the LMS content

---
 Let's create our own websites!/Client & Server.md                 | 0
 ...Put your website on the internet, and get URL you can share.md | 0
 Let's create our own websites!/IP address and URL.md              | 0
 .../Looking inside website using \"Inspect Element\".md"          | 0
 .../Our first HTML page - in about 10 minutes.md                  | 0
 .../The <img> tag - let's show an image in our page.md            | 0
 Let's create our own websites!/The Internet.md                    | 0
 Let's create our own websites!/The World Wide Web (WWW).md        | 0
 Let's create our own websites!/Web Browsers.md                    | 0
 .../You can make and host your own website today!.md              | 0
 10 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 Let's create our own websites!/Client & Server.md
 create mode 100644 Let's create our own websites!/Deploy! Put your website on the internet, and get URL you can share.md
 create mode 100644 Let's create our own websites!/IP address and URL.md
 create mode 100644 "Let's create our own websites!/Looking inside website using \"Inspect Element\".md"
 create mode 100644 Let's create our own websites!/Our first HTML page - in about 10 minutes.md
 create mode 100644 Let's create our own websites!/The <img> tag - let's show an image in our page.md
 create mode 100644 Let's create our own websites!/The Internet.md
 create mode 100644 Let's create our own websites!/The World Wide Web (WWW).md
 create mode 100644 Let's create our own websites!/Web Browsers.md
 create mode 100644 Let's create our own websites!/You can make and host your own website today!.md

diff --git a/Let's create our own websites!/Client & Server.md b/Let's create our own websites!/Client & Server.md
new file mode 100644
index 0000000..e69de29
diff --git a/Let's create our own websites!/Deploy! Put your website on the internet, and get URL you can share.md b/Let's create our own websites!/Deploy! Put your website on the internet, and get URL you can share.md
new file mode 100644
index 0000000..e69de29
diff --git a/Let's create our own websites!/IP address and URL.md b/Let's create our own websites!/IP address and URL.md
new file mode 100644
index 0000000..e69de29
diff --git "a/Let's create our own websites!/Looking inside website using \"Inspect Element\".md" "b/Let's create our own websites!/Looking inside website using \"Inspect Element\".md"
new file mode 100644
index 0000000..e69de29
diff --git a/Let's create our own websites!/Our first HTML page - in about 10 minutes.md b/Let's create our own websites!/Our first HTML page - in about 10 minutes.md
new file mode 100644
index 0000000..e69de29
diff --git a/Let's create our own websites!/The <img> tag - let's show an image in our page.md b/Let's create our own websites!/The <img> tag - let's show an image in our page.md
new file mode 100644
index 0000000..e69de29
diff --git a/Let's create our own websites!/The Internet.md b/Let's create our own websites!/The Internet.md
new file mode 100644
index 0000000..e69de29
diff --git a/Let's create our own websites!/The World Wide Web (WWW).md b/Let's create our own websites!/The World Wide Web (WWW).md
new file mode 100644
index 0000000..e69de29
diff --git a/Let's create our own websites!/Web Browsers.md b/Let's create our own websites!/Web Browsers.md
new file mode 100644
index 0000000..e69de29
diff --git a/Let's create our own websites!/You can make and host your own website today!.md b/Let's create our own websites!/You can make and host your own website today!.md
new file mode 100644
index 0000000..e69de29

From 12e08222fcf9c9f25303aa0ba3d50476a5f4d113 Mon Sep 17 00:00:00 2001
From: vsharma2288 <varun@pupilfirst.org>
Date: Mon, 25 Sep 2023 16:28:43 +0530
Subject: [PATCH 08/13] Adding L3 & L4 content

---
 Basic Introduction to HTML & CSS/CSS and styling structure.md     | 0
 Basic Introduction to HTML & CSS/CSS classes and selectors.md     | 0
 Basic Introduction to HTML & CSS/CSS styling overrides.md         | 0
 Basic Introduction to HTML & CSS/HTML & Semantic.md               | 0
 Basic Introduction to HTML & CSS/Introduction to HTML Elements.md | 0
 Basic Introduction to HTML & CSS/Learn more aboust CSS.md         | 0
 Basic Introduction to HTML & CSS/Learn more about HTML.md         | 0
 Basic Introduction to HTML & CSS/Linking Pages.md                 | 0
 Basic Introduction to HTML & CSS/Styling HTML using CSS files.md  | 0
 Style Matters/Introduction to CSS Frameworks.md                   | 0
 Style Matters/Introduction to Tailwind CSS.md                     | 0
 Style Matters/Tailwind's relationship with JavaScript.md          | 0
 Style Matters/Using CSS Frameworks for styling.md                 | 0
 Style Matters/Working with Tailwind.md                            | 0
 14 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 Basic Introduction to HTML & CSS/CSS and styling structure.md
 create mode 100644 Basic Introduction to HTML & CSS/CSS classes and selectors.md
 create mode 100644 Basic Introduction to HTML & CSS/CSS styling overrides.md
 create mode 100644 Basic Introduction to HTML & CSS/HTML & Semantic.md
 create mode 100644 Basic Introduction to HTML & CSS/Introduction to HTML Elements.md
 create mode 100644 Basic Introduction to HTML & CSS/Learn more aboust CSS.md
 create mode 100644 Basic Introduction to HTML & CSS/Learn more about HTML.md
 create mode 100644 Basic Introduction to HTML & CSS/Linking Pages.md
 create mode 100644 Basic Introduction to HTML & CSS/Styling HTML using CSS files.md
 create mode 100644 Style Matters/Introduction to CSS Frameworks.md
 create mode 100644 Style Matters/Introduction to Tailwind CSS.md
 create mode 100644 Style Matters/Tailwind's relationship with JavaScript.md
 create mode 100644 Style Matters/Using CSS Frameworks for styling.md
 create mode 100644 Style Matters/Working with Tailwind.md

diff --git a/Basic Introduction to HTML & CSS/CSS and styling structure.md b/Basic Introduction to HTML & CSS/CSS and styling structure.md
new file mode 100644
index 0000000..e69de29
diff --git a/Basic Introduction to HTML & CSS/CSS classes and selectors.md b/Basic Introduction to HTML & CSS/CSS classes and selectors.md
new file mode 100644
index 0000000..e69de29
diff --git a/Basic Introduction to HTML & CSS/CSS styling overrides.md b/Basic Introduction to HTML & CSS/CSS styling overrides.md
new file mode 100644
index 0000000..e69de29
diff --git a/Basic Introduction to HTML & CSS/HTML & Semantic.md b/Basic Introduction to HTML & CSS/HTML & Semantic.md
new file mode 100644
index 0000000..e69de29
diff --git a/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md b/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md
new file mode 100644
index 0000000..e69de29
diff --git a/Basic Introduction to HTML & CSS/Learn more aboust CSS.md b/Basic Introduction to HTML & CSS/Learn more aboust CSS.md
new file mode 100644
index 0000000..e69de29
diff --git a/Basic Introduction to HTML & CSS/Learn more about HTML.md b/Basic Introduction to HTML & CSS/Learn more about HTML.md
new file mode 100644
index 0000000..e69de29
diff --git a/Basic Introduction to HTML & CSS/Linking Pages.md b/Basic Introduction to HTML & CSS/Linking Pages.md
new file mode 100644
index 0000000..e69de29
diff --git a/Basic Introduction to HTML & CSS/Styling HTML using CSS files.md b/Basic Introduction to HTML & CSS/Styling HTML using CSS files.md
new file mode 100644
index 0000000..e69de29
diff --git a/Style Matters/Introduction to CSS Frameworks.md b/Style Matters/Introduction to CSS Frameworks.md
new file mode 100644
index 0000000..e69de29
diff --git a/Style Matters/Introduction to Tailwind CSS.md b/Style Matters/Introduction to Tailwind CSS.md
new file mode 100644
index 0000000..e69de29
diff --git a/Style Matters/Tailwind's relationship with JavaScript.md b/Style Matters/Tailwind's relationship with JavaScript.md
new file mode 100644
index 0000000..e69de29
diff --git a/Style Matters/Using CSS Frameworks for styling.md b/Style Matters/Using CSS Frameworks for styling.md
new file mode 100644
index 0000000..e69de29
diff --git a/Style Matters/Working with Tailwind.md b/Style Matters/Working with Tailwind.md
new file mode 100644
index 0000000..e69de29

From 7ea054a8fddcc1a0feaed9719ca3b84860dfee1e Mon Sep 17 00:00:00 2001
From: vsharma2288 <varun@pupilfirst.org>
Date: Mon, 25 Sep 2023 16:39:51 +0530
Subject: [PATCH 09/13] Added content till L4

---
 .../CSS and styling structure.md              |  5 ++
 .../CSS classes and selectors.md              |  3 +
 .../Introduction to HTML Elements.md          | 44 ++++++++++
 .../Learn more aboust CSS.md                  | 15 ++++
 .../Learn more about HTML.md                  | 16 ++++
 .../Linking Pages.md                          | 39 +++++++++
 .../Styling HTML using CSS files.md           | 11 +++
 .../Client & Server.md                        | 26 ++++++
 ...the internet, and get URL you can share.md | 26 ++++++
 .../IP address and URL.md                     | 57 +++++++++++++
 ...side website using \"Inspect Element\".md" | 10 +++
 ...r first HTML page - in about 10 minutes.md | 39 +++++++++
 ...> tag - let's show an image in our page.md |  3 +
 .../The Internet.md                           | 12 +++
 .../The World Wide Web (WWW).md               | 31 +++++++
 .../Web Browsers.md                           | 61 ++++++++++++++
 ...n make and host your own website today!.md |  1 +
 .../Introduction to CSS Frameworks.md         | 45 ++++++++++
 Style Matters/Introduction to Tailwind CSS.md | 12 +++
 ...Tailwind's relationship with JavaScript.md |  2 +
 .../Using CSS Frameworks for styling.md       | 65 +++++++++++++++
 Style Matters/Working with Tailwind.md        |  7 ++
 .../About Discord community.md                | 82 +++++++++++++++++++
 Welcome to the course/About Puilfirst LMS.md  | 77 +++++++++++++++++
 ...he Code of Conduct of Pupilfirst School.md | 67 +++++++++++++++
 .../Build your student profile.md             |  6 ++
 ...ndows users: VSCode works well with WSL.md | 19 +++++
 ...m LITE Advanced Web Development Program.md | 12 +++
 ...l Ubuntu using virtual machine software.md |  8 ++
 ...Installing Ubuntu on Windows, using WSL.md | 24 ++++++
 .../Installing Visual Studio Code.md          | 19 +++++
 ...nstalling the Prettier VSCode extension.md |  1 +
 ...roduction to command-line for beginners.md | 27 ++++++
 Welcome to the course/Welcome to WD 101!.md   | 32 ++++++++
 .../Where should you keep your code?.md       | 54 ++++++++++++
 35 files changed, 958 insertions(+)

diff --git a/Basic Introduction to HTML & CSS/CSS and styling structure.md b/Basic Introduction to HTML & CSS/CSS and styling structure.md
index e69de29..7f5ec77 100644
--- a/Basic Introduction to HTML & CSS/CSS and styling structure.md	
+++ b/Basic Introduction to HTML & CSS/CSS and styling structure.md	
@@ -0,0 +1,5 @@
+In the past few lessons, you've learned what HTML is and how it is used to mark up documents. But those documents looked very basic in web browsers, didn't it? Headings look larger than regular text, paragraphs break onto a new line and have space between them. Links are coloured and underlined to distinguish them from the rest of the text, etc.
+
+The web would be a boring place if all websites looked like that. Using CSS, you can control exactly how HTML elements will look in the browser. Let's learn more about it.
+
+> Note: Always open VSCode from your terminal by using `code .`.
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/CSS classes and selectors.md b/Basic Introduction to HTML & CSS/CSS classes and selectors.md
index e69de29..183f901 100644
--- a/Basic Introduction to HTML & CSS/CSS classes and selectors.md	
+++ b/Basic Introduction to HTML & CSS/CSS classes and selectors.md	
@@ -0,0 +1,3 @@
+To style different elements in our HTML page, first we have to find a way to refer to those elements. In CSS, selectors are used to **target** the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, which helps us to precisely select which element to style. 
+
+Let's find out how to use these selectors.
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md b/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md
index e69de29..9efb177 100644
--- a/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md	
+++ b/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md	
@@ -0,0 +1,44 @@
+Every HTML document begins with an `<html>` tag. All other elements must be descendents of this element. The content of a web page can be wrapped in `<body>` tag.
+
+To include headings, HTML provides different header tags ranging from `<h1>` to `<h6>`.
+
+Normal text can be included in a web page using `<p>` element.
+
+We can use the `<table>` element to display data in tabular format. An optional header can be added to the table using `<thead>` element. Each row in the table is represented using `<tr>` element. To display data in a column in a table row, we need to use `<td>`, the table data cell element.
+
+```html
+<html>
+  <head>
+    <title>This is my web page</title>
+  </head>
+  <body>
+    <h1>This is a top level heading</h1>
+    <h2>This is a sub heading</h2>
+    <p>This is a normal text</p>
+
+    <table>
+      <thead>
+        <tr>
+          <th>id</th>
+          <th>fruit</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Apple</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Orange</td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>
+```
+
+MDN has an excellent reference on HTML elements at https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+
+MDN documentation on [Form input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+MDN documentation on [Table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/Learn more aboust CSS.md b/Basic Introduction to HTML & CSS/Learn more aboust CSS.md
index e69de29..caedf4a 100644
--- a/Basic Introduction to HTML & CSS/Learn more aboust CSS.md	
+++ b/Basic Introduction to HTML & CSS/Learn more aboust CSS.md	
@@ -0,0 +1,15 @@
+Are you interested to learn more about what you've seen in the previous lesson? Want to learn how to write custom CSS of your own?
+
+Unfortunately, we don't have the time to dig deeper into CSS in _this_ course. However, we think that the best way to learn CSS is by _experimenting_ with it.
+
+If you want a structured way to learn the traditional way of writing CSS, one of your best options is to follow along with [a tutorial like the one offered by w3schools.com](https://www.w3schools.com/css/css_intro.asp).
+
+## Some suggestions
+
+1. Follow along for the first few chapters, try things out in your web page.
+2. Don't feel pressured to complete such tutorials - CSS is a _vast_ topic.
+3. Skim through some of the options that CSS gives you - play around with some CSS properties.
+4. Look at websites that you like and try to build elements that look similar. This might seem difficult at first - use tutorials to learn more about specific properties that'll help you achieve the look that you want.
+
+Finally, don't rush. As we've mentioned before, CSS is complex topic - give yourself plenty of time to absorb all of the tools that it offers.
+
diff --git a/Basic Introduction to HTML & CSS/Learn more about HTML.md b/Basic Introduction to HTML & CSS/Learn more about HTML.md
index e69de29..ee9921f 100644
--- a/Basic Introduction to HTML & CSS/Learn more about HTML.md	
+++ b/Basic Introduction to HTML & CSS/Learn more about HTML.md	
@@ -0,0 +1,16 @@
+> This is optional reading. In this target we'll link you to external documentation that you can look at if you want to. Do that only if you are curious and have the time to spare. Otherwise you can safely skip this chapter.
+
+## Additional tutorials
+
+Here are a few more tutorials that can help you improve your understanding of HTML-based web page development.
+
+1. [Create and Deploy a Basic Static HTML Website](https://egghead.io/courses/create-and-deploy-a-basic-static-html-website-2960)
+2. [Learn HTML – Full Tutorial for Beginners](https://www.youtube.com/watch?v=kUMe1FH4CHE)
+
+## References
+
+Here are a few references for the HTML specification and related documentation. These links contain details about all the HTML elements and the places they can be used within our web pages.
+
+1. [W3C HTML Specification](https://html.spec.whatwg.org/multipage/)
+2. [Mozilla HTML Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML)
+3. [W3Schools HTML reference](https://www.w3schools.com/html/default.asp)
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/Linking Pages.md b/Basic Introduction to HTML & CSS/Linking Pages.md
index e69de29..afedf45 100644
--- a/Basic Introduction to HTML & CSS/Linking Pages.md	
+++ b/Basic Introduction to HTML & CSS/Linking Pages.md	
@@ -0,0 +1,39 @@
+In this lesson, we will learn about linking external pages and internal elements to our web pages.
+
+## Linking external pages and internal elements to our web pages
+
+The `a` HTML element (or *anchor* element), with its `href` attribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address.
+
+### External Links
+
+You can use the `a` (anchor) element to link to content outside your web page.
+
+The `a` element needs a destination web address specified using the `href` attribute. They also require anchor text which you click to navigate to that web address. Let's try out the below code on our HTML page.
+
+```html
+<a href="https://www.google.org">This links to Google</a>
+```
+
+When you open this HTML page on your browser, it will display the text `This links to Google` as a link you can click. And if we click on the link, it will take us to `https://www.google.com`.
+
+### Internal Links
+
+`a` (anchor) elements can also create internal links to jump to different sections within a webpage.
+
+To create an internal link, you assign a link's `href` attribute to a hash symbol `#` plus the value of the `id` attribute for the element that you want to link to, usually further down the page internally.
+
+You then need to add the same `id` attribute to the element you are linking to. An `id` is an attribute that uniquely identifies an element.
+
+Let us create an `a` tag and an `h2` tag on our HTML page. Next, let us update the `id` attribute of the `h2` same as the `href` attribute for the anchor tag.
+
+```html
+<a href="#projects-header">Projects</a>
+...
+<h2 id="projects-header">Projects</h2>
+```
+
+When you open this HTML page on your browser and click the Projects link, you will be taken to the section of the webpage with the **Projects** heading element.
+
+In this lesson, we learned about the HTML `a` (anchor) element, and how it is used to link internal elements and external webpages from our web page.
+
+You can learn more about the attributes that can be used with this element [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/Styling HTML using CSS files.md b/Basic Introduction to HTML & CSS/Styling HTML using CSS files.md
index e69de29..c14e7bf 100644
--- a/Basic Introduction to HTML & CSS/Styling HTML using CSS files.md	
+++ b/Basic Introduction to HTML & CSS/Styling HTML using CSS files.md	
@@ -0,0 +1,11 @@
+Keeping _Cascading Style Sheets_ (CSS) inside of HTML files isn't a common practice. Let's start by learning how we can keep our styles in their own `.css` files.
+
+** Video **
+
+To learn move about CSS, check out [w3schools.com, which has a very detailed tutorial](https://www.w3schools.com/css/default.asp). The number of different ways that you can style a web page is infinite. You're limited only by your imagination, so take your time and experiment!
+
+### Recap: How to include CSS in your webpage
+
+* **Inline:** There's no need to use _selectors_ here, directly include a `style` attribute in the element. For example: `<h1 style="color: red;">Heading</h1>`
+* **Embedded:** We can place CSS in the HTML file using a `<style> ... </style>` tag.
+* **External:** The CSS is kept in a seperate file, and we use a `link` tag, like so: `<link rel="stylesheet" href="path/to/my/custom.css">`. This is generally the preferred way of writing custom CSS.
\ No newline at end of file
diff --git a/Let's create our own websites!/Client & Server.md b/Let's create our own websites!/Client & Server.md
index e69de29..792cc57 100644
--- a/Let's create our own websites!/Client & Server.md	
+++ b/Let's create our own websites!/Client & Server.md	
@@ -0,0 +1,26 @@
+## Client & Server
+
+When you're browsing the Internet, you usually start by typing in an address into the browser's address bar, or by initiating a search.
+
+This means that information needs to flow from a machine (somewhere in the world) connected to the Internet, to your computer, which is also connected to the Internet.
+
+- The machine that requests some info (your PC, for example) is called **the client**.
+- The machine that stores the information is called **the server**.
+
+For example, if you want to know the current weather in your city today, you might start by opening up a web browser. Next, you type in the web address that provides weather. `https://weather.com`, for example, and press _Enter_. 
+
+In that moment your computer starts talking to another computer over Internet, called a server, usually thousands of miles away. And in milliseconds your computer asks that server for a web document (in our case, `weather.com`) and the server starts to talk back to your computer using a couple of different languages, the most important of which is HTML - **H**yper **T**ext **M**arkup **L**anguage - which is used to tell a web browser how a page looks.
+
+All of a web document's contents are transferred over the Internet using a set of rules called [HTTP (HyperText Transfer Protocol)](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol). Such rules are often called _protocols_, and there are a few different kinds used in the Internet. HTTP is the most common one.
+
+## Hops
+
+If you've watched the earlier video about how the Internet works, then you probably noticed that machines connected to the Internet don't talk to each other directly. Instead, _packets_ of information sent across the internet might _hop_ across many machines on their journey from the _client_ to the _server_. This makes the Internet resilient to failures. Even if one path from a client to a server fails, another can still be taken by the packets that are sent out.
+
+However, this introduces a big problem. Every machine that a packet _hops through_ gets to keep that _packet_ for a short time, during which it can be _read_.
+
+## Security
+
+You might have noticed that web addresses often start with `https://`. The `HTTPS` is the _Secure_ version of the HyperText Transfer Protocol, and is used by almost all websites and web applications - the protocol guarantees that only the client and the server can understand the information that is sent from one side to the other.
+
+Watch the following video to learn more about how the Internet is used to send information securely from you to the server and back.
\ No newline at end of file
diff --git a/Let's create our own websites!/Deploy! Put your website on the internet, and get URL you can share.md b/Let's create our own websites!/Deploy! Put your website on the internet, and get URL you can share.md
index e69de29..0c11ea6 100644
--- a/Let's create our own websites!/Deploy! Put your website on the internet, and get URL you can share.md	
+++ b/Let's create our own websites!/Deploy! Put your website on the internet, and get URL you can share.md	
@@ -0,0 +1,26 @@
+> **Important Reminder:** If this target appears as _Locked_, please check Level 1 lessons, and make sure that you have completed all _milestones_ (including answering quizzes) before you start working on the assignment here.
+>
+> Once you have moved up to Level 2, this lesson will include a _Complete_ tab that'll let you submit the link to your webpage for review.
+
+Once you make a website, it is no fun if it just sits in your computer and no one else can see it.
+
+So, in this tutorial we'll see how to upload it to the internet and get a URL through which anyone in the world can access it!
+
+Watch the tutorial, and then submit the URL to your webpage hosted on Glitch. We'll try to visit it, and check to make sure that it's accessible. Submitting a link here will let you move onto the next level.
+
+> **Glitch's UI has changed since this tutorial video was created!**
+\
+> If you're confused by any of the changes, we've left notes below the video that should point you in the right direction.
+
+
+## Changes to Glitch's UI
+
+Here are some instructions that should help you navigate Glitch's updated UI.
+
+### Previewing your Glitch project
+
+To preview the Glitch project, there'a _Preview_ button on the bottom pane. Clicking on it will present the same two options - to _Open preview pane_ or to _Preview in a new window_. 
+
+### Changing the name of the Glitch project
+
+To change the name of the Glitch project, you now need to click _Settings_ on the left pane, and click _Edit details on project page_. In the new page that pops up, click _Edit details_, change the name of the project and click the _Save_ button.
\ No newline at end of file
diff --git a/Let's create our own websites!/IP address and URL.md b/Let's create our own websites!/IP address and URL.md
index e69de29..4541d2f 100644
--- a/Let's create our own websites!/IP address and URL.md	
+++ b/Let's create our own websites!/IP address and URL.md	
@@ -0,0 +1,57 @@
+## IP Address
+
+Just as every house is assigned a specific and unique postal address, all computers connected to the Internet are also assigned an _IP Address_. IP stands for **I**nternet **P**rotocol.
+
+There are two kinds of IP addresses: _IPv4_ and _IPv6_.
+
+An example of an IPV4 address looks like a combination of 4 numbers: 
+
+```
+142.250.76.46
+```
+
+**IPv4** is the older version which allows for a maximum of around *4.3 billion* IP addresses. Each of those four numbers (segment) represents 8 _bits_ of information. That means one segment can count as high as 255.
+
+While 4.3 billion might sound like a lot of addresses, it isn't anywhere near enough to satisfy today's numbers of devices connected to the internet. To satisfy the need for _addressing_ the ever-growing number internet users and devices, a new **IPv6** version was created that can provide _many more_ addresses.
+
+An example of a _full_ IPv6 IP address would be:
+
+```
+2001:0db8:0000:0000:0000:ff00:0042:8329
+```
+
+Notice how the IPv6 address is much longer than IPv4? It greatly increases the available address space.
+
+How much more? 
+
+```
+340,282,366,920,938,463,463,374,607,431,768,211,456 addresses
+```
+
+That's approximately 3.4×10^38^. That's a lot - we're not going to need another version of IP addresses for a long while (if ever).
+
+> **Do you want to know what your IP address is?**
+>
+> The simplest way to discover your current IP address is by typing "What is my IP" in Google search. Google will display your IP address at the top of the search results page.
+
+## Domain Names
+
+Since IP addresses are unique, they are useful for computers to connect with each other, but we humans have a difficult time reading them, or remembering them.
+
+**Domains** associate an IP address like ```142.250.76.46``` with a string of text like `google.com`. Thanks to the [**D**omain **N**ame **S**ystem](https://www.cloudflare.com/learning/dns/what-is-dns/) (DNS), both are interchangeable. You can go to http://142.250.76.46 or http://google.com and end up on the exact same website.
+
+When you type in a domain name into your browser's address bar, your browser contacts the DNS to figure out its IP address, and then uses _that_ to actually contact the server that belongs to the domain.
+
+In short, a domain name is a unique, easy-to-remember address used to access websites.
+
+## What's a URL?
+
+**URL** stands for _Uniform Resource Locator_, it's simply a web address that uniquely identifies a specific resource in the computer network or the Internet.
+
+For example, the current page’s URL is `https://www.pupilfirst.school/targets/12078`, and it can be divided in 3 parts:
+
+- ```https://``` is the protocol.
+- ```www.pupilfirst.school``` is the domain.
+- ```/targets/12078``` is the path to a _resource_.
+
+Watch the video below to learn more about how networks talk to each other, and how the Internet works.
\ No newline at end of file
diff --git "a/Let's create our own websites!/Looking inside website using \"Inspect Element\".md" "b/Let's create our own websites!/Looking inside website using \"Inspect Element\".md"
index e69de29..89f23a7 100644
--- "a/Let's create our own websites!/Looking inside website using \"Inspect Element\".md"	
+++ "b/Let's create our own websites!/Looking inside website using \"Inspect Element\".md"	
@@ -0,0 +1,10 @@
+Every website you see on the internet is made with HTML tags just like the ones you learned before.
+
+And you can actually see their sources!
+
+
+There are a few ways to access Google Chrome Inspect Element:
+
+- Right-click anywhere on the webpage, and at the very bottom of the menu that pops up, you will see _Inspect_. Click that.
+- Click the hamburger menu (the icon with 3 stacked dots) on the far right of your Google Chrome toolbar, click *More Tools*, then select *Developer Tools*. Alternately, in the file menu, click *View > Developer > Developer Tools*.
+- Prefer keyboard shortcuts? Press `⌘+⌥+I` on macOS, or `F12` on Windows to open *Inspect Elements* without clicking anything.
\ No newline at end of file
diff --git a/Let's create our own websites!/Our first HTML page - in about 10 minutes.md b/Let's create our own websites!/Our first HTML page - in about 10 minutes.md
index e69de29..724d63c 100644
--- a/Let's create our own websites!/Our first HTML page - in about 10 minutes.md	
+++ b/Let's create our own websites!/Our first HTML page - in about 10 minutes.md	
@@ -0,0 +1,39 @@
+Watch and follow the steps below to make your first webpage!
+
+> Note: You will create the files being covered in this level, under your `wd101\html-css` folder. Thus, on your terminal, execute
+
+```bash
+## Go to html-css folder
+cd /home/NAME/wd101/html-css
+```
+
+Once you are inside `html-css` folder, open VSCode from the terminal by tying in `code .`.
+
+```bash
+code .
+```
+
+
+## Adding a second page, and linking to it
+
+Now that you've created _one_ page, let's quickly take a look at how to add a _second_ page, and then _link_ to it.
+
+To create a second page, let's create a new HTML file: `about.html` in the same folder as `index.html`. You can write whatever you like in this page.
+
+Now, to link to this page from `index.html`, add the following tag.
+
+```html
+<!-- Somewhere in the index.html file... -->
+<a href="about.html">About</a>
+```
+
+In the `about.html` file, you can add a link _back_ to the `index.html` file.
+
+```html
+<!-- Somewhere in the about.html file... -->
+<a href="index.html">Homepage</a>
+```
+
+Such links that allow you to navigate between webpages are called _hyperlinks_.
+
+Check out [documentation on W3Schools](https://www.w3schools.com/html/html_links.asp) to learn more.
\ No newline at end of file
diff --git a/Let's create our own websites!/The <img> tag - let's show an image in our page.md b/Let's create our own websites!/The <img> tag - let's show an image in our page.md
index e69de29..e72d1fa 100644
--- a/Let's create our own websites!/The <img> tag - let's show an image in our page.md	
+++ b/Let's create our own websites!/The <img> tag - let's show an image in our page.md	
@@ -0,0 +1,3 @@
+All text and no pictures make any website boring :)
+
+So, let's add an image to our page.
\ No newline at end of file
diff --git a/Let's create our own websites!/The Internet.md b/Let's create our own websites!/The Internet.md
index e69de29..129e96e 100644
--- a/Let's create our own websites!/The Internet.md	
+++ b/Let's create our own websites!/The Internet.md	
@@ -0,0 +1,12 @@
+<!---
+Suggestion: Can we add this vieo < https://www.youtube.com/watch?v=TNQsmPf24go > along with the rest of the content and the existing video(https://youtu.be/Dxcc6ycZ73M) 
+--->
+
+
+
+## What is the Internet?
+
+The origin of the Internet dates back to the 1960s, with it starting out as a way to connect computers across the United States. Today, billions of devices are **interconnected** over the Internet.
+
+In the following video, Vint Cerf, one of the _fathers of the internet_ explains the history of the net and how no one person or organization is really in charge of it.
+
diff --git a/Let's create our own websites!/The World Wide Web (WWW).md b/Let's create our own websites!/The World Wide Web (WWW).md
index e69de29..c4fcd3f 100644
--- a/Let's create our own websites!/The World Wide Web (WWW).md	
+++ b/Let's create our own websites!/The World Wide Web (WWW).md	
@@ -0,0 +1,31 @@
+## The Web
+
+The World Wide Web is commonly shortened to _WWW_, or simply called _the Web_. 
+
+A broader definition comes from the organization that Web inventor Tim Berners-Lee helped found, the [World Wide Web Consortium (W3C)](https://www.w3.org/).
+
+> The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge.
+
+In simple terms, the World Wide Web is a network of public webpages connected to one another so that information is exchanged between computers on the Internet.
+
+> **Note:** The _Internet_ and the _Web_ are different things: The _Web_ uses the _Internet_ to pass through information.
+
+## Webpage
+
+A _webpage_ is a document on the World Wide Web, created using HTML, that can be viewed in a web browser.
+
+To access a webpage you can either:
+
+- Type its URL, like `http://google.com` in your Web browser...
+- ...or click on a link, like [this one](http://google.com).
+
+> **What's a website?**\
+> A _webpage_ is a single HTML document. A collection of such documents, usually linked to each other under the same domain is called a _website_.
+
+## Web browser
+
+A web browser, or simply _browser_ is an application used to access websites. 
+
+Popular web browsers include Microsoft Edge, Google Chrome and Mozilla Firefox.
+
+> In this course, we're using _Google Chrome_ in all of our video demonstrations. You can [install Google Chrome by visiting this link](https://www.google.com/intl/en_in/chrome/).
\ No newline at end of file
diff --git a/Let's create our own websites!/Web Browsers.md b/Let's create our own websites!/Web Browsers.md
index e69de29..210cf2b 100644
--- a/Let's create our own websites!/Web Browsers.md	
+++ b/Let's create our own websites!/Web Browsers.md	
@@ -0,0 +1,61 @@
+<!---
+Suggestion: Can we add this vieo < https://www.youtube.com/watch?v=fyOSkkQK14w > OR this < https://www.youtube.com/watch?v=DuSURHrZG6I > to the lesson
+--->
+
+## IP Address
+
+Just as every house is assigned a specific and unique postal address, all computers connected to the Internet are also assigned an _IP Address_. IP stands for **I**nternet **P**rotocol.
+
+There are two kinds of IP addresses: _IPv4_ and _IPv6_.
+
+An example of an IPV4 address looks like a combination of 4 numbers: 
+
+```
+142.250.76.46
+```
+
+**IPv4** is the older version which allows for a maximum of around *4.3 billion* IP addresses. Each of those four numbers (segment) represents 8 _bits_ of information. That means one segment can count as high as 255.
+
+While 4.3 billion might sound like a lot of addresses, it isn't anywhere near enough to satisfy today's numbers of devices connected to the internet. To satisfy the need for _addressing_ the ever-growing number internet users and devices, a new **IPv6** version was created that can provide _many more_ addresses.
+
+An example of a _full_ IPv6 IP address would be:
+
+```
+2001:0db8:0000:0000:0000:ff00:0042:8329
+```
+
+Notice how the IPv6 address is much longer than IPv4? It greatly increases the available address space.
+
+How much more? 
+
+```
+340,282,366,920,938,463,463,374,607,431,768,211,456 addresses
+```
+
+That's approximately 3.4×10^38^. That's a lot - we're not going to need another version of IP addresses for a long while (if ever).
+
+> **Do you want to know what your IP address is?**
+>
+> The simplest way to discover your current IP address is by typing "What is my IP" in Google search. Google will display your IP address at the top of the search results page.
+
+## Domain Names
+
+Since IP addresses are unique, they are useful for computers to connect with each other, but we humans have a difficult time reading them, or remembering them.
+
+**Domains** associate an IP address like ```142.250.76.46``` with a string of text like `google.com`. Thanks to the [**D**omain **N**ame **S**ystem](https://www.cloudflare.com/learning/dns/what-is-dns/) (DNS), both are interchangeable. You can go to http://142.250.76.46 or http://google.com and end up on the exact same website.
+
+When you type in a domain name into your browser's address bar, your browser contacts the DNS to figure out its IP address, and then uses _that_ to actually contact the server that belongs to the domain.
+
+In short, a domain name is a unique, easy-to-remember address used to access websites.
+
+## What's a URL?
+
+**URL** stands for _Uniform Resource Locator_, it's simply a web address that uniquely identifies a specific resource in the computer network or the Internet.
+
+For example, the current page’s URL is `https://www.pupilfirst.school/targets/12078`, and it can be divided in 3 parts:
+
+- ```https://``` is the protocol.
+- ```www.pupilfirst.school``` is the domain.
+- ```/targets/12078``` is the path to a _resource_.
+
+Watch the video below to learn more about how networks talk to each other, and how the Internet works.
\ No newline at end of file
diff --git a/Let's create our own websites!/You can make and host your own website today!.md b/Let's create our own websites!/You can make and host your own website today!.md
index e69de29..c0ac9d9 100644
--- a/Let's create our own websites!/You can make and host your own website today!.md	
+++ b/Let's create our own websites!/You can make and host your own website today!.md	
@@ -0,0 +1 @@
+Before we get started with programming in earnest, let's have some fun and create our own websites!
\ No newline at end of file
diff --git a/Style Matters/Introduction to CSS Frameworks.md b/Style Matters/Introduction to CSS Frameworks.md
index e69de29..80f3ca5 100644
--- a/Style Matters/Introduction to CSS Frameworks.md	
+++ b/Style Matters/Introduction to CSS Frameworks.md	
@@ -0,0 +1,45 @@
+Previously, we've learnt how to add classes to a CSS file and use them in the HTML file. It's always recommended to use external CSS files to avoid repetition in our code.
+
+But at one point you would find that writing CSS rules for a large scale project takes a lot of time.
+
+So instead of doing that, we're going to jump ahead a bit, and show you what a lot of professional developers do these days - which is to use CSS frameworks that makes styling much simpler.
+
+
+### What is a CSS Framework?
+In essence, a CSS framework consists of several CSS style sheets ready for use by web developers and designers like you and me. These style sheets helps us to quickly add web design functions to our HTML, such as: setting colors, layout, fonts, navbars, etc.
+
+With a CSS framework, you only have to code the HTML with accurate classes, structure, and IDs to set up a web page. The framework already has built-in classes for common web elements like – buttons, cards, slider, navigation bar, column-based layouts, and so on.
+
+### Now, what are the advantages of using CSS Framework?
+1. First, you can quickly create a user-friendly and visually appealing User Interface.
+2. CSS frameworks make it simple to create websites that are compatible with multiple browsers and browser versions.
+3. Teams with multiple developers, especially larger ones, can really appreciate the standards that a CSS framework brings to the table.
+
+### Popular CSS frameworks:
+
+#### Bootstrap
+I can’t think of a conversation about CSS frameworks that wouldn’t include Bootstrap. Twitter introduced the framework in 2011 to make responsive web design easily accessible to developers. Here are some reasons why you should consider using it in your projects.
+1. **Most popular front-end framework:** Bootstrap is among the most popular open source projects in existence.
+2. **Massive Ecosystem:** Among front-end frameworks, Bootstrap’s ecosystem is unmatched. It offers, out of the box, a vast library of layouts, themes, UI elements, panels, modals, buttons, alerts, cards, etc., that devs and designers can choose from and implement. 
+3. Bootstrap is easily customizable.
+
+Bootstrap website Link: http://getbootstrap.com/
+
+#### Tailwind CSS
+**“Most CSS frameworks do too much”** — Tailwind‘s motto clearly explains why it’s a lightweight framework that offers freedom to developers. It doesn’t come with a specific set of design elements, but rather allows you to implement your own unique style faster.
+**Reasons to Use Tailwind**
+1. **Highly Customizable:** Tailwind CSS comes with a default configuration, but it allows us to easily customize the - styling, themes, spacing, palettes, etc.
+2. It comes with commonly used *Utility Patterns* to deal with standard requirements: specifying and organizing classes, cascading classes, etc.
+3. Even though Tailwind doesn’t include any pre-designed components, it allows you to create your own custom components that you can reuse throughout your projects. 
+
+Tailwind website Link: https://tailwindcss.com/
+
+**To conclude**
+
+There are a lot other CSS frameworks available in the market today such as: Foundation, Bulma, Miligram, Materialize etc. Some of them offer pre-made components, some only provide utility classes and don’t offer styling. In one way or another, they all help us to boost our productivity.
+
+So, choosing a framework with a high level of community support, such as Bootstrap or Foundation, is a safe choice since the large community supports the project.
+
+But on the other hand, since many frameworks become bloated over time, newer and better options start emerging. Tailwind is one of them as is focuses on improving coding productivity while maintaining a small size and a very specific set of features.
+
+So, in the next lesson we will find out, how to use a CSS framework for styling.
\ No newline at end of file
diff --git a/Style Matters/Introduction to Tailwind CSS.md b/Style Matters/Introduction to Tailwind CSS.md
index e69de29..e333e80 100644
--- a/Style Matters/Introduction to Tailwind CSS.md	
+++ b/Style Matters/Introduction to Tailwind CSS.md	
@@ -0,0 +1,12 @@
+In this course, we're not going into detail about everything that you can do with CSS.
+
+CSS is a very large and complex topic that deserves a separate course of its own.
+
+So, instead of learning more about _traditional_ CSS, we're going to quickly jump over to using a _framework_. Developers often use _frameworks_ or _libraries_ to make their job easier, and **Tailwind** is one such CSS framework.
+
+
+** Video **
+
+As we've mentioned in the video, one of things that a CSS library like Tailwind does is to _reset_ the base styles of all elements on the page to a safe default.
+
+If you would like to learn more about why such a CSS reset is required, we recommend reading the article [Reboot, Resets, and Reasoning](https://css-tricks.com/reboot-resets-reasoning/), authored by Chris Coyier.
\ No newline at end of file
diff --git a/Style Matters/Tailwind's relationship with JavaScript.md b/Style Matters/Tailwind's relationship with JavaScript.md
index e69de29..a59db71 100644
--- a/Style Matters/Tailwind's relationship with JavaScript.md	
+++ b/Style Matters/Tailwind's relationship with JavaScript.md	
@@ -0,0 +1,2 @@
+The usage of modern web development tools is deeply tied to the JavaScript ecosystem. Learn how properly using a CSS framework like Tailwind is also dependent on knowing your way around JS.
+
diff --git a/Style Matters/Using CSS Frameworks for styling.md b/Style Matters/Using CSS Frameworks for styling.md
index e69de29..4d5f89c 100644
--- a/Style Matters/Using CSS Frameworks for styling.md	
+++ b/Style Matters/Using CSS Frameworks for styling.md	
@@ -0,0 +1,65 @@
+# Text
+
+Previously, we've learned 
+- *What is a CSS framework?* 
+- *What are the advantages of using one?*
+- And *what are the popular frameworks available in the market today?*.
+
+We've also talked about how a CSS framework can boost our productivity, with it's ready-to-use UI components and utility classes.
+
+So, in this lesson, let's find out how to use a CSS framework.
+
+## How to add a CSS framework to any HTML project?
+There are number of different ways to use a CSS framework in a web application. In this lesson, we will focus only on the most convenient ones.
+
+### Method 1: Using a Content Delivery Network or CDN
+
+A CDN is a group of interconnected computers, that are distributed around the globe. Their goal is to provide your data or file or content from the nearest possible location, from where you are sitting right now. Whether we know it or not, every one of us interact with CDNs on a daily basis, when reading articles on news sites, shopping online or watching YouTube videos.
+
+All modern CSS frameworks have uploaded their stable releases to these CDNs. You only need to include their compiled CSS and JS file to your HTML webpage.
+
+#### For Bootstrap
+As we saw in the previous lesson, Bootstrap is one of the most popular CSS, HTML, and JavaScript framework that exists today.
+
+Using the Bootstrap CDN is a great way to deliver the content to your users, quickly and efficiently, based on their geographic location. To link Bootstrap in HTML you can use this method:
+
+Just copy this stylesheet `link` tag to the `<head>` of your HTML file.
+
+```html
+<!-- CSS only -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
+```
+
+##### One advantage of using the Bootstrap CDN is:
+Many users already have downloaded Bootstrap from CDN when visiting another site. As a result, it will be loaded from the cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
+
+#### For Tailwind CSS
+Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. 
+
+Tailwind comes with a default configuration, but it allows us to easily customize the - styling, themes, spacing, palettes, etc.
+
+To add Tailwind to your application, just copy this stylesheet `link` tag to the `<head>` of your HTML file.
+
+```html
+<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" crossorigin="anonymous">
+```
+
+
+### Method 2: Downloading the files locally
+Another way of importing these CSS frameworks to HTML is to directly download the files locally to your HTML project folder. Then you can simply link them as normal external stylesheet and JS file.
+
+#### For Bootstrap
+The files can be downloaded from their official website:
+https://getbootstrap.com/docs/5.2/getting-started/download/#compiled-css-and-js
+
+Keep the `bootstrap.min.css` file in your project folder and link it inside the `head` of your HTML.
+
+````
+<link href="bootstrap.min.css" rel="stylesheet">
+````
+
+Once you integrate Bootstrap or TailwindCSS with HTML, you can simply use their respective classes and style your HTML files in the desired manner. 
+
+You can refer to the official documentation of the CSS framework that you are going to use in your project, for more information on the different components and utility classes available.
+
+That's it for this lesson, see you in the next one.
diff --git a/Style Matters/Working with Tailwind.md b/Style Matters/Working with Tailwind.md
index e69de29..a36f1bb 100644
--- a/Style Matters/Working with Tailwind.md	
+++ b/Style Matters/Working with Tailwind.md	
@@ -0,0 +1,7 @@
+Here's a whirlwind tour of how we can use some of Tailwind's features to make a web page look better. This video will also tell you where to go to [learn more about Tailwind](https://tailwindcss.com/docs).
+
+** Video **
+
+It's important to note that Tailwind isn't the only option when it comes to choosing a CSS framework. In the video, we've mentioned [Bootstrap](https://getbootstrap.com) and [Materialize](https://materializecss.com), but there are [more good options](https://dev.to/theme_selection/best-css-frameworks-in-2020-1jjh).
+
+> **New VS Code trick - Multiple cursors:** In the above video, you can see how we can employ multiple cursors to quickly add the same text to multiple lines. Check out [the official documentation regarding multiple cursors](https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor) to learn more about how this feature can be used.
\ No newline at end of file
diff --git a/Welcome to the course/About Discord community.md b/Welcome to the course/About Discord community.md
index e69de29..3a5d315 100644
--- a/Welcome to the course/About Discord community.md	
+++ b/Welcome to the course/About Discord community.md	
@@ -0,0 +1,82 @@
+# Thriving in Our Programming Community
+
+As you embark on your journey in the landscape of programming, it's essential to recognise that you're not alone. The vast programming community is here to support and enrich your experience every step of the way. Your achievement lies in the interconnected community that shapes it. In this lesson, we'll delve into the significance of engaging actively with the programming community and how it can improve your coding skills to new heights.
+
+## The Power of Programming Communities
+
+Coding is an art which thrives on collaboration and shared knowledge. By immersing yourself in the programming community, you open doors to a world of collective expertise. Whether you're working on a complex algorithm or seeking guidance on best practices, the community is your go-to resource.
+
+The programming community facilitates:
+
+1. **Collaboration**: Bringing together diverse minds can lead to innovative solutions that an individual might not have considered.
+2. **Learning from Others**: Exploring different perspectives helps you grasp concepts faster and broadens your understanding.
+3. **Problem Solving**: Tackling coding challenges becomes smoother with the input and insights of fellow programmers.
+
+The sense of community has a huge impact on human advancement. Here is a TedX session about how communities help each other create an exponential impact. An impact not just on your path, but in the path of other people who work along with you too. You are an important part of the community we seek to develop, as an important part of this future, we urge you to be inclusive and help us build this into an impactful ecosystem.
+
+https://youtu.be/7yNl-AsQRRw
+
+## Discord: The Platform for Building Our Coding Community
+
+At the heart of our community lies Discord, a versatile and powerful platform that enhances your coding experience in numerous ways:
+
+1. **Real-time Communication**: Discord provides an interactive space for instant discussions, allowing you to seek help and share insights without delay.
+2. **Dedicated Channels**: Organized channels for specific topics, projects, and interests enable focused conversations & knowledge sharing.
+3. **Support**: A support pipeline of dedicated staff, who are available to answer and offer a helping hand for all your questions and queries related to the course.
+4. **Network**: A network for communication with all the students and alumni taking our courses from across the country. Opening gates to conversations related to your programming stories and problems/solutions you have faced during your learning experience and a network of other developers.
+
+Check out this video, which will walk you through all the channels where you can interact with on discord.
+
+## Open Source Platforms: Pillars of Collaboration
+
+Several open-source platforms serve as pillars of collaboration, enabling programmers to contribute, learn, and grow together:
+
+- **[GitHub](https://github.com)**: A hub for collaborative coding, version control, and open-source project hosting.
+- **[Stackoverflow](https://stackoverflow.com/)**: A platform that supports shared coding endeavors, fostering a strong developer community.
+
+
+## Graduate attribute for Web development professionals
+
+While going through your web development courses, students will be exposed to a range of attributes that are of highly valued in the programming community across the globe. And are some necessary aspects for the web development professionals. It is important that you take note of these values and focus to build up on these skills as you approach your professional path in the area of web development. Use the discord community and initiate conversations about these topics with your fellow learners.
+
+1. **Comprehensive Web skills** : Develop mastery in HTML,CSS & JS, and other web technologies, enabling you to develop complex and responsive web solutions. 
+2. **Full-stack proficiency** : Acquire front-end and back-end expertise, integrating databases and APIs to build complete web applications.
+3. **Problem-Solving Mastery** : Analyse and practise complex technical issues, enhancing your ability to created optimised solutions. 
+4. **Effective Collaboration** : Utilize Git for version control and teamwork, communicating and contributing effectively within development groups.
+5.**User-Focused Design**: Learn about UI/UX and design principles and understand the importance of catering intelligent user interfaces. 
+6. **Security and Ethical Awareness** : Learn about security measures, prioritising data privacy, and adhere to ethical standards while showcasing professionalism and accountability.
+
+Here is a [reference link](https://www.ugc.gov.in/e-book/locf/mobile/index.html#p=7), go to page number 6 to read more about graduate attributes._
+
+
+## Behavioural Rules and Standards
+
+To ensure a positive and productive experience within the programming community, we adhere to the following behavioural rules and standards:
+
+1. **Respectful Communication**: Treat all community members with courtesy and respect. Avoid offensive language, personal attacks, and discriminatory remarks.
+
+2. **Constructive Criticism**: Provide feedback in a constructive manner, focusing on the code and ideas rather than attacking individuals.
+
+3. **Collaborative Environment**: Embrace collaboration, share insights, and engage in healthy discussions to promote collective learning.
+
+4. **Plagiarism-Free Zone**: Give credit where it's due and refrain from submitting others' work as your own. Plagiarism undermines the spirit of learning and growth.
+
+5. **Inclusivity and Diversity**: Embrace diversity of backgrounds, experiences, and perspectives. Our community is strengthened by its rich tapestry of voices.
+
+6. **Helping Others**: Contribute positively by assisting fellow members, particularly those who are newer to coding. A helping hand can make a significant impact.
+
+7. **Adherence to Platform Guidelines**: Respect the guidelines of the platforms we use, such as GitHub and GitLab, when contributing to projects.
+
+## Resources for Cultivating Your Coding Community Involvement
+
+
+Remember community engagement is all about sharing, do not refrain from sharing whenever you come across something interesting, that might intrigue your fellow programmers. To start with consider exploring these resources that we would like to share with you: 
+
+
+* The Mythical Man-Month Book by Fred Brooks : An interesting read about software development, presenting some ideas about second-system effect and advocacy of prototyping.
+
+* [Some interesting project ideas for when you are done with our WD courses.](https://www.crio.do/projects/category/web-development-projects/)
+
+
+In your coding journey, remember that the programming community is your steadfast companion. Engage, collaborate, and share on the discord channel, and contribute to the community that will shape your path to success.
+
diff --git a/Welcome to the course/About Puilfirst LMS.md b/Welcome to the course/About Puilfirst LMS.md
index e69de29..3e24e6a 100644
--- a/Welcome to the course/About Puilfirst LMS.md	
+++ b/Welcome to the course/About Puilfirst LMS.md	
@@ -0,0 +1,77 @@
+## What makes the Pupilfirst LMS special? 
+
+[Pupilfirst LMS is an open-source project](https://github.com/pupilfirst/pupilfirst), built right here in India, by the Pupilfirst team.
+
+Our team uses this LMS to run courses such as the one you're looking at right now.
+
+This lesson will give you a quick tour of the Pupilfirst LMS.
+
+To sign in, you have multiple options. When you first get started, you'll be visiting [pupilfirst.school](https://www.pupilfirst.school), clicking _Sign In_, and choosing one of the many options to sign in.
+
+<img class="mx-auto w-auto md:w-auto" alt="Sign-in using a third-party account, or with one-time link sent to your email, or with a password." src="https://do7js0tdxrds1.cloudfront.net/4pj8un3zlw9x9ub5g8z2qegww8ti?response-content-disposition=inline%3B+filename%3D%22Screenshot+2021-03-29+at+5.05.52+PM.png%22%3B&response-content-type=image%2Fpng&Expires=1694582902&Signature=FPKXu4nqKEkmJwyiDcsk~LiDj6uTJkt9DLVnUr37IrBdZDvGVGYvWsd97aO~t2yZQXSRptvgmLwbjmTmhYgX5nCrMumAUWt8fBfHiMsLWl1-zJ5gQiUnU1XxVSXgblSpWxCCyBfzIB2VrJNrmVAq1MAEVZeSica8TsZA1TkPXhOzLlZ2BBtB9AjgSenLRQHKJxQbm3yitDE7RPUzw3X2IQeUKPCJX7JS5JKDMFUjPXOk4bBWMb9o48jxxYJPHIGzy3j1HxYRK-6vbRcVtiHitDa2-421dGqz31ZeKm2zFP5Zdl25~Riq9DzkNdvvcVaEc94t4NSFxRrM~w5WjlQK9A__&Key-Pair-Id=K2Q3HDJ6ZAQGFF">
+Sign-in using a third-party account, or with one-time link sent to your email, or with a password.
+
+Once you sign-in successfully, you will see the list of courses you are a part of on your *Dashboard*.
+
+From one of the listed courses on your _Dashboard_, click _View Course_ to view its curriculum.
+
+## Curriculum
+
+This is the main page where you will see all of the course content.
+
+<img class="mx-auto w-auto md:w-3/5" alt="Your course curriculum!" src="https://do7js0tdxrds1.cloudfront.net/cu0zn347b3tejw6z1quebvcrgc1e?response-content-disposition=inline%3B+filename%3D%22Screenshot+2021-03-30+at+8.14.28+AM.png%22%3B&response-content-type=image%2Fpng&Expires=1694582902&Signature=R6a0a0AgPcyf5CbeFVGkJA16~NLVX8dFjK9J9odKd3v5egQiS2n0GhhzP-zN43edvQlJIPQkhiZxqTvxoNz2iOjdo~-DV4qa-1-GDxeODxtxaQuIczArpNLdMsiT8iZokhoj2H83UdyoRn6zENKqTX6EEOpn-K8qUOkN49XhrSST5g82sunPZMYIsKJrU9kOGwac4VucsGjWRuNLJWX2kJJUTLhC3gY9XWlfT-cdpWTG8ahR2jiCigqSc0~Vlpq0kYa6m9-rCDo8MEQXXI~MKm3ggJDiAQqtZXSvR0yEuu~LF4SNgZ0o9kZmvHPN6EkCXfGsT7qiEOTddfyNd2JpZA__&Key-Pair-Id=K2Q3HDJ6ZAQGFF">
+Your course curriculum!
+
+## This course has 8 levels
+
+To complete the course, you need to complete all levels in the course.
+
+<img class="mx-auto w-auto md:w-auto" alt="Levels in the course; you can select a level from the dropdown and see the lessons in that level" src="https://do7js0tdxrds1.cloudfront.net/ktw508nculnr7sdpd4dg9l9b84t7?response-content-disposition=inline%3B+filename%3D%22Screenshot+2021-04-13+at+10.49.50+AM.png%22%3B&response-content-type=image%2Fpng&Expires=1694582902&Signature=bjO-w1pI~9l9cCPU2D~kizG5GnBhXr6FPwuR7VSevr-lP3BnQd0FojLQaYaGdbv~MRDID2fLr2RTC4o2z6iO9APBzw53ThQ6OzRNHTh9TMC6Tb-E9quYTKHJBtSVr5R7kv87hkXfYhCp0Ic9tTO3V81-y6hGbTe~LNE~ncjQvN79qrspEyx2hAfb5AoUVuA1jGs0h4fsIYn0ysz7il6sP1lgY9KPAb9-wuZB0~JPGz8F2mygMIK8GBd6rfnMuvGLrk48zH4zeYPXxIxxYawAmCrL5LDqxzxfOGf7xiCuBsqJQzbxxLs-oe4cCg2sgr4WjlI6n5GkFjp0FydrbxQHXw__&Key-Pair-Id=K2Q3HDJ6ZAQGFF">
+Levels in the course; you can select a level from the dropdown and see the lessons in that level
+
+## How to complete a level, and *level up*
+
+To complete a level, you must complete all lessons marked as **milestone targets**.
+
+<img class="mx-auto w-auto md:w-auto" alt="Pay special attention to lessons marked as &quot;milestone targets&quot;. Focus on completing these in the level that you're in." src="https://do7js0tdxrds1.cloudfront.net/b3mc8es5yuvg4cyg2m6rkukaqzh2?response-content-disposition=inline%3B+filename%3D%22milestone_targets.png%22%3B&response-content-type=image%2Fpng&Expires=1694582902&Signature=nROKXRfDhhGBCc93MMGGG2ZYsAcbRLg31OuI-2hFOC5SJZ9i0efR~~TBTc~h2jAh44qVFM-AY5il47AOXIzFksx0hP0DB-9nMe0nPx7lzWTeKEUD5NU1C79A8nagPr5QV~WgFqaAxjASTJW6geqJiy9uBMZ1lJaLY23SX7kPydJMRQdVZNxsGiN2-4kSBNofA3U8Vi4YaA35UaIZzaPg~fm1ac7W5N0OzRoqznktCa3QCLKM0RJljQCdbTHXG3AxEeF0D3oapefpkdL4RKbM~2zEg4uwQZ5pO45UaAjvOt8bihqOSwbdwpj93SHTw6gCiAPcer1vnpYEzlujzM7XNw__&Key-Pair-Id=K2Q3HDJ6ZAQGFF">
+
+## How to complete lessons
+
+Start by clicking on a lesson to view its content - you'll start on the _Learn_ tab which shows the content of the lesson.
+
+<img class="mx-auto w-auto md:w-auto" alt="Clicking on a lesson reveals its content." src="https://do7js0tdxrds1.cloudfront.net/fe0kvfsxpgozi7jzptrbh6ni7nga?response-content-disposition=inline%3B+filename%3D%22Screenshot+2021-03-30+at+8.21.09+AM.png%22%3B&response-content-type=image%2Fpng&Expires=1694582902&Signature=PkSTR~YZzJ2yWoJXqtnOBcECXm8dgwc3vEoDFHEWHBGqFTQMo9-OnXlgVE1X4L2z-ONZVAzt4sb9zwVGVF3YcuPLE5xt3c3mf7xbg9qubJxsE0C1kPF6otAIvO3xzMiukV1ZCoRmqCU9CXO7foGvumcCSB77S7Tz-qtPH89cDgKqNQJatgG1kyjhedlwS8zdF~8l8dkGaytqZTLk7LRy5Y6YfXwCPffTABGpQSiCvqi5~l0HteQMHNgO0Jd5JGiiYIp6M7Bt87auFf68TxgkWB~Uld9eBjLLBsT9G5nJT7zuA~milB7i1Pw-g7WMHSiFcKPudVGPdkEdM5D2b5a5mg__&Key-Pair-Id=K2Q3HDJ6ZAQGFF">
+Clicking on a lesson reveals its content.
+
+
+Some lessons can be _Locked_ until you complete some prerequisites. Once you complete the prerequisites for the lesson (some of the previous lessons), you will be able to complete the lesson as well.
+
+Some lessons can also be _locked_ until you reach the level they're in.
+
+> **Important reminder:** Focus on completing milestone targets in your current level, and move up through the levels. That'll unlock more lessons.
+
+<img class="mx-auto w-auto md:w-3/5" alt="An example of a lesson that is &quot;locked&quot;." src="https://do7js0tdxrds1.cloudfront.net/ey1jzqrwfqx05rqekoadjycfm26w?response-content-disposition=inline%3B+filename%3D%22Screenshot+2021-03-30+at+8.31.40+AM.png%22%3B&response-content-type=image%2Fpng&Expires=1694582902&Signature=RmTZkXLJfOoalrp5uCuBkcgN3wOyCrYNBkTlo9Sf3IAs3bvaPSQP-7-bEx~mZvkyfcwRzvGVtjxvJh-IKfKPh4GuAOh4BrFrnOhdj~WWBtFsM9iYMHusa2CPy7dWuE6ODYJRkG5aoMwEfj-bfbX~RxFUVj9b9KqkVEZNYb6ErtjIJCOP-I5EymuvIt4rDCPfU0dlo6lNGZzRwxqEhN-wjEe9gRgyLaWdlBaLRWdUTwCXPAakH78ocfEQONZ1b0jzGBk1qlpJlj0jSf78U6roAU1LgcjJPfSD-czMvDm7hVYSYiw6naYX-PSK-T0blNv3IsIb7svK5wKHcEV7Mv80tg__&Key-Pair-Id=K2Q3HDJ6ZAQGFF">
+An example of a lesson that is "locked".
+
+Some lessons can be completed by simply **marking them as complete**.
+
+<img class="mx-auto w-auto md:w-auto" alt="An example of a lesson that is completed by clicking on &quot;Mark As Complete&quot;." src="https://do7js0tdxrds1.cloudfront.net/lhugbc5thypgnwbz92t3jkbueciz?response-content-disposition=inline%3B+filename%3D%22Screenshot+2021-03-30+at+8.24.09+AM.png%22%3B&response-content-type=image%2Fpng&Expires=1694582902&Signature=Foy-flsjT56FIMY2Qz85KJ6M7NKac0VJihvYj-0O957CtsDDzHJvKfKNMH1pDh5KnNdpzmOYpta0KRnEgewCrblprUcu5RUbmKnQiGT7fpewPkFWpMM0r8iL-I-cVTb2qHsrP9tGSMlje00jGED2DNx5KTIY1AW4NioIc9pofzdiGhp8GmRmBwriHugz9HC5kQVYCXVDSiHZPwmwqJPE2siL-vpP2Eiy4wewf~DiVg9wGvTqTP2ypHFrl4SZW9QMQqvffb187rq2BzuYLvlanHwVHAAbMb8nXbtam3V-dDaf5cf9KKjB6OGWDD56WzbL9xfys1QinapDrbvt4co8fA__&Key-Pair-Id=K2Q3HDJ6ZAQGFF">
+An example of a lesson that is completed by clicking on "Mark As Complete".
+
+Some lessons can be completed by **visiting a link**.
+
+<img class="mx-auto w-auto md:w-auto" alt="An example of a lesson that is completed by &quot;Visiting a Link&quot;." src="https://do7js0tdxrds1.cloudfront.net/rb9tjowcp0fvjgakagiigd35f327?response-content-disposition=inline%3B+filename%3D%22Screenshot+2021-03-31+at+10.30.44+AM.png%22%3B&response-content-type=image%2Fpng&Expires=1694582902&Signature=gEnPHvPGnXnyR2ffRcAjHrc284UMuf8lCjZt7OZSS-aXo2wst4D6sXYXNwyQeVY-MjZWrcChzKXsHDhJaquyf9EysxSgVI~OjrhhP8boUSON04NqgVrIg7OSxm8zP8fkKF65bUWqlNiABHiy8VTKkkBYsgAQT0kF0etAuzZo4VeuKuCXIiwNBvAYGR9kIimzWIpaWf6HoXRVSW72Y6825iSgESq35tCcCidLOoLTCfjSwBl0Iqa4Hvmc-T99En~N6sa1WwpogV8jsrFqQymia9B9t00QwXNcMKuVIS9ZCqNlkPYwN~B~D~madCeMgGmWTz03CcXhjl7RnbI-9kl3yQ__&Key-Pair-Id=K2Q3HDJ6ZAQGFF">
+An example of a lesson that is completed by "Visiting a Link".
+
+Some lessons can be completed by **taking a quiz**.
+
+<img class="mx-auto w-auto md:w-auto" alt="An example of a lesson that is completed by clicking by &quot;Taking a Quiz&quot;." src="https://do7js0tdxrds1.cloudfront.net/bbjwhcd5r0mctja6mt331w9mzlx3?response-content-disposition=inline%3B+filename%3D%22Screenshot+2021-03-30+at+8.27.53+AM.png%22%3B&response-content-type=image%2Fpng&Expires=1694582902&Signature=cAGVIh2gRmqOtngUcKxN5qG37p6Xg8F2cc~cg5TnpfEdS-Q~cGD0Q9rbkng1xoRCkKS4ixkCgj52oLaF1-cGV1rJP8dXmoJAMB8q80y-5pk~80x72WzbyCWCARNT2prOloU~EayfeCp6TtT60z2hnyqtGbye~-rUrdCNi1HR854GtD~6kEZVVTsb-t6IFSEZ-k0YEV6CMJwwFmY16xmQFGKlwQd2oAoY0SO7ioFED31e0pvAWGd47Gwq-vlHjrwMPK9OCcDpyRNst-aaNJOba2y6JtDAo9ihGaBKaO-nIFG~qVDtixm~EbzGfolnwQQFlcGrPedrqPZNkPhXv6RLIA__&Key-Pair-Id=K2Q3HDJ6ZAQGFF">
+An example of a lesson that is completed by clicking by "Taking a Quiz".
+
+Some lessons are completed by **submitting your work** for evaluation. These lessons can be _Locked_ until you complete some prerequisites. They will change to _Submitted_ once you've uploaded your work, and then it'll change to _Passed_ or _Failed_ after your submission is reviewed.
+
+In WD101, the submissions students make will go through a set of automated tests and if the submission passes the test, it is accepted, else it is rejected. Students are provided feedback which will allow them to work on the submission again and resubmit to get a passing grade.
+
+## How to know you have completed the course?
+
+Please go to the [report](https://www.pupilfirst.school/courses/1802/report) page. If all the level progress markers are *green*, it means that you have completed all the levels and hence the course is complete.
+
diff --git a/Welcome to the course/Adherence to the Code of Conduct of Pupilfirst School.md b/Welcome to the course/Adherence to the Code of Conduct of Pupilfirst School.md
index e69de29..d0ee20f 100644
--- a/Welcome to the course/Adherence to the Code of Conduct of Pupilfirst School.md	
+++ b/Welcome to the course/Adherence to the Code of Conduct of Pupilfirst School.md	
@@ -0,0 +1,67 @@
+As part of the application process, you have acknowledged and accepted the Code of Conduct of Pupilfirst School. It is essential for a student to understand the code of conduct and ensure all your actions within the WD courses aligns within that. Failure to do so may result in certain actions being taken, which could impact your continued participation in the course as a regular student.
+
+Pupilfirst School's Code of conduct has 2 standards: 
+
+   * Academic Standards
+   * Behavioural Standards
+
+
+## What are the Academic Standards of Pupilfirst School?
+
+Academic standards are expectations/guideline for a student to follow while working on WD courses to ensure proper learning outcomes. At Pupilfirst, we give the utmost priority to academic integrity, and we expect all our students to be ethical and honest in all their activities within Pupilfirst school.
+
+
+Important academic standards to be followed at Pupilfirst School : 
+
+### ** Do Not Plagiarise/Copy**
+Plagiarism refers to the act of using/copying someone else's work and presenting it as your own. At Pupilfirst we believe in the importance of submitting original work and have enforced a strict review mechanism to detect plagiarism at any level of the course. 
+
+
+Example of actions that are categorised as an attempt to plagiarism: 
+* Misappropriating or passing off someone else’s work as your own.
+* Tampering with another person's work and attempting to present it as your original creation.
+* Working on individual assignments as a group and then submitting identical or near-identical submissions.
+* Copying solutions from external sources on the internet and then submitting them for review.
+
+All of your submissions will undergo a thorough plagiarism evaluation. Our internal committee is responsible for conducting this examination. Pupilfirst School employs an advanced AI-powered plagiarism detection system, and any endeavor to engage in plagiarism will be flagged, assessed by a subject matter expert, and followed by appropriate actions as necessary.
+
+
+ **What happens when a student’s WD 101 final capstone submission is confirmed as plagiarised?**
+When a students' WD 101 final capstone submission is confirmed as plagiarised based on the similarities to previous submissions that were received, the submission will be rejected, and the students' access to the WD 101 course will be restricted. 
+
+*A student whose WD 101 final capstone submission was confirmed as plagiarised*
+* Will not get a course completion certificate.
+* Will not be onboarded to WD 201 course. 
+* Will continue to have preview access to the course. 
+
+**Note:** If your WD 101 final capstone submission is confirmed as plagiarised, and you are confident that your submission is original, you can challenge the decision by sharing your grievance at **wd-grievance@pupilfirst.org**. The Grievance Redressal Team will attend to your query and investigate within 24–48 hours.
+
+
+### ** Always follow milestone target instructions**
+All assignments within WD courses come with clear instructions from industry expert coaches on how to approach and complete the task. Always follow the instruction, clear all your doubts and submit only original work for review. 
+
+
+### ** Follow the timelines listed in the course calendar**
+
+It is important for you to access and follow the timelines as per the [course calendar](https://www.pupilfirst.school/courses/1802/calendar) set for every cohort.  WD courses follow deadline(s) and the same will be marked in respective course calenders. Post WD 101 final deadline, WD 101 course access of students who cannot meet the deadline requirement will be restricted. 
+
+*A student who misses the WD 101 final capstone deadline*
+* Will not get a course completion certificate.
+* Will not be onboarded to WD 201 course. 
+* Will only have preview access to the course. 
+
+
+### ** Clarify all your doubts and questions over Pupilfirst Discord Server**
+As you progress in the courses, you may face some difficulty in the course or submissions. Always feel free to ask all your questions within the learning community over Pupilfirst Discord Server. Industry experts and Teaching Assistants will help you clear your doubts and progress in the course. 
+
+
+### ** Peer Learning**
+Pupilfirst is committed to a Learner-Centered Model approach that promotes peer learning. We strongly encourage you to engage in knowledge sharing and assist fellow students in understanding concepts covered within the course; this can happen in your classroom during the course allotted hours, on your campus during breaks or in Pupilfirst Discord server.
+
+However, it is important to note that sharing your solution or code with others is not allowed. This restriction is in place to ensure the integrity of the learning process and avoid any potential consequences, such as audit actions.
+
+## What Are Pupilfirst School's Behavioral Standards?
+
+Behavioral standards encompass the guidelines and expectations that students are required to follow when engaging with the community or interacting with fellow learners. These standards aim to foster an environment that is open, welcoming, diverse, inclusive, and conducive to a healthy community.
+
+Detailed information regarding behavioral standards will be provided in the upcoming lesson titled "About the Discord Community." 
\ No newline at end of file
diff --git a/Welcome to the course/Build your student profile.md b/Welcome to the course/Build your student profile.md
index e69de29..1bf58f8 100644
--- a/Welcome to the course/Build your student profile.md	
+++ b/Welcome to the course/Build your student profile.md	
@@ -0,0 +1,6 @@
+Congratulations on getting onboarded to WD101 course.
+
+We would like to understand your current English comprehension (Listening & Reading) and Programming background to create your student profile. Note that this **does not** affect your eligibility to continue to the WD201 course.
+
+Go ahead and click the _Submit Form_ button below and fill in the form that appears.
+
diff --git a/Welcome to the course/For Windows users: VSCode works well with WSL.md b/Welcome to the course/For Windows users: VSCode works well with WSL.md
index e69de29..7b5fc16 100644
--- a/Welcome to the course/For Windows users: VSCode works well with WSL.md	
+++ b/Welcome to the course/For Windows users: VSCode works well with WSL.md	
@@ -0,0 +1,19 @@
+> **Not using Windows?**\
+> Mark this lesson as complete, and move along.
+
+## Are you running an older version of Windows?
+
+If you're using virtual machine software like _VMWare Workstation Player_ or _VirtualBox_, then install Visual Studio Code _inside_ your virtual machine's Ubuntu OS, instead of inside Windows.
+
+## For Windows 10 & 11 users...
+
+If you're running Windows 10 or 11, you're probably using WSL. This means your code will be kept inside the _Ubuntu_ OS running inside Windows.
+
+When Visual Studio Code is installed inside a Windows PC that has WSL enabled, you'll need to install an additional plugin - [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) that will let you access files on the Ubuntu system running _inside_ Windows transparently.
+
+1. Install the [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) Visual Studio Code extension.
+2. In your Ubuntu terminal, navigate to a folder you want to open with Visual Studio Code, and type `code .`. That's `code` followed by the `.` (period, or full-stop) symbol.
+
+This will open the folder inside Visual Studio Code running natively in Windows, but you'll be editing files inside the Ubuntu OS.
+
+> **Reminder:** Typing `code .` is the quickest & most reliable way to open Visual Studio Code from the command-line.
\ No newline at end of file
diff --git a/Welcome to the course/How to withdraw from LITE Advanced Web Development Program.md b/Welcome to the course/How to withdraw from LITE Advanced Web Development Program.md
index e69de29..a8d4b50 100644
--- a/Welcome to the course/How to withdraw from LITE Advanced Web Development Program.md	
+++ b/Welcome to the course/How to withdraw from LITE Advanced Web Development Program.md	
@@ -0,0 +1,12 @@
+If you find that you are unable to comply with the guidelines mentioned in the previous target, you have the option to withdraw yourself from the LITE program by deleting your LMS profile.
+
+Please be aware that this decision is completely voluntary, and it is important to carefully consider the implications before proceeding with the deletion of your profile.
+
+* Deleting your profile is a permanent action and cannot be reversed.
+* Upon deletion, your LMS profile will be permanently deleted, and your access to the course will be suspended.
+* Pupilfirst will not be held responsible for any consequences that may arise as a result of account deletion.
+
+**Steps to Delete account**
+* Step 1 : Go to your [user profile](https://www.pupilfirst.school/user/edit). 
+* Step 2 : Scroll down to the bottom of the webpage
+* Step 3 : Click on "Delete your account: button
\ No newline at end of file
diff --git a/Welcome to the course/Install Ubuntu using virtual machine software.md b/Welcome to the course/Install Ubuntu using virtual machine software.md
index e69de29..a0b156e 100644
--- a/Welcome to the course/Install Ubuntu using virtual machine software.md	
+++ b/Welcome to the course/Install Ubuntu using virtual machine software.md	
@@ -0,0 +1,8 @@
+If your computer is running Windows older than _Windows 10_, then you're not going to be able to use the WSL feature that we documented in the last target.
+
+Instead, the easiest method to run Ubuntu inside an older version of Windows is to use virtual machine software.
+
+We have documented how to use two such software to install and run Ubuntu. You can find these in the _Appendix_ of the course. Here are quick links to the two available options:
+
+1. **Recommended:** [Install Ubuntu using VMware Workstation Player](https://www.pupilfirst.school/targets/18681)
+2. [Install Ubuntu using Virtualbox](https://www.pupilfirst.school/targets/18680)
\ No newline at end of file
diff --git a/Welcome to the course/Installing Ubuntu on Windows, using WSL.md b/Welcome to the course/Installing Ubuntu on Windows, using WSL.md
index e69de29..11d194e 100644
--- a/Welcome to the course/Installing Ubuntu on Windows, using WSL.md	
+++ b/Welcome to the course/Installing Ubuntu on Windows, using WSL.md	
@@ -0,0 +1,24 @@
+> **Important Note**: This lesson is for Windows users only. If you're using macOS, or Linux, simply mark this one as complete and move on.
+
+## Why Linux, why not Windows?
+
+You can develop perfectly fine on any operating system. However, many developers choose Linux or OSX (Mac) as their development environment because countless developer _tools_ are built for Unix systems _first_. This makes it typically (much) easier to set up on Unix systems. It is also generally accepted that the Unix command line is superior to the Windows command line.
+
+In this course, we're assuming that you have access to a Linux development environment because it makes it easier to build and maintain the course content when it targets just one environment.
+
+
+## Using WSL
+
+Follow the official Windows instructions for installing WSL on your computer running Windows 10 or above:
+
+https://docs.microsoft.com/en-us/windows/wsl/install
+
+### Notes
+
+1. You'll need administrative permissions on your computer to be able to set up WSL.
+
+2. If you're running Windows 11, or an up-to-date version of Windows 10, you can set up WSL effortlessly - follow the instructions on the page linked above.
+
+3. If you're running an older version of Windows 10, you might need to follow the [Manual installation steps for older versions](https://docs.microsoft.com/en-us/windows/wsl/install-manual). When following manual installation steps, remember to choose Ubuntu 20.04 as your distribution in [Step 6 - Install your Linux distribution of choice](https://docs.microsoft.com/en-us/windows/wsl/install-manual#step-6---install-your-linux-distribution-of-choice).
+
+> At the end of the installation process, make sure that you have WSL version 2 installed by running `wsl --list -v` from the Windows command line to show running virtual machines and their WSL versions. The older version 1 of WSL is outdated and can cause issues when running applications inside it.
\ No newline at end of file
diff --git a/Welcome to the course/Installing Visual Studio Code.md b/Welcome to the course/Installing Visual Studio Code.md
index e69de29..229f610 100644
--- a/Welcome to the course/Installing Visual Studio Code.md	
+++ b/Welcome to the course/Installing Visual Studio Code.md	
@@ -0,0 +1,19 @@
+We'll be using Visual Studio Code (VS Code) in many parts of this course. Watch the following video to learn how to install Visual Studio Code on your system.
+
+
+## A good editor
+
+[Visual Studio Code](https://code.visualstudio.com/) is [the most popular editor among developers today](https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-integrated-development-environment). It's free, open-source, and has a great community that has built numerous extensions (plugins).
+
+## How to install it
+
+Go through the official documentation here: https://code.visualstudio.com/docs/setup/setup-overview
+
+Follow the instructions specific to your OS.
+
+## Running Visual Studio Code
+
+The quickest and most reliable way to start Visual Studio Code is from the command-line.
+
+From your command-line, navigate to the directory you want to open in Visual Studio Code, and type `code .` (_code_ followed by the _period_ character).
+
diff --git a/Welcome to the course/Installing the Prettier VSCode extension.md b/Welcome to the course/Installing the Prettier VSCode extension.md
index e69de29..35a0c71 100644
--- a/Welcome to the course/Installing the Prettier VSCode extension.md	
+++ b/Welcome to the course/Installing the Prettier VSCode extension.md	
@@ -0,0 +1 @@
+Let's begin using Visual Studio Code by installing the _Prettier_ extension. Prettier helps keep our code _pretty_ (hence the name).
\ No newline at end of file
diff --git a/Welcome to the course/Introduction to command-line for beginners.md b/Welcome to the course/Introduction to command-line for beginners.md
index e69de29..6fbd3e9 100644
--- a/Welcome to the course/Introduction to command-line for beginners.md	
+++ b/Welcome to the course/Introduction to command-line for beginners.md	
@@ -0,0 +1,27 @@
+As a web developer, you're likely going to spend a lot of time doing things on the command-line. It's gives you quick access to a variety of essential tools.
+
+**However,** when you're starting out, there's a few things - some basics - that you need to get comfortable with. Thankfully, it won't take too much time either.
+
+We'll use [Ubuntu's command-line tutorial for beginners](https://ubuntu.com/tutorials/command-line-for-beginners) to quickly run you through some _essential_ knowledge (and a bit of trivia) involving the command-line.
+
+## Good command-lines are built according to a standard
+
+The tutorial linked in this lesson is written from the perspective of a user running Ubuntu as their computer's OS. Thankfully, Ubuntu implements a [POSIX-standard](https://en.wikipedia.org/wiki/POSIX) command-line.
+
+This means that commands that your write in on one POSIX-standard command-line will usually work exactly the same way in another, even if it's not running on a system with a different operating system.
+
+All of the topics covered in the linked tutorial should work the same, regardless of whether you're using a terminal inside the Ubuntu OS, macOS, or Windows' WSL, or any other Linux variant.
+
+## Things to focus on learning
+
+- Navigating the folder structure of your system: `ls`, `cd`.
+- Creating and deleting folders: `mkdir`, `rmdir`.
+- Creating files using output redirection: `echo`, `cat`
+- Viewing and deleting files: `less`, `rm`.
+- Moving & renaming files and folders: `mv`, `cp`.
+- Piping output from one command to another.
+- When it's appropriate to _become_ the root user using the `sudo` command.
+- How to view hidden files and folders.
+- Using *switches* to modify the actions of commands.
+
+To complete this lesson, go through the tutorial ["The Linux command line for beginners"](https://ubuntu.com/tutorials/command-line-for-beginners), and check your understanding using a quick quiz.
\ No newline at end of file
diff --git a/Welcome to the course/Welcome to WD 101!.md b/Welcome to the course/Welcome to WD 101!.md
index e69de29..2ad8363 100644
--- a/Welcome to the course/Welcome to WD 101!.md	
+++ b/Welcome to the course/Welcome to WD 101!.md	
@@ -0,0 +1,32 @@
+# WD101
+
+WD 101 is an Industry-led course built by Pupilfirst.
+
+This course is tailored for newcomers to programming and web development and those seeking to establish a sturdy foundation in computational thinking. WD101 is your starting point on the journey to mastering modern web development practices.
+
+## Course Objective
+
+This course is meant for beginners in programming & web development and those who are looking to build a robust foundation in computational thinking.
+
+## Course Outcomes
+
+**Set up your development environment:** Learn how to create an efficient development environment, ensuring you're well-prepared for web development tasks.
+
+**Build and style basic web pages:** Learn to develop simple web pages from scratch and apply CSS styling to make them visually appealing and user-friendly.
+
+**Handle data with JavaScript:** Get comfortable with JavaScript, a vital programming language for web development, and discover how to manipulate and process data effectively.
+
+**Utilize computational thinking:** Explore computational thinking and learn how to apply abstract problem-solving techniques to real-world challenges.
+
+**Work with HTML forms:** Master the art of working with HTML forms, enabling you to create interactive web applications and collect user data efficiently.
+
+**Implement native HTML Form Validations:** Dive into native HTML form validations to ensure user input is accurate, secure, and meets predefined criteria.
+
+**Master web storage techniques:** Understand web storage concepts, including local and session storage, and learn how to save and retrieve data persistently in web applications.
+
+
+## Certificate
+
+Upon successful completion, you will be eligible for a course completion certificate (Web Development 101 - Getting started with JavaScript). 
+
+The WD101 certificate will be issued after the end of the cohort, along with the WD201 course completion certificate.
\ No newline at end of file
diff --git a/Welcome to the course/Where should you keep your code?.md b/Welcome to the course/Where should you keep your code?.md
index e69de29..0791e14 100644
--- a/Welcome to the course/Where should you keep your code?.md	
+++ b/Welcome to the course/Where should you keep your code?.md	
@@ -0,0 +1,54 @@
+In this course, you'll be writing a lot of code manually. You'll need to _store_ this code somewhere. In this lesson, we'll list down our recommendation of where to keep this code.
+
+From your command line, if you type the `cd` command, it'll take you to [your home directory](https://en.wikipedia.org/wiki/Home_directory):
+
+```bash
+# Simply writing `cd` always takes you to your home directory.
+cd
+```
+
+At any given moment, you can check the path that you're on using the `pwd` command:
+
+```bash
+# Let's check where we are.
+pwd
+/home/NAME
+# The ^^^^ NAME part will be different for everyone. It should be your OS username.
+```
+
+The output of `pwd` should now show you the absolute path to the folder you're inside. On Ubuntu and Windows (WSL), it should look like the above example. On macOS, it'll look like `/Users/NAME`.
+
+## So, where should I keep my code?
+
+We recommend that you create a directory called `wd101` inside your home directory, and keep all of your source code in there. For example:
+
+```bash
+# Let's make sure we're at the home directory.
+cd
+
+# Let's create the `wd101` directory, and go into that.
+mkdir wd101
+cd wd101
+```
+
+So, we now have a directory where we'll keep _all_ of our source code, but we'll definitely want to keep source code for different projects separate from each other.
+
+In the next level, you're going to create a small website, so let's try creating a directory _inside_ the `wd101` directory to hold the source code we'll write for that project:
+
+```bash
+# From inside the `wd101` directory, let's make another...
+mkdir html-css
+cd html-css
+
+# Let's confirm that we're at the right path...
+pwd
+/home/NAME/wd101/html-css
+```
+
+We'll use this folder in the next level. Similarly, we'll want to create new directories inside the `wd101` folder when you work on a different project.
+
+## Can I change where I keep my code?
+
+This organization scheme is just a recommendation. You may wish to keep your code in a different location or name things differently - that's totally fine. 
+
+> **Windows users:** Make sure that you keep your code within WSL (in `/home/code`, for example), and not in your Windows drives (`C:\`, `D:\`, etc.). If you keep your code in Windows and then try to run it from interpreters installed inside WSL, you can run into difficult-to-debug errors.
\ No newline at end of file

From c524be11fa85e070fdfd7f9983744be3113f3e3e Mon Sep 17 00:00:00 2001
From: vsharma2288 <varun@pupilfirst.org>
Date: Tue, 26 Sep 2023 17:08:26 +0530
Subject: [PATCH 10/13] Added l5 & L6, changes till L4 are completed

---
 .../Introduction to HTML Elements.md          | 44 -------------------
 ... aboust CSS.md => Learn more about CSS.md} |  0
 .../A note on arrow functions.md              |  0
 ...plicitly return a value from a function.md |  0
 .../Functions - part 1.md                     |  0
 .../Functions - part 2.md                     |  0
 .../Need additional help?.md                  |  0
 .../Passing a function as an argument.md      |  0
 ...e a name to initials converter function.md |  0
 .../Introduction to CSS Frameworks.md         |  0
 .../Introduction to Tailwind CSS.md           |  0
 ...Tailwind's relationship with JavaScript.md |  0
 .../Using CSS Frameworks for styling.md       |  0
 .../Working with Tailwind.md                  |  0
 .../Adding comments to HTML and JS.md         |  0
 ...an - comparisons and logical operations.md |  0
 .../Find the length of a string.md            |  0
 .../Introduction to strings.md                |  0
 .../Join strings together.md                  |  0
 Working with JavaScript data types/Numbers.md |  0
 .../Putting HTML and JS together.md           |  0
 ...arch for a string inside another string.md |  0
 .../Sort a collection of strings.md           |  0
 .../Split strings by a pattern.md             |  0
 .../String equality comparison.md             |  0
 ...reate a function to validate passphrase.md |  0
 .../WD101 Halfway feedback form.md            |  0
 .../What is JavaScript.md                     |  0
 28 files changed, 44 deletions(-)
 rename Basic Introduction to HTML & CSS/{Learn more aboust CSS.md => Learn more about CSS.md} (100%)
 create mode 100644 Functions - code we can call multiple times!/A note on arrow functions.md
 create mode 100644 Functions - code we can call multiple times!/Explicitly return a value from a function.md
 create mode 100644 Functions - code we can call multiple times!/Functions - part 1.md
 create mode 100644 Functions - code we can call multiple times!/Functions - part 2.md
 create mode 100644 Functions - code we can call multiple times!/Need additional help?.md
 create mode 100644 Functions - code we can call multiple times!/Passing a function as an argument.md
 create mode 100644 Functions - code we can call multiple times!/Task: Create a name to initials converter function.md
 rename {Style Matters => Styling Matters}/Introduction to CSS Frameworks.md (100%)
 rename {Style Matters => Styling Matters}/Introduction to Tailwind CSS.md (100%)
 rename {Style Matters => Styling Matters}/Tailwind's relationship with JavaScript.md (100%)
 rename {Style Matters => Styling Matters}/Using CSS Frameworks for styling.md (100%)
 rename {Style Matters => Styling Matters}/Working with Tailwind.md (100%)
 create mode 100644 Working with JavaScript data types/Adding comments to HTML and JS.md
 create mode 100644 Working with JavaScript data types/Boolean - comparisons and logical operations.md
 create mode 100644 Working with JavaScript data types/Find the length of a string.md
 create mode 100644 Working with JavaScript data types/Introduction to strings.md
 create mode 100644 Working with JavaScript data types/Join strings together.md
 create mode 100644 Working with JavaScript data types/Numbers.md
 create mode 100644 Working with JavaScript data types/Putting HTML and JS together.md
 create mode 100644 Working with JavaScript data types/Search for a string inside another string.md
 create mode 100644 Working with JavaScript data types/Sort a collection of strings.md
 create mode 100644 Working with JavaScript data types/Split strings by a pattern.md
 create mode 100644 Working with JavaScript data types/String equality comparison.md
 create mode 100644 Working with JavaScript data types/Task: Create a function to validate passphrase.md
 create mode 100644 Working with JavaScript data types/WD101 Halfway feedback form.md
 create mode 100644 Working with JavaScript data types/What is JavaScript.md

diff --git a/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md b/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md
index 9efb177..e69de29 100644
--- a/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md	
+++ b/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md	
@@ -1,44 +0,0 @@
-Every HTML document begins with an `<html>` tag. All other elements must be descendents of this element. The content of a web page can be wrapped in `<body>` tag.
-
-To include headings, HTML provides different header tags ranging from `<h1>` to `<h6>`.
-
-Normal text can be included in a web page using `<p>` element.
-
-We can use the `<table>` element to display data in tabular format. An optional header can be added to the table using `<thead>` element. Each row in the table is represented using `<tr>` element. To display data in a column in a table row, we need to use `<td>`, the table data cell element.
-
-```html
-<html>
-  <head>
-    <title>This is my web page</title>
-  </head>
-  <body>
-    <h1>This is a top level heading</h1>
-    <h2>This is a sub heading</h2>
-    <p>This is a normal text</p>
-
-    <table>
-      <thead>
-        <tr>
-          <th>id</th>
-          <th>fruit</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td>Apple</td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>Orange</td>
-        </tr>
-      </tbody>
-    </table>
-  </body>
-</html>
-```
-
-MDN has an excellent reference on HTML elements at https://developer.mozilla.org/en-US/docs/Web/HTML/Element
-
-MDN documentation on [Form input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
-MDN documentation on [Table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/Learn more aboust CSS.md b/Basic Introduction to HTML & CSS/Learn more about CSS.md
similarity index 100%
rename from Basic Introduction to HTML & CSS/Learn more aboust CSS.md
rename to Basic Introduction to HTML & CSS/Learn more about CSS.md
diff --git a/Functions - code we can call multiple times!/A note on arrow functions.md b/Functions - code we can call multiple times!/A note on arrow functions.md
new file mode 100644
index 0000000..e69de29
diff --git a/Functions - code we can call multiple times!/Explicitly return a value from a function.md b/Functions - code we can call multiple times!/Explicitly return a value from a function.md
new file mode 100644
index 0000000..e69de29
diff --git a/Functions - code we can call multiple times!/Functions - part 1.md b/Functions - code we can call multiple times!/Functions - part 1.md
new file mode 100644
index 0000000..e69de29
diff --git a/Functions - code we can call multiple times!/Functions - part 2.md b/Functions - code we can call multiple times!/Functions - part 2.md
new file mode 100644
index 0000000..e69de29
diff --git a/Functions - code we can call multiple times!/Need additional help?.md b/Functions - code we can call multiple times!/Need additional help?.md
new file mode 100644
index 0000000..e69de29
diff --git a/Functions - code we can call multiple times!/Passing a function as an argument.md b/Functions - code we can call multiple times!/Passing a function as an argument.md
new file mode 100644
index 0000000..e69de29
diff --git a/Functions - code we can call multiple times!/Task: Create a name to initials converter function.md b/Functions - code we can call multiple times!/Task: Create a name to initials converter function.md
new file mode 100644
index 0000000..e69de29
diff --git a/Style Matters/Introduction to CSS Frameworks.md b/Styling Matters/Introduction to CSS Frameworks.md
similarity index 100%
rename from Style Matters/Introduction to CSS Frameworks.md
rename to Styling Matters/Introduction to CSS Frameworks.md
diff --git a/Style Matters/Introduction to Tailwind CSS.md b/Styling Matters/Introduction to Tailwind CSS.md
similarity index 100%
rename from Style Matters/Introduction to Tailwind CSS.md
rename to Styling Matters/Introduction to Tailwind CSS.md
diff --git a/Style Matters/Tailwind's relationship with JavaScript.md b/Styling Matters/Tailwind's relationship with JavaScript.md
similarity index 100%
rename from Style Matters/Tailwind's relationship with JavaScript.md
rename to Styling Matters/Tailwind's relationship with JavaScript.md
diff --git a/Style Matters/Using CSS Frameworks for styling.md b/Styling Matters/Using CSS Frameworks for styling.md
similarity index 100%
rename from Style Matters/Using CSS Frameworks for styling.md
rename to Styling Matters/Using CSS Frameworks for styling.md
diff --git a/Style Matters/Working with Tailwind.md b/Styling Matters/Working with Tailwind.md
similarity index 100%
rename from Style Matters/Working with Tailwind.md
rename to Styling Matters/Working with Tailwind.md
diff --git a/Working with JavaScript data types/Adding comments to HTML and JS.md b/Working with JavaScript data types/Adding comments to HTML and JS.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/Boolean - comparisons and logical operations.md b/Working with JavaScript data types/Boolean - comparisons and logical operations.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/Find the length of a string.md b/Working with JavaScript data types/Find the length of a string.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/Introduction to strings.md b/Working with JavaScript data types/Introduction to strings.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/Join strings together.md b/Working with JavaScript data types/Join strings together.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/Numbers.md b/Working with JavaScript data types/Numbers.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/Putting HTML and JS together.md b/Working with JavaScript data types/Putting HTML and JS together.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/Search for a string inside another string.md b/Working with JavaScript data types/Search for a string inside another string.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/Sort a collection of strings.md b/Working with JavaScript data types/Sort a collection of strings.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/Split strings by a pattern.md b/Working with JavaScript data types/Split strings by a pattern.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/String equality comparison.md b/Working with JavaScript data types/String equality comparison.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/Task: Create a function to validate passphrase.md b/Working with JavaScript data types/Task: Create a function to validate passphrase.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/WD101 Halfway feedback form.md b/Working with JavaScript data types/WD101 Halfway feedback form.md
new file mode 100644
index 0000000..e69de29
diff --git a/Working with JavaScript data types/What is JavaScript.md b/Working with JavaScript data types/What is JavaScript.md
new file mode 100644
index 0000000..e69de29

From b09d3ce54f5f18387e2831d2a23c011d7571322b Mon Sep 17 00:00:00 2001
From: vsharma2288 <varun@pupilfirst.org>
Date: Tue, 3 Oct 2023 17:30:25 +0530
Subject: [PATCH 11/13] Reviewed all levels; till L8

---
 .../README.md                                 |   0
 .../index.html                                |   0
 .../css-and-styling-structure/README.md       |   0
 .../css-classes-and-selectors/README.md       |   0
 .../css-styling-overrides/README.md           |   0
 .../html-css-js-comments/README.md            |   0
 .../html-elements/README.md                   |   0
 .../html-semantics/README.md                  |   0
 .../learn-more-about-html/README.md           |   0
 .../linking-pages-and-elements/README.md      |   0
 .../putting-together-html-css-js/README.md    |   0
 .../README.md                                 |   0
 .../images/idle.png                           | Bin
 .../index.html                                |   0
 .../absolute-and-relative-file-paths/main.js  |   0
 .../animating-with-images/README.md           |   0
 .../animating-with-images/final.js            |   0
 .../animating-with-images/images/idle/1.png   | Bin
 .../animating-with-images/images/idle/2.png   | Bin
 .../animating-with-images/images/idle/3.png   | Bin
 .../animating-with-images/images/idle/4.png   | Bin
 .../animating-with-images/images/idle/5.png   | Bin
 .../animating-with-images/images/idle/6.png   | Bin
 .../animating-with-images/images/idle/7.png   | Bin
 .../animating-with-images/images/idle/8.png   | Bin
 .../animating-with-images/index.html          |   0
 .../animating-with-images/main.js             |   0
 .../dynamic-drawings/README.md                |   0
 .../dynamic-drawings/final.js                 |   0
 .../dynamic-drawings/index.html               |   0
 .../dynamic-drawings/main.js                  |   0
 .../first-steps-with-canvas/README.md         |   0
 .../first-steps-with-canvas/index.html        |   0
 .../first-steps-with-canvas/main.js           |   0
 .../install-node-js/README.md                 |   0
 .../intro/README.md                           |   0
 .../loading-external-images/README.md         |   0
 .../loading-external-images/images/idle.png   | Bin
 .../loading-external-images/index.html        |   0
 .../loading-external-images/main.js           |   0
 .../loading-multiple-animations/README.md     |   0
 .../loading-multiple-animations/final.js      |   0
 .../images/idle/1.png                         | Bin
 .../images/idle/2.png                         | Bin
 .../images/idle/3.png                         | Bin
 .../images/idle/4.png                         | Bin
 .../images/idle/5.png                         | Bin
 .../images/idle/6.png                         | Bin
 .../images/idle/7.png                         | Bin
 .../images/idle/8.png                         | Bin
 .../images/kick/1.png                         | Bin
 .../images/kick/2.png                         | Bin
 .../images/kick/3.png                         | Bin
 .../images/kick/4.png                         | Bin
 .../images/kick/5.png                         | Bin
 .../images/kick/6.png                         | Bin
 .../images/kick/7.png                         | Bin
 .../images/punch/1.png                        | Bin
 .../images/punch/2.png                        | Bin
 .../images/punch/3.png                        | Bin
 .../images/punch/4.png                        | Bin
 .../images/punch/5.png                        | Bin
 .../images/punch/6.png                        | Bin
 .../images/punch/7.png                        | Bin
 .../loading-multiple-animations/index.html    |   0
 .../loading-multiple-animations/main.js       |   0
 .../martial-arts-sim-intro/README.md          |   0
 .../taking-control/README.md                  |   0
 .../taking-control/final.js                   |   0
 .../taking-control/images/background.jpg      | Bin
 .../taking-control/images/backward/1.png      | Bin
 .../taking-control/images/backward/2.png      | Bin
 .../taking-control/images/backward/3.png      | Bin
 .../taking-control/images/backward/4.png      | Bin
 .../taking-control/images/backward/5.png      | Bin
 .../taking-control/images/backward/6.png      | Bin
 .../taking-control/images/block/1.png         | Bin
 .../taking-control/images/block/2.png         | Bin
 .../taking-control/images/block/3.png         | Bin
 .../taking-control/images/block/4.png         | Bin
 .../taking-control/images/block/5.png         | Bin
 .../taking-control/images/block/6.png         | Bin
 .../taking-control/images/block/7.png         | Bin
 .../taking-control/images/block/8.png         | Bin
 .../taking-control/images/block/9.png         | Bin
 .../taking-control/images/forward/1.png       | Bin
 .../taking-control/images/forward/2.png       | Bin
 .../taking-control/images/forward/3.png       | Bin
 .../taking-control/images/forward/4.png       | Bin
 .../taking-control/images/forward/5.png       | Bin
 .../taking-control/images/forward/6.png       | Bin
 .../taking-control/images/idle/1.png          | Bin
 .../taking-control/images/idle/2.png          | Bin
 .../taking-control/images/idle/3.png          | Bin
 .../taking-control/images/idle/4.png          | Bin
 .../taking-control/images/idle/5.png          | Bin
 .../taking-control/images/idle/6.png          | Bin
 .../taking-control/images/idle/7.png          | Bin
 .../taking-control/images/idle/8.png          | Bin
 .../taking-control/images/kick/1.png          | Bin
 .../taking-control/images/kick/2.png          | Bin
 .../taking-control/images/kick/3.png          | Bin
 .../taking-control/images/kick/4.png          | Bin
 .../taking-control/images/kick/5.png          | Bin
 .../taking-control/images/kick/6.png          | Bin
 .../taking-control/images/kick/7.png          | Bin
 .../taking-control/images/punch/1.png         | Bin
 .../taking-control/images/punch/2.png         | Bin
 .../taking-control/images/punch/3.png         | Bin
 .../taking-control/images/punch/4.png         | Bin
 .../taking-control/images/punch/5.png         | Bin
 .../taking-control/images/punch/6.png         | Bin
 .../taking-control/images/punch/7.png         | Bin
 .../taking-control/index.html                 |   0
 .../taking-control/main.js                    |   0
 .../using-callbacks/README.md                 |   0
 .../using-callbacks/final.js                  |   0
 .../using-callbacks/images/idle.png           | Bin
 .../using-callbacks/index.html                |   0
 .../using-callbacks/main.js                   |   0
 .../creating-form-validations/README.md       |   0
 .../creating-your-first-form/README.md        |   0
 .../sample_user_form.jpg                      | Bin
 .../form-and-form-elements/README.md          |   0
 .../learn-more-forms/README.md                |   0
 .../load-from-web-storage/README.md           |   0
 .../submitting-user-data/README.md            |   0
 .../building-web-forms}/web-storage/README.md |   0
 .../why-html-forms/README.md                  |   0
 .../capstone-project}/README.md               |   0
 .../functions}/need-additional-help/README.md |   0
 .../functions}/need-additional-help/final.js  |   0
 .../introduction}/how-to-get-help/README.md   |   0
 .../revised-community-guideline/README.md     |   0
 .../README.md                                 |   0
 .../format.js                                 |   0
 .../README.md                                 |   0
 .../README.md                                 |   0
 .../introduction}/installing-vscode/README.md |   0
 .../introduction}/web-browsers/README.md      |   0
 .../accessing-data-in-js-objects/README.md    |   0
 .../add-update-delete-objects/README.md       |   0
 .../README.md                                 |   0
 .../README.md                                 |   0
 .../manipulating-objects/README.md            |   0
 .../introduction-to-css-frameworks/README.md  |   0
 .../introduction-to-tailwind-css/README.md    |   0
 .../_templates/index.css                      |   0
 .../_templates/index.end.html                 |   0
 .../_templates/index.start.html               |   0
 .../introduction-to-tailwind-css/index.css    |   0
 .../introduction-to-tailwind-css/index.html   |   0
 .../styling-html-using-css-files/README.md    |   0
 .../_templates/index.css                      |   0
 .../_templates/index.end.html                 |   0
 .../_templates/index.start.html               |   0
 .../styling-html-using-css-files/index.css    |   0
 .../styling-html-using-css-files/index.html   |   0
 .../README.md                                 |   0
 .../using-css-framework-for-styling/README.md |   0
 .../working-with-tailwind/README.md           |   0
 .../_templates/index.end.html                 |   0
 .../_templates/index.start.html               |   0
 .../working-with-tailwind/index.html          |   0
 .../adding-comments-to-html-and-js/README.md  |   0
 .../putting-html-and-js-together/README.md    |   0
 .../what-is-javascript/README.md              |   0
 .../what-is-javascript/index.html             |   0
 .../CSS and styling structure.md              |  13 +-
 .../CSS classes and selectors.md              |   2 +
 .../CSS styling overrides.md                  |   9 ++
 .../HTML & Semantic.md                        |  65 ++++++++++
 .../Introduction to HTML Elements.md          |  52 ++++++++
 .../Learn more about CSS.md                   |   2 +
 .../Linking Pages.md                          |   6 +-
 ... UI for filtering flight search results.md |   9 ++
 .../Accessing data in Objects.md              |   1 +
 ...d, delete, and update Object properties.md |   1 +
 .../Arrays - handling ordered values.md       |   1 +
 .../Creating and working with Objects.md      |   2 +
 .../Filter an array based on some criteria.md |  11 ++
 ...st from an array using the map function.md |  10 ++
 .../Generate an HTML list from an array.md    |   5 +
 ... over an array using the forEach method.md |   7 ++
 .../Manipulating Objects.md                   |   2 +
 .../Nested Array iteration.md                 |  17 +++
 .../Task: Create a function to filter data.md |  34 ++++++
 .../Transforming Nested Arrays.md             |   7 ++
 ...e array to another using the map method.md |   7 ++
 ...he index of the array value with filter.md |   5 +
 .../Using index of array value with map.md    |   2 +
 ...dex of the array value during iteration.md |   3 +
 ...y the registration page to GitHub pages.md |  38 ++++++
 .../Creating Validations.md                   |  56 +++++++++
 .../Creating your First Form.md               | 111 ++++++++++++++++++
 ...First steps with Form and Form elements.md |  76 ++++++++++++
 .../Introduction to Web Storage.md            |  49 ++++++++
 .../Learn more about Forms.md                 |  16 +++
 ...Submit and View Inputs from Web Storage.md |  41 +++++++
 .../Submitting user data from Forms.md        |  98 ++++++++++++++++
 .../WD101 Completion feedback form.md         |   1 +
 ...ut the HTML Form element and Form data?.md |   0
 .../A note on arrow functions.md              |  56 +++++++++
 ...plicitly return a value from a function.md |  40 +++++++
 .../Functions - part 1.md                     |   1 +
 .../Functions - part 2.md                     |   5 +
 .../Need additional help?.md                  |   5 +
 .../Passing a function as an argument.md      |  11 ++
 ...e a name to initials converter function.md |  27 +++++
 .../Introduction to CSS Frameworks.md         |  16 ++-
 .../Introduction to Tailwind CSS.md           |   2 +
 ...Tailwind's relationship with JavaScript.md |   2 +
 .../Using CSS Frameworks for styling.md       |  11 +-
 Styling Matters/Working with Tailwind.md      |   4 +-
 .../Adding comments to HTML and JS.md         |  41 +++++++
 ...an - comparisons and logical operations.md |  27 +++++
 .../Find the length of a string.md            |   3 +
 .../Introduction to strings.md                |  34 ++++++
 .../Join strings together.md                  |   3 +
 Working with JavaScript data types/Numbers.md |   6 +
 .../Putting HTML and JS together.md           |   7 ++
 ...arch for a string inside another string.md |   3 +
 .../Sort a collection of strings.md           |   3 +
 .../Split strings by a pattern.md             |   1 +
 .../String equality comparison.md             |   1 +
 ...reate a function to validate passphrase.md |  38 ++++++
 .../WD101 Halfway feedback form.md            |   1 +
 .../What is JavaScript.md                     |  13 ++
 228 files changed, 1100 insertions(+), 20 deletions(-)
 rename {collections => Archive}/a-minimal-ui-for-filtering-flight-search-results/README.md (100%)
 rename {collections => Archive}/a-minimal-ui-for-filtering-flight-search-results/index.html (100%)
 rename {basic-introduction-html-css => Archive/basic-introduction-html-css}/css-and-styling-structure/README.md (100%)
 rename {basic-introduction-html-css => Archive/basic-introduction-html-css}/css-classes-and-selectors/README.md (100%)
 rename {basic-introduction-html-css => Archive/basic-introduction-html-css}/css-styling-overrides/README.md (100%)
 rename {basic-introduction-html-css => Archive/basic-introduction-html-css}/html-css-js-comments/README.md (100%)
 rename {basic-introduction-html-css => Archive/basic-introduction-html-css}/html-elements/README.md (100%)
 rename {basic-introduction-html-css => Archive/basic-introduction-html-css}/html-semantics/README.md (100%)
 rename {basic-introduction-html-css => Archive/basic-introduction-html-css}/learn-more-about-html/README.md (100%)
 rename {basic-introduction-html-css => Archive/basic-introduction-html-css}/linking-pages-and-elements/README.md (100%)
 rename {basic-introduction-html-css => Archive/basic-introduction-html-css}/putting-together-html-css-js/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/absolute-and-relative-file-paths/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/absolute-and-relative-file-paths/images/idle.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/absolute-and-relative-file-paths/index.html (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/absolute-and-relative-file-paths/main.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/final.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/images/idle/1.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/images/idle/2.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/images/idle/3.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/images/idle/4.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/images/idle/5.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/images/idle/6.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/images/idle/7.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/images/idle/8.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/index.html (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/animating-with-images/main.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/dynamic-drawings/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/dynamic-drawings/final.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/dynamic-drawings/index.html (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/dynamic-drawings/main.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/first-steps-with-canvas/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/first-steps-with-canvas/index.html (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/first-steps-with-canvas/main.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/install-node-js/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/intro/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-external-images/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-external-images/images/idle.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-external-images/index.html (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-external-images/main.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/final.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/idle/1.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/idle/2.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/idle/3.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/idle/4.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/idle/5.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/idle/6.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/idle/7.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/idle/8.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/kick/1.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/kick/2.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/kick/3.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/kick/4.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/kick/5.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/kick/6.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/kick/7.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/punch/1.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/punch/2.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/punch/3.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/punch/4.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/punch/5.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/punch/6.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/images/punch/7.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/index.html (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/loading-multiple-animations/main.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/martial-arts-sim-intro/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/final.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/background.jpg (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/backward/1.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/backward/2.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/backward/3.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/backward/4.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/backward/5.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/backward/6.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/block/1.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/block/2.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/block/3.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/block/4.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/block/5.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/block/6.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/block/7.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/block/8.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/block/9.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/forward/1.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/forward/2.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/forward/3.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/forward/4.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/forward/5.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/forward/6.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/idle/1.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/idle/2.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/idle/3.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/idle/4.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/idle/5.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/idle/6.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/idle/7.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/idle/8.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/kick/1.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/kick/2.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/kick/3.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/kick/4.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/kick/5.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/kick/6.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/kick/7.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/punch/1.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/punch/2.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/punch/3.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/punch/4.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/punch/5.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/punch/6.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/images/punch/7.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/index.html (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/taking-control/main.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/using-callbacks/README.md (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/using-callbacks/final.js (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/using-callbacks/images/idle.png (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/using-callbacks/index.html (100%)
 rename {building-a-game-with-canvas => Archive/building-a-game-with-canvas}/using-callbacks/main.js (100%)
 rename {building-web-forms => Archive/building-web-forms}/creating-form-validations/README.md (100%)
 rename {building-web-forms => Archive/building-web-forms}/creating-your-first-form/README.md (100%)
 rename {building-web-forms => Archive/building-web-forms}/creating-your-first-form/sample_user_form.jpg (100%)
 rename {building-web-forms => Archive/building-web-forms}/form-and-form-elements/README.md (100%)
 rename {building-web-forms => Archive/building-web-forms}/learn-more-forms/README.md (100%)
 rename {building-web-forms => Archive/building-web-forms}/load-from-web-storage/README.md (100%)
 rename {building-web-forms => Archive/building-web-forms}/submitting-user-data/README.md (100%)
 rename {building-web-forms => Archive/building-web-forms}/web-storage/README.md (100%)
 rename {building-web-forms => Archive/building-web-forms}/why-html-forms/README.md (100%)
 rename {capstone-project => Archive/capstone-project}/README.md (100%)
 rename {functions => Archive/functions}/need-additional-help/README.md (100%)
 rename {functions => Archive/functions}/need-additional-help/final.js (100%)
 rename {introduction => Archive/introduction}/how-to-get-help/README.md (100%)
 rename {introduction => Archive/introduction}/how-to-get-help/revised-community-guideline/README.md (100%)
 rename {introduction => Archive/introduction}/install-prettier-plugin-in-vscode/README.md (100%)
 rename {introduction => Archive/introduction}/install-prettier-plugin-in-vscode/format.js (100%)
 rename {introduction => Archive/introduction}/installing-ubuntu-linux-using-virtualbox/README.md (100%)
 rename {introduction => Archive/introduction}/installing-ubuntu-linux-using-wsl/README.md (100%)
 rename {introduction => Archive/introduction}/installing-vscode/README.md (100%)
 rename {introduction => Archive/introduction}/web-browsers/README.md (100%)
 rename {numbers-booleans-objects => Archive/numbers-booleans-objects}/accessing-data-in-js-objects/README.md (100%)
 rename {numbers-booleans-objects => Archive/numbers-booleans-objects}/add-update-delete-objects/README.md (100%)
 rename {numbers-booleans-objects => Archive/numbers-booleans-objects}/create-a-function-to-validate-passphrase/README.md (100%)
 rename {numbers-booleans-objects => Archive/numbers-booleans-objects}/creating-and-working-with-objects/README.md (100%)
 rename {numbers-booleans-objects => Archive/numbers-booleans-objects}/manipulating-objects/README.md (100%)
 rename {style-matters => Archive/style-matters}/introduction-to-css-frameworks/README.md (100%)
 rename {style-matters => Archive/style-matters}/introduction-to-tailwind-css/README.md (100%)
 rename {style-matters => Archive/style-matters}/introduction-to-tailwind-css/_templates/index.css (100%)
 rename {style-matters => Archive/style-matters}/introduction-to-tailwind-css/_templates/index.end.html (100%)
 rename {style-matters => Archive/style-matters}/introduction-to-tailwind-css/_templates/index.start.html (100%)
 rename {style-matters => Archive/style-matters}/introduction-to-tailwind-css/index.css (100%)
 rename {style-matters => Archive/style-matters}/introduction-to-tailwind-css/index.html (100%)
 rename {style-matters => Archive/style-matters}/styling-html-using-css-files/README.md (100%)
 rename {style-matters => Archive/style-matters}/styling-html-using-css-files/_templates/index.css (100%)
 rename {style-matters => Archive/style-matters}/styling-html-using-css-files/_templates/index.end.html (100%)
 rename {style-matters => Archive/style-matters}/styling-html-using-css-files/_templates/index.start.html (100%)
 rename {style-matters => Archive/style-matters}/styling-html-using-css-files/index.css (100%)
 rename {style-matters => Archive/style-matters}/styling-html-using-css-files/index.html (100%)
 rename {style-matters => Archive/style-matters}/tailwinds-relationship-with-javascript/README.md (100%)
 rename {style-matters => Archive/style-matters}/using-css-framework-for-styling/README.md (100%)
 rename {style-matters => Archive/style-matters}/working-with-tailwind/README.md (100%)
 rename {style-matters => Archive/style-matters}/working-with-tailwind/_templates/index.end.html (100%)
 rename {style-matters => Archive/style-matters}/working-with-tailwind/_templates/index.start.html (100%)
 rename {style-matters => Archive/style-matters}/working-with-tailwind/index.html (100%)
 rename {working-with-strings => Archive/working-with-strings}/adding-comments-to-html-and-js/README.md (100%)
 rename {working-with-strings => Archive/working-with-strings}/putting-html-and-js-together/README.md (100%)
 rename {working-with-strings => Archive/working-with-strings}/what-is-javascript/README.md (100%)
 rename {working-with-strings => Archive/working-with-strings}/what-is-javascript/index.html (100%)
 create mode 100644 Basics of JavaScript data structures/A minimal UI for filtering flight search results.md
 create mode 100644 Basics of JavaScript data structures/Accessing data in Objects.md
 create mode 100644 Basics of JavaScript data structures/Add, delete, and update Object properties.md
 create mode 100644 Basics of JavaScript data structures/Arrays - handling ordered values.md
 create mode 100644 Basics of JavaScript data structures/Creating and working with Objects.md
 create mode 100644 Basics of JavaScript data structures/Filter an array based on some criteria.md
 create mode 100644 Basics of JavaScript data structures/Generate an HTML list from an array using the map function.md
 create mode 100644 Basics of JavaScript data structures/Generate an HTML list from an array.md
 create mode 100644 Basics of JavaScript data structures/Iterating over an array using the forEach method.md
 create mode 100644 Basics of JavaScript data structures/Manipulating Objects.md
 create mode 100644 Basics of JavaScript data structures/Nested Array iteration.md
 create mode 100644 Basics of JavaScript data structures/Task: Create a function to filter data.md
 create mode 100644 Basics of JavaScript data structures/Transforming Nested Arrays.md
 create mode 100644 Basics of JavaScript data structures/Transforming from one array to another using the map method.md
 create mode 100644 Basics of JavaScript data structures/Use the index of the array value with filter.md
 create mode 100644 Basics of JavaScript data structures/Using index of array value with map.md
 create mode 100644 Basics of JavaScript data structures/Using the index of the array value during iteration.md
 create mode 100644 Creating a registration with validations /Capstone: Deploy the registration page to GitHub pages.md
 create mode 100644 Creating a registration with validations /Creating Validations.md
 create mode 100644 Creating a registration with validations /Creating your First Form.md
 create mode 100644 Creating a registration with validations /First steps with Form and Form elements.md
 create mode 100644 Creating a registration with validations /Introduction to Web Storage.md
 create mode 100644 Creating a registration with validations /Learn more about Forms.md
 create mode 100644 Creating a registration with validations /Submit and View Inputs from Web Storage.md
 create mode 100644 Creating a registration with validations /Submitting user data from Forms.md
 create mode 100644 Creating a registration with validations /WD101 Completion feedback form.md
 create mode 100644 Creating a registration with validations /Why should you learn about the HTML Form element and Form data?.md

diff --git a/collections/a-minimal-ui-for-filtering-flight-search-results/README.md b/Archive/a-minimal-ui-for-filtering-flight-search-results/README.md
similarity index 100%
rename from collections/a-minimal-ui-for-filtering-flight-search-results/README.md
rename to Archive/a-minimal-ui-for-filtering-flight-search-results/README.md
diff --git a/collections/a-minimal-ui-for-filtering-flight-search-results/index.html b/Archive/a-minimal-ui-for-filtering-flight-search-results/index.html
similarity index 100%
rename from collections/a-minimal-ui-for-filtering-flight-search-results/index.html
rename to Archive/a-minimal-ui-for-filtering-flight-search-results/index.html
diff --git a/basic-introduction-html-css/css-and-styling-structure/README.md b/Archive/basic-introduction-html-css/css-and-styling-structure/README.md
similarity index 100%
rename from basic-introduction-html-css/css-and-styling-structure/README.md
rename to Archive/basic-introduction-html-css/css-and-styling-structure/README.md
diff --git a/basic-introduction-html-css/css-classes-and-selectors/README.md b/Archive/basic-introduction-html-css/css-classes-and-selectors/README.md
similarity index 100%
rename from basic-introduction-html-css/css-classes-and-selectors/README.md
rename to Archive/basic-introduction-html-css/css-classes-and-selectors/README.md
diff --git a/basic-introduction-html-css/css-styling-overrides/README.md b/Archive/basic-introduction-html-css/css-styling-overrides/README.md
similarity index 100%
rename from basic-introduction-html-css/css-styling-overrides/README.md
rename to Archive/basic-introduction-html-css/css-styling-overrides/README.md
diff --git a/basic-introduction-html-css/html-css-js-comments/README.md b/Archive/basic-introduction-html-css/html-css-js-comments/README.md
similarity index 100%
rename from basic-introduction-html-css/html-css-js-comments/README.md
rename to Archive/basic-introduction-html-css/html-css-js-comments/README.md
diff --git a/basic-introduction-html-css/html-elements/README.md b/Archive/basic-introduction-html-css/html-elements/README.md
similarity index 100%
rename from basic-introduction-html-css/html-elements/README.md
rename to Archive/basic-introduction-html-css/html-elements/README.md
diff --git a/basic-introduction-html-css/html-semantics/README.md b/Archive/basic-introduction-html-css/html-semantics/README.md
similarity index 100%
rename from basic-introduction-html-css/html-semantics/README.md
rename to Archive/basic-introduction-html-css/html-semantics/README.md
diff --git a/basic-introduction-html-css/learn-more-about-html/README.md b/Archive/basic-introduction-html-css/learn-more-about-html/README.md
similarity index 100%
rename from basic-introduction-html-css/learn-more-about-html/README.md
rename to Archive/basic-introduction-html-css/learn-more-about-html/README.md
diff --git a/basic-introduction-html-css/linking-pages-and-elements/README.md b/Archive/basic-introduction-html-css/linking-pages-and-elements/README.md
similarity index 100%
rename from basic-introduction-html-css/linking-pages-and-elements/README.md
rename to Archive/basic-introduction-html-css/linking-pages-and-elements/README.md
diff --git a/basic-introduction-html-css/putting-together-html-css-js/README.md b/Archive/basic-introduction-html-css/putting-together-html-css-js/README.md
similarity index 100%
rename from basic-introduction-html-css/putting-together-html-css-js/README.md
rename to Archive/basic-introduction-html-css/putting-together-html-css-js/README.md
diff --git a/building-a-game-with-canvas/absolute-and-relative-file-paths/README.md b/Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/README.md
similarity index 100%
rename from building-a-game-with-canvas/absolute-and-relative-file-paths/README.md
rename to Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/README.md
diff --git a/building-a-game-with-canvas/absolute-and-relative-file-paths/images/idle.png b/Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/images/idle.png
similarity index 100%
rename from building-a-game-with-canvas/absolute-and-relative-file-paths/images/idle.png
rename to Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/images/idle.png
diff --git a/building-a-game-with-canvas/absolute-and-relative-file-paths/index.html b/Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/index.html
similarity index 100%
rename from building-a-game-with-canvas/absolute-and-relative-file-paths/index.html
rename to Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/index.html
diff --git a/building-a-game-with-canvas/absolute-and-relative-file-paths/main.js b/Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/main.js
similarity index 100%
rename from building-a-game-with-canvas/absolute-and-relative-file-paths/main.js
rename to Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/main.js
diff --git a/building-a-game-with-canvas/animating-with-images/README.md b/Archive/building-a-game-with-canvas/animating-with-images/README.md
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/README.md
rename to Archive/building-a-game-with-canvas/animating-with-images/README.md
diff --git a/building-a-game-with-canvas/animating-with-images/final.js b/Archive/building-a-game-with-canvas/animating-with-images/final.js
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/final.js
rename to Archive/building-a-game-with-canvas/animating-with-images/final.js
diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/1.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/1.png
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/images/idle/1.png
rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/1.png
diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/2.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/2.png
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/images/idle/2.png
rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/2.png
diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/3.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/3.png
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/images/idle/3.png
rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/3.png
diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/4.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/4.png
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/images/idle/4.png
rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/4.png
diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/5.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/5.png
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/images/idle/5.png
rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/5.png
diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/6.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/6.png
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/images/idle/6.png
rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/6.png
diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/7.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/7.png
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/images/idle/7.png
rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/7.png
diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/8.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/8.png
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/images/idle/8.png
rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/8.png
diff --git a/building-a-game-with-canvas/animating-with-images/index.html b/Archive/building-a-game-with-canvas/animating-with-images/index.html
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/index.html
rename to Archive/building-a-game-with-canvas/animating-with-images/index.html
diff --git a/building-a-game-with-canvas/animating-with-images/main.js b/Archive/building-a-game-with-canvas/animating-with-images/main.js
similarity index 100%
rename from building-a-game-with-canvas/animating-with-images/main.js
rename to Archive/building-a-game-with-canvas/animating-with-images/main.js
diff --git a/building-a-game-with-canvas/dynamic-drawings/README.md b/Archive/building-a-game-with-canvas/dynamic-drawings/README.md
similarity index 100%
rename from building-a-game-with-canvas/dynamic-drawings/README.md
rename to Archive/building-a-game-with-canvas/dynamic-drawings/README.md
diff --git a/building-a-game-with-canvas/dynamic-drawings/final.js b/Archive/building-a-game-with-canvas/dynamic-drawings/final.js
similarity index 100%
rename from building-a-game-with-canvas/dynamic-drawings/final.js
rename to Archive/building-a-game-with-canvas/dynamic-drawings/final.js
diff --git a/building-a-game-with-canvas/dynamic-drawings/index.html b/Archive/building-a-game-with-canvas/dynamic-drawings/index.html
similarity index 100%
rename from building-a-game-with-canvas/dynamic-drawings/index.html
rename to Archive/building-a-game-with-canvas/dynamic-drawings/index.html
diff --git a/building-a-game-with-canvas/dynamic-drawings/main.js b/Archive/building-a-game-with-canvas/dynamic-drawings/main.js
similarity index 100%
rename from building-a-game-with-canvas/dynamic-drawings/main.js
rename to Archive/building-a-game-with-canvas/dynamic-drawings/main.js
diff --git a/building-a-game-with-canvas/first-steps-with-canvas/README.md b/Archive/building-a-game-with-canvas/first-steps-with-canvas/README.md
similarity index 100%
rename from building-a-game-with-canvas/first-steps-with-canvas/README.md
rename to Archive/building-a-game-with-canvas/first-steps-with-canvas/README.md
diff --git a/building-a-game-with-canvas/first-steps-with-canvas/index.html b/Archive/building-a-game-with-canvas/first-steps-with-canvas/index.html
similarity index 100%
rename from building-a-game-with-canvas/first-steps-with-canvas/index.html
rename to Archive/building-a-game-with-canvas/first-steps-with-canvas/index.html
diff --git a/building-a-game-with-canvas/first-steps-with-canvas/main.js b/Archive/building-a-game-with-canvas/first-steps-with-canvas/main.js
similarity index 100%
rename from building-a-game-with-canvas/first-steps-with-canvas/main.js
rename to Archive/building-a-game-with-canvas/first-steps-with-canvas/main.js
diff --git a/building-a-game-with-canvas/install-node-js/README.md b/Archive/building-a-game-with-canvas/install-node-js/README.md
similarity index 100%
rename from building-a-game-with-canvas/install-node-js/README.md
rename to Archive/building-a-game-with-canvas/install-node-js/README.md
diff --git a/building-a-game-with-canvas/intro/README.md b/Archive/building-a-game-with-canvas/intro/README.md
similarity index 100%
rename from building-a-game-with-canvas/intro/README.md
rename to Archive/building-a-game-with-canvas/intro/README.md
diff --git a/building-a-game-with-canvas/loading-external-images/README.md b/Archive/building-a-game-with-canvas/loading-external-images/README.md
similarity index 100%
rename from building-a-game-with-canvas/loading-external-images/README.md
rename to Archive/building-a-game-with-canvas/loading-external-images/README.md
diff --git a/building-a-game-with-canvas/loading-external-images/images/idle.png b/Archive/building-a-game-with-canvas/loading-external-images/images/idle.png
similarity index 100%
rename from building-a-game-with-canvas/loading-external-images/images/idle.png
rename to Archive/building-a-game-with-canvas/loading-external-images/images/idle.png
diff --git a/building-a-game-with-canvas/loading-external-images/index.html b/Archive/building-a-game-with-canvas/loading-external-images/index.html
similarity index 100%
rename from building-a-game-with-canvas/loading-external-images/index.html
rename to Archive/building-a-game-with-canvas/loading-external-images/index.html
diff --git a/building-a-game-with-canvas/loading-external-images/main.js b/Archive/building-a-game-with-canvas/loading-external-images/main.js
similarity index 100%
rename from building-a-game-with-canvas/loading-external-images/main.js
rename to Archive/building-a-game-with-canvas/loading-external-images/main.js
diff --git a/building-a-game-with-canvas/loading-multiple-animations/README.md b/Archive/building-a-game-with-canvas/loading-multiple-animations/README.md
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/README.md
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/README.md
diff --git a/building-a-game-with-canvas/loading-multiple-animations/final.js b/Archive/building-a-game-with-canvas/loading-multiple-animations/final.js
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/final.js
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/final.js
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/1.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/1.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/1.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/1.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/2.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/2.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/2.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/2.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/3.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/3.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/3.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/3.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/4.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/4.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/4.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/4.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/5.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/5.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/5.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/5.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/6.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/6.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/6.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/6.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/7.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/7.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/7.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/7.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/8.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/8.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/8.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/8.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/1.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/1.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/1.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/1.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/2.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/2.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/2.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/2.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/3.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/3.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/3.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/3.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/4.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/4.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/4.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/4.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/5.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/5.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/5.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/5.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/6.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/6.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/6.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/6.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/7.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/7.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/7.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/7.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/1.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/1.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/1.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/1.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/2.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/2.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/2.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/2.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/3.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/3.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/3.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/3.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/4.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/4.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/4.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/4.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/5.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/5.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/5.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/5.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/6.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/6.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/6.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/6.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/7.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/7.png
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/7.png
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/7.png
diff --git a/building-a-game-with-canvas/loading-multiple-animations/index.html b/Archive/building-a-game-with-canvas/loading-multiple-animations/index.html
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/index.html
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/index.html
diff --git a/building-a-game-with-canvas/loading-multiple-animations/main.js b/Archive/building-a-game-with-canvas/loading-multiple-animations/main.js
similarity index 100%
rename from building-a-game-with-canvas/loading-multiple-animations/main.js
rename to Archive/building-a-game-with-canvas/loading-multiple-animations/main.js
diff --git a/building-a-game-with-canvas/martial-arts-sim-intro/README.md b/Archive/building-a-game-with-canvas/martial-arts-sim-intro/README.md
similarity index 100%
rename from building-a-game-with-canvas/martial-arts-sim-intro/README.md
rename to Archive/building-a-game-with-canvas/martial-arts-sim-intro/README.md
diff --git a/building-a-game-with-canvas/taking-control/README.md b/Archive/building-a-game-with-canvas/taking-control/README.md
similarity index 100%
rename from building-a-game-with-canvas/taking-control/README.md
rename to Archive/building-a-game-with-canvas/taking-control/README.md
diff --git a/building-a-game-with-canvas/taking-control/final.js b/Archive/building-a-game-with-canvas/taking-control/final.js
similarity index 100%
rename from building-a-game-with-canvas/taking-control/final.js
rename to Archive/building-a-game-with-canvas/taking-control/final.js
diff --git a/building-a-game-with-canvas/taking-control/images/background.jpg b/Archive/building-a-game-with-canvas/taking-control/images/background.jpg
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/background.jpg
rename to Archive/building-a-game-with-canvas/taking-control/images/background.jpg
diff --git a/building-a-game-with-canvas/taking-control/images/backward/1.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/1.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/backward/1.png
rename to Archive/building-a-game-with-canvas/taking-control/images/backward/1.png
diff --git a/building-a-game-with-canvas/taking-control/images/backward/2.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/2.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/backward/2.png
rename to Archive/building-a-game-with-canvas/taking-control/images/backward/2.png
diff --git a/building-a-game-with-canvas/taking-control/images/backward/3.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/3.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/backward/3.png
rename to Archive/building-a-game-with-canvas/taking-control/images/backward/3.png
diff --git a/building-a-game-with-canvas/taking-control/images/backward/4.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/4.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/backward/4.png
rename to Archive/building-a-game-with-canvas/taking-control/images/backward/4.png
diff --git a/building-a-game-with-canvas/taking-control/images/backward/5.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/5.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/backward/5.png
rename to Archive/building-a-game-with-canvas/taking-control/images/backward/5.png
diff --git a/building-a-game-with-canvas/taking-control/images/backward/6.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/6.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/backward/6.png
rename to Archive/building-a-game-with-canvas/taking-control/images/backward/6.png
diff --git a/building-a-game-with-canvas/taking-control/images/block/1.png b/Archive/building-a-game-with-canvas/taking-control/images/block/1.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/block/1.png
rename to Archive/building-a-game-with-canvas/taking-control/images/block/1.png
diff --git a/building-a-game-with-canvas/taking-control/images/block/2.png b/Archive/building-a-game-with-canvas/taking-control/images/block/2.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/block/2.png
rename to Archive/building-a-game-with-canvas/taking-control/images/block/2.png
diff --git a/building-a-game-with-canvas/taking-control/images/block/3.png b/Archive/building-a-game-with-canvas/taking-control/images/block/3.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/block/3.png
rename to Archive/building-a-game-with-canvas/taking-control/images/block/3.png
diff --git a/building-a-game-with-canvas/taking-control/images/block/4.png b/Archive/building-a-game-with-canvas/taking-control/images/block/4.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/block/4.png
rename to Archive/building-a-game-with-canvas/taking-control/images/block/4.png
diff --git a/building-a-game-with-canvas/taking-control/images/block/5.png b/Archive/building-a-game-with-canvas/taking-control/images/block/5.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/block/5.png
rename to Archive/building-a-game-with-canvas/taking-control/images/block/5.png
diff --git a/building-a-game-with-canvas/taking-control/images/block/6.png b/Archive/building-a-game-with-canvas/taking-control/images/block/6.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/block/6.png
rename to Archive/building-a-game-with-canvas/taking-control/images/block/6.png
diff --git a/building-a-game-with-canvas/taking-control/images/block/7.png b/Archive/building-a-game-with-canvas/taking-control/images/block/7.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/block/7.png
rename to Archive/building-a-game-with-canvas/taking-control/images/block/7.png
diff --git a/building-a-game-with-canvas/taking-control/images/block/8.png b/Archive/building-a-game-with-canvas/taking-control/images/block/8.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/block/8.png
rename to Archive/building-a-game-with-canvas/taking-control/images/block/8.png
diff --git a/building-a-game-with-canvas/taking-control/images/block/9.png b/Archive/building-a-game-with-canvas/taking-control/images/block/9.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/block/9.png
rename to Archive/building-a-game-with-canvas/taking-control/images/block/9.png
diff --git a/building-a-game-with-canvas/taking-control/images/forward/1.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/1.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/forward/1.png
rename to Archive/building-a-game-with-canvas/taking-control/images/forward/1.png
diff --git a/building-a-game-with-canvas/taking-control/images/forward/2.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/2.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/forward/2.png
rename to Archive/building-a-game-with-canvas/taking-control/images/forward/2.png
diff --git a/building-a-game-with-canvas/taking-control/images/forward/3.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/3.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/forward/3.png
rename to Archive/building-a-game-with-canvas/taking-control/images/forward/3.png
diff --git a/building-a-game-with-canvas/taking-control/images/forward/4.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/4.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/forward/4.png
rename to Archive/building-a-game-with-canvas/taking-control/images/forward/4.png
diff --git a/building-a-game-with-canvas/taking-control/images/forward/5.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/5.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/forward/5.png
rename to Archive/building-a-game-with-canvas/taking-control/images/forward/5.png
diff --git a/building-a-game-with-canvas/taking-control/images/forward/6.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/6.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/forward/6.png
rename to Archive/building-a-game-with-canvas/taking-control/images/forward/6.png
diff --git a/building-a-game-with-canvas/taking-control/images/idle/1.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/1.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/idle/1.png
rename to Archive/building-a-game-with-canvas/taking-control/images/idle/1.png
diff --git a/building-a-game-with-canvas/taking-control/images/idle/2.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/2.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/idle/2.png
rename to Archive/building-a-game-with-canvas/taking-control/images/idle/2.png
diff --git a/building-a-game-with-canvas/taking-control/images/idle/3.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/3.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/idle/3.png
rename to Archive/building-a-game-with-canvas/taking-control/images/idle/3.png
diff --git a/building-a-game-with-canvas/taking-control/images/idle/4.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/4.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/idle/4.png
rename to Archive/building-a-game-with-canvas/taking-control/images/idle/4.png
diff --git a/building-a-game-with-canvas/taking-control/images/idle/5.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/5.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/idle/5.png
rename to Archive/building-a-game-with-canvas/taking-control/images/idle/5.png
diff --git a/building-a-game-with-canvas/taking-control/images/idle/6.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/6.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/idle/6.png
rename to Archive/building-a-game-with-canvas/taking-control/images/idle/6.png
diff --git a/building-a-game-with-canvas/taking-control/images/idle/7.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/7.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/idle/7.png
rename to Archive/building-a-game-with-canvas/taking-control/images/idle/7.png
diff --git a/building-a-game-with-canvas/taking-control/images/idle/8.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/8.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/idle/8.png
rename to Archive/building-a-game-with-canvas/taking-control/images/idle/8.png
diff --git a/building-a-game-with-canvas/taking-control/images/kick/1.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/1.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/kick/1.png
rename to Archive/building-a-game-with-canvas/taking-control/images/kick/1.png
diff --git a/building-a-game-with-canvas/taking-control/images/kick/2.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/2.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/kick/2.png
rename to Archive/building-a-game-with-canvas/taking-control/images/kick/2.png
diff --git a/building-a-game-with-canvas/taking-control/images/kick/3.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/3.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/kick/3.png
rename to Archive/building-a-game-with-canvas/taking-control/images/kick/3.png
diff --git a/building-a-game-with-canvas/taking-control/images/kick/4.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/4.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/kick/4.png
rename to Archive/building-a-game-with-canvas/taking-control/images/kick/4.png
diff --git a/building-a-game-with-canvas/taking-control/images/kick/5.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/5.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/kick/5.png
rename to Archive/building-a-game-with-canvas/taking-control/images/kick/5.png
diff --git a/building-a-game-with-canvas/taking-control/images/kick/6.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/6.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/kick/6.png
rename to Archive/building-a-game-with-canvas/taking-control/images/kick/6.png
diff --git a/building-a-game-with-canvas/taking-control/images/kick/7.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/7.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/kick/7.png
rename to Archive/building-a-game-with-canvas/taking-control/images/kick/7.png
diff --git a/building-a-game-with-canvas/taking-control/images/punch/1.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/1.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/punch/1.png
rename to Archive/building-a-game-with-canvas/taking-control/images/punch/1.png
diff --git a/building-a-game-with-canvas/taking-control/images/punch/2.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/2.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/punch/2.png
rename to Archive/building-a-game-with-canvas/taking-control/images/punch/2.png
diff --git a/building-a-game-with-canvas/taking-control/images/punch/3.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/3.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/punch/3.png
rename to Archive/building-a-game-with-canvas/taking-control/images/punch/3.png
diff --git a/building-a-game-with-canvas/taking-control/images/punch/4.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/4.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/punch/4.png
rename to Archive/building-a-game-with-canvas/taking-control/images/punch/4.png
diff --git a/building-a-game-with-canvas/taking-control/images/punch/5.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/5.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/punch/5.png
rename to Archive/building-a-game-with-canvas/taking-control/images/punch/5.png
diff --git a/building-a-game-with-canvas/taking-control/images/punch/6.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/6.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/punch/6.png
rename to Archive/building-a-game-with-canvas/taking-control/images/punch/6.png
diff --git a/building-a-game-with-canvas/taking-control/images/punch/7.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/7.png
similarity index 100%
rename from building-a-game-with-canvas/taking-control/images/punch/7.png
rename to Archive/building-a-game-with-canvas/taking-control/images/punch/7.png
diff --git a/building-a-game-with-canvas/taking-control/index.html b/Archive/building-a-game-with-canvas/taking-control/index.html
similarity index 100%
rename from building-a-game-with-canvas/taking-control/index.html
rename to Archive/building-a-game-with-canvas/taking-control/index.html
diff --git a/building-a-game-with-canvas/taking-control/main.js b/Archive/building-a-game-with-canvas/taking-control/main.js
similarity index 100%
rename from building-a-game-with-canvas/taking-control/main.js
rename to Archive/building-a-game-with-canvas/taking-control/main.js
diff --git a/building-a-game-with-canvas/using-callbacks/README.md b/Archive/building-a-game-with-canvas/using-callbacks/README.md
similarity index 100%
rename from building-a-game-with-canvas/using-callbacks/README.md
rename to Archive/building-a-game-with-canvas/using-callbacks/README.md
diff --git a/building-a-game-with-canvas/using-callbacks/final.js b/Archive/building-a-game-with-canvas/using-callbacks/final.js
similarity index 100%
rename from building-a-game-with-canvas/using-callbacks/final.js
rename to Archive/building-a-game-with-canvas/using-callbacks/final.js
diff --git a/building-a-game-with-canvas/using-callbacks/images/idle.png b/Archive/building-a-game-with-canvas/using-callbacks/images/idle.png
similarity index 100%
rename from building-a-game-with-canvas/using-callbacks/images/idle.png
rename to Archive/building-a-game-with-canvas/using-callbacks/images/idle.png
diff --git a/building-a-game-with-canvas/using-callbacks/index.html b/Archive/building-a-game-with-canvas/using-callbacks/index.html
similarity index 100%
rename from building-a-game-with-canvas/using-callbacks/index.html
rename to Archive/building-a-game-with-canvas/using-callbacks/index.html
diff --git a/building-a-game-with-canvas/using-callbacks/main.js b/Archive/building-a-game-with-canvas/using-callbacks/main.js
similarity index 100%
rename from building-a-game-with-canvas/using-callbacks/main.js
rename to Archive/building-a-game-with-canvas/using-callbacks/main.js
diff --git a/building-web-forms/creating-form-validations/README.md b/Archive/building-web-forms/creating-form-validations/README.md
similarity index 100%
rename from building-web-forms/creating-form-validations/README.md
rename to Archive/building-web-forms/creating-form-validations/README.md
diff --git a/building-web-forms/creating-your-first-form/README.md b/Archive/building-web-forms/creating-your-first-form/README.md
similarity index 100%
rename from building-web-forms/creating-your-first-form/README.md
rename to Archive/building-web-forms/creating-your-first-form/README.md
diff --git a/building-web-forms/creating-your-first-form/sample_user_form.jpg b/Archive/building-web-forms/creating-your-first-form/sample_user_form.jpg
similarity index 100%
rename from building-web-forms/creating-your-first-form/sample_user_form.jpg
rename to Archive/building-web-forms/creating-your-first-form/sample_user_form.jpg
diff --git a/building-web-forms/form-and-form-elements/README.md b/Archive/building-web-forms/form-and-form-elements/README.md
similarity index 100%
rename from building-web-forms/form-and-form-elements/README.md
rename to Archive/building-web-forms/form-and-form-elements/README.md
diff --git a/building-web-forms/learn-more-forms/README.md b/Archive/building-web-forms/learn-more-forms/README.md
similarity index 100%
rename from building-web-forms/learn-more-forms/README.md
rename to Archive/building-web-forms/learn-more-forms/README.md
diff --git a/building-web-forms/load-from-web-storage/README.md b/Archive/building-web-forms/load-from-web-storage/README.md
similarity index 100%
rename from building-web-forms/load-from-web-storage/README.md
rename to Archive/building-web-forms/load-from-web-storage/README.md
diff --git a/building-web-forms/submitting-user-data/README.md b/Archive/building-web-forms/submitting-user-data/README.md
similarity index 100%
rename from building-web-forms/submitting-user-data/README.md
rename to Archive/building-web-forms/submitting-user-data/README.md
diff --git a/building-web-forms/web-storage/README.md b/Archive/building-web-forms/web-storage/README.md
similarity index 100%
rename from building-web-forms/web-storage/README.md
rename to Archive/building-web-forms/web-storage/README.md
diff --git a/building-web-forms/why-html-forms/README.md b/Archive/building-web-forms/why-html-forms/README.md
similarity index 100%
rename from building-web-forms/why-html-forms/README.md
rename to Archive/building-web-forms/why-html-forms/README.md
diff --git a/capstone-project/README.md b/Archive/capstone-project/README.md
similarity index 100%
rename from capstone-project/README.md
rename to Archive/capstone-project/README.md
diff --git a/functions/need-additional-help/README.md b/Archive/functions/need-additional-help/README.md
similarity index 100%
rename from functions/need-additional-help/README.md
rename to Archive/functions/need-additional-help/README.md
diff --git a/functions/need-additional-help/final.js b/Archive/functions/need-additional-help/final.js
similarity index 100%
rename from functions/need-additional-help/final.js
rename to Archive/functions/need-additional-help/final.js
diff --git a/introduction/how-to-get-help/README.md b/Archive/introduction/how-to-get-help/README.md
similarity index 100%
rename from introduction/how-to-get-help/README.md
rename to Archive/introduction/how-to-get-help/README.md
diff --git a/introduction/how-to-get-help/revised-community-guideline/README.md b/Archive/introduction/how-to-get-help/revised-community-guideline/README.md
similarity index 100%
rename from introduction/how-to-get-help/revised-community-guideline/README.md
rename to Archive/introduction/how-to-get-help/revised-community-guideline/README.md
diff --git a/introduction/install-prettier-plugin-in-vscode/README.md b/Archive/introduction/install-prettier-plugin-in-vscode/README.md
similarity index 100%
rename from introduction/install-prettier-plugin-in-vscode/README.md
rename to Archive/introduction/install-prettier-plugin-in-vscode/README.md
diff --git a/introduction/install-prettier-plugin-in-vscode/format.js b/Archive/introduction/install-prettier-plugin-in-vscode/format.js
similarity index 100%
rename from introduction/install-prettier-plugin-in-vscode/format.js
rename to Archive/introduction/install-prettier-plugin-in-vscode/format.js
diff --git a/introduction/installing-ubuntu-linux-using-virtualbox/README.md b/Archive/introduction/installing-ubuntu-linux-using-virtualbox/README.md
similarity index 100%
rename from introduction/installing-ubuntu-linux-using-virtualbox/README.md
rename to Archive/introduction/installing-ubuntu-linux-using-virtualbox/README.md
diff --git a/introduction/installing-ubuntu-linux-using-wsl/README.md b/Archive/introduction/installing-ubuntu-linux-using-wsl/README.md
similarity index 100%
rename from introduction/installing-ubuntu-linux-using-wsl/README.md
rename to Archive/introduction/installing-ubuntu-linux-using-wsl/README.md
diff --git a/introduction/installing-vscode/README.md b/Archive/introduction/installing-vscode/README.md
similarity index 100%
rename from introduction/installing-vscode/README.md
rename to Archive/introduction/installing-vscode/README.md
diff --git a/introduction/web-browsers/README.md b/Archive/introduction/web-browsers/README.md
similarity index 100%
rename from introduction/web-browsers/README.md
rename to Archive/introduction/web-browsers/README.md
diff --git a/numbers-booleans-objects/accessing-data-in-js-objects/README.md b/Archive/numbers-booleans-objects/accessing-data-in-js-objects/README.md
similarity index 100%
rename from numbers-booleans-objects/accessing-data-in-js-objects/README.md
rename to Archive/numbers-booleans-objects/accessing-data-in-js-objects/README.md
diff --git a/numbers-booleans-objects/add-update-delete-objects/README.md b/Archive/numbers-booleans-objects/add-update-delete-objects/README.md
similarity index 100%
rename from numbers-booleans-objects/add-update-delete-objects/README.md
rename to Archive/numbers-booleans-objects/add-update-delete-objects/README.md
diff --git a/numbers-booleans-objects/create-a-function-to-validate-passphrase/README.md b/Archive/numbers-booleans-objects/create-a-function-to-validate-passphrase/README.md
similarity index 100%
rename from numbers-booleans-objects/create-a-function-to-validate-passphrase/README.md
rename to Archive/numbers-booleans-objects/create-a-function-to-validate-passphrase/README.md
diff --git a/numbers-booleans-objects/creating-and-working-with-objects/README.md b/Archive/numbers-booleans-objects/creating-and-working-with-objects/README.md
similarity index 100%
rename from numbers-booleans-objects/creating-and-working-with-objects/README.md
rename to Archive/numbers-booleans-objects/creating-and-working-with-objects/README.md
diff --git a/numbers-booleans-objects/manipulating-objects/README.md b/Archive/numbers-booleans-objects/manipulating-objects/README.md
similarity index 100%
rename from numbers-booleans-objects/manipulating-objects/README.md
rename to Archive/numbers-booleans-objects/manipulating-objects/README.md
diff --git a/style-matters/introduction-to-css-frameworks/README.md b/Archive/style-matters/introduction-to-css-frameworks/README.md
similarity index 100%
rename from style-matters/introduction-to-css-frameworks/README.md
rename to Archive/style-matters/introduction-to-css-frameworks/README.md
diff --git a/style-matters/introduction-to-tailwind-css/README.md b/Archive/style-matters/introduction-to-tailwind-css/README.md
similarity index 100%
rename from style-matters/introduction-to-tailwind-css/README.md
rename to Archive/style-matters/introduction-to-tailwind-css/README.md
diff --git a/style-matters/introduction-to-tailwind-css/_templates/index.css b/Archive/style-matters/introduction-to-tailwind-css/_templates/index.css
similarity index 100%
rename from style-matters/introduction-to-tailwind-css/_templates/index.css
rename to Archive/style-matters/introduction-to-tailwind-css/_templates/index.css
diff --git a/style-matters/introduction-to-tailwind-css/_templates/index.end.html b/Archive/style-matters/introduction-to-tailwind-css/_templates/index.end.html
similarity index 100%
rename from style-matters/introduction-to-tailwind-css/_templates/index.end.html
rename to Archive/style-matters/introduction-to-tailwind-css/_templates/index.end.html
diff --git a/style-matters/introduction-to-tailwind-css/_templates/index.start.html b/Archive/style-matters/introduction-to-tailwind-css/_templates/index.start.html
similarity index 100%
rename from style-matters/introduction-to-tailwind-css/_templates/index.start.html
rename to Archive/style-matters/introduction-to-tailwind-css/_templates/index.start.html
diff --git a/style-matters/introduction-to-tailwind-css/index.css b/Archive/style-matters/introduction-to-tailwind-css/index.css
similarity index 100%
rename from style-matters/introduction-to-tailwind-css/index.css
rename to Archive/style-matters/introduction-to-tailwind-css/index.css
diff --git a/style-matters/introduction-to-tailwind-css/index.html b/Archive/style-matters/introduction-to-tailwind-css/index.html
similarity index 100%
rename from style-matters/introduction-to-tailwind-css/index.html
rename to Archive/style-matters/introduction-to-tailwind-css/index.html
diff --git a/style-matters/styling-html-using-css-files/README.md b/Archive/style-matters/styling-html-using-css-files/README.md
similarity index 100%
rename from style-matters/styling-html-using-css-files/README.md
rename to Archive/style-matters/styling-html-using-css-files/README.md
diff --git a/style-matters/styling-html-using-css-files/_templates/index.css b/Archive/style-matters/styling-html-using-css-files/_templates/index.css
similarity index 100%
rename from style-matters/styling-html-using-css-files/_templates/index.css
rename to Archive/style-matters/styling-html-using-css-files/_templates/index.css
diff --git a/style-matters/styling-html-using-css-files/_templates/index.end.html b/Archive/style-matters/styling-html-using-css-files/_templates/index.end.html
similarity index 100%
rename from style-matters/styling-html-using-css-files/_templates/index.end.html
rename to Archive/style-matters/styling-html-using-css-files/_templates/index.end.html
diff --git a/style-matters/styling-html-using-css-files/_templates/index.start.html b/Archive/style-matters/styling-html-using-css-files/_templates/index.start.html
similarity index 100%
rename from style-matters/styling-html-using-css-files/_templates/index.start.html
rename to Archive/style-matters/styling-html-using-css-files/_templates/index.start.html
diff --git a/style-matters/styling-html-using-css-files/index.css b/Archive/style-matters/styling-html-using-css-files/index.css
similarity index 100%
rename from style-matters/styling-html-using-css-files/index.css
rename to Archive/style-matters/styling-html-using-css-files/index.css
diff --git a/style-matters/styling-html-using-css-files/index.html b/Archive/style-matters/styling-html-using-css-files/index.html
similarity index 100%
rename from style-matters/styling-html-using-css-files/index.html
rename to Archive/style-matters/styling-html-using-css-files/index.html
diff --git a/style-matters/tailwinds-relationship-with-javascript/README.md b/Archive/style-matters/tailwinds-relationship-with-javascript/README.md
similarity index 100%
rename from style-matters/tailwinds-relationship-with-javascript/README.md
rename to Archive/style-matters/tailwinds-relationship-with-javascript/README.md
diff --git a/style-matters/using-css-framework-for-styling/README.md b/Archive/style-matters/using-css-framework-for-styling/README.md
similarity index 100%
rename from style-matters/using-css-framework-for-styling/README.md
rename to Archive/style-matters/using-css-framework-for-styling/README.md
diff --git a/style-matters/working-with-tailwind/README.md b/Archive/style-matters/working-with-tailwind/README.md
similarity index 100%
rename from style-matters/working-with-tailwind/README.md
rename to Archive/style-matters/working-with-tailwind/README.md
diff --git a/style-matters/working-with-tailwind/_templates/index.end.html b/Archive/style-matters/working-with-tailwind/_templates/index.end.html
similarity index 100%
rename from style-matters/working-with-tailwind/_templates/index.end.html
rename to Archive/style-matters/working-with-tailwind/_templates/index.end.html
diff --git a/style-matters/working-with-tailwind/_templates/index.start.html b/Archive/style-matters/working-with-tailwind/_templates/index.start.html
similarity index 100%
rename from style-matters/working-with-tailwind/_templates/index.start.html
rename to Archive/style-matters/working-with-tailwind/_templates/index.start.html
diff --git a/style-matters/working-with-tailwind/index.html b/Archive/style-matters/working-with-tailwind/index.html
similarity index 100%
rename from style-matters/working-with-tailwind/index.html
rename to Archive/style-matters/working-with-tailwind/index.html
diff --git a/working-with-strings/adding-comments-to-html-and-js/README.md b/Archive/working-with-strings/adding-comments-to-html-and-js/README.md
similarity index 100%
rename from working-with-strings/adding-comments-to-html-and-js/README.md
rename to Archive/working-with-strings/adding-comments-to-html-and-js/README.md
diff --git a/working-with-strings/putting-html-and-js-together/README.md b/Archive/working-with-strings/putting-html-and-js-together/README.md
similarity index 100%
rename from working-with-strings/putting-html-and-js-together/README.md
rename to Archive/working-with-strings/putting-html-and-js-together/README.md
diff --git a/working-with-strings/what-is-javascript/README.md b/Archive/working-with-strings/what-is-javascript/README.md
similarity index 100%
rename from working-with-strings/what-is-javascript/README.md
rename to Archive/working-with-strings/what-is-javascript/README.md
diff --git a/working-with-strings/what-is-javascript/index.html b/Archive/working-with-strings/what-is-javascript/index.html
similarity index 100%
rename from working-with-strings/what-is-javascript/index.html
rename to Archive/working-with-strings/what-is-javascript/index.html
diff --git a/Basic Introduction to HTML & CSS/CSS and styling structure.md b/Basic Introduction to HTML & CSS/CSS and styling structure.md
index 7f5ec77..6a904e2 100644
--- a/Basic Introduction to HTML & CSS/CSS and styling structure.md	
+++ b/Basic Introduction to HTML & CSS/CSS and styling structure.md	
@@ -1,5 +1,12 @@
-In the past few lessons, you've learned what HTML is and how it is used to mark up documents. But those documents looked very basic in web browsers, didn't it? Headings look larger than regular text, paragraphs break onto a new line and have space between them. Links are coloured and underlined to distinguish them from the rest of the text, etc.
+# Enhancing Web Design with CSS:
 
-The web would be a boring place if all websites looked like that. Using CSS, you can control exactly how HTML elements will look in the browser. Let's learn more about it.
+In our recent lessons, you've gained an understanding of what HTML is and how it's used to structure documents. However, you may have noticed that the documents we created looked quite basic when viewed in web browsers. Headings appeared larger than regular text, paragraphs had spacing and line breaks, and links were colored and underlined to stand out.
+
+## Unleashing Creative Possibilities:
+
+The web would indeed be a boring place if all websites adhered to this basic appearance. This is where Cascading Style Sheets (CSS) come into play. With CSS, you have the power to finely control how HTML elements are presented in the browser, allowing for creativity and customization.
+
+## Exploring CSS:
+
+In the upcoming lessons, we'll delve deeper into the world of CSS. You'll learn how to style HTML elements, apply colors, adjust layouts, and create visually appealing web pages. CSS empowers web developers and designers to transform the look and feel of web content, making each website unique and engaging.
 
-> Note: Always open VSCode from your terminal by using `code .`.
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/CSS classes and selectors.md b/Basic Introduction to HTML & CSS/CSS classes and selectors.md
index 183f901..05151ac 100644
--- a/Basic Introduction to HTML & CSS/CSS classes and selectors.md	
+++ b/Basic Introduction to HTML & CSS/CSS classes and selectors.md	
@@ -1,3 +1,5 @@
+# Selecting Elements for Styling in CSS:
+
 To style different elements in our HTML page, first we have to find a way to refer to those elements. In CSS, selectors are used to **target** the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, which helps us to precisely select which element to style. 
 
 Let's find out how to use these selectors.
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/CSS styling overrides.md b/Basic Introduction to HTML & CSS/CSS styling overrides.md
index e69de29..44a6010 100644
--- a/Basic Introduction to HTML & CSS/CSS styling overrides.md	
+++ b/Basic Introduction to HTML & CSS/CSS styling overrides.md	
@@ -0,0 +1,9 @@
+# Defining CSS Rules in HTML Projects:
+
+We already know that, in any HTML project, there are three different places where we can write our CSS rules:
+
+1. Along with the HTML elements, as inline styles.
+2. Inside HTML `HEAD`, using the `<style>` tag, as an internal style sheet.
+3. By creating an external CSS file and later linking it with the HTML using the `link` tag.
+
+Now the question is, what if we define different CSS rules for a single HTML element, in all of these three places? Then which one would be applied and finally be visible in the browser? Let's find out.
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/HTML & Semantic.md b/Basic Introduction to HTML & CSS/HTML & Semantic.md
index e69de29..24b116c 100644
--- a/Basic Introduction to HTML & CSS/HTML & Semantic.md	
+++ b/Basic Introduction to HTML & CSS/HTML & Semantic.md	
@@ -0,0 +1,65 @@
+# Understanding HTML Semantics:
+
+In this lesson, we'll delve into the semantics of HTML. In programming, semantics refers to the meaning conveyed by a piece of code.
+
+## Semantics in HTML:
+
+In HTML, semantics play a crucial role in defining the meaning of elements. For instance, we use the `<img>` tag to display images. The `<img>` tag carries the semantic meaning of including a picture on our webpage. Similarly, the `<h1>` tag is used to display top-level headings, providing semantic structure to the text it encloses.
+
+## Choosing the Right Element:
+
+While we can visually style text wrapped by a `<span>` to resemble a heading, it lacks semantic value. Using the appropriate HTML element for its intended purpose offers several advantages.
+
+## Benefits of Semantic Structure:
+
+A well-structured web page benefits in multiple ways. It aids search engines like Google, Yahoo, or Bing in extracting essential keywords, improving discoverability. Additionally, it serves as a guide for screen readers, assisting visually impaired users in navigating the content effectively.
+
+## Separating Data from Presentation:
+
+It's important to code HTML to represent the underlying data rather than focusing on its default presentation. Presentation styling can be modified using Cascading Style Sheets (CSS).
+
+```html
+<html>
+  <head>
+    <title>Writing semantic HTML</title>
+  </head>
+  <body>
+    <header>Semantic HTML</header>
+    <main>
+      <p>This is a paragraph</p>
+    </main>
+  </body>
+</html>
+```
+
+Here, we have `<title>`, which represents the web page's title. There is a `<header>` tag that wraps the web page's heading. Then there is core content enclosed within the `<main>` tag.
+
+We can represent a generic standalone section of a document using the `<section>` tag. It should always have a heading.
+
+```html
+<h1>Learning HTML</h1>
+<section>
+  <h2>Introduction</h2>
+  <p>This document acts as a guide to master HTML</p>
+</section>
+```
+
+To represent a self-contained text, the `<article>` tag can be used. We can create an `<article>` with one or more `<section>` within it.
+
+```html
+<article>
+  <h1>Reviews</h1>
+  <section>
+    <h4>Simple to understand</h4>
+    <p>HTML is simple to understand</p>
+  </section>
+  <section>
+    <h4>Easy to learn</h4>
+    <p>Very easy to learn HTML</p>
+  </section>
+</article>
+```
+
+A few other semantic elements available are `<footer>`, `<nav>`, `<article>`, `<summary>` etc.
+
+Mozilla has excellent documentation on semantic HTML: https://developer.mozilla.org/en-US/docs/Glossary/Semantics
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md b/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md
index e69de29..836d4aa 100644
--- a/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md	
+++ b/Basic Introduction to HTML & CSS/Introduction to HTML Elements.md	
@@ -0,0 +1,52 @@
+# HTML Structure:
+
+An HTML document begins with the `<html>` tag, serving as the root element. All other elements must be descendants of this element. The main content of a web page is typically enclosed within the `<body>` tag.
+
+## Headings:
+
+To create headings in HTML, you can use a range of header tags, from `<h1>` to `<h6>`. These tags help establish a hierarchy of importance on your web page, with `<h1>` being the highest level of importance and `<h6>` the lowest.
+
+## Text Content:
+
+Normal text content can be added to a web page using the `<p>` element. This element is used for paragraphs and separates text into distinct blocks.
+
+## Tabular Data:
+
+For presenting data in a tabular format, HTML provides the `<table>` element. You can include an optional header for the table using the `<thead>` element. Each row within the table is represented by the `<tr>` element. To populate data within a specific column in a table row, you should use the `<td>` element, which stands for "table data cell."
+
+```html
+<html>
+  <head>
+    <title>This is my web page</title>
+  </head>
+  <body>
+    <h1>This is a top level heading</h1>
+    <h2>This is a sub heading</h2>
+    <p>This is a normal text</p>
+
+    <table>
+      <thead>
+        <tr>
+          <th>id</th>
+          <th>fruit</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Apple</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Orange</td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>
+```
+
+MDN has an excellent reference on HTML elements at https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+
+MDN documentation on [Form input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+MDN documentation on [Table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
\ No newline at end of file
diff --git a/Basic Introduction to HTML & CSS/Learn more about CSS.md b/Basic Introduction to HTML & CSS/Learn more about CSS.md
index caedf4a..1238654 100644
--- a/Basic Introduction to HTML & CSS/Learn more about CSS.md	
+++ b/Basic Introduction to HTML & CSS/Learn more about CSS.md	
@@ -1,3 +1,5 @@
+# More about CSS
+
 Are you interested to learn more about what you've seen in the previous lesson? Want to learn how to write custom CSS of your own?
 
 Unfortunately, we don't have the time to dig deeper into CSS in _this_ course. However, we think that the best way to learn CSS is by _experimenting_ with it.
diff --git a/Basic Introduction to HTML & CSS/Linking Pages.md b/Basic Introduction to HTML & CSS/Linking Pages.md
index afedf45..e35ee37 100644
--- a/Basic Introduction to HTML & CSS/Linking Pages.md	
+++ b/Basic Introduction to HTML & CSS/Linking Pages.md	
@@ -1,10 +1,10 @@
 In this lesson, we will learn about linking external pages and internal elements to our web pages.
 
-## Linking external pages and internal elements to our web pages
+# Linking external pages and internal elements to our web pages
 
 The `a` HTML element (or *anchor* element), with its `href` attribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address.
 
-### External Links
+## External Links
 
 You can use the `a` (anchor) element to link to content outside your web page.
 
@@ -16,7 +16,7 @@ The `a` element needs a destination web address specified using the `href` attri
 
 When you open this HTML page on your browser, it will display the text `This links to Google` as a link you can click. And if we click on the link, it will take us to `https://www.google.com`.
 
-### Internal Links
+## Internal Links
 
 `a` (anchor) elements can also create internal links to jump to different sections within a webpage.
 
diff --git a/Basics of JavaScript data structures/A minimal UI for filtering flight search results.md b/Basics of JavaScript data structures/A minimal UI for filtering flight search results.md
new file mode 100644
index 0000000..3a40253
--- /dev/null
+++ b/Basics of JavaScript data structures/A minimal UI for filtering flight search results.md	
@@ -0,0 +1,9 @@
+You have used filters if you have done shopping, or booked tickets, or ordered food online. Filters are very useful in narrowing down the number of items we want to look at in the user interface.
+
+Let us look at a narrow slice of filtering functionality common to most flight booking apps. 
+
+This examples uses HTML & CSS to display a bunch of search results. The user can then filter search results form the browser. We will write JavaScript which make this functionality possible.
+
+This small scale example will show you how most applications are implemented at a larger scale.
+
+In this lesson, we'll work on a `index.html` file that has been prepared for this exercise. Download the file below, and then follow along with the lesson's video.
\ No newline at end of file
diff --git a/Basics of JavaScript data structures/Accessing data in Objects.md b/Basics of JavaScript data structures/Accessing data in Objects.md
new file mode 100644
index 0000000..7240683
--- /dev/null
+++ b/Basics of JavaScript data structures/Accessing data in Objects.md	
@@ -0,0 +1 @@
+**Video**
\ No newline at end of file
diff --git a/Basics of JavaScript data structures/Add, delete, and update Object properties.md b/Basics of JavaScript data structures/Add, delete, and update Object properties.md
new file mode 100644
index 0000000..4b12cfa
--- /dev/null
+++ b/Basics of JavaScript data structures/Add, delete, and update Object properties.md	
@@ -0,0 +1 @@
+**Video**
diff --git a/Basics of JavaScript data structures/Arrays - handling ordered values.md b/Basics of JavaScript data structures/Arrays - handling ordered values.md
new file mode 100644
index 0000000..571d894
--- /dev/null
+++ b/Basics of JavaScript data structures/Arrays - handling ordered values.md	
@@ -0,0 +1 @@
+You'll learn how to use arrays as a container for a collection of JavaScript values.
\ No newline at end of file
diff --git a/Basics of JavaScript data structures/Creating and working with Objects.md b/Basics of JavaScript data structures/Creating and working with Objects.md
new file mode 100644
index 0000000..b53a374
--- /dev/null
+++ b/Basics of JavaScript data structures/Creating and working with Objects.md	
@@ -0,0 +1,2 @@
+**Video**
+
diff --git a/Basics of JavaScript data structures/Filter an array based on some criteria.md b/Basics of JavaScript data structures/Filter an array based on some criteria.md
new file mode 100644
index 0000000..1526901
--- /dev/null
+++ b/Basics of JavaScript data structures/Filter an array based on some criteria.md	
@@ -0,0 +1,11 @@
+Another operation that you frequently need to do on an array of values is to select a few from the list, that match one or more conditions. We call this filtering. 
+
+To filter an array we can use the array `filter` method. Whereas `map` returns an array with the same number of values as the input array, this is not necessarily true for `filter`.
+
+The result of filtering an array could return any number of results, up to the original length of the array. This means that, depending on the criteria, the resulting array could be empty (no element satisfies the criteria), the same as the original array (all elements satify the criteria), or some length less than the original array (some elements satify the criteria).
+
+The `filter` function works very similarly to the `forEach` and `map` functions.
+
+The callback function provided to a `filter` function should return either `true` or `false`. The callback function is expected to run a test on the array value. If it meets the filtering criteria, then return `true`. This includes that value in the resulting array. If the callback function returns `false` the corresponding value is excluded from the resulting array.
+
+Let us try it out with a working example.
\ No newline at end of file
diff --git a/Basics of JavaScript data structures/Generate an HTML list from an array using the map function.md b/Basics of JavaScript data structures/Generate an HTML list from an array using the map function.md
new file mode 100644
index 0000000..25de193
--- /dev/null
+++ b/Basics of JavaScript data structures/Generate an HTML list from an array using the map function.md	
@@ -0,0 +1,10 @@
+It is better to use the `map` function to create a new array, rather than simulating it using the `forEach` function. 
+
+This is demonstrated by refactoring an earlier example written using `forEach` to generate an HTML list to instead use the `map` function.
+
+
+### New VSCode trick - Open Containing Folder
+
+In the above video, you saw a demo of how we can we can quickly open the folder that holds the file we're looking at.
+
+You can do this by right-clicking on a file or folder (in VSCode's _Explorer_) and selecting the _Reveal in Explorer_ (or _Reveal in Finder_ on macOS or _Open Containing Folder_ on Linux) option. This feature also has a keyboard shortcut that is shown next to the button.
\ No newline at end of file
diff --git a/Basics of JavaScript data structures/Generate an HTML list from an array.md b/Basics of JavaScript data structures/Generate an HTML list from an array.md
new file mode 100644
index 0000000..574aff5
--- /dev/null
+++ b/Basics of JavaScript data structures/Generate an HTML list from an array.md	
@@ -0,0 +1,5 @@
+This is a practical application for the array `forEach` method. An HTML list will be programmatically generated from an input array of string values.
+
+
+
+
diff --git a/Basics of JavaScript data structures/Iterating over an array using the forEach method.md b/Basics of JavaScript data structures/Iterating over an array using the forEach method.md
new file mode 100644
index 0000000..65eceb0
--- /dev/null
+++ b/Basics of JavaScript data structures/Iterating over an array using the forEach method.md	
@@ -0,0 +1,7 @@
+Information is often represented as a collection of values. In JavaScript this neatly maps to an array of values. 
+
+So far you've learned how to apply a function to a single value to either return a result or perform a side-effect like logging to the browsers console. 
+
+When you have an array of values the function can be repeatedly applied to every value in that array. This is known as iterating over an array of values. 
+
+You will learn about the `forEach` method for iterating over an array of values.
diff --git a/Basics of JavaScript data structures/Manipulating Objects.md b/Basics of JavaScript data structures/Manipulating Objects.md
new file mode 100644
index 0000000..b53a374
--- /dev/null
+++ b/Basics of JavaScript data structures/Manipulating Objects.md	
@@ -0,0 +1,2 @@
+**Video**
+
diff --git a/Basics of JavaScript data structures/Nested Array iteration.md b/Basics of JavaScript data structures/Nested Array iteration.md
new file mode 100644
index 0000000..8a1245b
--- /dev/null
+++ b/Basics of JavaScript data structures/Nested Array iteration.md	
@@ -0,0 +1,17 @@
+It's pretty common to find arrays that contain values like strings, numbers, objects and booleans. However the value inside an array can also be another array. 
+
+For example, consider a 2-dimensional array. This is an array whose values are themselves arrays. In JavaScript it'll look something like like this:
+
+```js
+let values = [
+  [100, 99, 100],  // index 0
+  [99, 99, 99],    // index 1
+  [100, 100, 100]  // index 2
+];
+```
+
+The `values` array contains 3 array items. Each array item contains 3 number type values. 
+
+How do you iterate over such a 2D array? Or, how do you generate a 2D array using iteration?
+
+Let us learn about such arrays using an example where we render multiplication tables to HTML.
\ No newline at end of file
diff --git a/Basics of JavaScript data structures/Task: Create a function to filter data.md b/Basics of JavaScript data structures/Task: Create a function to filter data.md
new file mode 100644
index 0000000..d1710d9
--- /dev/null
+++ b/Basics of JavaScript data structures/Task: Create a function to filter data.md	
@@ -0,0 +1,34 @@
+## Create a log date filter function
+
+Let's get hands-on and test what you have learned by trying to implement a small function.
+
+The function should accept an array of log entries (objects). Here's an example log entry object to understand its shape.
+
+``` javascript
+{ name: "Harry" , date: "2021-01-21T02:53:42+05:30" }
+```
+
+The function should accept an array of these objects and return the names of those entries whose date matches the current date, as a string. The names should be separated by a comma.
+
+For example, if today is the 21^st^ of January 2021 (2021-01-21), and the function is given an array of these three entries:
+
+``` javascript
+[
+  { name: "Harry", date: "2021-01-21T02:53:42+05:30" },
+  { name: "Hermione", date: "2021-01-22T02:53:42+05:30" },
+  { name: "Ron", date: "2021-01-21T03:53:42+05:30" }
+]
+```
+
+...the function should return the value `Harry,Ron`.
+
+Note how the names are separated by a comma without any spaces in between.
+
+We have prepared a skeleton JS file which you can download and work on. You need to implement the `todaysEntries` function without changing the function name or any other part of the file.
+
+## Important instructions
+
+1. Changing the name of the function will lead to the rejection of your submitted code.
+2. Make sure you `return` a string from the function - do not print it to the console.
+3. Do not remove the `module.exports = ...` line when submitting your JS file. That line is required for automated tests to work properly.
+4. You may need to comment out the `module.exports = ...` line to run the JS file in the browser, but don't forget to restore it before uploading the file here.
\ No newline at end of file
diff --git a/Basics of JavaScript data structures/Transforming Nested Arrays.md b/Basics of JavaScript data structures/Transforming Nested Arrays.md
new file mode 100644
index 0000000..b4d5a52
--- /dev/null
+++ b/Basics of JavaScript data structures/Transforming Nested Arrays.md	
@@ -0,0 +1,7 @@
+The multiplication tables we built earlier uses a 2-dimensional (2D) array. It was generated through nested iteration. The outer iteration happened over the numbers, and the inner iteration happened over the multipliers.
+
+Here we will see how the code becomes simpler when the `forEach` is substituted with the `map` function.
+
+The inner iteration generates a single table containing the multiplication line items. This can be done using `map`. The outer iteration generates all the multiplication tables which are arrays themselves. This too can be done using `map`.
+
+Let us see how that can be done.
diff --git a/Basics of JavaScript data structures/Transforming from one array to another using the map method.md b/Basics of JavaScript data structures/Transforming from one array to another using the map method.md
new file mode 100644
index 0000000..8addd58
--- /dev/null
+++ b/Basics of JavaScript data structures/Transforming from one array to another using the map method.md	
@@ -0,0 +1,7 @@
+You can apply a function to an array of values to produce a new array. This function will be applied to each value in the input array. The resulting array will contain the same number of items as the input array. The item at index 0 will be the result of applying the function on the item at index 0 of the input array.
+
+The array function which does this is called `map`. 
+
+The functionality of `map` can be simulated using `forEach`. In the section on array iteration we used `forEach` to generate a list of HTML elements. Using the `map` function is easier than doing the same using `forEach`.
+
+Let us first learn how to use `map` function on an array of values. You will see that most of what you learned about the functioning of the `forEach` function applies here for `map` as well.
\ No newline at end of file
diff --git a/Basics of JavaScript data structures/Use the index of the array value with filter.md b/Basics of JavaScript data structures/Use the index of the array value with filter.md
new file mode 100644
index 0000000..5a3e8a2
--- /dev/null
+++ b/Basics of JavaScript data structures/Use the index of the array value with filter.md	
@@ -0,0 +1,5 @@
+Let us look at an example which requires us to know the index of the value when using the `filter` function on an array.
+
+You are provided the daily unique visitors to your webpage. The value at 0 index is the count for Monday, 1 for Tuesday, 2 for Wednesday, ..., 6 for Sunday.
+
+This time-series data can now be filtered in various ways. Put another way you can find out how many visitors arrived at your webpage over the weekend etc.
\ No newline at end of file
diff --git a/Basics of JavaScript data structures/Using index of array value with map.md b/Basics of JavaScript data structures/Using index of array value with map.md
new file mode 100644
index 0000000..8b4b1f6
--- /dev/null
+++ b/Basics of JavaScript data structures/Using index of array value with map.md	
@@ -0,0 +1,2 @@
+Here we use the second argument to the callback function which tells us the index of the current value when using the `map` function. This should begin to look familiar if you know how this works when using the `forEach` function.
+
diff --git a/Basics of JavaScript data structures/Using the index of the array value during iteration.md b/Basics of JavaScript data structures/Using the index of the array value during iteration.md
new file mode 100644
index 0000000..f92b76a
--- /dev/null
+++ b/Basics of JavaScript data structures/Using the index of the array value during iteration.md	
@@ -0,0 +1,3 @@
+Sometimes when iterating over an array value it is necessary to also know the index of that value within the array. An example of this would be to display the values as a numbered list.
+
+In this lesson, we'll talk about a different form of the callback function passed to the array `forEach` method. The first argument is the value and the second argument is the index of the value in that array.
\ No newline at end of file
diff --git a/Creating a registration with validations /Capstone: Deploy the registration page to GitHub pages.md b/Creating a registration with validations /Capstone: Deploy the registration page to GitHub pages.md
new file mode 100644
index 0000000..61d88bf
--- /dev/null
+++ b/Creating a registration with validations /Capstone: Deploy the registration page to GitHub pages.md	
@@ -0,0 +1,38 @@
+**To complete this course**: Host the registration form that we demonstrated in this level using [GitHub Pages](https://pages.github.com) (we have show you exactly how to use GitHub Pages in the [lesson](https://www.pupilfirst.school/targets/19268)). 
+You'll need to make one additional change to the registration form (details below), host it online, and then share its link with us.
+
+## What you need to do
+
+1. Your registration form must have all the functionality demonstrated in this level, including loading of saved data from web storage.
+
+2. **Add additional validations** to the date input field so that it accepts date of birth for people between ages 18 and 55 only. You'll need to figure out how to do this.
+
+3. Host your website on GitHub Pages, and share the link to a hosted version of your website. The [lesson under Resources](https://www.pupilfirst.school/targets/19268) details the steps involved in doing so.
+
+## Please ensure that...
+
+1. ...your website is live, and accessible.
+2. ...the link you share shows the registration `form` along with the `table` element. The table should be empty when we first visit the webpage.
+3. The `table` element's header should contain the following columns with the exact text: `Name`, `Email`, `Password`, `Dob`, and `Accepted terms?`.
+4. ...the `input` elements must have the `id` values demonstrated in this level. i.e., `name`, `email`, `password`, and `dob`.
+5. ...there must be an `<input>` element with `type="checkbox"`.
+6. ...there must be a `<button>` with `type="submit"`.
+
+Your submission will be reviewed automatically using a test script. The conditions mentioned above should be followed exactly to ensure that these tests can identify and interact with your webpage.
+
+## Use GitHub Pages to host your website
+
+For this final assignment, we require that you use [GitHub Pages](https://pages.github.com/).
+
+Go through the lesson "[How to deploy your registration page to GitHub pages](https://www.pupilfirst.school/targets/19268)", follow the instructions there to learn how you can host your Capstone project using GitHub.
+
+> **What's this git & GitHub stuff?**\
+> You might be wondering what this git & GitHub stuff is all about. We'll cover this in detail in the WD201 course, but for now we want to get you ready for it by having you sign up for GitHub, and creating a simple _repository_ there.
+
+## The `index.html` and `index.js` files are important
+
+Your GitHub repository containing the capstone project should hold at least these two files - `index.html` and `index.js`. Without these two files in your GitHub repository, your submission will not be accepted.
+
+## Do not plagiarize
+
+Your submission towards this capstone assignment will be subject to a plagiarism check. This check can take some time to complete, and based on the results of this check, your submission's acceptance may be changed. You will be notified by email if any discrepancy is noticed as a result of the plagiarism check.
\ No newline at end of file
diff --git a/Creating a registration with validations /Creating Validations.md b/Creating a registration with validations /Creating Validations.md
new file mode 100644
index 0000000..8ea7d55
--- /dev/null
+++ b/Creating a registration with validations /Creating Validations.md	
@@ -0,0 +1,56 @@
+In this lesson, we will add validations to the form we created.
+
+Before submitting data, it is crucial to ensure all required form controls are correctly filled. This is called form validation. Validation helps us ensure that the submitted data matches the requirements set for these form controls.
+
+Validation done in the browser is called `client-side` validation, while validation done on the web server is called `server-side` validation.
+
+In this lesson, we will focus on client-side validation.
+
+If the data entered is correctly formatted, the application allows the data to be submitted. But, if the data is not in the proper format, we give the user an error message explaining what needs to be corrected and let them try again.
+
+## Types of Form validation
+
+There are two different types of client-side validation:
+
+1. Built-in form validation, that uses HTML form validation features.
+2. JavaScript validation, which is written using JavaScript.
+
+Built-in form validation has better performance than JavaScript, but it is not as customizable as JavaScript validation.
+
+## Built-in form validation using HTML
+
+
+Built-in validation is used to validate most user data without relying on JavaScript. This is done by using validation attributes on form elements.
+
+Some commonly used validation attributes are listed below:
+
+1. `required`: Specifies whether a form field needs to be filled in before the form can be submitted.
+2. `minlength` and `maxlength`: Specifies the minimum and maximum length of text data (strings)
+3. `min` and `max`: Specifies the minimum and maximum values of numerical input types
+4. `type`: Specifies whether the data needs to be a number, an email address, or some other specific preset type.
+
+If the data entered in a form field follows all the rules specified by the above attributes, it is considered valid. If not, it is considered invalid.
+
+When an element is `valid`, the following are true:
+
+The element matches the `:valid` CSS pseudo-class, which lets you apply a specific style to valid elements.
+
+If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., JavaScript).
+
+When an element is `invalid`, the following are true:
+
+The element matches the `:invalid` CSS pseudo-class, and sometimes other UI pseudo-classes (e.g., :out-of-range) depending on the error, which lets you apply a specific style to invalid elements.
+
+If the user tries to send the data, the browser will block the form and display an error message.
+
+> Note: Follow the instructions in the video below on the `index.html` file you have created in this level.
+
+## JavaScript validation
+
+We use JavaScript validations in cases where we want to take control over the look and feel of error messages. They are also helpful while working with old browser versions that do not support HTML's built-in form validation.
+
+You can learn more about Form validation properties and how to use them in the following references.
+
+1. [Form validations](https://www.w3schools.com/js/js_validation.asp)
+2. [Learn JavaScript form validation](https://www.freecodecamp.org/news/learn-javascript-form-validation-by-making-a-form/)
+3. [Form data constraint validations](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation)
\ No newline at end of file
diff --git a/Creating a registration with validations /Creating your First Form.md b/Creating a registration with validations /Creating your First Form.md
new file mode 100644
index 0000000..f248fdc
--- /dev/null
+++ b/Creating a registration with validations /Creating your First Form.md	
@@ -0,0 +1,111 @@
+In this lesson, we will create our first form using the HTML `form` element.
+
+## Prerequisites
+
+1. Understanding of Basic HTML
+2. Understanding of CSS
+3. Knowledge of HTTP basics
+
+## Design
+
+<img class="mx-auto w-auto md:w-auto" alt="Sample user form" src="https://do7js0tdxrds1.cloudfront.net/3cb630nfwhjkl5tqs5ew1llrh82l?response-content-disposition=inline%3B+filename%3D%22sample_user_form.jpeg%22%3B&response-content-type=image%2Fjpeg&Expires=1695971342&Signature=dm6Hd6Ix1c7ysy1MTOy5DBLe7sVN-Spmvg40pgwKP2sEsqC5eaQZgpLGL5NiFlZqE1agY4ev8pm5RipckTAOh7GvJVxPjgOuXzY~w2YrYrljIwatitj8BGqZSrt7KuwQ9DeXtmTTcuS-S-zXxS4d0z180LimvxbFwb8GKUNghlCgCKr9eLp3-jfe4U5YFVNgJGM4n-b46xIF~qy124D1vVaWsjtqSDWAkyCFP-cJaY3RlzMs3Qtg5KxvdtIbstEYvGYA3Dw3kfDn127msQnaEHTZletnTQG5YnzX4FiIzsyOhNHXGbzjmEm7hHGOjz7wsD9UeiLYNgCke-d323g5vQ__&Key-Pair-Id=K2Q3HDJ6ZAQGFF">
+
+First, let us create a `form` element as a wrapper for all the controls we build for this HTML Form.
+
+In the HTML page you have created, add a new form element as mentioned below.
+
+```html
+<form>#form controls</form>
+```
+
+Next, let us create the controls one by one. We will start with the Name input field. It is a text-only input field, so we will create an input element of the type set to text. We will also create a `label` for all the input elements as per the design.
+
+```html
+
+<form>
+   <label for="name">Name</label>
+   <input type="text" id="name" name="name">
+</form>
+
+```
+
+Next, we will create the email input field. It is an email-only input field, so we will create an input element of the type set to email.
+
+```html
+
+<form>
+   <label for="email">Email</label>
+   <input type="email" id="email" name="email">
+</form>
+
+```
+
+Next, we will create the password input field. It is a password-only input field, so we will create an input element of the type set to password.
+
+```html
+
+<form>
+   <label for="password">Password</label>
+   <input type="password" id="password" name="password">
+</form>
+
+```
+
+Next, we will create the Date of birth input field. It is an input field which gives you the ability to pick a date using the date picker. We will use the input type as the date for this control.
+
+```html
+
+<form>
+   <label for="dob">Date of Birth</label>
+   <input type="date" id="dob" name="dob">
+</form>
+
+```
+
+Next, we will create the 'Accept Terms & Conditions' checkbox. The input field of type `checkbox` is used to create one. Checkboxes are generally used to let a user select one or more options.
+
+```html
+
+<form>
+   <input type="checkbox" id="acceptTerms" name="acceptTerms">
+   <label for="acceptTerms">Accept Terms & Conditions</label>
+</form>
+
+```
+
+Finally, let's add a `Submit` button that lets the user send this data collected to a web server. We can create a button using the `button` element. The `type` attribute of the button is used to define the action associated with it. In our case, as we are creating a form to submit user data, we will use the type `submit`.
+
+```html
+<form>
+  <button type="submit">Submit</button>
+</form>
+```
+
+The final HTML for the form we created will look something like the one below:
+
+```html
+
+<form>
+   <label for="name">Name</label>
+   <input type="text" id="name" name="name">
+
+   <label for="email">Email</label>
+   <input type="email" id="email" name="email">
+
+   <label for="password">Password</label>
+   <input type="password" id="password" name="password">
+
+   <label for="dob">Date of Birth</label>
+   <input type="date" id="dob" name="dob">
+
+   <input type="checkbox" id="acceptTerms" name="acceptTerms">
+   <label for="acceptTerms">Accept Terms & Conditions</label>
+
+   <button type="submit">Submit</button>
+</form>
+
+```
+
+There are multiple other form controls that HTML provides, and you can use them in your applications based on your requirements. You can refer to the details of the same [here](https://www.w3schools.com/html/html_form_elements.asp).
+
+In the upcoming lessons, we will learn about validating the input entered by the user and how user data is submitted to a web server.
diff --git a/Creating a registration with validations /First steps with Form and Form elements.md b/Creating a registration with validations /First steps with Form and Form elements.md
new file mode 100644
index 0000000..fde8efc
--- /dev/null
+++ b/Creating a registration with validations /First steps with Form and Form elements.md	
@@ -0,0 +1,76 @@
+In this lesson, we will learn about HTML Forms and using Form controls within them to collect user input on web pages.
+
+The HTML `form` element helps to create an HTML form for user input. It is used as a container for elements such as text fields, checkboxes, radio buttons and submit buttons.
+
+Let's create a `form` that can collect user data. This element wraps all the other elements that go inside our form.
+
+In the HTML document created earlier enter the following code.
+
+```html
+<form>## form elements</form>
+```
+
+You cannot have forms nested inside another form. That means you cannot have a `form` element inside another `form` element.
+
+Now let's add a few form-related elements to the above `form`.
+
+### Text fields
+
+The `input` element with the type `text` is used to get Text-based user data from the web pages.
+
+```js
+<form>
+   <input type="text" id="name" name="name">
+</form>
+```
+
+The `type` attribute indicates what kind of input we want the user to enter. If we give a value of text to the `type` attribute, it means the input requires a text value to be entered.
+
+There are many possible values for this particular attribute. Some possible values are email, password etc.
+
+### The `Label` element
+
+The `label` element defines a label for many form elements. It is used to provide context for the form elements.
+
+> Action: Open the HTML Document created previously and add a Label to the Form element as below.
+
+```js
+<form>
+   <input type="text" id="name" name="name">
+   <label for="name">User Name:</label>
+</form>
+```
+
+The `for` attribute associates the label with a particular form element. The way it matches is by the ID of the input element.
+
+### Checkboxes
+
+The `input` element with the type `checkbox` allows a user to select 0 or more options of a limited number of choices.
+
+> Action: Open the HTML Document created previously and add a checkbox to the Form element as below.
+
+```js
+<input type="checkbox" id="checkbox" name="checkbox">
+<label for="checkbox">Yes</label>
+```
+
+### Radio button
+
+The `input` element with the type `radio` allows a user to select a single option from a limited number of choices.
+
+
+```js
+<input type="radio" id="radio" name="radio" value="true">
+<label for="radio">True</label>
+```
+
+### Submit button
+
+The `input` element with the type `submit` allows a user to send the collected form data to a web server.
+
+
+```js
+<button type="submit">Submit</button>
+```
+
+The above-mentioned controls are some basic form-related controls used across most web forms. Next, we will learn about using these controls to create a full-fledged web form to be used on our web page.
\ No newline at end of file
diff --git a/Creating a registration with validations /Introduction to Web Storage.md b/Creating a registration with validations /Introduction to Web Storage.md
new file mode 100644
index 0000000..76426a2
--- /dev/null
+++ b/Creating a registration with validations /Introduction to Web Storage.md	
@@ -0,0 +1,49 @@
+Web Storage provides mechanisms to store key-value pairs in a much more intuitive way than using cookies. Traditionally cookies are used to save data in the client side. But cookies have a storage limit of 4 KB. Cookies also get sent with every request to the server. 
+
+With HTML5, web storage was introduced. The data stored using Web Storage APIs are never sent to the server. APIs or Application Programming Interface is a software intermediary that allows two applications to talk to each other.
+
+There are two different Web Storage APIs available:
+
+## 1. sessionStorage
+
+- The values are stored only for the duration of page session. Page session is the duration through which the tab or window remains open.
+
+- Maximum of 5 MB can be stored.
+
+#### Basic Usage
+
+```js
+// Save data to sessionStorage
+sessionStorage.setItem("name", "John Doe");
+
+// Get saved data from sessionStorage
+let name = sessionStorage.getItem("name");
+
+// Remove saved data from sessionStorage
+sessionStorage.removeItem("name");
+
+// Remove all saved data from sessionStorage
+sessionStorage.clear();
+```
+
+## 2. localStorage
+
+- localStorage is similar to sessionStorage, but it doesn't have an expiry.
+- Data stored in localStorage is never sent to the server.
+- Data is shared between all tabs and windows from the same origin.
+
+#### Basic Usage
+
+```js
+// Save data to localStorage
+localStorage.setItem("themePreference", "Dark");
+
+// Get saved data from localStorage
+const themePreference = localStorage.getItem("themePreference");
+
+// Remove saved data from localStorage
+localStorage.removeItem("themePreference");
+
+// Remove all saved data from localStorage
+localStorage.clear();
+```
diff --git a/Creating a registration with validations /Learn more about Forms.md b/Creating a registration with validations /Learn more about Forms.md
new file mode 100644
index 0000000..1fc1e8f
--- /dev/null
+++ b/Creating a registration with validations /Learn more about Forms.md	
@@ -0,0 +1,16 @@
+> This is optional reading. In this target, we'll link you to external documentation that you can look at if you want to. Do that only if you are curious and have the time to spare. Otherwise, you can safely skip this chapter.
+
+## References
+
+Here are a few references for the HTML Forms related specifications and documentation. These contain details about all the HTML Forms and Form controls.
+
+1. [W3C HTML Form Specification](https://html.spec.whatwg.org/multipage/forms.html#forms)
+2. [Mozilla HTML Forms Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
+3. [W3Schools HTML Form reference](https://www.w3schools.com/html/html_forms.asp)
+
+## Tutorials
+
+Here are a few tutorials that can help you with understanding HTML Forms in detail.
+
+1. [Web forms — Working with user data](https://developer.mozilla.org/en-US/docs/Learn/Forms)
+2. [A step-by-step guide to getting started with HTML forms](https://www.freecodecamp.org/news/a-step-by-step-guide-to-getting-started-with-html-forms-7f77ae4522b5/)
\ No newline at end of file
diff --git a/Creating a registration with validations /Submit and View Inputs from Web Storage.md b/Creating a registration with validations /Submit and View Inputs from Web Storage.md
new file mode 100644
index 0000000..ff4d4b4
--- /dev/null
+++ b/Creating a registration with validations /Submit and View Inputs from Web Storage.md	
@@ -0,0 +1,41 @@
+## Saving data locally
+
+## Storing as a JSON string
+
+The keys and values in web storage can only be of `string` type. If we need to save a JavaScript object to web storage, we first need to convert it to string. To help us with that, JavaScript provides a built-in `JSON.stringify` method.
+
+JSON stands for JavaScript Object Notation. It's a syntax for storing a complex object in string form for easy transmission. It's also easy for us to write manually.
+
+You'll notice that JSON strings look the same as normal objects or arrays that we write in JavaScript. That's because this notation is taken directly from the JavaScript language. However, JSON is used universally across programming languages as a way to convert complex types into a string.
+
+In JavaScript, you can convert a valid `JSON` string back into an object using the `JSON.parse` method.
+
+```js
+const userData = {
+  name: "John Doe",
+  themePreference: "Dark",
+};
+
+// Convert JSON Object to string representation.
+const stringifiedUserData = JSON.stringify(userData);
+
+// Let's check the type of the constant we just created.
+console.log(typeof(stringifiedUserData)); // string
+
+// Save the data to localStorage.
+localStorage.setItem("userData", stringifiedUserData);
+
+// Retrieve the string from localStorage.
+const retrievedUserData = localStorage.getItem("userData");
+
+// Convert the string back as JavaScript object.
+const parsedUserData = JSON.parse(retrievedUserData);
+
+// Let's check the type of the constant we just created by parsing the JSON string.
+console.log(typeof(parsedUserData)); // object
+
+// We should be able to access the `name` property now.
+console.log(parsedUserData.name); // John Doe
+```
+
+## Retrieving data stored locally
diff --git a/Creating a registration with validations /Submitting user data from Forms.md b/Creating a registration with validations /Submitting user data from Forms.md
new file mode 100644
index 0000000..5c66c67
--- /dev/null
+++ b/Creating a registration with validations /Submitting user data from Forms.md	
@@ -0,0 +1,98 @@
+In this lesson, we will learn about what happens when a user submits a form. We will also learn about where the data goes, and how we can check, what data is sent to the web server.
+
+First, we'll discuss what happens to the data when we submit a form. To understand that, we need to have an understanding of Client-Server architecture.
+
+## Client-Server architecture
+
+The Web uses a Client-Server architecture that can be summarized as follows:
+
+1. Client (a web browser) sends a request,
+2. To a Server (a web server like Apache, Tomcat, etc.),
+3. Using the [HTTP protocol](https://developer.mozilla.org/en-US/docs/Web/HTTP).
+
+The server answers the request using the same protocol.
+
+The HTML form we create is a user-friendly way to configure an HTTP request to send data to a server. This enables the user to provide information to be delivered in the HTTP request.
+
+## Sending data
+
+The `form` element defines how the data will be sent to the web server. All of its attributes are designed to let you configure the request to be sent when a user clicks a submit button.
+
+The two most important attributes of a `form` element are `action` and `method`.
+
+### `action` attribute
+
+The `action` attribute defines where we would like to send the data. Its value must be a valid URL. If this attribute isn't provided, the data will be sent to the URL of the page containing the form — the current page.
+
+```js
+
+   <form action="https://google.com"> #External URL
+   <form action="/localserver"> #Local URL
+
+```
+
+The names and values of the form controls are sent to the server as `name-value` pairs joined with the `&` symbol.
+
+### `method` attribute
+
+The `method` attribute defines how data is sent. The HTTP protocol provides several ways to perform a request.
+
+HTML form data can be transmitted via a number of different methods, the most common being the `GET` method and the `POST` method.
+
+HTTP requests, such as the ones we send through HTML forms, consist of two parts:
+
+1. A header that contains a set of data about the browser and our HTML.
+2. A body that can contain information necessary for the server.
+
+#### `GET` method
+
+`GET` method is used by the browser to ask the server to send back a given resource. In this case, the browser sends an empty body. Because the body is empty if a form is sent using this method, the data sent to the server is added to the URL.
+
+```js
+
+<form action="http://www.google.com" method="GET">
+  <label for="name">Name</label>
+  <input type="text" id="name" name="name" value="John Doe">
+  <label for="email">Email</label>
+  <input type="email" id="email" name="email" value="john.doe@email.com">
+  <button type="submit">Submit</button>
+</form>
+
+```
+
+Since the `GET` method has been used, you'll see the URL `https://www.google.com/?name=John+Doe&email=john.doe%40email.com` appear in the browser address bar when you submit the form.
+
+The data is appended to the URL as a series of name-value pairs.
+
+#### `POST` method
+
+`POST` method is a little different. It's the method the browser uses to talk to the server when asking for a response based on the body of the HTTP request.
+
+If a form is sent using this method, the data is appended to the body of the HTTP request.
+
+```js
+
+<form action="http://www.google.com" method="POST">
+  <label for="name">Name</label>
+  <input type="text" id="name" name="name" value="John Doe">
+  <label for="email">Email</label>
+  <input type="email" id="email" name="email" value="john.doe@email.com">
+  <button type="submit">Submit</button>
+</form>
+
+```
+
+When the form is submitted using the POST method, you get no data appended to the URL, and it is instead included in the request body.
+
+The HTTP requests are not visible on the browser and to view them you need to use the `Developer Tools` available inbuilt on the browser.
+
+After submitting the form:
+
+1. Open the developer tools.
+2. Select “Network”
+3. Select “All”
+4. Select “google.com” in the “Name” tab
+5. Select “Headers”
+6. Look under the “Form Data” section to see the data sent as a part of the request.
+
+We will learn more about building forms and other ways to store and retrieve data from forms in the upcoming lessons.
\ No newline at end of file
diff --git a/Creating a registration with validations /WD101 Completion feedback form.md b/Creating a registration with validations /WD101 Completion feedback form.md
new file mode 100644
index 0000000..5544725
--- /dev/null
+++ b/Creating a registration with validations /WD101 Completion feedback form.md	
@@ -0,0 +1 @@
+Congratulations, you are about to complete WD101. This form is to understand your approach and interest in Web development so far.
diff --git a/Creating a registration with validations /Why should you learn about the HTML Form element and Form data?.md b/Creating a registration with validations /Why should you learn about the HTML Form element and Form data?.md
new file mode 100644
index 0000000..e69de29
diff --git a/Functions - code we can call multiple times!/A note on arrow functions.md b/Functions - code we can call multiple times!/A note on arrow functions.md
index e69de29..215f38f 100644
--- a/Functions - code we can call multiple times!/A note on arrow functions.md	
+++ b/Functions - code we can call multiple times!/A note on arrow functions.md	
@@ -0,0 +1,56 @@
+There are two ways in which functions can be defined:
+
+1. Traditional definition using the `function` keyword.
+2. Arrow function.
+
+Traditionally, functions were defined using the `function` keyword. For example,
+
+```js
+function someFn() {
+  // ...
+}
+```
+
+Modern JavaScript provides a new (and arguably better) way of defining a function, called **arrow function**. This approach treats a function just like variables and is defined using `let` or `const` keywords. Here's an example of an _arrow function_ that's equivalent to the above _traditional_ function:
+
+```js
+const someFun = () => {
+  // ...
+}
+```
+
+Let's now see how we would approach calculating the _sum of two numbers_ using both of these approaches. 
+
+## Using a traditional function
+
+```js
+function add(a, b) {
+  return a + b;
+}
+
+let sum = add(2, 3);
+console.log("Sum is: ", sum); // Sum is 5
+```
+
+Here, the `add` function accepts two arguments, computes their sum in the body of the function and returns the calculated value.
+
+## Using an arrow function
+
+```js
+const add = (a, b) => {
+  return a + b;
+}
+
+let sum = add(2, 3);
+console.log("Sum is: ", sum); // Sum is: 5 
+```
+
+Arrow functions can also be used to write single-line *arrow function expressions*. If we leave out the curly braces (`{ ... }`), we can also leave out the `return` keyword, and the function will still return the value of the function's expression. Here's an example:
+
+```js
+let add = (a, b) => a + b;
+let sum = add(2, 3);
+console.log("Sum is: ", sum); // Sum is: 5 
+```
+
+Note that such arrow function expressions can exclusively be used for single-line operations. If you need to write multiple lines of code in a function, you'll need to use curly braces and the `return` keyword.
\ No newline at end of file
diff --git a/Functions - code we can call multiple times!/Explicitly return a value from a function.md b/Functions - code we can call multiple times!/Explicitly return a value from a function.md
index e69de29..9026a5b 100644
--- a/Functions - code we can call multiple times!/Explicitly return a value from a function.md	
+++ b/Functions - code we can call multiple times!/Explicitly return a value from a function.md	
@@ -0,0 +1,40 @@
+A function like `console.log` performs a side-effect. It does not return any value, but it prints the string we passed as an argument to the web browser console.
+
+In our programs, we often need functions that can accept one or more arguments, perform some work, and then return the result of that computation.
+
+In this lesson, you will learn how to do this.
+
+
+**Video**
+
+## Special Case: Arrow-functions without curly braces
+
+There is one special case that you need to be aware of - single-expression functions. Here's an example.
+
+```js
+let sumOfSquaresSingleLine = (x, y) => Math.pow(x, 2) + Math.pow(y, 2);
+
+let sumOfSquaresMultiLine = (x, y) => {
+  return Math.pow(x, 2) + Math.pow(y, 2);
+};
+```
+
+Both functions will return _sum of squares_ of two arguments. However, note how the _single-expression_ function omits the `return` keyword.
+
+When the _body_ of a function is a single _expression_, the `return` keyword isn't required, and neither are the curly braces (`{ ... }`). The _result_ of that expression is automatically returned from the function.
+
+Most commonly, this syntax is used to write compact, single-line functions to improve readability. However, it is possible to write a multi-line expression in the same way. You'll find an example of this in a later lesson.
+
+However, when your function needs multiple statements to execute, the curly braces are **required** and are used to delimit the operations performed by the function. In this case, the `return` keyword is also **required** for the function to _return_ anything. When curly braces are used, if you fail to write a `return` statement, your function will always return the value `undefined`.
+
+```js
+let foo = () => 1;
+
+let bar = () => {
+  // Without an explicit 'return', this function will always return `undefined`.
+  1
+};
+
+foo(); // 1
+bar(); // undefined
+```
\ No newline at end of file
diff --git a/Functions - code we can call multiple times!/Functions - part 1.md b/Functions - code we can call multiple times!/Functions - part 1.md
index e69de29..b4f1698 100644
--- a/Functions - code we can call multiple times!/Functions - part 1.md	
+++ b/Functions - code we can call multiple times!/Functions - part 1.md	
@@ -0,0 +1 @@
+`console.log` is a function you have used numerous times by now. At the end of this lesson you will have learned how to write your own functions.
\ No newline at end of file
diff --git a/Functions - code we can call multiple times!/Functions - part 2.md b/Functions - code we can call multiple times!/Functions - part 2.md
index e69de29..2d36743 100644
--- a/Functions - code we can call multiple times!/Functions - part 2.md	
+++ b/Functions - code we can call multiple times!/Functions - part 2.md	
@@ -0,0 +1,5 @@
+We will work on a longer example which is written in the procedural manner and **refactor** it to use small functions.
+
+When we **refactor** code the structure of the code changes. We do not change the functionality or the existing behaviour of the code. 
+
+Programmers refactor the code they've written often to make it easier to read, understand, and modify by themselves in the future, and also to make it easier for other people to work with the same code.
\ No newline at end of file
diff --git a/Functions - code we can call multiple times!/Need additional help?.md b/Functions - code we can call multiple times!/Need additional help?.md
index e69de29..10b3973 100644
--- a/Functions - code we can call multiple times!/Need additional help?.md	
+++ b/Functions - code we can call multiple times!/Need additional help?.md	
@@ -0,0 +1,5 @@
+To complete the _milestone target_ in this level of the course, you'll need to do some things that _haven't_ been taught in the course.
+
+This is intentional.
+
+If you're having trouble creating a working solution for the assignment, _this_ lesson will give you some hints on how to proceed.
\ No newline at end of file
diff --git a/Functions - code we can call multiple times!/Passing a function as an argument.md b/Functions - code we can call multiple times!/Passing a function as an argument.md
index e69de29..0fec1c3 100644
--- a/Functions - code we can call multiple times!/Passing a function as an argument.md	
+++ b/Functions - code we can call multiple times!/Passing a function as an argument.md	
@@ -0,0 +1,11 @@
+In JavaScript a function is also just a value like the string, number, boolean, object or array. The implication is that you can pass a function itself as an argument to another function. When functions are passed as arguments to other functions, we refer to them as **callback functions** or simply **callbacks**.
+
+> **Why the name "callback"?**\
+> Because we're passing some code that we expect a function to *call back* (execute).
+
+To learn more about callback functions, we'll experiment with two functions available in the web browser:
+
+1. `setTimeout`
+2. `setInterval`
+
+Both these functions accept a __callback__ function as its first argument. After a time delay the __callback__ function is executed (_"called back"_).
\ No newline at end of file
diff --git a/Functions - code we can call multiple times!/Task: Create a name to initials converter function.md b/Functions - code we can call multiple times!/Task: Create a name to initials converter function.md
index e69de29..b650920 100644
--- a/Functions - code we can call multiple times!/Task: Create a name to initials converter function.md	
+++ b/Functions - code we can call multiple times!/Task: Create a name to initials converter function.md	
@@ -0,0 +1,27 @@
+## Convert name to initials.
+
+Now that you have a good idea of Javascript functions, let's test what you have learned by attempting a small task to write a function. 
+
+The function should basically take an input name(a string) and convert the same to initials, for e.g John Doe to JD. 
+
+Here are few conditions to be met:
+
+1. A single-worded name must return the first two letters of the word as initials. Eg. John should have an initial JO
+2. A two-worded name must return the first letter of each of the words in the name. Eg. John Doe should have an initial JD
+3. A name with more words should return the starting letter of the first and the last word as initial. Eg. John Doe Honai should have an initial JH
+4. The function should return all initials in uppercase.
+
+We have attached a skeleton JS file with this lesson. You are expected to just complete the empty function `createInitialsFromName` so that it _returns_ the expected value.
+
+## Important instructions
+
+1. Changing the name of the function will lead to the rejection of your submitted code.
+2. Make sure you `return` the initials string from the function - do not print it to the console.
+3. Do not remove the `module.exports = ...` line when submitting your JS file. That line is required for automated tests to work properly.
+4. You may need to comment out the `module.exports = ...` line to run the JS file in the browser, but don't forget to restore it before uploading the file here.
+
+Download the file above and complete the function `createInitialsFromName` with the conditions mentioned above. 
+
+Once you're done, save your changes, and upload the file in the _Complete_ tab of this lesson.
+
+Good luck with the task! Have fun! :)
\ No newline at end of file
diff --git a/Styling Matters/Introduction to CSS Frameworks.md b/Styling Matters/Introduction to CSS Frameworks.md
index 80f3ca5..1613ad7 100644
--- a/Styling Matters/Introduction to CSS Frameworks.md	
+++ b/Styling Matters/Introduction to CSS Frameworks.md	
@@ -1,14 +1,18 @@
-Previously, we've learnt how to add classes to a CSS file and use them in the HTML file. It's always recommended to use external CSS files to avoid repetition in our code.
+# Streamlining Styling with CSS Frameworks:
 
-But at one point you would find that writing CSS rules for a large scale project takes a lot of time.
+In our previous lessons, we've covered the essentials of adding classes to a CSS file and applying them within HTML files. While it's highly recommended to employ external CSS files to enhance code organization and prevent redundancy, there comes a point in larger projects where crafting CSS rules can become a time-consuming endeavor.
 
-So instead of doing that, we're going to jump ahead a bit, and show you what a lot of professional developers do these days - which is to use CSS frameworks that makes styling much simpler.
+## Introducing CSS Frameworks:
 
+To address this challenge, many professional developers opt for a forward-thinking approach – leveraging CSS frameworks. But what exactly is a CSS framework?
 
-### What is a CSS Framework?
-In essence, a CSS framework consists of several CSS style sheets ready for use by web developers and designers like you and me. These style sheets helps us to quickly add web design functions to our HTML, such as: setting colors, layout, fonts, navbars, etc.
+## Understanding CSS Frameworks:
 
-With a CSS framework, you only have to code the HTML with accurate classes, structure, and IDs to set up a web page. The framework already has built-in classes for common web elements like – buttons, cards, slider, navigation bar, column-based layouts, and so on.
+In essence, a CSS framework comprises multiple pre-designed CSS style sheets tailored for the use of web developers and designers. These style sheets offer a streamlined way to infuse web design functionalities into our HTML, encompassing tasks such as color schemes, layout structuring, font choices, navigation bars, and more.
+
+## Efficiency and Convenience:
+
+With a CSS framework, you need only focus on crafting well-structured HTML with appropriate classes and IDs. The framework does the heavy lifting, supplying predefined classes for common web elements such as buttons, cards, sliders, navigation bars, and flexible column-based layouts. This approach simplifies the styling process and accelerates the development of complex web pages.
 
 ### Now, what are the advantages of using CSS Framework?
 1. First, you can quickly create a user-friendly and visually appealing User Interface.
diff --git a/Styling Matters/Introduction to Tailwind CSS.md b/Styling Matters/Introduction to Tailwind CSS.md
index e333e80..260fd97 100644
--- a/Styling Matters/Introduction to Tailwind CSS.md	
+++ b/Styling Matters/Introduction to Tailwind CSS.md	
@@ -1,3 +1,5 @@
+# Intro to Tailwind
+
 In this course, we're not going into detail about everything that you can do with CSS.
 
 CSS is a very large and complex topic that deserves a separate course of its own.
diff --git a/Styling Matters/Tailwind's relationship with JavaScript.md b/Styling Matters/Tailwind's relationship with JavaScript.md
index a59db71..3c68b48 100644
--- a/Styling Matters/Tailwind's relationship with JavaScript.md	
+++ b/Styling Matters/Tailwind's relationship with JavaScript.md	
@@ -1,2 +1,4 @@
+# CSS & JS
+
 The usage of modern web development tools is deeply tied to the JavaScript ecosystem. Learn how properly using a CSS framework like Tailwind is also dependent on knowing your way around JS.
 
diff --git a/Styling Matters/Using CSS Frameworks for styling.md b/Styling Matters/Using CSS Frameworks for styling.md
index 4d5f89c..46224ff 100644
--- a/Styling Matters/Using CSS Frameworks for styling.md	
+++ b/Styling Matters/Using CSS Frameworks for styling.md	
@@ -1,13 +1,10 @@
-# Text
+# Using CSS framework
 
-Previously, we've learned 
-- *What is a CSS framework?* 
-- *What are the advantages of using one?*
-- And *what are the popular frameworks available in the market today?*.
+In previous lessons, we delved into the concept of CSS frameworks, explored their advantages, and discussed the popular frameworks available in today's market. We also explored how CSS frameworks can enhance our productivity by offering a range of pre-designed UI components and utility classes.
 
-We've also talked about how a CSS framework can boost our productivity, with it's ready-to-use UI components and utility classes.
+In this lesson, our focus will be on the practical aspect: how to integrate a CSS framework into an HTML project.
 
-So, in this lesson, let's find out how to use a CSS framework.
+There are various methods to incorporate a CSS framework into a web application, but for the sake of convenience, we'll concentrate on the most straightforward approaches.
 
 ## How to add a CSS framework to any HTML project?
 There are number of different ways to use a CSS framework in a web application. In this lesson, we will focus only on the most convenient ones.
diff --git a/Styling Matters/Working with Tailwind.md b/Styling Matters/Working with Tailwind.md
index a36f1bb..b501440 100644
--- a/Styling Matters/Working with Tailwind.md	
+++ b/Styling Matters/Working with Tailwind.md	
@@ -1,4 +1,6 @@
-Here's a whirlwind tour of how we can use some of Tailwind's features to make a web page look better. This video will also tell you where to go to [learn more about Tailwind](https://tailwindcss.com/docs).
+# Working with Tailwind
+
+This concise overview provides a glimpse into the effective utilization of Tailwind CSS features to enhance the visual appeal of a web page. Additionally, you can access the comprehensive Tailwind CSS documentation at https://tailwindcss.com/docs for in-depth learning
 
 ** Video **
 
diff --git a/Working with JavaScript data types/Adding comments to HTML and JS.md b/Working with JavaScript data types/Adding comments to HTML and JS.md
index e69de29..81a758a 100644
--- a/Working with JavaScript data types/Adding comments to HTML and JS.md	
+++ b/Working with JavaScript data types/Adding comments to HTML and JS.md	
@@ -0,0 +1,41 @@
+Comments are used to add documentation to your code. Comments are always ignored when code executes.
+
+With HTML and JS, the browser is most often where the code executes, so while the browser may receive comments as part of website's payload, it will simply ignore all comments that it sees.
+
+## Comments in HTML
+
+You can add comments to your HTML source by using the following syntax:
+
+```html
+<body>
+  <!-- This is valid single-line comment. -->
+
+  <p>This is a paragraph.</p>
+
+  <!-- 
+    The same characters can be used to write multi-line
+    comments, just like this.
+  -->
+</body>
+```
+
+## Comments in JavaScript
+
+Single line comments start with `//`. Any text between `//` and the end of the line will be ignored.
+
+```js
+var a = 2;      // Declare a, give it the value of 2
+var b = a + 2;  // Declare b, give it the value of a + 2
+```
+
+Multiple lines of comments can be easily written by starting with `/*` and ending with `*/`. Any text between `/*` and `*/` will be ignored by JavaScript.
+
+```js
+/*
+The code below will change
+the heading with id = "heading"
+in my web page:
+*/
+
+document.getElementById("heading").innerHTML = "My First Page";
+```
\ No newline at end of file
diff --git a/Working with JavaScript data types/Boolean - comparisons and logical operations.md b/Working with JavaScript data types/Boolean - comparisons and logical operations.md
index e69de29..4fd6c33 100644
--- a/Working with JavaScript data types/Boolean - comparisons and logical operations.md	
+++ b/Working with JavaScript data types/Boolean - comparisons and logical operations.md	
@@ -0,0 +1,27 @@
+A boolean `true` or `false` value represents the result of comparing two values whether they are of the String, Number or any other type. The JavaScript language also has boolean operators. 
+
+You can build simple predicates (expressions which return a boolean type value) and compose them with other predicates to build complex conditions. These complex conditions often represent some rules or policies in the real world which we can represent in the program.
+
+In this lesson you'll learn how all of this works in practice.
+
+**Video**
+
+## Special syntax: Single-line if-s
+
+In the above video, you've seen us write `if` followed by some code in curly braces (`{ ... }`).
+
+With simple statements, it's actually possible to leave out the curly braces. For example:
+
+```js
+// Using curly braces.
+if (isValidPassword) {
+  console.log("This password is valid!");
+}
+
+// Leaving out the curly braces.
+if (isValidPassword) console.log("This password is valid!");
+```
+
+Both the examples above do the same thing. The latter is simply shorter.
+
+In most cases, you'll want to use curly braces to _contain_ your code; however, it is possible to leave it out if the result or action because of an expression is simple.
diff --git a/Working with JavaScript data types/Find the length of a string.md b/Working with JavaScript data types/Find the length of a string.md
index e69de29..e42b2fd 100644
--- a/Working with JavaScript data types/Find the length of a string.md	
+++ b/Working with JavaScript data types/Find the length of a string.md	
@@ -0,0 +1,3 @@
+Here you'll learn how to find the number of characters present in a string (including whitespace characters).
+
+This lesson also introduces simple conditionals, which let you check `if` the value of something matches an expectation, and then do something, or `else` do something else.
\ No newline at end of file
diff --git a/Working with JavaScript data types/Introduction to strings.md b/Working with JavaScript data types/Introduction to strings.md
index e69de29..dae1cd5 100644
--- a/Working with JavaScript data types/Introduction to strings.md	
+++ b/Working with JavaScript data types/Introduction to strings.md	
@@ -0,0 +1,34 @@
+
+# Mastering Strings in JavaScript
+
+
+Strings are one of the fundamental type of values for representing text in the JavaScript programming language. This lesson will teach you how to create strings, store them in variables for later use and print them to the web browser console for display.
+
+**Video**
+
+## Additional reading: `let`, `const` and `var`.
+
+In this lesson, you've seen us define variables using the `let` keyword. For most of this course, we'll be using the `let` keyword to create variables.
+
+There are two other ways to create variables: `const` and `var`:
+
+### `const`
+
+The `const` keyword creates immutable values. For example:
+
+```js
+const myString = "Hello world";
+
+// The following line will cause an error.
+myString = "Another string";
+```
+
+Constants, once created, cannot be reassigned to a new value. Trying to do so will cause an error.
+
+### `var` 
+
+In older scripts, you may also find another keyword: `var` instead of `let`.
+
+The `var` keyword is _almost_ the same as `let`. However, it is an _old_ way of defining variables, and can have some surprising behavior. It is almost never used in modern JavaScript code, and we will avoid using `var` as much as possible in this course.
+
+If you'd still like to learn more, here's an excellent resource on [the old "var"](https://javascript.info/var).
\ No newline at end of file
diff --git a/Working with JavaScript data types/Join strings together.md b/Working with JavaScript data types/Join strings together.md
index e69de29..db250ee 100644
--- a/Working with JavaScript data types/Join strings together.md	
+++ b/Working with JavaScript data types/Join strings together.md	
@@ -0,0 +1,3 @@
+## String Concatenation: Joining Text in JavaScript
+
+You'll learn how to join multiple `String` type values into a single `String` type value. This is one of the most frequently used features of strings in programming.
\ No newline at end of file
diff --git a/Working with JavaScript data types/Numbers.md b/Working with JavaScript data types/Numbers.md
index e69de29..2595c3b 100644
--- a/Working with JavaScript data types/Numbers.md	
+++ b/Working with JavaScript data types/Numbers.md	
@@ -0,0 +1,6 @@
+You'll learn how to:
+
+1. Perform basic calculations with numbers
+2. Comparing two numbers (boolean comparisons)
+3. Convert a number stored in string format to the Number type
+4. Take advantage of math functions already available in JavaScript
\ No newline at end of file
diff --git a/Working with JavaScript data types/Putting HTML and JS together.md b/Working with JavaScript data types/Putting HTML and JS together.md
index e69de29..9610ce1 100644
--- a/Working with JavaScript data types/Putting HTML and JS together.md	
+++ b/Working with JavaScript data types/Putting HTML and JS together.md	
@@ -0,0 +1,7 @@
+JavaScript with the <script> Tag
+
+The `<script>` tag is used to embed client-side script (JavaScript) into HTML pages.
+
+The `<script>` element either contains the script itself, or it points to an external script file using the `src` property.
+
+Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
\ No newline at end of file
diff --git a/Working with JavaScript data types/Search for a string inside another string.md b/Working with JavaScript data types/Search for a string inside another string.md
index e69de29..40633c2 100644
--- a/Working with JavaScript data types/Search for a string inside another string.md	
+++ b/Working with JavaScript data types/Search for a string inside another string.md	
@@ -0,0 +1,3 @@
+When given a body of text, or a string value you may need to quickly find out if a certain string is present within this other text or string value.
+
+This lesson also introduces _booleans_ - the values `true` and `false`.
\ No newline at end of file
diff --git a/Working with JavaScript data types/Sort a collection of strings.md b/Working with JavaScript data types/Sort a collection of strings.md
index e69de29..7862d9d 100644
--- a/Working with JavaScript data types/Sort a collection of strings.md	
+++ b/Working with JavaScript data types/Sort a collection of strings.md	
@@ -0,0 +1,3 @@
+How do you arrange a collection of strings in random order into their alphabetical order. This process is known as sorting. Here you'll learn how easy it is to sort a collection of strings in JavaScript.
+
+This lesson also quickly introduces you to a data-structure that lets you group together a list of values - an *array*.
\ No newline at end of file
diff --git a/Working with JavaScript data types/Split strings by a pattern.md b/Working with JavaScript data types/Split strings by a pattern.md
index e69de29..32a2f5b 100644
--- a/Working with JavaScript data types/Split strings by a pattern.md	
+++ b/Working with JavaScript data types/Split strings by a pattern.md	
@@ -0,0 +1 @@
+You'll learn how to split text into different string values based on a repeating pattern. This is the opposite of joining where multiple strings are combined or concatenated into a single string. Here we split an existing string into multiple strings.
\ No newline at end of file
diff --git a/Working with JavaScript data types/String equality comparison.md b/Working with JavaScript data types/String equality comparison.md
index e69de29..dc58349 100644
--- a/Working with JavaScript data types/String equality comparison.md	
+++ b/Working with JavaScript data types/String equality comparison.md	
@@ -0,0 +1 @@
+Here you'll learn how to compare two different strings and figure out if they are the same or not.
\ No newline at end of file
diff --git a/Working with JavaScript data types/Task: Create a function to validate passphrase.md b/Working with JavaScript data types/Task: Create a function to validate passphrase.md
index e69de29..29457db 100644
--- a/Working with JavaScript data types/Task: Create a function to validate passphrase.md	
+++ b/Working with JavaScript data types/Task: Create a function to validate passphrase.md	
@@ -0,0 +1,38 @@
+## What is a passphrase
+
+A passphrase is a sentence-like string of words used for authentication that is longer than a traditional password, easy to remember, and difficult to crack. Typical passwords range from 8-16 characters on average, while passphrases can reach up to 100 characters in length.
+
+Here is a short read on the differences between passwords and passphrases and why the latter is preferred these days: https://www.passworddragon.com/password-vs-passphrase
+
+## Validate a passphrase
+
+Now that you have an idea of what a passphrase is all about, let's get into what is expected of you to complete this small task.
+
+You need to complete a function that validates whether a supplied string is a valid passphrase or not satisfying certain conditions. 
+
+We will be covering functions in-depth in the upcoming levels. But here is what functions are basically under the hood - Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. 
+
+In this task, you will be tested on your knowledge in concepts covered so far like strings, variables, arrays, boolean values, etc.
+
+Here is the list of conditions to be met for completing this function in the task:
+
+1. The passphrase should have a minimum of four words.
+2. Each word in the passphrase should have more than one character. 
+4. The function should return a boolean value - true if the supplied string is a valid passphrase and false if it is not.
+
+We have attached a skeleton JS file with this lesson. You are expected to just complete the empty function `isValidPassphrase` so that it _returns_ the expected value.
+
+## Important instructions
+
+1. Download the JS file which is the template for completing this task.
+2. Fill in the code exactly where it is commented. Do not modify any other parts of the file.
+3. Follow the instructions and other examples that are given in the template file, as you are yet to be introduced to functions. The intend of the task is just to test your understanding of various aspects covered so far in the course.
+
+
+Download the file above and complete the function `isValidPassphrase` with the conditions mentioned above. 
+
+> **Important:** This file contains detailed instructions on how to complete this task. Go through all the comments in the file.
+
+Once you're done with the task, save and upload the file in the _Submit_ tab of this module.
+
+Good luck with the task! Have fun! :)
\ No newline at end of file
diff --git a/Working with JavaScript data types/WD101 Halfway feedback form.md b/Working with JavaScript data types/WD101 Halfway feedback form.md
index e69de29..86a51c9 100644
--- a/Working with JavaScript data types/WD101 Halfway feedback form.md	
+++ b/Working with JavaScript data types/WD101 Halfway feedback form.md	
@@ -0,0 +1 @@
+Good going! You are already at Level 5 in this course. This form is to understand your learning experience in this course so far.
\ No newline at end of file
diff --git a/Working with JavaScript data types/What is JavaScript.md b/Working with JavaScript data types/What is JavaScript.md
index e69de29..41e25b7 100644
--- a/Working with JavaScript data types/What is JavaScript.md	
+++ b/Working with JavaScript data types/What is JavaScript.md	
@@ -0,0 +1,13 @@
+# Explore the World of Web Development with JavaScript!
+
+Most websites that you use these days will send code to your browser in these three languages:
+
+**HTML - HyperText Markup Language:** HTML provides the essential structure for a webpage, defining its content and layout.
+
+**CSS - Cascading Style Sheets:** CSS is responsible for the visual presentation and aesthetics of a webpage. It determines how the content looks, including colors, fonts, and layout.
+
+**JavaScript - JS:** JavaScript adds a layer of interactivity and behavior to webpages. It enables dynamic features, such as interactive forms, animations, and responsive elements, making websites more engaging and user-friendly.
+
+With this level, we're introducing you to the JavaScript.
+
+So, let's begin learning the [most popular programming language](https://survey.stackoverflow.co/2022/#most-popular-technologies-language) in the world!
\ No newline at end of file

From e4ccb3a41d39e6da6cbb9b7d54fa5ef09ebd2292 Mon Sep 17 00:00:00 2001
From: vsharma2288 <varun@pupilfirst.org>
Date: Wed, 11 Oct 2023 16:52:44 +0530
Subject: [PATCH 12/13] Rectify an issue in the Web browser file

---
 .../Web Browsers.md                           | 71 +++++++------------
 1 file changed, 24 insertions(+), 47 deletions(-)

diff --git a/Let's create our own websites!/Web Browsers.md b/Let's create our own websites!/Web Browsers.md
index 210cf2b..9e13ba9 100644
--- a/Let's create our own websites!/Web Browsers.md	
+++ b/Let's create our own websites!/Web Browsers.md	
@@ -1,61 +1,38 @@
-<!---
-Suggestion: Can we add this vieo < https://www.youtube.com/watch?v=fyOSkkQK14w > OR this < https://www.youtube.com/watch?v=DuSURHrZG6I > to the lesson
---->
+We all use web browsers like Google Chrome, Mozilla Firefox and Microsoft Edge every day, but do we understand what they are? 
 
-## IP Address
+Let's find out, what made the web browsers, one of the most used software application in today's world.
 
-Just as every house is assigned a specific and unique postal address, all computers connected to the Internet are also assigned an _IP Address_. IP stands for **I**nternet **P**rotocol.
+### What is web browser?
 
-There are two kinds of IP addresses: _IPv4_ and _IPv6_.
+A **Web Browser** is nothing but a software application, which is used to access the information available on the internet. When a user like you and me requests some information, the web browser fetches the data from a web server and then displays the response on your desktop or mobile device. The information is transferred using the **Hypertext Transfer Protocol (HTTP)**, which defines how text, images and video are transmitted on the web.
 
-An example of an IPV4 address looks like a combination of 4 numbers: 
+### How does a web browser work?
+Every webpage, image and video available on the internet, has its own unique Uniform Resource Locator (URL). You've already learned about **URL** in the previous video.
+It's like a street address that tells your browser where to go on the Internet.
 
-```
-142.250.76.46
-```
+When you type a URL into the browser's address bar and press `Enter` on your keyboard, the browser will load the page associated with that URL.
 
-**IPv4** is the older version which allows for a maximum of around *4.3 billion* IP addresses. Each of those four numbers (segment) represents 8 _bits_ of information. That means one segment can count as high as 255.
+It uses a piece of software called a **rendering engine** to translate that data into text and images. This data is written in **Hypertext Markup Language** (HTML) and web browsers read this code to create what we see, hear and experience on the internet.
 
-While 4.3 billion might sound like a lot of addresses, it isn't anywhere near enough to satisfy today's numbers of devices connected to the internet. To satisfy the need for _addressing_ the ever-growing number internet users and devices, a new **IPv6** version was created that can provide _many more_ addresses.
+### History of the web browser
+The first web browser, **WorldWideWeb** was created in the year of 1990 by Tim Berners-Lee. 
+Though, it was completely different from the World Wide Web we use today.
 
-An example of a _full_ IPv6 IP address would be:
+In 1993, a new browser Mosaic was revealed by Mark Andressen and their team. It was the first browser to display text and images at a time on the device screen. 
+Later in 1994, he also created another browser called, **Netscape**. 
 
-```
-2001:0db8:0000:0000:0000:ff00:0042:8329
-```
+Microsoft launched their Internet Explorer in 1995, and soon it became the most popular web browser.
 
-Notice how the IPv6 address is much longer than IPv4? It greatly increases the available address space.
+In later years, modern browsers like Mozilla Firefox, Google Chrome, Apple Safari came to market.
 
-How much more? 
+### Website Cookies
+Websites save information about you in certain files called **cookies**. 
+Cookie gets saved on your computer for the next time you visit that site. Upon your return, the website code will read that cookie to see that it’s you. 
 
-```
-340,282,366,920,938,463,463,374,607,431,768,211,456 addresses
-```
+For example, when you go to a website, the page remembers your username and password – that’s made possible by a cookie.
+Some cookies are used to remember our interests, our browsing patterns, etc. Websites show us ads based on our interests, using cookies. 
 
-That's approximately 3.4×10^38^. That's a lot - we're not going to need another version of IP addresses for a long while (if ever).
+### Conclusion
+Browsers also does other things like, it keeps your personal information secure and check sites for viruses. It also keeps tracks of sites you've visited and keeps relevant information in its cache. So, the next time you request those same websites, they will load up faster because there's fewer data to download and update the cached version.
 
-> **Do you want to know what your IP address is?**
->
-> The simplest way to discover your current IP address is by typing "What is my IP" in Google search. Google will display your IP address at the top of the search results page.
-
-## Domain Names
-
-Since IP addresses are unique, they are useful for computers to connect with each other, but we humans have a difficult time reading them, or remembering them.
-
-**Domains** associate an IP address like ```142.250.76.46``` with a string of text like `google.com`. Thanks to the [**D**omain **N**ame **S**ystem](https://www.cloudflare.com/learning/dns/what-is-dns/) (DNS), both are interchangeable. You can go to http://142.250.76.46 or http://google.com and end up on the exact same website.
-
-When you type in a domain name into your browser's address bar, your browser contacts the DNS to figure out its IP address, and then uses _that_ to actually contact the server that belongs to the domain.
-
-In short, a domain name is a unique, easy-to-remember address used to access websites.
-
-## What's a URL?
-
-**URL** stands for _Uniform Resource Locator_, it's simply a web address that uniquely identifies a specific resource in the computer network or the Internet.
-
-For example, the current page’s URL is `https://www.pupilfirst.school/targets/12078`, and it can be divided in 3 parts:
-
-- ```https://``` is the protocol.
-- ```www.pupilfirst.school``` is the domain.
-- ```/targets/12078``` is the path to a _resource_.
-
-Watch the video below to learn more about how networks talk to each other, and how the Internet works.
\ No newline at end of file
+That's it for this lesson, see you in the next one.
\ No newline at end of file

From e5b31698f3ddf071634e36209dd0f8b7ca8f405d Mon Sep 17 00:00:00 2001
From: vsharma2288 <varun@pupilfirst.org>
Date: Thu, 12 Oct 2023 16:02:11 +0530
Subject: [PATCH 13/13] Making changes in a L8 file, content was missing in the
 github repo

---
 ...rn about the HTML Form element and Form data?.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/Creating a registration with validations /Why should you learn about the HTML Form element and Form data?.md b/Creating a registration with validations /Why should you learn about the HTML Form element and Form data?.md
index e69de29..ebe05ee 100644
--- a/Creating a registration with validations /Why should you learn about the HTML Form element and Form data?.md	
+++ b/Creating a registration with validations /Why should you learn about the HTML Form element and Form data?.md	
@@ -0,0 +1,13 @@
+# HTML Forms: Enhancing User Interaction
+
+HTML forms are a powerful tool for web interaction. They serve two primary functions:
+
+* **Data Collection**: Forms gather user data, commonly seen in registration or login forms for services like Gmail or Facebook.
+
+* **User Interaction**: Forms are the main point of interaction between users and web applications. They enable data input, which can be sent for processing or used to update applications instantly.
+
+**Form Components:**
+HTML forms include various controls like text fields, dropdowns, buttons, checkboxes, and radio buttons. These controls are usually created using the <input> element.
+
+**Enhancing User Experience:**
+Forms can enforce data formats and values through validation and can also provide text labels for accessibility. Understanding how to use and customize forms is essential for creating user-friendly web experiences.
\ No newline at end of file