label element, the different input elements, the required attribute, and more. "
]
},
- "wgot": { "title": "19", "intro": [] },
+ "lecture-working-with-tables": {
+ "title": "Working with Tables",
+ "intro": ["In these lecture videos, you will learn about HTML tables."]
+ },
"workshop-final-exams-table": {
"title": "Build a Final Exams Table",
"intro": [
@@ -1820,7 +1833,12 @@
"This lab will give you an opportunity to practice working with the different table components like the Table Head, Table Row and Table Data Cell elements."
]
},
- "rsve": { "title": "22", "intro": [] },
+ "lecture-working-with-html-tools": {
+ "title": "Working with HTML Tools",
+ "intro": [
+ "In these lecture videos, you will learn about working with HTML tools."
+ ]
+ },
"review-html-tables-and-forms": {
"title": "HTML Tables and Forms Review",
"intro": [
@@ -1834,7 +1852,12 @@
"The following quiz will test your knowledge of HTML tables and forms."
]
},
- "ghoc": { "title": "25", "intro": [] },
+ "lecture-importance-of-accessibility-and-good-html-structure": {
+ "title": "Importance of Accessibility and Good HTML Structure",
+ "intro": [
+ "In these lecture videos, you will learn about importance of accessibility and using good HTML structure."
+ ]
+ },
"lab-checkout-page": {
"title": "Build a Checkout Page",
"intro": ["In this lab, you will create an accessible checkout page."]
diff --git a/client/src/pages/learn/full-stack-developer/lecture-importance-of-accessibility-and-good-html-structure/index.md b/client/src/pages/learn/full-stack-developer/lecture-importance-of-accessibility-and-good-html-structure/index.md
new file mode 100644
index 00000000000..18ebfd705dd
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/lecture-importance-of-accessibility-and-good-html-structure/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to Importance of Accessibility and Good HTML Structure
+block: lecture-importance-of-accessibility-and-good-html-structure
+superBlock: full-stack-developer
+---
+
+## Introduction to Importance of Accessibility and Good HTML Structure
+
+In these lecture videos, you will learn about importance of accessibility and using good HTML structure.
diff --git a/client/src/pages/learn/full-stack-developer/lecture-importance-of-semantic-html/index.md b/client/src/pages/learn/full-stack-developer/lecture-importance-of-semantic-html/index.md
new file mode 100644
index 00000000000..800115182b3
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/lecture-importance-of-semantic-html/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to Importance of Semantic HTML
+block: lecture-importance-of-semantic-html
+superBlock: full-stack-developer
+---
+
+## Introduction to Importance of Semantic HTML
+
+In these lecture videos, you will learn about semantic HTML and the importance of using it.
diff --git a/client/src/pages/learn/full-stack-developer/lecture-working-with-forms/index.md b/client/src/pages/learn/full-stack-developer/lecture-working-with-forms/index.md
new file mode 100644
index 00000000000..798244fc6cb
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/lecture-working-with-forms/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to Working with Forms
+block: lecture-working-with-forms
+superBlock: full-stack-developer
+---
+
+## Introduction to Working with Forms
+
+In these lecture videos, you will learn about working with forms in HTML.
diff --git a/client/src/pages/learn/full-stack-developer/lecture-working-with-html-tools/index.md b/client/src/pages/learn/full-stack-developer/lecture-working-with-html-tools/index.md
new file mode 100644
index 00000000000..69602c3b9d2
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/lecture-working-with-html-tools/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to Working with HTML Tools
+block: lecture-working-with-html-tools
+superBlock: full-stack-developer
+---
+
+## Introduction to Working with HTML Tools
+
+In these lecture videos, you will learn about working with HTML tools.
diff --git a/client/src/pages/learn/full-stack-developer/lecture-working-with-tables/index.md b/client/src/pages/learn/full-stack-developer/lecture-working-with-tables/index.md
new file mode 100644
index 00000000000..77826218f24
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/lecture-working-with-tables/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to Working with Tables
+block: lecture-working-with-tables
+superBlock: full-stack-developer
+---
+
+## Introduction to Working with Tables
+
+In these lecture videos, you will learn about HTML tables.
diff --git a/curriculum/challenges/_meta/lecture-html-fundamentals/meta.json b/curriculum/challenges/_meta/lecture-html-fundamentals/meta.json
index eabfc63511a..2fdd65cbd75 100644
--- a/curriculum/challenges/_meta/lecture-html-fundamentals/meta.json
+++ b/curriculum/challenges/_meta/lecture-html-fundamentals/meta.json
@@ -37,7 +37,7 @@
},
{
"id": "670839051794aa19fcef6dc8",
- "title": "What Is UTF-8 Character Encoding and Why Is It Needed?"
+ "title": "What Is UTF-8 Character Encoding, and Why Is It Needed?"
},
{
"id": "67083952f800051a8a21fcfd",
diff --git a/curriculum/challenges/_meta/lecture-importance-of-accessibility-and-good-html-structure/meta.json b/curriculum/challenges/_meta/lecture-importance-of-accessibility-and-good-html-structure/meta.json
new file mode 100644
index 00000000000..cf5f2ca6a76
--- /dev/null
+++ b/curriculum/challenges/_meta/lecture-importance-of-accessibility-and-good-html-structure/meta.json
@@ -0,0 +1,103 @@
+{
+ "name": "Importance of Accessibility and Good HTML Structure",
+ "blockType": "lecture",
+ "blockLayout": "challenge-list",
+ "isUpcomingChange": true,
+ "dashedName": "lecture-importance-of-accessibility-and-good-html-structure",
+ "superBlock": "full-stack-developer",
+ "challengeOrder": [
+ {
+ "id": "672a51e9e4fd8b8552eeb758",
+ "title": "What Is Accessibility?"
+ },
+ {
+ "id": "672a5310d7e46b8a34d48dfd",
+ "title": "What Are Screen Readers, and Who Uses Them?"
+ },
+ {
+ "id": "672a5326a7606a8a766cbedb",
+ "title": "What Are Large Text or Braille Keyboards, and Who Uses Them?"
+ },
+ {
+ "id": "672a533e6041c28ad680eb8f",
+ "title": "What Are Alternative Pointing Devices Such as Trackballs, Joysticks, and Touchpads Used For?"
+ },
+ {
+ "id": "672a5361ef88158b25fbfba7",
+ "title": "What Are Screen Magnifiers Used For?"
+ },
+ {
+ "id": "672a536f8386288b9ed0a154",
+ "title": "What Is Voice Recognition Software Used For?"
+ },
+ {
+ "id": "672a537f05f3798bd4f57d2d",
+ "title": "What Are Some Common Accessibility Auditing Tools to Use?"
+ },
+ {
+ "id": "672a538c029f9e8c1687460e",
+ "title": "How Does Proper Heading Level Structure Affect Accessibility?"
+ },
+ {
+ "id": "672a539b887ec68c593cdc4b",
+ "title": "What Are Best Practices for Tables and Accessibility?"
+ },
+ {
+ "id": "672a53ae8f1ad28c8a1ed0f0",
+ "title": "Why Is It Important for Inputs to Have an Associated Label?"
+ },
+ {
+ "id": "672a53cf67140d8cd85d4b0f",
+ "title": "What Is the Purpose of WAI-ARIA, and How Does It Work?"
+ },
+ {
+ "id": "672a549231b8728f7171ed9d",
+ "title": "What Are ARIA Roles?"
+ },
+ {
+ "id": "672a54a6675c168faa84252d",
+ "title": "What Are the Roles of the aria-label and aria-labelledby Attributes?"
+ },
+ {
+ "id": "672a54bc58319c8fe6f78ad4",
+ "title": "What Is the aria-hidden Attribute, and How Does It Work?"
+ },
+ {
+ "id": "672a54ce90c19e9038f481d7",
+ "title": "What Is the aria-expanded Attribute, and How Does It Work?"
+ },
+ {
+ "id": "672a54dff9dc439089f1a219",
+ "title": "What Is the aria-live Attribute, and How Does It Work?"
+ },
+ {
+ "id": "672a54f29d783890d1f94740",
+ "title": "What Are Some Common ARIA States Used on Custom Control Elements?"
+ },
+ {
+ "id": "672a5507d857a891139abc7f",
+ "title": "What Is the aria-controls Attribute, and How Does It Work?"
+ },
+ {
+ "id": "672a551975938a916c74802c",
+ "title": "What Is the aria-describedby Attribute, and How Does It Work?"
+ },
+ {
+ "id": "672a55b5c0c14493328fe36e",
+ "title": "When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?"
+ },
+ {
+ "id": "672a55dd1d86bc939606e204",
+ "title": "What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text?"
+ },
+ {
+ "id": "672a55eb7791559421ff0cd3",
+ "title": "What Are Good Ways to Make Audio and Video Content Accessible?"
+ },
+ {
+ "id": "672a55fbc2d95a9453151caf",
+ "title": "What Are Some Ways to Make Web Applications Keyboard Accessible?"
+ }
+ ],
+ "helpCategory": "HTML-CSS"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/_meta/lecture-importance-of-semantic-html/meta.json b/curriculum/challenges/_meta/lecture-importance-of-semantic-html/meta.json
new file mode 100644
index 00000000000..29b3f63af10
--- /dev/null
+++ b/curriculum/challenges/_meta/lecture-importance-of-semantic-html/meta.json
@@ -0,0 +1,63 @@
+{
+ "name": "Importance of Semantic HTML",
+ "blockType": "lecture",
+ "blockLayout": "challenge-list",
+ "isUpcomingChange": true,
+ "dashedName": "lecture-importance-of-semantic-html",
+ "superBlock": "full-stack-developer",
+ "challengeOrder": [
+ {
+ "id": "67298243760ae980de5266db",
+ "title": "Why Should You Care About Semantic HTML?"
+ },
+ {
+ "id": "672985445d7da807c6b4f406",
+ "title": "Why is it Important to Have Good Structural Hierarchy?"
+ },
+ {
+ "id": "672990ecf71a852804ababe7",
+ "title": "What Is the Difference Between Presentational and Semantic HTML?"
+ },
+ {
+ "id": "6729959bf9c8e835f46b3f78",
+ "title": "When Should You Use the Emphasis Element Over the Idiomatic Text Element?"
+ },
+ {
+ "id": "672995ac85fd943657c2ede5",
+ "title": "When Should You Use the Strong Element Over the Bring Attention To Element?"
+ },
+ {
+ "id": "672995bda6c67e369aaf8588",
+ "title": "What Are Description Lists, and When Should You Use Them?"
+ },
+ {
+ "id": "672995c9e6f69436dbcccc79",
+ "title": "How Do Block and Inline Quotes Work in HTML?"
+ },
+ {
+ "id": "672995d673bd3237200b9e7c",
+ "title": "How Do You Display Abbreviations and Acronyms in HTML?"
+ },
+ {
+ "id": "672995e43674fb3775b9ec5d",
+ "title": "How Do You Display Addresses in HTML?"
+ },
+ {
+ "id": "672995f16ed97837b365a9f6",
+ "title": "How Do You Display Times and Dates in HTML?"
+ },
+ {
+ "id": "672995ffdfd2f337f5f215f8",
+ "title": "How Do You Display Mathematical Equations and Chemical Formulas in HTML?"
+ },
+ {
+ "id": "6729960ed6e2ca3825940e97",
+ "title": "How Do You Represent Computer Code in HTML?"
+ },
+ {
+ "id": "6729963b1ab11638753cf082",
+ "title": "What Are the U, S, and Ruby Elements Used For, and How Do They Work?"
+ }
+ ],
+ "helpCategory": "HTML-CSS"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/_meta/lecture-working-with-forms/meta.json b/curriculum/challenges/_meta/lecture-working-with-forms/meta.json
new file mode 100644
index 00000000000..412901ffd5d
--- /dev/null
+++ b/curriculum/challenges/_meta/lecture-working-with-forms/meta.json
@@ -0,0 +1,27 @@
+{
+ "name": "Working with Forms",
+ "blockType": "lecture",
+ "blockLayout": "challenge-list",
+ "isUpcomingChange": true,
+ "dashedName": "lecture-working-with-forms",
+ "superBlock": "full-stack-developer",
+ "challengeOrder": [
+ {
+ "id": "6729974ec29be33cb00eb54d",
+ "title": "How Do Forms, Labels, and Inputs Work in HTML?"
+ },
+ {
+ "id": "672a4cd3d59756726657efb8",
+ "title": "What Are the Different Types of Buttons, and When Should You Use Them?"
+ },
+ {
+ "id": "672a4ce6dab9eb735828b48b",
+ "title": "What Is Client-Side Form Validation in HTML Forms, and What Are Some Examples?"
+ },
+ {
+ "id": "672a4cf959443073a6774908",
+ "title": "What Are the Different Form States, and Why Are They Important?"
+ }
+ ],
+ "helpCategory": "HTML-CSS"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/_meta/lecture-working-with-html-tools/meta.json b/curriculum/challenges/_meta/lecture-working-with-html-tools/meta.json
new file mode 100644
index 00000000000..2dc84e0181b
--- /dev/null
+++ b/curriculum/challenges/_meta/lecture-working-with-html-tools/meta.json
@@ -0,0 +1,19 @@
+{
+ "name": "Working with HTML Tools",
+ "blockType": "lecture",
+ "blockLayout": "challenge-list",
+ "isUpcomingChange": true,
+ "dashedName": "lecture-working-with-html-tools",
+ "superBlock": "full-stack-developer",
+ "challengeOrder": [
+ {
+ "id": "672a4fa7d335bc7cfb63a392",
+ "title": "What Is an HTML Validator, and How Can It Help You Debug Your Code?"
+ },
+ {
+ "id": "672a511bb408ec81c592eb68",
+ "title": "How to Use the DOM Inspector and DevTools to Debug and Build Your Projects"
+ }
+ ],
+ "helpCategory": "HTML-CSS"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/_meta/lecture-working-with-tables/meta.json b/curriculum/challenges/_meta/lecture-working-with-tables/meta.json
new file mode 100644
index 00000000000..fd1f945a53f
--- /dev/null
+++ b/curriculum/challenges/_meta/lecture-working-with-tables/meta.json
@@ -0,0 +1,10 @@
+{
+ "name": "Working with Tables",
+ "blockType": "lecture",
+ "blockLayout": "challenge-list",
+ "isUpcomingChange": true,
+ "dashedName": "lecture-working-with-tables",
+ "superBlock": "full-stack-developer",
+ "challengeOrder": [{ "id": "672a4e04a24858778f57ebfe", "title": "What Are HTML Tables Used For, and What Should They Not Be Used For?" }],
+ "helpCategory": "HTML-CSS"
+}
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md b/curriculum/challenges/english/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
index 90533567f89..e49edd740af 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
@@ -1,6 +1,6 @@
---
id: 670839051794aa19fcef6dc8
-title: What Is UTF-8 Character Encoding and Why Is It Needed?
+title: What Is UTF-8 Character Encoding, and Why Is It Needed?
challengeType: 11
videoId: SuTPQkOpa10
dashedName: what-is-utf-8-character-encoding
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md
new file mode 100644
index 00000000000..4935c3f182c
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md
@@ -0,0 +1,121 @@
+---
+id: 672a51e9e4fd8b8552eeb758
+title: What Is Accessibility?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-accessibility
+---
+
+# --description--
+
+Watch the video lecture and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the primary goal of web accessibility?
+
+## --answers--
+
+To make websites look better.
+
+### --feedback--
+
+Think about why you should make websites accessible.
+
+---
+
+To ensure websites are usable by everyone.
+
+---
+
+To improve website performance.
+
+### --feedback--
+
+Think about why you should make websites accessible.
+
+---
+
+To increase website traffic.
+
+### --feedback--
+
+Think about why you should make websites accessible.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What are The Web Content Accessibility Guidelines (WCAG)?
+
+## --answers--
+
+A programming language for web development.
+
+### --feedback--
+
+Think about why you should make websites inclusive.
+
+---
+
+A set of guidelines for making websites accessible to everyone.
+
+---
+
+A new design trend for websites.
+
+### --feedback--
+
+Think about why you should make websites inclusive.
+
+---
+
+A tool for testing website performance.
+
+### --feedback--
+
+Think about why you should make websites inclusive.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of the following is NOT a core principle of The Web Content Accessibility Guidelines (WCAG)?
+
+## --answers--
+
+Perceivable.
+
+### --feedback--
+
+Think about the essential principles of an accessible website, the guidelines that online content should follow.
+
+---
+
+Operable.
+
+### --feedback--
+
+Think about the essential principles of an accessible website, the guidelines that online content should follow.
+
+---
+
+Understandable.
+
+### --feedback--
+
+Think about the essential principles of an accessible website, the guidelines that online content should follow.
+
+---
+
+Compatible.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md
new file mode 100644
index 00000000000..8bd8e806926
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md
@@ -0,0 +1,121 @@
+---
+id: 672a5310d7e46b8a34d48dfd
+title: What Are Screen Readers, and Who Uses Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-screen-readers
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of the following is the screen reader built into macOS and iOS devices?
+
+## --answers--
+
+Ella.
+
+### --feedback--
+
+Think of the screen reader software Apple made and maintain.
+
+---
+
+Speakup.
+
+### --feedback--
+
+Think of the screen reader software Apple made and maintain.
+
+---
+
+VoiceBox.
+
+### --feedback--
+
+Think of the screen reader software Apple made and maintain.
+
+---
+
+VoiceOver.
+
+## --video-solution--
+
+4
+
+## --text--
+
+Which of the following are screen readers not made for?
+
+## --answers--
+
+The blind.
+
+### --feedback--
+
+Look out for those with disability not related to vision.
+
+---
+
+Visually impaired people.
+
+### --feedback--
+
+Look out for those with disability not related to vision.
+
+---
+
+The deaf.
+
+---
+
+Dyslexic people.
+
+### --feedback--
+
+Look out for those with disability not related to vision.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of these is not a feature of screen readers?
+
+## --answers--
+
+Speech-to-text.
+
+---
+
+Text-to-speech.
+
+### --feedback--
+
+Think about converting written content into spoken words.
+
+---
+
+Braille output.
+
+### --feedback--
+
+Think about converting written content into spoken words.
+
+---
+
+Web browsing support.
+
+### --feedback--
+
+Think about converting written content into spoken words.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md
new file mode 100644
index 00000000000..db18fbb9a44
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md
@@ -0,0 +1,121 @@
+---
+id: 672a5326a7606a8a766cbedb
+title: What Are Large Text or Braille Keyboards, and Who Uses Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-large-text-or-braille-keyboards
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is one benefit of using large text keyboards?
+
+## --answers--
+
+Improved typing speed.
+
+### --feedback--
+
+Think about the main purpose of large text keyboards.
+
+---
+
+Enhanced performance.
+
+### --feedback--
+
+Think about the main purpose of large text keyboards.
+
+---
+
+Improved readability of the keys.
+
+---
+
+Reduced noise levels.
+
+### --feedback--
+
+Think about the main purpose of large text keyboards.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Who primarily benefits from the use of large text and braille keyboards?
+
+## --answers--
+
+People with hearing disabilities.
+
+### --feedback--
+
+Think about the type of disabilities that would make standard keyboards more challenging to use.
+
+---
+
+People with cognitive disabilities.
+
+### --feedback--
+
+Think about the type of disabilities that would make standard keyboards more challenging to use.
+
+---
+
+People with visual disabilities.
+
+---
+
+People with motor disabilities.
+
+### --feedback--
+
+Think about the type of disabilities that would make standard keyboards more challenging to use.
+
+## --video-solution--
+
+3
+
+## --text--
+
+How do people identify letters, numbers, and symbols in braille keyboards?
+
+## --answers--
+
+By feeling patterns of raised dots with their fingers.
+
+---
+
+By speaking into the keyboard.
+
+### --feedback--
+
+Think about how people with visual disabilities can interact with the braille keyboard.
+
+---
+
+By using a stylus.
+
+### --feedback--
+
+Think about how people with visual disabilities can interact with the braille keyboard.
+
+---
+
+By reading the keys.
+
+### --feedback--
+
+Think about how people with visual disabilities can interact with the braille keyboard.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md
new file mode 100644
index 00000000000..287030c3d95
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md
@@ -0,0 +1,122 @@
+---
+id: 672a533e6041c28ad680eb8f
+title: What Are Alternative Pointing Devices Such as Trackballs, Joysticks, and Touchpads Used For?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-alternative-pointing-devices
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What kind of device are trackball, joystick, and touchpad?
+
+## --answers--
+
+Output devices.
+
+### --feedback--
+
+Look out for the general name for the devices that help you interact with and control what appears on your screen.
+
+---
+
+Input/output devices.
+
+### --feedback--
+
+Look out for the general name for the devices that help you interact with and control what appears on your screen.
+
+---
+
+Pointing devices.
+
+---
+
+VDU devices.
+
+### --feedback--
+
+Look out for the general name for the devices that help you interact with and control what appears on your screen.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which device supports multi-touch gestures like pinch-to-zoom, two-finger scrolling, tap-to-click, and three-finger swipes?
+
+## --answers--
+
+The traditional mouse.
+
+### --feedback--
+
+Think about the device that allows for direct touch interactions and supports various gestures.
+
+---
+
+Touchpad.
+
+---
+
+Joystick.
+
+### --feedback--
+
+Think about the device that allows for direct touch interactions and supports various gestures.
+
+---
+
+Trackballs.
+
+### --feedback--
+
+Think about the device that allows for direct touch interactions and supports various gestures.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which pointing device is primarily designed for games and specific industrial applications?
+
+## --answers--
+
+Joystick.
+
+---
+
+Trackball.
+
+### --feedback--
+
+Pointing device that provides precise control in gaming. Review the middle part of the video where this was
+discussed.
+
+---
+
+Mouse.
+
+### --feedback--
+
+Pointing device that provides precise control in gaming. Review the middle part of the video where this was discussed.
+
+---
+
+Trackpad or touchpad.
+
+### --feedback--
+
+Pointing device that provides precise control in gaming. Review the middle part of the video where this was discussed.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md
new file mode 100644
index 00000000000..745d4d88394
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md
@@ -0,0 +1,121 @@
+---
+id: 672a5361ef88158b25fbfba7
+title: What Are Screen Magnifiers Used For?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-screen-magnifiers
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+How do most screen magnifiers work?
+
+## --answers--
+
+By providing text-to-speech functionality.
+
+### --feedback--
+
+Focus on how screen magnifiers help users with low vision increase the size of various elements on their screens, not just text.
+
+---
+
+By enlarging the texts, graphics, and other elements on a computer or mobile device screen.
+
+---
+
+By providing a ruler around every element on the page.
+
+### --feedback--
+
+Focus on how screen magnifiers help users with low vision increase the size of various elements on their screens, not just text.
+
+---
+
+By enlarging only the texts on a screen for better visibility.
+
+### --feedback--
+
+Focus on how screen magnifiers help users with low vision increase the size of various elements on their screens, not just text.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of these should a developer do to make their digital products friendly to screen magnifiers?
+
+## --answers--
+
+Use big fonts only.
+
+### --feedback--
+
+Think about how content adjusts to different screen sizes for better responsiveness.
+
+---
+
+Disable zooming to keep the layout intact.
+
+### --feedback--
+
+Think about how content adjusts to different screen sizes for better responsiveness.
+
+---
+
+Rely only on images to convey information.
+
+### --feedback--
+
+Think about how content adjusts to different screen sizes for better responsiveness.
+
+---
+
+Make their pages respond to different screen sizes.
+
+## --video-solution--
+
+4
+
+## --text--
+
+Which of the following is not a third-party screen magnifier?
+
+## --answers--
+
+iZoom.
+
+### --feedback--
+
+Look out for the magnifier that is built into an operating system
+
+---
+
+ZoomMe.
+
+### --feedback--
+
+Look out for the magnifier that is built into an operating system
+
+---
+
+Zoom.
+
+---
+
+Loup.
+
+### --feedback--
+
+Look out for the magnifier that is built into an operating system
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md
new file mode 100644
index 00000000000..94ed2954208
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md
@@ -0,0 +1,121 @@
+---
+id: 672a536f8386288b9ed0a154
+title: What Is Voice Recognition Software Used For?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-voice-recognition-software
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What distinguishes voice recognition from speech recognition?
+
+## --answers--
+
+Voice recognition authenticates and speech recognition authorizes
+
+### --feedback--
+
+Focus on the primary function of each technology. Voice recognition is about who is speaking, while speech recognition is about what is being said.
+
+---
+
+Speech recognition identifies the user through their voice and voice recognition analyzes the speech
+
+### --feedback--
+
+Focus on the primary function of each technology. Voice recognition is about who is speaking, while speech recognition is about what is being said.
+
+---
+
+Voice recognition identifies the user through their voice and speech recognition recognizes the spoken words.
+
+---
+
+Voice recognition and speech recognition are the same thing
+
+### --feedback--
+
+Focus on the primary function of each technology. Voice recognition is about who is speaking, while speech recognition is about what is being said.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following is not among those who use voice recognition software?
+
+## --answers--
+
+Elderly people.
+
+### --feedback--
+
+Focus on the purpose of voice recognition software in enhancing accessibility for various disabilities.
+
+---
+
+People with mobility impairments.
+
+### --feedback--
+
+Focus on the purpose of voice recognition software in enhancing accessibility for various disabilities.
+
+---
+
+People with low leg movement.
+
+---
+
+People with visual impairments.
+
+### --feedback--
+
+Focus on the purpose of voice recognition software in enhancing accessibility for various disabilities.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What are Siri, Alexa, and Google Voice?
+
+## --answers--
+
+Voice recognition tools.
+
+### --feedback--
+
+Think about how these assistants work. Do they react to specific voices, or can anyone use them to perform tasks and get information.
+
+---
+
+Speech recognition tools.
+
+---
+
+They are both voice recognition and speech recognition tools.
+
+### --feedback--
+
+Think about how these assistants work. Do they react to specific voices, or can anyone use them to perform tasks and get information.
+
+---
+
+They are neither voice recognition nor speech recognition tools.
+
+### --feedback--
+
+Think about how these assistants work. Do they react to specific voices, or can anyone use them to perform tasks and get information.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md
new file mode 100644
index 00000000000..43b4c9643c4
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md
@@ -0,0 +1,121 @@
+---
+id: 672a537f05f3798bd4f57d2d
+title: What Are Some Common Accessibility Auditing Tools to Use?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-some-common-accessibility-auditing-tools
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of these best describes an accessibility auditing tool?
+
+## --answers--
+
+It automatically fixes all accessibility issues
+
+### --feedback--
+
+Consider the role of the tool in assessing accessibility.
+
+---
+
+It evaluates how accessible your digital content are
+
+---
+
+It only checks mobile apps
+
+### --feedback--
+
+Consider the role of the tool in assessing accessibility.
+
+---
+
+It requires no manual input
+
+### --feedback--
+
+Consider the role of the tool in assessing accessibility.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of these describes how you can use the IBM Equal Access Accessibility Checker?
+
+## --answers--
+
+It can be used only as a desktop application.
+
+### --feedback--
+
+Think about the different ways you can integrate it into your workflow.
+
+---
+
+It can be used without any development integration.
+
+### --feedback--
+
+Think about the different ways you can integrate it into your workflow.
+
+---
+
+It's exclusively for mobile apps.
+
+### --feedback--
+
+Think about the different ways you can integrate it into your workflow.
+
+---
+
+It can be used as a Chrome extension, Firefox addon, or NPM package.
+
+## --video-solution--
+
+4
+
+## --text--
+
+Which of these is a limitation of using the web version of the tool on Google Lighthouse?
+
+## --answers--
+
+It provides unreliable metrics.
+
+### --feedback--
+
+Think about what the web version of Lighthouse cannot do with certain types of websites.
+
+---
+
+It can only test local websites.
+
+### --feedback--
+
+Think about what the web version of Lighthouse cannot do with certain types of websites.
+
+---
+
+It cannot test local websites.
+
+---
+
+It doesn't support mobile testing.
+
+### --feedback--
+
+Think about what the web version of Lighthouse cannot do with certain types of websites.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
new file mode 100644
index 00000000000..5f8450f7abd
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
@@ -0,0 +1,121 @@
+---
+id: 672a538c029f9e8c1687460e
+title: How Does Proper Heading Level Structure Affect Accessibility?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: how-does-proper-heading-level-structure-affect-accessibility
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+How does proper heading structure help those using screen readers?
+
+## --answers--
+
+It provides visual styling for the content.
+
+### --feedback--
+
+Think about how screen readers assist users in understanding and navigating through the webpage content.
+
+---
+
+It helps screen readers generate a summary of the content.
+
+### --feedback--
+
+Think about how screen readers assist users in understanding and navigating through the webpage content.
+
+---
+
+It allows screen readers to navigate and skip to different sections easily.
+
+---
+
+It improves the loading speed of the webpage.
+
+### --feedback--
+
+Think about how screen readers assist users in understanding and navigating through the webpage content.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Why is it important to use headings properly for users who rely on keyboards?
+
+## --answers--
+
+It improves the visual appeal of the webpage.
+
+### --feedback--
+
+Think about how proper headings can enhance the navigation experience for users who do not use a mouse.
+
+---
+
+It allows users to print the webpage more easily.
+
+### --feedback--
+
+Think about how proper headings can enhance the navigation experience for users who do not use a mouse.
+
+---
+
+It lets users jump between sections without the need to tab through every link.
+
+---
+
+It helps users download the webpage faster.
+
+### --feedback--
+
+Think about how proper headings can enhance the navigation experience for users who do not use a mouse.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of these is one of the best practices for using headings on a web page?
+
+## --answers--
+
+Skipping from `h1` to `h3` to save time.
+
+### --feedback--
+
+Think about making sure heading texts are clear for both users and those who use assistive technologies.
+
+---
+
+Using clear and descriptive texts that summarize the following content.
+
+---
+
+Using any heading level in isolation without any following content.
+
+### --feedback--
+
+Think about making sure heading texts are clear for both users and those who use assistive technologies.
+
+---
+
+Using multiple `h1` tags on a single page for emphasis.
+
+### --feedback--
+
+Think about making sure heading texts are clear for both users and those who use assistive technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md
new file mode 100644
index 00000000000..f360bcc4c86
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md
@@ -0,0 +1,121 @@
+---
+id: 672a539b887ec68c593cdc4b
+title: What Are Best Practices for Tables and Accessibility?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-best-practices-for-tables-and-accessibility
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which HTML element is used to specify the title of a table?
+
+## --answers--
+
+`thead`
+
+### --feedback--
+
+Think about how you would describe the table.
+
+---
+
+`caption`
+
+---
+
+`tbody`
+
+### --feedback--
+
+Think about how you would describe the table.
+
+---
+
+`tr`
+
+### --feedback--
+
+Think about how you would describe the table.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is the purpose of the `scope` attribute in a table header cell (`th`)?
+
+## --answers--
+
+To specify the `colspan` and `rowspan` of the cell.
+
+### --feedback--
+
+Think about how screen readers interpret table structure.
+
+---
+
+To indicate whether the header applies to a row or a column.
+
+---
+
+To define the style of the header cell.
+
+### --feedback--
+
+Think about how screen readers interpret table structure.
+
+---
+
+To add a tooltip to the header cell.
+
+### --feedback--
+
+Think about how screen readers interpret table structure.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of the following is a best practice for creating accessible tables?
+
+## --answers--
+
+Using complex and long table headers.
+
+### --feedback--
+
+Think about how table complexity affects accessibility.
+
+---
+
+Not providing alternative text for images within table cells.
+
+### --feedback--
+
+Think about how table complexity affects accessibility.
+
+---
+
+Using simple table structures with row and column headers.
+
+---
+
+Nesting tables within tables.
+
+### --feedback--
+
+Think about how table complexity affects accessibility.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md
new file mode 100644
index 00000000000..988d190b709
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md
@@ -0,0 +1,121 @@
+---
+id: 672a53ae8f1ad28c8a1ed0f0
+title: Why Is It Important for Inputs to Have an Associated Label?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: why-is-it-important-for-inputs-to-have-an-associated-label
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Why is adding labels to input elements important for accessibility?
+
+## --answers--
+
+They provide visual styling to input fields.
+
+### --feedback--
+
+Think about how screen readers provide information to users.
+
+---
+
+They help screen readers describe the purpose of input fields.
+
+---
+
+They increase the loading speed of web pages.
+
+### --feedback--
+
+Think about how screen readers provide information to users.
+
+---
+
+They enable input fields to accept multiple types of data.
+
+### --feedback--
+
+Think about how screen readers provide information to users.
+
+## --video-solution--
+
+2
+
+## --text--
+
+How do labels associated with input fields improve keyboard navigation?
+
+## --answers--
+
+They enhance the visual appearance of input fields.
+
+### --feedback--
+
+Focus on how users move through a form using only the keyboard.
+
+---
+
+They allow users to tab through input fields without getting lost.
+
+---
+
+They reduce the need for keyboard shortcuts.
+
+### --feedback--
+
+Focus on how users move through a form using only the keyboard.
+
+---
+
+They let input fields accept special characters.
+
+### --feedback--
+
+Focus on how users move through a form using only the keyboard.
+
+## --video-solution--
+
+2
+
+## --text--
+
+How do labels associated with input fields help in identifying errors?
+
+## --answers--
+
+They allow input fields to accept longer text.
+
+### --feedback--
+
+Think about how error messages are communicated to users by screen readers.
+
+---
+
+They help screen readers announce the label along with the error message.
+
+---
+
+They prevent users from submitting forms.
+
+### --feedback--
+
+Think about how error messages are communicated to users by screen readers.
+
+---
+
+They make input fields more colorful.
+
+### --feedback--
+
+Think about how error messages are communicated to users by screen readers.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md
new file mode 100644
index 00000000000..af986253d73
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md
@@ -0,0 +1,121 @@
+---
+id: 672a53cf67140d8cd85d4b0f
+title: What Is the Purpose of WAI-ARIA, and How Does It Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-purpose-of-wai-aria
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the primary purpose of WAI-ARIA attributes in HTML?
+
+## --answers--
+
+To change the visual appearance of elements.
+
+### --feedback--
+
+Focus on how WAI-ARIA enhances HTML elements accessibility.
+
+---
+
+To provide additional semantic information for accessibility.
+
+---
+
+To display tooltips on elements.
+
+### --feedback--
+
+Focus on how WAI-ARIA enhances HTML elements accessibility.
+
+---
+
+To add animations to elements.
+
+### --feedback--
+
+Focus on how WAI-ARIA enhances HTML elements accessibility.
+
+## --video-solution--
+
+2
+
+## --text--
+
+How does WAI-ARIA work to enhance web accessibility?
+
+## --answers--
+
+By improving page load speed.
+
+### --feedback--
+
+Consider how WAI-ARIA categorizes roles, states, and properties.
+
+---
+
+By introducing attributes that provide additional semantic information.
+
+---
+
+By encrypting data.
+
+### --feedback--
+
+Consider how WAI-ARIA categorizes roles, states, and properties.
+
+---
+
+By creating visual effects for elements.
+
+### --feedback--
+
+Consider how WAI-ARIA categorizes roles, states, and properties.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does WAI-ARIA stand for?
+
+## --answers--
+
+Web Accessibility Initiative - Advanced Responsive Internet Applications
+
+### --feedback--
+
+Focus on the accessibility aspect and its impact on dynamic content and UI components.
+
+---
+
+Web Accessibility Interface - Accessible Resource Internet Applications
+
+### --feedback--
+
+Focus on the accessibility aspect and its impact on dynamic content and UI components.
+
+---
+
+Web Accessibility Initiative - Accessible Rich Internet Applications
+
+---
+
+Web Application Interface - Accessibility and Richness
+
+### --feedback--
+
+Focus on the accessibility aspect and its impact on dynamic content and UI components.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md
new file mode 100644
index 00000000000..45f2f251bac
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md
@@ -0,0 +1,121 @@
+---
+id: 672a549231b8728f7171ed9d
+title: What Are ARIA Roles?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-aria-roles
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the primary purpose of ARIA roles?
+
+## --answers--
+
+To define the visual appearance of elements.
+
+### --feedback--
+
+Think about how ARIA roles help assistive technologies understand the content.
+
+---
+
+To improve website performance.
+
+### --feedback--
+
+Think about how ARIA roles help assistive technologies understand the content.
+
+---
+
+To provide semantic information about the purpose of elements.
+
+---
+
+To enhance browser compatibility.
+
+### --feedback--
+
+Think about how ARIA roles help assistive technologies understand the content.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which category of ARIA roles is used to define the purpose and behavior of sub-windows, like pop-up modal dialogues?
+
+## --answers--
+
+Widget roles.
+
+### --feedback--
+
+Think about how to define sub-windows with ARIA roles.
+
+---
+
+Document structure roles.
+
+### --feedback--
+
+Think about how to define sub-windows with ARIA roles.
+
+---
+
+Landmark roles.
+
+### --feedback--
+
+Think about how to define sub-windows with ARIA roles.
+
+---
+
+Window roles.
+
+## --video-solution--
+
+4
+
+## --text--
+
+Which category of ARIA roles is used to indicate dynamic content that must be announced to users?
+
+## --answers--
+
+Widget roles.
+
+### --feedback--
+
+Think about how to provide updates or alerts to users.
+
+---
+
+Document structure roles.
+
+### --feedback--
+
+Think about how to provide updates or alerts to users.
+
+---
+
+Landmark roles.
+
+### --feedback--
+
+Think about how to provide updates or alerts to users.
+
+---
+
+Live region roles.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md
new file mode 100644
index 00000000000..a465acef272
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md
@@ -0,0 +1,121 @@
+---
+id: 672a54a6675c168faa84252d
+title: What Are the Roles of the aria-label and aria-labelledby Attributes?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-the-roles-of-the-aria-label-and-aria-labelledby-attributes
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What does ARIA stand for?
+
+## --answers--
+
+Accessible Rich Internet Applications.
+
+---
+
+Advanced Resource Integration Accessibility.
+
+### --feedback--
+
+Look out for the set of attributes for improving web accessibility by enhancing HTML elements for assistive technologies.
+
+---
+
+Automated Rich Internet Access.
+
+### --feedback--
+
+Look out for the set of attributes for improving web accessibility by enhancing HTML elements for assistive technologies.
+
+---
+
+Accessible Responsive Interactive Applications.
+
+### --feedback--
+
+Look out for the set of attributes for improving web accessibility by enhancing HTML elements for assistive technologies.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What do both `aria-label` and `aria-labelledby` do?
+
+## --answers--
+
+They modify the visual appearance of elements.
+
+### --feedback--
+
+Focus on what helps communicate the purpose of elements to screen readers and other assistive technologies.
+
+---
+
+They provide labels for elements to enhance accessibility for screen readers.
+
+---
+
+They change the functionality of form inputs.
+
+### --feedback--
+
+Focus on what helps communicate the purpose of elements to screen readers and other assistive technologies.
+
+---
+
+They add animation effects to elements.
+
+### --feedback--
+
+Focus on what helps communicate the purpose of elements to screen readers and other assistive technologies.
+
+## --video-solution--
+
+2
+
+## --text--
+
+When should you use `aria-labelledby` over `aria-label`?
+
+## --answers--
+
+When you need to provide a tooltip for an element.
+
+### --feedback--
+
+Think about what is used to link elements to existing text that describes them.
+
+---
+
+When you want to change the color of an element.
+
+### --feedback--
+
+Think about what is used to link elements to existing text that describes them.
+
+---
+
+When you need to hide an element from screen readers.
+
+### --feedback--
+
+Think about what is used to link elements to existing text that describes them.
+
+---
+
+When there is existing visible text on the page that can be used as a label.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md
new file mode 100644
index 00000000000..74efdaa36ae
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md
@@ -0,0 +1,121 @@
+---
+id: 672a54bc58319c8fe6f78ad4
+title: What Is the aria-hidden Attribute, and How Does It Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-aria-hidden-attribute
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the primary purpose of the `aria-hidden` attribute?
+
+## --answers--
+
+To define the visual appearance of an element.
+
+### --feedback--
+
+Think about how `aria-hidden` affects the accessibility of elements.
+
+---
+
+To improve website performance.
+
+### --feedback--
+
+Think about how `aria-hidden` affects the accessibility of elements.
+
+---
+
+To hide elements from assistive technologies.
+
+---
+
+To enhance browser compatibility.
+
+### --feedback--
+
+Think about how `aria-hidden` affects the accessibility of elements.
+
+## --video-solution--
+
+3
+
+## --text--
+
+When should the `aria-hidden` attribute be used?
+
+## --answers--
+
+For all elements on a web page.
+
+### --feedback--
+
+Think about the purpose of `aria-hidden` and when it's appropriate to use it.
+
+---
+
+For elements that are visually hidden but still important for the user experience.
+
+### --feedback--
+
+Think about the purpose of `aria-hidden` and when it's appropriate to use it.
+
+---
+
+For decorative elements that do not contribute to the main content.
+
+---
+
+For elements that are dynamically added or removed.
+
+### --feedback--
+
+Think about the purpose of `aria-hidden` and when it's appropriate to use it.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What are the potential risks of overusing the `aria-hidden` attribute?
+
+## --answers--
+
+Reduced website performance.
+
+### --feedback--
+
+Think about how hiding elements can affect the user experience.
+
+---
+
+Incompatibility with older browsers.
+
+### --feedback--
+
+Think about how hiding elements can affect the user experience.
+
+---
+
+Hindered accessibility for users with disabilities.
+
+---
+
+Increased file size.
+
+### --feedback--
+
+Think about how hiding elements can affect the user experience.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md
new file mode 100644
index 00000000000..8a579141431
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md
@@ -0,0 +1,121 @@
+---
+id: 672a54ce90c19e9038f481d7
+title: What Is the aria-expanded Attribute, and How Does It Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-aria-expanded-attribute
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the primary purpose of the `aria-expanded` attribute?
+
+## --answers--
+
+To define the visual appearance of an element.
+
+### --feedback--
+
+Think about how `aria-expanded` provides information to assistive technologies.
+
+---
+
+To improve website performance.
+
+### --feedback--
+
+Think about how `aria-expanded` provides information to assistive technologies.
+
+---
+
+To indicate whether an element is expanded or collapsed.
+
+---
+
+To enhance browser compatibility.
+
+### --feedback--
+
+Think about how `aria-expanded` provides information to assistive technologies.
+
+## --video-solution--
+
+3
+
+## --text--
+
+When should the `aria-expanded` attribute be used?
+
+## --answers--
+
+For all elements on a web page.
+
+### --feedback--
+
+Consider the context in which `aria-expanded` is most useful.
+
+---
+
+For elements that are visually hidden.
+
+### --feedback--
+
+Consider the context in which `aria-expanded` is most useful.
+
+---
+
+For collapsible elements like menus and accordions.
+
+---
+
+For elements with dynamic content.
+
+### --feedback--
+
+Consider the context in which `aria-expanded` is most useful.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What are the possible values for the `aria-expanded` attribute?
+
+## --answers--
+
+`true`, `false`, `yes`, `no`.
+
+### --feedback--
+
+Think about the states an element can be in regarding expansion or collapse.
+
+---
+
+`open`, `closed`, `expanded`, `collapsed`.
+
+### --feedback--
+
+Think about the states an element can be in regarding expansion or collapse.
+
+---
+
+`show`, `hide`, `visible`, `invisible`.
+
+### --feedback--
+
+Think about the states an element can be in regarding expansion or collapse.
+
+---
+
+`true`, `false`.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md
new file mode 100644
index 00000000000..63fecb64ecc
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md
@@ -0,0 +1,121 @@
+---
+id: 672a54dff9dc439089f1a219
+title: What Is the aria-live Attribute, and How Does It Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-aria-live-attribute
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the primary purpose of the `aria-live` attribute?
+
+## --answers--
+
+To define the visual appearance of an element.
+
+### --feedback--
+
+Think about how `aria-live` helps assistive technologies understand the content.
+
+---
+
+To improve website performance.
+
+### --feedback--
+
+Think about how `aria-live` helps assistive technologies understand the content.
+
+---
+
+To indicate that an element's content is changing dynamically.
+
+---
+
+To enhance browser compatibility.
+
+### --feedback--
+
+Think about how `aria-live` helps assistive technologies understand the content.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following values can be used for the `aria-live` attribute?
+
+## --answers--
+
+`true`, `false`, `off`.
+
+### --feedback--
+
+Think about the different levels of urgency for announcing changes to dynamic content.
+
+---
+
+`visible`, `hidden`, `off`.
+
+### --feedback--
+
+Think about the different levels of urgency for announcing changes to dynamic content.
+
+---
+
+`assertive`, `polite`, `off`.
+
+---
+
+`open`, `closed`, `off`.
+
+### --feedback--
+
+Think about the different levels of urgency for announcing changes to dynamic content.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is the difference between the `polite` and `assertive` values for the `aria-live` attribute?
+
+## --answers--
+
+`polite` announces updates immediately, while `assertive` announces updates when the focus is on another element.
+
+### --feedback--
+
+Think about the level of urgency for announcing dynamic content.
+
+---
+
+`polite` announces updates after the current task is finished, while `assertive` announces updates immediately.
+
+---
+
+There is no difference between `polite` and `assertive`.
+
+### --feedback--
+
+Think about the level of urgency for announcing dynamic content.
+
+---
+
+`polite` is used for important updates, while `assertive` is used for less urgent updates.
+
+### --feedback--
+
+Think about the level of urgency for announcing dynamic content.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md
new file mode 100644
index 00000000000..58a4119ada1
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md
@@ -0,0 +1,121 @@
+---
+id: 672a54f29d783890d1f94740
+title: What Are Some Common ARIA States Used on Custom Control Elements?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-some-common-aria-states-used-on-custom-control-elements
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What ARIA state would you use to indicate that a tab is currently selected?
+
+## --answers--
+
+`aria-disabled`
+
+### --feedback--
+
+This state shows which tab is active.
+
+---
+
+`aria-selected`
+
+---
+
+`aria-haspopup`
+
+### --feedback--
+
+This state shows which tab is active.
+
+---
+
+`aria-checked`
+
+### --feedback--
+
+This state shows which tab is active.
+
+## --video-solution--
+
+2
+
+## --text--
+
+In the context of custom controls, which ARIA state is used to indicate that an element is currently disabled?
+
+## --answers--
+
+`aria-checked`
+
+### --feedback--
+
+This state shows that an element cannot be interacted with.
+
+---
+
+`aria-disabled`
+
+---
+
+`aria-selected`
+
+### --feedback--
+
+This state shows that an element cannot be interacted with.
+
+---
+
+`aria-haspopup`
+
+### --feedback--
+
+This state shows that an element cannot be interacted with.
+
+## --video-solution--
+
+2
+
+## --text--
+
+When you want to indicate that a menu item has a submenu, which ARIA state should be used?
+
+## --answers--
+
+`aria-checked`
+
+### --feedback--
+
+One of the state heavily suggests that a popup is present.
+
+---
+
+`aria-disabled`
+
+### --feedback--
+
+One of the state heavily suggests that a popup is present.
+
+---
+
+`aria-haspopup`
+
+---
+
+`aria-selected`
+
+### --feedback--
+
+One of the state heavily suggests that a popup is present.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md
new file mode 100644
index 00000000000..227f474939e
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md
@@ -0,0 +1,121 @@
+---
+id: 672a5507d857a891139abc7f
+title: What Is the aria-controls Attribute, and How Does It Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-aria-controls-attribute
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the purpose of the `aria-controls` attribute in the context of tabs?
+
+## --answers--
+
+To specify which tab is currently active.
+
+### --feedback--
+
+Think about the association between tabs and content sections.
+
+---
+
+To hide or show sections of content.
+
+### --feedback--
+
+Think about the association between tabs and content sections.
+
+---
+
+To associate a tab with the section it controls.
+
+---
+
+To set the role of the element.
+
+### --feedback--
+
+Think about the association between tabs and content sections.
+
+## --video-solution--
+
+3
+
+## --text--
+
+How does the `aria-controls` attribute affect the content sections in the example?
+
+## --answers--
+
+It automatically updates the content based on user input.
+
+### --feedback--
+
+Think about how the attribute is used to control the visibility of content sections.
+
+---
+
+It hides or shows sections based on which tab is selected.
+
+---
+
+It changes the tab's style to indicate it is selected.
+
+### --feedback--
+
+Think about how the attribute is used to control the visibility of content sections.
+
+---
+
+It defines the visual appearance of the tab.
+
+### --feedback--
+
+Think about how the attribute is used to control the visibility of content sections.
+
+## --video-solution--
+
+2
+
+## --text--
+
+In the provided example, how is the `aria-labelledby` attribute used?
+
+## --answers--
+
+To specify which tab controls which content section.
+
+### --feedback--
+
+It links the tab to the content section it controls.
+
+---
+
+To identify the content section that a tab controls.
+
+---
+
+To define the role of the tab and content sections.
+
+### --feedback--
+
+It links the tab to the content section it controls.
+
+---
+
+To automatically switch between content sections when a tab is clicked.
+
+### --feedback--
+
+It links the tab to the content section it controls.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md
new file mode 100644
index 00000000000..cfe559fe6ee
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md
@@ -0,0 +1,121 @@
+---
+id: 672a551975938a916c74802c
+title: What Is the aria-describedby Attribute, and How Does It Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-aria-describedby-attribute
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the purpose of the `aria-describedby` attribute in HTML?
+
+## --answers--
+
+To specify a unique identifier for an element.
+
+### --feedback--
+
+It helps screen readers provide more context about elements to users with disabilities.
+
+---
+
+To provide additional information about an element to assistive technologies.
+
+---
+
+To define the language of an HTML document.
+
+### --feedback--
+
+It helps screen readers provide more context about elements to users with disabilities.
+
+---
+
+To control the visibility of an HTML element.
+
+### --feedback--
+
+It helps screen readers provide more context about elements to users with disabilities.
+
+## --video-solution--
+
+2
+
+## --text--
+
+In the examples provided, how does the `aria-describedby` attribute enhance the user experience for form fields?
+
+## --answers--
+
+It changes the visual appearance of the form fields.
+
+### --feedback--
+
+Think about additional information helpful for users filling out the form.
+
+---
+
+It associates additional descriptive text with form fields to provide more context or instructions.
+
+---
+
+It validates the form fields' input values.
+
+### --feedback--
+
+Think about additional information helpful for users filling out the form.
+
+---
+
+It automatically populates the form fields with default values.
+
+### --feedback--
+
+Think about additional information helpful for users filling out the form.
+
+## --video-solution--
+
+2
+
+## --text--
+
+How is the `aria-describedby` attribute used in the example with the close button and modal dialog?
+
+## --answers--
+
+It is used to define the size of the close button.
+
+### --feedback--
+
+It helps users understand what happens when the close button is clicked.
+
+---
+
+It provides a label for the close button using a separate text.
+
+### --feedback--
+
+It helps users understand what happens when the close button is clicked.
+
+---
+
+It associates the close button with a description of its action to assistive technologies.
+
+---
+
+It controls the color of the close button.
+
+### --feedback--
+
+It helps users understand what happens when the close button is clicked.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md
new file mode 100644
index 00000000000..bcc9fc059b7
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md
@@ -0,0 +1,121 @@
+---
+id: 672a55b5c0c14493328fe36e
+title: When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: when-is-the-alt-attribute-needed
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the purpose of alt text in an image?
+
+## --answers--
+
+To improve the appearance of an image.
+
+### --feedback--
+
+Think about why images should be accessible and why these descriptions are important.
+
+---
+
+To provide a decorative element to the webpage.
+
+### --feedback--
+
+Think about why images should be accessible and why these descriptions are important.
+
+---
+
+To describe the image for people with visual disabilities.
+
+---
+
+To increase website loading speed.
+
+### --feedback--
+
+Think about why images should be accessible and why these descriptions are important.
+
+## --video-solution--
+
+3
+
+## --text--
+
+When is it appropriate to leave the alt text empty for an image?
+
+## --answers--
+
+When the image is purely decorative.
+
+---
+
+When the image is important to understand the content.
+
+### --feedback--
+
+Think about the role of the image on the page.
+
+---
+
+When the image is small.
+
+### --feedback--
+
+Think about the role of the image on the page.
+
+---
+
+Always, to improve website performance.
+
+### --feedback--
+
+Think about the role of the image on the page.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What should be the primary focus of the alt text for an image that acts as a link?
+
+## --answers--
+
+Describing the image visually.
+
+### --feedback--
+
+Think about the purpose of alt text and how it relates to links.
+
+---
+
+Indicating the link's destination.
+
+---
+
+Combining both the image description and link destination.
+
+### --feedback--
+
+Think about the purpose of alt text and how it relates to links.
+
+---
+
+The alt text is not important for images that are links.
+
+### --feedback--
+
+Think about the purpose of alt text and how it relates to links.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md
new file mode 100644
index 00000000000..c63035cee64
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md
@@ -0,0 +1,121 @@
+---
+id: 672a55dd1d86bc939606e204
+title: What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-the-accessibility-benefits-for-good-link-text
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Why is clear and descriptive link text essential for those using screen readers?
+
+## --answers--
+
+It enhances the visual appeal of the website.
+
+### --feedback--
+
+Think about what helps users understand the purpose of the link when it's read aloud.
+
+---
+
+It ensures the link text is read aloud clearly by the screen reader.
+
+---
+
+It speeds up the loading speed of the website.
+
+### --feedback--
+
+Think about what helps users understand the purpose of the link when it's read aloud.
+
+---
+
+It reduces the number of links on a page.
+
+### --feedback--
+
+Think about what helps users understand the purpose of the link when it's read aloud.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What's the first visible benefit of a good link text?
+
+## --answers--
+
+It helps users know where they're headed and what they'll access.
+
+---
+
+It improves the aesthetics of the web page.
+
+### --feedback--
+
+Think about what makes finding information easier and improves user experience.
+
+---
+
+It increases the loading speed of the page.
+
+### --feedback--
+
+Think about what makes finding information easier and improves user experience.
+
+---
+
+It reduces the number of links on a page.
+
+### --feedback--
+
+Think about what makes finding information easier and improves user experience.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is a best practice for writing link texts?
+
+## --answers--
+
+Use generic texts like "click here" to keep it simple.
+
+### --feedback--
+
+Think about what helps users identify and understand the link's purpose quickly.
+
+---
+
+Repeat the same link text for different destinations.
+
+### --feedback--
+
+Think about what helps users identify and understand the link's purpose quickly.
+
+---
+
+Make links visually distinct with underlining and other visual cues.
+
+---
+
+Focus on the action rather than the destination, like "click here to read more".
+
+### --feedback--
+
+Think about what helps users identify and understand the link's purpose quickly.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md
new file mode 100644
index 00000000000..6485aff4a63
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md
@@ -0,0 +1,121 @@
+---
+id: 672a55eb7791559421ff0cd3
+title: What Are Good Ways to Make Audio and Video Content Accessible?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-good-ways-to-make-audio-and-video-content-accessible
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+How are captions different from subtitles in video content?
+
+## --answers--
+
+Captions provide translations for non-native speakers.
+
+### --feedback--
+
+Focus on what each feature is intended for and the specific audience it serves.
+
+---
+
+Captions include spoken words and non-verbal sounds, while subtitles are for viewers who don't understand the language.
+
+---
+
+Subtitles include both spoken words and non-verbal sounds, while captions are only for translations.
+
+### --feedback--
+
+Focus on what each feature is intended for and the specific audience it serves.
+
+---
+
+Subtitles are synchronized with the video, but captions are not.
+
+### --feedback--
+
+Focus on what each feature is intended for and the specific audience it serves.
+
+## --video-solution--
+
+2
+
+## --text--
+
+How can you add captions or subtitles directly to your video or audio content in HTML?
+
+## --answers--
+
+By using the `caption` tag inside the `video` or `audio` element.
+
+### --feedback--
+
+Look for the specific HTML tag designed to handle captions and subtitles.
+
+---
+
+By using the `track` tag inside the `video` or `audio` element.
+
+---
+
+By placing the `subtitle` tag within the `video` or `audio` element.
+
+### --feedback--
+
+Look for the specific HTML tag designed to handle captions and subtitles.
+
+---
+
+By embedding a `text` tag inside the `video` or `audio` element.
+
+### --feedback--
+
+Look for the specific HTML tag designed to handle captions and subtitles.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Why are transcripts important for audio and video content?
+
+## --answers--
+
+Transcripts are only useful for people who prefer watching videos.
+
+### --feedback--
+
+Consider the accessibility benefits and the additional functionality that transcripts provide.
+
+---
+
+Transcripts help make content accessible for deaf or hard-of-hearing individuals and allow for easy searching of specific content.
+
+---
+
+Transcripts are solely for translating the spoken language into another language.
+
+### --feedback--
+
+Consider the accessibility benefits and the additional functionality that transcripts provide.
+
+---
+
+Transcripts are used to add non-verbal sounds like music and laughter to the content.
+
+### --feedback--
+
+Consider the accessibility benefits and the additional functionality that transcripts provide.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md
new file mode 100644
index 00000000000..b4e5b4b0c08
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md
@@ -0,0 +1,121 @@
+---
+id: 672a55fbc2d95a9453151caf
+title: What Are Some Ways to Make Web Applications Keyboard Accessible?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-some-ways-to-make-web-applications-keyboard-accessible
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Why is the `tabindex` property important when managing keyboard navigation on a webpage?
+
+## --answers--
+
+It makes the page load faster.
+
+### --feedback--
+
+Think about how you control the sequence of focusable elements.
+
+---
+
+It allows you to control the order in which elements are focused when using the tab key.
+
+---
+
+It adds animations to focusable elements.
+
+### --feedback--
+
+Think about how you control the sequence of focusable elements.
+
+---
+
+It hides non-essential elements from keyboard navigation.
+
+### --feedback--
+
+Think about how you control the sequence of focusable elements.
+
+## --video-solution--
+
+2
+
+## --text--
+
+How does the `accesskey` attribute contribute to keyboard accessibility on a webpage?
+
+## --answers--
+
+It enhances the visual appearance of the webpage.
+
+### --feedback--
+
+Think about how users can quickly access important elements using the keyboard.
+
+---
+
+It speeds up the loading time of the website.
+
+### --feedback--
+
+Think about how users can quickly access important elements using the keyboard.
+
+---
+
+It allows you to define a specific key that focuses on or activates a particular element.
+
+---
+
+It automatically generates shortcut keys for all elements.
+
+### --feedback--
+
+Think about how users can quickly access important elements using the keyboard.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Why exactly is it important to avoid keyboard traps in web applications?
+
+## --answers--
+
+It improves SEO.
+
+### --feedback--
+
+Think about how users should be able to navigate freely without getting stuck.
+
+---
+
+It lets the developer work faster.
+
+### --feedback--
+
+Think about how users should be able to navigate freely without getting stuck.
+
+---
+
+It ensures the page has fewer interactive elements.
+
+### --feedback--
+
+Think about how users should be able to navigate freely without getting stuck.
+
+---
+
+It ensures users can move focus away from elements like modals and popups.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/67298243760ae980de5266db.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/67298243760ae980de5266db.md
new file mode 100644
index 00000000000..c6c3b821a30
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/67298243760ae980de5266db.md
@@ -0,0 +1,121 @@
+---
+id: 67298243760ae980de5266db
+title: Why Should You Care About Semantic HTML?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: why-should-you-care-about-semantic-html
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What does semantic refer to?
+
+## --answers--
+
+Nit picking the code.
+
+### --feedback--
+
+It has to do with how a language is written or spoken.
+
+---
+
+The meaning and structure of words/phrases in a language.
+
+---
+
+It's a grammar term unrelated to programming.
+
+### --feedback--
+
+It has to do with how a language is written or spoken.
+
+---
+
+Dictionary definitions.
+
+### --feedback--
+
+It has to do with how a language is written or spoken.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which element does not have semantic meaning?
+
+## --answers--
+
+`div`
+
+---
+
+`h1`
+
+### --feedback--
+
+It's an element used mainly as a container for more elements.
+
+---
+
+`p`
+
+### --feedback--
+
+It's an element used mainly as a container for more elements.
+
+---
+
+`img`
+
+### --feedback--
+
+It's an element used mainly as a container for more elements.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Why should you care about semantic HTML?
+
+## --answers--
+
+It improves SEO.
+
+### --feedback--
+
+There are many reasons.
+
+---
+
+It improves accessibility.
+
+### --feedback--
+
+There are many reasons.
+
+---
+
+It improves developer experience.
+
+### --feedback--
+
+There are many reasons.
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
new file mode 100644
index 00000000000..233e4b6d648
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
@@ -0,0 +1,121 @@
+---
+id: 672985445d7da807c6b4f406
+title: Why is it Important to Have Good Structural Hierarchy?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: why-is-it-important-to-have-good-structural-hierarchy
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Why is structural hierarchy important?
+
+## --answers--
+
+Accessibility
+
+### --feedback--
+
+There are many reasons why structural hierarchy is important.
+
+---
+
+SEO
+
+### --feedback--
+
+There are many reasons why structural hierarchy is important.
+
+---
+
+So browsers know what we mean
+
+### --feedback--
+
+There are many reasons why structural hierarchy is important.
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
+
+## --text--
+
+What element must an `h3` element come after?
+
+## --answers--
+
+`h1`
+
+### --feedback--
+
+Think about the order of headings. If heading level 2 comes after heading level 1.
+
+---
+
+`h2`
+
+---
+
+`h3`
+
+### --feedback--
+
+Think about the order of headings. If heading level 2 comes after heading level 1.
+
+---
+
+`h4`
+
+### --feedback--
+
+Think about the order of headings. If heading level 2 comes after heading level 1.
+
+## --video-solution--
+
+2
+
+## --text--
+
+How should you create larger text on your page?
+
+## --answers--
+
+Use any element you want, and style it with CSS.
+
+### --feedback--
+
+CSS controls your style, and you want to select the right element for the job.
+
+---
+
+Use an `h1` because it already has large text.
+
+### --feedback--
+
+CSS controls your style, and you want to select the right element for the job.
+
+---
+
+Use a `span` element.
+
+### --feedback--
+
+CSS controls your style, and you want to select the right element for the job.
+
+---
+
+Use the correct structural element, and style it with CSS.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md
new file mode 100644
index 00000000000..3517ac51024
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md
@@ -0,0 +1,121 @@
+---
+id: 672990ecf71a852804ababe7
+title: What Is the Difference Between Presentational and Semantic HTML?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-difference-between-presentational-and-semantic-html
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of the following best describes the difference between presentational and semantic HTML?
+
+## --answers--
+
+Presentational HTML focuses on content structure, while semantic HTML focuses on appearance.
+
+### --feedback--
+
+Think about what "presentation" and "semantics" mean and how they are related to HTML elements.
+
+---
+
+Semantic HTML focuses on content structure, while presentational HTML focuses on appearance.
+
+---
+
+There is no difference between presentational and semantic HTML.
+
+### --feedback--
+
+Think about what "presentation" and "semantics" mean and how they are related to HTML elements.
+
+---
+
+Both focus on style, but presentational HTML is more modern.
+
+### --feedback--
+
+Think about what "presentation" and "semantics" mean and how they are related to HTML elements.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of the following is an example of presentational HTML?
+
+## --answers--
+
+Using the `header` element to define a header.
+
+### --feedback--
+
+Think about which element directly controls how the content will look.
+
+---
+
+Using the `nav` element to define a navigation section.
+
+### --feedback--
+
+Think about which element directly controls how the content will look.
+
+---
+
+Using the `article` element to define independent content.
+
+### --feedback--
+
+Think about which element directly controls how the content will look.
+
+---
+
+Using the `center` element to center the content.
+
+## --video-solution--
+
+4
+
+## --text--
+
+Which of the following is an example of semantic HTML?
+
+## --answers--
+
+Using `` to make text red.
+
+### --feedback--
+
+Think about which element describes the meaning of the content.
+
+---
+
+Using the `center` element to center the content.
+
+### --feedback--
+
+Think about which element describes the meaning of the content.
+
+---
+
+Using the `nav` element to represent a navigation section
+
+---
+
+Using the `big` element to make text bigger.
+
+### --feedback--
+
+Think about which element describes the meaning of the content.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md
new file mode 100644
index 00000000000..d0b5993bf71
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md
@@ -0,0 +1,121 @@
+---
+id: 6729959bf9c8e835f46b3f78
+title: When Should You Use the Emphasis Element Over the Idiomatic Text Element?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: when-should-you-use-the-emphasis-element-over-the-idiomatic-text-element
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which HTML element is used to differentiate text from its surrounding content without conveying specific importance?
+
+## --answers--
+
+`em`
+
+### --feedback--
+
+Think about an element that primarily affects text style to highlight when part of the text is different from the overall narrative style.
+
+---
+
+`strong`
+
+### --feedback--
+
+Think about an element that primarily affects text style to highlight when part of the text is different from the overall narrative style.
+
+---
+
+`i`
+
+---
+
+`mark`
+
+### --feedback--
+
+Think about an element that primarily affects text style to highlight when part of the text is different from the overall narrative style.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which HTML element is used to emphasize important text?
+
+## --answers--
+
+`em`
+
+### --feedback--
+
+Think about a semantic HTML element that highlights important content.
+
+---
+
+`strong`
+
+---
+
+`i`
+
+### --feedback--
+
+Think about a semantic HTML element that highlights important content.
+
+---
+
+`mark`
+
+### --feedback--
+
+Think about a semantic HTML element that highlights important content.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is the primary difference between `i` and `em`?
+
+## --answers--
+
+There is no difference; they both emphasize text.
+
+### --feedback--
+
+Consider the semantic meaning of each tag and their potential uses.
+
+---
+
+`i` indicates that the text differs from the surrounding content, while `em` emphasizes important text.
+
+---
+
+`i` is for emphasis, while `em` is for styling.
+
+### --feedback--
+
+Consider the semantic meaning of each tag and their potential uses.
+
+---
+
+They both emphasize text the same way, but `em` conveys more importance.
+
+### --feedback--
+
+Consider the semantic meaning of each tag and their potential uses.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995ac85fd943657c2ede5.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995ac85fd943657c2ede5.md
new file mode 100644
index 00000000000..9dca85bd400
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995ac85fd943657c2ede5.md
@@ -0,0 +1,121 @@
+---
+id: 672995ac85fd943657c2ede5
+title: When Should You Use the Strong Element Over the Bring Attention To Element?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: when-should-you-use-the-strong-element-over-the-bring-attention-to-element
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which HTML element is used to draw attention to a specific part of the text without conveying specific importance?
+
+## --answers--
+
+`strong`
+
+### --feedback--
+
+Think about the element that primarily affects text style.
+
+---
+
+`mark`
+
+### --feedback--
+
+Think about the element that primarily affects text style.
+
+---
+
+`em`
+
+### --feedback--
+
+Think about the element that primarily affects text style.
+
+---
+
+`b`
+
+## --video-solution--
+
+4
+
+## --text--
+
+Which HTML element is used to indicate text that is specially important or urgent?
+
+## --answers--
+
+`strong`
+
+---
+
+`b`
+
+### --feedback--
+
+Think about the semantic HTML element that conveys the importance of the text.
+
+---
+
+`em`
+
+### --feedback--
+
+Think about the semantic HTML element that conveys the importance of the text.
+
+---
+
+`mark`
+
+### --feedback--
+
+Think about the semantic HTML element that conveys the importance of the text.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What is the primary difference between `b` and `strong`?
+
+## --answers--
+
+There is no difference – they both make the text bold.
+
+### --feedback--
+
+Think about the semantic meaning of each element.
+
+---
+
+`b` is for visual emphasis, while `strong` is for emphasizing importance.
+
+---
+
+`strong` is for styling, while `b` is for emphasizing importance.
+
+### --feedback--
+
+Think about the semantic meaning of each element.
+
+---
+
+They are both used for presentational purposes only.
+
+### --feedback--
+
+Think about the semantic meaning of each element.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995bda6c67e369aaf8588.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995bda6c67e369aaf8588.md
new file mode 100644
index 00000000000..bfdd3f736ba
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995bda6c67e369aaf8588.md
@@ -0,0 +1,121 @@
+---
+id: 672995bda6c67e369aaf8588
+title: What Are Description Lists, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-description-lists
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which HTML tag is used to define an entire description list?
+
+## --answers--
+
+`dt`
+
+### --feedback--
+
+Think about the HTML element that contains all the other elements of a description list.
+
+---
+
+`dd`
+
+### --feedback--
+
+Think about the HTML element that contains all the other elements of a description list.
+
+---
+
+`dl`
+
+---
+
+`li`
+
+### --feedback--
+
+Think about the HTML element that contains all the other elements of a description list.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which HTML tag is used to represent a term in a description list?
+
+## --answers--
+
+`dl`
+
+### --feedback--
+
+Think about the elements of the description list that come before the details or definitions.
+
+---
+
+`dt`
+
+---
+
+`dd`
+
+### --feedback--
+
+Think about the elements of the description list that come before the details or definitions.
+
+---
+
+`li`
+
+### --feedback--
+
+Think about the elements of the description list that come before the details or definitions.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which HTML tag is used to define or provide more details about a term in a description list?
+
+## --answers--
+
+`dl`
+
+### --feedback--
+
+Think about the elements of a description list that provide additional details about the terms.
+
+---
+
+`dt`
+
+### --feedback--
+
+Think about the elements of a description list that provide additional details about the terms.
+
+---
+
+`dd`
+
+---
+
+`li`
+
+### --feedback--
+
+Think about the elements of a description list that provide additional details about the terms.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md
new file mode 100644
index 00000000000..b1dda5efade
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md
@@ -0,0 +1,121 @@
+---
+id: 672995c9e6f69436dbcccc79
+title: How Do Block and Inline Quotes Work in HTML?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: how-do-block-and-inline-quotes-work-in-html
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which HTML element is used for displaying extended quotations from other sources?
+
+## --answers--
+
+`q`
+
+### --feedback--
+
+Analyze the two types of quotation elements. Think about which one displays the quotation as an indented block.
+
+---
+
+`blockquote`
+
+---
+
+`cite`
+
+### --feedback--
+
+Analyze the two types of quotation elements. Think about which one displays the quotation as an indented block.
+
+---
+
+`p`
+
+### --feedback--
+
+Analyze the two types of quotation elements. Think about which one displays the quotation as an indented block.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which HTML element is used for displaying inline quotations?
+
+## --answers--
+
+`q`
+
+---
+
+`blockquote`
+
+### --feedback--
+
+Think about the two types of quotation elements. Think about which one is perfect for short quotations from other sources.
+
+---
+
+`cite`
+
+### --feedback--
+
+Think about the two types of quotation elements. Think about which one is perfect for short quotations from other sources.
+
+---
+
+`p`
+
+### --feedback--
+
+Think about the two types of quotation elements. Think about which one is perfect for short quotations from other sources.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which HTML attribute is used to specify the source of a quotation in a block or inline quotation element?
+
+## --answers--
+
+`href`
+
+### --feedback--
+
+Think about the two types of quotation elements and how you can specify the URL of the source.
+
+---
+
+`src`
+
+### --feedback--
+
+Think about the two types of quotation elements and how you can specify the URL of the source.
+
+---
+
+`title`
+
+### --feedback--
+
+Think about the two types of quotation elements and how you can specify the URL of the source.
+
+---
+
+`cite`
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md
new file mode 100644
index 00000000000..5684fd4315d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md
@@ -0,0 +1,121 @@
+---
+id: 672995d673bd3237200b9e7c
+title: How Do You Display Abbreviations and Acronyms in HTML?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: how-do-you-display-abbreviations-and-acronyms-in-html
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which HTML element is used to indicate an abbreviation or acronym?
+
+## --answers--
+
+`abbr`
+
+---
+
+`acronym`
+
+### --feedback--
+
+Think about an element that is specifically designed for shortened words.
+
+---
+
+`abbrev`
+
+### --feedback--
+
+Think about an element that is specifically designed for shortened words.
+
+---
+
+`acron`
+
+### --feedback--
+
+Think about an element that is specifically designed for shortened words.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What is the primary purpose of the ``abbr` element?
+
+## --answers--
+
+To style text as an abbreviation.
+
+### --feedback--
+
+Think about how the abbreviation element can help users.
+
+---
+
+To indicate an abbreviation or acronym and provide additional information.
+
+---
+
+To shorten the content of a webpage.
+
+### --feedback--
+
+Think about how the abbreviation element can help users.
+
+---
+
+To improve search engine rankings.
+
+### --feedback--
+
+Think about how the abbreviation element can help users.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What attribute can be used within the `abbr` element to provide the full form of an acronym or abbreviation?
+
+## --answers--
+
+`explain`
+
+### --feedback--
+
+Think about the attribute that displays more information about the abbreviation or acronym. When the user hovers over the `abbr` element with the mouse, this information is displayed.
+
+---
+
+`description`
+
+### --feedback--
+
+Think about the attribute that displays more information about the abbreviation or acronym. When the user hovers over the `abbr` element with the mouse, this information is displayed.
+
+---
+
+`title`
+
+---
+
+`fullform`
+
+### --feedback--
+
+Think about the attribute that displays more information about the abbreviation or acronym. When the user hovers over the `abbr` element with the mouse, this information is displayed.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995e43674fb3775b9ec5d.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995e43674fb3775b9ec5d.md
new file mode 100644
index 00000000000..b5b0affa122
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995e43674fb3775b9ec5d.md
@@ -0,0 +1,121 @@
+---
+id: 672995e43674fb3775b9ec5d
+title: How Do You Display Addresses in HTML?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: how-do-you-display-addresses-in-html
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the purpose of the `address` element?
+
+## --answers--
+
+It's used to define a section for navigation links.
+
+### --feedback--
+
+The name of this element implies what information should be included inside of it.
+
+---
+
+It's used to represent contact information for a section on a web page.
+
+---
+
+It's used to set the font style for a section of the page.
+
+### --feedback--
+
+The name of this element implies what information should be included inside of it.
+
+---
+
+It's used to group content for styling with CSS.
+
+### --feedback--
+
+The name of this element implies what information should be included inside of it.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is the `mailto` link used for?
+
+## --answers--
+
+It's used to link to a webpage.
+
+### --feedback--
+
+Review the end of the video where there are examples showing how the `mailto` works.
+
+---
+
+It's used to create a file download link.
+
+### --feedback--
+
+Review the end of the video where there are examples showing how the `mailto` works.
+
+---
+
+It's used to redirect to another website.
+
+### --feedback--
+
+Review the end of the video where there are examples showing how the `mailto` works.
+
+---
+
+It's used to allow users to open a new email within their preferred email client.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is a downside to using `mailto` links?
+
+## --answers--
+
+These links are a target for spammers to send emails to users.
+
+---
+
+These links automatically create a webpage.
+
+### --feedback--
+
+Think about malicious attackers accessing these links.
+
+---
+
+These links enhance website SEO.
+
+### --feedback--
+
+Think about malicious attackers accessing these links.
+
+---
+
+These links improve website loading speed.
+
+### --feedback--
+
+Think about malicious attackers accessing these links.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
new file mode 100644
index 00000000000..06a59bfbd2c
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
@@ -0,0 +1,121 @@
+---
+id: 672995f16ed97837b365a9f6
+title: How Do You Display Times and Dates in HTML?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: how-do-you-display-times-and-dates-in-html
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What does the `datetime` attribute in the `time` element help with?
+
+## --answers--
+
+It formats text in bold.
+
+### --feedback--
+
+The `datetime` attribute represents dates and times for machines.
+
+---
+
+It translates dates and times into a machine-readable format.
+
+---
+
+It adds color to the text.
+
+### --feedback--
+
+The `datetime` attribute represents dates and times for machines.
+
+---
+
+It creates hyperlinks to other pages.
+
+### --feedback--
+
+The `datetime` attribute represents dates and times for machines.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is the correct format for the `datetime` attribute value according to ISO 8601?
+
+## --answers--
+
+`YYYY-MM-DDTHH:MM:SS`
+
+---
+
+`DD-MM-YYYY HH:MM`
+
+### --feedback--
+
+ISO 8601 is an international standard format for representing dates and times.
+
+---
+
+`MM-DD-YYYY HH:MM AM/PM`
+
+### --feedback--
+
+ISO 8601 is an international standard format for representing dates and times.
+
+---
+
+`YYYY/MM/DD HH:MM:SS`
+
+### --feedback--
+
+ISO 8601 is an international standard format for representing dates and times.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What does the capital 'T' in the ISO 8601 datetime value represent?
+
+## --answers--
+
+The time zone.
+
+### --feedback--
+
+Review the end of the video when ISO 8601 was discussed.
+
+---
+
+The separator between date and time.
+
+---
+
+The title of the document.
+
+### --feedback--
+
+Review the end of the video when ISO 8601 was discussed.
+
+---
+
+The temperature.
+
+### --feedback--
+
+Review the end of the video when ISO 8601 was discussed.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995ffdfd2f337f5f215f8.md b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995ffdfd2f337f5f215f8.md
new file mode 100644
index 00000000000..0a9573421d6
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995ffdfd2f337f5f215f8.md
@@ -0,0 +1,121 @@
+---
+id: 672995ffdfd2f337f5f215f8
+title: How Do You Display Mathematical Equations and Chemical Formulas in HTML?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: how-do-you-display-mathematical-equations-and-chemical-formulas-in-html
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the primary use of the `superscript` element in HTML?
+
+## --answers--
+
+To display text in a different color.
+
+### --feedback--
+
+Review the beginning of the video where the `superscript` element is discussed.
+
+---
+
+To show text in a smaller font size.
+
+### --feedback--
+
+Review the beginning of the video where the `superscript` element is discussed.
+
+---
+
+To display text as a `superscript` above the normal line of text.
+
+---
+
+To underline text.
+
+### --feedback--
+
+Review the beginning of the video where the `superscript` element is discussed.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following is an example of using the `superscript` element correctly?
+
+## --answers--
+
+`22 (2 squared) is 4.
` + +### --feedback-- + +The example should represent an exponent with a number displayed above the normal text line. + +--- + +`22 (2 squared) is 4.
` + +--- + +`2
2