gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(challenge-md): Fix quotes that failed in the transform

Browse Source
This commit is contained in:
Bouncey
2018-10-08 01:01:53 +01:00
committed by mrugesh mohapatra
parent 392b28fa55
commit a859035023
1333 changed files with 5710 additions and 5710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.english.md
View File

@ -25,7 +25,7 @@ Camper Cat happens to be both a coding ninja and an actual ninja, and is buildin
```yml
tests:
- text: 'Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.'
testString: 'assert($(''img'').attr(''alt''), ''Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.'');'
testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'
```

18
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.english.md
View File

@ -25,13 +25,13 @@ Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competi
```yml
tests:
- text: Your code should add one <code>input</code> tag for the date selector field.
testString: 'assert($(''input'').length == 2, ''Your code should add one <code>input</code> tag for the date selector field.'');'
testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
- text: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.
testString: 'assert($(''input'').attr(''type'') == ''date'', ''Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.'');'
testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
- text: Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.
testString: 'assert($(''input'').attr(''id'') == ''pickdate'', ''Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.'');'
testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
- text: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.
testString: 'assert($(''input'').attr(''name'') == ''date'', ''Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.'');'
testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'
```
@ -53,13 +53,13 @@ tests:
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<!-- Add your code below this line -->
<!-- Add your code above this line -->
<input type="submit" name="submit" value="Submit">
</form>
</section>

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.english.md
View File

@ -23,7 +23,7 @@ Camper Cat is testing different styles for an important button, but the yellow (
```yml
tests:
- text: Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.
testString: 'assert($(''button'').css(''color'') == ''rgb(0, 51, 102)'', ''Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.'');'
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.english.md
View File

@ -24,9 +24,9 @@ Camper Cat is experimenting with using color for his blog text and background, b
```yml
tests:
- text: Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), ''Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.'');'
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.");'
- text: Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), ''Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.'');'
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.english.md
View File

@ -22,9 +22,9 @@ The link text that Camper Cat is using is not very descriptive without the surro
```yml
tests:
- text: Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".
testString: 'assert($(''a'').text().match(/^(information about batteries)$/g), ''Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".'');'
testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".");'
- text: Make sure your <code>a</code> element has a closing tag.
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(''''|"")>/g).length, ''Make sure your <code>a</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'
```

20
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.english.md
View File

@ -26,19 +26,19 @@ Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax),
```yml
tests:
- text: Your code should have one <code>audio</code> tag.
testString: 'assert($(''audio'').length === 1, ''Your code should have one <code>audio</code> tag.'');'
testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");'
- text: Make sure your <code>audio</code> element has a closing tag.
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), ''Make sure your <code>audio</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");'
- text: The <code>audio</code> tag should have the <code>controls</code> attribute.
testString: 'assert($(''audio'').attr(''controls''), ''The <code>audio</code> tag should have the <code>controls</code> attribute.'');'
testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");'
- text: Your code should have one <code>source</code> tag.
testString: 'assert($(''source'').length === 1, ''Your code should have one <code>source</code> tag.'');'
testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");'
- text: Your <code>source</code> tag should be inside the <code>audio</code> tags.
testString: 'assert($(''audio'').children(''source'').length === 1, ''Your <code>source</code> tag should be inside the <code>audio</code> tags.'');'
testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");'
- text: The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.
testString: 'assert($(''source'').attr(''src'') === ''https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'', ''The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.'');'
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");'
- text: Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.
testString: 'assert($(''source'').attr(''type'') === ''audio/mpeg'', ''Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.'');'
testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");'
```
@ -56,9 +56,9 @@ tests:
</header>
<main>
<p>A sound clip of Zersiax's screen reader in action.</p>
</main>
</body>
```

16
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md
View File

@ -24,17 +24,17 @@ Camper Cat is hard at work creating a stacked bar chart showing the amount of ti
```yml
tests:
- text: Your code should have one <code>figure</code> tag.
testString: 'assert($(''figure'').length == 1, ''Your code should have one <code>figure</code> tag.'');'
testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");'
- text: Your code should have one <code>figcaption</code> tag.
testString: 'assert($(''figcaption'').length == 1, ''Your code should have one <code>figcaption</code> tag.'');'
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Your code should not have any <code>p</code> tags.
testString: 'assert($(''p'').length == 0, ''Your code should not have any <code>p</code> tags.'');'
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
- text: The <code>figcaption</code> should be a child of the <code>figure</code> tag.
testString: 'assert($(''figure'').children(''figcaption'').length == 1, ''The <code>figcaption</code> should be a child of the <code>figure</code> tag.'');'
testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");'
- text: Make sure your <code>figure</code> element has a closing tag.
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, ''Make sure your <code>figure</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, "Make sure your <code>figure</code> element has a closing tag.");'
```
@ -59,7 +59,7 @@ tests:
</header>
<main>
<section>
<!-- Add your code below this line -->
<div>
<!-- Stacked bar chart will go here -->
@ -67,7 +67,7 @@ tests:
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
</div>
<!-- Add your code above this line -->
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>

12
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.english.md
View File

@ -25,9 +25,9 @@ Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to
```yml
tests:
- text: Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.
testString: 'assert($(''label'').attr(''for''), ''Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.'');'
testString: 'assert($("label").attr("for"), "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.");'
- text: Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.
testString: 'assert($(''label'').attr(''for'') == ''email'', ''Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.'');'
testString: 'assert($("label").attr("for") == "email", "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.");'
```
@ -46,12 +46,12 @@ tests:
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label>Email:</label>
<input type="text" id="email" name="email">
<input type="submit" name="submit" value="Submit">
</form>
</section>

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.english.md
View File

@ -22,9 +22,9 @@ Camper Cat's choice of light gray text on a white background for his recent blog
```yml
tests:
- text: Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.
testString: 'assert($(''body'').css(''color'') == ''rgb(99, 99, 99)'', ''Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.'');'
testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.");'
- text: Your code should not change the <code>background-color</code> for the <code>body</code>.
testString: 'assert($(''body'').css(''background-color'') == ''rgb(255, 255, 255)'', ''Your code should not change the <code>background-color</code> for the <code>body</code>.'');'
testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the <code>background-color</code> for the <code>body</code>.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.english.md
View File

@ -24,9 +24,9 @@ Camper Cat has some big ideas for his ninja weapons page. Help him set up his ma
```yml
tests:
- text: Your code should have one <code>main</code> tag.
testString: 'assert($(''main'').length == 1, ''Your code should have one <code>main</code> tag.'');'
testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
- text: The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), ''The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.'');'
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.english.md
View File

@ -25,9 +25,9 @@ Camper Cat has coded a skeleton page for the blog part of his website. He's plan
```yml
tests:
- text: Your <code>img</code> tag should have an <code>alt</code> attribute.
testString: 'assert(!($(''img'').attr(''alt'') == undefined), ''Your <code>img</code> tag should have an <code>alt</code> attribute.'');'
testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
- text: The <code>alt</code> attribute should be set to an empty string.
testString: 'assert($(''img'').attr(''alt'') == '''', ''The <code>alt</code> attribute should be set to an empty string.'');'
testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'
```

10
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md
View File

@ -29,13 +29,13 @@ Camper Cat created a really cool stacked bar chart for his training page, and pu
```yml
tests:
- text: Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.
testString: 'assert($(''.sr-only'').css(''position'') == ''absolute'', ''Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.'');'
testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.");'
- text: Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.
testString: 'assert($(''.sr-only'').css(''left'') == ''-10000px'', ''Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.'');'
testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.");'
- text: Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.
testString: 'assert(code.match(/width:\s*?1px/gi), ''Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.'');'
testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
- text: Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.
testString: 'assert(code.match(/height:\s*?1px/gi), ''Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.'');'
testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
```
@ -86,7 +86,7 @@ tests:
<th scope="col">Stealth &amp; Agility</th>
<th scope="col">Combat</th>
<th scope="col">Weapons</th>
<th scope="col">Total</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>

24
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.english.md
View File

@ -24,13 +24,13 @@ Camper Cat wants the links around the two blog article titles to have keyboard s
```yml
tests:
- text: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".
testString: 'assert($(''#first'').attr(''accesskey''), ''Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".'');'
testString: 'assert($("#first").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".");'
- text: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".
testString: 'assert($(''#second'').attr(''accesskey''), ''Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".'');'
testString: 'assert($("#second").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".");'
- text: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.
testString: 'assert($(''#first'').attr(''accesskey'') == ''g'', ''Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.'');'
testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.");'
- text: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.
testString: 'assert($(''#second'').attr(''accesskey'') == ''c'', ''Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.'');'
testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.");'
```
@ -47,19 +47,19 @@ tests:
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2><a id="first" href="">The Garfield Files: Lasagna as Training Fuel?</a></h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<article>
<h2><a id="second" href="">Is Chuck Norris a Cat Person?</a></h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>

6
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.english.md
View File

@ -21,11 +21,11 @@ Camper Cat's training page is making good progress. Change the <code>div</code>
```yml
tests:
- text: Your code should have one <code>footer</code> tag.
testString: 'assert($(''footer'').length == 1, ''Your code should have one <code>footer</code> tag.'');'
testString: 'assert($("footer").length == 1, "Your code should have one <code>footer</code> tag.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Your code should have an opening and closing <code>footer</code> tag.
testString: 'assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g), ''Your code should have an opening and closing <code>footer</code> tag.'');'
testString: 'assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g), "Your code should have an opening and closing <code>footer</code> tag.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.english.md
View File

@ -23,13 +23,13 @@ Camper Cat is writing some great articles about ninja training, and wants to add
```yml
tests:
- text: Your code should have one <code>header</code> tag.
testString: 'assert($(''header'').length == 1, ''Your code should have one <code>header</code> tag.'');'
testString: 'assert($("header").length == 1, "Your code should have one <code>header</code> tag.");'
- text: Your <code>header</code> tags should wrap around the <code>h1</code>.
testString: 'assert($(''header'').children(''h1'').length == 1, ''Your <code>header</code> tags should wrap around the <code>h1</code>.'');'
testString: 'assert($("header").children("h1").length == 1, "Your <code>header</code> tags should wrap around the <code>h1</code>.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Make sure your <code>header</code> element has a closing tag.
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, ''Make sure your <code>header</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, "Make sure your <code>header</code> element has a closing tag.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.english.md
View File

@ -22,13 +22,13 @@ Camper Cat included navigation links at the top of his training page, but wrappe
```yml
tests:
- text: Your code should have one <code>nav</code> tag.
testString: 'assert($(''nav'').length == 1, ''Your code should have one <code>nav</code> tag.'');'
testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");'
- text: Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.
testString: 'assert($(''nav'').children(''ul'').length == 1, ''Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.'');'
testString: 'assert($("nav").children("ul").length == 1, "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Make sure your <code>nav</code> element has a closing tag.
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, ''Make sure your <code>nav</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, "Make sure your <code>nav</code> element has a closing tag.");'
```

16
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.english.md
View File

@ -23,13 +23,13 @@ Camper Cat's Mortal Kombat survey results are in! Wrap a <code>time</code> tag a
```yml
tests:
- text: 'Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".'
testString: 'assert($(''time'').text().match(/Thursday, September 15th/g), ''Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".'');'
testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".");'
- text: Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.
testString: 'assert($(''time'').attr(''datetime''), ''Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.'');'
testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");'
- text: Your <code>datetime</code> attribute should be set to a value of 2016-09-15.
testString: 'assert($(''time'').attr(''datetime'') === "2016-09-15", ''Your <code>datetime</code> attribute should be set to a value of 2016-09-15.'');'
testString: 'assert($("time").attr("datetime") === "2016-09-15", "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.");'
- text: Make sure your <code>time</code> element has a closing tag.
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, ''Make sure your <code>time</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, "Make sure your <code>time</code> element has a closing tag.");'
```
@ -47,13 +47,13 @@ tests:
</header>
<article>
<h2>Mortal Kombat Tournament Survey Results</h2>
<!-- Add your code below this line -->
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
<!-- Add your code above this line -->
<section>
<h3>Comments:</h3>
<article>

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.english.md
View File

@ -26,9 +26,9 @@ Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix
```yml
tests:
- text: Your code should have six <code>h3</code> tags.
testString: 'assert($(''h3'').length === 6, ''Your code should have six <code>h3</code> tags.'');'
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
- text: Your code should not have any <code>h5</code> tags.
testString: 'assert($(''h5'').length === 0, ''Your code should not have any <code>h5</code> tags.'');'
testString: 'assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");'
```

12
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.english.md
View File

@ -24,9 +24,9 @@ Camper Cat created a new survey to collect information about his users. He knows
```yml
tests:
- text: Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.
testString: 'assert($(''p'').attr(''tabindex''), ''Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.'');'
testString: 'assert($("p").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.");'
- text: Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.
testString: 'assert($(''p'').attr(''tabindex'') == ''0'', ''Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.'');'
testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.");'
```
@ -51,11 +51,11 @@ tests:
</header>
<section>
<form>
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<fieldset>

16
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.english.md
View File

@ -26,13 +26,13 @@ Camper Cat has a search field on his Inspirational Quotes page that he plans to
```yml
tests:
- text: Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.
testString: 'assert($(''#search'').attr(''tabindex''), ''Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.'');'
testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");'
- text: Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.
testString: 'assert($(''#submit'').attr(''tabindex''), ''Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.'');'
testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");'
- text: Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.
testString: 'assert($(''#search'').attr(''tabindex'') == ''1'', ''Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.'');'
testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");'
- text: Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.
testString: 'assert($(''#submit'').attr(''tabindex'') == ''2'', ''Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.'');'
testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");'
```
@ -57,12 +57,12 @@ tests:
</header>
<form>
<label for="search">Search:</label>
<input type="search" name="search" id="search">
<input type="submit" name="submit" value="Submit" id="submit">
</form>
<h2>Inspirational Quotes</h2>
<blockquote>

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.english.md
View File

@ -25,9 +25,9 @@ Camper Cat used <code>article</code> tags to wrap the posts on his blog page, bu
```yml
tests:
- text: Your code should have three <code>article</code> tags.
testString: 'assert($(''article'').length == 3, ''Your code should have three <code>article</code> tags.'');'
testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
```

18
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.english.md
View File

@ -25,15 +25,15 @@ Camper Cat wants information about the ninja level of his users when they sign u
```yml
tests:
- text: Your code should have a <code>fieldset</code> tag around the radio button set.
testString: 'assert($(''fieldset'').length == 1, ''Your code should have a <code>fieldset</code> tag around the radio button set.'');'
testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");'
- text: Make sure your <code>fieldset</code> element has a closing tag.
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, ''Make sure your <code>fieldset</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");'
- text: Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.
testString: 'assert($(''legend'').length == 1, ''Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.'');'
testString: 'assert($("legend").length == 1, "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.
testString: 'assert($(''p'').length == 4, ''Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.'');'
testString: 'assert($("p").length == 4, "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.");'
```
@ -54,8 +54,8 @@ tests:
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<!-- Add your code below this line -->
<div>
<p>What level ninja are you?</p>
@ -67,8 +67,8 @@ tests:
<label for="master">Master</label>
</div>
<!-- Add your code above this line -->
<input type="submit" name="submit" value="Submit">
</form>
</section>

10
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.english.md
View File

@ -24,9 +24,9 @@ The element now has an id of <code>thumbnail</code>. With this selector, use the
```yml
tests:
- text: Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.
testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), ''Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.'');'
testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), "Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.");'
- text: You should use the given CSS for the <code>box-shadow</code> value.
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), ''You should use the given CSS for the <code>box-shadow</code> value.'');'
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), "You should use the given CSS for the <code>box-shadow</code> value.");'
```
@ -52,9 +52,9 @@ tests:
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;

10
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.english.md
View File

@ -25,11 +25,11 @@ Also for the <code>h4</code>, remove the <code>height</code> property and add <c
```yml
tests:
- text: 'Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.'
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), ''Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.'');'
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.");'
- text: Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.
testString: 'assert($(''h4'').css(''padding-top'') == ''10px'' && $(''h4'').css(''padding-right'') == ''10px'' && $(''h4'').css(''padding-bottom'') == ''10px'' && $(''h4'').css(''padding-left'') == ''10px'', ''Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.'');'
testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.");'
- text: The <code>height</code> property on the <code>h4</code> element should be removed.
testString: 'assert(!($(''h4'').css(''height'') == ''25px''), ''The <code>height</code> property on the <code>h4</code> element should be removed.'');'
testString: 'assert(!($("h4").css("height") == "25px"), "The <code>height</code> property on the <code>h4</code> element should be removed.");'
```
@ -45,8 +45,8 @@ tests:
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;

10
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.english.md
View File

@ -21,13 +21,13 @@ This page will use a shade of teal (<code>#09A7A1</code>) as the dominant color,
```yml
tests:
- text: 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.'
testString: 'assert($(''header'').css(''background-color'') == ''rgb(9, 167, 161)'', ''The <code>header</code> element should have a <code>background-color</code> of #09A7A1.'');'
testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.");'
- text: 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.'
testString: 'assert($(''footer'').css(''background-color'') == ''rgb(9, 167, 161)'', ''The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.'');'
testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.");'
- text: 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.'
testString: 'assert($(''h2'').css(''color'') == ''rgb(9, 167, 161)'', ''The <code>h2</code> element should have a <code>color</code> of #09A7A1.'');'
testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The <code>h2</code> element should have a <code>color</code> of #09A7A1.");'
- text: 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.'
testString: 'assert($(''button'').css(''background-color'') == ''rgb(255, 121, 14)'', ''The <code>button</code> element should have a <code>background-color</code> of #FF790E.'');'
testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The <code>button</code> element should have a <code>background-color</code> of #FF790E.");'
```
@ -50,7 +50,7 @@ tests:
}
h2 {
color: black;
}
}
button {
background-color: white;
}

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.english.md
View File

@ -22,7 +22,7 @@ Add a <code>height</code> property to the <code>h4</code> tag and set it to 25px
```yml
tests:
- text: Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.
testString: 'assert($(''h4'').css(''height'') == ''25px'', ''Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.'');'
testString: 'assert($("h4").css("height") == "25px", "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.");'
```
@ -37,7 +37,7 @@ tests:
<style>
h4 {
text-align: center;
}
p {
text-align: justify;

10
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.english.md
View File

@ -23,9 +23,9 @@ The code editor has a CSS rule to style all <code>a</code> tags black. Add a rul
```yml
tests:
- text: 'The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.'
testString: 'assert($(''a'').css(''color'') == ''rgb(0, 0, 0)'', ''The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.'');'
testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.");'
- text: The anchor tag should have a <code>color</code> of blue on hover.
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), ''The anchor tag should have a <code>color</code> of blue on hover.'');'
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a <code>color</code> of blue on hover.");'
```
@ -41,9 +41,9 @@ tests:
a {
color: #000;
}
</style>
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
```

22
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.english.md
View File

@ -26,17 +26,17 @@ Change the <code>background-color</code> of each <code>div</code> element based
```yml
tests:
- text: Your code should use the <code>hsl()</code> property to declare the color green.
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the <code>hsl()</code> property to declare the color green.'');'
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color green.");'
- text: Your code should use the <code>hsl()</code> property to declare the color cyan.
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the <code>hsl()</code> property to declare the color cyan.'');'
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color cyan.");'
- text: Your code should use the <code>hsl()</code> property to declare the color blue.
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the <code>hsl()</code> property to declare the color blue.'');'
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color blue.");'
- text: The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.
testString: 'assert($(''.green'').css(''background-color'') == ''rgb(0, 255, 0)'', ''The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.'');'
testString: 'assert($(".green").css("background-color") == "rgb(0, 255, 0)", "The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.");'
- text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
testString: 'assert($(''.cyan'').css(''background-color'') == ''rgb(0, 255, 255)'', ''The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.'');'
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
- text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
testString: 'assert($(''.blue'').css(''background-color'') == ''rgb(0, 0, 255)'', ''The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.'');'
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
```
@ -52,26 +52,26 @@ tests:
body {
background-color: #FFFFFF;
}
.green {
background-color: #000000;
}
.cyan {
background-color: #000000;
}
.blue {
background-color: #000000;
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
</style>
<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.english.md
View File

@ -21,7 +21,7 @@ To make the heading significantly larger than the paragraph, change the <code>fo
```yml
tests:
- text: Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.
testString: 'assert($(''h4'').css(''font-size'') == ''27px'', ''Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.'');'
testString: 'assert($("h4").css("font-size") == "27px", "Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.");'
```
@ -38,7 +38,7 @@ tests:
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
}
p {
text-align: justify;

16
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.english.md
View File

@ -21,7 +21,7 @@ The navigation bar on this site currently inherits its <code>background-color</c
```yml
tests:
- text: The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), ''The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.'');'
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), "The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.");'
```
@ -38,32 +38,32 @@ tests:
background-color: hsl(180, 90%, 35%);
color: #FFFFFF;
}
nav {
}
h1 {
text-indent: 10px;
padding-top: 10px;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
color: inherit;
}
</style>
<header>
<h1>Cooking with FCC!</h1>
<nav>

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.english.md
View File

@ -22,7 +22,7 @@ Add a <code>width</code> property to the entire card and set it to an absolute v
```yml
tests:
- text: Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), ''Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.'');'
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.");'
```
@ -46,7 +46,7 @@ tests:
text-align: left;
}
.fullCard {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.english.md
View File

@ -22,7 +22,7 @@ Alter the animation rate for the element with the class name of <code>star-1</co
```yml
tests:
- text: The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), ''The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.'');'
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.");'
```
@ -44,7 +44,7 @@ tests:
}
.star-1 {
margin-top: 15%;
margin-top: 15%;
margin-left: 60%;
animation-name: twinkle-1;
animation-duration: 1s;

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.english.md
View File

@ -23,7 +23,7 @@ To keep the ball bouncing on the right on a continuous loop, change the <code>an
```yml
tests:
- text: The <code>animation-iteration-count</code> property should have a value of infinite.
testString: 'assert($(''#ball'').css(''animation-iteration-count'') == ''infinite'', ''The <code>animation-iteration-count</code> property should have a value of infinite.'');'
testString: 'assert($("#ball").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property should have a value of infinite.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.english.md
View File

@ -22,11 +22,11 @@ Set the <code>animation-duration</code> of the elements with the classes <code>s
```yml
tests:
- text: The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.
testString: 'assert($(''.star-1'').css(''animation-duration'') == ''1s'', ''The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.'');'
testString: 'assert($(".star-1").css("animation-duration") == "1s", "The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.");'
- text: The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.
testString: 'assert($(''.star-2'').css(''animation-duration'') == ''0.9s'', ''The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.'');'
testString: 'assert($(".star-2").css("animation-duration") == "0.9s", "The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.");'
- text: The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.
testString: 'assert($(''.star-3'').css(''animation-duration'') == ''1.1s'', ''The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.'');'
testString: 'assert($(".star-3").css("animation-duration") == "1.1s", "The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.");'
```
@ -48,7 +48,7 @@ tests:
}
.star-1 {
margin-top: 15%;
margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.english.md
View File

@ -22,7 +22,7 @@ Center the <code>div</code> on the page by adding a <code>margin</code> property
```yml
tests:
- text: The <code>div</code> should have a <code>margin</code> set to auto.
testString: 'assert(code.match(/margin:\s*?auto;/g), ''The <code>div</code> should have a <code>margin</code> set to auto.'');'
testString: 'assert(code.match(/margin:\s*?auto;/g), "The <code>div</code> should have a <code>margin</code> set to auto.");'
```
@ -39,7 +39,7 @@ tests:
background-color: blue;
height: 100px;
width: 100px;
}
</style>
<div></div>

8
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.english.md
View File

@ -25,9 +25,9 @@ Change the <code>position</code> of the <code>h2</code> to <code>relative</code>
```yml
tests:
- text: The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.
testString: 'assert($(''h2'').css(''position'') == ''relative'', ''The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.'');'
testString: 'assert($("h2").css("position") == "relative", "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.");'
- text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.
testString: 'assert($(''h2'').css(''top'') == ''15px'', ''Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.'');'
testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.");'
```
@ -41,8 +41,8 @@ tests:
```html
<style>
h2 {
}
</style>
<body>

18
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.english.md
View File

@ -22,9 +22,9 @@ For the elements with id of <code>ball1</code> and <code>ball2</code>, add an <c
```yml
tests:
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.
testString: 'assert($(''#ball1'').css(''animation-timing-function'') == ''linear'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.'');'
testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.");'
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.
testString: 'assert($(''#ball2'').css(''animation-timing-function'') == ''ease-out'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.'');'
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.");'
```
@ -45,7 +45,7 @@ tests:
#ccffff,
#ffcccc
);
position: fixed;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
@ -53,23 +53,23 @@ tests:
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
#ball1 {
left:27%;
}
#ball2 {
#ball2 {
left:56%;
}
@keyframes bounce {
0% {
top: 0px;
}
}
100% {
top: 249px;
}
}
}
</style>

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.english.md
View File

@ -21,7 +21,7 @@ Add a <code>z-index</code> property to the element with the class name of <code>
```yml
tests:
- text: The element with class <code>first</code> should have a <code>z-index</code> value of 2.
testString: 'assert($(''.first'').css(''z-index'') == ''2'', ''The element with class <code>first</code> should have a <code>z-index</code> value of 2.'');'
testString: 'assert($(".first").css("z-index") == "2", "The element with class <code>first</code> should have a <code>z-index</code> value of 2.");'
```
@ -39,11 +39,11 @@ tests:
height: 200px;
margin-top: 20px;
}
.first {
background-color: red;
position: absolute;
}
.second {
background-color: blue;

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.english.md
View File

@ -26,7 +26,7 @@ Use a <code>linear-gradient()</code> for the <code>div</code> element's <code>ba
```yml
tests:
- text: The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), ''The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.'');'
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.");'
```
@ -40,12 +40,12 @@ tests:
```html
<style>
div{
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
}
</style>

10
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.english.md
View File

@ -24,11 +24,11 @@ Manipulate the square element in the editor to create the moon shape. First, cha
```yml
tests:
- text: The value of the <code>background-color</code> property should be set to <code>transparent</code>.
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), ''The value of the <code>background-color</code> property should be set to <code>transparent</code>.'');'
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the <code>background-color</code> property should be set to <code>transparent</code>.");'
- text: The value of the <code>border-radius</code> property should be set to <code>50%</code>.
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), ''The value of the <code>border-radius</code> property should be set to <code>50%</code>.'');'
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the <code>border-radius</code> property should be set to <code>50%</code>.");'
- text: 'The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.'
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), ''The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.'');'
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.");'
```
@ -51,10 +51,10 @@ tests:
left: 0;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 0px;
box-shadow: 25px 10px 10px 10px green;
box-shadow: 25px 10px 10px 10px green;
}
</style>

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.english.md
View File

@ -22,9 +22,9 @@ Add an <code>hr</code> tag underneath the <code>h4</code> which contains the car
```yml
tests:
- text: Your code should add an <code>hr</code> tag to the markup.
testString: 'assert($(''hr'').length == 1, ''Your code should add an <code>hr</code> tag to the markup.'');'
testString: 'assert($("hr").length == 1, "Your code should add an <code>hr</code> tag to the markup.");'
- text: The <code>hr</code> tag should come between the title and the paragraph.
testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), ''The <code>hr</code> tag should come between the title and the paragraph.'');'
testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), "The <code>hr</code> tag should come between the title and the paragraph.");'
```
@ -66,7 +66,7 @@ tests:
<div class="cardContent">
<div class="cardText">
<h4><s>Google</s>Alphabet</h4>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">

8
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.english.md
View File

@ -26,13 +26,13 @@ Finally, in the <code>heart::before</code> selector, set its <code>content</code
```yml
tests:
- text: 'The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.'
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), ''The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.'');'
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
- text: 'The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.'
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, ''The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.'');'
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
- text: The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), ''The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.'');'
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
- text: 'The <code>content</code> of the <code>heart::before</code> selector should be an empty string.'
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|'')\1\s*?;/gi), ''The <code>content</code> of the <code>heart::before</code> selector should be an empty string.'');'
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'
```

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.english.md
View File

@ -23,11 +23,11 @@ Add a horizontal motion to the <code>div</code> animation. Using the <code>left<
```yml
tests:
- text: The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), ''The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.'');'
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.");'
- text: The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), ''The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.'');'
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.");'
- text: The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), ''The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.'');'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.");'
```
@ -58,17 +58,17 @@ tests:
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
</style>

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.english.md
View File

@ -21,7 +21,7 @@ Using the url of <code>https://i.imgur.com/MJAkxbh.png</code>, set the <code>bac
```yml
tests:
- text: Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.
testString: 'assert(code.match(/background:\s*?url\(\s*("|''|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), ''Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.'');'
testString: 'assert(code.match(/background:\s*?url\(\s*("|"|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), "Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.");'
```
@ -35,7 +35,7 @@ tests:
```html
<style>
body {
}
</style>
```

10
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.english.md
View File

@ -26,9 +26,9 @@ Align the <code>h4</code> tag's text, which says "Google", to the center. Then j
```yml
tests:
- text: Your code should use the text-align property on the <code>h4</code> tag to set it to center.
testString: 'assert($(''h4'').css(''text-align'') == ''center'', ''Your code should use the text-align property on the <code>h4</code> tag to set it to center.'');'
testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the <code>h4</code> tag to set it to center.");'
- text: Your code should use the text-align property on the <code>p</code> tag to set it to justify.
testString: 'assert($(''p'').css(''text-align'') == ''justify'', ''Your code should use the text-align property on the <code>p</code> tag to set it to justify.'');'
testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the <code>p</code> tag to set it to justify.");'
```
@ -42,14 +42,14 @@ tests:
```html
<style>
h4 {
}
p {
}
.links {
margin-right: 20px;
}
.fullCard {
border: 1px solid #ccc;

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.english.md
View File

@ -22,7 +22,7 @@ Target the element with the id of <code>ball</code> and add the <code>opacity</c
```yml
tests:
- text: The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), ''The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.'');'
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), "The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.");'
```
@ -55,7 +55,7 @@ tests:
@keyframes fade {
50% {
left: 60%;
}
}

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.english.md
View File

@ -23,7 +23,7 @@ Set the <code>opacity</code> of the anchor tags to 0.7 using <code>links</code>
```yml
tests:
- text: Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.
testString: 'assert.approximately(parseFloat($(''.links'').css(''opacity'')), 0.7, 0.1, ''Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.'');'
testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.");'
```
@ -48,7 +48,7 @@ tests:
.links {
text-align: left;
color: black;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.english.md
View File

@ -27,9 +27,9 @@ Change the <code>background-color</code> property of the <code>blue</code> and <
```yml
tests:
- text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
testString: 'assert($(''.blue'').css(''background-color'') == ''rgb(0, 0, 255)'', ''The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.'');'
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
- text: The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.
testString: 'assert($(''.yellow'').css(''background-color'') == ''rgb(255, 255, 0)'', ''The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.'');'
testString: 'assert($(".yellow").css("background-color") == "rgb(255, 255, 0)", "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.");'
```

16
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.english.md
View File

@ -25,11 +25,11 @@ Change the <code>background-color</code> property of the <code>orange</code>, <c
```yml
tests:
- text: The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.
testString: 'assert($(''.orange'').css(''background-color'') == ''rgb(255, 125, 0)'', ''The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.'');'
testString: 'assert($(".orange").css("background-color") == "rgb(255, 125, 0)", "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.");'
- text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
testString: 'assert($(''.cyan'').css(''background-color'') == ''rgb(0, 255, 255)'', ''The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.'');'
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
- text: The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.
testString: 'assert($(''.raspberry'').css(''background-color'') == ''rgb(255, 0, 125)'', ''The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.'');'
testString: 'assert($(".raspberry").css("background-color") == "rgb(255, 0, 125)", "The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.");'
```
@ -45,26 +45,26 @@ tests:
body {
background-color: #FFFFFF;
}
.orange {
background-color: #000000;
}
.cyan {
background-color: #000000;
}
.raspberry {
background-color: #000000;
}
div {
height: 100px;
width: 100px;
margin-bottom: 5px;
}
</style>
<div class="orange"></div>
<div class="cyan"></div>
<div class="raspberry"></div>

14
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.english.md
View File

@ -25,9 +25,9 @@ For the element with the id of <code>ball1</code>, change the value of the <code
```yml
tests:
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.
testString: 'assert($(''#ball1'').css(''animation-timing-function'') == ''cubic-bezier(0.25, 0.25, 0.75, 0.75)'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.'');'
testString: 'assert($("#ball1").css("animation-timing-function") == "cubic-bezier(0.25, 0.25, 0.75, 0.75)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.");'
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.
testString: 'assert($(''#ball2'').css(''animation-timing-function'') == ''ease-out'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.'');'
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.");'
```
@ -48,7 +48,7 @@ tests:
#ccffff,
#ffcccc
);
position: fixed;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
@ -56,11 +56,11 @@ tests:
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
#ball1 {
left: 27%;
animation-timing-function: linear;
}
#ball2 {
#ball2 {
left: 56%;
animation-timing-function: ease-out;
}
@ -68,11 +68,11 @@ tests:
@keyframes bounce {
0% {
top: 0px;
}
}
100% {
top: 249px;
}
}
}
</style>

24
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.english.md
View File

@ -26,17 +26,17 @@ Create an animation for the element with the id <code>rect</code>, by setting th
```yml
tests:
- text: The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.
testString: 'assert($(''#rect'').css(''animation-name'') == ''rainbow'', ''The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.'');'
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.");'
- text: The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.
testString: 'assert($(''#rect'').css(''animation-duration'') == ''4s'', ''The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.'');'
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.");'
- text: The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), ''The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.'');'
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.");'
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), ''The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.'');'
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.");'
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), ''The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.'');'
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.");'
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), ''The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.'');'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.");'
```
@ -58,13 +58,13 @@ tests:
}
#rect {
}
</style>
<div id="rect"></div>
```

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.english.md
View File

@ -22,11 +22,11 @@ Lock the <code>#searchbar</code> element to the top-right of its <code>section</
```yml
tests:
- text: 'The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.'
testString: 'assert($(''#searchbar'').css(''position'') == ''absolute'', ''The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.'');'
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
- text: 'Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'
testString: 'assert($(''#searchbar'').css(''top'') == ''50px'', ''Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'');'
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
- text: 'Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'
testString: 'assert($(''#searchbar'').css(''right'') == ''50px'', ''Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'');'
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
```
@ -40,9 +40,9 @@ tests:
```html
<style>
#searchbar {
}
section {
position: relative;

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.english.md
View File

@ -22,11 +22,11 @@ The navigation bar in the code is labeled with an id of <code>navbar</code>. Cha
```yml
tests:
- text: 'The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.'
testString: 'assert($(''#navbar'').css(''position'') == ''fixed'', ''The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.'');'
testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");'
- text: 'Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'
testString: 'assert($(''#navbar'').css(''top'') == ''0px'', ''Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'');'
testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
- text: 'Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'
testString: 'assert($(''#navbar'').css(''left'') == ''0px'', ''Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'');'
testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
```
@ -40,9 +40,9 @@ tests:
```html
<style>
#navbar {
width: 100%;
background-color: #767676;
}

10
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.english.md
View File

@ -22,9 +22,9 @@ Keep the heart beating by adding the <code>animation-iteration-count</code> prop
```yml
tests:
- text: The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.
testString: 'assert($(''.heart'').css(''animation-iteration-count'') == ''infinite'', ''The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.'');'
testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.");'
- text: The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.
testString: 'assert($(''.back'').css(''animation-iteration-count'') == ''infinite'', ''The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.'');'
testString: 'assert($(".back").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.");'
```
@ -47,8 +47,8 @@ tests:
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-duration: 1s;
}
.heart {
@ -64,7 +64,7 @@ tests:
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
}
.heart:after {
background-color: pink;

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.english.md
View File

@ -25,7 +25,7 @@ Change value of the <code>animation-timing-function</code> of the element with t
```yml
tests:
- text: 'The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'
testString: 'assert($(''#green'').css(''animation-timing-function'') == ''cubic-bezier(0.311, 0.441, 0.444, 1.649)'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'');'
testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, #{{TEXT}}'
```
@ -40,7 +40,7 @@ tests:
<style>
.balls {
border-radius: 50%;
position: fixed;
position: fixed;
width: 50px;
height: 50px;
top: 60%;

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.english.md
View File

@ -23,7 +23,7 @@ Set the <code>animation-fill-mode</code> property of <code>button:hover</code> t
```yml
tests:
- text: '<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.'
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), ''<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.'');'
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.");'
```
@ -46,7 +46,7 @@ tests:
animation-name: background-color;
animation-duration: 500ms;
/* add your code below this line */
/* add your code above this line */
}
@keyframes background-color {

10
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.english.md
View File

@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/c/c9bQEA4'
## Description
<section id='description'>
The CSS offsets of <code>top</code> or <code>bottom</code>, and <code>left</code> or <code>right</code> 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 <code>h2</code> downwards. Likewise, using a left offset moves an item to the right.
<img src='https://i.imgur.com/eWWi3gZ.gif' alt='' />
<img src='https://i.imgur.com/eWWi3gZ.gif' alt=" />
</section>
## Instructions
@ -22,9 +22,9 @@ Use CSS offsets to move the <code>h2</code> 15 pixels to the right and 10 pixels
```yml
tests:
- text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.'
testString: 'assert($(''h2'').css(''bottom'') == ''10px'', ''Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.'');'
testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");'
- text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.'
testString: 'assert($(''h2'').css(''left'') == ''15px'', ''Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.'');'
testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
```
@ -40,8 +40,8 @@ tests:
<style>
h2 {
position: relative;
}
</style>
</head>

8
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.english.md
View File

@ -21,9 +21,9 @@ The given markup would work well as a two-column layout, with the <code>section<
```yml
tests:
- text: The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.
testString: 'assert($(''#left'').css(''float'') == ''left'', ''The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.'');'
testString: 'assert($("#left").css("float") == "left", "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.");'
- text: The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.
testString: 'assert($(''#right'').css(''float'') == ''right'', ''The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.'');'
testString: 'assert($("#right").css("float") == "right", "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.");'
```
@ -38,11 +38,11 @@ tests:
<head>
<style>
#left {
width: 50%;
}
#right {
width: 40%;
}
aside, section {

24
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.english.md
View File

@ -21,17 +21,17 @@ The <code>font-size</code> property is used to specify how large the text is in
```yml
tests:
- text: Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.
testString: 'assert($(''h1'').css(''font-size'') == ''68px'', ''Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.'');'
testString: 'assert($("h1").css("font-size") == "68px", "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.");'
- text: Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.
testString: 'assert($(''h2'').css(''font-size'') == ''52px'', ''Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.'');'
testString: 'assert($("h2").css("font-size") == "52px", "Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.");'
- text: Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.
testString: 'assert($(''h3'').css(''font-size'') == ''40px'', ''Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.'');'
testString: 'assert($("h3").css("font-size") == "40px", "Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.");'
- text: Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.
testString: 'assert($(''h4'').css(''font-size'') == ''32px'', ''Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.'');'
testString: 'assert($("h4").css("font-size") == "32px", "Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.");'
- text: Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.
testString: 'assert($(''h5'').css(''font-size'') == ''21px'', ''Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.'');'
testString: 'assert($("h5").css("font-size") == "21px", "Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.");'
- text: Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.
testString: 'assert($(''h6'').css(''font-size'') == ''14px'', ''Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.'');'
testString: 'assert($("h6").css("font-size") == "14px", "Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.");'
```
@ -44,12 +44,12 @@ tests:
```html
<style>
</style>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.english.md
View File

@ -21,7 +21,7 @@ Change the value of the <code>font-size</code> property for the paragraph to 16p
```yml
tests:
- text: Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.
testString: 'assert($(''p'').css(''font-size'') == ''16px'', ''Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.'');'
testString: 'assert($("p").css("font-size") == "16px", "Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.");'
```

24
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.english.md
View File

@ -22,17 +22,17 @@ The <code>font-weight</code> property sets how thick or thin characters are in a
```yml
tests:
- text: Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.
testString: 'assert($(''h1'').css(''font-weight'') == ''800'', ''Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.'');'
testString: 'assert($("h1").css("font-weight") == "800", "Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.");'
- text: Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.
testString: 'assert($(''h2'').css(''font-weight'') == ''600'', ''Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.'');'
testString: 'assert($("h2").css("font-weight") == "600", "Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.");'
- text: Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.
testString: 'assert($(''h3'').css(''font-weight'') == ''500'', ''Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.'');'
testString: 'assert($("h3").css("font-weight") == "500", "Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.");'
- text: Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.
testString: 'assert($(''h4'').css(''font-weight'') == ''400'', ''Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.'');'
testString: 'assert($("h4").css("font-weight") == "400", "Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.");'
- text: Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.
testString: 'assert($(''h5'').css(''font-weight'') == ''300'', ''Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.'');'
testString: 'assert($("h5").css("font-weight") == "300", "Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.");'
- text: Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.
testString: 'assert($(''h6'').css(''font-weight'') == ''200'', ''Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.'');'
testString: 'assert($("h6").css("font-weight") == "200", "Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.");'
```
@ -47,27 +47,27 @@ tests:
<style>
h1 {
font-size: 68px;
}
h2 {
font-size: 52px;
}
h3 {
font-size: 40px;
}
h4 {
font-size: 32px;
}
h5 {
font-size: 21px;
}
h6 {
font-size: 14px;
}
</style>
<h1>This is h1 text</h1>

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.english.md
View File

@ -21,7 +21,7 @@ Add a <code>line-height</code> property to the <code>p</code> tag and set it to
```yml
tests:
- text: Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.
testString: 'assert($(''p'').css(''line-height'') == ''25px'', ''Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.'');'
testString: 'assert($("p").css("line-height") == "25px", "Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.");'
```
@ -36,7 +36,7 @@ tests:
<style>
p {
font-size: 16px;
}
</style>
<p>

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.english.md
View File

@ -24,11 +24,11 @@ To see the effect of this Bezier curve in action, change the <code>animation-tim
```yml
tests:
- text: 'The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .'
testString: 'assert($(''#red'').css(''animation-timing-function'') == ''cubic-bezier(0, 0, 0.58, 1)'', ''The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .'');'
testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
- text: The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.
testString: 'assert($(''#red'').css(''animation-timing-function'') !== ''linear'', ''The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.'');'
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");'
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.
testString: 'assert($(''#blue'').css(''animation-timing-function'') == ''ease-out'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.'');'
testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.");'
```

14
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.english.md
View File

@ -26,17 +26,17 @@ Make stripes by changing the <code>repeating-linear-gradient()</code> to use a g
```yml
tests:
- text: The angle of the <code>repeating-linear-gradient()</code> should be 45deg.
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), ''The angle of the <code>repeating-linear-gradient()</code> should be 45deg.'');'
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.");'
- text: The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg
testString: 'assert(!code.match(/90deg/gi), ''The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg'');'
testString: 'assert(!code.match(/90deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg");'
- text: The color stop at 0 pixels should be <code>yellow</code>.
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), ''The color stop at 0 pixels should be <code>yellow</code>.'');'
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be <code>yellow</code>.");'
- text: One color stop at 40 pixels should be <code>yellow</code>.
testString: 'assert(code.match(/yellow\s+?40px/gi), ''One color stop at 40 pixels should be <code>yellow</code>.'');'
testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be <code>yellow</code>.");'
- text: The second color stop at 40 pixels should be <code>black</code>.
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), ''The second color stop at 40 pixels should be <code>black</code>.'');'
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be <code>black</code>.");'
- text: The last color stop at 80 pixels should be <code>black</code>.
testString: 'assert(code.match(/black\s+?80px/gi), ''The last color stop at 80 pixels should be <code>black</code>.'');'
testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be <code>black</code>.");'
```
@ -50,7 +50,7 @@ tests:
```html
<style>
div{
div{
border-radius: 20px;
width: 70%;
height: 400px;

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.english.md
View File

@ -24,9 +24,9 @@ Use CSS <code>@keyframes</code> to change the <code>background-color</code> of t
```yml
tests:
- text: The @keyframes rule should use the <code>animation-name</code> background-color.
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), ''The @keyframes rule should use the <code>animation-name</code> background-color.'');'
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the <code>animation-name</code> background-color.");'
- text: 'There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), ''There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.'');'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.");'
```
@ -45,15 +45,15 @@ tests:
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
}
</style>
<button>Register</button>
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.english.md
View File

@ -23,7 +23,7 @@ Skew the element with the id of <code>bottom</code> by 24 degrees along the X-ax
```yml
tests:
- text: The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), ''The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.'');'
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), "The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.");'
```
@ -36,7 +36,7 @@ tests:
```html
<style>
div {
div {
width: 70%;
height: 100px;
margin: 50px auto;
@ -46,7 +46,7 @@ tests:
}
#bottom {
background-color: blue;
}
</style>

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.english.md
View File

@ -21,7 +21,7 @@ Skew the element with the id of <code>top</code> -10 degrees along the Y-axis by
```yml
tests:
- text: The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), ''The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.'');'
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), "The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.");'
```
@ -34,14 +34,14 @@ tests:
```html
<style>
div {
div {
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
}
#bottom {
background-color: blue;

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.english.md
View File

@ -22,7 +22,7 @@ Increase the size of the element with the id of <code>ball2</code> to 1.5 times
```yml
tests:
- text: 'Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.'
testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), ''Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.'');'
testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.");'
```
@ -35,7 +35,7 @@ tests:
```html
<style>
.ball {
.ball {
width: 40px;
height: 40px;
margin: 50 auto;
@ -52,7 +52,7 @@ tests:
}
#ball2 {
left: 65%;
}

10
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.english.md
View File

@ -23,7 +23,7 @@ Add a CSS rule for the <code>hover</code> state of the <code>div</code> and use
```yml
tests:
- text: The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), ''The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.'');'
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.");'
```
@ -36,7 +36,7 @@ tests:
```html
<style>
div {
div {
width: 70%;
height: 100px;
margin: 50px auto;
@ -46,9 +46,9 @@ tests:
#ffcccf
);
}
</style>
<div></div>

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.english.md
View File

@ -21,9 +21,9 @@ Wrap an <code>em</code> tag around the contents of the paragraph tag to give it
```yml
tests:
- text: Your code should add an <code>em</code> tag to the markup.
testString: 'assert($(''em'').length == 1, ''Your code should add an <code>em</code> tag to the markup.'');'
testString: 'assert($("em").length == 1, "Your code should add an <code>em</code> tag to the markup.");'
- text: The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.
testString: 'assert($(''p'').children().length == 1 && $(''em'').children().length == 2, ''The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.'');'
testString: 'assert($("p").children().length == 1 && $("em").children().length == 2, "The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.english.md
View File

@ -2,7 +2,7 @@
id: 587d781b367417b2b2512aba
title: Use the s Tag to Strikethrough Text
challengeType: 0
videoUrl: ''
videoUrl: "
---
## Description
@ -21,11 +21,11 @@ Wrap the <code>s</code> tag around "Google" inside the <code>h4</code> tag and t
```yml
tests:
- text: Your code should add one <code>s</code> tag to the markup.
testString: 'assert($(''s'').length == 1, ''Your code should add one <code>s</code> tag to the markup.'');'
testString: 'assert($("s").length == 1, "Your code should add one <code>s</code> tag to the markup.");'
- text: A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.
testString: 'assert($(''s'').text().match(/Google/gi) && !$(''s'').text().match(/Alphabet/gi), ''A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.'');'
testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.");'
- text: 'Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.'
testString: 'assert($(''h4'').html().match(/Alphabet/gi), ''Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.'');'
testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.english.md
View File

@ -21,11 +21,11 @@ Wrap a <code>strong</code> tag around "Stanford University" inside the <code>p</
```yml
tests:
- text: Your code should add one <code>strong</code> tag to the markup.
testString: 'assert($(''strong'').length == 1, ''Your code should add one <code>strong</code> tag to the markup.'');'
testString: 'assert($("strong").length == 1, "Your code should add one <code>strong</code> tag to the markup.");'
- text: The <code>strong</code> tag should be inside the <code>p</code> tag.
testString: 'assert($(''p'').children(''strong'').length == 1, ''The <code>strong</code> tag should be inside the <code>p</code> tag.'');'
testString: 'assert($("p").children("strong").length == 1, "The <code>strong</code> tag should be inside the <code>p</code> tag.");'
- text: The <code>strong</code> tag should wrap around the words "Stanford University".
testString: 'assert($(''strong'').text().match(/^Stanford University$/gi), ''The <code>strong</code> tag should wrap around the words "Stanford University".'');'
testString: 'assert($("strong").text().match(/^Stanford University$/gi), "The <code>strong</code> tag should wrap around the words "Stanford University".");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.english.md
View File

@ -23,9 +23,9 @@ Transform the text of the <code>h4</code> to be uppercase using the <code>text-t
```yml
tests:
- text: The <code>h4</code> text should be uppercase.
testString: 'assert($(''h4'').css(''text-transform'') === ''uppercase'', ''The <code>h4</code> text should be uppercase.'');'
testString: 'assert($("h4").css("text-transform") === "uppercase", "The <code>h4</code> text should be uppercase.");'
- text: The original text of the h4 should not be changed.
testString: 'assert(($(''h4'').text() !== $(''h4'').text().toUpperCase()), ''The original text of the h4 should not be changed.'');'
testString: 'assert(($("h4").text() !== $("h4").text().toUpperCase()), "The original text of the h4 should not be changed.");'
```
@ -43,7 +43,7 @@ tests:
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.english.md
View File

@ -22,9 +22,9 @@ Wrap the <code>u</code> tag only around the text "Ph.D. students".
```yml
tests:
- text: Your code should add a <code>u</code> tag to the markup.
testString: 'assert($(''u'').length === 1, ''Your code should add a <code>u</code> tag to the markup.'');'
testString: 'assert($("u").length === 1, "Your code should add a <code>u</code> tag to the markup.");'
- text: The <code>u</code> tag should wrap around the text "Ph.D. students".
testString: 'assert($(''u'').text() === ''Ph.D. students'', ''The <code>u</code> tag should wrap around the text "Ph.D. students".'');'
testString: 'assert($("u").text() === "Ph.D. students", "The <code>u</code> tag should wrap around the text "Ph.D. students".");'
```

4
curriculum/challenges/english/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.english.md
View File

@ -24,7 +24,7 @@ Change the <code>margin</code> of the blue box to <code>-15px</code>, so it fill
```yml
tests:
- text: Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "-15px", ''Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.");'
```
@ -53,7 +53,7 @@ tests:
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;

16
curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.english.md
View File

@ -26,15 +26,15 @@ Remember that you can apply multiple classes to an element using its <code>class
```yml
tests:
- text: Your <code>img</code> element should have the class <code>smaller-image</code>.
testString: 'assert($("img").hasClass("smaller-image"), ''Your <code>img</code> element should have the class <code>smaller-image</code>.'');'
testString: 'assert($("img").hasClass("smaller-image"), "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
- text: Your <code>img</code> element should have the class <code>thick-green-border</code>.
testString: 'assert($("img").hasClass("thick-green-border"), ''Your <code>img</code> element should have the class <code>thick-green-border</code>.'');'
testString: 'assert($("img").hasClass("thick-green-border"), "Your <code>img</code> element should have the class <code>thick-green-border</code>.");'
- text: Give your image a border width of <code>10px</code>.
testString: 'assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, ''Give your image a border width of <code>10px</code>.'');'
testString: 'assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, "Give your image a border width of <code>10px</code>.");'
- text: Give your image a border style of <code>solid</code>.
testString: 'assert($("img").css("border-right-style") === "solid", ''Give your image a border style of <code>solid</code>.'');'
testString: 'assert($("img").css("border-right-style") === "solid", "Give your image a border style of <code>solid</code>.");'
- text: The border around your <code>img</code> element should be green.
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", ''The border around your <code>img</code> element should be green.'');'
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", "The border around your <code>img</code> element should be green.");'
```
@ -69,9 +69,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -86,7 +86,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

10
curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.english.md
View File

@ -22,13 +22,13 @@ Give the blue box a <code>margin</code> of <code>40px</code> on its top and left
```yml
tests:
- text: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "40px", ''Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-right") === "20px", ''Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", ''Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-left") === "40px", ''Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");'
```
@ -57,7 +57,7 @@ tests:
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;

10
curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.english.md
View File

@ -23,13 +23,13 @@ Give the blue box a <code>padding</code> of <code>40px</code> on its top and lef
```yml
tests:
- text: Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-top") === "40px", ''Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-right") === "20px", ''Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", ''Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-left") === "40px", ''Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.");'
```
@ -58,7 +58,7 @@ tests:
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;

10
curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.english.md
View File

@ -23,9 +23,9 @@ Note: this challenge allows for multiple possible solutions. For example, you ma
```yml
tests:
- text: Your image element should have the class "thick-green-border".
testString: 'assert($("img").hasClass("thick-green-border"), ''Your image element should have the class "thick-green-border".'');'
testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");'
- text: Your image should have a border radius of <code>10px</code>
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, ''Your image should have a border radius of <code>10px</code>'');'
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");'
```
@ -66,9 +66,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -83,7 +83,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

4
curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.english.md
View File

@ -24,7 +24,7 @@ Change the <code>margin</code> of the blue box to match that of the red box.
```yml
tests:
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "20px", ''Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.");'
```
@ -53,7 +53,7 @@ tests:
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;

4
curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.english.md
View File

@ -27,7 +27,7 @@ Change the <code>padding</code> of your blue box to match that of your red box.
```yml
tests:
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-top") === "20px", ''Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.");'
```
@ -56,7 +56,7 @@ tests:
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;

48
curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.english.md
View File

@ -26,9 +26,9 @@ It looks there is a problem with the variables supplied to the <code>.penguin-to
```yml
tests:
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), ''Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.'');'
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.");'
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), ''Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.'');'
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.");'
```
@ -52,33 +52,33 @@ tests:
width: 300px;
height: 300px;
}
.penguin-top {
top: 10%;
left: 25%;
/* change code below */
background: var(--pengiun-skin);
/* change code above */
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
/* change code below */
background: var(--pengiun-skin);
/* change code above */
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
@ -89,7 +89,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
@ -100,7 +100,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
.right-cheek {
top: 15%;
left: 35%;
@ -109,7 +109,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -118,7 +118,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -127,7 +127,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.right-feet {
top: 85%;
left: 60%;
@ -138,7 +138,7 @@ tests:
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -149,7 +149,7 @@ tests:
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
@ -158,7 +158,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
@ -167,7 +167,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
@ -176,7 +176,7 @@ tests:
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
@ -185,7 +185,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
@ -194,7 +194,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
@ -203,7 +203,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
@ -212,11 +212,11 @@ tests:
height: 10%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}

44
curriculum/challenges/english/01-responsive-web-design/basic-css/cascading-css-variables.english.md
View File

@ -23,7 +23,7 @@ Define a variable named <code>--penguin-belly</code> in the <code>:root</code> s
```yml
tests:
- text: 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), ''declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'');'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
```
@ -37,16 +37,16 @@ tests:
```html
<style>
:root {
/* add code below */
/* add code above */
}
body {
background: var(--penguin-belly, #c6faf1);
}
.penguin {
--penguin-skin: gray;
--penguin-beak: orange;
@ -57,7 +57,7 @@ tests:
width: 300px;
height: 300px;
}
.right-cheek {
top: 15%;
left: 35%;
@ -66,7 +66,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -75,7 +75,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -84,7 +84,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.penguin-top {
top: 10%;
left: 25%;
@ -93,7 +93,7 @@ tests:
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
@ -102,7 +102,7 @@ tests:
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
@ -113,7 +113,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
@ -124,7 +124,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
.right-feet {
top: 85%;
left: 60%;
@ -135,7 +135,7 @@ tests:
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -146,7 +146,7 @@ tests:
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
@ -155,7 +155,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
@ -164,7 +164,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
@ -173,7 +173,7 @@ tests:
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
@ -182,7 +182,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
@ -191,7 +191,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
@ -200,7 +200,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
@ -209,7 +209,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.penguin * {
position: absolute;
}

46
curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.english.md
View File

@ -22,7 +22,7 @@ Change the value of <code>--penguin-belly</code> to <code>white</code> in the <c
```yml
tests:
- text: The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), ''The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.'');'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.");'
```
@ -40,17 +40,17 @@ tests:
--penguin-belly: pink;
--penguin-beak: orange;
}
body {
background: var(--penguin-belly, #c6faf1);
}
.penguin {
/* add code below */
/* add code above */
position: relative;
margin: auto;
display: block;
@ -58,7 +58,7 @@ tests:
width: 300px;
height: 300px;
}
.right-cheek {
top: 15%;
left: 35%;
@ -67,7 +67,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -76,7 +76,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -85,7 +85,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.penguin-top {
top: 10%;
left: 25%;
@ -94,7 +94,7 @@ tests:
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
@ -103,7 +103,7 @@ tests:
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
@ -114,7 +114,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
@ -125,7 +125,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
.right-feet {
top: 85%;
left: 60%;
@ -136,7 +136,7 @@ tests:
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -147,7 +147,7 @@ tests:
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
@ -156,7 +156,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
@ -165,7 +165,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
@ -174,7 +174,7 @@ tests:
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
@ -183,7 +183,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
@ -192,7 +192,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
@ -201,7 +201,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
@ -210,7 +210,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.penguin * {
position: absolute;
}

10
curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.english.md
View File

@ -26,9 +26,9 @@ Change your <code>h2</code> element's style so that its text color is red.
```yml
tests:
- text: Your <code>h2</code> element should be red.
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", ''Your <code>h2</code> element should be red.'');'
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
- text: Your <code>style</code> declaration should end with a <code>;</code> .
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\''|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\''|")>\s*CatPhotoApp\s*<\/h2>/),'' Your <code>style</code> declaration should end with a <code>;</code> .'');'
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\"|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\"|")>\s*CatPhotoApp\s*<\/h2>/)," Your <code>style</code> declaration should end with a <code>;</code> .");'
```
@ -43,9 +43,9 @@ tests:
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -60,7 +60,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

8
curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.english.md
View File

@ -22,7 +22,7 @@ Inside the same <code>&#60;style&#62;</code> tag that contains your <code>red-te
```yml
tests:
- text: 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.'
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), ''Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.'');'
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");'
```
@ -43,9 +43,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -60,7 +60,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

60
curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.english.md
View File

@ -24,7 +24,7 @@ In the <code>penguin</code> class, create a variable name <code>--penguin-skin</
```yml
tests:
- text: <code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.'');'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.");'
```
@ -38,9 +38,9 @@ tests:
```html
<style>
.penguin {
/* add code below */
/* add code above */
position: relative;
margin: auto;
@ -49,7 +49,7 @@ tests:
width: 300px;
height: 300px;
}
.penguin-top {
top: 10%;
left: 25%;
@ -58,7 +58,7 @@ tests:
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
@ -67,7 +67,7 @@ tests:
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
@ -78,7 +78,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
@ -89,7 +89,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
.right-cheek {
top: 15%;
left: 35%;
@ -98,7 +98,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -107,7 +107,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -116,7 +116,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.right-feet {
top: 85%;
left: 60%;
@ -125,9 +125,9 @@ tests:
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -136,76 +136,76 @@ tests:
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
background: white;
width: 35%;
height: 35%;
border-radius: 50%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
background: orange;
width: 20%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
background: orange;
width: 16%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}

10
curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.english.md
View File

@ -23,9 +23,9 @@ Create a class called <code>silver-background</code> with the <code>background-c
```yml
tests:
- text: Give your <code>div</code> element the class <code>silver-background</code>.
testString: 'assert($("div").hasClass("silver-background"), ''Give your <code>div</code> element the class <code>silver-background</code>.'');'
testString: 'assert($("div").hasClass("silver-background"), "Give your <code>div</code> element the class <code>silver-background</code>.");'
- text: Your <code>div</code> element should have a silver background.
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", ''Your <code>div</code> element should have a silver background.'');'
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", "Your <code>div</code> element should have a silver background.");'
- text: Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.
testString: 'assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/), "Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.");'
@ -69,9 +69,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -86,7 +86,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

14
curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.english.md
View File

@ -28,13 +28,13 @@ Create a <code>font-family</code> CSS rule that uses the <code>Lobster</code> fo
```yml
tests:
- text: Import the <code>Lobster</code> font.
testString: 'assert(new RegExp("googleapis", "gi").test(code), ''Import the <code>Lobster</code> font.'');'
testString: 'assert(new RegExp("googleapis", "gi").test(code), "Import the <code>Lobster</code> font.");'
- text: Your <code>h2</code> element should use the font <code>Lobster</code>.
testString: 'assert($("h2").css("font-family").match(/lobster/i), ''Your <code>h2</code> element should use the font <code>Lobster</code>.'');'
testString: 'assert($("h2").css("font-family").match(/lobster/i), "Your <code>h2</code> element should use the font <code>Lobster</code>.");'
- text: Use an <code>h2</code> CSS selector to change the font.
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?\s*;\s*\}/gi.test(code), ''Use an <code>h2</code> CSS selector to change the font.'');'
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?\s*;\s*\}/gi.test(code), "Use an <code>h2</code> CSS selector to change the font.");'
- text: Your <code>p</code> element should still use the font <code>monospace</code>.
testString: 'assert($("p").css("font-family").match(/monospace/i), ''Your <code>p</code> element should still use the font <code>monospace</code>.'');'
testString: 'assert($("p").css("font-family").match(/monospace/i), "Your <code>p</code> element should still use the font <code>monospace</code>.");'
```
@ -60,9 +60,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -77,7 +77,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

6
curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.english.md
View File

@ -2,7 +2,7 @@
id: 5b7d72c338cd7e35b63f3e14
title: Improve Compatibility with Browser Fallbacks
challengeType: 0
videoUrl: ''
videoUrl: "
---
## Description
@ -23,7 +23,7 @@ It looks like a variable is being used to set the background color of the <code>
```yml
tests:
- text: Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), ''Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.'');'
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), "Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.");'
```
@ -40,7 +40,7 @@ tests:
--red-color: red;
}
.red-box {
background: var(--red-color);
height: 200px;
width:200px;

14
curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.english.md
View File

@ -24,19 +24,19 @@ Finally, give your <code>body</code> element the font-family of <code>monospace<
```yml
tests:
- text: Create an <code>h1</code> element.
testString: 'assert(($("h1").length > 0), ''Create an <code>h1</code> element.'');'
testString: 'assert(($("h1").length > 0), "Create an <code>h1</code> element.");'
- text: Your <code>h1</code> element should have the text <code>Hello World</code>.
testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), ''Your <code>h1</code> element should have the text <code>Hello World</code>.'');'
testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), "Your <code>h1</code> element should have the text <code>Hello World</code>.");'
- text: Make sure your <code>h1</code> element has a closing tag.
testString: 'assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, ''Make sure your <code>h1</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, "Make sure your <code>h1</code> element has a closing tag.");'
- text: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.
testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), ''Give your <code>body</code> element the <code>color</code> property of <code>green</code>.'');'
testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.");'
- text: Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.
testString: 'assert(($("body").css("font-family").match(/monospace/i)), ''Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.'');'
testString: 'assert(($("body").css("font-family").match(/monospace/i)), "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.");'
- text: Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.
testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), ''Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.'');'
testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.");'
- text: Your <code>h1</code> element should inherit the color green from your <code>body</code> element.
testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), ''Your <code>h1</code> element should inherit the color green from your <code>body</code> element.'');'
testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.");'
```

10
curriculum/challenges/english/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.english.md
View File

@ -21,9 +21,9 @@ Give your cat photo a <code>border-radius</code> of <code>50%</code>.
```yml
tests:
- text: 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.'
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, ''Your image should have a border radius of <code>50%</code>, making it perfectly circular.'');'
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, "Your image should have a border radius of <code>50%</code>, making it perfectly circular.");'
- text: Be sure to use a percentage value of <code>50%</code>.
testString: 'assert(code.match(/50%/g), ''Be sure to use a percentage value of <code>50%</code>.'');'
testString: 'assert(code.match(/50%/g), "Be sure to use a percentage value of <code>50%</code>.");'
```
@ -65,9 +65,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -82,7 +82,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

12
curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.english.md
View File

@ -26,17 +26,17 @@ An example of how to do this is:
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", ''Your <code>h1</code> element should have the id of <code>orange-text</code>.'');'
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
- text: 'Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.'
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), ''Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.'');'
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.");'
- text: Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), ''Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.'');'
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");'
- text: Your <code>h1</code> element should be pink.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", ''Your <code>h1</code> element should be pink.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
```

14
curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.english.md
View File

@ -28,19 +28,19 @@ Note: It doesn't matter whether you declare this CSS above or below pink-text cl
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Give your <code>h1</code> element the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", ''Give your <code>h1</code> element the id of <code>orange-text</code>.'');'
testString: 'assert($("h1").attr("id") === "orange-text", "Give your <code>h1</code> element the id of <code>orange-text</code>.");'
- text: There should be only one <code>h1</code> element.
testString: 'assert(($("h1").length === 1), ''There should be only one <code>h1</code> element.'');'
testString: 'assert(($("h1").length === 1), "There should be only one <code>h1</code> element.");'
- text: Create a CSS declaration for your <code>orange-text</code> id
testString: 'assert(code.match(/#orange-text\s*{/gi), ''Create a CSS declaration for your <code>orange-text</code> id'');'
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your <code>orange-text</code> id");'
- text: Do not give your <code>h1</code> any <code>style</code> attributes.
testString: 'assert(!code.match(/<h1.*style.*>/gi), ''Do not give your <code>h1</code> any <code>style</code> attributes.'');'
testString: 'assert(!code.match(/<h1.*style.*>/gi), "Do not give your <code>h1</code> any <code>style</code> attributes.");'
- text: Your <code>h1</code> element should be orange.
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", ''Your <code>h1</code> element should be orange.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your <code>h1</code> element should be orange.");'
```

10
curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.english.md
View File

@ -24,15 +24,15 @@ Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <cod
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", ''Your <code>h1</code> element should have the id of <code>orange-text</code>.'');'
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
- text: Give your <code>h1</code> element an inline style.
testString: 'assert(document.querySelector(''h1[style]''), ''Give your <code>h1</code> element an inline style.'');'
testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");'
- text: Your <code>h1</code> element should be white.
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", ''Your <code>h1</code> element should be white.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");'
```

8
curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.english.md
View File

@ -27,13 +27,13 @@ However, the order of the <code>class</code> declarations in the <code>&#60;styl
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.
testString: 'assert($(".pink-text").hasClass("blue-text"), ''Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.'');'
testString: 'assert($(".pink-text").hasClass("blue-text"), "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.");'
- text: Your <code>h1</code> element should be blue.
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", ''Your <code>h1</code> element should be blue.'');'
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your <code>h1</code> element should be blue.");'
```

6
curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.english.md
View File

@ -24,11 +24,11 @@ Give your <code>h1</code> element the class of <code>pink-text</code>.
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: 'Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.'
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), ''Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.'');'
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");'
- text: Your <code>h1</code> element should be pink.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", ''Your <code>h1</code> element should be pink.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
```

8
curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.english.md
View File

@ -23,7 +23,7 @@ Make all of your <code>p</code> elements use the <code>monospace</code> font.
```yml
tests:
- text: Your <code>p</code> elements should use the font <code>monospace</code>.
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), ''Your <code>p</code> elements should use the font <code>monospace</code>.'');'
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), "Your <code>p</code> elements should use the font <code>monospace</code>.");'
```
@ -48,9 +48,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -65,7 +65,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

8
curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.english.md
View File

@ -25,7 +25,7 @@ Give your <code>form</code> element the id <code>cat-photo-form</code>.
```yml
tests:
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>.
testString: 'assert($("form").attr("id") === "cat-photo-form", ''Give your <code>form</code> element the id of <code>cat-photo-form</code>.'');'
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
```
@ -71,9 +71,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
@ -88,7 +88,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

10
curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.english.md
View File

@ -24,9 +24,9 @@ Create a class called <code>smaller-image</code> and use it to resize the image
```yml
tests:
- text: Your <code>img</code> element should have the class <code>smaller-image</code>.
testString: 'assert($("img[src=''https://bit.ly/fcc-relaxing-cat'']").attr(''class'') === "smaller-image", ''Your <code>img</code> element should have the class <code>smaller-image</code>.'');'
testString: 'assert($("img[src="https://bit.ly/fcc-relaxing-cat"]").attr("class") === "smaller-image", "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
- text: Your image should be 100 pixels wide. Browser zoom should be at 100%.
testString: 'assert($("img").width() === 100, ''Your image should be 100 pixels wide. Browser zoom should be at 100%.'');'
testString: 'assert($("img").width() === 100, "Your image should be 100 pixels wide. Browser zoom should be at 100%.");'
```
@ -57,9 +57,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -74,7 +74,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

Some files were not shown because too many files have changed in this diff Show More