diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-003.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-003.md index cc8eeb7c3b..992c3632b4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-003.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-003.md @@ -32,7 +32,7 @@ const title = document.querySelector('title'); assert.equal(title?.text?.trim()?.toLowerCase(), 'css color markers') ``` -Remember, the casing and spelling matter for the title text +Remember, casing and spelling matter for the title text. ```js const title = document.querySelector('title'); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md index 40367e9c13..ff37109685 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md @@ -17,7 +17,7 @@ p { } ``` -Create a new CSS rule that targets the `h1` element, and set the `text-align` property to `center`. +Create a new CSS rule that targets the `h1` element, and set its `text-align` property to `center`. # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md index 98f4bad10e..540fc56240 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md @@ -9,7 +9,7 @@ dashedName: step-9 Now you'll add some elements that you'll eventually style into color markers. -First, within the `body` element, add a `div` element and set its `class` attribute to `container`. Make sure the `div` element is below the `h1` element. +First, within the `body`, add a `div` element and set its `class` attribute to `container`. Make sure the `div` element is below the `h1` element. # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md index 1e1887f985..4c22a140ed 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md @@ -7,7 +7,7 @@ dashedName: step-10 # --description-- -Next, within the `container` `div`, add another `div` element and set its `class` to `marker`. +Next, within the `div`, add another `div` element and give it a class of `marker`. # --hints-- @@ -23,13 +23,13 @@ Your new `div` element should have a closing tag. assert([...code.matchAll(/<\/div\s*>/gi)][1]); ``` -Your new `div` element should be within the `container` `div` element. +You should nest your new `div` element within the `div` with the class `container`. ```js assert(document.querySelector('.container')?.children[0]?.localName === 'div'); ``` -Your new `div` element should have a `class` attribute set to `marker`. +You should give your new `div` element a class of `container`. ```js const containerChildren = [...document.querySelector('.container')?.children]; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md index adffd59577..dcb98492c8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md @@ -9,7 +9,7 @@ dashedName: step-11 It's time to add some color to the page. Remember that one way to add color to an element is to use a color keyword like `black`, `cyan`, or `yellow`. -Use a class selector to target `marker` and apply a background color to it. As a reminder, here's how to target the `class` `freecodecamp`: +Use a class selector to target the class `marker` and apply a background color to it. As a reminder, here's how to target the class `freecodecamp`: ```css .freecodecamp { @@ -17,11 +17,11 @@ Use a class selector to target `marker` and apply a background color to it. As a } ``` -Create a new CSS rule that targets the `marker` `class`, and set its `background-color` property to `red`. +Create a new CSS rule that targets the class `marker`, and set its `background-color` property to `red`. # --hints-- -You should create a class selector to target the `marker` `class`. +You should create a class selector to target the `marker` class. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md index 1ac42cf00b..119b3dd60d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md @@ -9,7 +9,7 @@ dashedName: step-14 Now that you've got one marker centered with color, it's time to add the other markers. -In the `container` `div`, add two more `div` elements with the `class` `marker`. +In the `container` `div`, add two more `div` elements and give them each a class of `marker`. # --hints-- @@ -37,14 +37,14 @@ Your second new `div` element should have a closing tag. assert([...code.matchAll(/<\/div\s*>/gi)][3]); ``` -Your new `div` elements should be within the `div.container` element. +Your new `div` elements should be within the `div` with the class `container`. ```js const containerChildren = [...document.querySelector('.container')?.children]; assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3); ``` -Your new `div` elements should both have their `class` attributes set to `marker`. +Your new `div` elements should both have a class of `marker`. ```js const containerChildren = [...document.querySelector('.container')?.children]; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-016.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-016.md index c2c4655881..7c4f6b8146 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-016.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-016.md @@ -15,7 +15,7 @@ First, add the `class` `one` to the first marker `div` element. # --hints-- -You should add the `class` `one` to the first marker `div` element in the `container` `div`. +You should add the class `one` to the first marker `div` element. ```js const containerFirstChild = [...document.querySelector('.container')?.children][0]; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-018.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-018.md index c26c1289ea..be7899ed1b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-018.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-018.md @@ -7,11 +7,11 @@ dashedName: step-18 # --description-- -Then, create a new CSS rule that targets the `class` `one` and set its `background-color` property to `red`. +Then, create a new CSS rule that targets the class `one` and set its `background-color` property to `red`. # --hints-- -You should use a class selector to target the `class` `one`. +You should use a class selector to target the class `one`. ```js assert(new __helpers.CSSHelp(document).getStyle('.one')); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-019.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-019.md index 9cc0325d30..47aff680bc 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-019.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-019.md @@ -7,11 +7,11 @@ dashedName: step-19 # --description-- -Add the `class` `two` to the second marker `div`, and the `class` `three` to the third marker `div`. +Add the class `two` to the second marker `div`, and the class `three` to the third marker `div`. # --hints-- -You should add the `class` `two` to the second marker `div` element in the `container` `div`. +You should add the class `two` to the second marker `div` element in the `container` `div`. ```js const containerSecondChild = [...document.querySelector('.container')?.children][1]; @@ -25,7 +25,7 @@ const containerSecondChild = [...document.querySelector('.container')?.children] assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two')); ``` -You should add the `class` `three` to the third marker `div` element in the `container` `div`. +You should add the class `three` to the third marker `div` element in the `container` `div`. ```js const containerThirdChild = [...document.querySelector('.container')?.children][2]; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-020.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-020.md index 6fd3d763cf..0d941cc3ea 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-020.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-020.md @@ -7,13 +7,13 @@ dashedName: step-20 # --description-- -Create a CSS rule that targets the `class` `two` and set its `background-color` property to `green`. +Create a CSS rule that targets the class `two` and set its `background-color` property to `green`. -Also, create a separate CSS rule that targets the `class` `three` and set its `background-color` to `blue`. +Also, create a separate CSS rule that targets the class `three` and set its `background-color` to `blue`. # --hints-- -You should use a class selector to target the `class` `two`. +You should use a class selector to target the class `two`. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')); @@ -25,7 +25,7 @@ Your `.two` CSS rule should have a `background-color` property set to `green`. assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green'); ``` -You should use a class selector to target the `class` `three`. +You should use a class selector to target the class `three`. ```js assert(new __helpers.CSSHelp(document).getStyle('.three')); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-021.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-021.md index 2cf28a3898..2ba6a89265 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-021.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-021.md @@ -11,11 +11,11 @@ Earlier you learned that the RGB color model is additive. This means that colors An easy way to see this is with the CSS `rgb` function. -Create a new CSS rule that targets the `container` `class` and set its `background-color` to black with `rgb(0, 0, 0)`. +Create a new CSS rule that targets the class `container` and set its `background-color` to black with `rgb(0, 0, 0)`. # --hints-- -You should use a class selector to target the `container` `class`. +You should use a class selector to target the class `container`. ```js assert(new __helpers.CSSHelp(document).getStyle('.container')); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-041.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-041.md index 7327a28fe4..0c887a9f4b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-041.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-041.md @@ -9,11 +9,11 @@ dashedName: step-41 Now it's time time to add other details to the markers, starting with the first one. -First, change the `class` attribute of the first marker `div` element from `one` to `red`. +In the first marker `div` element, change the class `one` to `red`. # --hints-- -Your first marker `div` should not have the `class` `one`. +Your first marker `div` should not have the class `one`. ```js const containerFirstChild = [...document.querySelector('.container')?.children][0]; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-042.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-042.md index 2dc71c5cff..bd312d9cea 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-042.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-042.md @@ -7,7 +7,7 @@ dashedName: step-42 # --description-- -Update the `.one` class selector to target the new `red` `class`. +Update the `.one` class selector to target the new `red` class. # --hints-- @@ -17,7 +17,7 @@ Your code should no longer have a `.one` class selector. assert(!new __helpers.CSSHelp(document).getStyle('.one')); ``` -You should use a class selector to target the `class` `red`. +You should use a class selector to target the class `red`. ```js assert(new __helpers.CSSHelp(document).getStyle('.red')); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-044.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-044.md index 3a400f0a34..0e17d99a6c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-044.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-044.md @@ -7,11 +7,11 @@ dashedName: step-44 # --description-- -Next, change the `class` of the second marker `div` from `two` to `green`, and the `class` of the third marker `div` from `three` to `blue`. +Next, change the class `two` to `green` in the second marker `div`, and the class `three` to `blue` in the third marker `div`. # --hints-- -Your second marker `div` should not have the `class` `two`. +Your second marker `div` should not have the class `two`. ```js const containerSecondChild = [...document.querySelector('.container')?.children][1]; @@ -25,7 +25,7 @@ const containerSecondChild = [...document.querySelector('.container')?.children] assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green')); ``` -Your third marker `div` should not have the `class` `three`. +Your third marker `div` should not have the class `three`. ```js const containerThirdChild = [...document.querySelector('.container')?.children][2]; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-045.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-045.md index c015224b13..1484453c26 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-045.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-045.md @@ -7,7 +7,7 @@ dashedName: step-45 # --description-- -Update the CSS class selector `.two` so it targets the new `green` `class`. And update the `.three` selector so it targets the new `blue` `class`. +Update the CSS class selector `.two` so it targets the new `green` class. And update the `.three` selector so it targets the new `blue` class. # --hints-- @@ -17,7 +17,7 @@ Your code should no longer have a `.two` class selector. assert(!new __helpers.CSSHelp(document).getStyle('.two')); ``` -You should use a class selector to target the `class` `green`. +You should use a class selector to target the class `green`. ```js assert(new __helpers.CSSHelp(document).getStyle('.green')); @@ -35,7 +35,7 @@ Your code should no longer have a `.three` class selector. assert(!new __helpers.CSSHelp(document).getStyle('.three')); ``` -You should use a class selector to target the `class` `blue`. +You should use a class selector to target the class `blue`. ```js assert(new __helpers.CSSHelp(document).getStyle('.blue')); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-048.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-048.md index 4371d2018d..2e692827eb 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-048.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-048.md @@ -17,7 +17,7 @@ Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral. -In the `blue` CSS rule, use the `hsl` function to change the `background-color` property to pure blue. Set the hue to `240`, the saturation to `100%`, and the lightness to `50%`. +In the `.blue` CSS rule, use the `hsl` function to change the `background-color` property to pure blue. Set the hue to `240`, the saturation to `100%`, and the lightness to `50%`. # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-054.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-054.md index 2a6ce2ac5b..f0fc01a107 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-054.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-054.md @@ -7,7 +7,7 @@ dashedName: step-54 # --description-- -Color-stops allow you to fine tune where colors are placed along the gradient line. They a length unit like `px` or percentages that follow a color in the `linear-gradient` function. +Color-stops allow you to fine-tune where colors are placed along the gradient line. They a length unit like `px` or percentages that follow a color in the `linear-gradient` function. For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space: diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-070.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-070.md index 6257a38fe8..fc4824f376 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-070.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-070.md @@ -9,18 +9,18 @@ dashedName: step-70 Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker. -Inside the `div.red` element, create a new `div` with the `class` attribute set to `sleeve`. +Inside the red marker `div`, create a new `div` and give it a class of `sleeve`. # --hints-- -Your new `div` element should be within the `div.red` element. +Your new `div` element should be within the red marker's `div` element. ```js const redMarkerChildren = [...document.querySelector('.red')?.children]; assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); ``` -Your new `div` element should have a `class` attribute set to `sleeve`. +Your new `div` element should have a class of `sleeve`. ```js const redMarkerChild = [...document.querySelector('.red')?.children][0]; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-071.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-071.md index fe4024e28c..d682a587c5 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-071.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-071.md @@ -7,13 +7,11 @@ dashedName: step-71 # --description-- -Create a new CSS rule that targets the `class` attribute, `sleeve`. - -Inside the new rule, set the `width` property to `110px`, and the `height` property to `25px`. +Create a new CSS rule that targets the class `sleeve`. Set the `width` property to `110px`, and the `height` property to `25px`. # --hints-- -You should use a class selector to target the `class` attribute, `sleeve`. +You should use a class selector to target class `sleeve`. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-072.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-072.md index 194cb2d554..a481b955ca 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-072.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-072.md @@ -9,7 +9,7 @@ dashedName: step-72 To make the marker look more realistic, give the sleeve a transparent white color. -First, set the `div.sleeve` element's `background-color` to `white`. +First, set the sleeve element's `background-color` to `white`. # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-074.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-074.md index 5b3be310ab..6f08255021 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-074.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-074.md @@ -11,7 +11,7 @@ Another way to set the opacity for an element is with the alpha channel child?.localName === 'div') && redMarkerChildren.length === 2); ``` -Your new `div` element should have a `class` attribute set to `cap`. +Your new `div` element should have a class of `cap`. ```js const redMarkerChildren = [...document.querySelector('div.red')?.children]; assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); ``` -Your `div.cap` element should be before the `div.sleeve` element. +Your cap `div` should be before the sleeve `div`. ```js const redMarkerChildren = [...document.querySelector('div.red')?.children]; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-077.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-077.md index 5ef4781e23..bfbb706917 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-077.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-077.md @@ -7,11 +7,11 @@ dashedName: step-77 # --description-- -Create a new CSS rule to target `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`. +Create a new CSS rule to target the class `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`. # --hints-- -You should use a class selector to target the `class` attribute, `cap`. +You should use a class selector to target the class `cap`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cap')); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-078.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-078.md index 95920408cb..912573d6aa 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-078.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-078.md @@ -7,7 +7,7 @@ dashedName: step-78 # --description-- -It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new `cap` `div` is taking up the entire width of the marker, and is pushing the sleeve down to the next line. +It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new cap `div` is taking up the entire width of the marker, and is pushing the sleeve down to the next line. This is because the default `display` property for `div` elements is `block`. So when two `block` elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other. diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-085.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-085.md index f644d161a0..4cc3e5e9b2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-085.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-085.md @@ -20,7 +20,7 @@ const greenMarkerChildren = [...document.querySelector('.green')?.children]; assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2); ``` -Your green marker's `div.cap` element should be before the `div.sleeve` element. +Your green marker's cap `div` element should be before the sleeve `div` element. ```js const greenMarkerChildren = [...document.querySelector('.green')?.children]; @@ -36,7 +36,7 @@ const blueMarkerChildren = [...document.querySelector('.blue')?.children]; assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2); ``` -Your green marker's `div.cap` element should be before the `div.sleeve` element. +Your green marker's cap `div` element should be before the sleeve `div` element. ```js const blueMarkerChildren = [...document.querySelector('.blue')?.children];