gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(curriculum): add lecture blocks to the end of HTML (#57063)

Browse Source
This commit is contained in:
Tom
2024-11-06 19:51:54 -06:00
committed by GitHub
parent 9fe1a2832c
commit fc9b82795b
57 changed files with 5512 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/i18n/locales/english/intro.json
+28 -5
View File
@@ -1764,7 +1764,12 @@
"The following quiz will test your knowledge of the basic HTML concepts you have learned so far."
]
},
"evdc": { "title": "11", "intro": [] },
"lecture-importance-of-semantic-html": {
"title": "Importance of Semantic HTML",
"intro": [
"In these lecture videos, you will learn about semantic HTML and the importance of using it."
]
},
"workshop-blog-page": {
"title": "Build a Cat Blog Page",
"intro": [
@@ -1791,7 +1796,12 @@
"The following quiz will test your knowledge on semantic HTML concepts you have learned so far."
]
},
"cfgp": { "title": "16", "intro": [] },
"lecture-working-with-forms": {
"title": "Working with Forms",
"intro": [
"In these lecture videos, you will learn about working with forms in HTML."
]
},
"workshop-hotel-feedback-form": {
"title": "Build a Hotel Feedback Form",
"intro": [
@@ -1806,7 +1816,10 @@
"This lab will give you the opportunity to practice working with the <code>label</code> element, the different <code>input</code> elements, the <code>required</code> 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 <code>Table Head</code>, <code>Table Row</code> and <code>Table Data Cell</code> 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."]
client/src/pages/learn/full-stack-developer/lecture-importance-of-accessibility-and-good-html-structure/index.md
+9
View File
@@ -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.
client/src/pages/learn/full-stack-developer/lecture-importance-of-semantic-html/index.md
+9
View File
@@ -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.
client/src/pages/learn/full-stack-developer/lecture-working-with-forms/index.md
+9
View File
@@ -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.
client/src/pages/learn/full-stack-developer/lecture-working-with-html-tools/index.md
+9
View File
@@ -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.
client/src/pages/learn/full-stack-developer/lecture-working-with-tables/index.md
+9
View File
@@ -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.
curriculum/challenges/_meta/lecture-html-fundamentals/meta.json
+1 -1
View File
@@ -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",
curriculum/challenges/_meta/lecture-importance-of-accessibility-and-good-html-structure/meta.json
+103
View File
@@ -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"
}
curriculum/challenges/_meta/lecture-importance-of-semantic-html/meta.json
+63
View File
@@ -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"
}
curriculum/challenges/_meta/lecture-working-with-forms/meta.json
+27
View File
@@ -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"
}
curriculum/challenges/_meta/lecture-working-with-html-tools/meta.json
+19
View File
@@ -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"
}
curriculum/challenges/_meta/lecture-working-with-tables/meta.json
+10
View File
@@ -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"
}
curriculum/challenges/english/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
+1 -1
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md
+122
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/67298243760ae980de5266db.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md
+121
View File
@@ -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 `<font color="red">` 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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995ac85fd943657c2ede5.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995bda6c67e369aaf8588.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995e43674fb3775b9ec5d.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
+121
View File
@@ -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
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/672995ffdfd2f337f5f215f8.md
+121
View File
@@ -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--
`<p>2<sub>2</sub> (2 squared) is 4.</p>`
### --feedback--
The example should represent an exponent with a number displayed above the normal text line.
---
`<p>2<sup>2</sup> (2 squared) is 4.</p>`
---
`<p>2<sul>2</sul> (2 squared) is 4.</p>`
### --feedback--
The example should represent an exponent with a number displayed above the normal text line.
---
`<p>2<sutp>2</sutp> (2 subscript) is 4.</p>`
### --feedback--
The example should represent an exponent with a number displayed above the normal text line.
## --video-solution--
2
## --text--
What should be used instead of the `superscript` element if you want to style text with a raised baseline for typographical reasons?
## --answers--
The `sub` element.
### --feedback--
This is a styling method rather than a specific HTML element.
---
CSS
---
The `strong` element.
### --feedback--
This is a styling method rather than a specific HTML element.
---
The `em` element.
### --feedback--
This is a styling method rather than a specific HTML element.
## --video-solution--
2
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/6729960ed6e2ca3825940e97.md
+121
View File
@@ -0,0 +1,121 @@
---
id: 6729960ed6e2ca3825940e97
title: How Do You Represent Computer Code in HTML?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-do-you-represent-computer-code-in-html
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the `code` element used for?
## --answers--
It's used to create hyperlinks to other web pages.
### --feedback--
The name of this element implies what its use case is for.
---
It's used to format text with bold or italic styles.
### --feedback--
The name of this element implies what its use case is for.
---
It's used to represent short snippets of code inside text.
---
It's used to embed images and multimedia files.
### --feedback--
The name of this element implies what its use case is for.
## --video-solution--
3
## --text--
What is the preformatted text (`pre`) element used for?
## --answers--
It's used to apply CSS styles to text.
### --feedback--
The name of this element implies what it is used for.
---
It's used to create tables and structured layouts.
### --feedback--
The name of this element implies what it is used for.
---
It's used to represent preformatted text.
---
It's used to insert hyperlinks and email addresses.
### --feedback--
The name of this element implies what it is used for.
## --video-solution--
3
## --text--
What is the default styling for the `code` element?
## --answers--
Monospaced font.
---
Italic text with a colored background.
### --feedback--
Review the beginning of the video to see the examples rendered to the page.
---
Bold text with a larger font size.
### --feedback--
Review the beginning of the video to see the examples rendered to the page.
---
Underlined text with a fixed-width font.
### --feedback--
Review the beginning of the video to see the examples rendered to the page.
## --video-solution--
1
curriculum/challenges/english/25-front-end-development/lecture-importance-of-semantic-html/6729963b1ab11638753cf082.md
+121
View File
@@ -0,0 +1,121 @@
---
id: 6729963b1ab11638753cf082
title: What Are the U, S, and Ruby Elements Used For, and How Do They Work?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-the-u-s-and-ruby-elements-used-for
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the `u` element used for?
## --answers--
It's used to display subscripts in chemical formulas.
### --feedback--
Review the beginning of the video to see the examples using the `u` element.
---
It's used to represent user input in HTML forms.
### --feedback--
Review the beginning of the video to see the examples using the `u` element.
---
It's used to represent inline text that has non-textual annotation applied.
---
It's used to italicize text in HTML.
### --feedback--
Review the beginning of the video to see the examples using the `u` element.
## --video-solution--
3
## --text--
What is the `s` element used for?
## --answers--
It's used to represent when text is no longer accurate or relevant.
---
It's used to create navigational aides on websites.
### --feedback--
Think about text that is no longer accurate.
---
It's used to represent copyright information on pages.
### --feedback--
Think about text that is no longer accurate.
---
It's used to represent captions for images.
### --feedback--
Think about text that is no longer accurate.
## --video-solution--
1
## --text--
What is the `ruby` element typically used for?
## --answers--
It's used to write ruby applications.
### --feedback--
Think about how this element can be used to represent certain cultural characters.
---
It's used to create list items on a page.
### --feedback--
Think about how this element can be used to represent certain cultural characters.
---
It's used to apply an underline for text.
### --feedback--
Think about how this element can be used to represent certain cultural characters.
---
It's used to show the pronunciation of East Asian characters.
## --video-solution--
4
curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
+121
View File
@@ -0,0 +1,121 @@
---
id: 6729974ec29be33cb00eb54d
title: How Do Forms, Labels, and Inputs Work in HTML?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-do-forms-labels-and-inputs-work-in-html
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
What is the role of the `for` attribute inside the `label` element?
## --answers--
It indicates the color of the label text.
### --feedback--
Review the middle portion of the video where the `for` attribute is discussed.
---
It's used to explicitly associate a label with an input.
---
It specifies the alignment of the label within its container.
### --feedback--
Review the middle portion of the video where the `for` attribute is discussed.
---
It defines a JavaScript function to execute when the label is clicked.
### --feedback--
Review the middle portion of the video where the `for` attribute is discussed.
## --video-solution--
2
## --text--
Which of the following is a correct value for the `type` attribute used inside inputs?
## --answers--
`choice`
### --feedback--
Refer back to the beginning of the video where the first example show a valid type.
---
`text-box`
### --feedback--
Refer back to the beginning of the video where the first example show a valid type.
---
`numberinput`
### --feedback--
Refer back to the beginning of the video where the first example show a valid type.
---
`text`
## --video-solution--
4
## --text--
What is the role of the `placeholder` attribute inside the `input` element?
## --answers--
It is used to provide a hint or example text within an input field.
---
It specifies the type of input field.
### --feedback--
Review the end of the video see example of the `placeholder` attribute.
---
It defines the initial value displayed in the input field.
### --feedback--
Review the end of the video see example of the `placeholder` attribute.
---
It indicates the maximum length of characters allowed in the input field.
### --feedback--
Review the end of the video see example of the `placeholder` attribute.
## --video-solution--
1
curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4cd3d59756726657efb8.md
+125
View File
@@ -0,0 +1,125 @@
---
id: 672a4cd3d59756726657efb8
title: What Are the Different Types of Buttons, and When Should You Use Them?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-the-different-types-of-buttons
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Which of the following is NOT a valid value for the `type` attribute inside buttons?
## --answers--
`src`
### --feedback--
One of these options is the name of an attribute and not a valid value.
---
`button`
### --feedback--
One of these options is the name of an attribute and not a valid value.
---
`reset`
### --feedback--
One of these options is the name of an attribute and not a valid value.
---
`submit`
### --feedback--
One of these options is the name of an attribute and not a valid value.
## --video-solution--
1
## --text--
What is the role of `type="reset"` inside the `button` element?
## --answers--
It submits the form data.
### --feedback--
The reset value implies what its role is inside the `button` element.
---
It only resets `textarea` elements.
### --feedback--
The reset value implies what its role is inside the `button` element.
---
It resets the form.
---
There is no behavior for the `reset` type.
### --feedback--
The `reset` value implies what its role is inside the `button` element.
## --video-solution--
3
## --text--
What is another element you can use to represent a button?
## --answers--
`img`
### --feedback--
Review the last part of the video where this is discussed in more detail.
---
`form`
### --feedback--
Review the last part of the video where this is discussed in more detail.
---
`header`
### --feedback--
Review the last part of the video where this is discussed in more detail.
---
`input`
## --video-solution--
4
curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4ce6dab9eb735828b48b.md
+121
View File
@@ -0,0 +1,121 @@
---
id: 672a4ce6dab9eb735828b48b
title: What Is Client-Side Form Validation in HTML Forms, and What Are Some Examples?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-client-side-form-validation-in-html-forms
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the purpose of the `minlength` and `maxlength` attributes inside inputs?
## --answers--
They're used to control the font size of the text inside the input field.
### --feedback--
The names for these attribute suggest what they are used for.
---
They're used to set the minimum and maximum length in characters for the input.
---
They're used to define the `width` of the input field on the page.
### --feedback--
The names for these attribute suggest what they are used for.
---
They're used to specify the maximum number of characters that can be typed in a `textarea`.
### --feedback--
The names for these attribute suggest what they are used for.
## --video-solution--
2
## --text--
Which attribute is used to ensure that an input field is marked as required?
## --answers--
`required`
---
`size`
### --feedback--
One of these attribute names heavily implies what it does.
---
`minlength`
### --feedback--
One of these attribute names heavily implies what it does.
---
`autoplay`
### --feedback--
One of these attribute names heavily implies what it does.
## --video-solution--
1
## --text--
What happens if you try to submit something incorrect for the `email` input?
## --answers--
The program will crash.
### --feedback--
Refer back to the middle of the video where this was discussed.
---
The form will submit just fine.
### --feedback--
Refer back to the middle of the video where this was discussed.
---
Nothing will happen.
### --feedback--
Refer back to the middle of the video where this was discussed.
---
The browser will show an alert message that the input is missing the `@` sign.
## --video-solution--
4
curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4cf959443073a6774908.md
+121
View File
@@ -0,0 +1,121 @@
---
id: 672a4cf959443073a6774908
title: What Are the Different Form States, and Why Are They Important?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-the-different-form-states
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Which attribute is used to disable an input?
## --answers--
`readonly`
### --feedback--
The name of the attribute strongly implies the answer.
---
`required`
### --feedback--
The name of the attribute strongly implies the answer.
---
`checked`
### --feedback--
The name of the attribute strongly implies the answer.
---
`disabled`
## --video-solution--
4
## --text--
Which attribute is used to mark an input read only?
## --answers--
`checked`
### --feedback--
The name of the attribute strongly implies the answer.
---
`readonly`
---
`size`
### --feedback--
The name of the attribute strongly implies the answer.
---
`capture`
### --feedback--
The name of the attribute strongly implies the answer.
## --video-solution--
2
## --text--
When does the focus state occur?
## --answers--
When an input field is disabled and cannot be interacted with.
### --feedback--
Refer back to the beginning of the video where the focused state was discussed.
---
When an input field is validated and shows an error message.
### --feedback--
Refer back to the beginning of the video where the focused state was discussed.
---
When the user clicks on an input or selects it using the tab key to focus it.
---
When an input field has been pre-filled with default values by the browser.
### --feedback--
Refer back to the beginning of the video where the focused state was discussed.
## --video-solution--
3
curriculum/challenges/english/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md
+121
View File
@@ -0,0 +1,121 @@
---
id: 672a4fa7d335bc7cfb63a392
title: What Is an HTML Validator, and How Can It Help You Debug Your Code?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-an-html-validator
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
Why does the browser render tags correctly even when there's an error like forgetting to close a tag?
## --answers--
HTML does not care about closing a tag.
### --feedback--
Look out for the algorithm one of the tools use for figuring out what the author intends to do.
---
The browser's parsing algorithm figures out the errors and tries to render the tags as intended.
---
The code editor's diffing algorithm knows what the author wants to render.
### --feedback--
Look out for the algorithm one of the tools use for figuring out what the author intends to do.
---
HTML is smart enough to know what the author wants to show.
### --feedback--
Look out for the algorithm one of the tools use for figuring out what the author intends to do.
## --video-solution--
2
## --text--
What is an HTML validator?
## --answers--
A tool for writing HTML.
### --feedback--
Look out for the tool that figures out what is wrong with an HTML code.
---
A tool for arranging HTML code.
### --feedback--
Look out for the tool that figures out what is wrong with an HTML code.
---
A tool for making HTML code work across browsers.
### --feedback--
Look out for the tool that figures out what is wrong with an HTML code.
---
A tool that checks the validity of HTML.
## --video-solution--
4
## --text--
Which of these is not an example of an HTML validator?
## --answers--
W3.org HTML validator.
### --feedback--
Look out for the option that is not an HTML validator.
---
JS World HTML Validator.
---
Prettier Code Formatter.
### --feedback--
Look out for the option that is not an HTML validator.
---
JSONFormatter.org HTML Validator.
### --feedback--
Look out for the option that is not an HTML validator.
## --video-solution--
2
curriculum/challenges/english/25-front-end-development/lecture-working-with-html-tools/672a511bb408ec81c592eb68.md
+121
View File
@@ -0,0 +1,121 @@
---
id: 672a511bb408ec81c592eb68
title: How to Use the DOM Inspector and DevTools to Debug and Build Your Projects
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-to-use-the-dom-inspector-and-devtools
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the process of finding and fixing bugs in your code called?
## --answers--
Scanning.
### --feedback--
Review the beginning of the video where this was discussed.
---
Building.
### --feedback--
Review the beginning of the video where this was discussed.
---
Debugging.
---
Scripting.
### --feedback--
Review the beginning of the video where this was discussed.
## --video-solution--
3
## --text--
What is the tree-like structure that represents the elements on a page called?
## --answers--
BOM
### --feedback--
Review the beginning of the video where this was discussed.
---
DOM
---
Python
### --feedback--
Review the beginning of the video where this was discussed.
---
CSS
### --feedback--
Review the beginning of the video where this was discussed.
## --video-solution--
2
## --text--
What is the role of the "elements" tab in the developer tools?
## --answers--
It shows you the HTML structure of the page you are on.
---
It shows you the CSS structure of the page you are on.
### --feedback--
The name of this tab implies what it is used for.
---
It shows you the JavaScript structure of the page you are on.
### --feedback--
The name of this tab implies what it is used for.
---
It shows you the PHP structure of the page you are on.
### --feedback--
The name of this tab implies what it is used for.
## --video-solution--
1
curriculum/challenges/english/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md
+121
View File
@@ -0,0 +1,121 @@
---
id: 672a4e04a24858778f57ebfe
title: What Are HTML Tables Used For, and What Should They Not Be Used For?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-html-tables-used-for
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
In an HTML table, which elements are contained within a `tr` element?
## --answers--
`thead` and `tfoot`.
### --feedback--
Refer back to the beginning of the video where the `tr` element was discussed.
---
`td` and `th`.
---
`table` and `tbody`.
### --feedback--
Refer back to the beginning of the video where the `tr` element was discussed.
---
`div` and `span`.
### --feedback--
Refer back to the beginning of the video where the `tr` element was discussed.
## --video-solution--
2
## --text--
Which of the following are the main sections of an HTML table?
## --answers--
`table`, `div`, and `span`.
### --feedback--
Refer back to the beginning of the video where these elements were discussed.
---
`header`, `section`, and `footer`.
### --feedback--
Refer back to the beginning of the video where these elements were discussed.
---
`thead`, `tbody`, and `tfoot`.
---
`article`, `aside`, and `nav`.
### --feedback--
Refer back to the beginning of the video where these elements were discussed.
## --video-solution--
3
## --text--
What is the main recommended use of HTML tables today?
## --answers--
Creating page layouts.
### --feedback--
Refer back to the end of the video where the recommended use was discussed.
---
Displaying tabular data.
---
Styling with CSS.
### --feedback--
Refer back to the end of the video where the recommended use was discussed.
---
Embedding images.
### --feedback--
Refer back to the end of the video where the recommended use was discussed.
## --video-solution--
2
curriculum/superblock-structure/full-stack.json
+7
View File
@@ -21,6 +21,7 @@
{
"dashedName": "semantic-html",
"blocks": [
{ "dashedName": "lecture-importance-of-semantic-html" },
{ "dashedName": "workshop-blog-page" },
{ "dashedName": "lab-event-hub" },
{ "dashedName": "review-semantic-html" },
@@ -30,10 +31,13 @@
{
"dashedName": "html-forms-and-tables",
"blocks": [
{ "dashedName": "lecture-working-with-forms" },
{ "dashedName": "workshop-hotel-feedback-form" },
{ "dashedName": "lab-survey-form" },
{ "dashedName": "lecture-working-with-tables" },
{ "dashedName": "workshop-final-exams-table" },
{ "dashedName": "lab-book-catalog-table" },
{ "dashedName": "lecture-working-with-html-tools" },
{ "dashedName": "review-html-tables-and-forms" },
{ "dashedName": "quiz-html-tables-and-forms" }
]
@@ -41,6 +45,9 @@
{
"dashedName": "html-and-accessibility",
"blocks": [
{
"dashedName": "lecture-importance-of-accessibility-and-good-html-structure"
},
{ "dashedName": "lab-checkout-page" },
{ "dashedName": "review-html-accessibility" },
{ "dashedName": "quiz-html-accessibility" }