diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-012.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-012.md index 45b63d13fa..9648545e14 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-012.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-012.md @@ -9,7 +9,7 @@ dashedName: step-12 Write a new rule using the `.frame` class selector. -Give the `.frame` a border with the shorthand `border: 50px solid black;` declaration. +Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-014.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-014.md index c956f4f1dc..fbe5ada997 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-014.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-014.md @@ -9,7 +9,7 @@ dashedName: step-14 Use padding to adjust the spacing within an element. -In `.frame`, use the shorthand `padding: 50px;` to increase the space between the top, bottom, left, and right of the frame's border and the canvas within. +In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-015.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-015.md index 3095dac6d3..9861eaeb8b 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-015.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-015.md @@ -9,7 +9,7 @@ dashedName: step-15 Use margins to adjust the spacing outside of an element. -Add the `margin` property to `.frame` and set it to `20px auto` to move the frame down 20 pixels and center it horizontally on the page. +Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-020.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-020.md index d5f8a2372c..49a83bea7b 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-020.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-020.md @@ -9,7 +9,7 @@ dashedName: step-20 Use margins to position the `.one` element on the canvas. -Add the shorthand `margin: 20px auto;` to set the top and bottom margins to 20 pixels, and center it horizontally. +Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-021.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-021.md index 56937eb96f..05d5a03d66 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-021.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-021.md @@ -9,7 +9,7 @@ dashedName: step-21 Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels. -Add `padding: 1px;` to `.canvas` to give the `.one` element something solid to push off of. +Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-022.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-022.md index 0868a267f5..152855cd3d 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-022.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-022.md @@ -9,7 +9,7 @@ dashedName: step-22 Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels. -Replace `padding: 1px;` with `overflow: hidden;` to change the canvas back to its original dimensions. +Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md index 7d50cd91a1..f05d6a986f 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md @@ -11,7 +11,7 @@ It's helpful to have your margins push in one direction. In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels. -In `.two`, add `margin: 0 auto 20px;` to set its top margin to 0, center it horizontally, and set its bottom margin to 20 pixels. +In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md index ebd69ed469..b6df1f5290 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md @@ -9,7 +9,7 @@ dashedName: step-35 The colors and shapes of your painting are too sharp to pass as a Rothko. -Use the `filter` property with the value `blur(2px)` in the `.canvas` element. +Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md index 8043191b4f..df7065a3e7 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md @@ -9,7 +9,7 @@ dashedName: step-41 The corners of each rectangle are still too sharp. -Round each corner of `.one` by 9 pixels with `border-radius: 9px;`. +Round each corner of the `.one` element by 9 pixels, using the `border-radius` property. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md index baf2dfce6f..664ff6c906 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md @@ -7,7 +7,7 @@ dashedName: step-42 # --description-- -Set the `border-radius` of `.two` to `8px 10px`. This will round its top-left and bottom-right corners by 8 pixels, and top-right and bottom-left corners by 10 pixels. +Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md index 6c80c36ae1..09f4b8fcc4 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md @@ -9,7 +9,7 @@ dashedName: step-44 Rotate each rectangle to give them more of an imperfect, hand-painted look. -Use the following to rotate `.one` counter clockwise by 0.6 degrees: `transform: rotate(-0.6deg);` +Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees. # --hints-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md index 05c4fde62c..3536e3fa0a 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md @@ -7,7 +7,7 @@ dashedName: step-45 # --description-- -Rotate `.two` clockwise slightly by adding the `transform` property with the value `rotate(0.4deg)`. +Rotate the `.two` element clockwise by 0.4 degrees. # --hints--