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
@ -9,11 +9,11 @@ dashedName: add-an-accessible-date-picker
|
||||
|
||||
# --description--
|
||||
|
||||
Forms often include the `input` field, which can be used to create several different form controls. The `type` attribute on this element indicates what kind of input will be created.
|
||||
Forms often include the `input` field, which can be used to create several different form controls. The `type` attribute on this element indicates what kind of `input` element will be created.
|
||||
|
||||
You may have noticed the `text` and `submit` input types in prior challenges, and HTML5 introduced an option to specify a `date` field. Depending on browser support, a date picker shows up in the `input` field when it's in focus, which makes filling in a form easier for all users.
|
||||
|
||||
For older browsers, the type will default to `text`, so it helps to show users the expected date format in the label or as placeholder text just in case.
|
||||
For older browsers, the type will default to `text`, so it helps to show users the expected date format in the `label` or `placeholder` text just in case.
|
||||
|
||||
Here's an example:
|
||||
|
||||
@ -24,7 +24,7 @@ Here's an example:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an `input` tag with a `type` attribute of "date", an `id` attribute of "pickdate", and a `name` attribute of "date".
|
||||
Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an `input` tag with a `type` attribute of `date`, an `id` attribute of `pickdate`, and a `name` attribute of `date`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -34,19 +34,19 @@ Your code should add one `input` tag for the date selector field.
|
||||
assert($('input').length == 2);
|
||||
```
|
||||
|
||||
Your `input` tag should have a `type` attribute with a value of date.
|
||||
Your `input` tag should have a `type` attribute with a value of `date`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('type') == 'date');
|
||||
```
|
||||
|
||||
Your `input` tag should have an `id` attribute with a value of pickdate.
|
||||
Your `input` tag should have an `id` attribute with a value of `pickdate`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('id') == 'pickdate');
|
||||
```
|
||||
|
||||
Your `input` tag should have a `name` attribute with a value of date.
|
||||
Your `input` tag should have a `name` attribute with a value of `date`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('name') == 'date');
|
||||
|
||||
@ -15,11 +15,11 @@ Screen readers do this by reading the link text, or what's between the anchor (`
|
||||
|
||||
# --instructions--
|
||||
|
||||
The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (`a`) tags so they wrap around the text "information about batteries" instead of "Click here".
|
||||
The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (`a`) tags so they wrap around the text `information about batteries` instead of `Click here`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should move the anchor `a` tags from around the words "Click here" to wrap around the words "information about batteries".
|
||||
Your code should move the anchor `a` tags from around the words `Click here` to wrap around the words `information about batteries`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -26,7 +26,7 @@ Here's an example:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an `audio` element after the `p`. Include the `controls` attribute. Then place a `source` tag inside the `audio` tags with the `src` attribute set to "`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`" and `type` attribute set to "audio/mpeg".
|
||||
Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an `audio` element after the `p`. Include the `controls` attribute. Then place a `source` tag inside the `audio` tags with the `src` attribute set to `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`.
|
||||
|
||||
**Note:** The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.
|
||||
|
||||
|
||||
@ -35,29 +35,29 @@ Here's an example of the CSS rules that accomplish this:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an `sr-only` class, but the CSS rules aren't filled in yet. Give the `position` an absolute value, the `left` a -10000px value, and the `width` and `height` both 1px values.
|
||||
Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an `sr-only` class, but the CSS rules aren't filled in yet. Give the `position` an `absolute` value, the `left` a `-10000px` value, and the `width` and `height` both `1px` values.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should set the `position` property of the `sr-only` class to a value of absolute.
|
||||
Your code should set the `position` property of the `sr-only` class to a value of `absolute`.
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
Your code should set the `left` property of the `sr-only` class to a value of -10000px.
|
||||
Your code should set the `left` property of the `sr-only` class to a value of `-10000px`.
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('left') == '-10000px');
|
||||
```
|
||||
|
||||
Your code should set the `width` property of the `sr-only` class to a value of 1 pixel.
|
||||
Your code should set the `width` property of the `sr-only` class to a value of `1` pixel.
|
||||
|
||||
```js
|
||||
assert(code.match(/width:\s*?1px/gi));
|
||||
```
|
||||
|
||||
Your code should set the `height` property of the `sr-only` class to a value of 1 pixel.
|
||||
Your code should set the `height` property of the `sr-only` class to a value of `1` pixel.
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?1px/gi));
|
||||
|
||||
@ -19,29 +19,29 @@ Here's an example:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an `accesskey` attribute to both links and set the first one to "g" (for Garfield) and the second one to "c" (for Chuck Norris).
|
||||
Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an `accesskey` attribute to both links and set the first one to `g` (for Garfield) and the second one to `c` (for Chuck Norris).
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should add an `accesskey` attribute to the `a` tag with the `id` of "first".
|
||||
Your code should add an `accesskey` attribute to the `a` tag with the `id` of `first`.
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey'));
|
||||
```
|
||||
|
||||
Your code should add an `accesskey` attribute to the `a` tag with the `id` of "second".
|
||||
Your code should add an `accesskey` attribute to the `a` tag with the `id` of `second`.
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey'));
|
||||
```
|
||||
|
||||
Your code should set the `accesskey` attribute on the `a` tag with the `id` of "first" to "g". Note that case matters.
|
||||
Your code should set the `accesskey` attribute on the `a` tag with the `id` of `first` to `g`. Note that case matters.
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey') == 'g');
|
||||
```
|
||||
|
||||
Your code should set the `accesskey` attribute on the `a` tag with the `id` of "second" to "c". Note that case matters.
|
||||
Your code should set the `accesskey` attribute on the `a` tag with the `id` of `second` to `c`. Note that case matters.
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey') == 'c');
|
||||
|
||||
@ -17,7 +17,7 @@ Here's an example:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat's Mortal Kombat survey results are in! Wrap a `time` tag around the text "Thursday, September 15<sup>th</sup>" and add a `datetime` attribute to it set to "2016-09-15".
|
||||
Camper Cat's Mortal Kombat survey results are in! Wrap a `time` tag around the text `Thursday, September 15<sup>th<sup>` and add a `datetime` attribute to it set to `2016-09-15`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ Certain elements, such as links and form controls, automatically receive keyboar
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a `tabindex` attribute to the `p` tag and set its value to `"0"`. Bonus - using `tabindex` also enables the CSS pseudo-class `:focus` to work on the `p` tag.
|
||||
Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a `tabindex` attribute to the `p` tag and set its value to `0`. Bonus - using `tabindex` also enables the CSS pseudo-class `:focus` to work on the `p` tag.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -23,29 +23,29 @@ Here's an example:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search `input` and submit `input` form controls to be the first two items in the tab order. Add a `tabindex` attribute set to `"1"` to the search `input`, and a `tabindex` attribute set to `"2"` to the submit `input`.
|
||||
Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search `input` and submit `input` form controls to be the first two items in the tab order. Add a `tabindex` attribute set to `1` to the `search` `input`, and a `tabindex` attribute set to `2` to the `submit` `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should add a `tabindex` attribute to the search `input` tag.
|
||||
Your code should add a `tabindex` attribute to the `search` `input` tag.
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex'));
|
||||
```
|
||||
|
||||
Your code should add a `tabindex` attribute to the submit `input` tag.
|
||||
Your code should add a `tabindex` attribute to the `submit` `input` tag.
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex'));
|
||||
```
|
||||
|
||||
Your code should set the `tabindex` attribute on the search `input` tag to a value of 1.
|
||||
Your code should set the `tabindex` attribute on the `search` `input` tag to a value of 1.
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex') == '1');
|
||||
```
|
||||
|
||||
Your code should set the `tabindex` attribute on the submit `input` tag to a value of 2.
|
||||
Your code should set the `tabindex` attribute on the `submit` `input` tag to a value of 2.
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex') == '2');
|
||||
|
||||
@ -15,14 +15,11 @@ Determining whether content can stand alone is usually a judgement call, but the
|
||||
|
||||
Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.
|
||||
|
||||
**Note about `section` and `div`**
|
||||
The `section` element is also new with HTML5, and has a slightly different semantic meaning than `article`. An `article` is for standalone content, and a `section` is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the `article`, then each chapter is a `section`. When there's no relationship between groups of content, then use a `div`.
|
||||
**Note:** The `section` element is also new with HTML5, and has a slightly different semantic meaning than `article`. An `article` is for standalone content, and a `section` is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the `article`, then each chapter is a `section`. When there's no relationship between groups of content, then use a `div`.
|
||||
|
||||
```html
|
||||
<div> - groups content
|
||||
<section> - groups related content
|
||||
<article> - groups independent, self-contained content
|
||||
```
|
||||
`<div>` - groups content
|
||||
`<section>` - groups related content
|
||||
`<article>` - groups independent, self-contained content
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@ Here's an example:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons and learned from our last lesson to use label tags with `for` attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the `div` tag surrounding the radio buttons to a `fieldset` tag, and change the `p` tag inside it to a `legend`.
|
||||
Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons and learned from our last lesson to use `label` tags with `for` attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the `div` tag surrounding the radio buttons to a `fieldset` tag, and change the `p` tag inside it to a `legend`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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)`
|
||||
|
||||
|
||||
@ -17,11 +17,11 @@ Here's an example submit button:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a button as the last element of your `form` element with a type of `submit`, and "Submit" as its text.
|
||||
Add a button as the last element of your `form` element with a type of `submit`, and `Submit` as its text.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your form should have a button inside it.
|
||||
Your `form` should have a `button` inside it.
|
||||
|
||||
```js
|
||||
assert($('form').children('button').length > 0);
|
||||
|
||||
@ -29,7 +29,7 @@ You should add a `placeholder` attribute to the existing text `input` element.
|
||||
assert($('input[placeholder]').length > 0);
|
||||
```
|
||||
|
||||
You should set the value of your placeholder attribute to `cat photo URL`.
|
||||
You should set the value of your `placeholder` attribute to `cat photo URL`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
|
||||
You can set a checkbox or radio button to be checked by default using the `checked` attribute.
|
||||
|
||||
To do this, just add the word "checked" to the inside of an input element. For example:
|
||||
To do this, just add the word `checked` to the inside of an input element. For example:
|
||||
|
||||
`<input type="radio" name="test-name" checked>`
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ For example:
|
||||
</ul>
|
||||
```
|
||||
|
||||
would create a bullet point style list of "milk" and "cheese".
|
||||
would create a bullet point style list of `milk` and `cheese`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ Add a pair of radio buttons to your form, each nested in its own `label` element
|
||||
|
||||
# --hints--
|
||||
|
||||
Your page should have two radio button elements.
|
||||
Your page should have two `radio` button elements.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').length > 1);
|
||||
|
||||
@ -22,7 +22,7 @@ For example:
|
||||
</ol>
|
||||
```
|
||||
|
||||
would create a numbered list of "Garfield" and "Sylvester".
|
||||
would create a numbered list of `Garfield` and `Sylvester`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ Web developers traditionally use <dfn>lorem ipsum text</dfn> as placeholder text
|
||||
|
||||
Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.
|
||||
|
||||
Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called "kitty ipsum text".
|
||||
Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called "kitty ipsum" text.
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -21,7 +21,7 @@ Replace the text inside your `p` element with the first few words of this kitty
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` element should contain the first few words of the provided `kitty ipsum text`.
|
||||
Your `p` element should contain the first few words of the provided "kitty ipsum" text.
|
||||
|
||||
```js
|
||||
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
|
||||
|
||||
@ -17,7 +17,7 @@ You can create a paragraph element like this:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a `p` element below your `h2` element, and give it the text "Hello Paragraph".
|
||||
Create a `p` element below your `h2` element, and give it the text `Hello Paragraph`.
|
||||
|
||||
**Note:** As a convention, all HTML tags are written in lowercase, for example `<p></p>` and not `<P></P>`.
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ Create an `a` element that links to `https://freecatphotoapp.com` and has "cat p
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `a` element should have the anchor text of "cat photos".
|
||||
Your `a` element should have the anchor text of `cat photos`.
|
||||
|
||||
```js
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
|
||||
@ -21,15 +21,15 @@ Below is an example of an internal anchor link and its target element:
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
When users click the Contacts link, they'll be taken to the section of the webpage with the **Contacts** header element.
|
||||
When users click the `Contacts` link, they'll be taken to the section of the webpage with the **Contacts** header element.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change your external link to an internal link by changing the `href` attribute to "#footer" and the text from "cat photos" to "Jump to Bottom".
|
||||
Change your external link to an internal link by changing the `href` attribute to `"#footer"` and the text from `cat photos` to `Jump to Bottom`.
|
||||
|
||||
Remove the `target="_blank"` attribute from the anchor tag since this causes the linked document to open in a new window tab.
|
||||
|
||||
Then add an `id` attribute with a value of "footer" to the `<footer>` element at the bottom of the page.
|
||||
Then add an `id` attribute with a value of `footer` to the `<footer>` element at the bottom of the page.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ You can nest links within other text elements.
|
||||
|
||||
Let's break down the example: Normal text is wrapped in the `p` element:
|
||||
`<p> Here's a ... for you to follow. </p>` Next is the *anchor* element `<a>` (which requires a closing tag `</a>`):
|
||||
`<a> ... </a>` `target` is an anchor tag attribute that specifies where to open the link and the value `"_blank"` specifies to open the link in a new tab. `href` is an anchor tag attribute that contains the URL address of the link:
|
||||
`<a> ... </a>` `target` is an anchor tag attribute that specifies where to open the link and the value `_blank` specifies to open the link in a new tab `href` is an anchor tag attribute that contains the URL address of the link:
|
||||
`<a href="http://freecodecamp.org"> ... </a>` The text, **"link to freecodecamp.org"**, within the `a` element called `anchor text`, will display a link to click:
|
||||
`<a href=" ... ">link to freecodecamp.org</a>` The final output of the example will look like this:
|
||||
|
||||
@ -27,7 +27,7 @@ Here's a [link to freecodecamp.org](http://freecodecamp.org) for you to follow.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nest the existing `a` element within a new `p` element. The new paragraph should have text that says "View more cat photos", where "cat photos" is a link, and the rest is plain text.
|
||||
Nest the existing `a` element within a new `p` element. The new paragraph should have text that says `View more cat photos`, where `cat photos` is a link, and the rest is plain text.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `a` element should have the anchor text of "cat photos"
|
||||
Your `a` element should have the anchor text of `cat photos`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -65,7 +65,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `p` element should have the text "View more " (with a space after it).
|
||||
Your `p` element should have the text `View more ` (with a space after it).
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -80,7 +80,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `a` element should <em>not</em> have the text "View more".
|
||||
Your `a` element should <em>not</em> have the text `View more`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -17,7 +17,7 @@ Just like any other non-self-closing element, you can open a `div` element with
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nest your "Things cats love" and "Things cats hate" lists all within a single `div` element.
|
||||
Nest your "Things cats love" and "Top 3 things cats hate" lists all within a single `div` element.
|
||||
|
||||
Hint: Try putting your opening `div` tag above your "Things cats love" `p` element and your closing `div` tag after your closing `ol` tag so that both of your lists are within one `div`.
|
||||
|
||||
|
||||
@ -31,11 +31,11 @@ Each challenge has tests you can run at any time by clicking the "Run tests" but
|
||||
|
||||
# --instructions--
|
||||
|
||||
To pass the test on this challenge, change your `h1` element's text to say "Hello World".
|
||||
To pass the test on this challenge, change your `h1` element's text to say `Hello World`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have the text "Hello World".
|
||||
Your `h1` element should have the text `Hello World`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
|
||||
@ -13,7 +13,7 @@ The tweet embed `header` and `footer` used the `flex-direction` property earlier
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-direction` to the header's `.profile-name` element and set the value to column.
|
||||
Add the CSS property `flex-direction` to the header's `.profile-name` element and set the value to `column`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -23,7 +23,7 @@ Your `.follow-btn` should be rendered on the page. Be sure to turn off any exten
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
The `.profile-name` element should have a `flex-direction` property set to column.
|
||||
The `.profile-name` element should have a `flex-direction` property set to `column`.
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('flex-direction') == 'column');
|
||||
|
||||
@ -13,7 +13,7 @@ The `header` and `footer` in the tweet embed example have child items that could
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-direction` to both the `header` and `footer` and set the value to row.
|
||||
Add the CSS property `flex-direction` to both the `header` and `footer` and set the value to `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -23,13 +23,13 @@ Your `.follow-btn` should be rendered on the page. Be sure to turn off any exten
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
The `header` should have a `flex-direction` property set to row.
|
||||
The `header` should have a `flex-direction` property set to `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
The `footer` should have a `flex-direction` property set to row.
|
||||
The `footer` should have a `flex-direction` property set to `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
|
||||
@ -19,7 +19,7 @@ Set the initial size of the boxes using `flex-basis`. Add the CSS property `flex
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-1` element should have a `flex-basis` property.
|
||||
The `#box-1` element should have the `flex-basis` property.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-basis') != 'auto');
|
||||
|
||||
@ -17,7 +17,7 @@ Add the CSS property `flex-direction` to the `#box-container` element, and give
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have a `flex-direction` property set to column.
|
||||
The `#box-container` element should have a `flex-direction` property set to `column`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'column');
|
||||
|
||||
@ -21,7 +21,7 @@ Add the CSS property `flex-direction` to the `#box-container` element, and give
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have a `flex-direction` property set to row-reverse.
|
||||
The `#box-container` element should have a `flex-direction` property set to `row-reverse`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'row-reverse');
|
||||
|
||||
@ -26,7 +26,7 @@ Place the area template so that the cell labeled `advert` becomes an empty cell.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-template-areas` property similar to the preview but has `.` instead of the `advert` area.
|
||||
`container` class should have a `grid-template-areas` property similar to the preview but with`.` instead of the `advert` area.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -15,7 +15,7 @@ The four different viewport units are:
|
||||
|
||||
<ul><li><code>vw</code> (viewport width): <code>10vw</code> would be 10% of the viewport's width.</li><li><code>vh</code> (viewport height): <code>3vh</code> would be 3% of the viewport's height.</li><li><code>vmin</code> (viewport minimum): <code>70vmin</code> would be 70% of the viewport's smaller dimension (height or width).</li><li><code>vmax</code> (viewport maximum): <code>100vmax</code> would be 100% of the viewport's bigger dimension (height or width).</li></ul>
|
||||
|
||||
Here is an example that sets a body tag to 30% of the viewport's width.
|
||||
Here is an example that sets a `body` tag to 30% of the viewport's width.
|
||||
|
||||
`body { width: 30vw; }`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user