fix(curriculum): make notation of class names consistent (#47594)

* fix(curriculum): make notation of class names consistent

* fix: add missing dot in class selector

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
sidemt
2022-09-24 05:28:08 +09:00
committed by GitHub
parent 7a366dc793
commit 3776f2c12e
11 changed files with 14 additions and 14 deletions

View File

@@ -7,7 +7,7 @@ dashedName: step-9
# --description--
Give your background buildings element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`.
Give your `.background-buildings` element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`.
# --hints--

View File

@@ -7,7 +7,7 @@ dashedName: step-14
# --description--
Now you have something that is resembling a building. You are ready to create your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `.bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
Now you have something that is resembling a building. You are ready to create your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
# --hints--

View File

@@ -13,7 +13,7 @@ Add the variable `--building-color1` you created in the previous step as the val
# --hints--
The `background-color` of the `bb1a` element should be set.
The `background-color` of the `.bb1a` element should be set.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)

View File

@@ -11,7 +11,7 @@ Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.b
# --hints--
The `background-color` of the `bb1b` element should be set.
The `background-color` of the `.bb1b` element should be set.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
@@ -23,7 +23,7 @@ You should use `var(--building-color1)` to set the `background-color` of the `.b
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
```
The `background-color` of the `bb1c` element should be set.
The `background-color` of the `.bb1c` element should be set.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
@@ -35,7 +35,7 @@ You should use `var(--building-color1)` to set the `background-color` of the `.b
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
```
The `background-color` of the `bb1d` element should be set.
The `background-color` of the `.bb1d` element should be set.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)

View File

@@ -7,7 +7,7 @@ dashedName: step-18
# --description--
Your first building looks pretty good now. Nest three new `div` elements in the `background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background.
Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background.
# --hints--

View File

@@ -7,7 +7,7 @@ dashedName: step-21
# --description--
The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.
The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `.background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.
# --hints--

View File

@@ -7,7 +7,7 @@ dashedName: step-28
# --description--
The background buildings are starting to look pretty good. Create a new `div` below the `background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings.
The background buildings are starting to look pretty good. Create a new `div` below the `.background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings.
# --hints--

View File

@@ -7,7 +7,7 @@ dashedName: step-29
# --description--
You want the foreground buildings container to sit directly on top of the background buildings element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner.
You want the `.foreground-buildings` container to sit directly on top of the `.background-buildings` element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner.
# --hints--

View File

@@ -7,7 +7,7 @@ dashedName: step-32
# --description--
Add the same `display`, `align-items`, and `justify-content` properties and values to `foreground-buildings` that you used on `background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container.
Add the same `display`, `align-items`, and `justify-content` properties and values to `.foreground-buildings` that you used on `.background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container.
# --hints--

View File

@@ -29,7 +29,7 @@ You should remove the `top` property from `.foreground-buildings`.
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
```
You should add the `position` property of `absolute` to `.background-buildings, foreground-buildings`.
You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`.
```js
function eitherOr() {
@@ -39,7 +39,7 @@ function eitherOr() {
assert.equal(eitherOr()?.position, 'absolute');
```
You should add the `top` property of `0` to `.background-buildings, foreground-buildings`.
You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`.
```js
function eitherOr() {

View File

@@ -7,7 +7,7 @@ dashedName: step-71
# --description--
The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `.window-wrap`, and add these properties to it:
The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`, and add these properties to it:
```css
display: flex;