mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-30 16:01:14 -04:00
fix(curriculum): small fixes in cat painting project (#54918)
This commit is contained in:
@@ -11,7 +11,7 @@ As you did for the left ear, rotate the right ear at 45 degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `transform` property of your `.right-ear` element to `rotate(45deg)`. Don't forget to add a semi-colon.
|
||||
You should set the `transform` property of your `.cat-right-ear` element to `rotate(45deg)`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)')
|
||||
|
||||
@@ -11,7 +11,7 @@ The ears should always be placed above the part of the head it overlaps. You can
|
||||
|
||||
`z-index` is a property you can use to define the order of overlapping HTML elements. Any element with a higher `z-index` will always be positioned over an element with a lower `z-index`.
|
||||
|
||||
To see `z-index` in action, set the `z-index`property of the left ear to `-1`.
|
||||
To see `z-index` in action, set the `z-index` property of the left ear to `-1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-33
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `z-index`property of the right ear to `1` so it always stays over the head.
|
||||
Set the `z-index` property of the right ear to `1` so it always stays over the head.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-40
|
||||
|
||||
You will now start working on the cat's eyes. Like the ears, the eyes will have inner eyes.
|
||||
|
||||
Create a `div` element with the class `cat-eyes`. Inside the `cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively.
|
||||
Create a `div` element with the class `cat-eyes`. Inside the `.cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ Inside the `.cat-right-eye` element, create another `div` element with the class
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with the class `cat-left-eye`.
|
||||
You should not change the existing `div` element with the class `cat-right-eye`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-right-eye').length === 1);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-44
|
||||
|
||||
# --description--
|
||||
|
||||
Move the left eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `39px`.
|
||||
Move the left eye into position with a `position` property of `absolute`, a `top` of `54px`, and a `left` of `39px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -13,13 +13,13 @@ Create a `div` element with the class `cat-mouth`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element.
|
||||
You should create a `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 13)
|
||||
```
|
||||
|
||||
Your `div` element should have the class `cat-mouth`
|
||||
Your `div` element should have the class `cat-mouth`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')[12].classList.contains('cat-mouth'))
|
||||
|
||||
@@ -11,7 +11,7 @@ Using a class selector, give your `.cat-mouth-line-left` element a `position` of
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `cat-mouth-line-left` selector.
|
||||
You should have a `.cat-mouth-line-left` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left'))
|
||||
|
||||
@@ -11,7 +11,7 @@ Using the `transform` property, rotate the left mouth line at `170` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(170deg)`.
|
||||
Your `.cat-mouth-line-left` selector should have a `transform` property set to `rotate(170deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.transform === 'rotate(170deg)')
|
||||
|
||||
@@ -11,7 +11,7 @@ Rotate the right mouth line at `165` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(165deg)`.
|
||||
Your `.cat-mouth-line-right` selector should have a `transform` property set to `rotate(165deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.transform === 'rotate(165deg)')
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-79
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to target the `cat-whisker-right-middle` element, then move the right middle whisker into position with a `position` of `absolute`, a `top` of `127px`, and a `left` of `109px`.
|
||||
Use a class selector to target the `.cat-whisker-right-middle` element, then move the right middle whisker into position with a `position` of `absolute`, a `top` of `127px`, and a `left` of `109px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-16
|
||||
|
||||
You should now center the cat head.
|
||||
|
||||
Give the `.cat-head` element a position property set to `absolute`. Set a value of `0` for the `right`, `left`, `top`, `bottom` properties, then set its `margin` property on all sides to `auto`. That's one way to center an element vertically and horizontally using CSS positioning.
|
||||
Give the `.cat-head` element a `position` property set to `absolute`. Set a value of `0` for the `right`, `left`, `top`, `bottom` properties, then set its `margin` property on all sides to `auto`. That's one way to center an element vertically and horizontally using CSS positioning.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user