jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-01-08 12:04:29 -05:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): add css lectures (#57085)

Browse Source
This commit is contained in:
Tom
2024-11-11 10:28:37 -06:00
committed by GitHub
parent c7936b44b9
commit e71004bb21
177 changed files with 15702 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
client/i18n/locales/english/intro.json
View File

@@ -1889,9 +1889,24 @@
]
},
"qpra": { "title": "30", "intro": [] },
"joim": { "title": "31", "intro": [] },
"gvtb": { "title": "32", "intro": [] },
"cqhu": { "title": "33", "intro": [] },
"lecture-understanding-computer-internet-and-tooling-basics": {
"title": "Understanding Computer, Internet, and Tooling Basics",
"intro": [
"In these lecture videos, you will learn about computer, internet, and tooling basics."
]
},
"lecture-working-with-file-systems": {
"title": "Working with File Systems",
"intro": [
"In these lecture videos, you will learn about working with file systems."
]
},
"lecture-browsing-the-web-effectively": {
"title": "Browsing the Web Effectively",
"intro": [
"In these lecture videos, you will learn how to browse the web effectively."
]
},
"review-computer-basics": {
"title": "Computer Basics Review",
"intro": [
@@ -1905,7 +1920,10 @@
"Test what you've learned in this quiz of basic computer knowledge."
]
},
"dxpc": { "title": "36", "intro": [] },
"lecture-what-is-css": {
"title": "What Is CSS?",
"intro": ["In these lecture videos, you will learn what CSS is."]
},
"workshop-cafe-menu": {
"title": "Design a Cafe Menu",
"intro": [
@@ -1919,7 +1937,12 @@
"In this lab, you'll create a business card and style it using CSS."
]
},
"gnuk": { "title": "39", "intro": [] },
"lecture-css-specificity-the-cascade-algorithm-and-inheritance": {
"title": "CSS Specificity, the Cascade Algorithm, and Inheritance",
"intro": [
"In these lecture videos, you will learn about CSS specificity, the cascade algorithm, and inheritance."
]
},
"review-basic-css": {
"title": "Basic CSS Review",
"intro": [
@@ -1933,14 +1956,24 @@
"Test what you've learned in this quiz of basic CSS knowledge."
]
},
"sdul": { "title": "42", "intro": [] },
"lecture-styling-lists-and-links": {
"title": "Styling Lists and Links",
"intro": [
"In these lecture videos, you will learn about styling lists and links."
]
},
"lab-stylized-to-do-list": {
"title": "Build a Stylized To-Do List",
"intro": [
"In this lab, you'll build a To-Do list and apply different styles to the links"
]
},
"humj": { "title": "44", "intro": [] },
"lecture-working-with-backgrounds-and-borders": {
"title": "Working with Backgrounds and Borders",
"intro": [
"In these lecture videos, you will learn about working with backgrounds and borders."
]
},
"pahx": { "title": "45", "intro": [] },
"review-css-backgrounds-and-borders": {
"title": "CSS Backgrounds and Borders Review",
@@ -1955,9 +1988,24 @@
"Test what you've learned in this quiz of backgrounds and borders in CSS."
]
},
"ljmt": { "title": "48", "intro": [] },
"lxpk": { "title": "49", "intro": [] },
"lzqy": { "title": "50", "intro": [] },
"lecture-user-interface-design-fundamentals": {
"title": "User Interface Design Fundamentals",
"intro": [
"In these lecture videos, you will learn about user interface design fundamentals."
]
},
"lecture-user-centered-design": {
"title": "User-Centered Design",
"intro": [
"In these lecture videos, you will learn about user-centered design."
]
},
"lecture-common-design-tools": {
"title": "Common Design Tools",
"intro": [
"In these lecture videos, you will learn about common design tools."
]
},
"review-design-fundamentals": {
"title": "Design Fundamentals Review",
"intro": [
@@ -1971,7 +2019,12 @@
"Test what you've learned in this quiz of UI design fundamentals."
]
},
"bgrw": { "title": "53", "intro": [] },
"lecture-working-with-relative-and-absolute-units": {
"title": "Working with Relative and Absolute Units",
"intro": [
"In these lecture videos, you will learn about working with relative and absolute units."
]
},
"lab-event-flyer-page": {
"title": "Build an Event Flyer Page",
"intro": [
@@ -1991,8 +2044,13 @@
"Test what you've learned in this quiz of relative and absolute units in CSS."
]
},
"lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": {
"title": "Working with Pseudo-Classes and Pseudo-Elements in CSS",
"intro": [
"In these lecture videos, you will learn about working with pseudo-classes and pseudo-elements in CSS."
]
},
"ohhu": { "title": "58", "intro": [] },
"syga": { "title": "59", "intro": [] },
"lab-job-application-form": {
"title": "Build a Job Application Form",
"intro": [
@@ -2012,6 +2070,12 @@
"Test what you've learned in this quiz of pseudo-classes in CSS."
]
},
"lecture-working-with-colors-in-css": {
"title": "Working with Colors in CSS",
"intro": [
"In these lecture videos, you will learn about working with colors in CSS."
]
},
"workshop-colored-markers": {
"title": "Build a Set of Colored Markers",
"intro": [
@@ -2032,6 +2096,12 @@
"Test what you've learned in this quiz of using colors in CSS."
]
},
"lecture-best-practices-for-styling-forms": {
"title": "Best Practices for Styling Forms",
"intro": [
"In these lecture videos, you will learn about the best practices for styling forms."
]
},
"workshop-registration-form": {
"title": "Design a Registration Form",
"intro": [
@@ -2058,7 +2128,12 @@
"Test what you've learned in this quiz of how to style forms using CSS."
]
},
"woza": { "title": "72", "intro": [] },
"lecture-working-with-css-transforms-overflow-and-filters": {
"title": "Working with CSS Transforms, Overflow, and Filters",
"intro": [
"In these lecture videos, you will learn about working with CSS transforms, overflow, and filters."
]
},
"workshop-rothko-painting": {
"title": "Design a Rothko Painting",
"intro": [
@@ -2085,7 +2160,12 @@
"Test what you've learned in this quiz of the box model, transforms, filters, and overflow in CSS."
]
},
"ujaf": { "title": "77", "intro": [] },
"lecture-working-with-css-flexbox": {
"title": "Working with CSS Flexbox",
"intro": [
"In these lecture videos, you will learn about working with CSS flexbox."
]
},
"workshop-flexbox-photo-gallery": {
"title": "Build a Flexbox Photo Gallery",
"intro": [
@@ -2112,7 +2192,12 @@
"Test what you've learned in this quiz of using flexbox in CSS."
]
},
"ujcf": { "title": "82", "intro": [] },
"lecture-working-with-css-fonts": {
"title": "Working with CSS Fonts",
"intro": [
"In these lecture videos, you will learn about working with CSS fonts."
]
},
"workshop-nutritional-label": {
"title": "Build a Nutritional Label",
"intro": [
@@ -2137,6 +2222,12 @@
"title": "CSS Typography Quiz",
"intro": ["Test what you've learned in this quiz of typography in CSS."]
},
"lecture-best-practices-for-accessibility-and-css": {
"title": "Best Practices for Accessibility and CSS",
"intro": [
"In these lecture videos, you will learn about best practices for accessibility in CSS."
]
},
"workshop-accessibility-quiz": {
"title": "Build a Quiz Webpage",
"intro": [
@@ -2162,7 +2253,12 @@
"Test what you've learned in this quiz of making your webpage accessible with CSS."
]
},
"haje": { "title": "92", "intro": [] },
"lecture-working-with-attribute-selectors": {
"title": "Working with Attribute Selectors",
"intro": [
"In these lecture videos, you will learn about working with attribute selectors."
]
},
"workshop-balance-sheet": {
"title": "Build a Balance Sheet",
"intro": [
@@ -2186,7 +2282,12 @@
"Test what you've learned in this quiz of using attribute selectors in CSS."
]
},
"rxzq": { "title": "97", "intro": [] },
"lecture-understanding-how-to-work-with-floats-and-positioning-in-css": {
"title": "Understanding How to Work with Floats and Positioning in CSS",
"intro": [
"In these lecture videos, you will learn about how to work with floats and positioning in CSS."
]
},
"workshop-cat-painting": {
"title": "Build a Cat Painting",
"intro": [
@@ -2210,7 +2311,12 @@
"Test what you've learned in this quiz of how positioning works in CSS."
]
},
"jkdu": { "title": "102", "intro": [] },
"lecture-best-practices-for-responsive-web-design": {
"title": "Best Practices for Responsive Web Design",
"intro": [
"In these lecture videos, you will learn about the best practices for responsive web design."
]
},
"workshop-piano": {
"title": "Design a Piano",
"intro": [
@@ -2236,7 +2342,12 @@
"Test what you've learned in this quiz of making your webpage responsive."
]
},
"vlov": { "title": "107", "intro": [] },
"lecture-working-with-css-variables": {
"title": "Working with CSS Variables",
"intro": [
"In these lecture videos, you will learn about working with CSS variables."
]
},
"workshop-city-skyline": {
"title": "Build a City Skyline",
"intro": [
@@ -2261,7 +2372,12 @@
"Test what you've learned in this quiz of how using variables in CSS."
]
},
"nsia": { "title": "112", "intro": [] },
"lecture-working-with-css-grid": {
"title": "Working with CSS Grid",
"intro": [
"In these lecture videos, you will learn about working with CSS grid."
]
},
"workshop-magazine": {
"title": "Build a Magazine",
"intro": [
@@ -2270,7 +2386,12 @@
]
},
"ogko": { "title": "114", "intro": [] },
"harp": { "title": "115", "intro": [] },
"lecture-debugging-css": {
"title": "Debugging CSS",
"intro": [
"In these lecture videos, you will learn about debugging CSS."
]
},
"lab-product-landing-page": {
"title": "Build a Product Landing Page",
"intro": [
@@ -2287,7 +2408,12 @@
"title": "CSS Grid Quiz",
"intro": ["Test what you've learned in this quiz of using grid in CSS."]
},
"dora": { "title": "119", "intro": [] },
"lecture-animations-and-accessibility": {
"title": "Animations and Accessibility",
"intro": [
"In these lecture videos, you will learn about animations and accessibility."
]
},
"dpaq": { "title": "120", "intro": [] },
"lab-moon-orbit": {
"title": "Build a Moon Orbit",

9
client/src/pages/learn/full-stack-developer/lecture-animations-and-accessibility/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Animations and Accessibility
block: lecture-animations-and-accessibility
superBlock: full-stack-developer
---
## Introduction to Animations and Accessibility
In these lecture videos, you will learn about animations and accessibility.

9
client/src/pages/learn/full-stack-developer/lecture-best-practices-for-accessibility-and-css/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Best Practices for Accessibility and CSS
block: lecture-best-practices-for-accessibility-and-css
superBlock: full-stack-developer
---
## Introduction to Best Practices for Accessibility and CSS
In these lecture videos, you will learn about best practices for accessibility in CSS.

9
client/src/pages/learn/full-stack-developer/lecture-best-practices-for-responsive-web-design/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Best Practices for Responsive Web Design
block: lecture-best-practices-for-responsive-web-design
superBlock: full-stack-developer
---
## Introduction to Best Practices for Responsive Web Design
In these lecture videos, you will learn about the best practices for responsive web design.

9
client/src/pages/learn/full-stack-developer/lecture-best-practices-for-styling-forms/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Best Practices for Styling Forms
block: lecture-best-practices-for-styling-forms
superBlock: full-stack-developer
---
## Introduction to Best Practices for Styling Forms
In these lecture videos, you will learn about the best practices for styling forms.

9
client/src/pages/learn/full-stack-developer/lecture-browsing-the-web-effectively/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Browsing the Web Effectively
block: lecture-browsing-the-web-effectively
superBlock: full-stack-developer
---
## Introduction to Browsing the Web Effectively
In these lecture videos, you will learn how to browse the web effectively.

9
client/src/pages/learn/full-stack-developer/lecture-common-design-tools/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Common Design Tools
block: lecture-common-design-tools
superBlock: full-stack-developer
---
## Introduction to Common Design Tools
In these lecture videos, you will learn about common design tools.

9
client/src/pages/learn/full-stack-developer/lecture-css-specificity-the-cascade-algorithm-and-inheritance/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to CSS Specificity, the Cascade Algorithm, and Inheritance
block: lecture-css-specificity-the-cascade-algorithm-and-inheritance
superBlock: full-stack-developer
---
## Introduction to CSS Specificity, the Cascade Algorithm, and Inheritance
In these lecture videos, you will learn about CSS specificity, the cascade algorithm, and inheritance.

9
client/src/pages/learn/full-stack-developer/lecture-debugging-css/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Debugging CSS
block: lecture-debugging-css
superBlock: full-stack-developer
---
## Introduction to Debugging CSS
In these lecture videos, you will learn about debugging CSS.

9
client/src/pages/learn/full-stack-developer/lecture-styling-lists-and-links/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Styling Lists and Links
block: lecture-styling-lists-and-links
superBlock: full-stack-developer
---
## Introduction to Styling Lists and Links
In these lecture videos, you will learn about styling lists and links.

9
client/src/pages/learn/full-stack-developer/lecture-understanding-computer-internet-and-tooling-basics/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Understanding Computer, Internet, and Tooling Basics
block: lecture-understanding-computer-internet-and-tooling-basics
superBlock: full-stack-developer
---
## Introduction to Understanding Computer, Internet, and Tooling Basics
In these lecture videos, you will learn about computer, internet, and tooling basics.

9
client/src/pages/learn/full-stack-developer/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Understanding How to Work with Floats and Positioning in CSS
block: lecture-understanding-how-to-work-with-floats-and-positioning-in-css
superBlock: full-stack-developer
---
## Introduction to Understanding How to Work with Floats and Positioning in CSS
In these lecture videos, you will learn about how to work with floats and positioning in CSS.

9
client/src/pages/learn/full-stack-developer/lecture-user-centered-design/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to User-Centered Design
block: lecture-user-centered-design
superBlock: full-stack-developer
---
## Introduction to User-Centered Design
In these lecture videos, you will learn about user-centered design.

9
client/src/pages/learn/full-stack-developer/lecture-user-interface-design-fundamentals/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to User Interface Design Fundamentals
block: lecture-user-interface-design-fundamentals
superBlock: full-stack-developer
---
## Introduction to User Interface Design Fundamentals
In these lecture videos, you will learn about user interface design fundamentals.

9
client/src/pages/learn/full-stack-developer/lecture-what-is-css/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to What Is CSS?
block: lecture-what-is-css
superBlock: full-stack-developer
---
## Introduction to What Is CSS?
In these lecture videos, you will learn what CSS is.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-attribute-selectors/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with Attribute Selectors
block: lecture-working-with-attribute-selectors
superBlock: full-stack-developer
---
## Introduction to Working with Attribute Selectors
In these lecture videos, you will learn about working with attribute selectors.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-backgrounds-and-borders/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with Backgrounds and Borders
block: lecture-working-with-backgrounds-and-borders
superBlock: full-stack-developer
---
## Introduction to Working with Backgrounds and Borders
In these lecture videos, you will learn about working with backgrounds and borders.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-colors-in-css/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with Colors in CSS
block: lecture-working-with-colors-in-css
superBlock: full-stack-developer
---
## Introduction to Working with Colors in CSS
In these lecture videos, you will learn about working with colors in CSS.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-css-flexbox/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with CSS Flexbox
block: lecture-working-with-css-flexbox
superBlock: full-stack-developer
---
## Introduction to Working with CSS Flexbox
In these lecture videos, you will learn about working with CSS flexbox.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-css-fonts/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with CSS Fonts
block: lecture-working-with-css-fonts
superBlock: full-stack-developer
---
## Introduction to Working with CSS Fonts
In these lecture videos, you will learn about working with CSS fonts.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-css-grid/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with CSS Grid
block: lecture-working-with-css-grid
superBlock: full-stack-developer
---
## Introduction to Working with CSS Grid
In these lecture videos, you will learn about working with CSS grid.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-css-transforms-overflow-and-filters/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with CSS Transforms, Overflow, and Filters
block: lecture-working-with-css-transforms-overflow-and-filters
superBlock: full-stack-developer
---
## Introduction to Working with CSS Transforms, Overflow, and Filters
In these lecture videos, you will learn about working with CSS transforms, overflow, and filters.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-css-variables/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with CSS Variables
block: lecture-working-with-css-variables
superBlock: full-stack-developer
---
## Introduction to Working with CSS Variables
In these lecture videos, you will learn about working with CSS variables.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-file-systems/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with File Systems
block: lecture-working-with-file-systems
superBlock: full-stack-developer
---
## Introduction to Working with File Systems
In these lecture videos, you will learn about working with file systems.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with Pseudo-Classes and Pseudo-Elements in CSS
block: lecture-working-with-pseudo-classes-and-pseudo-elements-in-css
superBlock: full-stack-developer
---
## Introduction to Working with Pseudo-Classes and Pseudo-Elements in CSS
In these lecture videos, you will learn about working with pseudo-classes and pseudo-elements in CSS.

9
client/src/pages/learn/full-stack-developer/lecture-working-with-relative-and-absolute-units/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to Working with Relative and Absolute Units
block: lecture-working-with-relative-and-absolute-units
superBlock: full-stack-developer
---
## Introduction to Working with Relative and Absolute Units
In these lecture videos, you will learn about working with relative and absolute units.

19
curriculum/challenges/_meta/lecture-animations-and-accessibility/meta.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "Animations and Accessibility",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-animations-and-accessibility",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa8d65995be62ef1c7515",
"title": "What Are CSS Animations, and How Do They Work?"
},
{
"id": "672cf764cf55a70433590def",
"title": "What Are Accessibility Concerns Around Using Animations, and How Can prefers-reduced-motion Help?"
}
],
"helpCategory": "HTML-CSS"
}

19
curriculum/challenges/_meta/lecture-best-practices-for-accessibility-and-css/meta.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "Best Practices for Accessibility and CSS",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-best-practices-for-accessibility-and-css",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa82768e00d600305afc0",
"title": "What Are Some Tools to Check for Good Color Contrast on Sites?"
},
{
"id": "672c35a79fa53e00de9f2a49",
"title": "What Are Best Practices for Hiding Content So It Doesn't Become Inaccessible?"
}
],
"helpCategory": "HTML-CSS"
}

27
curriculum/challenges/_meta/lecture-best-practices-for-responsive-web-design/meta.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "Best Practices for Responsive Web Design",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-best-practices-for-responsive-web-design",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa8873d4e25618870764f",
"title": "What Is Responsive Web Design, and What Is Its Relationship to Tools Like CSS Grid and Flexbox?"
},
{
"id": "672cf05c3ad533eabe1e8197",
"title": "How Do Media Queries Work, and What Are Some Common Media Types and Features?"
},
{
"id": "672cf06c8f46f9eb04db9832",
"title": "What Is the Mobile First Approach in Responsive Web Design?"
},
{
"id": "672cf07a2b9796eb49719e03",
"title": "What Are Media Breakpoints, and What Are Common Breakpoints in Modern Design?"
}
],
"helpCategory": "HTML-CSS"
}

23
curriculum/challenges/_meta/lecture-best-practices-for-styling-forms/meta.json Normal file
View File

@@ -0,0 +1,23 @@
{
"name": "Best Practices for Styling Forms",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-best-practices-for-styling-forms",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa791227e755da64cf240",
"title": "What Are Some Best Practices for Styling Text Inputs?"
},
{
"id": "672bc9d9eecb65cdf63491de",
"title": "When Should You Use appearance: none to Deal with Issues Styling Search Inputs and Checkboxes?"
},
{
"id": "672bca660aa9f9ce9b2b2787",
"title": "What Are Common Issues When Styling Special Input Elements?"
}
],
"helpCategory": "HTML-CSS"
}

23
curriculum/challenges/_meta/lecture-browsing-the-web-effectively/meta.json Normal file
View File

@@ -0,0 +1,23 @@
{
"name": "Browsing the Web Effectively",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-browsing-the-web-effectively",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa5bd69657d56ab49ec8a",
"title": "What Are Some of the Common Web Browsers Available Today and How Do You Install One?"
},
{
"id": "672ac96491845f43ea9a26d7",
"title": "What Is the Difference Between a Web Browser, a Website, and a Search Engine?"
},
{
"id": "672ac9705b07a64439b73b59",
"title": "How to Use a Search Engine Effectively to Achieve Optimal Results"
}
],
"helpCategory": "HTML-CSS"
}

19
curriculum/challenges/_meta/lecture-common-design-tools/meta.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "Common Design Tools",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-common-design-tools",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa7005c24e45bbd53b20d",
"title": "What Are Design Briefs and How Do Developers Work with Them?"
},
{
"id": "672bb619f0d4538d0528760d",
"title": "What Are Some Common Tools Developers Should Know About That Are Used by Designers in the Industry?"
}
],
"helpCategory": "HTML-CSS"
}

43
curriculum/challenges/_meta/lecture-css-specificity-the-cascade-algorithm-and-inheritance/meta.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "CSS Specificity, the Cascade Algorithm, and Inheritance",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-css-specificity-the-cascade-algorithm-and-inheritance",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa62178d5ff57fe4f98e0",
"title": "What Is CSS Specificity, and the Specificity for Inline, Internal, and External CSS?"
},
{
"id": "672b8e7eca8a4322306d15f8",
"title": "What Is the Universal Selector, and What Is Its Specificity?"
},
{
"id": "672b8e8adcc27e235a154231",
"title": "What Is the Specificity for Type Selectors?"
},
{
"id": "672b8e9892eafe238d6513a5",
"title": "What Is the Specificity for Class Selectors?"
},
{
"id": "672b8ea434ceac23cc90f337",
"title": "What Is the Specificity for ID Selectors?"
},
{
"id": "672b8f1399cabc2406c3227f",
"title": "What Is the important Keyword, and What Are the Best Practices for Using It?"
},
{
"id": "672b8f23511adf25646b4236",
"title": "How Does the Cascade Algorithm Work at a High Level?"
},
{
"id": "672b8f382370e025aadd3f4e",
"title": "How Does Inheritance Work with CSS at a High Level?"
}
],
"helpCategory": "HTML-CSS"
}

10
curriculum/challenges/_meta/lecture-debugging-css/meta.json Normal file
View File

@@ -0,0 +1,10 @@
{
"name": "Debugging CSS",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-debugging-css",
"superBlock": "full-stack-developer",
"challengeOrder": [{ "id": "672aa8c1ad423562a38b484d", "title": "How Can You Use the DevTools Inspection Tool and CSS Validators to Debug Your CSS?" }],
"helpCategory": "HTML-CSS"
}

27
curriculum/challenges/_meta/lecture-styling-lists-and-links/meta.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "Styling Lists and Links",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-styling-lists-and-links",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa6441bcd3758e9f52ae0",
"title": "How Do You Space List Items Using margin or line-height?"
},
{
"id": "672b951b1bf78038b1a2a0e7",
"title": "How Do the Different list-style Properties Work?"
},
{
"id": "672b952d3a5c603908841971",
"title": "Why Are Default Link Styles Important for Usability on the Web?"
},
{
"id": "672b9538c25634394ceb7b8f",
"title": "How Do You Style the Different Link States?"
}
],
"helpCategory": "HTML-CSS"
}

31
curriculum/challenges/_meta/lecture-understanding-computer-internet-and-tooling-basics/meta.json Normal file
View File

@@ -0,0 +1,31 @@
{
"name": "Understanding Computer, Internet, and Tooling Basics",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-understanding-computer-internet-and-tooling-basics",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa578a2129554d4675049",
"title": "What Are the Basic Parts of a Computer?"
},
{
"id": "672ab82c1a9bbd0e3aabc39d",
"title": "How Can You Effectively Work With Your Keyboard, Mouse, and Other Pointing Devices"
},
{
"id": "672ab83c4297910eade53c2e",
"title": "What Are the Different Types of Internet Service Providers?"
},
{
"id": "672ab849aa1ef70eefd29364",
"title": "What Are Safe Ways to Sign Into Your Computer?"
},
{
"id": "672ab8573f32480f192aaae1",
"title": "What Are the Different Types of Tools Professional Developers Use?"
}
],
"helpCategory": "HTML-CSS"
}

31
curriculum/challenges/_meta/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/meta.json Normal file
View File

@@ -0,0 +1,31 @@
{
"name": "Understanding How to Work with Floats and Positioning in CSS",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-understanding-how-to-work-with-floats-and-positioning-in-css",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa86da9937560d3dfe3d6",
"title": "What Are Common Use Cases for Using Floats, and How Do They Work?"
},
{
"id": "672c3a84fb8d4613776cc99e",
"title": "What Is Relative Positioning, and How Does This Differ from the Default Static Positioning?"
},
{
"id": "672c3a8fac7c5613b4bb75de",
"title": "What Is Absolute Positioning, and How Does It Work?"
},
{
"id": "672c3a9d32c56113fcaedf24",
"title": "What Is Fixed and Sticky Positioning, and How Does It Differ from Absolute Positioning?"
},
{
"id": "672c3aa9bc3a481425cb52b3",
"title": "What Is the Z-Index Property, and How Does It Work to Control the Stacking of Positioned Elements?"
}
],
"helpCategory": "HTML-CSS"
}

55
curriculum/challenges/_meta/lecture-user-centered-design/meta.json Normal file
View File

@@ -0,0 +1,55 @@
{
"name": "User-Centered Design",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-user-centered-design",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa6ee9011775b27e23399",
"title": "What Is User-Centered Design?"
},
{
"id": "672bafd715f6ba77d57f3ec0",
"title": "What Are User Requirements, User Research, and Testing?"
},
{
"id": "672bafe4ef812b78696b0e27",
"title": "What Are Best Practices for Designing a Dark Mode Feature?"
},
{
"id": "672baff13bc5b3789691c75c",
"title": "What Are Best Practices for Designing Breadcrumbs?"
},
{
"id": "672baffc684be178dd02fa06",
"title": "What Are Best Practices for Designing Cards?"
},
{
"id": "672bb009952c7a7904a750cb",
"title": "What Are Best Practices for Designing Infinite Scrolls?"
},
{
"id": "672bb015cfc889794359c4e0",
"title": "What Are Best Practices for Designing Modal Dialogs?"
},
{
"id": "672bb02009ffc0797ca567ab",
"title": "What Are Best Practices for Progress Indication on Forms, Registration, and Setup?"
},
{
"id": "672bb02ecb230779bbbaccd9",
"title": "What Are Best Practices for Designing Shopping Carts?"
},
{
"id": "672bb03999f39379f67d8972",
"title": "What Is Progressive Disclosure?"
},
{
"id": "672bb04476b1997a1da8b79b",
"title": "What Is Deferred and Lazy Registration?"
}
],
"helpCategory": "HTML-CSS"
}

43
curriculum/challenges/_meta/lecture-user-interface-design-fundamentals/meta.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "User Interface Design Fundamentals",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-user-interface-design-fundamentals",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa6c9e379285acca5a2aa",
"title": "What Are Common Design Terms to Help You Communicate with Designers?"
},
{
"id": "672baa97f2990e6631d522e7",
"title": "How Do You Create Good Background and Foreground Contrast in Your Designs?"
},
{
"id": "672baaa62d4b46667a8ac869",
"title": "What Is the Importance of Good Visual Hierarchy in Design?"
},
{
"id": "672baab2a0c3df66ad987b94",
"title": "How Does Scale Work in Design?"
},
{
"id": "672baabf16290b66e6b79a39",
"title": "How Does Alignment Work in Design?"
},
{
"id": "672baacb7f2f446728e77efe",
"title": "What Is the Importance of Whitespace in Design?"
},
{
"id": "672baad7bbc4f86762ca173e",
"title": "What Are Best Practices for Working with Images in Your Designs?"
},
{
"id": "672baae11d06c867a16f64e1",
"title": "What Is Progressive Enhancement?"
}
],
"helpCategory": "HTML-CSS"
}

51
curriculum/challenges/_meta/lecture-what-is-css/meta.json Normal file
View File

@@ -0,0 +1,51 @@
{
"name": "What Is CSS?",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-what-is-css",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa5e1f8b935577acfb2b9",
"title": "What Is CSS, and What Is Its Role on the Web?"
},
{
"id": "672acbbe2891564c4e316164",
"title": "What Is the Basic Anatomy of a CSS Rule?"
},
{
"id": "672acbce8163374c903253c9",
"title": "What Is the Meta Viewport Element Used For?"
},
{
"id": "672acbdd06b44c4cd3bf8713",
"title": "What Are Some Default Browser Styles Applied to HTML?"
},
{
"id": "672acbf7490c054d213a8c1f",
"title": "What Are Inline, Internal, and External CSS, and When Should You Use Each One?"
},
{
"id": "672acc03c257524d6a5151e8",
"title": "How Do Width and Height Work?"
},
{
"id": "672acc100d59d24da7b4e09c",
"title": "What Are the Different Types of CSS Combinators?"
},
{
"id": "672acc1e24c1e54df5ad89bd",
"title": "What Is the Difference Between Inline and Block-Level Elements in CSS?"
},
{
"id": "672acc3f6f3e3c4e31ec3e12",
"title": "How Does Inline-Block Work, and How Does It Differ from Inline and Block Elements?"
},
{
"id": "672acc538e6ef24e9dd3c94f",
"title": "What Are Margins and Padding, and How Do They Work?"
}
],
"helpCategory": "HTML-CSS"
}

23
curriculum/challenges/_meta/lecture-working-with-attribute-selectors/meta.json Normal file
View File

@@ -0,0 +1,23 @@
{
"name": "Working with Attribute Selectors",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-attribute-selectors",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa840de72b3607bba4bed",
"title": "What Is the Attribute Selector, and How Can It Be Used to Target Links with the href and title Attributes?"
},
{
"id": "672c37498952920879c43de9",
"title": "How to Use the Attribute Selector to Target Elements with the lang and data-lang Attributes?"
},
{
"id": "672c375857128708d04d0e22",
"title": "How to Use the Attribute Selector to Target Ordered List Elements with the type Attribute?"
}
],
"helpCategory": "HTML-CSS"
}

27
curriculum/challenges/_meta/lecture-working-with-backgrounds-and-borders/meta.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "Working with Backgrounds and Borders",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-backgrounds-and-borders",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa669960f6a596081fcad",
"title": "How Do Background Image Size, Repeat, Position, and Attachment Work?"
},
{
"id": "672b98be592cfb451f651451",
"title": "What Is a Background Gradient, and How Does It Work?"
},
{
"id": "672b98cd77b6b7456b6ef2de",
"title": "What Are Some Accessibility Considerations for Backgrounds?"
},
{
"id": "672b98db3bcdd545ab3b3c73",
"title": "What Are the Different Ways You Can Add Borders Around Images?"
}
],
"helpCategory": "HTML-CSS"
}

35
curriculum/challenges/_meta/lecture-working-with-colors-in-css/meta.json Normal file
View File

@@ -0,0 +1,35 @@
{
"name": "Working with Colors in CSS",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-colors-in-css",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa7678e05e35d42e33522",
"title": "What Is Color Theory in Design?"
},
{
"id": "672bc4ff5e7a4bbdee8ba013",
"title": "What Are Named Colors in CSS, and When to Use Them?"
},
{
"id": "672bc51370c789be459186b4",
"title": "What Is the RGB Color Model, and How Does the RGB Function Work in CSS?"
},
{
"id": "672bc523324694be91d90d96",
"title": "What Is the HSL Color Model, and How Does the HSL Function Work in CSS?"
},
{
"id": "672bc5344330d7bee2f9c2ed",
"title": "What Are Hex Codes, and How Do They Work in CSS?"
},
{
"id": "672bc544196a17bf28594e64",
"title": "What Are Linear and Radial Gradients, and How Do They Work in CSS?"
}
],
"helpCategory": "HTML-CSS"
}

19
curriculum/challenges/_meta/lecture-working-with-css-flexbox/meta.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "Working with CSS Flexbox",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-css-flexbox",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa7f7284b235f46f7d4e9",
"title": "What Is CSS Flexbox, and When Should You Use It?"
},
{
"id": "672bd658c0e190f674a5e057",
"title": "What Are Some Common Flex Properties, and How Do They Work?"
}
],
"helpCategory": "HTML-CSS"
}

39
curriculum/challenges/_meta/lecture-working-with-css-fonts/meta.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "Working with CSS Fonts",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-css-fonts",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa80bc17f355fabd2e9e8",
"title": "What Are the Fundamentals of Typography?"
},
{
"id": "672bd807c49548fc9be66aca",
"title": "What Are Some Best Practices for Working with Typography in Your Designs?"
},
{
"id": "672bd814105a0ffcf36f9233",
"title": "What Are Font Families and How Do They Work?"
},
{
"id": "672bd81ee07c43fd2070f0fe",
"title": "What Are Web Safe Fonts?"
},
{
"id": "672bd834cedccefd5939a913",
"title": "What Is the @font-face At-Rule, and How Does It Work?"
},
{
"id": "672bd8453d1371fdb1510fe5",
"title": "How Do You Work with External Fonts Like Font Squirrel and Google Fonts?"
},
{
"id": "672bd853c985cdfdeb32f4f9",
"title": "What Is the text-shadow Property, and How Does It Work?"
}
],
"helpCategory": "HTML-CSS"
}

43
curriculum/challenges/_meta/lecture-working-with-css-grid/meta.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "Working with CSS Grid",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-css-grid",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa8ac4631d1623ec5cd86",
"title": "What Is CSS Grid, and How Does It Differ from Flexbox?"
},
{
"id": "673226732b19aa1cacd0a75c",
"title": "How Can You Create Flexible Grids with the fr Unit?"
},
{
"id": "6732267ecab2151ced471cd4",
"title": "How Can You Create Gaps Between Tracks in a Grid?"
},
{
"id": "6732268d05c3661d32a0fee8",
"title": "How Can You Repeat Track Listings in a Grid Layout?"
},
{
"id": "6732269a7aa2ca1d6b6574fe",
"title": "What Is the Difference Between an Implicit and Explicit Grid?"
},
{
"id": "673226a62eb2121da41a3d68",
"title": "What Is the minmax() Function and How Does It Work?"
},
{
"id": "673226afcd33991dd751937a",
"title": "How Do the grid-column and grid-row Properties Work?"
},
{
"id": "673226b97d4a731e0577ae93",
"title": "How Can You Position Items on the Grid Using the grid-template-areas Property?"
}
],
"helpCategory": "HTML-CSS"
}

39
curriculum/challenges/_meta/lecture-working-with-css-transforms-overflow-and-filters/meta.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "Working with CSS Transforms, Overflow, and Filters",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-css-transforms-overflow-and-filters",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa7e03c2e365e906e5733",
"title": "What Is Overflow in CSS, and How Does It Work?"
},
{
"id": "672bcc8ccc976fd791610f43",
"title": "What Is the CSS Transform Property, and How Does It Work?"
},
{
"id": "672bcc9c4a6dd6d7dd3e6357",
"title": "What Is the CSS Box Model, and How Does It Work?"
},
{
"id": "672bccae6e556cd81cef6af2",
"title": "What Is Margin Collapsing, and How Does It Work?"
},
{
"id": "672bccc8ea33bad87abb3c56",
"title": "What Is the Difference Between content-box and border-box?"
},
{
"id": "672bccdb8f1823d8c60f914c",
"title": "What Is a CSS Reset, and What Are Some Common Examples?"
},
{
"id": "672bccebe1fc82d911c3f078",
"title": "What Is the CSS Filter Property, and What Are Common Examples?"
}
],
"helpCategory": "HTML-CSS"
}

19
curriculum/challenges/_meta/lecture-working-with-css-variables/meta.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "Working with CSS Variables",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-css-variables",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa8985acb7361e656f94c",
"title": "What Are CSS Custom Properties, and How Do They Work?"
},
{
"id": "672cf3ca326da9f63683e236",
"title": "What Is the @property Rule, and How Does It Work with Fallbacks?"
}
],
"helpCategory": "HTML-CSS"
}

35
curriculum/challenges/_meta/lecture-working-with-file-systems/meta.json Normal file
View File

@@ -0,0 +1,35 @@
{
"name": "Working with File Systems",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-file-systems",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa58c389eb9565978495d",
"title": "How Can You Use File Management Applications on Your Computer?"
},
{
"id": "672ac37104dc2530a769e6a4",
"title": "What Are Best Practices for Naming Files for Web Applications?"
},
{
"id": "672ac39a22b0cc30eb8fd65e",
"title": "What Are Best Practices for File/Folder Organization in Web Applications?"
},
{
"id": "672ac3c5d0e9fd31835ff772",
"title": "How Can You Create, Move, and Delete Files and Folders Using Explorer/Finder?"
},
{
"id": "672ac3f129efbf327742eb33",
"title": "How Can You Search for Files and Folders on Your Computer?"
},
{
"id": "672ac403a9ba7732b31c6480",
"title": "What Are Some Common File Types You Will Work With in Web Applications?"
}
],
"helpCategory": "HTML-CSS"
}

39
curriculum/challenges/_meta/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/meta.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "Working with Pseudo-Classes and Pseudo-Elements in CSS",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa74f761c065c9828a95e",
"title": "What Are Pseudo-classes, and How Do They Work?"
},
{
"id": "672bbe9171a5cca90f2edeea",
"title": "What Are Examples of Element User Action Pseudo-classes?"
},
{
"id": "672bbe9d6ec03ea954d92ff7",
"title": "What Are Examples of Input Pseudo-classes?"
},
{
"id": "672bbeaa5afdc5a98d5ab8ff",
"title": "What Are Examples of Location Pseudo-classes?"
},
{
"id": "672bbeb6eefd7ca9c003ea00",
"title": "What Are Examples of Tree-structural Pseudo-classes?"
},
{
"id": "672bbec3b86dbdaa07a5a5be",
"title": "What Are Examples of Functional Pseudo-classes?"
},
{
"id": "672bbed37c6f51aa3a15e78c",
"title": "What Are Pseudo-elements, and How Do They Work?"
}
],
"helpCategory": "HTML-CSS"
}

31
curriculum/challenges/_meta/lecture-working-with-relative-and-absolute-units/meta.json Normal file
View File

@@ -0,0 +1,31 @@
{
"name": "Working with Relative and Absolute Units",
"blockType": "lecture",
"blockLayout": "challenge-list",
"isUpcomingChange": true,
"dashedName": "lecture-working-with-relative-and-absolute-units",
"superBlock": "full-stack-developer",
"challengeOrder": [
{
"id": "672aa7194614b55c16b879a1",
"title": "What Are Absolute Units in CSS, and When Should You Use Them?"
},
{
"id": "672bb7d659f0089377a91eab",
"title": "What Are Percentages in CSS, and When Should You Use Them?"
},
{
"id": "672bb7f08b58df93ed2a8768",
"title": "What Are ems and rems in CSS, and When Should You Use Them?"
},
{
"id": "672bb83c3a9906945536cff2",
"title": "What Are vh and vw Units, and When Should You Use Them?"
},
{
"id": "672bb851b068e3954a05b9b1",
"title": "What Is the calc() Function, and How Does It Work?"
}
],
"helpCategory": "HTML-CSS"
}

127
curriculum/challenges/english/25-front-end-development/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md Normal file
View File

@@ -0,0 +1,127 @@
---
id: 672aa8d65995be62ef1c7515
title: What Are CSS Animations, and How Do They Work?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-css-animations
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
What is the purpose of the `@keyframes` rule in CSS animations?
## --answers--
To specify the duration of the animation.
### --feedback--
Think about what `@keyframes` allows you to define in terms of the animation's appearance.
---
To define the stages and styles of the animation.
---
To set the timing function of the animation.
### --feedback--
Think about what `@keyframes` allows you to define in terms of the animation's appearance.
---
To determine how many times the animation repeats.
### --feedback--
Think about what `@keyframes` allows you to define in terms of the animation's appearance.
## --video-solution--
2
## --text--
In the following CSS code, what does `2s` represent?
```css
.element {
animation: fade-in 2s ease-in;
}
```
## --answers--
The delay before the animation starts.
### --feedback--
Consider which aspect of the animation this value is controlling.
---
The number of times the animation repeats.
### --feedback--
Consider which aspect of the animation this value is controlling.
---
The duration of the animation.
---
The percentage of the animation's progress.
### --feedback--
Consider which aspect of the animation this value is controlling.
## --video-solution--
3
## --text--
Which CSS property would you use to make an animation repeat indefinitely?
## --answers--
`animation-loop: infinite;`
### --feedback--
Think about which property controls how many times an animation plays.
---
`animation-repeat: always;`
### --feedback--
Think about which property controls how many times an animation plays.
---
`animation-iteration-count: infinite;`
---
`animation-duration: endless;`
### --feedback--
Think about which property controls how many times an animation plays.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-animations-and-accessibility/672cf764cf55a70433590def.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672cf764cf55a70433590def
title: What Are Accessibility Concerns Around Using Animations, and How Can prefers-reduced-motion Help?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-accessibility-concerns-around-using-animations
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the primary purpose of the `prefers-reduced-motion` media query?
## --answers--
To increase the speed of all animations.
### --feedback--
Think about how this query relates to user preferences for motion on their devices.
---
To detect if a user has requested minimal animations at the system level.
---
To automatically add more animations to a website.
### --feedback--
Think about how this query relates to user preferences for motion on their devices.
---
To change the color scheme of animations.
### --feedback--
Think about how this query relates to user preferences for motion on their devices.
## --video-solution--
2
## --text--
Which of the following is NOT a common accessibility concern related to animations?
## --answers--
They can cause discomfort for users with vestibular disorders.
### --feedback--
Consider how animations might affect different groups of users, including those with various disabilities.
---
They can be distracting for users with cognitive disabilities.
### --feedback--
Consider how animations might affect different groups of users, including those with various disabilities.
---
They always improve readability for all users.
---
They can trigger seizures in people with photosensitive epilepsy.
### --feedback--
Consider how animations might affect different groups of users, including those with various disabilities.
## --video-solution--
3
## --text--
In the context of `prefers-reduced-motion`, what does setting `animation-duration: 0.01ms !important;` achieve?
## --answers--
It makes animations last exactly 0.01 milliseconds.
### --feedback--
Think about the practical effect of an extremely short animation duration.
---
It increases the speed of animations.
### --feedback--
Think about the practical effect of an extremely short animation duration.
---
It effectively turns off animations while still allowing them to complete.
---
It makes animations last indefinitely.
### --feedback--
Think about the practical effect of an extremely short animation duration.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672aa82768e00d600305afc0
title: What Are Some Tools to Check for Good Color Contrast on Sites?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-some-tools-to-check-for-good-color-contrast-on-sites
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
What is the primary purpose of using color contrast checking tools like WebAIM's Color Contrast Checker?
## --answers--
To make websites more colorful.
### --feedback--
Think about why contrast between text and background is important for users.
---
To ensure text is readable against its background for accessibility.
---
To reduce the number of colors used in a website.
### --feedback--
Think about why contrast between text and background is important for users.
---
To increase website loading speed.
### --feedback--
Think about why contrast between text and background is important for users.
## --video-solution--
2
## --text--
Which feature does the TPGi Color Contrast Analyzer offer that most online contrast checkers don't?
## --answers--
It can check contrast ratios.
### --feedback--
Consider the advanced capabilities mentioned for this desktop application.
---
It provides hexadecimal color codes.
### --feedback--
Consider the advanced capabilities mentioned for this desktop application.
---
It can analyze entire web pages and simulate color vision deficiencies.
---
It suggests color combinations.
### --feedback--
Consider the advanced capabilities mentioned for this desktop application.
## --video-solution--
3
## --text--
What do the WCAG 2.0 level AA and AAA standards refer to in the context of color contrast tools?
## --answers--
The brightness levels of colors.
### --feedback--
These standards are related to the accessibility guidelines mentioned in the lecture.
---
The file size of images.
### --feedback--
These standards are related to the accessibility guidelines mentioned in the lecture.
---
The minimum contrast ratios required for accessibility.
---
The number of colors used in a design.
### --feedback--
These standards are related to the accessibility guidelines mentioned in the lecture.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672c35a79fa53e00de9f2a49
title: "What Are Best Practices for Hiding Content So It Doesn't Become Inaccessible?"
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-best-practices-for-hiding-content-so-it-doesnt-become-inaccessible
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Which CSS property hides content visually but keeps it in the document flow and accessible to screen readers?
## --answers--
`display: none;`
### --feedback--
Think about which property affects layout but not screen reader access.
---
`visibility: hidden;`
### --feedback--
Think about which property affects layout but not screen reader access.
---
`opacity: 0;`
---
`position: absolute; left: -9999px;`
### --feedback--
Think about which property affects layout but not screen reader access.
## --video-solution--
3
## --text--
What is the primary purpose of the "visually hidden" or "sr-only" CSS technique?
## --answers--
To hide content from all users.
### --feedback--
Consider the needs of users who rely on screen readers.
---
To make content visible only on mobile devices.
### --feedback--
Consider the needs of users who rely on screen readers.
---
To hide content visually while keeping it accessible to screen readers.
---
To create animated transitions for content.
### --feedback--
Consider the needs of users who rely on screen readers.
## --video-solution--
3
## --text--
When using the aria-hidden attribute, what effect does it have on content?
## --answers--
It makes the content invisible.
### --feedback--
Think about how this attribute affects the accessibility tree.
---
It removes the content from the DOM.
### --feedback--
Think about how this attribute affects the accessibility tree.
---
It tells assistive technologies to ignore the content.
---
It makes the content unclickable.
### --feedback--
Think about how this attribute affects the accessibility tree.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-responsive-web-design/672aa8873d4e25618870764f.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672aa8873d4e25618870764f
title: What Is Responsive Web Design, and What Is Its Relationship to Tools Like CSS Grid and Flexbox?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-responsive-web-design
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
What is the primary goal of responsive web design?
## --answers--
To create separate versions of a website for desktop and mobile.
### --feedback--
Think about how responsive design addresses the variety of devices used to access the web.
---
To ensure websites adapt to different screen sizes and devices.
---
To increase the loading speed of websites on mobile devices.
### --feedback--
Think about how responsive design addresses the variety of devices used to access the web.
---
To simplify the design process for web developers.
### --feedback--
Think about how responsive design addresses the variety of devices used to access the web.
## --video-solution--
2
## --text--
How does CSS Flexbox contribute to responsive web design?
## --answers--
By providing a way to create complex grid layouts.
### --feedback--
Consider what kind of layouts Flexbox is particularly good at handling.
---
By allowing easy manipulation of one-dimensional layouts.
---
By automatically resizing images for different screen sizes.
### --feedback--
Consider what kind of layouts Flexbox is particularly good at handling.
---
By enabling the use of media queries.
### --feedback--
Consider what kind of layouts Flexbox is particularly good at handling.
## --video-solution--
2
## --text--
In responsive web design, what is the primary advantage of using CSS Grid over older layout methods?
## --answers--
It allows for the creation of print stylesheets.
### --feedback--
Think about the dimensionality of layouts that CSS Grid excels at creating.
---
It provides more flexibility in creating complex, two-dimensional layouts.
---
It automatically adjusts font sizes for different devices.
### --feedback--
Think about the dimensionality of layouts that CSS Grid excels at creating.
---
It reduces the need for JavaScript in responsive designs.
### --feedback--
Think about the dimensionality of layouts that CSS Grid excels at creating.
## --video-solution--
2

121
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf05c3ad533eabe1e8197.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672cf05c3ad533eabe1e8197
title: How Do Media Queries Work, and What Are Some Common Media Types and Features?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-do-media-queries-work
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Which of the following is NOT a commonly used media type in modern CSS?
## --answers--
`all`
### --feedback--
Consider which media types are still relevant in current web development practices.
---
`print`
### --feedback--
Consider which media types are still relevant in current web development practices.
---
`screen`
### --feedback--
Consider which media types are still relevant in current web development practices.
---
`handheld`
## --video-solution--
4
## --text--
What does the orientation media feature check for?
## --answers--
The physical orientation of the device.
### --feedback--
Think about how this feature relates to how content is displayed on a screen.
---
Whether the viewport is wider than it is tall, or vice versa.
---
The direction of text on the page.
### --feedback--
Think about how this feature relates to how content is displayed on a screen.
---
The geographical orientation of the user.
### --feedback--
Think about how this feature relates to how content is displayed on a screen.
## --video-solution--
2
## --text--
In a media query, what is the purpose of using the `and` operator?
## --answers--
To combine multiple CSS properties.
### --feedback--
Consider how you might check for multiple conditions in a single media query.
---
To add two numeric values together.
### --feedback--
Consider how you might check for multiple conditions in a single media query.
---
To combine multiple media features or types.
---
To create a logical `or` condition.
### --feedback--
Consider how you might check for multiple conditions in a single media query.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672cf06c8f46f9eb04db9832
title: What Is the Mobile First Approach in Responsive Web Design?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-the-mobile-first-approach-in-responsive-web-design
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the primary focus of the mobile-first approach in responsive web design?
## --answers--
Designing for desktop screens and then adapting for mobile.
### --feedback--
Consider which device is given priority in the initial design phase.
---
Creating separate websites for mobile and desktop users.
### --feedback--
Consider which device is given priority in the initial design phase.
---
Prioritizing mobile design and progressively enhancing for larger screens.
---
Focusing solely on mobile design and ignoring desktop users.
### --feedback--
Consider which device is given priority in the initial design phase.
## --video-solution--
3
## --text--
How does the mobile-first approach typically utilize CSS media queries?
## --answers--
By using `max-width` to scale down designs for smaller screens.
### --feedback--
Think about how styles are added as screen sizes increase in a mobile-first approach.
---
By using `min-width` to add styles for larger screens.
---
By creating separate stylesheets for each device type
### --feedback--
Think about how styles are added as screen sizes increase in a mobile-first approach.
---
By avoiding media queries altogether.
### --feedback--
Think about how styles are added as screen sizes increase in a mobile-first approach.
## --video-solution--
2
## --text--
Which of the following is NOT a primary benefit of the mobile-first approach?
## --answers--
Improved performance optimization.
### --feedback--
Consider which aspect might be more challenging rather than beneficial in a mobile-first approach.
---
Better alignment with current web usage trends.
### --feedback--
Consider which aspect might be more challenging rather than beneficial in a mobile-first approach.
---
Simplified design process for complex features.
---
Enhanced content prioritization.
### --feedback--
Consider which aspect might be more challenging rather than beneficial in a mobile-first approach.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672cf07a2b9796eb49719e03
title: What Are Media Breakpoints, and What Are Common Breakpoints in Modern Design?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-media-breakpoints
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the primary purpose of media breakpoints in responsive web design?
## --answers--
To change the website's color scheme on different devices.
### --feedback--
Think about how websites adapt to various device sizes.
---
To adjust the layout and content for different screen sizes.
---
To increase the website's loading speed on mobile devices
### --feedback--
Think about how websites adapt to various device sizes.
---
To add new features for desktop users.
### --feedback--
Think about how websites adapt to various device sizes.
## --video-solution--
2
## --text--
In a mobile-first approach, which type of media query is typically used for breakpoints?
## --answers--
`max-width`
### --feedback--
Consider how styles are added as screen sizes increase from mobile to desktop.
---
`min-width`
---
`max-height`
### --feedback--
Consider how styles are added as screen sizes increase from mobile to desktop.
---
`min-height`
### --feedback--
Consider how styles are added as screen sizes increase from mobile to desktop.
## --video-solution--
2
## --text--
Which of the following is NOT typically considered a common breakpoint in modern responsive design?
## --answers--
`768px` (tablets).
### --feedback--
Think about which screen resolution is less commonly targeted in responsive designs.
---
`1024px` (small desktops).
### --feedback--
Think about which screen resolution is less commonly targeted in responsive designs.
---
`480px` (large smartphones).
### --feedback--
Think about which screen resolution is less commonly targeted in responsive designs.
---
`2560px` (4K displays).
## --video-solution--
4

121
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-styling-forms/672aa791227e755da64cf240.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672aa791227e755da64cf240
title: What Are Some Best Practices for Styling Text Inputs?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-some-best-practices-for-styling-text-inputs
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
When styling text inputs, which of the following is NOT mentioned as a key consideration for accessibility?
## --answers--
Font size.
### --feedback--
The lecture focuses on visual aspects of accessibility for text inputs.
---
Color contrast with the background.
### --feedback--
The lecture focuses on visual aspects of accessibility for text inputs.
---
Placeholder text readability.
### --feedback--
The lecture focuses on visual aspects of accessibility for text inputs.
---
Animation speed of focus transitions.
## --video-solution--
4
## --text--
What is recommended regarding the resizing ability of a `textarea` input?
## --answers--
Remove the ability to resize for a consistent look.
### --feedback--
The lecture mentions preserving certain functionalities for user convenience.
---
Allow the user to resize it.
---
Automatically resize based on content length.
### --feedback--
The lecture mentions preserving certain functionalities for user convenience.
---
Lock the size after initial page load.
### --feedback--
The lecture mentions preserving certain functionalities for user convenience.
## --video-solution--
2
## --text--
How should the error state of an input be styled?
## --answers--
It should be identical to the focus state.
### --feedback--
The lecture discusses the importance of clear visual feedback for different input states.
---
It should be subtle to not distract the user.
### --feedback--
The lecture discusses the importance of clear visual feedback for different input states.
---
It should be noticeable and distinct from the focus indicator.
---
It should only be indicated through text, not visual styling.
### --feedback--
The lecture discusses the importance of clear visual feedback for different input states.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-styling-forms/672bc9d9eecb65cdf63491de.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672bc9d9eecb65cdf63491de
title: "When Should You Use appearance: none to Deal with Issues Styling Search Inputs and Checkboxes?"
challengeType: 11
videoId: nVAaxZ34khk
dashedName: when-should-you-use-appearance-none-to-deal-with-issues-styling-search-inputs-and-checkboxes
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the primary purpose of using `appearance: none` on `input` elements?
## --answers--
To improve page load times.
### --feedback--
Think about what this property allows developers to do with `input` elements.
---
To hide the `input` element completely.
### --feedback--
Think about what this property allows developers to do with `input` elements.
---
To remove default browser styling and allow custom styling.
---
To make the `input` element non-interactive.
### --feedback--
Think about what this property allows developers to do with `input` elements.
## --video-solution--
3
## --text--
Which of the following is NOT mentioned as a benefit of using `appearance: none` on `input` elements?
## --answers--
Creating consistent cross-platform styling.
### --feedback--
The lecture discusses several advantages, but one of these is not among them.
---
Allowing custom indicators for checkboxes.
### --feedback--
The lecture discusses several advantages, but one of these is not among them.
---
Improving the security of form submissions.
---
Enabling larger tap targets on mobile devices.
### --feedback--
The lecture discusses several advantages, but one of these is not among them.
## --video-solution--
3
## --text--
What potential drawback of using `appearance: none` is mentioned in the lecture?
## --answers--
It may cause the input to stop functioning.
### --feedback--
The lecture mentions a caveat related to default interactive components.
---
It can significantly slow down the page.
### --feedback--
The lecture mentions a caveat related to default interactive components.
---
It might remove important default features like focus indicators.
---
It's not supported in all modern browsers.
### --feedback--
The lecture mentions a caveat related to default interactive components.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-styling-forms/672bca660aa9f9ce9b2b2787.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672bca660aa9f9ce9b2b2787
title: What Are Common Issues When Styling Special Input Elements?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-common-issues-when-styling-special-input-elements
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is one of the main challenges in styling special input elements like `datetime-local` and `color`?
## --answers--
These elements are not supported in all browsers.
### --feedback--
The lecture mentions a specific aspect of these elements that makes styling difficult.
---
They rely on complex pseudo elements for their functionality.
---
They require additional JavaScript to function properly.
### --feedback--
The lecture mentions a specific aspect of these elements that makes styling difficult.
---
They cannot be styled using CSS at all.
### --feedback--
The lecture mentions a specific aspect of these elements that makes styling difficult.
## --video-solution--
2
## --text--
Why might CSS written to style a special input element work differently across browsers?
## --answers--
Different browsers use different JavaScript engines.
### --feedback--
The lecture points out a specific reason for inconsistent styling across browsers.
---
The default styling is browser-dependent.
---
Some browsers don't support these input types.
### --feedback--
The lecture points out a specific reason for inconsistent styling across browsers.
---
CSS properties work differently in each browser.
### --feedback--
The lecture points out a specific reason for inconsistent styling across browsers.
## --video-solution--
2
## --text--
What approach do many developers take to address the challenges of styling complex input elements?
## --answers--
They avoid using these input types altogether.
### --feedback--
The lecture mentions a common solution that developers often resort to.
---
They use browser-specific CSS prefixes.
### --feedback--
The lecture mentions a common solution that developers often resort to.
---
They rely on JavaScript libraries or custom components.
---
They use only inline styles for these elements.
### --feedback--
The lecture mentions a common solution that developers often resort to.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-browsing-the-web-effectively/672aa5bd69657d56ab49ec8a.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672aa5bd69657d56ab49ec8a
title: What Are Some of the Common Web Browsers Available Today and How Do You Install One?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-some-of-the-common-web-browsers-available-today
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
Which of the following is NOT one of the most popular web browsers as of 2024?
## --answers--
Microsoft Edge
### --feedback--
This browser used to be popular, but has reached end-of-life and was replaced by Microsoft Edge.
---
Firefox
### --feedback--
This browser used to be popular, but has reached end-of-life and was replaced by Microsoft Edge.
---
Google Chrome
### --feedback--
This browser used to be popular, but has reached end-of-life and was replaced by Microsoft Edge.
---
Internet Explorer
## --video-solution--
4
## --text--
What is the default web browser that typically comes pre-installed on a Mac operating system?
## --answers--
Microsoft Edge
### --feedback--
Windows comes with Microsoft Edge, and Linux frequently comes with Firefox.
---
Firefox
### --feedback--
Windows comes with Microsoft Edge, and Linux frequently comes with Firefox.
---
Google Chrome
### --feedback--
Windows comes with Microsoft Edge, and Linux frequently comes with Firefox.
---
Safari
## --video-solution--
4
## --text--
Which of the following is a method for installing a web browser on a computer?
## --answers--
Using the operating system's package manager.
### --feedback--
There are multiple ways to install a browser.
---
Downloading directly from the browser's website.
### --feedback--
There are multiple ways to install a browser.
---
Both A and B.
---
None of the above.
### --feedback--
There are multiple ways to install a browser.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-browsing-the-web-effectively/672ac96491845f43ea9a26d7.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672ac96491845f43ea9a26d7
title: What Is the Difference Between a Web Browser, a Website, and a Search Engine?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-the-difference-between-a-web-browser-a-website-and-a-search-engine
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the primary function of a web browser?
## --answers--
To create websites.
### --feedback--
Think about what you use a web browser for in your daily internet activities.
---
To index web pages.
### --feedback--
Think about what you use a web browser for in your daily internet activities.
---
To access and navigate the World Wide Web.
---
To rank search results.
### --feedback--
Think about what you use a web browser for in your daily internet activities.
## --video-solution--
3
## --text--
Which of the following is NOT a component of a website?
## --answers--
Domain name.
### --feedback--
Consider the elements that make up a website versus those that are part of other web technologies.
---
Web pages.
### --feedback--
Consider the elements that make up a website versus those that are part of other web technologies.
---
Multimedia content.
### --feedback--
Consider the elements that make up a website versus those that are part of other web technologies.
---
Rendering engine.
## --video-solution--
4
## --text--
What is the main purpose of a search engine's web crawler?
## --answers--
To systematically browse and index web content.
---
To display web pages to users.
### --feedback--
Think about how search engines gather information about websites across the internet.
---
To block pop-up advertisements.
### --feedback--
Think about how search engines gather information about websites across the internet.
---
To create domain names for websites.
### --feedback--
Think about how search engines gather information about websites across the internet.
## --video-solution--
1

121
curriculum/challenges/english/25-front-end-development/lecture-browsing-the-web-effectively/672ac9705b07a64439b73b59.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672ac9705b07a64439b73b59
title: How to Use a Search Engine Effectively to Achieve Optimal Results
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-to-use-a-search-engine-effectively-to-achieve-optimal-results
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the purpose of using quotation marks around a search query?
## --answers--
To search for results containing any of the words.
### --feedback--
Think about how quotation marks are used in writing to represent exactly what the author said.
---
To search for an exact phrase.
---
To exclude certain words from the search.
### --feedback--
Think about how quotation marks are used in writing to represent exactly what the author said.
---
To search within a specific website.
### --feedback--
Think about how quotation marks are used in writing to represent exactly what the author said.
## --video-solution--
2
## --text--
Which symbol is used to exclude a term from search results?
## --answers--
`+`
### --feedback--
Remember the example given for searching for freeCodeCamp content while excluding curriculum-related results.
---
`
### --feedback--
Remember the example given for searching for freeCodeCamp content while excluding curriculum-related results.
---
`:`
### --feedback--
Remember the example given for searching for freeCodeCamp content while excluding curriculum-related results.
---
`-`
## --video-solution--
4
## --text--
What does the `site:` operator do in a search query?
## --answers--
Excludes a specific site from search results.
### --feedback--
Recall the example using `site:freecodecamp.org/news` to search only the freeCodeCamp News site.
---
Searches for websites similar to the specified site.
### --feedback--
Recall the example using `site:freecodecamp.org/news` to search only the freeCodeCamp News site.
---
Limits the search to a specific website or domain.
---
Ranks the specified site higher in search results.
### --feedback--
Recall the example using `site:freecodecamp.org/news` to search only the freeCodeCamp News site.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-common-design-tools/672aa7005c24e45bbd53b20d.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672aa7005c24e45bbd53b20d
title: What Are Design Briefs and How Do Developers Work with Them?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-design-briefs
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
What is a design brief?
## --answers--
A timeline of past project milestones.
### --feedback--
Think about goals and objectives of a project.
---
A schedule of meetings and deadlines for a project team.
### --feedback--
Think about goals and objectives of a project.
---
A manual on how to use specific software tools.
### --feedback--
Think about goals and objectives of a project.
---
A document that outlines the objectives, goals, and requirements of a project.
## --video-solution--
4
## --text--
Why is it important to define the scope for a project in a design brief?
## --answers--
To plan the project's social media marketing strategy.
### --feedback--
Think about budget and timeline.
---
To ensure that the project stays on track and within budget.
---
To select the software tools for team collaboration.
### --feedback--
Think about budget and timeline.
---
To choose the best color palette for the project.
### --feedback--
Think about budget and timeline.
## --video-solution--
2
## --text--
What is the role of the developer in a project?
## --answers--
To change the timeline and deliverables in the design brief.
### --feedback--
Remember that the developer should not go against what was agreed upon in the design brief.
---
To take the design brief and turn it into a working product.
---
To change the design brief to meet the developer's preferences.
### --feedback--
Remember that the developer should not go against what was agreed upon in the design brief.
---
To change the project scope to include more features.
### --feedback--
Remember that the developer should not go against what was agreed upon in the design brief.
## --video-solution--
2

121
curriculum/challenges/english/25-front-end-development/lecture-common-design-tools/672bb619f0d4538d0528760d.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672bb619f0d4538d0528760d
title: What Are Some Common Tools Developers Should Know About That Are Used by Designers in the Industry?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-some-common-tools-developers-should-know-about
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Which of these best describes Sketch?
## --answers--
It is difficult to learn and use.
### --feedback--
Think about what makes a design tool efficient for both developers and designers.
---
It is primarily used for backend development.
### --feedback--
Think about what makes a design tool efficient for both developers and designers.
---
It is known for its intuitive interface and simplicity, ideal for quick prototypes.
---
It is rarely used for creating UIs or web layouts.
### --feedback--
Think about what makes a design tool efficient for both developers and designers.
## --video-solution--
3
## --text--
Which of these is not a feature of Figma?
## --answers--
Vector-based design.
### --feedback--
Consider the primary focus of Figma as a design tool.
---
Automatic layout.
### --feedback--
Consider the primary focus of Figma as a design tool.
---
Real-time collaboration.
### --feedback--
Consider the primary focus of Figma as a design tool.
---
Coding environment.
## --video-solution--
4
## --text--
What is Adobe XD known for?
## --answers--
Complex video editing features.
### --feedback--
Consider Adobe XD’s primary use in UI/UX design and its relationship with other Adobe tools.
---
Seamless integration with other Adobe apps like Photoshop and Illustrator.
---
Being a raster-based image editor.
### --feedback--
Consider Adobe XD’s primary use in UI/UX design and its relationship with other Adobe tools.
---
Specialized 3D modeling capabilities.
### --feedback--
Consider Adobe XD’s primary use in UI/UX design and its relationship with other Adobe tools.
## --video-solution--
2

133
curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672aa62178d5ff57fe4f98e0.md Normal file
View File

@@ -0,0 +1,133 @@
---
id: 672aa62178d5ff57fe4f98e0
title: What Is CSS Specificity, and the Specificity for Inline, Internal, and External CSS?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-css-specificity-and-the-specificity-for-inline-internal-and-external-css
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
Which CSS specificity is higher?
## --answers--
A class selector.
### --feedback--
This style is applied directly to the element.
---
An inline style.
---
An ID selector.
### --feedback--
This style is applied directly to the element.
---
A type selector.
### --feedback--
This style is applied directly to the element.
## --video-solution--
2
## --text--
In the hierarchy of CSS specificity, which has the lowest priority?
## --answers--
Class selectors.
### --feedback--
This type of CSS is the most generic selector.
---
Inline styles.
### --feedback--
This type of CSS is the most generic selector.
---
Universal selectors.
---
ID selectors.
### --feedback--
This type of CSS is the most generic selector.
## --video-solution--
3
## --text--
What color will the text be in the following example?
```html
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p style="color: blue;">This text</p>
</body>
```
## --answers--
`blue`
---
`red`
### --feedback--
Consider the highest specificity.
---
`yellow`
### --feedback--
Consider the highest specificity.
---
`green`
### --feedback--
Consider the highest specificity.
## --video-solution--
1

143
curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e7eca8a4322306d15f8.md Normal file
View File

@@ -0,0 +1,143 @@
---
id: 672b8e7eca8a4322306d15f8
title: What Is the Universal Selector, and What Is Its Specificity?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-the-universal-selector
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the specificity value of the universal selector (`*`)?
## --answers--
(1, 0, 0, 0)
### --feedback--
This selector has the lowest specificity.
---
(0, 1, 0, 0)
### --feedback--
This selector has the lowest specificity.
---
(0, 0, 1, 0)
### --feedback--
This selector has the lowest specificity.
---
(0, 0, 0, 0)
## --video-solution--
4
## --text--
What is a common use case for the universal selector?
## --answers--
To apply styles to a specific element.
### --feedback--
Think about how you can affect all elements with one rule.
---
To reset or normalize styles across all elements.
---
To target elements with a specific class.
### --feedback--
Think about how you can affect all elements with one rule.
---
To override inline styles.
### --feedback--
Think about how you can affect all elements with one rule.
## --video-solution--
2
## --text--
Given the following CSS, what will be the color of the text?
```html
<head>
<style>
* {
color: blue;
}
p {
color: red;
}
.highlight {
color: green;
}
#unique {
color: purple;
}
</style>
</head>
<body>
<p id="unique" class="highlight">This text</p>
</body>
```
## --answers--
`blue`
### --feedback--
Consider the highest specificity.
---
`red`
### --feedback--
Consider the highest specificity.
---
`green`
### --feedback--
Consider the highest specificity.
---
`purple`
## --video-solution--
4

137
curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e8adcc27e235a154231.md Normal file
View File

@@ -0,0 +1,137 @@
---
id: 672b8e8adcc27e235a154231
title: What Is the Specificity for Type Selectors?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-the-specificity-for-type-selectors
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the specificity value of a type selector (e.g., `div`)?
## --answers--
(1, 0, 0, 0)
### --feedback--
This selector targets elements based on their tag name.
---
(0, 1, 0, 0)
### --feedback--
This selector targets elements based on their tag name.
---
(0, 0, 1, 0)
### --feedback--
This selector targets elements based on their tag name.
---
(0, 0, 0, 1)
## --video-solution--
4
## --text--
Which of the following has a lower specificity than a type selector?
## --answers--
A class selector.
### --feedback--
This selector targets all elements and has the lowest specificity.
---
An ID selector.
### --feedback--
This selector targets all elements and has the lowest specificity.
---
An Inline style.
### --feedback--
This selector targets all elements and has the lowest specificity.
---
A Universal selector.
## --video-solution--
4
## --text--
Given the following CSS, what will be the color of the text?
```html
<head>
<style>
* {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<p>This text</p>
</body>
```
## --answers--
`blue`
### --feedback--
Consider the specificity of the selectors.
---
`red`
---
`green`
### --feedback--
Consider the specificity of the selectors.
---
`purple`
### --feedback--
Consider the specificity of the selectors.
## --video-solution--
2

140
curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e9892eafe238d6513a5.md Normal file
View File

@@ -0,0 +1,140 @@
---
id: 672b8e9892eafe238d6513a5
title: What Is the Specificity for Class Selectors?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-the-specificity-for-class-selectors
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the specificity value of a class selector (e.g., `.example`)?
## --answers--
(1, 0, 0, 0)
### --feedback--
This selector targets elements with a specific class name.
---
(0, 1, 0, 0)
### --feedback--
This selector targets elements with a specific class name.
---
(0, 0, 1, 0)
---
(0, 0, 0, 1)
### --feedback--
This selector targets elements with a specific class name.
## --video-solution--
3
## --text--
Which of the following selectors has a higher specificity than a class selector?
## --answers--
A type selector.
### --feedback--
This selector targets elements with a unique identifier.
---
An ID selector.
---
A universal selector.
### --feedback--
This selector targets elements with a unique identifier.
---
A pseudo-element.
### --feedback--
This selector targets elements with a unique identifier.
## --video-solution--
2
## --text--
Given the following CSS, what will be the color of the text?
```html
<head>
<style>
.highlight {
color: green;
}
p {
color: blue;
}
p.highlight {
color: red;
}
</style>
</head>
<body>
<p class="highlight">This text</p>
</body>
```
## --answers--
`green`
### --feedback--
Consider the specificity of the combined selectors.
---
`blue`
### --feedback--
Consider the specificity of the combined selectors.
---
`red`
---
`purple`
### --feedback--
Consider the specificity of the combined selectors.
## --video-solution--
3

140
curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md Normal file
View File

@@ -0,0 +1,140 @@
---
id: 672b8ea434ceac23cc90f337
title: What Is the Specificity for ID Selectors?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-the-specificity-for-id-selectors
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the specificity value of an ID selector (e.g., `#example`)?
## --answers--
(1, 0, 0, 0)
### --feedback--
This selector targets elements with a specific, unique identifier.
---
(0, 1, 0, 0)
---
(0, 0, 1, 0)
### --feedback--
This selector targets elements with a specific, unique identifier.
---
(0, 0, 0, 1)
### --feedback--
This selector targets elements with a specific, unique identifier.
## --video-solution--
2
## --text--
Which of the following selectors has a lower specificity than an ID selector?
## --answers--
A class selector.
---
An inline style.
### --feedback--
This selector targets elements with a shared class name.
---
An attribute selector.
### --feedback--
This selector targets elements with a shared class name.
---
None of the above.
### --feedback--
This selector targets elements with a shared class name.
## --video-solution--
1
## --text--
Given the following CSS, what will be the color of the text?
```html
<head>
<style>
#unique {
color: purple;
}
.highlight {
color: green;
}
p {
color: blue;
}
</style>
</head>
<body>
<p id="unique" class="highlight">This text</p>
</body>
```
## --answers--
`green`
### --feedback--
Consider the highest specificity.
---
`blue`
### --feedback--
Consider the highest specificity.
---
`red`
### --feedback--
Consider the highest specificity.
---
`purple`
## --video-solution--
4

140
curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f1399cabc2406c3227f.md Normal file
View File

@@ -0,0 +1,140 @@
---
id: 672b8f1399cabc2406c3227f
title: What Is the important Keyword, and What Are the Best Practices for Using It?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-the-important-keyword
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What does the `!important` keyword do in CSS?
## --answers--
It increases the specificity value of a selector.
### --feedback--
This keyword forces a style to be applied.
---
It applies a style regardless of other rules' specificity.
---
It decreases the specificity value of a selector.
### --feedback--
This keyword forces a style to be applied.
---
It overrides only inline styles.
### --feedback--
This keyword forces a style to be applied.
## --video-solution--
2
## --text--
When should the `!important` keyword be used?
## --answers--
As the primary method for styling elements.
### --feedback--
Think about maintainability and debugging.
---
To override third-party styles or as a temporary fix.
---
In every CSS rule for consistency.
### --feedback--
Think about maintainability and debugging.
---
To increase specificity.
### --feedback--
Think about maintainability and debugging.
## --video-solution--
2
## --text--
Given the following CSS, what will be the color of the text?
```html
<head>
<style>
p {
color: blue;
}
.highlight {
color: green !important;
}
#unique {
color: purple;
}
</style>
</head>
<body>
<p id="unique" class="highlight">This text</p>
</body>
```
## --answers--
`blue`
### --feedback--
Consider the impact of the `!important` keyword.
---
`green`
---
`purple`
### --feedback--
Consider the impact of the `!important` keyword.
---
`red`
### --feedback--
Consider the impact of the `!important` keyword.
## --video-solution--
2

121
curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f23511adf25646b4236.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672b8f23511adf25646b4236
title: How Does the Cascade Algorithm Work at a High Level?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-does-the-cascade-algorithm-work-at-a-high-level
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the first step the Cascade Algorithm takes when determining which styles to apply?
## --answers--
It checks the specificity of the rules.
### --feedback--
Think about how the browser decides which rules could apply to an element.
---
It filters the rules by relevance.
---
It looks for `!important` declarations.
### --feedback--
Think about how the browser decides which rules could apply to an element.
---
It applies the last rule in the CSS.
### --feedback--
Think about how the browser decides which rules could apply to an element.
## --video-solution--
2
## --text--
What will happen if you try to apply a conflicting set of styles to two paragraph rules?
## --answers--
Parts of the styles from each rule will apply.
### --feedback--
Review the end of the video where the example was shown for this.
---
The program will crash.
### --feedback--
Review the end of the video where the example was shown for this.
---
The last styles will be applied.
---
None of the styles will apply.
### --feedback--
Review the end of the video where the example was shown for this.
## --video-solution--
3
## --text--
Which of the following factors does not influence the Cascade Algorithm's decision on which CSS rule to apply?
## --answers--
The specificity of the selectors.
### --feedback--
Consider what the Cascade Algorithm evaluates when resolving style conflicts.
---
The scoping proximity of the rules.
### --feedback--
Consider what the Cascade Algorithm evaluates when resolving style conflicts.
---
Whether the `!important` keyword is used.
### --feedback--
Consider what the Cascade Algorithm evaluates when resolving style conflicts.
---
The `color` property of the CSS rule.
## --video-solution--
4

134
curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f382370e025aadd3f4e.md Normal file
View File

@@ -0,0 +1,134 @@
---
id: 672b8f382370e025aadd3f4e
title: How Does Inheritance Work with CSS at a High Level?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-does-inheritance-work-with-css-at-a-high-level
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Which of the following CSS properties is typically inherited by default?
## --answers--
`padding`
### --feedback--
Think about the properties that are commonly applied to text.
---
`border`
### --feedback--
Think about the properties that are commonly applied to text.
---
`color`
---
`background`
### --feedback--
Think about the properties that are commonly applied to text.
## --video-solution--
3
## --text--
What keyword can be used to force a child element to inherit a property from its parent?
## --answers--
`default`
### --feedback--
This keyword explicitly tells the child to take the parent's value.
---
`inherit`
---
`initial`
### --feedback--
This keyword explicitly tells the child to take the parent's value.
---
`none`
### --feedback--
This keyword explicitly tells the child to take the parent's value.
## --video-solution--
2
## --text--
Given the following CSS, what will be the color of the `span` text inside the `p`?
```html
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a <span>test</span>.</p>
</body>
```
## --answers--
`blue`
---
`red`
### --feedback--
Consider how inheritance works between parent and child elements.
---
`green`
### --feedback--
Consider how inheritance works between parent and child elements.
---
`black`
### --feedback--
Consider how inheritance works between parent and child elements.
## --video-solution--
1

121
curriculum/challenges/english/25-front-end-development/lecture-debugging-css/672aa8c1ad423562a38b484d.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672aa8c1ad423562a38b484d
title: How Can You Use the DevTools Inspection Tool and CSS Validators to Debug Your CSS?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-can-you-use-the-devtools-inspection-tool
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
What is a primary advantage of using browser DevTools for CSS debugging?
## --answers--
It automatically fixes all CSS errors.
### --feedback--
Think about the immediate feedback DevTools provides when working with styles.
---
It allows real-time inspection and modification of CSS.
---
It compresses your CSS files.
### --feedback--
Think about the immediate feedback DevTools provides when working with styles.
---
It generates new CSS rules for you.
### --feedback--
Think about the immediate feedback DevTools provides when working with styles.
## --video-solution--
2
## --text--
Which of the following is NOT a typical feature of CSS validators?
## --answers--
Checking CSS against official specifications.
### --feedback--
Consider what CSS validators are primarily designed to do.
---
Reporting syntax errors.
### --feedback--
Consider what CSS validators are primarily designed to do.
---
Providing suggestions for improving CSS performance.
---
Identifying missing semicolons.
### --feedback--
Consider what CSS validators are primarily designed to do.
## --video-solution--
3
## --text--
How can the device emulation feature in DevTools assist in CSS debugging?
## --answers--
It automatically adjusts your CSS for all devices.
### --feedback--
Think about the challenges of responsive design and how this feature might help.
---
It shows how your site looks on various screen sizes and devices.
---
It creates separate CSS files for each device.
### --feedback--
Think about the challenges of responsive design and how this feature might help.
---
It optimizes images for mobile devices.
### --feedback--
Think about the challenges of responsive design and how this feature might help.
## --video-solution--
2

157
curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md Normal file
View File

@@ -0,0 +1,157 @@
---
id: 672aa6441bcd3758e9f52ae0
title: How Do You Space List Items Using margin or line-height?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-do-you-space-list-items-using-margin-or-line-height
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
Which CSS property would you use to create space between list items by adjusting the space outside each `li` element?
## --answers--
`padding`
### --feedback--
This property affects the space inside the element's `border`.
---
`line-height`
### --feedback--
This property affects the spacing between lines of text, not the space outside the element.
---
`margin`
---
`border`
### --feedback--
This property affects the element's `border`, not the space outside it.
## --video-solution--
3
## --text--
Given the CSS rule `li { margin-bottom: 15px; }`, what effect does this have on list items?
## --answers--
Adds `15px` of space inside each list item.
### --feedback--
This rule affects the space outside the list item, not inside.
---
Adds `15px` of space between the content and `border` of each list item.
### --feedback--
This rule affects the space outside the `border` of each list item.
---
Adds `15px` of space below each list item.
---
Adds `15px` of space above each list item.
### --feedback--
This rule adds space below each list item, not above.
## --video-solution--
3
## --text--
Given the CSS rule `li { margin-bottom: 15px; }`, what effect does this have on list items?
## --answers--
Adds `15px` of space inside each list item.
### --feedback--
This rule affects the space outside the list item, not inside.
---
Adds `15px` of space between the content and `border` of each list item.
### --feedback--
This rule affects the space outside the `border` of each list item.
---
Adds `15px` of space below each list item.
---
Adds `15px` of space above each list item.
### --feedback--
This rule adds space below each list item, not above.
## --video-solution--
3
## --text--
What does the `line-height` property control in CSS?
## --answers--
The `width` of the content.
### --feedback--
This is controlled by the `width` property, not `line-height`.
---
The space inside the `border` of an element.
### --feedback--
This is controlled by properties like `padding`, not `line-height`.
---
The vertical spacing between lines of text within an element.
---
The space outside the `border` of an element.
### --feedback--
This is controlled by properties like `margin`, not `line-height`.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b951b1bf78038b1a2a0e7.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672b951b1bf78038b1a2a0e7
title: How Do the Different list-style Properties Work?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-do-the-different-list-style-properties-work
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Which `list-style` property would you use to change the bullet points to circles in an unordered list?
## --answers--
`list-style-image`
### --feedback--
Think about which property directly changes the bullet or numbering style.
---
`list-style-position`
### --feedback--
Think about which property directly changes the bullet or numbering style.
---
`list-style-type`
---
`list-style`
### --feedback--
Think about which property directly changes the bullet or numbering style.
## --video-solution--
3
## --text--
If you want the bullets of a list to align with the text content, which `list-style-position` value should you use?
## --answers--
`outside`
### --feedback--
Consider how the bullet position affects text wrapping within list items.
---
`inside`
---
`center`
### --feedback--
Consider how the bullet position affects text wrapping within list items.
---
`left`
### --feedback--
Consider how the bullet position affects text wrapping within list items.
## --video-solution--
2
## --text--
Which property allows you to replace the default bullet with a custom image?
## --answers--
`list-style-type`
### --feedback--
Think about how to add a visual element to your bullet points.
---
`list-style-position`
### --feedback--
Think about how to add a visual element to your bullet points.
---
`list-style`
### --feedback--
Think about how to add a visual element to your bullet points.
---
`list-style-image`
## --video-solution--
4

121
curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b952d3a5c603908841971.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672b952d3a5c603908841971
title: Why Are Default Link Styles Important for Usability on the Web?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: why-are-default-link-styles-important-for-usability-on-the-web
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Why is it important to have a distinct color for visited links?
## --answers--
It makes the website more colorful.
### --feedback--
Think about how this feature affects a user's navigation through a website.
---
It helps users keep track of pages they've already visited.
---
Visited links are more important than unvisited links.
### --feedback--
Think about how this feature affects a user's navigation through a website.
---
It's a legal requirement for websites.
### --feedback--
Think about how this feature affects a user's navigation through a website.
## --video-solution--
2
## --text--
Which of the following is NOT typically a default style for links in most browsers?
## --answers--
Blue color for unvisited links.
### --feedback--
Consider the most common visual characteristics of links you see on websites.
---
Underline for all links.
### --feedback--
Consider the most common visual characteristics of links you see on websites.
---
Purple color for visited links.
### --feedback--
Consider the most common visual characteristics of links you see on websites.
---
Bold font weight for all links.
## --video-solution--
4
## --text--
When customizing link styles, what is an important principle to maintain?
## --answers--
All links must be blue.
### --feedback--
Think about the main purpose of link styles in terms of usability.
---
Links should always be underlined.
### --feedback--
Think about the main purpose of link styles in terms of usability.
---
Links should be clearly distinguishable from regular text.
---
Visited and unvisited links must have the same style.
### --feedback--
Think about the main purpose of link styles in terms of usability.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b9538c25634394ceb7b8f.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672b9538c25634394ceb7b8f
title: How Do You Style the Different Link States?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-do-you-style-the-different-link-states
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Which CSS pseudo-class is used to style links that have not been visited?
## --answers--
`:visited`
### --feedback--
Think about the default appearance of a link before it has been clicked.
---
`:link`
---
`:hover`
### --feedback--
Think about the default appearance of a link before it has been clicked.
---
`:active`
### --feedback--
Think about the default appearance of a link before it has been clicked.
## --video-solution--
2
## --text--
What visual change does the hover state typically involve in CSS?
## --answers--
The link becomes larger.
### --feedback--
Consider what happens when you move your cursor over a link.
---
The link text color changes.
---
The link text becomes bold.
### --feedback--
Consider what happens when you move your cursor over a link.
---
The link text is underlined.
### --feedback--
Consider what happens when you move your cursor over a link.
## --video-solution--
2
## --text--
Which CSS pseudo-class would you use to add a visible outline around a link when it is navigated to using the keyboard?
## --answers--
`:link`
### --feedback--
Think about the state that indicates keyboard navigation.
---
`:hover`
### --feedback--
Think about the state that indicates keyboard navigation.
---
`:focus`
---
`:active`
### --feedback--
Think about the state that indicates keyboard navigation.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672aa578a2129554d4675049
title: What Are the Basic Parts of a Computer?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-the-basic-parts-of-a-computer
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
What is RAM?
## --answers--
Long term memory.
### --feedback--
Think about short term data storage.
---
Short term memory.
---
The main circuit board.
### --feedback--
Think about short term data storage.
---
A video card.
### --feedback--
Think about short term data storage.
## --video-solution--
2
## --text--
What does CPU stand for?
## --answers--
Centered Protocol Unit.
### --feedback--
Review the beginning of the video where this was discussed.
---
City Processing Unit.
### --feedback--
Review the beginning of the video where this was discussed.
---
Central Processing Unit.
---
Central Pixel Unit.
### --feedback--
Review the beginning of the video where this was discussed.
## --video-solution--
3
## --text--
What is the network card responsible for?
## --answers--
Rendering visuals on the computer screen.
### --feedback--
Review the end of the video for the answer.
---
Playing sound on the computer speakers.
### --feedback--
Review the end of the video for the answer.
---
Connecting the computer to the internet.
---
Storing short term memory.
### --feedback--
Review the end of the video for the answer
## --video-solution--
3

33
curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md Normal file
View File

@@ -0,0 +1,33 @@
---
id: 672ab82c1a9bbd0e3aabc39d
title: How Can You Effectively Work With Your Keyboard, Mouse, and Other Pointing Devices
challengeType: 11
videoId: nVAaxZ34khk
dashedName: how-to-effectively-work-with-your-keyboard-mouse-and-other-pointing-devices
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
How to Effectively Work With Your Keyboard, Mouse, and Other Pointing Devices question?
## --answers--
Answer 1
---
Answer 2
---
Answer 3
## --video-solution--
1

33
curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md Normal file
View File

@@ -0,0 +1,33 @@
---
id: 672ab83c4297910eade53c2e
title: What Are the Different Types of Internet Service Providers?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-the-different-types-of-internet-service-providers
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What Are the Different Types of Internet Service Providers? question?
## --answers--
Answer 1
---
Answer 2
---
Answer 3
## --video-solution--
1

121
curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672ab849aa1ef70eefd29364
title: What Are Safe Ways to Sign Into Your Computer?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-safe-ways-to-sign-into-your-computer
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Which of the follow is considered an unsafe password?
## --answers--
`@dlkj(2***1`
### --feedback--
The more complex the password, the more secure it is.
---
`12345`
---
`#sj1--`
### --feedback--
The more complex the password, the more secure it is.
---
`7!9@2`
### --feedback--
The more complex the password, the more secure it is.
## --video-solution--
2
## --text--
Why is two-factor authentication (2FA) important?
## --answers--
It stores your passwords securely.
### --feedback--
Think about the extra layer of security.
---
It automatically fixes broken passwords.
### --feedback--
Think about the extra layer of security.
---
It guarantees that your accounts can't be hacked.
### --feedback--
Think about the extra layer of security.
---
To ensure the person trying to access the account is the authorized user.
## --video-solution--
4
## --text--
What are features like Touch ID and Windows Hello used for?
## --answers--
To automatically generate passwords for you.
### --feedback--
Think about the different types of authentication and recognition used here.
---
To store your passwords securely.
### --feedback--
Think about the different types of authentication and recognition used here.
---
To sign into your computer using your fingerprint or facial recognition.
---
To guarantee that your accounts can't be hacked.
### --feedback--
Think about the different types of authentication and recognition used here.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672ab8573f32480f192aaae1
title: What Are the Different Types of Tools Professional Developers Use?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-the-different-types-of-tools-professional-developers-use
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Why do developers go for computers with fast processing power?
## --answers--
To watch the computer do all the work for them.
### --feedback--
Think about what enhances performance for demanding development tasks.
---
To handle resource-intensive tasks.
---
To play high-end games.
### --feedback--
Think about what enhances performance for demanding development tasks.
---
To watch movies without a glitch.
### --feedback--
Think about what enhances performance for demanding development tasks.
## --video-solution--
2
## --text--
What provides code completion, debugging, and integrated terminal for developers?
## --answers--
Code editors and IDEs.
---
Testing frameworks.
### --feedback--
Look out for the tools that offer a comprehensive development environment.
---
Package managers.
### --feedback--
Look out for the tools that offer a comprehensive development environment.
---
Git.
### --feedback--
Look out for the tools that offer a comprehensive development environment.
## --video-solution--
1
## --text--
Which tools help developers test their code to ensure it works as intended?
## --answers--
Code editors and IDEs.
### --feedback--
Think about tools that run automated checks on the code.
---
Operating systems.
### --feedback--
Think about tools that run automated checks on the code.
---
Version control systems
### --feedback--
Think about tools that run automated checks on the code.
---
Testing frameworks.
## --video-solution--
4

121
curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672aa86da9937560d3dfe3d6
title: What Are Common Use Cases for Using Floats, and How Do They Work?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-common-use-cases-for-using-floats
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
What is a common use case for using floats in CSS?
## --answers--
Centering an element vertically.
### --feedback--
Think about how floats were originally used.
---
Wrapping text around images.
---
Creating a fixed header.
### --feedback--
Think about how floats were originally used.
---
Applying a background color.
### --feedback--
Think about how floats were originally used.
## --video-solution--
2
## --text--
Which CSS property is often used to clear floats and maintain the layout flow?
## --answers--
`float`
### --feedback--
Consider the property that stops text from wrapping around floated elements.
---
`margin`
### --feedback--
Consider the property that stops text from wrapping around floated elements.
---
`clear`
---
`padding`
### --feedback--
Consider the property that stops text from wrapping around floated elements.
## --video-solution--
3
## --text--
How does applying `float: left;` to an element affect its position in the layout?
## --answers--
The element is centered on the page.
### --feedback--
Consider what happens when an element is floated to the left.
---
The element is pushed to the right side of its container.
### --feedback--
Consider what happens when an element is floated to the left.
---
The element is removed from the normal document flow and moves to the left side of its container.
---
The element stays in the normal document flow and aligns with the top of its container.
### --feedback--
Consider what happens when an element is floated to the left.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672c3a84fb8d4613776cc99e
title: What Is Relative Positioning, and How Does This Differ from the Default Static Positioning?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-relative-positioning
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Which of the following is the default positioning for all elements?
## --answers--
`absolute`
### --feedback--
Think about what kind of positioning doesn’t need any special CSS declaration.
---
`relative`
### --feedback--
Think about what kind of positioning doesn’t need any special CSS declaration.
---
`fixed`
### --feedback--
Think about what kind of positioning doesn’t need any special CSS declaration.
---
`static`
## --video-solution--
4
## --text--
What does relative positioning do to an element?
## --answers--
It moves it from the normal document flow.
### --feedback--
Relative positioning shifts the element, but only within its original spot in the layout.
---
It moves it relative to its normal position.
---
Fixes it to the viewport.
### --feedback--
Relative positioning shifts the element, but only within its original spot in the layout.
---
It stacks it above other elements.
### --feedback--
Relative positioning shifts the element, but only within its original spot in the layout.
## --video-solution--
2
## --text--
How does relative positioning differ from static positioning?
## --answers--
Relative positioning removes the element from the document flow.
### --feedback--
Static positioning is passive, while relative positioning allows you to move an element around.
---
Static positioning allows elements to be shifted from their default position.
### --feedback--
Static positioning is passive, while relative positioning allows you to move an element around.
---
Relative positioning allows you to shift an element without disrupting the document flow.
---
Static positioning fixes the element in place like a background image.
### --feedback--
Static positioning is passive, while relative positioning allows you to move an element around.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672c3a8fac7c5613b4bb75de
title: What Is Absolute Positioning, and How Does It Work?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-absolute-positioning
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What happens when an element is positioned absolutely in CSS?
## --answers--
The element is placed in its normal document flow.
### --feedback--
Absolute positioning removes the element from the normal document flow.
---
The element overlaps other elements and is placed in its own layer.
---
The element is hidden.
### --feedback--
Absolute positioning removes the element from the normal document flow.
---
The element is moved to the top of the page.
### --feedback--
Absolute positioning removes the element from the normal document flow.
## --video-solution--
2
## --text--
How do you move an absolutely positioned element 30px away from the top and left edges of its containing block?
## --answers--
Set `top: 30px` and `left: 30px`.
---
Set `margin-top: 30px` and `margin-left: 30px`.
### --feedback--
Use the `top` and `left` properties.
---
Set `position: relative`.
### --feedback--
Use the `top` and `left` properties.
---
Set `padding: 30px`.
### --feedback--
Use the `top` and `left` properties.
## --video-solution--
1
## --text--
If no positioned ancestor is found, where is an absolutely positioned element placed?
## --answers--
Relative to the body.
### --feedback--
Consider what the element falls back to when no positioned ancestor is available.
---
Relative to the closest fixed element.
### --feedback--
Consider what the element falls back to when no positioned ancestor is available.
---
Relative to the initial containing block (usually the browser’s viewport).
---
It stays in the same place.
### --feedback--
Consider what the element falls back to when no positioned ancestor is available.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672c3a9d32c56113fcaedf24
title: What Is Fixed and Sticky Positioning, and How Does It Differ from Absolute Positioning?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-fixed-and-sticky-positioning
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the main difference between `fixed` and `sticky` positioning?
## --answers--
`fixed` stays in place relative to the viewport, `sticky` moves based on scroll position.
---
`sticky` stays in place relative to the viewport, `fixed` moves based on scroll position.
### --feedback--
One becomes `fixed` after scrolling past a threshold.
---
Both `fixed` and `sticky` behave the same way.
### --feedback--
One becomes `fixed` after scrolling past a threshold.
---
Neither works for headers or navigation bars.
### --feedback--
One becomes `fixed` after scrolling past a threshold.
## --video-solution--
1
## --text--
What property must be defined for `sticky` positioning to work?
## --answers--
`position: absolute`
### --feedback--
It's a hybrid of `fixed` and `relative` positioning.
---
`position: fixed`
### --feedback--
It's a hybrid of `fixed` and `relative` positioning.
---
`position: sticky`
---
`z-index`
### --feedback--
It's a hybrid of `fixed` and `relative` positioning.
## --video-solution--
3
## --text--
How does `fixed` positioning differ from `absolute` positioning?
## --answers--
`fixed` is relative to the viewport, while `absolute` is relative to the nearest positioned ancestor.
---
`fixed` positioning doesn't allow scrolling.
### --feedback--
Think about what stays visible when scrolling.
---
`absolute` positioning keeps the element within the normal document flow.
### --feedback--
Think about what stays visible when scrolling.
---
`fixed` positioning hides the element when scrolled.
### --feedback--
Think about what stays visible when scrolling.
## --video-solution--
1

121
curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672c3aa9bc3a481425cb52b3
title: What Is the Z-Index Property, and How Does It Work to Control the Stacking of Positioned Elements?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-the-z-index-property
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What does the `z-index` property control in CSS?
## --answers--
The color of an element.
### --feedback--
`z-index` is responsible for how elements overlap visually.
---
The vertical stacking order of positioned elements.
---
The size of an element.
### --feedback--
`z-index` is responsible for how elements overlap visually.
---
The horizontal alignment of text.
### --feedback--
`z-index` is responsible for how elements overlap visually.
## --video-solution--
2
## --text--
In order for the `z-index` property to work, what must be true about the element?
## --answers--
It must have a `fixed` width.
### --feedback--
Consider what enables an element to be placed in a stacking context.
---
It must have a `position` value other than `static`.
---
It must have a `display` value of `block`.
### --feedback--
Consider what enables an element to be placed in a stacking context.
---
It must have a background color set.
### --feedback--
Consider what enables an element to be placed in a stacking context.
## --video-solution--
2
## --text--
Which `z-index` value places an element on top of all others?
## --answers--
`z-index: 0;`
### --feedback--
Think about which number is highest and how `z-index` works.
---
`z-index: 5;`
---
`z-index: auto;`
### --feedback--
Think about which number is highest and how `z-index` works.
---
`z-index: -1;`
### --feedback--
Think about which number is highest and how z-index works.
## --video-solution--
2

121
curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672aa6ee9011775b27e23399.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672aa6ee9011775b27e23399
title: What Is User-Centered Design?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-user-centered-design
---
# --description--
Watch the video lecture and answer the questions below.
# --questions--
## --text--
What is the main goal of user-centred design?
## --answers--
To make the website visually appealing.
### --feedback--
User-centred design means focusing on the user.
---
To prioritize the developer's preferences.
### --feedback--
User-centred design means focusing on the user.
---
To create a website that is intuitive and efficient for users.
---
To reduce development costs.
### --feedback--
User-centred design means focusing on the user.
## --video-solution--
3
## --text--
Why is it important to consider target demographics in user-centered design?
## --answers--
To determine the website's color scheme.
### --feedback--
The demographics of your audience might influence the design.
---
To choose appropriate design elements for the intended audience.
---
To decide on the website's content.
### --feedback--
The demographics of your audience might influence the design.
---
To set the price of products or services.
### --feedback--
The demographics of your audience might influence the design.
## --video-solution--
2
## --text--
What is one way to gather information about user behavior on your website?
## --answers--
Conduct in-person interviews.
### --feedback--
Automated measurements of user interactions provide a broad and unbiased data set.
---
Use social media polls.
### --feedback--
Automated measurements of user interactions provide a broad and unbiased data set.
---
Implement analytics tools like Google Analytics.
---
Ask friends and family for opinions.
### --feedback--
Automated measurements of user interactions provide a broad and unbiased data set.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bafd715f6ba77d57f3ec0.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672bafd715f6ba77d57f3ec0
title: What Are User Requirements, User Research, and Testing?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-user-research-and-testing-and-user-requirements
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the primary purpose of user research?
## --answers--
To increase sales of a product.
### --feedback--
User research involves studying the people who use your product.
---
To measure user needs, behaviours, and pain points.
---
To develop new features for an application.
### --feedback--
User research involves studying the people who use your product.
---
To conduct A/B testing on a website.
### --feedback--
User research involves studying the people who use your product.
## --video-solution--
2
## --text--
Which of the following is NOT a typical method of user research or testing?
## --answers--
Net Promoter Score (NPS).
### --feedback--
The lecture discusses several methods, but one common research method is not explicitly mentioned.
---
Exit interviews.
### --feedback--
The lecture discusses several methods, but one common research method is not explicitly mentioned.
---
A/B testing.
### --feedback--
The lecture discusses several methods, but one common research method is not explicitly mentioned.
---
Version Control.
## --video-solution--
4
## --text--
What is the difference between functional and non-functional user requirements?
## --answers--
Functional requirements are important, while non-functional requirements are optional.
### --feedback--
The lecture mentions that requirements can be categorised into two types based on what they dictate about the application.
---
Functional requirements define how the application should work, while non-functional requirements define how it should behave.
---
Functional requirements are set by stakeholders, while non-functional requirements come from user research.
### --feedback--
The lecture mentions that requirements can be categorised into two types based on what they dictate about the application.
---
Functional requirements are static, while non-functional requirements change over time.
### --feedback--
The lecture mentions that requirements can be categorised into two types based on what they dictate about the application.
## --video-solution--
2

121
curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672bafe4ef812b78696b0e27
title: What Are Best Practices for Designing a Dark Mode Feature?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-best-practices-for-designing-a-dark-mode-feature
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is dark mode?
## --answers--
A feature that changes the default light color scheme to a dark color scheme.
---
A feature that changes the default dark color scheme to a light color scheme.
### --feedback--
The name of the feature is a clue to its purpose.
---
A feature that changes the default font size to a larger size.
### --feedback--
The name of the feature is a clue to its purpose.
---
A feature that changes the default layout of a web page.
### --feedback--
The name of the feature is a clue to its purpose.
## --video-solution--
1
## --text--
Why is not a good idea to use pure black backgrounds with white text in dark mode?
## --answers--
Pure black backgrounds can cause security issues.
### --feedback--
Think about the high contrast between pure black and white and how it can affect readability.
---
Pure black backgrounds can cause performance issues.
### --feedback--
Think about the high contrast between pure black and white and how it can affect readability.
---
Pure black backgrounds with white text are too subtle.
### --feedback--
Think about the high contrast between pure black and white and how it can affect readability.
---
Pure black backgrounds with white text can be too harsh on the eyes.
## --video-solution--
4
## --text--
What types of colors are suggested to use in dark mode?
## --answers--
Red colors.
### --feedback--
Think about the intensity of colors and how they can affect readability in dark mode.
---
Desaturated colors.
---
Bright colors.
### --feedback--
Think about the intensity of colors and how they can affect readability in dark mode.
---
Pastel colors.
### --feedback--
Think about the intensity of colors and how they can affect readability in dark mode.
## --video-solution--
2

121
curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672baff13bc5b3789691c75c.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672baff13bc5b3789691c75c
title: What Are Best Practices for Designing Breadcrumbs?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-best-practices-for-designing-breadcrumbs
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What are breadcrumbs?
## --answers--
A navigation aid that shows the user where they are in the site's hierarchy.
---
A type of container for images.
### --feedback--
Review the beginning of this video for the answer.
---
A navigation aid only found on mobile sites.
### --feedback--
Review the beginning of this video for the answer.
---
A type of container for text.
### --feedback--
Review the beginning of this video for the answer.
## --video-solution--
1
## --text--
When should you use breadcrumbs on your site?
## --answers--
You should never use breadcrumbs.
### --feedback--
Think about the benefits of breadcrumbs and when they would be most useful.
---
If your site has a deep hierarchy for navigation.
---
If your site is simple and has a shallow hierarchy.
### --feedback--
Think about the benefits of breadcrumbs and when they would be most useful.
---
You should only use them for mobile sites.
### --feedback--
Think about the benefits of breadcrumbs and when they would be most useful.
## --video-solution--
2
## --text--
Which of the following is a common separator for breadcrumbs?
## --answers--
`>>>>`
### --feedback--
Review the middle of this video for the answer.
---
`||||`
### --feedback--
Review the middle of this video for the answer.
---
`/`
---
`&&&`
### --feedback--
Review the middle of this video for the answer.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672baffc684be178dd02fa06
title: What Are Best Practices for Designing Cards?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-best-practices-for-designing-cards
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
Why is it important to have a simple card design?
## --answers--
You want users to have a good user experience and digest the information easily.
---
You want user to be confused.
### --feedback--
Think about the user experience
---
You want user to be overwhelmed.
### --feedback--
Think about the user experience
---
You want user to be frustrated.
### --feedback--
Think about the user experience
## --video-solution--
3
## --text--
Why is it important to have good color hierarchy on your card design?
## --answers--
To make it difficult for the user to understand the information.
### --feedback--
Think about what information is most important on the card
---
To make the site perform better.
### --feedback--
Think about what information is most important on the card
---
To highlight the most important information on the card.
---
To make the card visually cluttered.
### --feedback--
Think about what information is most important on the card
## --video-solution--
3
## --text--
What are the advantages of using high quality media on your card design?
## --answers--
There are no advantages.
### --feedback--
Think about how high quality media can impact the user experience
---
Users will leave the site immediately.
### --feedback--
Think about how high quality media can impact the user experience
---
It will speed up the performance of the site.
### --feedback--
Think about how high quality media can impact the user experience
---
Users will trust the quality of your products and services.
## --video-solution--
4

125
curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md Normal file
View File

@@ -0,0 +1,125 @@
---
id: 672bb009952c7a7904a750cb
title: What Are Best Practices for Designing Infinite Scrolls?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-best-practices-for-designing-infinite-scrolls
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is infinite scrolling?
## --answers--
A design pattern to change the scrollbar on the page.
### --feedback--
Review the beginning of the video when this concept is introduced.
---
A design pattern to change size of the page.
### --feedback--
Review the beginning of the video when this concept is introduced.
---
A design pattern to change the background color of the page.
### --feedback--
Review the beginning of the video when this concept is introduced.
---
A design pattern that breaks up content into pages.
### --feedback--
Review the beginning of the video when this concept is introduced.
## --video-solution--
3
## --text--
What is the role of a "load more" button in infinite scrolling?
## --answers--
It reloads the page.
### --feedback--
The name implies what it's role is.
---
To give users control over when they want to see more content.
---
It allows users to go back to previously loaded content.
### --feedback--
The name implies what it's role is.
---
It restricts the amount of data that can be loaded.
### --feedback--
The name implies what it's role is.
## --video-solution--
2
## --text--
Why is it important to keep the footer accessible while using an infinite scroll?
## --answers--
It helps make the make the colors stand out more on the page.
### --feedback--
Think about what information the user should have access to
---
It helps make the page load faster.
### --feedback--
Think about what information the user should have access to
---
It is not important to keep the footer accessible.
### --feedback--
Think about what information the user should have access to
---
So the user can access the links and important information from the footer at all times.
## --video-solution--
4

121
curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb015cfc889794359c4e0.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672bb015cfc889794359c4e0
title: What Are Best Practices for Designing Modal Dialogs?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-best-practices-for-designing-modal-dialogs
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the purpose of dimming the content behind a modal dialog?
## --answers--
To save battery life on mobile devices.
### --feedback--
The lecture mentions a specific reason for this visual effect.
---
To help users visually identify the area they should interact with.
---
To make the website load faster.
### --feedback--
The lecture mentions a specific reason for this visual effect.
---
To prevent users from seeing sensitive information.
### --feedback--
The lecture mentions a specific reason for this visual effect.
## --video-solution--
2
## --text--
What does CTA stand for in the context of modal design?
## --answers--
Click To Activate.
### --feedback--
The lecture provides the full term for this acronym when discussing prominent buttons in modals.
---
Complete The Action.
### --feedback--
The lecture provides the full term for this acronym when discussing prominent buttons in modals.
---
Call-to-Action.
---
Close The Application.
### --feedback--
The lecture provides the full term for this acronym when discussing prominent buttons in modals.
## --video-solution--
3
## --text--
Why is it important to include a close button in a modal dialog?
## --answers--
It's required by law in some countries.
### --feedback--
The lecture emphasizes the importance of allowing users to back out of the modal.
---
To prevent the modal from crashing the browser.
### --feedback--
The lecture emphasizes the importance of allowing users to back out of the modal.
---
To give users an option to exit the modal and resume their previous activity.
---
To make the modal look more professional.
### --feedback--
The lecture emphasizes the importance of allowing users to back out of the modal.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb02009ffc0797ca567ab.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672bb02009ffc0797ca567ab
title: What Are Best Practices for Progress Indication on Forms, Registration, and Setup?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-best-practices-for-progress-indication-on-forms-registration-and-setup
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the primary goal of using a progress indication in forms or registration processes?
## --answers--
To entertain users while they complete the form.
### --feedback--
Focus on the purpose of providing users with information about their progress.
---
To inform users about how far they are in the process and what is left to do.
---
To reduce the number of steps in the process.
### --feedback--
Focus on the purpose of providing users with information about their progress.
---
To speed up the form submission process.
### --feedback--
Focus on the purpose of providing users with information about their progress.
## --video-solution--
2
## --text--
Why is it important to allow users to go back to previous steps in a form or registration process?
## --answers--
To let users change their answers or review previous entries.
---
To make the form more complex.
### --feedback--
Think about why users might need to revisit earlier parts of the process.
---
To limit the number of steps in the process.
### --feedback--
Think about why users might need to revisit earlier parts of the process.
---
To increase the time users spend on the site.
### --feedback--
Think about why users might need to revisit earlier parts of the process.
## --video-solution--
1
## --text--
What should you consider when placing a progress indication section on a webpage?
## --answers--
It should be as small as possible to avoid distracting the user.
### --feedback--
Consider how users will interact with and understand the progress indication.
---
It should be easy to find and clearly labeled with context like section titles or percentages.
---
It should be hidden until the user reaches the final step.
### --feedback--
Consider how users will interact with and understand the progress indication.
---
It should only include a visual progress bar with no text.
### --feedback--
Consider how users will interact with and understand the progress indication.
## --video-solution--
2

121
curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672bb02ecb230779bbbaccd9
title: What Are Best Practices for Designing Shopping Carts?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-are-best-practices-for-designing-shopping-carts
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is a crucial aspect of designing a shopping cart that can impact the shopping experience and sales?
## --answers--
The color of the shopping cart icon.
### --feedback--
Consider what feature helps users always be aware of their cart and its contents.
---
The position of the shopping cart on the page.
---
The number of items in the cart.
### --feedback--
Consider what feature helps users always be aware of their cart and its contents.
---
The brand of the e-commerce website.
### --feedback--
Consider what feature helps users always be aware of their cart and its contents.
## --video-solution--
2
## --text--
How should users be able to update the quantity of items in their cart?
## --answers--
By contacting customer service.
### --feedback--
Look for a method that allows users to directly change the number of items they have.
---
By using a dropdown menu.
### --feedback--
Look for a method that allows users to directly change the number of items they have.
---
By entering a new number in a quantity input field.
---
By adding a new item with the desired quantity.
### --feedback--
Look for a method that allows users to directly change the number of items they have.
## --video-solution--
3
## --text--
What is an important feature to include in the shopping cart to help users proceed with their purchase?
## --answers--
A "Save for Later" option.
### --feedback--
Think about what helps users finalize their purchase and complete the transaction smoothly.
---
Multiple call-to-action buttons.
### --feedback--
Think about what helps users finalize their purchase and complete the transaction smoothly.
---
A clear and prominent checkout button.
---
An option to chat with a sales representative.
### --feedback--
Think about what helps users finalize their purchase and complete the transaction smoothly.
## --video-solution--
3

121
curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb03999f39379f67d8972.md Normal file
View File

@@ -0,0 +1,121 @@
---
id: 672bb03999f39379f67d8972
title: What Is Progressive Disclosure?
challengeType: 11
videoId: nVAaxZ34khk
dashedName: what-is-progressive-disclosure
---
# --description--
Watch the lecture video and answer the questions below.
# --questions--
## --text--
What is the main purpose of using progressive disclosure in design?
## --answers--
To increase the number of features visible at all times.
### --feedback--
Consider how progressive disclosure helps manage the amount of information shown to users.
---
To overwhelm users with all available options.
### --feedback--
Consider how progressive disclosure helps manage the amount of information shown to users.
---
To only show users relevant content based on their current activity.
---
To make the user interface more complex.
### --feedback--
Consider how progressive disclosure helps manage the amount of information shown to users.
## --video-solution--
3
## --text--
How does Google implement progressive disclosure on its search page?
## --answers--
By displaying all search options at once.
### --feedback--
Think about how Google provides advanced features without overwhelming users.
---
By offering an advanced search option that reveals more features when needed.
---
By hiding the search bar behind a modal dialog.
### --feedback--
Think about how Google provides advanced features without overwhelming users.
---
By providing a new search page for each query.
### --feedback--
Think about how Google provides advanced features without overwhelming users.
## --video-solution--
2
## --text--
What should be avoided to ensure a good user experience with progressive disclosure?
## --answers--
Providing a single, clear access point to additional information.
### --feedback--
Reflect on how having multiple options or points of access might impact user experience.
---
Using multiple access points to confuse users.
---
Keeping important information visible at all times.
### --feedback--
Reflect on how having multiple options or points of access might impact user experience.
---
Ensuring that additional information is available when needed.
### --feedback--
Reflect on how having multiple options or points of access might impact user experience.
## --video-solution--
2

Some files were not shown because too many files have changed in this diff Show More