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
@ -19,13 +19,13 @@ You can specify a `border-radius` with pixels. Give your cat photo a `border-rad
|
||||
|
||||
# --hints--
|
||||
|
||||
Your image element should have the class "thick-green-border".
|
||||
Your image element should have the class `thick-green-border`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
Your image should have a border radius of `10px`
|
||||
Your image should have a border radius of `10px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -19,7 +19,7 @@ Here's how you do it:
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
This will set background to black if your variable wasn't set. Note that this can be useful for debugging.
|
||||
This will set background to `black` if your variable wasn't set. Note that this can be useful for debugging.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ For example, if you wanted an element's background color to be `green`, you'd pu
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a class called `silver-background` with the `background-color` of silver. Assign this class to your `div` element.
|
||||
Create a class called `silver-background` with the `background-color` of `silver`. Assign this class to your `div` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ Family names are case-sensitive and need to be wrapped in quotes if there is a s
|
||||
|
||||
# --instructions--
|
||||
|
||||
Import the Lobster font to your web page. Then, use an element selector to set `Lobster` as the `font-family` for your `h2` element.
|
||||
Import the `Lobster` font to your web page. Then, use an element selector to set `Lobster` as the `font-family` for your `h2` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -17,11 +17,11 @@ This means that if you do want to provide a browser fallback, it's as easy as pr
|
||||
|
||||
# --instructions--
|
||||
|
||||
It looks like a variable is being used to set the background color of the `.red-box` class. Let's improve our browser compatibility by adding another `background` declaration right before the existing declaration and set its value to red.
|
||||
It looks like a variable is being used to set the background color of the `.red-box` class. Let's improve our browser compatibility by adding another `background` declaration right before the existing declaration and set its value to `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red-box` rule should include a fallback with the `background` set to red immediately before the existing `background` declaration.
|
||||
Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -13,7 +13,7 @@ Yay! We just proved that inline styles will override all the CSS declarations in
|
||||
|
||||
But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.
|
||||
|
||||
In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use `!important`
|
||||
In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use `!important`.
|
||||
|
||||
Let's go all the way back to our `pink-text` class declaration. Remember that our `pink-text` class was overridden by subsequent class declarations, id declarations, and inline styles.
|
||||
|
||||
@ -39,7 +39,7 @@ Your `h1` element should have the class `blue-text`.
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Your `h1` element should have the id of `orange-text`.
|
||||
Your `h1` element should have the `id` of `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: override-styles-in-subsequent-css
|
||||
|
||||
# --description--
|
||||
|
||||
Our "pink-text" class overrode our `body` element's CSS declaration!
|
||||
Our `pink-text` class overrode our `body` element's CSS declaration!
|
||||
|
||||
We just proved that our classes will override the `body` element's CSS. So the next logical question is, what can we do to override our `pink-text` class?
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ To begin, apply the `monospace` font to the `h2` element, so that it now has two
|
||||
|
||||
In the last challenge, you imported the `Lobster` font using the `link` tag. Now comment out that import of the `Lobster` font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your `h2` element degrades to the `monospace` font.
|
||||
|
||||
**Note:** If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font.
|
||||
**Note:** If you have the `Lobster` font installed on your computer, you won't see the degradation because your browser is able to find the font.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ Your `h2` element should have the class `red-text`.
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Your stylesheet should declare a `red-text` class and have its color set to red.
|
||||
Your stylesheet should declare a `red-text` class and have its color set to `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
|
||||
@ -17,7 +17,7 @@ These four values work like a clock: top, right, bottom, left, and will produce
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use Clockwise Notation to give the ".blue-box" class a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side.
|
||||
Use Clockwise Notation to give the `.blue-box` class a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ Delete your `h2` element's style attribute, and instead create a CSS `style` blo
|
||||
|
||||
# --hints--
|
||||
|
||||
The style attribute should be removed from your `h2` element.
|
||||
The `style` attribute should be removed from your `h2` element.
|
||||
|
||||
```js
|
||||
assert(!$('h2').attr('style'));
|
||||
|
||||
@ -11,11 +11,11 @@ dashedName: use-rgb-values-to-color-elements
|
||||
|
||||
Another way you can represent colors in CSS is by using `RGB` values.
|
||||
|
||||
The RGB value for black looks like this:
|
||||
The `RGB` value for black looks like this:
|
||||
|
||||
`rgb(0, 0, 0)`
|
||||
|
||||
The RGB value for white looks like this:
|
||||
The `RGB` value for white looks like this:
|
||||
|
||||
`rgb(255, 255, 255)`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user