chore(learn): audit files for crowdin (#40838)
* chore(learn): audit files for crowdin Audits the challenge text in the Responsive Web Design superblock to account for words/phrases that should not be translated because they refer to code. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: remove quotes from code Removes instances of quoted code blocks, or code blocked quotes. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: additional uncaught quote-codes Thanks Oliver :) Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: so many quotes Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: missing punctuation Noted in a Crowdin comment. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: remove more quotes Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
4c99d18b2f
commit
427444c757
@ -27,19 +27,19 @@ Change the `background-color` of each `div` element based on the class names (`g
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `hsl()` property to declare the color green.
|
||||
Your code should use the `hsl()` property to declare the color `green`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Your code should use the `hsl()` property to declare the color cyan.
|
||||
Your code should use the `hsl()` property to declare the color `cyan`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Your code should use the `hsl()` property to declare the color blue.
|
||||
Your code should use the `hsl()` property to declare the color `blue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: adjust-the-width-of-an-element-using-the-width-property
|
||||
|
||||
# --description--
|
||||
|
||||
You can specify the width of an element using the `width` property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
|
||||
You can specify the width of an element using the `width` property in CSS. Values can be given in relative length units (such as `em`), absolute length units (such as `px`), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
|
||||
|
||||
```css
|
||||
img {
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: animate-elements-at-variable-rates
|
||||
|
||||
There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an `animation-iteration-count` property and setting `@keyframes` rules.
|
||||
|
||||
To illustrate, the animation on the right consists of two "stars" that each decrease in size and opacity at the 20% mark in the `@keyframes` rule, which creates the twinkle animation. You can change the `@keyframes` rule for one of the elements so the stars twinkle at different rates.
|
||||
To illustrate, the animation on the right consists of two stars that each decrease in size and opacity at the 20% mark in the `@keyframes` rule, which creates the twinkle animation. You can change the `@keyframes` rule for one of the elements so the stars twinkle at different rates.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ The previous challenges covered how to use some of the animation properties and
|
||||
|
||||
`animation-iteration-count: 3;`
|
||||
|
||||
In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.
|
||||
In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to `infinite`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -21,7 +21,7 @@ To keep the ball bouncing on the right on a continuous loop, change the `animati
|
||||
|
||||
# --hints--
|
||||
|
||||
The `animation-iteration-count` property should have a value of infinite.
|
||||
The `animation-iteration-count` property should have a value of `infinite`.
|
||||
|
||||
```js
|
||||
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: animate-multiple-elements-at-variable-rates
|
||||
|
||||
In the previous challenge, you changed the animation rates for two similarly animated elements by altering their `@keyframes` rules. You can achieve the same goal by manipulating the `animation-duration` of multiple elements.
|
||||
|
||||
In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element.
|
||||
In the animation running in the code editor, there are three stars in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -11,15 +11,15 @@ dashedName: center-an-element-horizontally-using-the-margin-property
|
||||
|
||||
Another positioning technique is to center a block element horizontally. One way to do this is to set its `margin` to a value of auto.
|
||||
|
||||
This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the `display` property to block.
|
||||
This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the `display` property to `block`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Center the `div` on the page by adding a `margin` property with a value of auto.
|
||||
Center the `div` on the page by adding a `margin` property with a value of `auto`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `div` should have a `margin` set to auto.
|
||||
The `div` should have a `margin` set to `auto`.
|
||||
|
||||
```js
|
||||
assert(code.match(/margin:\s*?auto;/g));
|
||||
|
||||
@ -20,7 +20,9 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position. **Note:** Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
|
||||
Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.
|
||||
|
||||
**Note:** Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ For the elements with id of `ball1` and `ball2`, add an `animation-timing-functi
|
||||
|
||||
# --hints--
|
||||
|
||||
The value of the `animation-timing-function` property for the element with the id `ball1` should be linear.
|
||||
The value of the `animation-timing-function` property for the element with the id `ball1` should be `linear`.
|
||||
|
||||
```js
|
||||
const ball1Animation = __helpers.removeWhiteSpace(
|
||||
@ -28,7 +28,7 @@ const ball1Animation = __helpers.removeWhiteSpace(
|
||||
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||
```
|
||||
|
||||
The value of the `animation-timing-function` property for the element with the id `ball2` should be ease-out.
|
||||
The value of the `animation-timing-function` property for the element with the id `ball2` should be `ease-out`.
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
|
||||
@ -19,7 +19,7 @@ You may recall from an earlier challenge that the `box-shadow` property takes va
|
||||
|
||||
# --instructions--
|
||||
|
||||
Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to transparent, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and color to blue.
|
||||
Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to `transparent`, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and color to `blue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -35,7 +35,7 @@ The value of the `border-radius` property should be set to `50%`.
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally blue for the color.
|
||||
The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally `blue` for the color.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -24,11 +24,11 @@ One of the most popular shapes in the world is the heart shape, and in this chal
|
||||
}
|
||||
```
|
||||
|
||||
For the `::before` and `::after` pseudo-elements to function properly, they must have a defined `content` property. This property is usually used to add things like a photo or text to the selected element. When the `::before` and `::after` pseudo-elements are used to make shapes, the `content` property is still required, but it's set to an empty string. In the above example, the element with the class of `heart` has a `::before` pseudo-element that produces a yellow rectangle with `height` and `width` of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the `left` and 50px above the `top` of the element.
|
||||
For the `::before` and `::after` pseudo-elements to function properly, they must have a defined `content` property. This property is usually used to add things like a photo or text to the selected element. When the `::before` and `::after` pseudo-elements are used to make shapes, the `content` property is still required, but it's set to an empty string. In the above example, the element with the class of `heart` has a `::before` pseudo-element that produces a yellow rectangle with height and width of `50px` and `70px`, respectively. This rectangle has round corners due to its 25% `border-radius` and is positioned absolutely at `5px` from the left and `50px` above the top of the element.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Transform the element on the screen to a heart. In the `heart::after` selector, change the `background-color` to pink and the `border-radius` to 50%.
|
||||
Transform the element on the screen to a heart. In the `heart::after` selector, change the `background-color` to `pink` and the `border-radius` to 50%.
|
||||
|
||||
Next, target the element with the class `heart` (just `heart`) and fill in the `transform` property. Use the `rotate()` function with -45 degrees.
|
||||
|
||||
@ -36,7 +36,7 @@ Finally, in the `heart::before` selector, set its `content` property to an empty
|
||||
|
||||
# --hints--
|
||||
|
||||
The `background-color` property of the `heart::after` selector should be pink.
|
||||
The `background-color` property of the `heart::after` selector should be `pink`.
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
|
||||
@ -27,13 +27,13 @@ Align the `h4` tag's text, which says "Google", to the center. Then justify the
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the text-align property on the `h4` tag to set it to center.
|
||||
Your code should use the text-align property on the `h4` tag to set it to `center`.
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-align') == 'center');
|
||||
```
|
||||
|
||||
Your code should use the text-align property on the `p` tag to set it to justify.
|
||||
Your code should use the text-align property on the `p` tag to set it to `justify`.
|
||||
|
||||
```js
|
||||
assert($('p').css('text-align') == 'justify');
|
||||
|
||||
@ -21,7 +21,7 @@ This is different than the outdated RYB color model that many of us were taught
|
||||
|
||||
There are many color picking tools available online that have an option to find the complement of a color.
|
||||
|
||||
**Note:** For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
|
||||
**Note:** Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ For the element with the id of `ball1`, change the value of the `animation-timin
|
||||
|
||||
# --hints--
|
||||
|
||||
The value of the `animation-timing-function` property for the element with the id `ball1` should be the linear-equivalent cubic-bezier function.
|
||||
The value of the `animation-timing-function` property for the element with the id `ball1` should be the linear-equivalent `cubic-bezier` function.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -37,11 +37,11 @@ For the element with the `anim` id, the code snippet above sets the `animation-n
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create an animation for the element with the id `rect`, by setting the `animation-name` to rainbow and the `animation-duration` to 4 seconds. Next, declare a `@keyframes` rule, and set the `background-color` at the beginning of the animation (`0%`) to blue, the middle of the animation (`50%`) to green, and the end of the animation (`100%`) to yellow.
|
||||
Create an animation for the element with the id `rect`, by setting the `animation-name` to `rainbow` and the `animation-duration` to 4 seconds. Next, declare a `@keyframes` rule, and set the `background-color` at the beginning of the animation (`0%`) to blue, the middle of the animation (`50%`) to green, and the end of the animation (`100%`) to yellow.
|
||||
|
||||
# --hints--
|
||||
|
||||
The element with id of `rect` should have an `animation-name` property with a value of rainbow.
|
||||
The element with id of `rect` should have an `animation-name` property with a value of `rainbow`.
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-name') == 'rainbow');
|
||||
@ -53,25 +53,25 @@ The element with id of `rect` should have an `animation-duration` property with
|
||||
assert($('#rect').css('animation-duration') == '4s');
|
||||
```
|
||||
|
||||
The `@keyframes` rule should use the `animation-name` of rainbow.
|
||||
The `@keyframes` rule should use the `animation-name` of `rainbow`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||
```
|
||||
|
||||
The `@keyframes` rule for rainbow should use a `background-color` of blue at 0%.
|
||||
The `@keyframes` rule for `rainbow` should use a `background-color` of `blue` at 0%.
|
||||
|
||||
```js
|
||||
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||
```
|
||||
|
||||
The `@keyframes` rule for rainbow should use a `background-color` of green at 50%.
|
||||
The `@keyframes` rule for `rainbow` should use a `background-color` of `green` at 50%.
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||
```
|
||||
|
||||
The `@keyframes` rule for rainbow should use a `background-color` of yellow at 100%.
|
||||
The `@keyframes` rule for rainbow should use a `background-color` of `yellow` at 100%.
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
||||
|
||||
The next option for the CSS `position` property is `absolute`, which locks the element in place relative to its parent container. Unlike the `relative` position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.
|
||||
|
||||
One nuance with absolute positioning is that it will be locked relative to its closest *positioned* ancestor. If you forget to add a position rule to the parent item, (this is typically done using `position: relative;`), the browser will keep looking up the chain and ultimately default to the body tag.
|
||||
One nuance with absolute positioning is that it will be locked relative to its closest *positioned* ancestor. If you forget to add a position rule to the parent item, (this is typically done using `position: relative;`), the browser will keep looking up the chain and ultimately default to the `body` tag.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -15,17 +15,17 @@ The one-second long heartbeat animation consists of two animated pieces. The `he
|
||||
|
||||
# --instructions--
|
||||
|
||||
Keep the heart beating by adding the `animation-iteration-count` property for both the `back` class and the `heart` class and setting the value to infinite. The `heart:before` and `heart:after` selectors do not need any animation properties.
|
||||
Keep the heart beating by adding the `animation-iteration-count` property for both the `back` class and the `heart` class and setting the value to `infinite`. The `heart:before` and `heart:after` selectors do not need any animation properties.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `animation-iteration-count` property for the `heart` class should have a value of infinite.
|
||||
The `animation-iteration-count` property for the `heart` class should have a value of `infinite`.
|
||||
|
||||
```js
|
||||
assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
The `animation-iteration-count` property for the `back` class should have a value of infinite.
|
||||
The `animation-iteration-count` property for the `back` class should have a value of `infinite`.
|
||||
|
||||
```js
|
||||
assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: move-a-relatively-positioned-element-with-css-offsets
|
||||
|
||||
# --description--
|
||||
|
||||
The CSS offsets of `top` or `bottom`, and `left` or `right` tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the `h2` downwards. Likewise, using a left offset moves an item to the right.
|
||||
The CSS offsets of `top` or `bottom`, and `left` or `right` tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the `top` offset moved the `h2` downwards. Likewise, using a `left` offset moves an item to the right.
|
||||
|
||||
<img src='https://cdn-media-1.freecodecamp.org/imgr/eWWi3gZ.gif' alt=''>
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The element with the id `red` should no longer have the `animation-timing-function` property of linear.
|
||||
The element with the id `red` should no longer have the `animation-timing-function` property of `linear`.
|
||||
|
||||
```js
|
||||
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
|
||||
@ -13,7 +13,7 @@ To strikethrough text, which is when a horizontal line cuts across the character
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wrap the `s` tag around "Google" inside the `h4` tag and then add the word "Alphabet" beside it, which should not have the strikethrough formatting.
|
||||
Wrap the `s` tag around `Google` inside the `h4` tag and then add the word `Alphabet` beside it, which should not have the strikethrough formatting.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -23,7 +23,7 @@ Your code should add one `s` tag to the markup.
|
||||
assert($('s').length == 1);
|
||||
```
|
||||
|
||||
A `s` tag should wrap around the Google text in the `h4` tag. It should not contain the word Alphabet.
|
||||
A `s` tag should wrap around the `Google` text in the `h4` tag. It should not contain the word `Alphabet`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should include the word "Alphabet" in the `h4` tag, without strikethrough formatting.
|
||||
You should include the word `Alphabet` in the `h4` tag, without strikethrough formatting.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -13,7 +13,7 @@ To make text bold, you can use the `strong` tag. This is often used to draw atte
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wrap a `strong` tag around "Stanford University" inside the `p` tag (do not include the period).
|
||||
Wrap a `strong` tag around `Stanford University` text inside the `p` tag (do not include the period).
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Transform the text of the `h4` to be uppercase using the `text-transform` proper
|
||||
|
||||
# --hints--
|
||||
|
||||
The `h4` text should be uppercase.
|
||||
The `h4` text should be `uppercase`.
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-transform') === 'uppercase');
|
||||
|
||||
@ -13,7 +13,7 @@ To underline text, you can use the `u` tag. This is often used to signify that a
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wrap the `u` tag only around the text "Ph.D. students".
|
||||
Wrap the `u` tag only around the text `Ph.D. students`.
|
||||
|
||||
**Note:** Try to avoid using the `u` tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user