This text
+ +``` + +## --answers-- + +`blue` + +--- + +`red` + +### --feedback-- + +Consider the highest specificity. + +--- + +`yellow` + +### --feedback-- + +Consider the highest specificity. + +--- + +`green` + +### --feedback-- + +Consider the highest specificity. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e7eca8a4322306d15f8.md b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e7eca8a4322306d15f8.md new file mode 100644 index 00000000000..eb741472421 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e7eca8a4322306d15f8.md @@ -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 + + + + +This text
+ +``` + +## --answers-- + +`blue` + +### --feedback-- + +Consider the highest specificity. + +--- + +`red` + +### --feedback-- + +Consider the highest specificity. + +--- + +`green` + +### --feedback-- + +Consider the highest specificity. + +--- + +`purple` + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e8adcc27e235a154231.md b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e8adcc27e235a154231.md new file mode 100644 index 00000000000..3aca93f8a43 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e8adcc27e235a154231.md @@ -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 + + + + +This text
+ +``` + +## --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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e9892eafe238d6513a5.md b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e9892eafe238d6513a5.md new file mode 100644 index 00000000000..0d1c0010c4d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e9892eafe238d6513a5.md @@ -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 + + + + +This text
+ +``` + +## --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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md new file mode 100644 index 00000000000..ee5b5394f94 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md @@ -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 + + + + +This text
+ +``` + +## --answers-- + +`green` + +### --feedback-- + +Consider the highest specificity. + +--- + +`blue` + +### --feedback-- + +Consider the highest specificity. + +--- + +`red` + +### --feedback-- + +Consider the highest specificity. + +--- + +`purple` + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f1399cabc2406c3227f.md b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f1399cabc2406c3227f.md new file mode 100644 index 00000000000..af55f8cba86 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f1399cabc2406c3227f.md @@ -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 + + + + +This text
+ +``` + +## --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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f23511adf25646b4236.md b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f23511adf25646b4236.md new file mode 100644 index 00000000000..6ef67f0a322 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f23511adf25646b4236.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f382370e025aadd3f4e.md b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f382370e025aadd3f4e.md new file mode 100644 index 00000000000..920e6932980 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f382370e025aadd3f4e.md @@ -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 + + + + +This is a test.
+ +``` + +## --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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-debugging-css/672aa8c1ad423562a38b484d.md b/curriculum/challenges/english/25-front-end-development/lecture-debugging-css/672aa8c1ad423562a38b484d.md new file mode 100644 index 00000000000..7abad4f2b11 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-debugging-css/672aa8c1ad423562a38b484d.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md b/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md new file mode 100644 index 00000000000..881e0d49107 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b951b1bf78038b1a2a0e7.md b/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b951b1bf78038b1a2a0e7.md new file mode 100644 index 00000000000..6792aac0856 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b951b1bf78038b1a2a0e7.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b952d3a5c603908841971.md b/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b952d3a5c603908841971.md new file mode 100644 index 00000000000..9bffc25dd52 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b952d3a5c603908841971.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b9538c25634394ceb7b8f.md b/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b9538c25634394ceb7b8f.md new file mode 100644 index 00000000000..a33b46a04bc --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-styling-lists-and-links/672b9538c25634394ceb7b8f.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md new file mode 100644 index 00000000000..11fc3425862 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md new file mode 100644 index 00000000000..eeb5d5a72d8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md new file mode 100644 index 00000000000..4181cf2b877 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md new file mode 100644 index 00000000000..dba5d2ea481 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md new file mode 100644 index 00000000000..18c74684ad0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md new file mode 100644 index 00000000000..f4336f8d2d8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md new file mode 100644 index 00000000000..edff7974ad2 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md new file mode 100644 index 00000000000..5b2646ed2c4 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md new file mode 100644 index 00000000000..180cf0866c1 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md new file mode 100644 index 00000000000..1a25bd0249e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672aa6ee9011775b27e23399.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672aa6ee9011775b27e23399.md new file mode 100644 index 00000000000..694977d33a6 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672aa6ee9011775b27e23399.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bafd715f6ba77d57f3ec0.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bafd715f6ba77d57f3ec0.md new file mode 100644 index 00000000000..0feca6135d5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bafd715f6ba77d57f3ec0.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md new file mode 100644 index 00000000000..256ab3b8d78 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672baff13bc5b3789691c75c.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672baff13bc5b3789691c75c.md new file mode 100644 index 00000000000..eecc5c7ed94 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672baff13bc5b3789691c75c.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md new file mode 100644 index 00000000000..9aeb18c944f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md new file mode 100644 index 00000000000..3537f8a032e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb015cfc889794359c4e0.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb015cfc889794359c4e0.md new file mode 100644 index 00000000000..a0ed3743f32 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb015cfc889794359c4e0.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb02009ffc0797ca567ab.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb02009ffc0797ca567ab.md new file mode 100644 index 00000000000..79078d5a7b0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb02009ffc0797ca567ab.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md new file mode 100644 index 00000000000..3ca874be53d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb03999f39379f67d8972.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb03999f39379f67d8972.md new file mode 100644 index 00000000000..bac509e72ef --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb03999f39379f67d8972.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb04476b1997a1da8b79b.md b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb04476b1997a1da8b79b.md new file mode 100644 index 00000000000..e8e6503579c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb04476b1997a1da8b79b.md @@ -0,0 +1,121 @@ +--- +id: 672bb04476b1997a1da8b79b +title: What Is Deferred and Lazy Registration? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-deferred-and-lazy-registration +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +How does lazy registration impact user interaction with an application? + +## --answers-- + +It immediately limits user access until they complete a registration form. + +### --feedback-- + +The goal is to let users experience the application first. + +--- + +It encourages users to engage with content before asking for their registration details. + +--- + +It requires users to provide payment information before accessing any features. + +### --feedback-- + +The goal is to let users experience the application first. + +--- + +It makes the registration process mandatory before users can view any part of the application. + +### --feedback-- + +The goal is to let users experience the application first. + +## --video-solution-- + +2 + +## --text-- + +What is one of the main benefits of lazy registration in UI design? + +## --answers-- + +Users can immediately make purchases without registering. + +### --feedback-- + +Think about the value proposition of the application. + +--- + +Users can see the value of the application before deciding to register. + +--- + +Users are required to register to view any content. + +### --feedback-- + +Think about the value proposition of the application. + +--- + +Users can bypass all security protocols during registration. + +### --feedback-- + +Think about the value proposition of the application. + +## --video-solution-- + +2 + +## --text-- + +Which of the following is an example of a platform that uses lazy registration? + +## --answers-- + +A banking app requiring users to register before browsing financial products. + +### --feedback-- + +This platform allows users to access most of its features without needing to register immediately. + +--- + +An e-commerce site allowing users to browse products and add items to a cart before registering. + +--- + +An email service that asks users to register before reading any emails. + +### --feedback-- + +This platform allows users to access most of its features without needing to register immediately. + +--- + +A health app that requires registration to access general health tips. + +### --feedback-- + +This platform allows users to access most of its features without needing to register immediately. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md new file mode 100644 index 00000000000..1f8945c6d48 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md @@ -0,0 +1,121 @@ +--- +id: 672aa6c9e379285acca5a2aa +title: What Are Common Design Terms to Help You Communicate with Designers? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-common-design-terms-to-help-you-communicate-with-designers +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +Which design principle refers to the visual weight distribution within a layout? + +## --answers-- + +Alignment + +### --feedback-- + +Think about how the elements in a design are arranged to create a sense of equilibrium with symmetrical or asymmetrical arrangements. + +--- + +Balance + +--- + +Hierarchy + +### --feedback-- + +Think about how the elements in a design are arranged to create a sense of equilibrium with symmetrical or asymmetrical arrangements. + +--- + +Contrast + +### --feedback-- + +Think about how the elements in a design are arranged to create a sense of equilibrium with symmetrical or asymmetrical arrangements. + +## --video-solution-- + +2 + +## --text-- + +What is the term for the empty space around the elements in a design? + +## --answers-- + +Layout + +### --feedback-- + +Think about the area that separates these elements. + +--- + +Hierarchy + +### --feedback-- + +Think about the area that separates these elements. + +--- + +White Space + +--- + +Contrast + +### --feedback-- + +Think about the area that separates these elements. + +## --video-solution-- + +3 + +## --text-- + +Which design principle establishes the order of importance of the elements in a design? + +## --answers-- + +Alignment + +### --feedback-- + +Think about how the elements are arranged and styled to create a sense of importance. + +--- + +Contrast + +### --feedback-- + +Think about how the elements are arranged and styled to create a sense of importance. + +--- + +Hierarchy + +--- + +Proximity + +### --feedback-- + +Think about how the elements are arranged and styled to create a sense of importance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md new file mode 100644 index 00000000000..1551af776c5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md @@ -0,0 +1,121 @@ +--- +id: 672baa97f2990e6631d522e7 +title: How Do You Create Good Background and Foreground Contrast in Your Designs? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-do-you-create-good-background-and-foreground-contrast-in-your-designs +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is contrast in the context of web design? + +## --answers-- + +The brightness of colors on a webpage. + +### --feedback-- + +Think about how the lecture defines contrast in relation to colors. + +--- + +The difference between two colors and how easily they can be distinguished. + +--- + +The number of colors used on a webpage. + +### --feedback-- + +Think about how the lecture defines contrast in relation to colors. + +--- + +The sharpness of images on a webpage. + +### --feedback-- + +Think about how the lecture defines contrast in relation to colors. + +## --video-solution-- + +2 + +## --text-- + +According to the Web Content Accessibility Guidelines (WCAG), what is the minimum contrast ratio for text to meet the AA standard? + +## --answers-- + +3:1 + +### --feedback-- + +Recall the specific numbers mentioned for different accessibility standards. + +--- + +4.5:1 + +--- + +7:1 + +### --feedback-- + +Recall the specific numbers mentioned for different accessibility standards. + +--- + +21:1 + +### --feedback-- + +Recall the specific numbers mentioned for different accessibility standards. + +## --video-solution-- + +2 + +## --text-- + +Which of the following is NOT mentioned as an aspect that impacts the contrast ratio? + +## --answers-- + +Hue + +### --feedback-- + +Remember the three aspects discussed in the article that can be adjusted to improve contrast. + +--- + +Saturation + +### --feedback-- + +Remember the three aspects discussed in the article that can be adjusted to improve contrast. + +--- + +Lightness + +### --feedback-- + +Remember the three aspects discussed in the article that can be adjusted to improve contrast. + +--- + +Opacity + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md new file mode 100644 index 00000000000..9ce1a83576e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md @@ -0,0 +1,121 @@ +--- +id: 672baaa62d4b46667a8ac869 +title: What Is the Importance of Good Visual Hierarchy in Design? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-importance-of-good-visual-hierarchy-in-design +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of visual hierarchy in web design? + +## --answers-- + +To make the website more colorful. + +### --feedback-- + +Think about how visual hierarchy affects the way users consume information on a webpage. + +--- + +To guide the viewer's attention in a specific order. + +--- + +To reduce the amount of content on a page. + +### --feedback-- + +Think about how visual hierarchy affects the way users consume information on a webpage. + +--- + +To increase the loading speed of a website. + +### --feedback-- + +Think about how visual hierarchy affects the way users consume information on a webpage. + +## --video-solution-- + +2 + +## --text-- + +Which of the following is NOT mentioned as a technique for creating visual hierarchy in the article? + +## --answers-- + +Using different font sizes for headings. + +### --feedback-- + +Recall the specific examples provided in the article for improving visual hierarchy. + +--- + +Implementing a callout box for important information. + +### --feedback-- + +Recall the specific examples provided in the article for improving visual hierarchy. + +--- + +Applying animation effects to elements. + +--- + +Creating distinct sections for navigation and footer. + +### --feedback-- + +Recall the specific examples provided in the article for improving visual hierarchy. + +## --video-solution-- + +3 + +## --text-- + +How can a strong visual hierarchy potentially impact user conversion? + +## --answers-- + +By making the website more aesthetically pleasing. + +### --feedback-- + +Remember the example with the CTA button and its relationship to the work history section. + +--- + +By reducing the number of clicks required to navigate the site. + +### --feedback-- + +Remember the example with the CTA button and its relationship to the work history section. + +--- + +By drawing attention to important information and Call-to-Action (CTA) buttons. + +--- + +By increasing the website's search engine ranking. + +### --feedback-- + +Remember the example with the CTA button and its relationship to the work history section. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md new file mode 100644 index 00000000000..81c143605e3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md @@ -0,0 +1,121 @@ +--- +id: 672baab2a0c3df66ad987b94 +title: How Does Scale Work in Design? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-does-scale-work-in-design +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of using correct scale in web design? + +## --answers-- + +To make everything the same size. + +### --feedback-- + +Think about how scale affects visual hierarchy and user attention. + +--- + +To guide users through content. + +--- + +To use as much space as possible. + +### --feedback-- + +Think about how scale affects visual hierarchy and user attention. + +--- + +To make text harder to read. + +### --feedback-- + +Think about how scale affects visual hierarchy and user attention. + +## --video-solution-- + +2 + +## --text-- + +Why might a large banner image be problematic on a mobile layout? + +## --answers-- + +It loads too slowly. + +### --feedback-- + +Consider how screen real estate differs between desktop and mobile devices. + +--- + +It's not visually appealing. + +### --feedback-- + +Consider how screen real estate differs between desktop and mobile devices. + +--- + +It takes up too much screen space. + +--- + +It's not interactive enough. + +### --feedback-- + +Consider how screen real estate differs between desktop and mobile devices. + +## --video-solution-- + +3 + +## --text-- + +What is an important consideration for scaling navigation elements on mobile devices? + +## --answers-- + +Making them as small as possible. + +### --feedback-- + +Think about the physical interaction users have with mobile devices. + +--- + +Ensuring they're easy to tap. + +--- + +Using bright colors. + +### --feedback-- + +Think about the physical interaction users have with mobile devices. + +--- + +Removing them entirely. + +### --feedback-- + +Think about the physical interaction users have with mobile devices. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md new file mode 100644 index 00000000000..4c758a00500 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md @@ -0,0 +1,121 @@ +--- +id: 672baabf16290b66e6b79a39 +title: How Does Alignment Work in Design? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-does-alignment-work-in-design +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is alignment in design? + +## --answers-- + +The process of adding borders to elements on a page. + +### --feedback-- + +Think about how elements are arranged on a page. + +--- + +The process of arranging text and images in a way that creates a visual connection between elements. + +--- + +The process of adding color to a design. + +### --feedback-- + +Think about how elements are arranged on a page. + +--- + +The process of creating a layout for a web page. + +### --feedback-- + +Think about how elements are arranged on a page. + +## --video-solution-- + +2 + +## --text-- + +What is left alignment commonly used for? + +## --answers-- + +It's commonly used with videos. + +### --feedback-- + +Think about which elements make sense to align to the left margin. + +--- + +It's commonly used with footer elements. + +### --feedback-- + +Think about which elements make sense to align to the left margin. + +--- + +It's commonly used with text where each element is aligned to the left margin. + +--- + +It's commonly used with lists. + +### --feedback-- + +Think about which elements make sense to align to the left margin. + +## --video-solution-- + +3 + +## --text-- + +What is vertical alignment? + +## --answers-- + +It's used to align elements along a vertical axis. + +--- + +It's used to align elements along a diagonal axis. + +### --feedback-- + +Vertical alignment is the opposite of horizontal alignment. + +--- + +It's used to align elements along a horizontal axis. + +### --feedback-- + +Vertical alignment is the opposite of horizontal alignment. + +--- + +It's used to align elements along a circular axis. + +### --feedback-- + +Vertical alignment is the opposite of horizontal alignment. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md new file mode 100644 index 00000000000..ce584565afa --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md @@ -0,0 +1,121 @@ +--- +id: 672baacb7f2f446728e77efe +title: What Is the Importance of Whitespace in Design? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-importance-of-whitespace-in-design +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is macro white space? + +## --answers-- + +The space between individual characters in a line of text. + +### --feedback-- + +Think about space seen around larger elements. + +--- + +The space around images only. + +### --feedback-- + +Think about space seen around larger elements. + +--- + +The space around text only. + +### --feedback-- + +Think about space seen around larger elements. + +--- + +The space between larger elements like images, text blocks and buttons. + +## --video-solution-- + +4 + +## --text-- + +What is active white space? + +## --answers-- + +Space that is only for text elements on a page. + +### --feedback-- + +Think about the purpose of active white space. + +--- + +Space that is for figure elements on a page. + +### --feedback-- + +Think about the purpose of active white space. + +--- + +Space that is for list items on a page. + +### --feedback-- + +Think about the purpose of active white space. + +--- + +Space that is intentionally created to help guide the user's eye and draw attention to certain elements on the page. + +## --video-solution-- + +4 + +## --text-- + +What is passive white space? + +## --answers-- + +Space that is left over after all the elements on a page have been placed. + +--- + +Space that is only for text elements on a page. + +### --feedback-- + +Think about how this space contrasts to active white space. + +--- + +Space that is for image elements on a page. + +### --feedback-- + +Think about how this space contrasts to active white space. + +--- + +Space that is for nav elements on a page. + +### --feedback-- + +Think about how this space contrasts to active white space. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md new file mode 100644 index 00000000000..6110ebd937b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md @@ -0,0 +1,121 @@ +--- +id: 672baad7bbc4f86762ca173e +title: What Are Best Practices for Working with Images in Your Designs? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-best-practices-for-working-with-images-in-your-designs +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is alignment in design? + +## --answers-- + +The distribution of visual weight in a design. + +### --feedback-- + +Think about how images are placed in the layout of a design. + +--- + +The order in which elements are viewed on a page. + +### --feedback-- + +Think about how images are placed in the layout of a design. + +--- + +The placement of elements in relation to each other. + +--- + +The size of an image in relation to the space it occupies. + +### --feedback-- + +Think about how images are placed in the layout of a design. + +## --video-solution-- + +3 + +## --text-- + +What is the purpose of using high resolution images in your designs? + +## --answers-- + +To make sure your images have the right color. + +### --feedback-- + +Think about how the final image will look on different devices. + +--- + +To ensure that your images look good on all devices. + +--- + +To make sure that your images are the right size. + +### --feedback-- + +Think about how the final image will look on different devices. + +--- + +To make sure that your images are accessible to all users. + +### --feedback-- + +Think about how the final image will look on different devices. + +## --video-solution-- + +2 + +## --text-- + +What is PPI? + +## --answers-- + +The number of pixels per one inch of an image. + +--- + +The number of points per one inch of an image. + +### --feedback-- + +Review the beginning of the video when PPI was first introduced. + +--- + +The number of pixels per one centimeter of an image. + +### --feedback-- + +Review the beginning of the video when PPI was first introduced. + +--- + +The number picas per one image. + +### --feedback-- + +Review the beginning of the video when PPI was first introduced. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md new file mode 100644 index 00000000000..4f2c2b1d43a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md @@ -0,0 +1,121 @@ +--- +id: 672baae11d06c867a16f64e1 +title: What Is Progressive Enhancement? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-progressive-enhancement +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the main goal of progressive enhancement? + +## --answers-- + +To ensure that the application is heavily reliant on JavaScript. + +### --feedback-- + +Think about accessible content for all users. + +--- + +To ensure all users, regardless of browser or device, can access the essential content and functionality of an application. + +--- + +To ensure that the latest complex features are available to all users. + +### --feedback-- + +Think about accessible content for all users. + +--- + +To ensure that the application is only available to users with the latest browsers. + +### --feedback-- + +Think about accessible content for all users. + +## --video-solution-- + +2 + +## --text-- + +Which of the following is NOT a core principle of progressive enhancement? + +## --answers-- + +A user's browser preferences should be respected. + +### --feedback-- + +Think about which option does not respect the user's preferences. + +--- + +All advanced layouts should be provided through external CSS stylesheets. + +### --feedback-- + +Think about which option does not respect the user's preferences. + +--- + +A user's browser preferences should be ignored. + +--- + +All advanced functionality should be provided through external JavaScript files. + +### --feedback-- + +Think about which option does not respect the user's preferences. + +## --video-solution-- + +3 + +## --text-- + +What is a common criticism of the progressive enhancement approach? + +## --answers-- + +It is not always realistic for applications that rely heavily on JavaScript for their functionality. + +--- + +It can result in a less engaging user experience on modern devices due to its focus on backward compatibility. + +### --feedback-- + +Think about the limitations of the approach and the amount of resources needed. + +--- + +It leads to bloated web pages with excessive code and resources that are not needed by modern browsers. + +### --feedback-- + +Think about the limitations of the approach and the amount of resources needed. + +--- + +It requires extensive browser testing on older, less capable browsers, which can be time-consuming and expensive. + +### --feedback-- + +Think about the limitations of the approach and the amount of resources needed. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md new file mode 100644 index 00000000000..0c5aa42be32 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md @@ -0,0 +1,121 @@ +--- +id: 672aa5e1f8b935577acfb2b9 +title: What Is CSS, and What Is Its Role on the Web? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-css +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of CSS in web development? + +## --answers-- + +To structure the content of web pages. + +### --feedback-- + +Think about how CSS relates to the visual aspects of a website. + +--- + +To handle server-side logic. + +### --feedback-- + +Think about how CSS relates to the visual aspects of a website. + +--- + +To separate the presentation of a document from its content. + +--- + +To manage database operations. + +### --feedback-- + +Think about how CSS relates to the visual aspects of a website. + +## --video-solution-- + +3 + +## --text-- + +How does CSS contribute to responsive web design? + +## --answers-- + +By handling user authentication. + +### --feedback-- + +Consider how websites adapt to different devices. + +--- + +By allowing adjustments to layout and styling based on device screen size. + +--- + +By improving server response time. + +### --feedback-- + +Consider how websites adapt to different devices. + +--- + +By compressing image files. + +### --feedback-- + +Consider how websites adapt to different devices. + +## --video-solution-- + +2 + +## --text-- + +What is meant by the "cascading" nature of CSS? + +## --answers-- + +It refers to the way water falls in a website background. + +### --feedback-- + +Think about how styles can be applied generally and then more specifically. + +--- + +It means CSS files must be arranged in a specific order. + +### --feedback-- + +Think about how styles can be applied generally and then more specifically. + +--- + +It allows styles to be inherited and overridden in a hierarchical manner. + +--- + +It describes how quickly CSS loads in a browser. + +### --feedback-- + +Think about how styles can be applied generally and then more specifically. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbbe2891564c4e316164.md b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbbe2891564c4e316164.md new file mode 100644 index 00000000000..ca7912aa025 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbbe2891564c4e316164.md @@ -0,0 +1,144 @@ +--- +id: 672acbbe2891564c4e316164 +title: What Is the Basic Anatomy of a CSS Rule? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-basic-anatomy-of-a-css-rule +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the purpose of a selector in a CSS rule? + +## --answers-- + +To apply styles to HTML elements. + +### --feedback-- + +The selector is the first part of the CSS rule and specifies the elements to be styled. + +--- + +To determine which HTML elements the rule will apply to. + +--- + +To define the specific style properties and values. + +### --feedback-- + +The selector is the first part of the CSS rule and specifies the elements to be styled. + +--- + +To create new HTML elements. + +### --feedback-- + +The selector is the first part of the CSS rule and specifies the elements to be styled. + +## --video-solution-- + +2 + +## --text-- + +Which of the following CSS rules correctly changes the text color of all paragraph elements to `blue`? + +## --answers-- + +```css +p { + background-color: blue; +} +``` + +### --feedback-- + +Look for the selector that targets all paragraph elements and the property that changes text color. + +--- + +```css +p { + color: blue; +} +``` + +--- + +```css +.p { + color: blue; +} +``` + +### --feedback-- + +Look for the selector that targets all paragraph elements and the property that changes text color. + +--- + +```css +#p { + color: blue; +} +``` + +### --feedback-- + +Look for the selector that targets all paragraph elements and the property that changes text color. + +## --video-solution-- + +2 + +## --text-- + +Given the following CSS rule, what will be the text size of the targeted HTML element? + +```css +h1 { + color: green; + font-size: 24px; +} +``` + +## --answers-- + +`green` + +### --feedback-- + +The value is the specific measurement or setting applied to the property within the declaration block. + +--- + +`24px` + +--- + +`16px` + +### --feedback-- + +The value is the specific measurement or setting applied to the property within the declaration block. + +--- + +`font-size` + +### --feedback-- + +The value is the specific measurement or setting applied to the property within the declaration block. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbce8163374c903253c9.md b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbce8163374c903253c9.md new file mode 100644 index 00000000000..b6acef287fe --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbce8163374c903253c9.md @@ -0,0 +1,121 @@ +--- +id: 672acbce8163374c903253c9 +title: What Is the Meta Viewport Element Used For? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-meta-viewport-element-used-for +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of the `meta` `viewport` element? + +## --answers-- + +To improve website loading speed. + +### --feedback-- + +Think about how websites adapt to different screen sizes. + +--- + +To control page dimensions and scaling on different devices. + +--- + +To add `meta` `descriptions` for search engines. + +### --feedback-- + +Think about how websites adapt to different screen sizes. + +--- + +To enable JavaScript functionality. + +### --feedback-- + +Think about how websites adapt to different screen sizes. + +## --video-solution-- + +2 + +## --text-- + +What does `width=device-width` in the `meta` `viewport` tag do? + +## --answers-- + +It sets the width of all images to match the device width. + +### --feedback-- + +Consider how this attribute relates to responsive design. + +--- + +It tells the browser to match the page width to the device's screen width. + +--- + +It adjusts the font size based on the device width. + +### --feedback-- + +Consider how this attribute relates to responsive design. + +--- + +It limits the maximum width of the webpage. + +### --feedback-- + +Consider how this attribute relates to responsive design. + +## --video-solution-- + +2 + +## --text-- + +Why is it generally recommended to avoid using `user-scalable=no` in the `meta` `viewport` tag? + +## --answers-- + +It can cause the website to crash on certain devices. + +### --feedback-- + +Think about how this might affect users with different needs. + +--- + +It prevents the website from being indexed by search engines. + +### --feedback-- + +Think about how this might affect users with different needs. + +--- + +It can create accessibility issues for users who need to zoom. + +--- + +It makes the website load slower on mobile devices. + +### --feedback-- + +Think about how this might affect users with different needs. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbdd06b44c4cd3bf8713.md b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbdd06b44c4cd3bf8713.md new file mode 100644 index 00000000000..b8e669e1353 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbdd06b44c4cd3bf8713.md @@ -0,0 +1,121 @@ +--- +id: 672acbdd06b44c4cd3bf8713 +title: What Are Some Default Browser Styles Applied to HTML? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-some-default-browser-styles-applied-to-html +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the default style applied to heading tags (`h1` to `h6`) in most browsers? + +## --answers-- + +They all have the same size and weight. + +### --feedback-- + +Think about how headings create hierarchy in content. + +--- + +They have varying sizes and weights, with `h1` being the largest and boldest. + +--- + +`h1` is italicized, and `h6` is underlined. + +### --feedback-- + +Think about how headings create hierarchy in content. + +--- + +All heading tags are centered by default. + +### --feedback-- + +Think about how headings create hierarchy in content. + +## --video-solution-- + +2 + +## --text-- + +What does the `hr` element typically look like by default in most browsers? + +## --answers-- + +A thin horizontal line with spacing above and below. + +--- + +A dashed line that spans the full width of the page. + +### --feedback-- + +Consider what a horizontal rule generally looks like on a webpage with no additional CSS. + +--- + +A thick black line with no spacing. + +### --feedback-- + +Consider what a horizontal rule generally looks like on a webpage with no additional CSS. + +--- + +A colored bar that separates sections. + +### --feedback-- + +Consider what a horizontal rule generally looks like on a webpage with no additional CSS. + +## --video-solution-- + +1 + +## --text-- + +How are anchor tags (`a`) typically styled by default in browsers? + +## --answers-- + +`bold` and `green`. + +### --feedback-- + +Think about the most common style applied to links on a webpage. + +--- + +`underline` and `blue`. + +--- + +`italic` and `red`. + +### --feedback-- + +Think about the most common style applied to links on a webpage + +--- + +`underline` and `purple`. + +### --feedback-- + +Think about the most common style applied to links on a webpage + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbf7490c054d213a8c1f.md b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbf7490c054d213a8c1f.md new file mode 100644 index 00000000000..66609613f9a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acbf7490c054d213a8c1f.md @@ -0,0 +1,121 @@ +--- +id: 672acbf7490c054d213a8c1f +title: What Are Inline, Internal, and External CSS, and When Should You Use Each One? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-inline-internal-and-external-css +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +When is it most appropriate to use inline CSS? + +## --answers-- + +For styling all paragraphs in a document. + +### --feedback-- + +Think about when you need to apply a style directly to an element without affecting other elements. + +--- + +For overriding styles quickly on a single element. + +--- + +For styling an entire website. + +### --feedback-- + +Think about when you need to apply a style directly to an element without affecting other elements. + +--- + +For separating concerns in large projects. + +### --feedback-- + +Think about when you need to apply a style directly to an element without affecting other elements. + +## --video-solution-- + +2 + +## --text-- + +Which type of CSS is best suited for applying styles to a single webpage only? + +## --answers-- + +Inline CSS. + +### --feedback-- + +Think about the CSS method that is placed inside the `head` tag and applies to just one page. + +--- + +External CSS. + +### --feedback-- + +Think about the CSS method that is placed inside the `head` tag and applies to just one page. + +--- + +Internal CSS. + +--- + +Universal CSS. + +### --feedback-- + +Think about the CSS method that is placed inside the `head` tag and applies to just one page. + +## --video-solution-- + +3 + +## --text-- + +Why is external CSS preferred in larger projects? + +## --answers-- + +It allows for quick, one-time style changes. + +### --feedback-- + +Consider the benefits of keeping HTML structure and CSS styles in separate files. + +--- + +It applies styles to only a specific element. + +### --feedback-- + +Consider the benefits of keeping HTML structure and CSS styles in separate files. + +--- + +It promotes separation of concerns and reusability across multiple pages. + +--- + +It makes the HTML more complicated. + +### --feedback-- + +Consider the benefits of keeping HTML structure and CSS styles in separate files. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md new file mode 100644 index 00000000000..643aea2b89b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md @@ -0,0 +1,121 @@ +--- +id: 672acc03c257524d6a5151e8 +title: How Do Width and Height Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-do-width-and-height-work +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What will happen if you set `width: 600px;` and `max-width: 500px;` on a `div` element? + +## --answers-- + +The element will be `600px` wide. + +### --feedback-- + +Think about which property takes precedence in such a situation. + +--- + +The element will be `500px` wide. + +--- + +The element will be `550px` wide. + +### --feedback-- + +Think about which property takes precedence in such a situation. + +--- + +The element will be `100px` wide. + +### --feedback-- + +Think about which property takes precedence in such a situation. + +## --video-solution-- + +2 + +## --text-- + +If you set `min-height: 200px` and `height: 150px` on an element, what will be the `height` of the element? + +## --answers-- + +`150px` + +### --feedback-- + +Consider how `min-height` influences the final height. + +--- + +`100px` + +### --feedback-- + +Consider how `min-height` influences the final height. + +--- + +`200px` + +--- + +`250px` + +### --feedback-- + +Consider how `min-height` influences the final height. + +## --video-solution-- + +3 + +## --text-- + +Which of the following units can be used to set the `width` or `height` of an element? + +## --answers-- + +`px`, `%`, and `em`. + +### --feedback-- + +CSS allows various units to set dimensions. + +--- + +`px`, `vh`, and `vw`. + +### --feedback-- + +CSS allows various units to set dimensions. + +--- + +`cm`, `vh`, and `rem`. + +### --feedback-- + +CSS allows various units to set dimensions. + +--- + +All of the above + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md new file mode 100644 index 00000000000..f22fe906a26 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md @@ -0,0 +1,176 @@ +--- +id: 672acc100d59d24da7b4e09c +title: What Are the Different Types of CSS Combinators? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-the-different-types-of-css-combinators +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which CSS rule will style all `span` elements that are inside `div` elements, regardless of how deeply they are nested? + +## --answers-- + +```css +div > span { + color: red; +} +``` + +### --feedback-- + +Consider the combinator that applies to elements within any level of nesting inside the specified parent. + +--- + +```css +div + span { + color: red; +} +``` + +### --feedback-- + +Consider the combinator that applies to elements within any level of nesting inside the specified parent. + +--- + +```css +div ~ span { + color: red; +} +``` + +### --feedback-- + +Consider the combinator that applies to elements within any level of nesting inside the specified parent. + +--- + +```css +div span { + color: red; +} +``` + +## --video-solution-- + +4 + +## --text-- + +Which CSS rule will style only the direct child `li` elements of `ul` elements? + +## --answers-- + +```css +ul > li { + font-weight: bold; +} +``` + +--- + +```css +ul li { + font-weight: bold; +} +``` + +### --feedback-- + +Think about the combinator that targets elements that are direct children of a specified parent. + +--- + +```css +ul + li { + font-weight: bold; +} +``` + +### --feedback-- + +Think about the combinator that targets elements that are direct children of a specified parent. + +--- + +```css +ul ~ li { + font-weight: bold; +} +``` + +### --feedback-- + +Think about the combinator that targets elements that are direct children of a specified parent. + +## --video-solution-- + +1 + +## --text-- + +Which CSS rule will style the first `p` element that immediately follows any `h1` element? + +```css +h1 { + color: green; + font-size: 24px; +} +``` + +## --answers-- + +```css +h1 > p { + margin-top: 0; +} +``` + +### --feedback-- + +Consider the combinator that applies to an element immediately following a specified sibling. + +--- + +```css +h1 + p { + margin-top: 0; +} +``` + +--- + +```css +h1 ~ p { + margin-top: 0; +} +``` + +### --feedback-- + +Consider the combinator that applies to an element immediately following a specified sibling. + +--- + +```css +h1 p { + margin-top: 0; +} +``` + +### --feedback-- + +Consider the combinator that applies to an element immediately following a specified sibling. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc1e24c1e54df5ad89bd.md b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc1e24c1e54df5ad89bd.md new file mode 100644 index 00000000000..545b05d18eb --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc1e24c1e54df5ad89bd.md @@ -0,0 +1,121 @@ +--- +id: 672acc1e24c1e54df5ad89bd +title: What Is the Difference Between Inline and Block-Level Elements in CSS? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-difference-between-inline-and-block-level-elements-in-css +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the default behavior of block-level elements in CSS? + +## --answers-- + +They take up as much width as necessary and stay within the flow of content. + +### --feedback-- + +Block-level elements create large "blocks" of content on a webpage. + +--- + +They take up the full width of their container and start on a new line. + +--- + +They are only used for images and links. + +### --feedback-- + +Block-level elements create large "blocks" of content on a webpage. + +--- + +They are always aligned to the center of the page. + +### --feedback-- + +Block-level elements create large "blocks" of content on a webpage. + +## --video-solution-- + +2 + +## --text-- + +Which of the following is an example of an inline element? + +## --answers-- + +`div` + +### --feedback-- + +Inline elements do not force other elements to a new line. + +--- + +`p` + +### --feedback-- + +Inline elements do not force other elements to a new line. + +--- + +`span` + +--- + +`section` + +### --feedback-- + +Inline elements do not force other elements to a new line. + +## --video-solution-- + +3 + +## --text-- + +How can you change the behavior of a block-level element to behave like an inline element? + +## --answers-- + +Apply `display: inline-block;` + +### --feedback-- + +Think about which display value makes elements stay within the flow of content. + +--- + +Apply `display: flex;` + +### --feedback-- + +Think about which display value makes elements stay within the flow of content. + +--- + +Apply `display: inline;` + +--- + +Apply `display: none;` + +### --feedback-- + +Think about which display value makes elements stay within the flow of content. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md new file mode 100644 index 00000000000..99df7be3434 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md @@ -0,0 +1,121 @@ +--- +id: 672acc3f6f3e3c4e31ec3e12 +title: How Does Inline-Block Work, and How Does It Differ from Inline and Block Elements? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-does-inline-block-work +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the key characteristic of an inline-block element that distinguishes it from an inline element? + +## --answers-- + +Inline-block elements cannot be nested inside block elements. + +### --feedback-- + +Think about whether inline elements allow you to adjust their dimensions. + +--- + +Inline-block elements automatically span the full width of their container. + +### --feedback-- + +Think about whether inline elements allow you to adjust their dimensions. + +--- + +Inline-block elements allow setting of height and width, unlike inline elements. + +--- + +Inline-block elements always break onto a new line. + +### --feedback-- + +Think about whether inline elements allow you to adjust their dimensions. + +## --video-solution-- + +3 + +## --text-- + +Which scenario is best suited for using inline-block elements over inline or block elements? + +## --answers-- + +When you need an element to take up the entire width of its parent container. + +### --feedback-- + +Consider how inline-block strikes a balance between inline flow and size control. + +--- + +When you want an element to remain inline but need to adjust its size. + +--- + +When you need an element to always start on a new line. + +### --feedback-- + +Consider how inline-block strikes a balance between inline flow and size control. + +--- + +When you don't want an element to be affected by padding and margins. + +### --feedback-- + +Consider how inline-block strikes a balance between inline flow and size control. + +## --video-solution-- + +2 + +## --text-- + +In what situation would an element with d`isplay: inline-block;` behave differently than one with `display: block;`? + +## --answers-- + +When you need the element to take up the entire width of the container. + +### --feedback-- + +Think about how inline-block elements behave with respect to text and other inline content. + +--- + +When you want the element to flow alongside text and other inline elements. + +--- + +When you need the element to start on a new line automatically. + +### --feedback-- + +Think about how inline-block elements behave with respect to text and other inline content. + +--- + +When you don't want the element to have any height or width properties. + +### --feedback-- + +Think about how inline-block elements behave with respect to text and other inline content. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc538e6ef24e9dd3c94f.md b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc538e6ef24e9dd3c94f.md new file mode 100644 index 00000000000..190eea6becd --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-what-is-css/672acc538e6ef24e9dd3c94f.md @@ -0,0 +1,121 @@ +--- +id: 672acc538e6ef24e9dd3c94f +title: What Are Margins and Padding, and How Do They Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-margins-and-padding +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which CSS property would you use to create space between the border of an element and its neighboring elements? + +## --answers-- + +`padding` + +### --feedback-- + +This property is used to create space outside the element's border. + +--- + +`border` + +### --feedback-- + +This property is used to create space outside the element's border. + +--- + +`margin` + +--- + +`width` + +### --feedback-- + +This property is used to create space outside the element's border. + +## --video-solution-- + +3 + +## --text-- + +Which CSS property would you use to create space between the content of an element and its border? + +## --answers-- + +`padding` + +--- + +`margin` + +### --feedback-- + +This property is used to create space inside the element's border. + +--- + +`border` + +### --feedback-- + +This property is used to create space inside the element's border. + +--- + +`height` + +### --feedback-- + +This property is used to create space inside the element's border. + +## --video-solution-- + +1 + +## --text-- + +What is the correct order of values when using the shorthand property for `margin` or `padding` with four values? + +## --answers-- + +`left`, `right`, `top`, `bottom`. + +### --feedback-- + +Think about the direction you would go in a clockwise manner starting from the top. + +--- + +`top`, `left`, `bottom`, `right`. + +### --feedback-- + +Think about the direction you would go in a clockwise manner starting from the top. + +--- + +`top`, `right`, `bottom`, `left`. + +--- + +`right`, `bottom`, `left`, `top`. + +### --feedback-- + +Think about the direction you would go in a clockwise manner starting from the top. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672aa840de72b3607bba4bed.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672aa840de72b3607bba4bed.md new file mode 100644 index 00000000000..12d21005dd4 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672aa840de72b3607bba4bed.md @@ -0,0 +1,121 @@ +--- +id: 672aa840de72b3607bba4bed +title: What Is the Attribute Selector, and How Can It Be Used to Target Links with the href and title Attributes? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-attribute-selector +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +Which CSS selector would you use to target all links with an `href` attribute? + +## --answers-- + +`a[href]` + +--- + +`a[href=""]` + +### --feedback-- + +Consider the selector that targets any element with a specific attribute. + +--- + +`a[href="https"]` + +### --feedback-- + +Consider the selector that targets any element with a specific attribute. + +--- + +`a[href*="https"]` + +### --feedback-- + +Consider the selector that targets any element with a specific attribute. + +## --video-solution-- + +1 + +## --text-- + +What does the attribute selector do in CSS? + +## --answers-- + +It targets elements based on their tag name. + +### --feedback-- + +Think about how CSS can style elements depending on the attributes they have. + +--- + +It targets elements based on their class name. + +### --feedback-- + +Think about how CSS can style elements depending on the attributes they have. + +--- + +It targets elements based on their attributes. + +--- + +It targets elements based on their ID. + +### --feedback-- + +Think about how CSS can style elements depending on the attributes they have. + +## --video-solution-- + +3 + +## --text-- + +Which of the following CSS rules will style links with both `href` and `title` attributes? + +## --answers-- + +`a[href]` + +### --feedback-- + +Consider combining attribute selectors to target elements with multiple attributes. + +--- + +`a[title]` + +### --feedback-- + +Consider combining attribute selectors to target elements with multiple attributes. + +--- + +`a[href][title]` + +--- + +`a[href*="title"]` + +### --feedback-- + +Consider combining attribute selectors to target elements with multiple attributes. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672c37498952920879c43de9.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672c37498952920879c43de9.md new file mode 100644 index 00000000000..329e443a5d3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672c37498952920879c43de9.md @@ -0,0 +1,121 @@ +--- +id: 672c37498952920879c43de9 +title: How to Use the Attribute Selector to Target Elements with the lang and data-lang Attributes? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-to-use-the-attribute-selector-to-target-elements-with-the-lang-and-data-lang-attributes +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which CSS selector would you use to target all paragraphs where the `lang` attribute is set to English? + +## --answers-- + +`p[lang="en"]` + +--- + +`p[lang]` + +### --feedback-- + +Consider the selector that targets elements with a specific `lang` attribute value. + +--- + +`p[lang="es"]` + +### --feedback-- + +Consider the selector that targets elements with a specific `lang` attribute value. + +--- + +`p[lang*="en"]` + +### --feedback-- + +Consider the selector that targets elements with a specific `lang` attribute value. + +## --video-solution-- + +1 + +## --text-- + +How would you target all `div` elements that have a `data-lang` attribute set to `fr`? + +## --answers-- + +`div[data-lang]` + +### --feedback-- + +Think about the selector that matches the exact value of the `data-lang` attribute. + +--- + +`div[data-lang="fr"]` + +--- + +`div[lang="fr"]` + +### --feedback-- + +Think about the selector that matches the exact value of the `data-lang` attribute. + +--- + +`div[data-lang*="fr"]` + +### --feedback-- + +Think about the selector that matches the exact value of the `data-lang` attribute. + +## --video-solution-- + +2 + +## --text-- + +Which attribute would you use in HTML to specify the language of the content inside an element? + +## --answers-- + +`data-lang` + +### --feedback-- + +This attribute is commonly used to define the language for accessibility and SEO purposes. + +--- + +`class` + +### --feedback-- + +This attribute is commonly used to define the language for accessibility and SEO purposes. + +--- + +`lang` + +--- + +`id` + +### --feedback-- + +This attribute is commonly used to define the language for accessibility and SEO purposes. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672c375857128708d04d0e22.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672c375857128708d04d0e22.md new file mode 100644 index 00000000000..8dab6b8bbb1 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672c375857128708d04d0e22.md @@ -0,0 +1,121 @@ +--- +id: 672c375857128708d04d0e22 +title: How to Use the Attribute Selector to Target Ordered List Elements with the type Attribute? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-to-use-the-attribute-selector-to-target-ordered-list-elements-with-the-type-attribute +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which CSS selector would you use to target ordered lists that use uppercase alphabetical numbering? + +## --answers-- + +`ol[type="A"]` + +--- + +`ol[type="a"]` + +### --feedback-- + +Consider the attribute value that corresponds to uppercase letters. + +--- + +`ol[type="1"]` + +### --feedback-- + +Consider the attribute value that corresponds to uppercase letters. + +--- + +`ol[type="I"]` + +### --feedback-- + +Consider the attribute value that corresponds to uppercase letters. + +## --video-solution-- + +1 + +## --text-- + +How would you target ordered lists that use lowercase Roman numerals? + +## --answers-- + +`ol[type="I"]` + +### --feedback-- + +Think about the value for Roman numerals in lowercase. + +--- + +`ol[type="1"]` + +### --feedback-- + +Think about the value for Roman numerals in lowercase. + +--- + +`ol[type="i"]` + +--- + +`ol[type="A"]` + +### --feedback-- + +Think about the value for Roman numerals in lowercase. + +## --video-solution-- + +3 + +## --text-- + +Which attribute is commonly used in HTML to specify the numbering style of an ordered list? + +## --answers-- + +`data-type` + +### --feedback-- + +This attribute defines whether the list is numbered with numbers, letters, or Roman numerals. + +--- + +`type` + +--- + +`style` + +### --feedback-- + +This attribute defines whether the list is numbered with numbers, letters, or Roman numerals. + +--- + +`order` + +### --feedback-- + +This attribute defines whether the list is numbered with numbers, letters, or Roman numerals. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672aa669960f6a596081fcad.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672aa669960f6a596081fcad.md new file mode 100644 index 00000000000..259e4c098c6 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672aa669960f6a596081fcad.md @@ -0,0 +1,121 @@ +--- +id: 672aa669960f6a596081fcad +title: How Do Background Image Size, Repeat, Position, and Attachment Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-to-work-with-background-image-size-repeat-position-and-attachment +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +Which `background-size` value would you use to ensure the entire background image is visible without any cropping, even if it doesn't cover the whole element? + +## --answers-- + +`cover` + +### --feedback-- + +Think about which option ensures the full image is shown without stretching or cropping. + +--- + +`contain` + +--- + +`auto` + +### --feedback-- + +Think about which option ensures the full image is shown without stretching or cropping. + +--- + +`100%` + +### --feedback-- + +Think about which option ensures the full image is shown without stretching or cropping. + +## --video-solution-- + +2 + +## --text-- + +If you want a background image to repeat horizontally but not vertically, which `background-repeat` value would you use? + +## --answers-- + +`repeat` + +### --feedback-- + +Consider which option specifically mentions horizontal repetition. + +--- + +`no-repeat` + +### --feedback-- + +Consider which option specifically mentions horizontal repetition. + +--- + +`repeat-x` + +--- + +`repeat-y` + +### --feedback-- + +Consider which option specifically mentions horizontal repetition. + +## --video-solution-- + +3 + +## --text-- + +Which `background-attachment` value would you use to make a background image stay in place when the user scrolls the page? + +## --answers-- + +`scroll` + +### --feedback-- + +Think about which term implies the image doesn't move with scrolling. + +--- + +`fixed` + +--- + +`local` + +### --feedback-- + +Think about which term implies the image doesn't move with scrolling. + +--- + +`static` + +### --feedback-- + +Think about which term implies the image doesn't move with scrolling. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md new file mode 100644 index 00000000000..4200b3854e4 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md @@ -0,0 +1,121 @@ +--- +id: 672b98be592cfb451f651451 +title: What Is a Background Gradient, and How Does It Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-a-background-gradient +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What does the `circle` keyword specify in a `radial-gradient()` function? + +## --answers-- + +The gradient will have a square shape. + +### --feedback-- + +Consider what shape the gradient will take when using the `circle` keyword. + +--- + +The gradient will extend in a diagonal direction. + +### --feedback-- + +Consider what shape the gradient will take when using the `circle` keyword. + +--- + +The gradient will have a circular shape. + +--- + +The gradient will be applied to the text. + +### --feedback-- + +Consider what shape the gradient will take when using the `circle` keyword. + +## --video-solution-- + +3 + +## --text-- + +What does the `farthest-corner` keyword do in the size parameter of a `radial-gradient()` function? + +## --answers-- + +It makes the gradient extend to the nearest corner of the element. + +### --feedback-- + +Think about how the size of the gradient affects its coverage relative to the element. + +--- + +It makes the gradient cover the entire element's `width`. + +### --feedback-- + +Think about how the size of the gradient affects its coverage relative to the element. + +--- + +It makes the gradient extend to the farthest corner of the element. + +--- + +It makes the gradient only appear within the element’s `padding`. + +### --feedback-- + +Think about how the size of the gradient affects its coverage relative to the element. + +## --video-solution-- + +3 + +## --text-- + +In the `radial-gradient(circle at center, red, yellow 50%, green)` function, where is the gradient's center located? + +## --answers-- + +At the top right corner of the element. + +### --feedback-- + +Consider the placement specified by the at center part of the function. + +--- + +At the bottom left corner of the element. + +### --feedback-- + +Consider the placement specified by the at center part of the function. + +--- + +At the center of the element. + +--- + +At the outer edge of the element. + +### --feedback-- + +Consider the placement specified by the at center part of the function. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md new file mode 100644 index 00000000000..f71dbb8c71c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md @@ -0,0 +1,121 @@ +--- +id: 672b98cd77b6b7456b6ef2de +title: What Are Some Accessibility Considerations for Backgrounds? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-some-accessibility-considerations-for-backgrounds +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Why is it important to maintain sufficient contrast between text and background? + +## --answers-- + +To make the page look more colorful. + +### --feedback-- + +Think about how visually impaired users might interact with your website. + +--- + +To make the text more readable for all users. + +--- + +To reduce loading times on the webpage. + +### --feedback-- + +Think about how visually impaired users might interact with your website. + +--- + +To highlight text in different ways. + +### --feedback-- + +Think about how visually impaired users might interact with your website. + +## --video-solution-- + +2 + +## --text-- + +Which of the following should be avoided when placing text over a background? + +## --answers-- + +Applying a high-contrast background. + +### --feedback-- + +Consider which approach makes text difficult to read. + +--- + +Using a busy or complex background without any overlay. + +--- + +Using white text on a black background. + +### --feedback-- + +Consider which approach makes text difficult to read. + +--- + +Using a solid background color behind text. + +### --feedback-- + +Consider which approach makes text difficult to read. + +## --video-solution-- + +2 + +## --text-- + +What is the issue with using color as the only indicator of information, such as showing an error message in red? + +## --answers-- + +It makes the website look less colorful. + +### --feedback-- + +Think about how users who can’t distinguish between certain colors might be affected. + +--- + +It doesn’t affect users with visual impairments. + +### --feedback-- + +Think about how users who can’t distinguish between certain colors might be affected. + +--- + +It can be problematic for users with color blindness. + +--- + +It requires more CSS code. + +### --feedback-- + +Think about how users who can’t distinguish between certain colors might be affected. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md new file mode 100644 index 00000000000..bb0cf34f441 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md @@ -0,0 +1,137 @@ +--- +id: 672b98db3bcdd545ab3b3c73 +title: What Are the Different Ways You Can Add Borders Around Images? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-the-different-ways-you-can-add-borders-around-images +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which CSS property allows you to create a border that doesn't affect the element's dimensions? + +## --answers-- + +`border` + +### --feedback-- + +Think about which property creates a line around an element without changing its size or position. + +--- + +`outline` + +--- + +`box-shadow` + +### --feedback-- + +Think about which property creates a line around an element without changing its size or position. + +--- + +`border-image` + +### --feedback-- + +Think about which property creates a line around an element without changing its size or position. + +## --video-solution-- + +2 + +## --text-- + +How would you create a 3-pixel wide, dashed, red border only on the left side of an image? + +## --answers-- + +```css +img { + border: 3px dashed red left; +} +``` + +### --feedback-- + +Consider which property specifically targets one side of an element's border. + +--- + +```css +img { + border-left: 3px dashed red; +} +``` + +--- + +```css +img { + left-border: 3px dashed red; +} +``` + +### --feedback-- + +Consider which property specifically targets one side of an element's border. + +--- + +```css +img { + border: left 3px dashed red; +} +``` + +### --feedback-- + +Consider which property specifically targets one side of an element's border. + +## --video-solution-- + +2 + +## --text-- + +What's a potential advantage of using `box-shadow` to create a border effect instead of the `border` property? + +## --answers-- + +It's more widely supported by browsers. + +### --feedback-- + +Think about the flexibility of box-shadow and how it can be used to layer multiple effects. + +--- + +It allows for multiple "borders" with a single property. + +--- + +It's more performant. + +### --feedback-- + +Think about the flexibility of box-shadow and how it can be used to layer multiple effects. + +--- + +It can create gradients without additional properties. + +### --feedback-- + +Think about the flexibility of box-shadow and how it can be used to layer multiple effects. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672aa7678e05e35d42e33522.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672aa7678e05e35d42e33522.md new file mode 100644 index 00000000000..9388c7480a8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672aa7678e05e35d42e33522.md @@ -0,0 +1,121 @@ +--- +id: 672aa7678e05e35d42e33522 +title: What Is Color Theory in Design? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-color-theory-in-design +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +Why is color theory important for web development? + +## --answers-- + +It's not important because it has no impact on user experience. + +### --feedback-- + +Think about how color affects user perception and emotions. + +--- + +It helps designers create visually appealing websites. + +--- + +It's only important for print design. + +### --feedback-- + +Think about how color affects user perception and emotions. + +--- + +It's irrelevant to modern web design trends. + +### --feedback-- + +Think about how color affects user perception and emotions. + +## --video-solution-- + +2 + +## --text-- + +Which color scheme is most likely to create cohesive and soothing experiences? + +## --answers-- + +Analogous + +--- + +Complementary + +### --feedback-- + +Think about the emotional impact of colors placed adjacent to each other. + +--- + +Monochromatic + +### --feedback-- + +Think about the emotional impact of colors placed adjacent to each other. + +--- + +Triadic + +### --feedback-- + +Think about the emotional impact of colors placed adjacent to each other. + +## --video-solution-- + +1 + +## --text-- + +The concept of color harmony refers to: + +## --answers-- + +Using only one color in a design. + +### --feedback-- + +Think about how colors work together in a design. + +--- + +Combining colors that clash with each other. + +### --feedback-- + +Think about how colors work together in a design. + +--- + +Creating visually effective color combinations. + +--- + +The brightness or darkness of a color. + +### --feedback-- + +Think about how colors work together in a design. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md new file mode 100644 index 00000000000..6036365fdff --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md @@ -0,0 +1,121 @@ +--- +id: 672bc4ff5e7a4bbdee8ba013 +title: What Are Named Colors in CSS, and When to Use Them? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-named-colors-in-css +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is a key benefit of using named colors in CSS? + +## --answers-- + +Named colors allow you to create gradients. + +### --feedback-- + +Think about the simplicity and readability aspect of named colors. + +--- + +Named colors are simpler to write and make code more readable. + +--- + +Named colors provide a wider range of color options than hex codes. + +### --feedback-- + +Think about the simplicity and readability aspect of named colors. + +--- + +Named colors are the most precise way to define colors in web design. + +### --feedback-- + +Think about the simplicity and readability aspect of named colors. + +## --video-solution-- + +2 + +## --text-- + +In what scenario might named colors not be the best choice? + +## --answers-- + +When you need to quickly prototype a design. + +### --feedback-- + +Think about the limitations of named colors in more complex designs. + +--- + +When your design requires very specific or nuanced shades of color. + +--- + +When your design involves only primary colors. + +### --feedback-- + +Think about the limitations of named colors in more complex designs. + +--- + +When collaborating with others on a simple project. + +### --feedback-- + +Think about the limitations of named colors in more complex designs. + +## --video-solution-- + +2 + +## --text-- + +Which of the following is an example of a named color in CSS? + +## --answers-- + +`#ff5733` + +### --feedback-- + +Named colors are descriptive words, not numerical codes. + +--- + +`rgb(255, 99, 71)` + +### --feedback-- + +Named colors are descriptive words, not numerical codes. + +--- + +`tomato` + +--- + +`hsl(120, 100%, 50%)` + +### --feedback-- + +Named colors are descriptive words, not numerical codes. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md new file mode 100644 index 00000000000..7c6c8af24be --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md @@ -0,0 +1,121 @@ +--- +id: 672bc51370c789be459186b4 +title: What Is the RGB Color Model, and How Does the RGB Function Work in CSS? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-rgb-color-model +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What do the numbers in the `rgb()` function represent? + +## --answers-- + +`width`, `height`, and `depth` of the element. + +### --feedback-- + +The RGB function is based on three colors used to create digital colors. + +--- + +Amount of `red`, `green`, and `blue` light. + +--- + +`padding`, `margin`, and `border` sizes. + +### --feedback-- + +The RGB function is based on three colors used to create digital colors. + +--- + +Amount of `hue`, `saturation`, and `lightness`. + +### --feedback-- + +The RGB function is based on three colors used to create digital colors. + +## --video-solution-- + +2 + +## --text-- + +Which CSS function would you use if you want to control the transparency of a color? + +## --answers-- + +`rgb()` + +### --feedback-- + +This function includes an additional parameter for transparency (alpha value). + +--- + +`rgba()` + +--- + +`hsl()` + +### --feedback-- + +This function includes an additional parameter for transparency (alpha value). + +--- + +`hex()` + +### --feedback-- + +This function includes an additional parameter for transparency (alpha value). + +## --video-solution-- + +2 + +## --text-- + +What is the maximum value for any individual color in the RGB model? + +## --answers-- + +`100` + +### --feedback-- + +This value indicates full intensity of that particular color. + +--- + +`50` + +### --feedback-- + +This value indicates full intensity of that particular color. + +--- + +`255` + +--- + +`360` + +### --feedback-- + +This value indicates full intensity of that particular color. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md new file mode 100644 index 00000000000..41ece3e230a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md @@ -0,0 +1,121 @@ +--- +id: 672bc523324694be91d90d96 +title: What Is the HSL Color Model, and How Does the HSL Function Work in CSS? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-hsl-color-model +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What does the first value in the hsl() function represent? + +## --answers-- + +Saturation + +### --feedback-- + +This value is measured in degrees and determines the type of color (e.g., red, blue, green). + +--- + +Lightness + +### --feedback-- + +This value is measured in degrees and determines the type of color (e.g., red, blue, green). + +--- + +Hue + +--- + +Opacity + +### --feedback-- + +This value is measured in degrees and determines the type of color (e.g., red, blue, green). + +## --video-solution-- + +3 + +## --text-- + +Which percentage value for lightness would result in pure white when using the HSL model? + +## --answers-- + +`0%` + +### --feedback-- + +Lightness refers to how light or dark a color appears. + +--- + +`50%` + +### --feedback-- + +Lightness refers to how light or dark a color appears. + +--- + +`100%` + +--- + +`25%` + +### --feedback-- + +Lightness refers to how light or dark a color appears. + +## --video-solution-- + +3 + +## --text-- + +How would you make a color semi-transparent using the HSL model? + +## --answers-- + +By using `hsla()` and adjusting the alpha value. + +--- + +By lowering the lightness value in the `hsl()` function/ + +### --feedback-- + +Consider how you control opacity in the HSL model. + +--- + +By increasing the hue value above 360 degrees. + +### --feedback-- + +Consider how you control opacity in the HSL model. + +--- + +By setting the saturation value to `0%`. + +### --feedback-- + +Consider how you control opacity in the HSL model. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc5344330d7bee2f9c2ed.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc5344330d7bee2f9c2ed.md new file mode 100644 index 00000000000..b97617ad593 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc5344330d7bee2f9c2ed.md @@ -0,0 +1,121 @@ +--- +id: 672bc5344330d7bee2f9c2ed +title: What Are Hex Codes, and How Do They Work in CSS? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-hex-codes +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What does each pair of characters in a hex code represent? + +## --answers-- + +The amount of opacity in the color. + +### --feedback-- + +Think about how hex codes break down colors into the RGB color model. + +--- + +The intensity of red, green, or blue in the color. + +--- + +The amount of contrast between colors. + +### --feedback-- + +Think about how hex codes break down colors into the RGB color model. + +--- + +The lightness and saturation of the color. + +### --feedback-- + +Think about how hex codes break down colors into the RGB color model. + +## --video-solution-- + +2 + +## --text-- + +How would you write the hex code for black using the shorthand format? + +## --answers-- + +`#000` + +--- + +`#000000` + +### --feedback-- + +Consider how shorthand hex codes condense the full six-character code. + +--- + +`#FFF` + +### --feedback-- + +Consider how shorthand hex codes condense the full six-character code. + +--- + +`#FFFFFF` + +### --feedback-- + +Consider how shorthand hex codes condense the full six-character code. + +## --video-solution-- + +1 + +## --text-- + +Why might a designer choose to use hex codes in their CSS over named colors? + +## --answers-- + +Hex codes allow for more precise color selection. + +--- + +Hex codes are easier to remember than named colors. + +### --feedback-- + +Think about the limitations of named colors and the flexibility offered by hex codes. + +--- + +Hex codes automatically adjust for light and dark mode. + +### --feedback-- + +Think about the limitations of named colors and the flexibility offered by hex codes. + +--- + +Hex codes do not require any formatting in CSS. + +### --feedback-- + +Think about the limitations of named colors and the flexibility offered by hex codes. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc544196a17bf28594e64.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc544196a17bf28594e64.md new file mode 100644 index 00000000000..e154c6b839e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc544196a17bf28594e64.md @@ -0,0 +1,127 @@ +--- +id: 672bc544196a17bf28594e64 +title: What Are Linear and Radial Gradients, and How Do They Work in CSS? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-linear-and-radial-gradients +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the difference between linear and radial gradients in CSS? + +## --answers-- + +Linear gradients use only two colors, while radial gradients use multiple colors. + +### --feedback-- + +Think about the shape and direction of each type of gradient. + +--- + +Linear gradients transition along a straight line, while radial gradients radiate from a central point. + +--- + +Linear gradients are only horizontal, while radial gradients can be any shape. + +### --feedback-- + +Think about the shape and direction of each type of gradient. + +--- + +Linear gradients are smoother than radial gradients. + +### --feedback-- + +Think about the shape and direction of each type of gradient. + +## --video-solution-- + +2 + +## --text-- + +In the following CSS code, what does 45deg specify? + +```css +{ + background: linear-gradient(45deg, red, blue); +} +``` + +## --answers-- + +The angle of rotation for the entire element. + +### --feedback-- + +Consider how this value might affect the direction of the color transition. + +--- + +The direction of the gradient line. + +--- + +The size of the gradient. + +### --feedback-- + +Consider how this value might affect the direction of the color transition. + +--- + +The distance between color stops. + +### --feedback-- + +Consider how this value might affect the direction of the color transition. + +## --video-solution-- + +2 + +## --text-- + +Which of the following is NOT a valid way to specify direction in a linear gradient? + +## --answers-- + +`to right` + +### --feedback-- + +Think about the standard keywords and values used for specifying gradient directions. + +--- + +`to bottom left` + +### --feedback-- + +Think about the standard keywords and values used for specifying gradient directions. + +--- + +`90deg` + +### --feedback-- + +Think about the standard keywords and values used for specifying gradient directions. + +--- + +`diagonal` + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md new file mode 100644 index 00000000000..e6218b498ab --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md @@ -0,0 +1,121 @@ +--- +id: 672aa7f7284b235f46f7d4e9 +title: What Is CSS Flexbox, and When Should You Use It? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-css-flexbox +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of CSS Flexbox? + +## --answers-- + +To control the font size of text elements. + +### --feedback-- + +Think about how flexbox is used to arrange and align elements. + +--- + +To create responsive and dynamic layouts. + +--- + +To define the color of elements. + +### --feedback-- + +Think about how flexbox is used to arrange and align elements. + +--- + +To adjust the spacing between elements. + +### --feedback-- + +Think about how flexbox is used to arrange and align elements. + +## --video-solution-- + +2 + +## --text-- + +Which of the following CSS properties is used to control the direction in which child elements are arranged within a flex container? + +## --answers-- + +`flex-wrap` + +### --feedback-- + +Think about how the arrangement of elements is determined within a flex container. + +--- + +`align-items` + +### --feedback-- + +Think about how the arrangement of elements is determined within a flex container. + +--- + +`justify-content` + +### --feedback-- + +Think about how the arrangement of elements is determined within a flex container. + +--- + +`flex-direction` + +## --video-solution-- + +4 + +## --text-- + +In the flex model, what is the relationship between the main axis and the cross axis? + +## --answers-- + +The main axis is always horizontal, while the cross axis is always vertical. + +### --feedback-- + +Think about the distribution of elements within a flex container. + +--- + +The main axis is always vertical, while the cross axis is always horizontal. + +### --feedback-- + +Think about the distribution of elements within a flex container. + +--- + +The main axis and cross axis are always perpendicular to each other. + +--- + +The main axis and cross axis are always parallel to each other. + +### --feedback-- + +Think about the distribution of elements within a flex container. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-flexbox/672bd658c0e190f674a5e057.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-flexbox/672bd658c0e190f674a5e057.md new file mode 100644 index 00000000000..f0cd0cb0218 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-flexbox/672bd658c0e190f674a5e057.md @@ -0,0 +1,121 @@ +--- +id: 672bd658c0e190f674a5e057 +title: What Are Some Common Flex Properties, and How Do They Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-some-common-flex-properties +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which CSS property is used to align child elements horizontally (by default) within a flex container? + +## --answers-- + +`flex-direction` + +### --feedback-- + +Think about how elements are aligned horizontally within a flex container. + +--- + +`justify-content` + +--- + +`align-items` + +### --feedback-- + +Think about how elements are aligned horizontally within a flex container. + +--- + +`flex-wrap` + +### --feedback-- + +Think about how elements are aligned horizontally within a flex container. + +## --video-solution-- + +2 + +## --text-- + +Which CSS property is used to align child elements vertically (by default) within a flex container? + +## --answers-- + +`flex-direction` + +### --feedback-- + +Think about how elements are aligned vertically within a flex container. + +--- + +`justify-content` + +### --feedback-- + +Think about how elements are aligned vertically within a flex container. + +--- + +`align-items` + +--- + +`flex-wrap` + +### --feedback-- + +Think about how elements are aligned vertically within a flex container. + +## --video-solution-- + +3 + +## --text-- + +Which of the following properties can be combined into the `flex-flow` property? + +## --answers-- + +`flex-direction` and `justify-content`. + +### --feedback-- + +Think about the two main aspects of how flex items are laid out. + +--- + +`flex-direction` and `align-items`. + +### --feedback-- + +Think about the two main aspects of how flex items are laid out. + +--- + +`flex-direction` and `align-content`. + +### --feedback-- + +Think about the two main aspects of how flex items are laid out. + +--- + +`flex-direction` and `flex-wrap`. + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672aa80bc17f355fabd2e9e8.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672aa80bc17f355fabd2e9e8.md new file mode 100644 index 00000000000..ec397545cee --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672aa80bc17f355fabd2e9e8.md @@ -0,0 +1,121 @@ +--- +id: 672aa80bc17f355fabd2e9e8 +title: What Are the Fundamentals of Typography? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-the-fundamentals-of-typography +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of typography in web design? + +## --answers-- + +To make text visually appealing. + +### --feedback-- + +Think about the main purpose of typography in a web design context. + +--- + +To improve readability and understanding of content. + +--- + +To enhance website loading speed. + +### --feedback-- + +Think about the main purpose of typography in a web design context. + +--- + +To create interesting visual effects. + +### --feedback-- + +Think about the main purpose of typography in a web design context. + +## --video-solution-- + +2 + +## --text-- + +What is the difference between a typeface and a font? + +## --answers-- + +A typeface is a specific style of a font, while a font is the overall design. + +### --feedback-- + +Think about the relationship between a car model and a specific car. + +--- + +A font is a specific style of a typeface, while a typeface is the overall design. + +--- + +There is no difference between a typeface and a font. + +### --feedback-- + +Think about the relationship between a car model and a specific car. + +--- + +A typeface is a collection of fonts, while a font is a single character. + +### --feedback-- + +Think about the relationship between a car model and a specific car. + +## --video-solution-- + +2 + +## --text-- + +What is the main difference between serif and sans-serif fonts? + +## --answers-- + +Serif fonts are handwritten, while sans-serif fonts are printed. + +### --feedback-- + +Focus on the visual characteristics of the fonts. + +--- + +Serif fonts have small lines at the end of characters, while sans-serif fonts do not. + +--- + +Serif fonts are used for headlines, while sans-serif fonts are used for body text. + +### --feedback-- + +Focus on the visual characteristics of the fonts. + +--- + +Serif fonts are older than sans-serif fonts. + +### --feedback-- + +Focus on the visual characteristics of the fonts. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd807c49548fc9be66aca.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd807c49548fc9be66aca.md new file mode 100644 index 00000000000..67847f221e6 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd807c49548fc9be66aca.md @@ -0,0 +1,121 @@ +--- +id: 672bd807c49548fc9be66aca +title: What Are Some Best Practices for Working with Typography in Your Designs? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-some-best-practices-for-working-with-typography-in-your-designs +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which of the following is a very important factor for ensuring readability in web typography? + +## --answers-- + +Using a large variety of fonts. + +### --feedback-- + +Think about how users perceive text on a screen and what they may find helpful. + +--- + +Maximizing font size for all text elements. + +### --feedback-- + +Think about how users perceive text on a screen and what they may find helpful. + +--- + +Achieving optimal contrast between text and background. + +--- + +Aligning text to the left margin. + +### --feedback-- + +Think about how users perceive text on a screen and what they may find helpful. + +## --video-solution-- + +3 + +## --text-- + +When choosing fonts for a website, it's generally recommended to: + +## --answers-- + +Use as many different fonts as possible for visual interest. + +### --feedback-- + +Think about how font choices impact the overall look and feel of a website. + +--- + +Limit the number of font families to improve consistency. + +--- + +Prioritize decorative fonts over readability. + +### --feedback-- + +Think about how font choices impact the overall look and feel of a website. + +--- + +Use only serif fonts for body text. + +### --feedback-- + +Think about how font choices impact the overall look and feel of a website. + +## --video-solution-- + +2 + +## --text-- + +Which of the following best describes the concept of visual hierarchy in typography? + +## --answers-- + +Using only one font style throughout a design. + +### --feedback-- + +Think about how typography can guide users' attention. + +--- + +Prioritizing the most important information through font size and style. + +--- + +Maintaining consistent spacing between letters. + +### --feedback-- + +Think about how typography can guide users' attention. + +--- + +Ensuring all text is centered on the page. + +### --feedback-- + +Think about how typography can guide users' attention. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd814105a0ffcf36f9233.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd814105a0ffcf36f9233.md new file mode 100644 index 00000000000..118f45c24da --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd814105a0ffcf36f9233.md @@ -0,0 +1,121 @@ +--- +id: 672bd814105a0ffcf36f9233 +title: What Are Font Families and How Do They Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-font-families +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of the `font-family` CSS property? + +## --answers-- + +To set the color of the text. + +### --feedback-- + +Think about the visual appearance of the text. + +--- + +To control the font size of the text. + +### --feedback-- + +Think about the visual appearance of the text. + +--- + +To define the typeface used for the text. + +--- + +To adjust the line spacing of the text. + +### --feedback-- + +Think about the visual appearance of the text. + +## --video-solution-- + +3 + +## --text-- + +Which of the following is a common generic font family? + +## --answers-- + +`Helvetica` + +### --feedback-- + +Think about the broad categories of fonts. + +--- + +`Times New Roman` + +### --feedback-- + +Think about the broad categories of fonts. + +--- + +`Sans-Serif` + +--- + +`Arial` + +### --feedback-- + +Think about the broad categories of fonts. + +## --video-solution-- + +3 + +## --text-- + +How can you specify multiple font families as a fallback in CSS? + +## --answers-- + +By separating them with commas. + +--- + +By using nested `font-family` declarations. + +### --feedback-- + +Think about how to provide alternative fonts in case the primary font is not available. + +--- + +By using the `&` character. + +### --feedback-- + +Think about how to provide alternative fonts in case the primary font is not available. + +--- + +By using the `|` character. + +### --feedback-- + +Think about how to provide alternative fonts in case the primary font is not available. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd81ee07c43fd2070f0fe.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd81ee07c43fd2070f0fe.md new file mode 100644 index 00000000000..6e7e6a19591 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd81ee07c43fd2070f0fe.md @@ -0,0 +1,113 @@ +--- +id: 672bd81ee07c43fd2070f0fe +title: What Are Web Safe Fonts? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-web-safe-fonts +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which of the following is a key characteristic of web-safe fonts? + +## --answers-- + +They are difficult to read. + +### --feedback-- + +Think about the primary advantage of using web-safe fonts. + +--- + +They are designed for specific types of content. + +### --feedback-- + +Think about the primary advantage of using web-safe fonts. + +--- + +They are widely supported across different platforms and browsers. + +--- + +They are only available in serif styles. + +### --feedback-- + +Think about the primary advantage of using web-safe fonts. + +## --video-solution-- + +3 + +## --text-- + +Which of the following is not a web-safe font? + +## --answers-- + +`Arial` + +--- + +`Verdana` + +--- + +`Georgia` + +--- + +`Dancing Script` + +### --feedback-- + +Think about the most common fonts used on the web. + +## --video-solution-- + +4 + +## --text-- + +When are web-safe fonts particularly useful? + +## --answers-- + +For complex and visually demanding web designs. + +### --feedback-- + +Think about the situations where a reliable and universally supported font is needed. + +--- + +When a specific custom font is essential for branding purposes. + +### --feedback-- + +Think about the situations where a reliable and universally supported font is needed. + +--- + +For basic web design and when consistent rendering is a priority. + +--- + +For creating custom fonts. + +### --feedback-- + +Think about the situations where a reliable and universally supported font is needed. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd834cedccefd5939a913.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd834cedccefd5939a913.md new file mode 100644 index 00000000000..7b684b0eb3c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd834cedccefd5939a913.md @@ -0,0 +1,121 @@ +--- +id: 672bd834cedccefd5939a913 +title: What Is the @font-face At-Rule, and How Does It Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-font-face-at-rule +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of the `@font-face` at-rule in CSS? + +## --answers-- + +To define the color of text. + +### --feedback-- + +Think about how to incorporate non-standard fonts into your designs. + +--- + +To control the font size of text. + +### --feedback-- + +Think about how to incorporate non-standard fonts into your designs. + +--- + +To define custom fonts. + +--- + +To adjust the line spacing of text. + +### --feedback-- + +Think about how to incorporate non-standard fonts into your designs. + +## --video-solution-- + +3 + +## --text-- + +Which of the following properties is required within the `@font-face` rule to specify the font file? + +## --answers-- + +`font-name` + +### --feedback-- + +Think about how to specify the font file within your stylesheet. + +--- + +`src` + +--- + +`font-weight` + +### --feedback-- + +Think about how to specify the font file within your stylesheet. + +--- + +`font-style` + +### --feedback-- + +Think about how to specify the font file within your stylesheet. + +## --video-solution-- + +2 + +## --text-- + +What is the primary advantage of using custom fonts defined with `@font-face` compared to relying solely on web-safe fonts? + +## --answers-- + +Increased browser compatibility. + +### --feedback-- + +Think about how custom fonts can make your design unique. + +--- + +Enhanced customization and branding options. + +--- + +Faster page loading times. + +### --feedback-- + +Think about how custom fonts can make your design unique. + +--- + +Simplified font management. + +### --feedback-- + +Think about how custom fonts can make your design unique. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd8453d1371fdb1510fe5.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd8453d1371fdb1510fe5.md new file mode 100644 index 00000000000..ff40ceeabe8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd8453d1371fdb1510fe5.md @@ -0,0 +1,121 @@ +--- +id: 672bd8453d1371fdb1510fe5 +title: How Do You Work with External Fonts Like Font Squirrel and Google Fonts? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary advantage of using external fonts from services like Font Squirrel or Google Fonts? + +## --answers-- + +Reduced font file size. + +### --feedback-- + +Think about how external font services can benefit your web design. + +--- + +Increased font rendering speed. + +### --feedback-- + +Think about how external font services can benefit your web design. + +--- + +Expanded font selection and variety. + +--- + +Improved browser compatibility. + +### --feedback-- + +Think about how external font services can benefit your web design. + +## --video-solution-- + +3 + +## --text-- + +What is a potential drawback of using multiple external fonts? + +## --answers-- + +Increased website load time. + +--- + +Increased likelihood of bugs. + +### --feedback-- + +Think about the challenges that might arise when relying on multiple external resources. + +--- + +Limited customization options. + +### --feedback-- + +Think about the challenges that might arise when relying on multiple external resources. + +--- + +Increased browser compatibility. + +### --feedback-- + +Think about the challenges that might arise when relying on multiple external resources. + +## --video-solution-- + +1 + +## --text-- + +What is the importance of providing fallback fonts when using external fonts? + +## --answers-- + +To create a more visually appealing design. + +### --feedback-- + +Consider what happens if the external font is not available. + +--- + +To improve font rendering performance. + +### --feedback-- + +Consider what happens if the external font is not available. + +--- + +To display the text correctly, even if the external font is not loaded properly. + +--- + +To reduce file size. + +### --feedback-- + +Consider what happens if the external font is not available. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd853c985cdfdeb32f4f9.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd853c985cdfdeb32f4f9.md new file mode 100644 index 00000000000..cec67c5ef9e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-fonts/672bd853c985cdfdeb32f4f9.md @@ -0,0 +1,121 @@ +--- +id: 672bd853c985cdfdeb32f4f9 +title: What Is the text-shadow Property, and How Does It Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-text-shadow-property +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of the `text-shadow` CSS property? + +## --answers-- + +To adjust the font size of text. + +### --feedback-- + +Think about how the `text-shadow` property affects the visual appearance of text. + +--- + +To change the color of text. + +### --feedback-- + +Think about how the `text-shadow` property affects the visual appearance of text. + +--- + +To create a shadow effect for text. + +--- + +To control the spacing between lines of text. + +### --feedback-- + +Think about how the `text-shadow` property affects the visual appearance of text. + +## --video-solution-- + +3 + +## --text-- + +How can you create a black text shadow with a horizontal offset to the right and a blur radius of 5 pixels? + +## --answers-- + +`text-shadow: 5px 0px 0px black;` + +### --feedback-- + +Think about the order of the values in the text-shadow property. + +--- + +`text-shadow: 5px 0px 5px black;` + +--- + +`text-shadow: 5px 5px 0px black;` + +### --feedback-- + +Think about the order of the values in the text-shadow property. + +--- + +`text-shadow: 0px 5px 0px black;` + +### --feedback-- + +Think about the order of the values in the text-shadow property. + +## --video-solution-- + +2 + +## --text-- + +How can you create a multiple-layered text shadow effect? + +## --answers-- + +By defining multiple shadows in the text-shadow property. + +--- + +By nesting elements within each other. + +### --feedback-- + +Think about how to combine multiple shadow effects. + +--- + +By using the `filter` property. + +### --feedback-- + +Think about how to combine multiple shadow effects. + +--- + +By applying a background image. + +### --feedback-- + +Think about how to combine multiple shadow effects. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md new file mode 100644 index 00000000000..3d3eaaed930 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md @@ -0,0 +1,121 @@ +--- +id: 672aa8ac4631d1623ec5cd86 +title: What Is CSS Grid, and How Does It Differ from Flexbox? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-css-grid +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +What is the main difference between CSS Grid and Flexbox? + +## --answers-- + +Grid is newer than Flexbox. + +### --feedback-- + +Think about how many directions each layout system primarily works with. + +--- + +Grid is two-dimensional, while Flexbox is one-dimensional. + +--- + +Grid only works with columns, Flexbox only with rows. + +### --feedback-- + +Think about how many directions each layout system primarily works with. + +--- + +Grid is only for desktop layouts, Flexbox for mobile. + +### --feedback-- + +Think about how many directions each layout system primarily works with. + +## --video-solution-- + +2 + +## --text-- + +In the CSS Grid example provided, what does `1fr 1fr 1fr` mean in the `grid-template-columns` property? + +## --answers-- + +Create 3 columns, each 1 pixel wide. + +### --feedback-- + +`fr` stands for `fraction`, and it's about dividing available space. + +--- + +Create 3 columns, each taking up one-third of the available space. + +--- + +Create 1 column that's 3 times as wide as the others. + +### --feedback-- + +`fr` stands for `fraction`, and it's about dividing available space. + +--- + +Create a single column divided into 3 equal parts. + +### --feedback-- + +`fr` stands for `fraction`, and it's about dividing available space. + +## --video-solution-- + +2 + +## --text-- + +Which statement about CSS Grid is true? + +## --answers-- + +It can only be used for desktop layouts. + +### --feedback-- + +Think about the level of control Grid gives you over item placement. + +--- + +It requires JavaScript to function properly. + +### --feedback-- + +Think about the level of control Grid gives you over item placement. + +--- + +It allows for precise placement of items in both rows and columns. + +--- + +It automatically adjusts layout based on content size. + +### --feedback-- + +Think about the level of control Grid gives you over item placement. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md new file mode 100644 index 00000000000..1a55f2a0ce9 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md @@ -0,0 +1,33 @@ +--- +id: 673226732b19aa1cacd0a75c +title: How Can You Create Flexible Grids with the fr Unit? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-can-you-create-flexible-grids-with-the-fr-unit +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +How Can You Create Flexible Grids with the fr Unit? question? + +## --answers-- + +Answer 1 + +--- + +Answer 2 + +--- + +Answer 3 + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md new file mode 100644 index 00000000000..628cd41b12e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md @@ -0,0 +1,33 @@ +--- +id: 6732267ecab2151ced471cd4 +title: How Can You Create Gaps Between Tracks in a Grid? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-can-you-create-gaps-between-tracks-in-a-grid +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +How Can You Create Gaps Between Tracks in a Grid? question? + +## --answers-- + +Answer 1 + +--- + +Answer 2 + +--- + +Answer 3 + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md new file mode 100644 index 00000000000..9a5d751bb22 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md @@ -0,0 +1,33 @@ +--- +id: 6732268d05c3661d32a0fee8 +title: How Can You Repeat Track Listings in a Grid Layout? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-can-you-repeat-track-listings-in-a-grid-layout +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +How Can You Repeat Track Listings in a Grid Layout? question? + +## --answers-- + +Answer 1 + +--- + +Answer 2 + +--- + +Answer 3 + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md new file mode 100644 index 00000000000..78eef0db1fe --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md @@ -0,0 +1,33 @@ +--- +id: 6732269a7aa2ca1d6b6574fe +title: What Is the Difference Between an Implicit and Explicit Grid? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-difference-between-an-implicit-and-explicit-grid +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What Is the Difference Between an Implicit and Explicit Grid? question? + +## --answers-- + +Answer 1 + +--- + +Answer 2 + +--- + +Answer 3 + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md new file mode 100644 index 00000000000..0334ce3e0b0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md @@ -0,0 +1,33 @@ +--- +id: 673226a62eb2121da41a3d68 +title: What Is the minmax() Function and How Does It Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-minmax-function-and-how-does-it-work +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What Is the minmax() Function and How Does It Work? question? + +## --answers-- + +Answer 1 + +--- + +Answer 2 + +--- + +Answer 3 + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md new file mode 100644 index 00000000000..0d7169f0e25 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md @@ -0,0 +1,33 @@ +--- +id: 673226afcd33991dd751937a +title: How Do the grid-column and grid-row Properties Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-do-the-grid-column-and-grid-row-properties-work +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +How Do the grid-column and grid-row Properties Work? question? + +## --answers-- + +Answer 1 + +--- + +Answer 2 + +--- + +Answer 3 + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md new file mode 100644 index 00000000000..9495ea1ceb8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md @@ -0,0 +1,33 @@ +--- +id: 673226b97d4a731e0577ae93 +title: How Can You Position Items on the Grid Using the grid-template-areas Property? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-can-you-position-items-on-the-grid-using-the-grid-template-areas-property +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +How Can You Position Items on the Grid Using the grid-template-areas Property? question? + +## --answers-- + +Answer 1 + +--- + +Answer 2 + +--- + +Answer 3 + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md new file mode 100644 index 00000000000..7a6c198bace --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md @@ -0,0 +1,121 @@ +--- +id: 672aa7e03c2e365e906e5733 +title: What Is Overflow in CSS, and How Does It Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-overflow-in-css +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +What does `overflow` refer to in CSS? + +## --answers-- + +When an element is positioned outside its parent container. + +### --feedback-- + +The lecture defines `overflow` in relation to content and container size. + +--- + +When content exceeds the size of its containing element. + +--- + +When there are too many elements on a page. + +### --feedback-- + +The lecture defines `overflow` in relation to content and container size. + +--- + +When CSS styles conflict with each other. + +### --feedback-- + +The lecture defines `overflow` in relation to content and container size. + +## --video-solution-- + +2 + +## --text-- + +Which CSS property is used to control vertical overflow specifically? + +## --answers-- + +`overflow` + +### --feedback-- + +The lecture mentions a specific property for controlling vertical overflow. + +--- + +`overflow-x` + +### --feedback-- + +The lecture mentions a specific property for controlling vertical overflow. + +--- + +`overflow-y` + +--- + +`vertical-overflow` + +### --feedback-- + +The lecture mentions a specific property for controlling vertical overflow. + +## --video-solution-- + +3 + +## --text-- + +According to the lecture, which type of overflow is generally considered more acceptable in web design? + +## --answers-- + +Horizontal overflow. + +### --feedback-- + +The lecture notes a difference in how horizontal and vertical overflow are perceived. + +--- + +Vertical overflow. + +--- + +Both are equally acceptable. + +### --feedback-- + +The lecture notes a difference in how horizontal and vertical overflow are perceived. + +--- + +Neither is acceptable. + +### --feedback-- + +The lecture notes a difference in how horizontal and vertical overflow are perceived. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md new file mode 100644 index 00000000000..d97065c6968 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md @@ -0,0 +1,121 @@ +--- +id: 672bcc8ccc976fd791610f43 +title: What Is the CSS Transform Property, and How Does It Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-css-transform-property +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which of the following is NOT a concern when using CSS transforms in terms of accessibility? + +## --answers-- + +Screen readers may not accurately convey the visual order of transformed elements. + +### --feedback-- + +Think about how transforms affect different types of users, including those using assistive technologies. + +--- + +Transformed text might become too small or too large to read comfortably. + +### --feedback-- + +Think about how transforms affect different types of users, including those using assistive technologies. + +--- + +Transforms always improve the accessibility of a website. + +--- + +Excessive use of transform for animations can cause discomfort for some users. + +### --feedback-- + +Think about how transforms affect different types of users, including those using assistive technologies. + +## --video-solution-- + +3 + +## --text-- + +What potential issue should you be aware of when using 3D transforms? + +## --answers-- + +3D transforms always cause websites to load slower. + +### --feedback-- + +Consider how different users might perceive and interact with 3D-transformed content. + +--- + +Not all users perceive depth in the same way, which may affect comprehension. + +--- + +3D transforms are not supported by most modern browsers. + +### --feedback-- + +Consider how different users might perceive and interact with 3D-transformed content. + +--- + +3D transforms automatically make text unreadable. + +### --feedback-- + +Consider how different users might perceive and interact with 3D-transformed content. + +## --video-solution-- + +2 + +## --text-- + +When using transform to hide content, what should you ensure for accessibility? + +## --answers-- + +Always use bright colors to make the transformed content stand out. + +### --feedback-- + +Think about how hidden content should behave for users who can't see the visual transformation. + +--- + +Use only 2D transforms for hiding content. + +### --feedback-- + +Think about how hidden content should behave for users who can't see the visual transformation. + +--- + +Make sure the content is still accessible to screen readers and keyboard navigation. + +--- + +Never hide content using transforms. + +### --feedback-- + +Think about how hidden content should behave for users who can't see the visual transformation. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md new file mode 100644 index 00000000000..0cf729be799 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md @@ -0,0 +1,121 @@ +--- +id: 672bcc9c4a6dd6d7dd3e6357 +title: What Is the CSS Box Model, and How Does It Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-css-box-model +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which component of the CSS box model defines the space between the content area and the border? + +## --answers-- + +`margin` + +### --feedback-- + +Think about the area surrounding the content. + +--- + +`padding` + +--- + +`content` + +### --feedback-- + +Think about the area surrounding the content. + +--- + +`border` + +### --feedback-- + +Think about the area surrounding the content. + +## --video-solution-- + +2 + +## --text-- + +Which component of the CSS box model specifies the space outside the border of an element? + +## --answers-- + +`margin` + +--- + +`padding` + +### --feedback-- + +Think about the space between an element and its neighboring elements. + +--- + +`content` + +### --feedback-- + +Think about the space between an element and its neighboring elements. + +--- + +`border` + +### --feedback-- + +Think about the space between an element and its neighboring elements. + +## --video-solution-- + +1 + +## --text-- + +Which component of the CSS box model creates a visible outline around an element? + +## --answers-- + +`margin` + +### --feedback-- + +Think about the visible edge of an element. + +--- + +`padding` + +### --feedback-- + +Think about the visible edge of an element. + +--- + +`content` + +### --feedback-- + +Think about the visible edge of an element. + +--- + +`border` + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md new file mode 100644 index 00000000000..12c059731cc --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md @@ -0,0 +1,121 @@ +--- +id: 672bccae6e556cd81cef6af2 +title: What Is Margin Collapsing, and How Does It Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-margin-collapsing +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +In which direction does margin collapsing occur? + +## --answers-- + +Horizontal margins only. + +### --feedback-- + +Think about which margins (top, bottom, left, right) are affected by this behavior. + +--- + +Vertical margins only. + +--- + +Both horizontal and vertical margins. + +### --feedback-- + +Think about which margins (top, bottom, left, right) are affected by this behavior. + +--- + +Diagonal margins. + +### --feedback-- + +Think about which margins (top, bottom, left, right) are affected by this behavior. + +## --video-solution-- + +2 + +## --text-- + +What happens when two adjacent elements have different margin values? + +## --answers-- + +The margins add up. + +### --feedback-- + +Consider which margin "wins" when collapsing occurs. + +--- + +The smaller margin is used. + +### --feedback-- + +Consider which margin "wins" when collapsing occurs. + +--- + +The larger margin is used. + +--- + +The average of the two margins is used. + +### --feedback-- + +Consider which margin "wins" when collapsing occurs. + +## --video-solution-- + +3 + +## --text-- + +Which of the following will NOT prevent margin collapsing between a parent and its first child? + +## --answers-- + +Adding a `border` to the parent. + +### --feedback-- + +Think about which properties create a separation between the parent and child margins. + +--- + +Setting `padding-top: 1px;` on the parent. + +### --feedback-- + +Think about which properties create a separation between the parent and child margins. + +--- + +Using `display: inline-block;` on the child. + +### --feedback-- + +Think about which properties create a separation between the parent and child margins. + +--- + +Setting `margin-top: 0;` on the child. + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md new file mode 100644 index 00000000000..80888cea82f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md @@ -0,0 +1,121 @@ +--- +id: 672bccc8ea33bad87abb3c56 +title: What Is the Difference Between content-box and border-box? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-difference-between-content-box-and-border-box +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which of the following is the default value for the `box-sizing` property in most browsers? + +## --answers-- + +`content-box` + +--- + +`border-box` + +### --feedback-- + +Think about the default behavior for element sizing. + +--- + +`padding-box` + +### --feedback-- + +Think about the default behavior for element sizing. + +--- + +`margin-box` + +### --feedback-- + +Think about the default behavior for element sizing. + +## --video-solution-- + +1 + +## --text-- + +What is the primary advantage of using `border-box` for creating responsive layouts? + +## --answers-- + +It makes the calculations more complicated. + +### --feedback-- + +Think about how the `border-box` model handles `padding` and `border` within the specified `width` and `height`. + +--- + +It allows for more precise control over element dimensions. + +### --feedback-- + +Think about how the `border-box` model handles `padding` and `border` within the specified `width` and `height`. + +--- + +It ensures that elements maintain their specified dimensions regardless of changes in `padding` or `border`. + +--- + +It improves browser compatibility. + +### --feedback-- + +Think about how the `border-box` model handles `padding` and `border` within the specified `width` and `height`. + +## --video-solution-- + +3 + +## --text-- + +In the `content-box` model, what does the specified `width` of an element represent? + +## --answers-- + +The total `width` of the element, including `padding`, `border`, and `margin`. + +### --feedback-- + +Think about the relationship between the content area and the overall element dimensions in the `content-box` model. + +--- + +The `width` of the content area only. + +--- + +The `width` of the `border`. + +### --feedback-- + +Think about the relationship between the content area and the overall element dimensions in the `content-box` model. + +--- + +The `width` of the `padding`. + +### --feedback-- + +Think about the relationship between the content area and the overall element dimensions in the `content-box` model. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md new file mode 100644 index 00000000000..0df4558a03b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md @@ -0,0 +1,121 @@ +--- +id: 672bccdb8f1823d8c60f914c +title: What Is a CSS Reset, and What Are Some Common Examples? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-a-css-reset +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of a CSS reset? + +## --answers-- + +To add default styles to HTML elements. + +### --feedback-- + +Think about how a CSS reset affects the starting point of your styles. + +--- + +To establish a consistent baseline for styling, reducing browser-specific variations. + +--- + +To create responsive designs. + +### --feedback-- + +Think about how a CSS reset affects the starting point of your styles. + +--- + +To enhance website performance. + +### --feedback-- + +Think about how a CSS reset affects the starting point of your styles. + +## --video-solution-- + +2 + +## --text-- + +Which of the following is a popular third-party browser reset? + +## --answers-- + +Normalize.css + +--- + +Reset.css + +### --feedback-- + +Think about the third-party CSS resets that you learned. + +--- + +Skeleton + +### --feedback-- + +Think about the third-party CSS resets that you learned. + +--- + +Foundation + +### --feedback-- + +Think about the third-party CSS resets that you learned. + +## --video-solution-- + +1 + +## --text-- + +What is the main advantage of using a custom CSS reset over a third-party CSS reset? + +## --answers-- + +More flexibility and control over the styles. + +--- + +Improved browser compatibility. + +### --feedback-- + +Think about the level of customization that custom CSS resets. + +--- + +Simpler implementation. + +### --feedback-- + +Think about the level of customization that custom CSS resets. + +--- + +Faster loading times. + +### --feedback-- + +Think about the level of customization that custom CSS resets. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md new file mode 100644 index 00000000000..c5ee4a08460 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md @@ -0,0 +1,121 @@ +--- +id: 672bccebe1fc82d911c3f078 +title: What Is the CSS Filter Property, and What Are Common Examples? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-css-filter-property +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which of the following CSS rules would make an image completely grayscale? + +## --answers-- + +`filter: grayscale(1);` + +--- + +`filter: gray(100%);` + +### --feedback-- + +Remember that grayscale uses a percentage value, and there are multiple ways to represent 100%. + +--- + +`filter: gray(100);` + +### --feedback-- + +Remember that grayscale uses a percentage value, and there are multiple ways to represent 100%. + +--- + +`filter: black-and-white(true);` + +### --feedback-- + +Remember that grayscale uses a percentage value, and there are multiple ways to represent 100%. + +## --video-solution-- + +1 + +## --text-- + +What would be the effect of applying `filter: brightness(0%);` to an element? + +## --answers-- + +It would make the element completely white. + +### --feedback-- + +Think about what `0%` brightness means in terms of light. + +--- + +It would make the element completely black. + +--- + +It would have no effect on the element. + +### --feedback-- + +Think about what `0%` brightness means in terms of light. + +--- + +It would invert the colors of the element. + +### --feedback-- + +Think about what `0%` brightness means in terms of light. + +## --video-solution-- + +2 + +## --text-- + +How would you combine a blur effect of 5 pixels with a sepia effect of 50%? + +## --answers-- + +`filter: blur(5px) + sepia(50%);` + +### --feedback-- + +Remember how multiple filter functions are combined in a single filter property. + +--- + +`filter: blur(5px), sepia(50%);` + +### --feedback-- + +Remember how multiple filter functions are combined in a single filter property. + +--- + +`filter: blur(5px) sepia(50%);` + +--- + +`filter: blur(5px) && sepia(50%);` + +### --feedback-- + +Remember how multiple filter functions are combined in a single filter property. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md new file mode 100644 index 00000000000..50cd496e232 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md @@ -0,0 +1,121 @@ +--- +id: 672aa8985acb7361e656f94c +title: What Are CSS Custom Properties, and How Do They Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-css-custom-properties +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +What is the correct syntax for declaring a CSS custom property? + +## --answers-- + +`$main-color: #3498db;` + +### --feedback-- + +Remember that custom properties have a unique prefix in their declaration. + +--- + +`@main-color: #3498db;` + +### --feedback-- + +Remember that custom properties have a unique prefix in their declaration. + +--- + +`--main-color: #3498db;` + +--- + +`main-color: #3498db;` + +### --feedback-- + +Remember that custom properties have a unique prefix in their declaration. + +## --video-solution-- + +3 + +## --text-- + +How do you use a CSS custom property in a style declaration? + +## --answers-- + +`use(--main-color)` + +### --feedback-- + +Think about the function used to reference custom properties in CSS. + +--- + +`var(--main-color)` + +--- + +`@main-color` + +### --feedback-- + +Think about the function used to reference custom properties in CSS. + +--- + +`$(--main-color)` + +### --feedback-- + +Think about the function used to reference custom properties in CSS. + +## --video-solution-- + +2 + +## --text-- + +What is a key advantage of using CSS custom properties over preprocessor variables? + +## --answers-- + +They can be used with older versions of CSS. + +### --feedback-- + +Consider the dynamic nature of CSS custom properties compared to preprocessor variables. + +--- + +They can be manipulated using JavaScript at runtime. + +--- + +They are faster to process than preprocessor variables. + +### --feedback-- + +Consider the dynamic nature of CSS custom properties compared to preprocessor variables. + +--- + +They can hold more complex values than preprocessor variables. + +### --feedback-- + +Consider the dynamic nature of CSS custom properties compared to preprocessor variables. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md new file mode 100644 index 00000000000..3781b2687d3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md @@ -0,0 +1,121 @@ +--- +id: 672cf3ca326da9f63683e236 +title: What Is the @property Rule, and How Does It Work with Fallbacks? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-at-property-rule +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the primary purpose of the `@property` rule in CSS? + +## --answers-- + +To create new CSS properties. + +### --feedback-- + +Think about how `@property` relates to custom CSS properties. + +--- + +To define and control the behavior of custom properties. + +--- + +To replace standard CSS properties. + +### --feedback-- + +Think about how `@property` relates to custom CSS properties. + +--- + +To create animations. + +### --feedback-- + +Think about how `@property` relates to custom CSS properties. + +## --video-solution-- + +2 + +## --text-- + +Which of the following is NOT a valid descriptor in the `@property` rule? + +## --answers-- + +`syntax` + +### --feedback-- + +Consider the basic structure of an `@property` rule declaration. + +--- + +`inherits` + +### --feedback-- + +Consider the basic structure of an `@property` rule declaration. + +--- + +`initial-value` + +### --feedback-- + +Consider the basic structure of an `@property` rule declaration. + +--- + +`animation` + +## --video-solution-- + +4 + +## --text-- + +How can you provide a fallback for browsers that don't support the `@property` rule? + +## --answers-- + +Use a polyfill. + +### --feedback-- + +Think about how you would typically declare a custom property without `@property`. + +--- + +Declare the custom property using the standard method. + +--- + +Use the `@supports` rule. + +### --feedback-- + +Think about how you would typically declare a custom property without `@property`. + +--- + +It's not possible to provide a fallback. + +### --feedback-- + +Think about how you would typically declare a custom property without `@property`. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md new file mode 100644 index 00000000000..132c6482131 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md @@ -0,0 +1,37 @@ +--- +id: 672aa58c389eb9565978495d +title: How Can You Use File Management Applications on Your Computer? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-can-you-use-file-management-applications-on-your-computer +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +Place holder question. + +## --answers-- + +Placeholder answer + +--- + +Placeholder answer + +--- + +Placeholder answer + +--- + +Placeholder answer + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md new file mode 100644 index 00000000000..5784ae24a31 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md @@ -0,0 +1,121 @@ +--- +id: 672ac37104dc2530a769e6a4 +title: What Are Best Practices for Naming Files for Web Applications? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-best-practices-for-naming-files-for-web-applications +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which of the following is a bad example for naming an HTML file? + +## --answers-- + +`index.html` + +### --feedback-- + +Think about the file name that looks complicated. + +--- + +`about-us.html` + +### --feedback-- + +Think about the file name that looks complicated. + +--- + +`file-1!@.html` + +--- + +products.html + +### --feedback-- + +Think about the file name that looks complicated. + +## --video-solution-- + +3 + +## --text-- + +What does the `index.html` file represent? + +## --answers-- + +The main page of a website. + +--- + +A database file used to store user information. + +### --feedback-- + +Think about the main content of a website. + +--- + +A configuration file for server settings. + +### --feedback-- + +Think about the main content of a website. + +--- + +A script file for running server-side code. + +### --feedback-- + +Think about the main content of a website. + +## --video-solution-- + +1 + +## --text-- + +Why are special characters not recommended for file names? + +## --answers-- + +They make files incompatible with all operating systems. + +### --feedback-- + +Think about the purpose of file names. + +--- + +They make it difficult to understand what the file is about. + +--- + +They lead to frequent software crashes. + +### --feedback-- + +Think about the purpose of file names. + +--- + +They make it impossible to transfer files between computers. + +### --feedback-- + +Think about the purpose of file names. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md new file mode 100644 index 00000000000..453eccee336 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md @@ -0,0 +1,121 @@ +--- +id: 672ac39a22b0cc30eb8fd65e +title: What Are Best Practices for File/Folder Organization in Web Applications? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-best-practices-for-file-folder-organization-in-web-applications +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the assets directory used for in a web application? + +## --answers-- + +It's used to store server log files are kept to monitor web application performance. + +### --feedback-- + +Think about where to store files like images and fonts in a project. + +--- + +It's used to store files such as images, fonts, and other resources. + +--- + +It's used to store scripts and tools for testing the web application. + +### --feedback-- + +Think about where to store files like images and fonts in a project. + +--- + +It's used to hold third-party libraries and frameworks. + +### --feedback-- + +Think about where to store files like images and fonts in a project. + +## --video-solution-- + +2 + +## --text-- + +What is a `README.md` file commonly used for in a project? + +## --answers-- + +It's used to store personal information and data collected from users. + +### --feedback-- + +Think about the file that is used to describe the project. + +--- + +It's used to define the structure and schema of the project's database. + +### --feedback-- + +Think about the file that is used to describe the project. + +--- + +It's used to provide useful information about the project. + +--- + +It's used to track and document issues and bugs found in the project. + +### --feedback-- + +Think about the file that is used to describe the project. + +## --video-solution-- + +3 + +## --text-- + +What does the root directory represent in a file system? + +## --answers-- + +It represents the default folder where downloaded files are saved. + +### --feedback-- + +Think about the top level directory in a file system. + +--- + +It holds cached files and data to speed up system operations. + +### --feedback-- + +Think about the top level directory in a file system. + +--- + +It contains logs and diagnostic information about system performance. + +### --feedback-- + +Think about the top level directory in a file system. + +--- + +The starting point for all file paths and contains all other directories and files within it. + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md new file mode 100644 index 00000000000..eb2462a09a9 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md @@ -0,0 +1,121 @@ +--- +id: 672ac3c5d0e9fd31835ff772 +title: How Can You Create, Move, and Delete Files and Folders Using Explorer/Finder? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-to-create-move-and-delete-files-and-folders-using-explorer-finder +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which of these actions permanently removes a file or folder from your computer? + +## --answers-- + +Moving the file to a different folder. + +### --feedback-- + +Think about where files go after you delete them. + +--- + +Renaming the file or folder. + +### --feedback-- + +Think about where files go after you delete them. + +--- + +Emptying the Recycle Bin or Trash. + +--- + +Copying the file or folder to an external drive. + +### --feedback-- + +Think about where files go after you delete them. + +## --video-solution-- + +3 + +## --text-- + +What is the primary difference between copying and moving a file? + +## --answers-- + +Copying creates a duplicate of the file, while moving transfers the original file to a new location. + +--- + +Moving creates a duplicate of the file in a new location, while copying transfers the original file. + +### --feedback-- + +Think about the impact of copying versus moving the original file. + +--- + +There is no difference between copying and moving a file. + +### --feedback-- + +Think about the impact of copying versus moving the original file. + +--- + +Copying deletes the original file, while moving creates a new file. + +### --feedback-- + +Think about the impact of copying versus moving the original file. + +## --video-solution-- + +1 + +## --text-- + +Why are folders important for organizing your computer? + +## --answers-- + +Folders make files more difficult to find. + +### --feedback-- + +Think about why grouping your files can be helpful. + +--- + +Folders are only necessary for storing large files. + +### --feedback-- + +Think about why grouping your files can be helpful. + +--- + +Folders help you categorize and find files efficiently. + +--- + +Folders slow down your computer if you have too many. + +### --feedback-- + +Think about why grouping your files can be helpful. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md new file mode 100644 index 00000000000..eb84602e68b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md @@ -0,0 +1,121 @@ +--- +id: 672ac3f129efbf327742eb33 +title: How Can You Search for Files and Folders on Your Computer? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: how-to-search-for-files-and-folders-on-your-computer +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +If you need to perform a quick search on your Windows PC and cloud files, you should start your search from: + +## --answers-- + +Home + +--- + +A specific folder + +### --feedback-- + +Think about the speed of the search process. Which one is the fastest one? + +--- + +This PC + +### --feedback-- + +Think about the speed of the search process. Which one is the fastest one? + +--- + +Desktop + +### --feedback-- + +Think about the speed of the search process. Which one is the fastest one? + +## --video-solution-- + +1 + +## --text-- + +What is the name of a powerful search tool built into macOS that helps you find files and folder in your entire system quickly? + +## --answers-- + +Explorer + +### --feedback-- + +Think about the search tools available on macOS. + +--- + +Control Center + +### --feedback-- + +Think about the search tools available on macOS. + +--- + +Sidebar + +### --feedback-- + +Think about the search tools available on macOS. + +--- + +Spotlight + +## --video-solution-- + +4 + +## --text-- + +What is the name of the horizontal bar, typically located at the bottom of a Windows computer screen, where you can search for files and folder? + +## --answers-- + +Sidebar + +### --feedback-- + +Think about the search tools available on Windows. + +--- + +Taskbar + +--- + +Spotlight + +### --feedback-- + +Think about the search tools available on Windows. + +--- + +Finder + +### --feedback-- + +Think about the search tools available on Windows. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md new file mode 100644 index 00000000000..d2ba5ab0f0d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md @@ -0,0 +1,121 @@ +--- +id: 672ac403a9ba7732b31c6480 +title: What Are Some Common File Types You Will Work With in Web Applications? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-some-common-file-types-you-will-work-with-in-web-applications +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which file format is best suited for images with sharp edges and transparent backgrounds? + +## --answers-- + +`JPEG` + +### --feedback-- + +Think about the image format needed for logos and icons. + +--- + +`PNG` + +--- + +`GIF` + +### --feedback-- + +Think about the image format needed for logos and icons. + +--- + +`SVG` + +### --feedback-- + +Think about the image format needed for logos and icons. + +## --video-solution-- + +2 + +## --text-- + +Which one of these options is an audio format known for its lossless compression? + +## --answers-- + +`MP3` + +### --feedback-- + +Think about audio quality and file size. Lossless compression results in larger files. + +--- + +`WAV` + +--- + +`SVG` + +### --feedback-- + +Think about audio quality and file size. Lossless compression results in larger files. + +--- + +`MP4` + +### --feedback-- + +Think about audio quality and file size. Lossless compression results in larger files. + +## --video-solution-- + +2 + +## --text-- + +Which one of these options is a modern font format used for web development purposes? + +## --answers-- + +`TTF` + +### --feedback-- + +Think about which font format results in smaller file size and better compression. + +--- + +`WOFF` + +--- + +`GIF` + +### --feedback-- + +Think about which font format results in smaller file size and better compression. + +--- + +`ZIP` + +### --feedback-- + +Think about which font format results in smaller file size and better compression. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672aa74f761c065c9828a95e.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672aa74f761c065c9828a95e.md new file mode 100644 index 00000000000..3412d4da6d5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672aa74f761c065c9828a95e.md @@ -0,0 +1,121 @@ +--- +id: 672aa74f761c065c9828a95e +title: What Are Pseudo-classes, and How Do They Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-pseudo-classes +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +What does the `:hover` pseudo-class do in CSS? + +## --answers-- + +It selects an element when it's clicked. + +### --feedback-- + +Think about a user interaction with the mouse. + +--- + +It selects an element when it's being hovered over by a mouse. + +--- + +It selects the first child element of a parent. + +### --feedback-- + +Think about a user interaction with the mouse. + +--- + +It selects a link after it's been visited. + +### --feedback-- + +Think about a user interaction with the mouse. + +## --video-solution-- + +2 + +## --text-- + +What are pseudo-classes? + +## --answers-- + +They are special CSS keywords that let you select an element based on its state or position. + +--- + +They are used to create new HTML elements. + +### --feedback-- + +Think about how CSS can style elements based on their interaction or position. + +--- + +They change the content of an element. + +### --feedback-- + +Think about how CSS can style elements based on their interaction or position. + +--- + +They are replacements for classes in HTML. + +### --feedback-- + +Think about how CSS can style elements based on their interaction or position. + +## --video-solution-- + +1 + +## --text-- + +What does the `:disabled` pseudo-class do in CSS? + +## --answers-- + +It styles an element when it's disabled. + +--- + +It styles an element when it's being hovered over. + +### --feedback-- + +Think about when a button or input field is not interactive. + +--- + +It styles the first child of a parent element. + +### --feedback-- + +Think about when a button or input field is not interactive. + +--- + +It styles a link after it's been visited. + +### --feedback-- + +Think about when a button or input field is not interactive. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9171a5cca90f2edeea.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9171a5cca90f2edeea.md new file mode 100644 index 00000000000..96c9763d34f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9171a5cca90f2edeea.md @@ -0,0 +1,121 @@ +--- +id: 672bbe9171a5cca90f2edeea +title: What Are Examples of Element User Action Pseudo-classes? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-examples-of-element-user-action-pseudo-classes +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What do user action pseudo-classes allow you to do? + +## --answers-- + +They enable animations and transitions. + +### --feedback-- + +Think about how you can interact with users purely with CSS. + +--- + +They allow you to modify the DOM structure dynamically. + +### --feedback-- + +Think about how you can interact with users purely with CSS. + +--- + +They let you provide feedback to the user without relying on JavaScript. + +--- + +They let you style the last element in a list. + +### --feedback-- + +Think about how you can interact with users purely with CSS. + +## --video-solution-- + +3 + +## --text-- + +What does the `:checked` pseudo-class do in CSS? + +## --answers-- + +It selects an element when it is disabled. + +### --feedback-- + +Think about how forms handle user selections. + +--- + +It selects an element when it is being hovered over. + +### --feedback-- + +Think about how forms handle user selections. + +--- + +It styles elements like checkboxes or radio buttons that are checked. + +--- + +It styles an element when it gains focus. + +### --feedback-- + +Think about how forms handle user selections. + +## --video-solution-- + +3 + +## --text-- + +What does the `:focus` pseudo-class do? + +## --answers-- + +It selects an element when it is hovered over by a mouse. + +### --feedback-- + +Think about how users navigate forms using a keyboard. + +--- + +It applies styles when an element gains focus, usually through keyboard navigation or a click. + +--- + +It selects an element after a form is submitted. + +### --feedback-- + +Think about how users navigate forms using a keyboard. + +--- + +It applies styles to an element when it is disabled. + +### --feedback-- + +Think about how users navigate forms using a keyboard. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9d6ec03ea954d92ff7.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9d6ec03ea954d92ff7.md new file mode 100644 index 00000000000..f7bbb59bbce --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9d6ec03ea954d92ff7.md @@ -0,0 +1,121 @@ +--- +id: 672bbe9d6ec03ea954d92ff7 +title: What Are Examples of Input Pseudo-classes? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-examples-of-input-pseudo-classes +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What does the `:focus` pseudo-class let you do? + +## --answers-- + +It enables you to highlight multiple elements simultaneously. + +### --feedback-- + +Consider how you can draw attention to the active input field purely with CSS. + +--- + +It allows you to style an input element when it is selected or clicked. + +--- + +It lets you automatically submit a form when an input is clicked. + +### --feedback-- + +Consider how you can draw attention to the active input field purely with CSS. + +--- + +It allows you to reorder elements in a form dynamically. + +### --feedback-- + +Consider how you can draw attention to the active input field purely with CSS. + +## --video-solution-- + +2 + +## --text-- + +What can the `:valid` and `:invalid` pseudo-classes be used for in form validation? + +## --answers-- + +They allow you to reset all input fields automatically. + +### --feedback-- + +Think about how you might visually indicate to users whether their input is correct or not. + +--- + +They let you provide different styles for inputs based on whether they meet validation criteria. + +--- + +They let you disable form submission if any field is left empty. + +### --feedback-- + +Think about how you might visually indicate to users whether their input is correct or not. + +--- + +They allow you to change the placeholder text dynamically. + +### --feedback-- + +Think about how you might visually indicate to users whether their input is correct or not. + +## --video-solution-- + +2 + +## --text-- + +Which pseudo-class allows you to style input fields that must be filled out before form submission? + +## --answers-- + +`:optional` + +### --feedback-- + +Think about how you can indicate mandatory fields using CSS. + +--- + +`:disabled` + +### --feedback-- + +Think about how you can indicate mandatory fields using CSS. + +--- + +`:required` + +--- + +`:checked` + +### --feedback-- + +Think about how you can indicate mandatory fields using CSS. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbeaa5afdc5a98d5ab8ff.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbeaa5afdc5a98d5ab8ff.md new file mode 100644 index 00000000000..da751de3a7f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbeaa5afdc5a98d5ab8ff.md @@ -0,0 +1,121 @@ +--- +id: 672bbeaa5afdc5a98d5ab8ff +title: What Are Examples of Location Pseudo-classes? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-examples-of-location-pseudo-classes +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which pseudo-class allows you to style an element that matches the current URL fragment identifier, such as `#section1`? + +## --answers-- + +`:hover` + +### --feedback-- + +Think about how you can highlight a specific section when navigating through in-page links. + +--- + +`:focus` + +### --feedback-- + +Think about how you can highlight a specific section when navigating through in-page links. + +--- + +`:target` + +--- + +`:checked` + +### --feedback-- + +Think about how you can highlight a specific section when navigating through in-page links. + +## --video-solution-- + +3 + +## --text-- + +When are location pseudo-classes particularly useful? + +## --answers-- + +When styling elements based on their sibling relationships. + +### --feedback-- + +Think about how you can style links and targeted elements depending on user interaction. + +--- + +When applying styles based on whether a link is visited or an element is currently in focus. + +--- + +When styling elements based on their parent element's attributes. + +### --feedback-- + +Think about how you can style links and targeted elements depending on user interaction. + +--- + +When adjusting the layout of a webpage dynamically. + +### --feedback-- + +Think about how you can style links and targeted elements depending on user interaction. + +## --video-solution-- + +2 + +## --text-- + +Which pseudo-class is designed to target links that point to the same document but is not currently supported by any browser? + +## --answers-- + +`:any-link` + +### --feedback-- + +Consider the pseudo-class intended for distinguishing internal links from external ones, even though it's not yet supported. + +--- + +`:local-link` + +--- + +`:visited` + +### --feedback-- + +Consider the pseudo-class intended for distinguishing internal links from external ones, even though it's not yet supported. + +--- + +`:target` + +### --feedback-- + +Consider the pseudo-class intended for distinguishing internal links from external ones, even though it's not yet supported. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbeb6eefd7ca9c003ea00.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbeb6eefd7ca9c003ea00.md new file mode 100644 index 00000000000..27f09d38af0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbeb6eefd7ca9c003ea00.md @@ -0,0 +1,121 @@ +--- +id: 672bbeb6eefd7ca9c003ea00 +title: What Are Examples of Tree-structural Pseudo-classes? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-examples-of-tree-structural-pseudo-classes +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is the difference between the `:first-of-type` and `:last-of-type` pseudo-classes? + +## --answers-- + +`:first-of-type` targets the first element of a specific type within its parent, while `:last-of-type` targets the last element of a different type. + +### --feedback-- + +Consider how these pseudo-classes help you style the first and last instances of a particular tag, like `p` or `h1`. + +--- + +`:first-of-type` and `:last-of-type` both target the first occurrence of an element but in different sections of the document. + +### --feedback-- + +Consider how these pseudo-classes help you style the first and last instances of a particular tag, like `p` or `h1`. + +--- + +`:first-of-type` selects the first occurrence of a specific element type within its parent, while `:last-of-type` selects the last occurrence of that same element type within its parent. + +--- + +`:last-of-type` applies styles to the first and last elements within the document, while `:last-of-type` applies styles to all elements of a specific type. + +### --feedback-- + +Consider how these pseudo-classes help you style the first and last instances of a particular tag, like `p` or `h1`. + +## --video-solution-- + +3 + +## --text-- + +What is the difference between the `:first-child` and `:last-child` pseudo-classes? + +## --answers-- + +`:first-child` targets the first element within its parent, while `:last-child` targets the last element within a different parent. + +### --feedback-- + +Think about how the two pseudo-classes help you style the first and last elements within the same parent container. + +--- + +`:first-child` targets the first element within its parent, while `:last-child` targets the last element within the same parent. + +--- + +`:first-child` targets the first element of a specific type within its parent, while `:last-child` targets the last element of a different type within its parent. + +### --feedback-- + +Think about how the two pseudo-classes help you style the first and last elements within the same parent container. + +--- + +`:first-child` targets the first and last elements within a parent, while `:last-child` targets all other elements. + +### --feedback-- + +Think about how the two pseudo-classes help you style the first and last elements within the same parent container. + +## --video-solution-- + +2 + +## --text-- + +Which pseudo-class allows you to target elements that have no children, including those that contain only whitespace? + +## --answers-- + +`:empty` + +--- + +`:first-child` + +### --feedback-- + +Think about how you can style elements that do not have content. + +--- + +`:last-child` + +### --feedback-- + +Think about how you can style elements that do not have content. + +--- + +`:only-of-type` + +### --feedback-- + +Think about how you can style elements that do not have content. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbec3b86dbdaa07a5a5be.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbec3b86dbdaa07a5a5be.md new file mode 100644 index 00000000000..9dba1aed244 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbec3b86dbdaa07a5a5be.md @@ -0,0 +1,125 @@ +--- +id: 672bbec3b86dbdaa07a5a5be +title: What Are Examples of Functional Pseudo-classes? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-examples-of-functional-pseudo-classes +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which pseudo-class works like `:is()`, but doesn't add any specificity to your selectors? + +## --answers-- + +`:not()` + +### --feedback-- + +This pseudo-class is great for applying broad, non-invasive styles. + +--- + +`:has()` + +### --feedback-- + +This pseudo-class is great for applying broad, non-invasive styles. + +--- + +`:where()` + +--- + +`:empty` + +### --feedback-- + +This pseudo-class is great for applying broad, non-invasive styles. + +## --video-solution-- + +3 + +## --text-- + +Which of these is not a functional pseudo-class? + +## --answers-- + +`:is()` + +### --feedback-- + +Functional pseudo-classes use parentheses and accept arguments inside them. + +--- + +`:first-child` + +### --feedback-- + +Functional pseudo-classes use parentheses and accept arguments inside them. + +--- + +`:has()` + +### --feedback-- + +Functional pseudo-classes use parentheses and accept arguments inside them. + +--- + +`:where()` + +### --feedback-- + +Functional pseudo-classes use parentheses and accept arguments inside them. + +## --video-solution-- + +2 + +## --text-- + +Which pseudo-class is perfect for a situation in which you want to apply styles to a group of elements without one or two exceptions? + +## --answers-- + +`:has()` + +### --feedback-- + +Think about how you can exclude specific elements from being styled. + +--- + +`:is()` + +### --feedback-- + +Think about how you can exclude specific elements from being styled. + +--- + +`:not()` + +--- + +`:where()` + +### --feedback-- + +Think about how you can exclude specific elements from being styled. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbed37c6f51aa3a15e78c.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbed37c6f51aa3a15e78c.md new file mode 100644 index 00000000000..ada30de5f27 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbed37c6f51aa3a15e78c.md @@ -0,0 +1,121 @@ +--- +id: 672bbed37c6f51aa3a15e78c +title: What Are Pseudo-elements, and How Do They Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-pseudo-elements +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which of these best describes the relationship between pseudo-elements and their originator element? + +## --answers-- + +Pseudo-elements can exist independently of the originator element. + +### --feedback-- + +Think about how pseudo-elements style or insert content. + +--- + +Pseudo-elements must always be declared before the originator element. + +### --feedback-- + +Think about how pseudo-elements style or insert content. + +--- + +Pseudo-elements depend on the originator element and cannot exist independently. + +--- + +Pseudo-elements are used to create new HTML elements. + +### --feedback-- + +Think about how pseudo-elements style or insert content. + +## --video-solution-- + +3 + +## --text-- + +Which of these correctly distinguishes pseudo-elements from pseudo-classes? + +## --answers-- + +Pseudo-elements use a single colon, while pseudo-classes use a double colon. + +### --feedback-- + +Think about how pseudo-elements are visually represented in CSS. + +--- + +Pseudo-elements use a double colon, while pseudo-classes use a single colon. + +--- + +Both pseudo-elements and pseudo-classes use the same colon notation. + +### --feedback-- + +Think about how pseudo-elements are visually represented in CSS. + +--- + +Pseudo-classes require a double colon, while pseudo-elements do not. + +### --feedback-- + +Think about how pseudo-elements are visually represented in CSS. + +## --video-solution-- + +2 + +## --text-- + +Which of these best describes the function of pseudo-elements in CSS? + +## --answers-- + +They add new HTML elements to the document. + +### --feedback-- + +Think about how pseudo-elements target specific portions of content. + +--- + +They style specific parts of an element's content without adding extra HTML tags. + +--- + +They replace the entire content of an element with new content. + +### --feedback-- + +Think about how pseudo-elements target specific portions of content. + +--- + +They modify the structure of the HTML document. + +### --feedback-- + +Think about how pseudo-elements target specific portions of content. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672aa7194614b55c16b879a1.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672aa7194614b55c16b879a1.md new file mode 100644 index 00000000000..34b631a0e40 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672aa7194614b55c16b879a1.md @@ -0,0 +1,121 @@ +--- +id: 672aa7194614b55c16b879a1 +title: What Are Absolute Units in CSS, and When Should You Use Them? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-absolute-units-in-css +--- + +# --description-- + +Watch the video lecture and answer the questions below. + +# --questions-- + +## --text-- + +What is a pixel? + +## --answers-- + +An absolute fixed-size unit of measurement in CSS, providing precise control over dimensions. + +--- + +A relative unit of measurement in CSS. + +### --feedback-- + +Think about fixed size here. + +--- + +A unit of measurement that is relative to the size of the screen. + +### --feedback-- + +Think about fixed size here. + +--- + +A unit of measurement that is relative to the size of the parent element. + +### --feedback-- + +Think about fixed size here. + +## --video-solution-- + +1 + +## --text-- + +What are the two types of units you can use to define properties in CSS? + +## --answers-- + +`margins` and `padding`. + +### --feedback-- + +Review the beginning of this video for the answer. + +--- + +`cm` and `mm`. + +### --feedback-- + +Review the beginning of this video for the answer. + +--- + +`absolute` and `relative` units. + +--- + +`picas` and `points`. + +### --feedback-- + +Review the beginning of this video for the answer. + +## --video-solution-- + +3 + +## --text-- + +Which of the following is NOT an absolute unit of measurement in CSS? + +## --answers-- + +pt + +### --feedback-- + +Review the list of absolute units in the end of the video + +--- + +rem + +--- + +in + +### --feedback-- + +Review the list of absolute units in the end of the video + +--- + +px + +### --feedback-- + +Review the list of absolute units in the end of the video + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb7d659f0089377a91eab.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb7d659f0089377a91eab.md new file mode 100644 index 00000000000..d5377a72d7e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb7d659f0089377a91eab.md @@ -0,0 +1,128 @@ +--- +id: 672bb7d659f0089377a91eab +title: What Are Percentages in CSS, and When Should You Use Them? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-percentages-in-css +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What happens if you set `width: 50%` on an element whose parent has a `width` of `300px`? + +## --answers-- + +The element will be `150px` wide. + +--- + +The element will be `50px` wide. + +### --feedback-- + +Remember that percentages are relative to the parent element's dimensions. + +--- + +The element will be `600px` wide. + +### --feedback-- + +Remember that percentages are relative to the parent element's dimensions. + +--- + +The element will have no width. + +### --feedback-- + +Remember that percentages are relative to the parent element's dimensions. + +## --video-solution-- + +1 + +## --text-- + +In the following CSS rule, what does the percentage value affect? + + +```css +.box { + margin-top: 10%; +} +``` + +## --answers-- + +The width of the element. + +### --feedback-- + +Consider which property is being set and what it typically relates to. + +--- + +The height of the element. + +### --feedback-- + +Consider which property is being set and what it typically relates to. + +--- + +The top margin of the element. + +--- + +The font size of the element. + +### --feedback-- + +Consider which property is being set and what it typically relates to. + +## --video-solution-- + +3 + +## --text-- + +Which of the following is NOT a good use case for percentage values in CSS? + +## --answers-- + +Setting the `width` of a responsive container. + +### --feedback-- + +Think about which property typically requires more precise control and is less dependent on its parent's dimensions. + +--- + +Defining the `border-radius` of a circular element. + +### --feedback-- + +Think about which property typically requires more precise control and is less dependent on its parent's dimensions. + +--- + +Scaling an image within its container. + +### --feedback-- + +Think about which property typically requires more precise control and is less dependent on its parent's dimensions. + +--- + +Specifying the `line-height` of text. + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb7f08b58df93ed2a8768.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb7f08b58df93ed2a8768.md new file mode 100644 index 00000000000..ec2abc6d20a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb7f08b58df93ed2a8768.md @@ -0,0 +1,121 @@ +--- +id: 672bb7f08b58df93ed2a8768 +title: What Are ems and rems in CSS, and When Should You Use Them? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-ems-and-rems-in-css +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What is an `em` unit relative to? + +## --answers-- + +The font size of the `figure` element. + +### --feedback-- + +Review the beginning of this video for the answer. + +--- + +The `font-size` of the element or the parent element. + +--- + +The `font-size` of the `root` element. + +### --feedback-- + +Review the beginning of this video for the answer. + +--- + +The `font-size` of the `img` element. + +### --feedback-- + +Review the beginning of this video for the answer. + +## --video-solution-- + +2 + +## --text-- + +Why are `rem` units preferred over pixels for typography? + +## --answers-- + +Pixels should always be used for typography. + +### --feedback-- + +Think about user settings and accessibility. + +--- + +They make your designs more colorful. + +### --feedback-- + +Think about user settings and accessibility. + +--- + +They scale proportionally with the user's browser settings. + +--- + +They increase website performance. + +### --feedback-- + +Think about user settings and accessibility. + +## --video-solution-- + +3 + +## --text-- + +What are `rem` units relative to? + +## --answers-- + +The `fontsize` of the `figure` element. + +### --feedback-- + +Review the ending of this video for the answer. + +--- + +The `font-size` of the element or the parent element. + +### --feedback-- + +Review the ending of this video for the answer. + +--- + +The `fontsize` of the `img` element. + +### --feedback-- + +Review the ending of this video for the answer. + +--- + +The `font-size` of the `root` element + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md new file mode 100644 index 00000000000..036c408afba --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md @@ -0,0 +1,121 @@ +--- +id: 672bb83c3a9906945536cff2 +title: What Are vh and vw Units, and When Should You Use Them? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-are-vh-and-vw-units +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +What does `50vh` represent in CSS? + +## --answers-- + +50 pixels. + +### --feedback-- + +Think about what `vh` stands for and how it relates to the viewport. + +--- + +Half the height of the viewport. + +--- + +50% of the element's parent height. + +### --feedback-- + +Think about what `vh` stands for and how it relates to the viewport. + +--- + +Half the width of the viewport. + +### --feedback-- + +Think about what `vh` stands for and how it relates to the viewport. + +## --video-solution-- + +2 + +## --text-- + +Which of the following is a valid use case for `vw` units? + +## --answers-- + +Setting a fixed width for a sidebar. + +### --feedback-- + +Consider which scenario would benefit most from an element's size being directly tied to the viewport width. + +--- + +Defining the maximum width of an image. + +### --feedback-- + +Consider which scenario would benefit most from an element's size being directly tied to the viewport width. + +--- + +Creating a square element that's always 20% of the viewport width. + +--- + +Setting the `line-height` of paragraph text. + +### --feedback-- + +Consider which scenario would benefit most from an element's size being directly tied to the viewport width. + +## --video-solution-- + +3 + +## --text-- + +What potential issue might arise from using `vh` units for critical layout elements on mobile devices? + +## --answers-- + +They're not supported on older mobile browsers. + +### --feedback-- + +Think about how the visible area of a mobile browser can change during user interaction. + +--- + +They can cause layout shifts when the mobile browser's address bar appears or disappears. + +--- + +They make the website load slower on mobile devices. + +### --feedback-- + +Think about how the visible area of a mobile browser can change during user interaction. + +--- + +They don't work with touch screens. + +### --feedback-- + +Think about how the visible area of a mobile browser can change during user interaction. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb851b068e3954a05b9b1.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb851b068e3954a05b9b1.md new file mode 100644 index 00000000000..96ca163dca6 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-relative-and-absolute-units/672bb851b068e3954a05b9b1.md @@ -0,0 +1,121 @@ +--- +id: 672bb851b068e3954a05b9b1 +title: What Is the calc() Function, and How Does It Work? +challengeType: 11 +videoId: nVAaxZ34khk +dashedName: what-is-the-calc-function +--- + +# --description-- + +Watch the lecture video and answer the questions below. + +# --questions-- + +## --text-- + +Which of the following operations can be performed using the `calc()` function in CSS? + +## --answers-- + +Addition and subtraction only. + +### --feedback-- + +Consider what the `calc()` function can be used for and its limitations. + +--- + +Multiplication and division only. + +### --feedback-- + +Consider what the `calc()` function can be used for and its limitations. + +--- + +Addition, subtraction, multiplication, and division. + +--- + +Addition only. + +### --feedback-- + +Consider what the `calc()` function can be used for and its limitations. + +## --video-solution-- + +3 + +## --text-- + +What types of values can be used as operands within the expression passed to the `calc()` function? + +## --answers-- + +Only pixels. + +### --feedback-- + +Think about the versatility of the `calc()` function. + +--- + +Only percentages. + +### --feedback-- + +Think about the versatility of the `calc()` function. + +--- + +Pixels, percentages, `em`'s, and other supported units. + +--- + +Only integers. + +### --feedback-- + +Think about the versatility of the `calc()` function. + +## --video-solution-- + +3 + +## --text-- + +How can you use the `calc()` function to create a responsive design? + +## --answers-- + +By setting fixed widths for the elements. + +### --feedback-- + +Think about the purpose of the `calc()` function in relation to responsive design. + +--- + +By using media queries exclusively. + +### --feedback-- + +Think about the purpose of the `calc()` function in relation to responsive design. + +--- + +By calculating element dimensions based on the viewport size or other elements. + +--- + +By using HTML to dynamically adjust element sizes. + +### --feedback-- + +Think about the purpose of the `calc()` function in relation to responsive design. + +## --video-solution-- + +3 diff --git a/curriculum/superblock-structure/full-stack.json b/curriculum/superblock-structure/full-stack.json index 9baa17f5c7d..ee3e57aac50 100644 --- a/curriculum/superblock-structure/full-stack.json +++ b/curriculum/superblock-structure/full-stack.json @@ -65,6 +65,11 @@ { "dashedName": "computer-basics", "blocks": [ + { + "dashedName": "lecture-understanding-computer-internet-and-tooling-basics" + }, + { "dashedName": "lecture-working-with-file-systems" }, + { "dashedName": "lecture-browsing-the-web-effectively" }, { "dashedName": "review-computer-basics" }, { "dashedName": "quiz-computer-basics" } ] @@ -72,11 +77,17 @@ { "dashedName": "basic-css", "blocks": [ + { "dashedName": "lecture-what-is-css" }, { "dashedName": "workshop-cafe-menu" }, { "dashedName": "lab-business-card" }, + { + "dashedName": "lecture-css-specificity-the-cascade-algorithm-and-inheritance" + }, { "dashedName": "review-basic-css" }, { "dashedName": "quiz-basic-css" }, + { "dashedName": "lecture-styling-lists-and-links" }, { "dashedName": "lab-stylized-to-do-list" }, + { "dashedName": "lecture-working-with-backgrounds-and-borders" }, { "dashedName": "review-css-backgrounds-and-borders" }, { "dashedName": "quiz-css-backgrounds-and-borders" } ] @@ -84,6 +95,9 @@ { "dashedName": "design-for-developers", "blocks": [ + { "dashedName": "lecture-user-interface-design-fundamentals" }, + { "dashedName": "lecture-user-centered-design" }, + { "dashedName": "lecture-common-design-tools" }, { "dashedName": "review-design-fundamentals" }, { "dashedName": "quiz-design-fundamentals" } ] @@ -91,6 +105,9 @@ { "dashedName": "absolute-and-relative-units", "blocks": [ + { + "dashedName": "lecture-working-with-relative-and-absolute-units" + }, { "dashedName": "lab-event-flyer-page" }, { "dashedName": "review-css-relative-and-absolute-units" }, { "dashedName": "quiz-css-relative-and-absolute-units" } @@ -99,6 +116,9 @@ { "dashedName": "pseudo-classes-and-elements", "blocks": [ + { + "dashedName": "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css" + }, { "dashedName": "lab-job-application-form" }, { "dashedName": "review-css-pseudo-classes" }, { "dashedName": "quiz-css-pseudo-classes" } @@ -107,6 +127,7 @@ { "dashedName": "css-colors", "blocks": [ + { "dashedName": "lecture-working-with-colors-in-css" }, { "dashedName": "workshop-colored-markers" }, { "dashedName": "review-css-colors" }, { "dashedName": "quiz-css-colors" } @@ -115,6 +136,7 @@ { "dashedName": "styling-forms", "blocks": [ + { "dashedName": "lecture-best-practices-for-styling-forms" }, { "dashedName": "workshop-registration-form" }, { "dashedName": "lab-contact-form" }, { "dashedName": "review-styling-forms" }, @@ -124,6 +146,9 @@ { "dashedName": "css-box-model", "blocks": [ + { + "dashedName": "lecture-working-with-css-transforms-overflow-and-filters" + }, { "dashedName": "workshop-rothko-painting" }, { "dashedName": "lab-confidential-email-page" }, { "dashedName": "review-css-layout-and-effects" }, @@ -133,6 +158,7 @@ { "dashedName": "css-flexbox", "blocks": [ + { "dashedName": "lecture-working-with-css-flexbox" }, { "dashedName": "workshop-flexbox-photo-gallery" }, { "dashedName": "lab-page-of-playing-cards" }, { "dashedName": "review-css-flexbox" }, @@ -142,6 +168,7 @@ { "dashedName": "css-typography", "blocks": [ + { "dashedName": "lecture-working-with-css-fonts" }, { "dashedName": "workshop-nutritional-label" }, { "dashedName": "lab-newspaper-article" }, { "dashedName": "review-css-typography" }, @@ -151,6 +178,9 @@ { "dashedName": "css-and-accessibility", "blocks": [ + { + "dashedName": "lecture-best-practices-for-accessibility-and-css" + }, { "dashedName": "workshop-accessibility-quiz" }, { "dashedName": "lab-tribute-page" }, { "dashedName": "review-css-accessibility" }, @@ -160,6 +190,7 @@ { "dashedName": "attribute-selectors", "blocks": [ + { "dashedName": "lecture-working-with-attribute-selectors" }, { "dashedName": "workshop-balance-sheet" }, { "dashedName": "lab-book-inventory-app" }, { "dashedName": "review-css-attribute-selectors" }, @@ -169,6 +200,9 @@ { "dashedName": "css-positioning", "blocks": [ + { + "dashedName": "lecture-understanding-how-to-work-with-floats-and-positioning-in-css" + }, { "dashedName": "workshop-cat-painting" }, { "dashedName": "lab-house-painting" }, { "dashedName": "review-css-positioning" }, @@ -178,6 +212,9 @@ { "dashedName": "responsive-design", "blocks": [ + { + "dashedName": "lecture-best-practices-for-responsive-web-design" + }, { "dashedName": "workshop-piano" }, { "dashedName": "lab-technical-documentation-page" }, { "dashedName": "review-responsive-web-design" }, @@ -187,6 +224,7 @@ { "dashedName": "css-variables", "blocks": [ + { "dashedName": "lecture-working-with-css-variables" }, { "dashedName": "workshop-city-skyline" }, { "dashedName": "lab-availability-table" }, { "dashedName": "review-css-variables" }, @@ -196,7 +234,9 @@ { "dashedName": "css-grid", "blocks": [ + { "dashedName": "lecture-working-with-css-grid" }, { "dashedName": "workshop-magazine" }, + { "dashedName": "lecture-debugging-css" }, { "dashedName": "lab-product-landing-page" }, { "dashedName": "review-css-grid" }, { "dashedName": "quiz-css-grid" } @@ -205,6 +245,7 @@ { "dashedName": "css-animations", "blocks": [ + { "dashedName": "lecture-animations-and-accessibility" }, { "dashedName": "lab-moon-orbit" }, { "dashedName": "workshop-flappy-penguin" }, { "dashedName": "lab-personal-portfolio" },