fix(curriculum): improve instructions in rothko-painting (#44816)
* Improved instructions in rothko painting lesson * Removed duplicate line in step 42 * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-012.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-014.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-015.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-021.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-022.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-020.md Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-014.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com>pull/44816/merge
Darshan Vaishya
GitHub
parent
58d7618308
commit
59f21b1d8f
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
|
|
@ -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--
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue