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

Feat: add new Markdown parser (#39800)

Browse Source 
and change all the challenges to new `md` format.
This commit is contained in:
Oliver Eyton-Williams
2020-11-27 19:02:05 +01:00
committed by GitHub
parent a07f84c8ec
commit 0bd52f8bd1
2580 changed files with 113436 additions and 111979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/c/cvVZdUd'
forumTopicId: 301031
---
## Description
<section id='description'>
The <code>box-shadow</code> property applies one or more shadows to an element.
The <code>box-shadow</code> property takes values for
# --description--
The `box-shadow` property applies one or more shadows to an element.
The `box-shadow` property takes values for
<ul>
<li><code>offset-x</code> (how far to push the shadow horizontally from the element),</li>
<li><code>offset-y</code> (how far to push the shadow vertically from the element),</li>
@ -17,39 +19,42 @@ The <code>box-shadow</code> property takes values for
<li><code>spread-radius</code> and</li>
<li><code>color</code>, in that order.</li>
</ul>
The <code>blur-radius</code> and <code>spread-radius</code> values are optional.
Multiple box-shadows can be created by using commas to separate properties of each <code>box-shadow</code> element.
The `blur-radius` and `spread-radius` values are optional.
Multiple box-shadows can be created by using commas to separate properties of each `box-shadow` element.
Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:
```css
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
The element now has an id of <code>thumbnail</code>. With this selector, use the example CSS values above to place a <code>box-shadow</code> on the card.
</section>
The element now has an id of `thumbnail`. With this selector, use the example CSS values above to place a `box-shadow` on the card.
## Tests
<section id='tests'>
# --hints--
```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));
- 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*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi));
Your code should add a `box-shadow` property for the `thumbnail` id.
```js
assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
```
</section>
You should use the given CSS for the `box-shadow` value.
## Challenge Seed
<section id='challengeSeed'>
```js
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*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi
)
);
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -98,15 +103,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -154,5 +151,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,40 +6,54 @@ videoUrl: 'https://scrimba.com/c/cEDqwA6'
forumTopicId: 301032
---
## Description
<section id='description'>
Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a <code>background-color</code> to the element holding the text you want to emphasize. This challenge uses <code>rgba()</code> instead of <code>hex</code> codes or normal <code>rgb()</code>.
<blockquote>rgba stands for:<br>&nbsp;&nbsp;r = red<br>&nbsp;&nbsp;g = green<br>&nbsp;&nbsp;b = blue<br>&nbsp;&nbsp;a = alpha/level of opacity</blockquote>
The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. <code>rgba()</code> is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.
You'll use <code>background-color: rgba(45, 45, 45, 0.1)</code> for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.
</section>
# --description--
## Instructions
<section id='instructions'>
To make the text stand out more, adjust the <code>background-color</code> of the <code>h4</code> element to the given <code>rgba()</code> value.
Also for the <code>h4</code>, remove the <code>height</code> property and add <code>padding</code> of 10px.
</section>
Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a `background-color` to the element holding the text you want to emphasize. This challenge uses `rgba()` instead of `hex` codes or normal `rgb()`.
## Tests
<section id='tests'>
<blockquote>rgba stands for:<br>  r = red<br>  g = green<br>  b = blue<br>  a = alpha/level of opacity</blockquote>
```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(/(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(code.replace(/\s/g, '')));
- 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');
- text: The <code>height</code> property on the <code>h4</code> element should be removed.
testString: assert(!($('h4').css('height') == '25px'));
The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. `rgba()` is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.
You'll use `background-color: rgba(45, 45, 45, 0.1)` for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.
# --instructions--
To make the text stand out more, adjust the `background-color` of the `h4` element to the given `rgba()` value.
Also for the `h4`, remove the `height` property and add `padding` of 10px.
# --hints--
Your code should add a `background-color` property to the `h4` element set to `rgba(45, 45, 45, 0.1)`.
```js
assert(
/(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(
code.replace(/\s/g, '')
)
);
```
</section>
Your code should add a `padding` property to the `h4` element and set it to 10 pixels.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(
$('h4').css('padding-top') == '10px' &&
$('h4').css('padding-right') == '10px' &&
$('h4').css('padding-bottom') == '10px' &&
$('h4').css('padding-left') == '10px'
);
```
<div id='html-seed'>
The `height` property on the `h4` element should be removed.
```js
assert(!($('h4').css('height') == '25px'));
```
# --seed--
## --seed-contents--
```html
<style>
@ -85,14 +99,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -136,5 +143,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,38 +6,43 @@ videoUrl: 'https://scrimba.com/c/cWmPpud'
forumTopicId: 301033
---
## Description
<section id='description'>
# --description--
The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.
</section>
## Instructions
<section id='instructions'>
This page will use a shade of teal (<code>#09A7A1</code>) as the dominant color, and its orange (<code>#FF790E</code>) complement to visually highlight the sign-up buttons. Change the <code>background-color</code> of both the <code>header</code> and <code>footer</code> from black to the teal color. Then change the <code>h2</code> text <code>color</code> to teal as well. Finally, change the <code>background-color</code> of the <code>button</code> to the orange color.
</section>
# --instructions--
## Tests
<section id='tests'>
This page will use a shade of teal (`#09A7A1`) as the dominant color, and its orange (`#FF790E`) complement to visually highlight the sign-up buttons. Change the `background-color` of both the `header` and `footer` from black to the teal color. Then change the `h2` text `color` to teal as well. Finally, change the `background-color` of the `button` to the orange 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)');"
- 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)');"
- text: 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.'
testString: "assert($('h2').css('color') == 'rgb(9, 167, 161)');"
- 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)');"
# --hints--
The `header` element should have a `background-color` of #09A7A1.
```js
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
```
</section>
The `footer` element should have a `background-color` of #09A7A1.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
```
<div id='html-seed'>
The `h2` element should have a `color` of #09A7A1.
```js
assert($('h2').css('color') == 'rgb(9, 167, 161)');
```
The `button` element should have a `background-color` of #FF790E.
```js
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
```
# --seed--
## --seed-contents--
```html
<style>
@ -80,14 +85,7 @@ tests:
<footer>&copy; 2018 FCC Kitchen</footer>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -129,5 +127,3 @@ tests:
<br>
<footer>&copy; 2018 FCC Kitchen</footer>
```
</section>

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

@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/cEDaDTN'
forumTopicId: 301034
---
## Description
<section id='description'>
You can specify the height of an element using the <code>height</code> property in CSS, similar to the <code>width</code> property. Here's an example that changes the height of an image to 20px:
# --description--
You can specify the height of an element using the `height` property in CSS, similar to the `width` property. Here's an example that changes the height of an image to 20px:
```css
img {
@ -16,30 +16,27 @@ img {
}
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
Add a <code>height</code> property to the <code>h4</code> tag and set it to 25px.
<strong>Note:</strong> You may need to be at 100% zoom to pass the test on this challenge.
</section>
Add a `height` property to the `h4` tag and set it to 25px.
## Tests
<section id='tests'>
**Note:** You may need to be at 100% zoom to pass the test on this challenge.
```yml
tests:
- text: Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.
testString: assert(Math.round(document.querySelector('h4').getBoundingClientRect().height) === 25 && /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g ,'')));
# --hints--
Your code should change the `h4` `height` property to a value of 25 pixels.
```js
assert(
Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
25 &&
/h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -79,14 +76,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -125,5 +115,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cakRGcm'
forumTopicId: 301035
---
## Description
<section id='description'>
# --description--
This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.
For example, the styling of an anchor tag can be changed for its hover state using the <code>:hover</code> pseudo-class selector. Here's the CSS to change the <code>color</code> of the anchor tag to red during its hover state:
For example, the styling of an anchor tag can be changed for its hover state using the `:hover` pseudo-class selector. Here's the CSS to change the `color` of the anchor tag to red during its hover state:
```css
a:hover {
@ -17,31 +18,31 @@ a:hover {
}
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
The code editor has a CSS rule to style all <code>a</code> tags black. Add a rule so that when the user hovers over the <code>a</code> tag, the <code>color</code> is blue.
</section>
The code editor has a CSS rule to style all `a` tags black. Add a rule so that when the user hovers over the `a` tag, the `color` is blue.
## Tests
<section id='tests'>
# --hints--
```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)');
- 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|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi));
The anchor tag `color` should remain black, only add CSS rules for the `:hover` state.
```js
assert($('a').css('color') == 'rgb(0, 0, 0)');
```
</section>
The anchor tag should have a `color` of blue on hover.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(
code.match(
/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi
)
);
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -55,14 +56,7 @@ tests:
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -75,5 +69,3 @@ tests:
</style>
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
```
</section>

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

@ -6,47 +6,65 @@ videoUrl: 'https://scrimba.com/c/cPp38TZ'
forumTopicId: 301036
---
## Description
<section id='description'>
Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the <code>hsl()</code> property as an alternative way to pick a color by directly stating these characteristics.
<b>Hue</b> is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In <code>hsl()</code>, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.
<b>Saturation</b> is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.
<b>Lightness</b> is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.
Here are a few examples of using <code>hsl()</code> with fully-saturated, normal lightness colors:
<table class="table table-striped"><thead><tr><th>Color</th><th>HSL</th></tr></thead><tbody><tr><td>red</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>yellow</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>green</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>cyan</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>blue</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
</section>
# --description--
## Instructions
<section id='instructions'>
Change the <code>background-color</code> of each <code>div</code> element based on the class names (<code>green</code>, <code>cyan</code>, or <code>blue</code>) using <code>hsl()</code>. All three should have full saturation and normal lightness.
</section>
Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` property as an alternative way to pick a color by directly stating these characteristics.
## Tests
<section id='tests'>
**Hue** is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In `hsl()`, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.
```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));
- 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));
- 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));
- 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)');
- 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)');
- 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)');
**Saturation** is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.
**Lightness** is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.
Here are a few examples of using `hsl()` with fully-saturated, normal lightness colors:
<table class='table table-striped'><thead><tr><th>Color</th><th>HSL</th></tr></thead><tbody><tr><td>red</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>yellow</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>green</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>cyan</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>blue</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
# --instructions--
Change the `background-color` of each `div` element based on the class names (`green`, `cyan`, or `blue`) using `hsl()`. All three should have full saturation and normal lightness.
# --hints--
Your code should use the `hsl()` property to declare the color green.
```js
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
```
</section>
Your code should use the `hsl()` property to declare the color cyan.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
```
<div id='html-seed'>
Your code should use the `hsl()` property to declare the color blue.
```js
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
```
The `div` element with class `green` should have a `background-color` of green.
```js
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
```
The `div` element with class `cyan` should have a `background-color` of cyan.
```js
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
```
The `div` element with class `blue` should have a `background-color` of blue.
```js
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
```
# --seed--
## --seed-contents--
```html
<style>
@ -78,14 +96,7 @@ tests:
<div class="blue"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -98,7 +109,7 @@ tests:
}
.cyan {
background-color: hsl(180, 100%, 50%);
background-color: hsl(180, 100%, 50%);
}
.blue {
@ -115,5 +126,3 @@ tests:
<div class="cyan"></div>
<div class="blue"></div>
```
</section>

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

@ -6,32 +6,25 @@ videoUrl: 'https://scrimba.com/c/c3bRPTz'
forumTopicId: 301037
---
## Description
<section id='description'>
The font size of header tags (<code>h1</code> through <code>h6</code>) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the <code>font-size</code> property to adjust the size of the text in an element.
</section>
# --description--
## Instructions
<section id='instructions'>
To make the heading significantly larger than the paragraph, change the <code>font-size</code> of the <code>h4</code> tag to 27 pixels.
</section>
The font size of header tags (`h1` through `h6`) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the `font-size` property to adjust the size of the text in an element.
## Tests
<section id='tests'>
# --instructions--
```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');
To make the heading significantly larger than the paragraph, change the `font-size` of the `h4` tag to 27 pixels.
# --hints--
Your code should add a `font-size` property to the `h4` element set to 27 pixels.
```js
assert($('h4').css('font-size') == '27px');
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -77,14 +70,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -129,5 +115,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,32 +6,27 @@ videoUrl: 'https://scrimba.com/c/cEDJvT7'
forumTopicId: 301038
---
## Description
<section id='description'>
The <code>hsl()</code> option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of <code>hsl()</code> stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.
</section>
# --description--
## Instructions
<section id='instructions'>
All elements have a default <code>background-color</code> of <code>transparent</code>. Our <code>nav</code> element currently appears to have a <code>cyan</code> background, because the element behind it has a <code>background-color</code> set to <code>cyan</code>. Add a <code>background-color</code> to the <code>nav</code> element so it uses the same <code>cyan</code> hue, but has <code>80% saturation</code> and <code>25% lightness</code> values to change its tone and shade.
</section>
The `hsl()` option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of `hsl()` stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.
## Tests
<section id='tests'>
# --instructions--
```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));
All elements have a default `background-color` of `transparent`. Our `nav` element currently appears to have a `cyan` background, because the element behind it has a `background-color` set to `cyan`. Add a `background-color` to the `nav` element so it uses the same `cyan` hue, but has `80% saturation` and `25% lightness` values to change its tone and shade.
# --hints--
The `nav` element should have a `background-color` of the adjusted cyan tone using the `hsl()` property.
```js
assert(
code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -77,15 +72,7 @@ tests:
</header>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -129,5 +116,3 @@ tests:
</nav>
</header>
```
</section>

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

@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/cvVLPtN'
forumTopicId: 301039
---
## Description
<section id='description'>
You can specify the width of an element using the <code>width</code> property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
# --description--
You can specify the width of an element using the `width` property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
```css
img {
@ -16,29 +16,26 @@ img {
}
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
Add a <code>width</code> property to the entire card and set it to an absolute value of 245px. Use the <code>fullCard</code> class to select the element.
</section>
Add a `width` property to the entire card and set it to an absolute value of 245px. Use the `fullCard` class to select the element.
## Tests
<section id='tests'>
# --hints--
```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: const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g); assert(fullCard && /width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) && $('.fullCard').css('maxWidth') === 'none');
Your code should change the `width` property of the card to 245 pixels by using the `fullCard` class selector.
```js
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
assert(
fullCard &&
/width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
$('.fullCard').css('maxWidth') === 'none'
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -77,14 +74,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -122,5 +112,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,33 +6,27 @@ videoUrl: 'https://scrimba.com/c/cZ89WA4'
forumTopicId: 301040
---
## Description
<section id='description'>
There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an <code>animation-iteration-count</code> property and setting <code>@keyframes</code> rules.
To illustrate, the animation on the right consists of two "stars" that each decrease in size and opacity at the 20% mark in the <code>@keyframes</code> rule, which creates the twinkle animation. You can change the <code>@keyframes</code> rule for one of the elements so the stars twinkle at different rates.
</section>
# --description--
## Instructions
<section id='instructions'>
Alter the animation rate for the element with the class name of <code>star-1</code> by changing its <code>@keyframes</code> rule to 50%.
</section>
There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an `animation-iteration-count` property and setting `@keyframes` rules.
## Tests
<section id='tests'>
To illustrate, the animation on the right consists of two "stars" that each decrease in size and opacity at the 20% mark in the `@keyframes` rule, which creates the twinkle animation. You can change the `@keyframes` rule for one of the elements so the stars twinkle at different rates.
```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));
# --instructions--
Alter the animation rate for the element with the class name of `star-1` by changing its `@keyframes` rule to 50%.
# --hints--
The `@keyframes` rule for the `star-1` class should be 50%.
```js
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -89,15 +83,7 @@ tests:
<div class="star-2 stars"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -151,7 +137,4 @@ tests:
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
```
</section>

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

@ -6,34 +6,29 @@ videoUrl: 'https://scrimba.com/c/cVJDVfq'
forumTopicId: 301041
---
## Description
<section id='description'>
The previous challenges covered how to use some of the animation properties and the <code>@keyframes</code> rule. Another animation property is the <code>animation-iteration-count</code>, which allows you to control how many times you would like to loop through the animation. Here's an example:
<code>animation-iteration-count: 3;</code>
# --description--
The previous challenges covered how to use some of the animation properties and the `@keyframes` rule. Another animation property is the `animation-iteration-count`, which allows you to control how many times you would like to loop through the animation. Here's an example:
`animation-iteration-count: 3;`
In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.
</section>
## Instructions
<section id='instructions'>
To keep the ball bouncing on the right on a continuous loop, change the <code>animation-iteration-count</code> property to <code>infinite</code>.
</section>
# --instructions--
## Tests
<section id='tests'>
To keep the ball bouncing on the right on a continuous loop, change the `animation-iteration-count` property to `infinite`.
```yml
tests:
- text: The <code>animation-iteration-count</code> property should have a value of infinite.
testString: assert($('#ball').css('animation-iteration-count') == 'infinite');
# --hints--
The `animation-iteration-count` property should have a value of infinite.
```js
assert($('#ball').css('animation-iteration-count') == 'infinite');
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -71,14 +66,7 @@ tests:
<div id="ball"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -114,5 +102,3 @@ tests:
</style>
<div id="ball"></div>
```
</section>

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

@ -6,37 +6,39 @@ videoUrl: 'https://scrimba.com/c/cnpWZc9'
forumTopicId: 301042
---
## Description
<section id='description'>
In the previous challenge, you changed the animation rates for two similarly animated elements by altering their <code>@keyframes</code> rules. You can achieve the same goal by manipulating the <code>animation-duration</code> of multiple elements.
In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the <code>animation-duration</code> property to different values for each element.
</section>
# --description--
## Instructions
<section id='instructions'>
Set the <code>animation-duration</code> of the elements with the classes <code>star-1</code>, <code>star-2</code>, and <code>star-3</code> to 1s, 0.9s, and 1.1s, respectively.
</section>
In the previous challenge, you changed the animation rates for two similarly animated elements by altering their `@keyframes` rules. You can achieve the same goal by manipulating the `animation-duration` of multiple elements.
## Tests
<section id='tests'>
In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element.
```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');
- 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');
- 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');
# --instructions--
Set the `animation-duration` of the elements with the classes `star-1`, `star-2`, and `star-3` to 1s, 0.9s, and 1.1s, respectively.
# --hints--
The `animation-duration` property for the star with class `star-1` should remain at 1s.
```js
assert($('.star-1').css('animation-duration') == '1s');
```
</section>
The `animation-duration` property for the star with class `star-2` should be 0.9s.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('.star-2').css('animation-duration') == '0.9s');
```
<div id='html-seed'>
The `animation-duration` property for the star with class `star-3` should be 1.1s.
```js
assert($('.star-3').css('animation-duration') == '1.1s');
```
# --seed--
## --seed-contents--
```html
<style>
@ -94,14 +96,7 @@ tests:
<div class="star-3 stars"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -157,5 +152,3 @@ tests:
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>
```
</section>

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

@ -6,33 +6,27 @@ videoUrl: 'https://scrimba.com/c/cyLJqU4'
forumTopicId: 301043
---
## Description
<section id='description'>
Another positioning technique is to center a block element horizontally. One way to do this is to set its <code>margin</code> to a value of auto.
This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the <code>display</code> property to block.
</section>
# --description--
## Instructions
<section id='instructions'>
Center the <code>div</code> on the page by adding a <code>margin</code> property with a value of auto.
</section>
Another positioning technique is to center a block element horizontally. One way to do this is to set its `margin` to a value of auto.
## Tests
<section id='tests'>
This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the `display` property to block.
```yml
tests:
- text: The <code>div</code> should have a <code>margin</code> set to auto.
testString: assert(code.match(/margin:\s*?auto;/g));
# --instructions--
Center the `div` on the page by adding a `margin` property with a value of auto.
# --hints--
The `div` should have a `margin` set to auto.
```js
assert(code.match(/margin:\s*?auto;/g));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -46,15 +40,7 @@ tests:
<div></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -67,5 +53,3 @@ tests:
</style>
<div></div>
```
</section>

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

@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/czVmMtZ'
forumTopicId: 301044
---
## Description
<section id='description'>
# --description--
CSS treats each HTML element as its own box, which is usually referred to as the <dfn>CSS Box Model</dfn>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <dfn>normal flow</dfn> of a document, but CSS offers the position property to override it.
When the position of an element is set to <code>relative</code>, it allows you to specify how CSS should move it <i>relative</i> to its current position in the normal flow of the page. It pairs with the CSS offset properties of <code>left</code> or <code>right</code>, and <code>top</code> or <code>bottom</code>. These say how many pixels, percentages, or ems to move the item <i>away</i> from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
When the position of an element is set to `relative`, it allows you to specify how CSS should move it *relative* to its current position in the normal flow of the page. It pairs with the CSS offset properties of `left` or `right`, and `top` or `bottom`. These say how many pixels, percentages, or ems to move the item *away* from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
```css
p {
@ -18,33 +19,29 @@ p {
}
```
Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.
<strong>Note:</strong> Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
</section>
Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position. **Note:** Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
## Instructions
<section id='instructions'>
Change the <code>position</code> of the <code>h2</code> to <code>relative</code>, and use a CSS offset to move it 15 pixels away from the <code>top</code> of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements.
</section>
# --instructions--
## Tests
<section id='tests'>
Change the `position` of the `h2` to `relative`, and use a CSS offset to move it 15 pixels away from the `top` of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements.
```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');
- 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');
# --hints--
The `h2` element should have a `position` property set to `relative`.
```js
assert($('h2').css('position') == 'relative');
```
</section>
Your code should use a CSS offset to relatively position the `h2` 15px away from the `top` of where it normally sits.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('h2').css('top') == '15px');
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -60,14 +57,7 @@ tests:
</body>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -82,5 +72,3 @@ tests:
<p>I still think the h2 is where it normally sits.</p>
</body>
```
</section>

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

@ -6,35 +6,41 @@ videoUrl: 'https://scrimba.com/c/cJKvwCM'
forumTopicId: 301045
---
## Description
<section id='description'>
In CSS animations, the <code>animation-timing-function</code> property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your <code>animation-duration</code>), the <code>animation-timing-function</code> says how the car accelerates and decelerates over the course of the drive.
There are a number of predefined keywords available for popular options. For example, the default value is <code>ease</code>, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include <code>ease-out</code>, which is quick in the beginning then slows down, <code>ease-in</code>, which is slow in the beginning, then speeds up at the end, or <code>linear</code>, which applies a constant animation speed throughout.
</section>
# --description--
## Instructions
<section id='instructions'>
For the elements with id of <code>ball1</code> and <code>ball2</code>, add an <code>animation-timing-function</code> property to each, and set <code>#ball1</code> to <code>linear</code>, and <code>#ball2</code> to <code>ease-out</code>. Notice the difference between how the elements move during the animation but end together, since they share the same <code>animation-duration</code> of 2 seconds.
</section>
In CSS animations, the `animation-timing-function` property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your `animation-duration`), the `animation-timing-function` says how the car accelerates and decelerates over the course of the drive.
## Tests
<section id='tests'>
There are a number of predefined keywords available for popular options. For example, the default value is `ease`, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include `ease-out`, which is quick in the beginning then slows down, `ease-in`, which is slow in the beginning, then speeds up at the end, or `linear`, which applies a constant animation speed throughout.
```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: const ball1Animation = __helpers.removeWhiteSpace($('#ball1').css('animation-timing-function'));assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
- 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: const ball2Animation = __helpers.removeWhiteSpace($('#ball2').css('animation-timing-function')); assert(ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)');
# --instructions--
For the elements with id of `ball1` and `ball2`, add an `animation-timing-function` property to each, and set `#ball1` to `linear`, and `#ball2` to `ease-out`. Notice the difference between how the elements move during the animation but end together, since they share the same `animation-duration` of 2 seconds.
# --hints--
The value of the `animation-timing-function` property for the element with the id `ball1` should be linear.
```js
const ball1Animation = __helpers.removeWhiteSpace(
$('#ball1').css('animation-timing-function')
);
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
```
</section>
The value of the `animation-timing-function` property for the element with the id `ball2` should be ease-out.
## Challenge Seed
<section id='challengeSeed'>
```js
const ball2Animation = __helpers.removeWhiteSpace(
$('#ball2').css('animation-timing-function')
);
assert(
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
);
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -78,14 +84,7 @@ tests:
<div class="balls" id="ball2"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -125,5 +124,3 @@ tests:
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
```
</section>

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

@ -6,32 +6,25 @@ videoUrl: 'https://scrimba.com/c/cM94aHk'
forumTopicId: 301046
---
## Description
<section id='description'>
When elements are positioned to overlap (i.e. using <code>position: absolute | relative | fixed | sticky</code>), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the <code>z-index</code> property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the <code>z-index</code> property of an element move it higher in the stack than those with lower values.
</section>
# --description--
## Instructions
<section id='instructions'>
Add a <code>z-index</code> property to the element with the class name of <code>first</code> (the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle).
</section>
When elements are positioned to overlap (i.e. using `position: absolute | relative | fixed | sticky`), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the `z-index` property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the `z-index` property of an element move it higher in the stack than those with lower values.
## Tests
<section id='tests'>
# --instructions--
```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');
Add a `z-index` property to the element with the class name of `first` (the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle).
# --hints--
The element with class `first` should have a `z-index` value of 2.
```js
assert($('.first').css('z-index') == '2');
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -59,14 +52,7 @@ tests:
<div class="second"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -92,5 +78,3 @@ tests:
<div class="first"></div>
<div class="second"></div>
```
</section>

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

@ -6,36 +6,39 @@ videoUrl: 'https://scrimba.com/c/cg4dpt9'
forumTopicId: 301047
---
## Description
<section id='description'>
Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the <code>background</code> property's <code>linear-gradient()</code> function. Here is the general syntax:
<code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code>
The first argument specifies the direction from which color transition starts - it can be stated as a degree, where <code>90deg</code> makes a horizontal gradient (from left to right) and <code>45deg</code> makes a diagonal gradient (from bottom left to top right). The following arguments specify the order of colors used in the gradient.
# --description--
Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the `background` property's `linear-gradient()` function. Here is the general syntax:
`background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);`
The first argument specifies the direction from which color transition starts - it can be stated as a degree, where `90deg` makes a horizontal gradient (from left to right) and `45deg` makes a diagonal gradient (from bottom left to top right). The following arguments specify the order of colors used in the gradient.
Example:
<code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code>
</section>
## Instructions
<section id='instructions'>
Use a <code>linear-gradient()</code> for the <code>div</code> element's <code>background</code>, and set it from a direction of 35 degrees to change the color from <code>#CCFFFF</code> to <code>#FFCCCC</code>.
</section>
`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));`
## Tests
<section id='tests'>
# --instructions--
```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($('div').css('background-image').match(/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi));
Use a `linear-gradient()` for the `div` element's `background`, and set it from a direction of 35 degrees to change the color from `#CCFFFF` to `#FFCCCC`.
# --hints--
The `div` element should have a `linear-gradient` `background` with the specified direction and colors.
```js
assert(
$('div')
.css('background-image')
.match(
/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -52,14 +55,7 @@ tests:
<div></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -73,5 +69,3 @@ tests:
</style>
<div></div>
```
</section>

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

@ -6,39 +6,45 @@ videoUrl: 'https://scrimba.com/c/cEDWPs6'
forumTopicId: 301048
---
## Description
<section id='description'>
By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the <code>box-shadow</code> property that sets the shadow of an element, along with the <code>border-radius</code> property that controls the roundness of the element's corners.
# --description--
By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the `box-shadow` property that sets the shadow of an element, along with the `border-radius` property that controls the roundness of the element's corners.
You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.
In order to create a round object, the <code>border-radius</code> property should be set to a value of 50%.
You may recall from an earlier challenge that the <code>box-shadow</code> property takes values for <code>offset-x</code>, <code>offset-y</code>, <code>blur-radius</code>, <code>spread-radius</code> and a color value in that order. The <code>blur-radius</code> and <code>spread-radius</code> values are optional.
</section>
## Instructions
<section id='instructions'>
Manipulate the square element in the editor to create the moon shape. First, change the <code>background-color</code> to transparent, then set the <code>border-radius</code> property to 50% to make the circular shape. Finally, change the <code>box-shadow</code> property to set the <code>offset-x</code> to 25px, the <code>offset-y</code> to 10px, <code>blur-radius</code> to 0, <code>spread-radius</code> to 0, and color to blue.
</section>
In order to create a round object, the `border-radius` property should be set to a value of 50%.
## Tests
<section id='tests'>
You may recall from an earlier challenge that the `box-shadow` property takes values for `offset-x`, `offset-y`, `blur-radius`, `spread-radius` and a color value in that order. The `blur-radius` and `spread-radius` values are optional.
```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));
- 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));
- 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));
# --instructions--
Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to transparent, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and color to blue.
# --hints--
The value of the `background-color` property should be set to `transparent`.
```js
assert(code.match(/background-color:\s*?transparent;/gi));
```
</section>
The value of the `border-radius` property should be set to `50%`.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/border-radius:\s*?50%;/gi));
```
<div id='html-seed'>
The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally blue for the color.
```js
assert(
code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)
);
```
# --seed--
## --seed-contents--
```html
<style>
@ -60,15 +66,7 @@ tests:
<div class="center"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -87,7 +85,4 @@ tests:
}
</style>
<div class="center"></div>
```
</section>

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

@ -6,35 +6,33 @@ videoUrl: 'https://scrimba.com/c/c3bR8t7'
forumTopicId: 301049
---
## Description
<section id='description'>
You can use the <code>hr</code> tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.
</section>
# --description--
## Instructions
<section id='instructions'>
Add an <code>hr</code> tag underneath the <code>h4</code> which contains the card title.
<strong>Note:</strong> In HTML, <code>hr</code> is a self-closing tag, and therefore doesn't need a separate closing tag.
</section>
You can use the `hr` tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: Your code should add an <code>hr</code> tag to the markup.
testString: assert($('hr').length == 1);
- 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));
Add an `hr` tag underneath the `h4` which contains the card title.
**Note:** In HTML, `hr` is a self-closing tag, and therefore doesn't need a separate closing tag.
# --hints--
Your code should add an `hr` tag to the markup.
```js
assert($('hr').length == 1);
```
</section>
The `hr` tag should come between the title and the paragraph.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -78,14 +76,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -128,5 +119,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/cPpz4fr'
forumTopicId: 301050
---
## Description
<section id='description'>
One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the <code>::before</code> and <code>::after</code> pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a <code>::before</code> pseudo-element is used to add a rectangle to an element with the class <code>heart</code>:
# --description--
One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the `::before` and `::after` pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a `::before` pseudo-element is used to add a rectangle to an element with the class `heart`:
```css
.heart::before {
@ -23,39 +23,47 @@ One of the most popular shapes in the world is the heart shape, and in this chal
}
```
For the <code>::before</code> and <code>::after</code> pseudo-elements to function properly, they must have a defined <code>content</code> property. This property is usually used to add things like a photo or text to the selected element. When the <code>::before</code> and <code>::after</code> pseudo-elements are used to make shapes, the <code>content</code> property is still required, but it's set to an empty string.
In the above example, the element with the class of <code>heart</code> has a <code>::before</code> pseudo-element that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.
</section>
For the `::before` and `::after` pseudo-elements to function properly, they must have a defined `content` property. This property is usually used to add things like a photo or text to the selected element. When the `::before` and `::after` pseudo-elements are used to make shapes, the `content` property is still required, but it's set to an empty string. In the above example, the element with the class of `heart` has a `::before` pseudo-element that produces a yellow rectangle with `height` and `width` of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the `left` and 50px above the `top` of the element.
## Instructions
<section id='instructions'>
Transform the element on the screen to a heart. In the <code>heart::after</code> selector, change the <code>background-color</code> to pink and the <code>border-radius</code> to 50%.
Next, target the element with the class <code>heart</code> (just <code>heart</code>) and fill in the <code>transform</code> property. Use the <code>rotate()</code> function with -45 degrees.
Finally, in the <code>heart::before</code> selector, set its <code>content</code> property to an empty string.
</section>
# --instructions--
## Tests
<section id='tests'>
Transform the element on the screen to a heart. In the `heart::after` selector, change the `background-color` to pink and the `border-radius` to 50%.
```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));
- 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);
- 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));
- 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));
Next, target the element with the class `heart` (just `heart`) and fill in the `transform` property. Use the `rotate()` function with -45 degrees.
Finally, in the `heart::before` selector, set its `content` property to an empty string.
# --hints--
The `background-color` property of the `heart::after` selector should be pink.
```js
assert(
code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi)
);
```
</section>
The `border-radius` of the `heart::after` selector should be 50%.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
```
<div id='html-seed'>
The `transform` property for the `heart` class should use a `rotate()` function set to -45 degrees.
```js
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
```
The `content` of the `heart::before` selector should be an empty string.
```js
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
```
# --seed--
## --seed-contents--
```html
<style>
@ -95,14 +103,7 @@ tests:
<div class="heart"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -141,5 +142,3 @@ tests:
</style>
<div class="heart"></div>
```
</section>

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

@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/c7amZfW'
forumTopicId: 301051
---
## Description
<section id='description'>
When elements have a specified <code>position</code>, such as <code>fixed</code> or <code>relative</code>, the CSS offset properties <code>right</code>, <code>left</code>, <code>top</code>, and <code>bottom</code> can be used in animation rules to create movement.
As shown in the example below, you can push the item downwards then upwards by setting the <code>top</code> property of the <code>50%</code> keyframe to 50px, but having it set to 0px for the first (<code>0%</code>) and the last (<code>100%</code>) keyframe.
# --description--
When elements have a specified `position`, such as `fixed` or `relative`, the CSS offset properties `right`, `left`, `top`, and `bottom` can be used in animation rules to create movement.
As shown in the example below, you can push the item downwards then upwards by setting the `top` property of the `50%` keyframe to 50px, but having it set to 0px for the first (`0%`) and the last (`100%`) keyframe.
```css
@keyframes rainbow {
@ -28,33 +29,33 @@ As shown in the example below, you can push the item downwards then upwards by s
}
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
Add a horizontal motion to the <code>div</code> animation. Using the <code>left</code> offset property, add to the <code>@keyframes</code> rule so rainbow starts at 0 pixels at <code>0%</code>, moves to 25 pixels at <code>50%</code>, and ends at -25 pixels at <code>100%</code>. Don't replace the <code>top</code> property in the editor - the animation should have both vertical and horizontal motion.
</section>
Add a horizontal motion to the `div` animation. Using the `left` offset property, add to the `@keyframes` rule so rainbow starts at 0 pixels at `0%`, moves to 25 pixels at `50%`, and ends at -25 pixels at `100%`. Don't replace the `top` property in the editor - the animation should have both vertical and horizontal motion.
## Tests
<section id='tests'>
# --hints--
```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(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
- 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\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
- 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\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));
The `@keyframes` rule for `0%` should use the `left` offset of 0px.
```js
assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
```
</section>
The `@keyframes` rule for `50%` should use the `left` offset of 25px.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
```
<div id='html-seed'>
The `@keyframes` rule for `100%` should use the `left` offset of -25px.
```js
assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));
```
# --seed--
## --seed-contents--
```html
<style>
@ -94,15 +95,7 @@ tests:
<div id="rect"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -140,5 +133,3 @@ tests:
</style>
<div id="rect"></div>
```
</section>

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

@ -6,32 +6,29 @@ videoUrl: 'https://scrimba.com/c/cQdwJC8'
forumTopicId: 301052
---
## Description
<section id='description'>
One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The <code>background</code> property supports the <code>url()</code> function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.
</section>
# --description--
## Instructions
<section id='instructions'>
Using the url of <code>https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png</code>, set the <code>background</code> of the whole page with the <code>body</code> selector.
</section>
One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The `background` property supports the `url()` function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.
## Tests
<section id='tests'>
# --instructions--
```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:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi));
Using the url of `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png`, set the `background` of the whole page with the `body` selector.
# --hints--
Your `body` element should have a `background` property set to a `url()` with the given link.
```js
assert(
code.match(
/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -41,14 +38,7 @@ tests:
</style>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -57,5 +47,3 @@ tests:
}
</style>
```
</section>

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

@ -6,39 +6,41 @@ videoUrl: 'https://scrimba.com/c/c3b4EAp'
forumTopicId: 301053
---
## Description
<section id='description'>
# --description--
This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles.
Text is often a large part of web content. CSS has several options for how to align it with the <code>text-align</code> property.
<code>text-align: justify;</code> causes all lines of text except the last line to meet the left and right edges of the line box.
<code>text-align: center;</code> centers the text
<code>text-align: right;</code> right-aligns the text
And <code>text-align: left;</code> (the default) left-aligns the text.
</section>
## Instructions
<section id='instructions'>
Align the <code>h4</code> tag's text, which says "Google", to the center. Then justify the paragraph tag which contains information about how Google was founded.
</section>
Text is often a large part of web content. CSS has several options for how to align it with the `text-align` property.
## Tests
<section id='tests'>
`text-align: justify;` causes all lines of text except the last line to meet the left and right edges of the line box.
```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');
- 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');
`text-align: center;` centers the text
`text-align: right;` right-aligns the text
And `text-align: left;` (the default) left-aligns the text.
# --instructions--
Align the `h4` tag's text, which says "Google", to the center. Then justify the paragraph tag which contains information about how Google was founded.
# --hints--
Your code should use the text-align property on the `h4` tag to set it to center.
```js
assert($('h4').css('text-align') == 'center');
```
</section>
Your code should use the text-align property on the `p` tag to set it to justify.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('p').css('text-align') == 'justify');
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -76,14 +78,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -120,5 +115,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,33 +6,31 @@ videoUrl: 'https://scrimba.com/c/cGJqqAE'
forumTopicId: 301054
---
## Description
<section id='description'>
For this challenge, you'll change the <code>opacity</code> of an animated element so it gradually fades as it reaches the right side of the screen.
In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the <code>@keyframes</code> rule.
</section>
# --description--
## Instructions
<section id='instructions'>
Target the element with the id of <code>ball</code> and add the <code>opacity</code> property set to 0.1 at <code>50%</code>, so the element fades as it moves to the right.
</section>
For this challenge, you'll change the `opacity` of an animated element so it gradually fades as it reaches the right side of the screen.
## Tests
<section id='tests'>
In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the `@keyframes` rule.
```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));
# --instructions--
Target the element with the id of `ball` and add the `opacity` property set to 0.1 at `50%`, so the element fades as it moves to the right.
# --hints--
The `keyframes` rule for fade should set the `opacity` property to 0.1 at 50%.
```js
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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -65,15 +63,7 @@ tests:
<div id="ball"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -102,5 +92,3 @@ tests:
</style>
<div id="ball"></div>
```
</section>

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

@ -6,34 +6,33 @@ videoUrl: 'https://scrimba.com/c/c7aKqu4'
forumTopicId: 301055
---
## Description
<section id='description'>
The <code>opacity</code> property in CSS is used to adjust the opacity, or conversely, the transparency for an item.
# --description--
The `opacity` property in CSS is used to adjust the opacity, or conversely, the transparency for an item.
<blockquote>A value of 1 is opaque, which isn't transparent at all.<br>A value of 0.5 is half see-through.<br>A value of 0 is completely transparent.</blockquote>
The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.
</section>
## Instructions
<section id='instructions'>
Set the <code>opacity</code> of the anchor tags to 0.7 using <code>links</code> class to select them.
</section>
# --instructions--
## Tests
<section id='tests'>
Set the `opacity` of the anchor tags to 0.7 using `links` class to select them.
```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(/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test($('style').text()));
# --hints--
Your code should set the `opacity` property to 0.7 on the anchor tags by selecting the class of `links`.
```js
assert(
/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test(
$('style').text()
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -83,14 +82,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -139,5 +131,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,40 +6,43 @@ videoUrl: 'https://scrimba.com/c/c2MD3Tr'
forumTopicId: 301056
---
## Description
<section id='description'>
# --description--
Color theory and its impact on design is a deep topic and only the basics are covered in the following challenges. On a website, color can draw attention to content, evoke emotions, or create visual harmony. Using different combinations of colors can really change the look of a website, and a lot of thought can go into picking a color palette that works with your content.
The color wheel is a useful tool to visualize how colors relate to each other - it's a circle where similar hues are neighbors and different hues are farther apart. When two colors are opposite each other on the wheel, they are called complementary colors. They have the characteristic that if they are combined, they "cancel" each other out and create a gray color. However, when placed side-by-side, these colors appear more vibrant and produce a strong visual contrast.
Some examples of complementary colors with their hex codes are:
<blockquote>red (#FF0000) and cyan (#00FFFF)<br>green (#00FF00) and magenta (#FF00FF)<br>blue (#0000FF) and yellow (#FFFF00)</blockquote>
This is different than the outdated RYB color model that many of us were taught in school, which has different primary and complementary colors. Modern color theory uses the additive RGB model (like on a computer screen) and the subtractive CMY(K) model (like in printing). Read <a href='https://en.wikipedia.org/wiki/Color_model' target='_blank'>here</a> for more information on this complex subject.
This is different than the outdated RYB color model that many of us were taught in school, which has different primary and complementary colors. Modern color theory uses the additive RGB model (like on a computer screen) and the subtractive CMY(K) model (like in printing). Read [here](https://en.wikipedia.org/wiki/Color_model) for more information on this complex subject.
There are many color picking tools available online that have an option to find the complement of a color.
<strong>Note:</strong> For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
</section>
## Instructions
<section id='instructions'>
Change the <code>background-color</code> property of the <code>blue</code> and <code>yellow</code> classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background.
</section>
**Note:** For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
## Tests
<section id='tests'>
# --instructions--
```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)');
- 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)');
Change the `background-color` property of the `blue` and `yellow` classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background.
# --hints--
The `div` element with class `blue` should have a `background-color` of blue.
```js
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
```
</section>
The `div` element with class `yellow` should have a `background-color` of yellow.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -62,14 +65,7 @@ tests:
<div class="yellow"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -91,5 +87,3 @@ tests:
<div class="blue"></div>
<div class="yellow"></div>
```
</section>

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

@ -5,42 +5,51 @@ challengeType: 0
forumTopicId: 301057
---
## Description
<section id='description'>
# --description--
Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B) and yellow (R + G). You saw these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green.
Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, within the RGB color model, red (primary) and yellow (secondary) make orange (tertiary). This adds six more colors to a simple color wheel for a total of twelve.
There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. This scheme starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but are more subtle than using two complementary colors.
Here are three colors created using the split-complement scheme:
<table class="table table-striped"><thead><tr><th>Color</th><th>Hex Code</th></tr><thead><tbody><tr><td>orange</td><td>#FF7F00</td></tr><tr><td>cyan</td><td>#00FFFF</td></tr><tr><td>raspberry</td><td>#FF007F</td></tr></tbody></table>
</section>
## Instructions
<section id='instructions'>
Change the <code>background-color</code> property of the <code>orange</code>, <code>cyan</code>, and <code>raspberry</code> classes to their respective colors. Make sure to use the hex codes and not the color names.
</section>
<table class='table table-striped'><thead><tr><th>Color</th><th>Hex Code</th></tr></thead><thead></thead><tbody><tr><td>orange</td><td>#FF7F00</td></tr><tr><td>cyan</td><td>#00FFFF</td></tr><tr><td>raspberry</td><td>#FF007F</td></tr></tbody></table>
## Tests
<section id='tests'>
# --instructions--
```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, 127, 0)');
- 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)');
- 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, 127)');
- text: All <code>background-color</code> values for the color classes should be hex codes and not color names.
testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
Change the `background-color` property of the `orange`, `cyan`, and `raspberry` classes to their respective colors. Make sure to use the hex codes and not the color names.
# --hints--
The `div` element with class `orange` should have a `background-color` of orange.
```js
assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
```
</section>
The `div` element with class `cyan` should have a `background-color` of cyan.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
```
<div id='html-seed'>
The `div` element with class `raspberry` should have a `background-color` of raspberry.
```js
assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
```
All `background-color` values for the color classes should be hex codes and not color names.
```js
assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
```
# --seed--
## --seed-contents--
```html
<style>
@ -72,14 +81,7 @@ tests:
<div class="raspberry"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -109,5 +111,3 @@ tests:
<div class="cyan"></div>
<div class="raspberry"></div>
```
</section>

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

@ -6,38 +6,47 @@ videoUrl: 'https://scrimba.com/c/c9bDrs8'
forumTopicId: 301058
---
## Description
<section id='description'>
The last challenge introduced the <code>animation-timing-function</code> property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.
In CSS animations, Bezier curves are used with the <code>cubic-bezier</code> function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.
The <code>cubic-bezier</code> function consists of four main points that sit on this 1 by 1 grid: <code>p0</code>, <code>p1</code>, <code>p2</code>, and <code>p3</code>. <code>p0</code> and <code>p3</code> are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the <code>p1</code> and <code>p2</code> "anchor" points in the form: <code>(x1, y1, x2, y2)</code>. Pulling it all together, here's an example of a Bezier curve in CSS code:
<code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code>
In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the <code>linear</code> keyword. In other words, it changes at a constant speed.
</section>
# --description--
## Instructions
<section id='instructions'>
For the element with the id of <code>ball1</code>, change the value of the <code>animation-timing-function</code> property from <code>linear</code> to its equivalent <code>cubic-bezier</code> function value. Use the point values given in the example above.
</section>
The last challenge introduced the `animation-timing-function` property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.
## Tests
<section id='tests'>
In CSS animations, Bezier curves are used with the `cubic-bezier` function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.
```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)');
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.
testString: const ball2Animation = __helpers.removeWhiteSpace($('#ball2').css('animation-timing-function')); assert(ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)');
The `cubic-bezier` function consists of four main points that sit on this 1 by 1 grid: `p0`, `p1`, `p2`, and `p3`. `p0` and `p3` are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the `p1` and `p2` "anchor" points in the form: `(x1, y1, x2, y2)`. Pulling it all together, here's an example of a Bezier curve in CSS code:
`animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);`
In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the `linear` keyword. In other words, it changes at a constant speed.
# --instructions--
For the element with the id of `ball1`, change the value of the `animation-timing-function` property from `linear` to its equivalent `cubic-bezier` function value. Use the point values given in the example above.
# --hints--
The value of the `animation-timing-function` property for the element with the id `ball1` should be the linear-equivalent cubic-bezier function.
```js
assert(
$('#ball1').css('animation-timing-function') ==
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
);
```
</section>
The value of the `animation-timing-function` property for the element with the id `ball2` should not change.
## Challenge Seed
<section id='challengeSeed'>
```js
const ball2Animation = __helpers.removeWhiteSpace(
$('#ball2').css('animation-timing-function')
);
assert(
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
);
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -81,14 +90,7 @@ tests:
<div class="balls" id="ball2"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -129,5 +131,3 @@ tests:
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
```
</section>

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

@ -6,12 +6,15 @@ videoUrl: 'https://scrimba.com/c/cakprhv'
forumTopicId: 301059
---
## Description
<section id='description'>
To animate an element, you need to know about the animation properties and the <code>@keyframes</code> rule. The animation properties control how the animation should behave and the <code>@keyframes</code> rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:
<code>animation-name</code> sets the name of the animation, which is later used by <code>@keyframes</code> to tell CSS which rules go with which animations.
<code>animation-duration</code> sets the length of time for the animation.
<code>@keyframes</code> is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific "frames" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of <code>@keyframes</code> and the animation properties:
# --description--
To animate an element, you need to know about the animation properties and the `@keyframes` rule. The animation properties control how the animation should behave and the `@keyframes` rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:
`animation-name` sets the name of the animation, which is later used by `@keyframes` to tell CSS which rules go with which animations.
`animation-duration` sets the length of time for the animation.
`@keyframes` is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific "frames" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of `@keyframes` and the animation properties:
```css
#anim {
@ -29,40 +32,53 @@ To animate an element, you need to know about the animation properties and the <
}
```
For the element with the <code>anim</code> id, the code snippet above sets the <code>animation-name</code> to <code>colorful</code> and sets the <code>animation-duration</code> to 3 seconds. Then the <code>@keyframes</code> rule links to the animation properties with the name <code>colorful</code>. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.
</section>
For the element with the `anim` id, the code snippet above sets the `animation-name` to `colorful` and sets the `animation-duration` to 3 seconds. Then the `@keyframes` rule links to the animation properties with the name `colorful`. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.
## Instructions
<section id='instructions'>
Create an animation for the element with the id <code>rect</code>, by setting the <code>animation-name</code> to rainbow and the <code>animation-duration</code> to 4 seconds. Next, declare a <code>@keyframes</code> rule, and set the <code>background-color</code> at the beginning of the animation (<code>0%</code>) to blue, the middle of the animation (<code>50%</code>) to green, and the end of the animation (<code>100%</code>) to yellow.
</section>
# --instructions--
## Tests
<section id='tests'>
Create an animation for the element with the id `rect`, by setting the `animation-name` to rainbow and the `animation-duration` to 4 seconds. Next, declare a `@keyframes` rule, and set the `background-color` at the beginning of the animation (`0%`) to blue, the middle of the animation (`50%`) to green, and the end of the animation (`100%`) to yellow.
```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');
- 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');
- text: The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.
testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
- 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));
- 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));
- 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));
# --hints--
The element with id of `rect` should have an `animation-name` property with a value of rainbow.
```js
assert($('#rect').css('animation-name') == 'rainbow');
```
</section>
The element with id of `rect` should have an `animation-duration` property with a value of 4s.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('#rect').css('animation-duration') == '4s');
```
<div id='html-seed'>
The `@keyframes` rule should use the `animation-name` of rainbow.
```js
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
```
The `@keyframes` rule for rainbow should use a `background-color` of blue at 0%.
```js
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
```
The `@keyframes` rule for rainbow should use a `background-color` of green at 50%.
```js
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
```
The `@keyframes` rule for rainbow should use a `background-color` of yellow at 100%.
```js
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
```
# --seed--
## --seed-contents--
```html
<style>
@ -86,14 +102,7 @@ tests:
<div id="rect"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -124,5 +133,3 @@ tests:
</style>
<div id="rect"></div>
```
</section>

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

@ -6,37 +6,39 @@ videoUrl: 'https://scrimba.com/c/cyLJ7c3'
forumTopicId: 301060
---
## Description
<section id='description'>
The next option for the CSS <code>position</code> property is <code>absolute</code>, which locks the element in place relative to its parent container. Unlike the <code>relative</code> position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.
One nuance with absolute positioning is that it will be locked relative to its closest <em>positioned</em> ancestor. If you forget to add a position rule to the parent item, (this is typically done using <code>position: relative;</code>), the browser will keep looking up the chain and ultimately default to the body tag.
</section>
# --description--
## Instructions
<section id='instructions'>
Lock the <code>#searchbar</code> element to the top-right of its <code>section</code> parent by declaring its <code>position</code> as <code>absolute</code>. Give it <code>top</code> and <code>right</code> offsets of 50 pixels each.
</section>
The next option for the CSS `position` property is `absolute`, which locks the element in place relative to its parent container. Unlike the `relative` position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.
## Tests
<section id='tests'>
One nuance with absolute positioning is that it will be locked relative to its closest *positioned* ancestor. If you forget to add a position rule to the parent item, (this is typically done using `position: relative;`), the browser will keep looking up the chain and ultimately default to the body tag.
```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');
- 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');
- 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');
# --instructions--
Lock the `#searchbar` element to the top-right of its `section` parent by declaring its `position` as `absolute`. Give it `top` and `right` offsets of 50 pixels each.
# --hints--
The `#searchbar` element should have a `position` set to `absolute`.
```js
assert($('#searchbar').css('position') == 'absolute');
```
</section>
Your code should use the `top` CSS offset of 50 pixels on the `#searchbar` element.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('#searchbar').css('top') == '50px');
```
<div id='html-seed'>
Your code should use the `right` CSS offset of 50 pixels on the `#searchbar` element.
```js
assert($('#searchbar').css('right') == '50px');
```
# --seed--
## --seed-contents--
```html
<style>
@ -61,14 +63,7 @@ tests:
</body>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -92,5 +87,3 @@ tests:
</section>
</body>
```
</section>

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

@ -6,37 +6,39 @@ videoUrl: 'https://scrimba.com/c/c2MDNUR'
forumTopicId: 301061
---
## Description
<section id='description'>
The next layout scheme that CSS offers is the <code>fixed</code> position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it is positioned, which may require some layout adjustments elsewhere.
One key difference between the <code>fixed</code> and <code>absolute</code> positions is that an element with a fixed position won't move when the user scrolls.
</section>
# --description--
## Instructions
<section id='instructions'>
The navigation bar in the code is labeled with an id of <code>navbar</code>. Change its <code>position</code> to <code>fixed</code>, and offset it 0 pixels from the <code>top</code> and 0 pixels from the <code>left</code>. After you have added the code, scroll the preview window to see how the navigation stays in place.
</section>
The next layout scheme that CSS offers is the `fixed` position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it is positioned, which may require some layout adjustments elsewhere.
## Tests
<section id='tests'>
One key difference between the `fixed` and `absolute` positions is that an element with a fixed position won't move when the user scrolls.
```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');
- 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');
- 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');
# --instructions--
The navigation bar in the code is labeled with an id of `navbar`. Change its `position` to `fixed`, and offset it 0 pixels from the `top` and 0 pixels from the `left`. After you have added the code, scroll the preview window to see how the navigation stays in place.
# --hints--
The `#navbar` element should have a `position` set to `fixed`.
```js
assert($('#navbar').css('position') == 'fixed');
```
</section>
Your code should use the `top` CSS offset of 0 pixels on the `#navbar` element.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('#navbar').css('top') == '0px');
```
<div id='html-seed'>
Your code should use the `left` CSS offset of 0 pixels on the `#navbar` element.
```js
assert($('#navbar').css('left') == '0px');
```
# --seed--
## --seed-contents--
```html
<style>
@ -76,14 +78,7 @@ tests:
</body>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -122,5 +117,3 @@ tests:
<p>I shift up when the #navbar is fixed to the browser window.</p>
</body>
```
</section>

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

@ -6,35 +6,33 @@ videoUrl: 'https://scrimba.com/c/cDZpDUr'
forumTopicId: 301062
---
## Description
<section id='description'>
Here's one more continuous animation example with the <code>animation-iteration-count</code> property that uses the heart you designed in a previous challenge.
The one-second long heartbeat animation consists of two animated pieces. The <code>heart</code> elements (including the <code>:before</code> and <code>:after</code> pieces) are animated to change size using the <code>transform</code> property, and the background <code>div</code> is animated to change its color using the <code>background</code> property.
</section>
# --description--
## Instructions
<section id='instructions'>
Keep the heart beating by adding the <code>animation-iteration-count</code> property for both the <code>back</code> class and the <code>heart</code> class and setting the value to infinite. The <code>heart:before</code> and <code>heart:after</code> selectors do not need any animation properties.
</section>
Here's one more continuous animation example with the `animation-iteration-count` property that uses the heart you designed in a previous challenge.
## Tests
<section id='tests'>
The one-second long heartbeat animation consists of two animated pieces. The `heart` elements (including the `:before` and `:after` pieces) are animated to change size using the `transform` property, and the background `div` is animated to change its color using the `background` property.
```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');
- 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');
# --instructions--
Keep the heart beating by adding the `animation-iteration-count` property for both the `back` class and the `heart` class and setting the value to infinite. The `heart:before` and `heart:after` selectors do not need any animation properties.
# --hints--
The `animation-iteration-count` property for the `heart` class should have a value of infinite.
```js
assert($('.heart').css('animation-iteration-count') == 'infinite');
```
</section>
The `animation-iteration-count` property for the `back` class should have a value of infinite.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('.back').css('animation-iteration-count') == 'infinite');
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -108,14 +106,7 @@ tests:
<div class="heart"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -187,5 +178,3 @@ tests:
<div class="back"></div>
<div class="heart"></div>
```
</section>

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

@ -6,36 +6,36 @@ videoUrl: 'https://scrimba.com/c/c7akWUv'
forumTopicId: 301063
---
## Description
<section id='description'>
This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the <code>linear</code> and <code>ease-out</code> cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this.
The <code>animation-timing-function</code> automatically loops at every keyframe when the <code>animation-iteration-count</code> is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at <code>50%</code>), it results in two identical animation progressions at the upward and downward movement of the ball.
# --description--
This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the `linear` and `ease-out` cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this.
The `animation-timing-function` automatically loops at every keyframe when the `animation-iteration-count` is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at `50%`), it results in two identical animation progressions at the upward and downward movement of the ball.
The following cubic Bezier curve simulates a juggling movement:
<code>cubic-bezier(0.3, 0.4, 0.5, 1.6); </code>
`cubic-bezier(0.3, 0.4, 0.5, 1.6);`
Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on a 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball.
</section>
## Instructions
<section id='instructions'>
Change value of the <code>animation-timing-function</code> of the element with the id of <code>green</code> to a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649.
</section>
# --instructions--
## Tests
<section id='tests'>
Change value of the `animation-timing-function` of the element with the id of `green` to a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649.
```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)');
# --hints--
The value of the `animation-timing-function` property for the element with the id `green` should be a `cubic-bezier` function with x1, y1, x2, y2 values as specified.
```js
assert(
$('#green').css('animation-timing-function') ==
'cubic-bezier(0.311, 0.441, 0.444, 1.649)'
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -76,14 +76,7 @@ tests:
<div class="balls" id="green"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -123,5 +116,3 @@ tests:
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>
```
</section>

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

@ -6,34 +6,39 @@ videoUrl: 'https://scrimba.com/c/cVJDmcE'
forumTopicId: 301064
---
## Description
<section id='description'>
That's great, but it doesn't work right yet. Notice how the animation resets after <code>500ms</code> has passed, causing the button to revert back to the original color. You want the button to stay highlighted.
This can be done by setting the <code>animation-fill-mode</code> property to <code>forwards</code>. The <code>animation-fill-mode</code> specifies the style applied to an element when the animation has finished. You can set it like so:
<code>animation-fill-mode: forwards;</code>
</section>
# --description--
## Instructions
<section id='instructions'>
Set the <code>animation-fill-mode</code> property of <code>button:hover</code> to <code>forwards</code> so the button stays highlighted when a user hovers over it.
</section>
That's great, but it doesn't work right yet. Notice how the animation resets after `500ms` has passed, causing the button to revert back to the original color. You want the button to stay highlighted.
## Tests
<section id='tests'>
This can be done by setting the `animation-fill-mode` property to `forwards`. The `animation-fill-mode` specifies the style applied to an element when the animation has finished. You can set it like so:
```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));
`animation-fill-mode: forwards;`
# --instructions--
Set the `animation-fill-mode` property of `button:hover` to `forwards` so the button stays highlighted when a user hovers over it.
# --hints--
`button:hover` should have a `animation-fill-mode` property with a value of `forwards`.
```js
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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -59,15 +64,7 @@ tests:
<button>Register</button>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -90,5 +87,3 @@ tests:
</style>
<button>Register</button>
```
</section>

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

@ -6,35 +6,33 @@ videoUrl: 'https://scrimba.com/c/c9bQEA4'
forumTopicId: 301065
---
## 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://cdn-media-1.freecodecamp.org/imgr/eWWi3gZ.gif' alt='' />
</section>
# --description--
## Instructions
<section id='instructions'>
Use CSS offsets to move the <code>h2</code> 15 pixels to the right and 10 pixels up.
</section>
The CSS offsets of `top` or `bottom`, and `left` or `right` tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the `h2` downwards. Likewise, using a left offset moves an item to the right.
## Tests
<section id='tests'>
<img src='https://cdn-media-1.freecodecamp.org/imgr/eWWi3gZ.gif' alt=''>
```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');
- 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');
# --instructions--
Use CSS offsets to move the `h2` 15 pixels to the right and 10 pixels up.
# --hints--
Your code should use a CSS offset to relatively position the `h2` 10px upwards. In other words, move it 10px away from the `bottom` of where it normally sits.
```js
assert($('h2').css('bottom') == '10px');
```
</section>
Your code should use a CSS offset to relatively position the `h2` 15px towards the right. In other words, move it 15px away from the `left` of where it normally sits.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('h2').css('left') == '15px');
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<head>
@ -53,14 +51,7 @@ tests:
</body>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<head>
@ -78,5 +69,3 @@ tests:
<p>I still think the h2 is where it normally sits.</p>
</body>
```
</section>

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

@ -6,34 +6,31 @@ videoUrl: 'https://scrimba.com/c/c2MDqu2'
forumTopicId: 301066
---
## Description
<section id='description'>
The next positioning tool does not actually use <code>position</code>, but sets the <code>float</code> property of an element. Floating elements are removed from the normal flow of a document and pushed to either the <code>left</code> or <code>right</code> of their containing parent element. It's commonly used with the <code>width</code> property to specify how much horizontal space the floated element requires.
</section>
# --description--
## Instructions
<section id='instructions'>
The given markup would work well as a two-column layout, with the <code>section</code> and <code>aside</code> elements next to each other. Give the <code>#left</code> item a <code>float</code> of <code>left</code> and the <code>#right</code> item a <code>float</code> of <code>right</code>.
</section>
The next positioning tool does not actually use `position`, but sets the `float` property of an element. Floating elements are removed from the normal flow of a document and pushed to either the `left` or `right` of their containing parent element. It's commonly used with the `width` property to specify how much horizontal space the floated element requires.
## Tests
<section id='tests'>
# --instructions--
```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');
- 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 given markup would work well as a two-column layout, with the `section` and `aside` elements next to each other. Give the `#left` item a `float` of `left` and the `#right` item a `float` of `right`.
# --hints--
The element with id `left` should have a `float` value of `left`.
```js
assert($('#left').css('float') == 'left');
```
</section>
The element with id `right` should have a `float` value of `right`.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('#right').css('float') == 'right');
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<head>
@ -67,14 +64,7 @@ tests:
</body>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<head>
@ -107,5 +97,3 @@ tests:
</aside>
</body>
```
</section>

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

@ -6,14 +6,14 @@ videoUrl: 'https://scrimba.com/c/cPpQNT3'
forumTopicId: 301067
---
## Description
<section id='description'>
The <code>font-size</code> property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all <code>h1</code> through <code>h6</code> tags to balance the heading sizes.
</section>
# --description--
The `font-size` property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all `h1` through `h6` tags to balance the heading sizes.
# --instructions--
## Instructions
<section id='instructions'>
<p>In the <code>style</code> tags, set the <code>font-size</code> of the:</p>
<ul>
<li><code>h1</code> tag to 68px.</li>
<li><code>h2</code> tag to 52px.</li>
@ -22,34 +22,49 @@ The <code>font-size</code> property is used to specify how large the text is in
<li><code>h5</code> tag to 21px.</li>
<li><code>h6</code> tag to 14px.</li>
</ul>
</section>
## Tests
<section id='tests'>
# --hints--
```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');
- 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');
- 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');
- 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');
- 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');
- text: Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.
testString: const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i; assert.strictEqual(true, regex.test(code));
Your code should set the `font-size` property for the `h1` tag to 68 pixels.
```js
assert($('h1').css('font-size') == '68px');
```
</section>
Your code should set the `font-size` property for the `h2` tag to 52 pixels.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('h2').css('font-size') == '52px');
```
<div id='html-seed'>
Your code should set the `font-size` property for the `h3` tag to 40 pixels.
```js
assert($('h3').css('font-size') == '40px');
```
Your code should set the `font-size` property for the `h4` tag to 32 pixels.
```js
assert($('h4').css('font-size') == '32px');
```
Your code should set the `font-size` property for the `h5` tag to 21 pixels.
```js
assert($('h5').css('font-size') == '21px');
```
Your code should set the `font-size` property for the `h6` tag to 14 pixels.
```js
const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i;
assert.strictEqual(true, regex.test(code));
```
# --seed--
## --seed-contents--
```html
<style>
@ -68,14 +83,7 @@ tests:
<h6>This is h6 text</h6>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -105,5 +113,3 @@ tests:
<h5>This is h5 text</h5>
<h6>This is h6 text</h6>
```
</section>

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

@ -6,32 +6,25 @@ videoUrl: 'https://scrimba.com/c/cVJ36Cr'
forumTopicId: 301068
---
## Description
<section id='description'>
The <code>font-size</code> property in CSS is not limited to headings, it can be applied to any element containing text.
</section>
# --description--
## Instructions
<section id='instructions'>
Change the value of the <code>font-size</code> property for the paragraph to 16px to make it more visible.
</section>
The `font-size` property in CSS is not limited to headings, it can be applied to any element containing text.
## Tests
<section id='tests'>
# --instructions--
```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');
Change the value of the `font-size` property for the paragraph to 16px to make it more visible.
# --hints--
Your `p` tag should have a `font-size` of 16 pixels.
```js
assert($('p').css('font-size') == '16px');
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -44,14 +37,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -63,5 +49,3 @@ tests:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
```
</section>

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

@ -6,43 +6,57 @@ videoUrl: 'https://scrimba.com/c/crVWRHq'
forumTopicId: 301069
---
## Description
<section id='description'>
You set the <code>font-size</code> of each heading tag in the last challenge, here you'll adjust the <code>font-weight</code>.
The <code>font-weight</code> property sets how thick or thin characters are in a section of text.
</section>
# --description--
You set the `font-size` of each heading tag in the last challenge, here you'll adjust the `font-weight`.
The `font-weight` property sets how thick or thin characters are in a section of text.
# --instructions--
## Instructions
<section id='instructions'>
<ul><li>Set the <code>font-weight</code> of the <code>h1</code> tag to 800.</li><li>Set the <code>font-weight</code> of the <code>h2</code> tag to 600.</li><li>Set the <code>font-weight</code> of the <code>h3</code> tag to 500.</li><li>Set the <code>font-weight</code> of the <code>h4</code> tag to 400.</li><li>Set the <code>font-weight</code> of the <code>h5</code> tag to 300.</li><li>Set the <code>font-weight</code> of the <code>h6</code> tag to 200.</li></ul>
</section>
## Tests
<section id='tests'>
# --hints--
```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');
- 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');
- 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');
- 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');
- 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');
- 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 `font-weight` property for the `h1` tag to 800.
```js
assert($('h1').css('font-weight') == '800');
```
</section>
Your code should set the `font-weight` property for the `h2` tag to 600.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('h2').css('font-weight') == '600');
```
<div id='html-seed'>
Your code should set the `font-weight` property for the `h3` tag to 500.
```js
assert($('h3').css('font-weight') == '500');
```
Your code should set the `font-weight` property for the `h4` tag to 400.
```js
assert($('h4').css('font-weight') == '400');
```
Your code should set the `font-weight` property for the `h5` tag to 300.
```js
assert($('h5').css('font-weight') == '300');
```
Your code should set the `font-weight` property for the `h6` tag to 200.
```js
assert($('h6').css('font-weight') == '200');
```
# --seed--
## --seed-contents--
```html
<style>
@ -79,14 +93,7 @@ tests:
<h6>This is h6 text</h6>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -122,5 +129,3 @@ tests:
<h5>This is h5 text</h5>
<h6>This is h6 text</h6>
```
</section>

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

@ -6,32 +6,25 @@ videoUrl: 'https://scrimba.com/c/crVWdcv'
forumTopicId: 301070
---
## Description
<section id='description'>
CSS offers the <code>line-height</code> property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.
</section>
# --description--
## Instructions
<section id='instructions'>
Add a <code>line-height</code> property to the <code>p</code> tag and set it to 25px.
</section>
CSS offers the `line-height` property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.
## Tests
<section id='tests'>
# --instructions--
```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');
Add a `line-height` property to the `p` tag and set it to 25px.
# --hints--
Your code should set the `line-height` of the `p` tag to 25 pixels.
```js
assert($('p').css('line-height') == '25px');
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -45,14 +38,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -65,5 +51,3 @@ tests:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
```
</section>

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

@ -6,39 +6,51 @@ videoUrl: 'https://scrimba.com/c/c6bnRCK'
forumTopicId: 301071
---
## Description
<section id='description'>
A previous challenge discussed the <code>ease-out</code> keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the <code>ease-out</code> keyword (for the blue element) and <code>linear</code> keyword (for the red element) is demonstrated. Similar animation progressions to the <code>ease-out</code> keyword can be achieved by using a custom cubic Bezier curve function.
In general, changing the <code>p1</code> and <code>p2</code> anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:
<code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code>
Remember that all <code>cubic-bezier</code> functions start with <code>p0</code> at (0, 0) and end with <code>p3</code> at (1, 1). In this example, the curve moves faster through the Y-axis (starts at 0, goes to <code>p1</code> y value of 0, then goes to <code>p2</code> y value of 1) than it moves through the X-axis (0 to start, then 0 for <code>p1</code>, up to 0.58 for <code>p2</code>). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.
</section>
# --description--
## Instructions
<section id='instructions'>
To see the effect of this Bezier curve in action, change the <code>animation-timing-function</code> of the element with id of <code>red</code> to a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly.
</section>
A previous challenge discussed the `ease-out` keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the `ease-out` keyword (for the blue element) and `linear` keyword (for the red element) is demonstrated. Similar animation progressions to the `ease-out` keyword can be achieved by using a custom cubic Bezier curve function.
## Tests
<section id='tests'>
In general, changing the `p1` and `p2` anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:
```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)');
- 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');
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.
testString: const blueBallAnimation = __helpers.removeWhiteSpace($('#blue').css('animation-timing-function')); assert(blueBallAnimation == 'ease-out' || blueBallAnimation == 'cubic-bezier(0,0,0.58,1)');
`animation-timing-function: cubic-bezier(0, 0, 0.58, 1);`
Remember that all `cubic-bezier` functions start with `p0` at (0, 0) and end with `p3` at (1, 1). In this example, the curve moves faster through the Y-axis (starts at 0, goes to `p1` y value of 0, then goes to `p2` y value of 1) than it moves through the X-axis (0 to start, then 0 for `p1`, up to 0.58 for `p2`). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.
# --instructions--
To see the effect of this Bezier curve in action, change the `animation-timing-function` of the element with id of `red` to a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly.
# --hints--
The value of the `animation-timing-function` property of the element with the id `red` should be a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .
```js
assert(
$('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)'
);
```
</section>
The element with the id `red` should no longer have the `animation-timing-function` property of linear.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('#red').css('animation-timing-function') !== 'linear');
```
<div id='html-seed'>
The value of the `animation-timing-function` property for the element with the id `blue` should not change.
```js
const blueBallAnimation = __helpers.removeWhiteSpace(
$('#blue').css('animation-timing-function')
);
assert(
blueBallAnimation == 'ease-out' ||
blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'
);
```
# --seed--
## --seed-contents--
```html
<style>
@ -75,14 +87,7 @@ tests:
<div class="balls" id= "blue"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -118,5 +123,3 @@ tests:
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>
```
</section>

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

@ -6,47 +6,65 @@ videoUrl: 'https://scrimba.com/c/c6bmQh2'
forumTopicId: 301072
---
## Description
<section id='description'>
The <code>repeating-linear-gradient()</code> function is very similar to <code>linear-gradient()</code> with the major difference that it repeats the specified gradient pattern. <code>repeating-linear-gradient()</code> accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge.
# --description--
The `repeating-linear-gradient()` function is very similar to `linear-gradient()` with the major difference that it repeats the specified gradient pattern. `repeating-linear-gradient()` accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge.
The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.
In the example demonstrated in the code editor, the gradient starts with the color <code>yellow</code> at 0 pixels which blends into the second color <code>blue</code> at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color <code>green</code>, which itself blends into the fourth color value <code>red</code> as that is 80 pixels away from the beginning of the gradient.
In the example demonstrated in the code editor, the gradient starts with the color `yellow` at 0 pixels which blends into the second color `blue` at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color `green`, which itself blends into the fourth color value `red` as that is 80 pixels away from the beginning of the gradient.
For this example, it helps to think about the color stops as pairs where every two colors blend together.
<code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code>
`0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px`
If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.
</section>
## Instructions
<section id='instructions'>
Make stripes by changing the <code>repeating-linear-gradient()</code> to use a gradient angle of <code>45deg</code>, then set the first two color stops to <code>yellow</code>, and finally the second two color stops to <code>black</code>.
</section>
# --instructions--
## Tests
<section id='tests'>
Make stripes by changing the `repeating-linear-gradient()` to use a gradient angle of `45deg`, then set the first two color stops to `yellow`, and finally the second two color stops to `black`.
```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));
- text: The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg
testString: assert(!code.match(/90deg/gi));
- text: The color stop at 0 pixels should be <code>yellow</code>.
testString: assert(code.match(/yellow\s+?0(px)?/gi));
- text: One color stop at 40 pixels should be <code>yellow</code>.
testString: assert(code.match(/yellow\s+?40px/gi));
- 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));
- text: The last color stop at 80 pixels should be <code>black</code>.
testString: assert(code.match(/black\s+?80px/gi));
# --hints--
The angle of the `repeating-linear-gradient()` should be 45deg.
```js
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
```
</section>
The angle of the `repeating-linear-gradient()` should no longer be 90deg
## Challenge Seed
<section id='challengeSeed'>
```js
assert(!code.match(/90deg/gi));
```
<div id='html-seed'>
The color stop at 0 pixels should be `yellow`.
```js
assert(code.match(/yellow\s+?0(px)?/gi));
```
One color stop at 40 pixels should be `yellow`.
```js
assert(code.match(/yellow\s+?40px/gi));
```
The second color stop at 40 pixels should be `black`.
```js
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
```
The last color stop at 80 pixels should be `black`.
```js
assert(code.match(/black\s+?80px/gi));
```
# --seed--
## --seed-contents--
```html
<style>
@ -70,15 +88,7 @@ tests:
<div></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -98,5 +108,3 @@ tests:
</style>
<div></div>
```
</section>

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

@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cg4vZAa'
forumTopicId: 301073
---
## Description
<section id='description'>
You can use CSS <code>@keyframes</code> to change the color of a button in its hover state.
# --description--
You can use CSS `@keyframes` to change the color of a button in its hover state.
Here's an example of changing the width of an image on hover:
```html
@ -28,32 +29,29 @@ Here's an example of changing the width of an image on hover:
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
Note that <code>ms</code> stands for milliseconds, where 1000ms is equal to 1s.
Use CSS <code>@keyframes</code> to change the <code>background-color</code> of the <code>button</code> element so it becomes <code>#4791d0</code> when a user hovers over it. The <code>@keyframes</code> rule should only have an entry for <code>100%</code>.
</section>
Note that `ms` stands for milliseconds, where 1000ms is equal to 1s.
## Tests
<section id='tests'>
Use CSS `@keyframes` to change the `background-color` of the `button` element so it becomes `#4791d0` when a user hovers over it. The `@keyframes` rule should only have an entry for `100%`.
```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));
- 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));
# --hints--
The @keyframes rule should use the `animation-name` background-color.
```js
assert(code.match(/@keyframes\s+?background-color\s*?{/g));
```
</section>
There should be one rule under `@keyframes` that changes the `background-color` to `#4791d0` at 100%.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -75,14 +73,7 @@ tests:
<button>Register</button>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -106,5 +97,3 @@ tests:
</style>
<button>Register</button>
```
</section>

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

@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cyLP8Sr'
forumTopicId: 301074
---
## Description
<section id='description'>
The next function of the <code>transform</code> property is <code>skewX()</code>, which skews the selected element along its X (horizontal) axis by a given degree.
# --description--
The next function of the `transform` property is `skewX()`, which skews the selected element along its X (horizontal) axis by a given degree.
The following code skews the paragraph element by -32 degrees along the X-axis.
```css
@ -17,29 +18,21 @@ p {
}
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
Skew the element with the id of <code>bottom</code> by 24 degrees along the X-axis by using the <code>transform</code> property.
</section>
Skew the element with the id of `bottom` by 24 degrees along the X-axis by using the `transform` property.
## Tests
<section id='tests'>
# --hints--
```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 `bottom` should be skewed by 24 degrees along its X-axis.
```js
assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -61,14 +54,7 @@ tests:
<div id="bottom"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -88,5 +74,3 @@ tests:
<div id="top"></div>
<div id="bottom"></div>
```
</section>

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

@ -6,32 +6,25 @@ videoUrl: 'https://scrimba.com/c/c2MZ2uB'
forumTopicId: 301075
---
## Description
<section id='description'>
Given that the <code>skewX()</code> function skews the selected element along the X-axis by a given degree, it is no surprise that the <code>skewY()</code> property skews an element along the Y (vertical) axis.
</section>
# --description--
## Instructions
<section id='instructions'>
Skew the element with the id of <code>top</code> -10 degrees along the Y-axis by using the <code>transform</code> property.
</section>
Given that the `skewX()` function skews the selected element along the X-axis by a given degree, it is no surprise that the `skewY()` property skews an element along the Y (vertical) axis.
## Tests
<section id='tests'>
# --instructions--
```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));
Skew the element with the id of `top` -10 degrees along the Y-axis by using the `transform` property.
# --hints--
The element with id `top` should be skewed by -10 degrees along its Y-axis.
```js
assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -54,15 +47,7 @@ tests:
<div id="bottom"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -83,5 +68,3 @@ tests:
<div id="top"></div>
<div id="bottom"></div>
```
</section>

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

@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/c2MZVSg'
forumTopicId: 301076
---
## Description
<section id='description'>
To change the scale of an element, CSS has the <code>transform</code> property, along with its <code>scale()</code> function. The following code example doubles the size of all the paragraph elements on the page:
# --description--
To change the scale of an element, CSS has the `transform` property, along with its `scale()` function. The following code example doubles the size of all the paragraph elements on the page:
```css
p {
@ -16,29 +16,25 @@ p {
}
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
Increase the size of the element with the id of <code>ball2</code> to 1.5 times its original size.
</section>
Increase the size of the element with the id of `ball2` to 1.5 times its original size.
## Tests
<section id='tests'>
# --hints--
```yml
tests:
- text: The <code>transform</code> property for <code>#ball2</code> should be set to scale it to 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));
The `transform` property for `#ball2` should be set to scale it to 1.5 times its size.
```js
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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -69,15 +65,7 @@ tests:
<div class="ball" id= "ball2"></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -104,5 +92,3 @@ tests:
<div class="ball" id= "ball1"></div>
<div class="ball" id= "ball2"></div>
```
</section>

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

@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cyLPJuM'
forumTopicId: 301077
---
## Description
<section id='description'>
The <code>transform</code> property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as <code>:hover</code> that specify a certain state of an element, the <code>transform</code> property can easily add interactivity to your elements.
# --description--
The `transform` property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as `:hover` that specify a certain state of an element, the `transform` property can easily add interactivity to your elements.
Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
```css
@ -17,31 +18,23 @@ p:hover {
}
```
**Note:** Applying a transform to a `div` element will also affect any child elements contained in the div.
<strong>Note:</strong> Applying a transform to a <code>div</code> element will also affect any child elements contained in the div.
</section>
# --instructions--
## Instructions
<section id='instructions'>
Add a CSS rule for the <code>hover</code> state of the <code>div</code> and use the <code>transform</code> property to scale the <code>div</code> element to 1.1 times its original size when a user hovers over it.
</section>
Add a CSS rule for the `hover` state of the `div` and use the `transform` property to scale the `div` element to 1.1 times its original size when a user hovers over it.
## Tests
<section id='tests'>
# --hints--
```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 `div` element should scale 1.1 times when the user hovers over it.
```js
assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -63,15 +56,7 @@ tests:
<div></div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -90,7 +75,4 @@ tests:
}
</style>
<div></div>
```
</section>

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

@ -6,34 +6,31 @@ videoUrl: 'https://scrimba.com/c/cVJRBtp'
forumTopicId: 301078
---
## Description
<section id='description'>
To emphasize text, you can use the <code>em</code> tag. This displays text as italicized, as the browser applies the CSS of <code>font-style: italic;</code> to the element.
</section>
# --description--
## Instructions
<section id='instructions'>
Wrap an <code>em</code> tag around the contents of the paragraph tag to give it emphasis.
</section>
To emphasize text, you can use the `em` tag. This displays text as italicized, as the browser applies the CSS of `font-style: italic;` to the element.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: Your code should add an <code>em</code> tag to the markup.
testString: assert($('em').length == 1);
- 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);
Wrap an `em` tag around the contents of the paragraph tag to give it emphasis.
# --hints--
Your code should add an `em` tag to the markup.
```js
assert($('em').length == 1);
```
</section>
The `em` tag should wrap around the contents of the `p` tag but not the `p` tag itself.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('p').children().length == 1 && $('em').children().length == 2);
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -76,14 +73,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -125,5 +115,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,36 +6,48 @@ videoUrl: ''
forumTopicId: 301079
---
## Description
<section id='description'>
To strikethrough text, which is when a horizontal line cuts across the characters, you can use the <code>s</code> tag. It shows that a section of text is no longer valid. With the <code>s</code> tag, the browser applies the CSS of <code>text-decoration: line-through;</code> to the element.
</section>
# --description--
## Instructions
<section id='instructions'>
Wrap the <code>s</code> tag around "Google" inside the <code>h4</code> tag and then add the word "Alphabet" beside it, which should not have the strikethrough formatting.
</section>
To strikethrough text, which is when a horizontal line cuts across the characters, you can use the `s` tag. It shows that a section of text is no longer valid. With the `s` tag, the browser applies the CSS of `text-decoration: line-through;` to the element.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: Your code should add one <code>s</code> tag to the markup.
testString: assert($('s').length == 1);
- 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($('h4 > s').text().match(/Google/gi) && !$('h4 > s').text().match(/Alphabet/gi));
- text: You should include the word "Alphabet" in the <code>h4</code> tag, without strikethrough formatting.
testString: assert($('h4').html().match(/Alphabet/gi));
Wrap the `s` tag around "Google" inside the `h4` tag and then add the word "Alphabet" beside it, which should not have the strikethrough formatting.
# --hints--
Your code should add one `s` tag to the markup.
```js
assert($('s').length == 1);
```
</section>
A `s` tag should wrap around the Google text in the `h4` tag. It should not contain the word Alphabet.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(
$('h4 > s')
.text()
.match(/Google/gi) &&
!$('h4 > s')
.text()
.match(/Alphabet/gi)
);
```
<div id='html-seed'>
You should include the word "Alphabet" in the `h4` tag, without strikethrough formatting.
```js
assert(
$('h4')
.html()
.match(/Alphabet/gi)
);
```
# --seed--
## --seed-contents--
```html
<style>
@ -78,14 +90,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -127,5 +132,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,35 +6,41 @@ videoUrl: 'https://scrimba.com/c/ceJNBSb'
forumTopicId: 301080
---
## Description
<section id='description'>
To make text bold, you can use the <code>strong</code> tag. This is often used to draw attention to text and symbolize that it is important. With the <code>strong</code> tag, the browser applies the CSS of <code>font-weight: bold;</code> to the element.
</section>
# --description--
## Instructions
<section id='instructions'>
Wrap a <code>strong</code> tag around "Stanford University" inside the <code>p</code> tag (do not include the period).
</section>
To make text bold, you can use the `strong` tag. This is often used to draw attention to text and symbolize that it is important. With the `strong` tag, the browser applies the CSS of `font-weight: bold;` to the element.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: Your code should add one <code>strong</code> tag to the markup.
testString: assert($('strong').length == 1);
- text: The <code>strong</code> tag should be inside the <code>p</code> tag.
testString: assert($('p').children('strong').length == 1);
- text: The <code>strong</code> tag should wrap around the words <code>Stanford University</code>.
testString: assert($('strong').text().match(/^Stanford University\.?$/gi));
Wrap a `strong` tag around "Stanford University" inside the `p` tag (do not include the period).
# --hints--
Your code should add one `strong` tag to the markup.
```js
assert($('strong').length == 1);
```
</section>
The `strong` tag should be inside the `p` tag.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('p').children('strong').length == 1);
```
<div id='html-seed'>
The `strong` tag should wrap around the words `Stanford University`.
```js
assert(
$('strong')
.text()
.match(/^Stanford University\.?$/gi)
);
```
# --seed--
## --seed-contents--
```html
<style>
@ -77,14 +83,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -126,5 +125,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,36 +6,35 @@ videoUrl: 'https://scrimba.com/c/cvVZQSP'
forumTopicId: 301081
---
## Description
<section id='description'>
The <code>text-transform</code> property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.
The following table shows how the different <code>text-transform</code>values change the example text "Transform me".
<table class="table table-striped"><thead><th>Value<th>Result<tbody><tr><td><code>lowercase</code><td>"transform me"<tr><td><code>uppercase</code><td>"TRANSFORM ME"<tr><td><code>capitalize</code><td>"Transform Me"<tr><td><code>initial</code><td>Use the default value<tr><td><code>inherit</code><td>Use the <code>text-transform</code> value from the parent element<tr><td><code>none</code><td><strong>Default:</strong> Use the original text</td></table>
</section>
# --description--
## Instructions
<section id='instructions'>
Transform the text of the <code>h4</code> to be uppercase using the <code>text-transform</code> property.
</section>
The `text-transform` property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.
## Tests
<section id='tests'>
The following table shows how the different `text-transform`values change the example text "Transform me".
```yml
tests:
- text: The <code>h4</code> text should be uppercase.
testString: assert($('h4').css('text-transform') === 'uppercase');
- text: The original text of the h4 should not be changed.
testString: assert(($('h4').text() !== $('h4').text().toUpperCase()));
<table class='table table-striped'><thead><tr><th>Value</th><th>Result</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>Use the default value</td></tr><tr><td><code>inherit</code></td><td>Use the <code>text-transform</code> value from the parent element</td></tr><tr><td><code>none</code></td><td><strong>Default:</strong> Use the original text</td></tr></tbody></table>
# --instructions--
Transform the text of the `h4` to be uppercase using the `text-transform` property.
# --hints--
The `h4` text should be uppercase.
```js
assert($('h4').css('text-transform') === 'uppercase');
```
</section>
The original text of the h4 should not be changed.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('h4').text() !== $('h4').text().toUpperCase());
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -86,14 +85,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -143,5 +135,3 @@ tests:
</div>
</div>
```
</section>

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

@ -6,35 +6,33 @@ videoUrl: 'https://scrimba.com/c/cN6aQCL'
forumTopicId: 301082
---
## Description
<section id='description'>
To underline text, you can use the <code>u</code> tag. This is often used to signify that a section of text is important, or something to remember. With the <code>u</code> tag, the browser applies the CSS of <code>text-decoration: underline;</code> to the element.
</section>
# --description--
## Instructions
<section id='instructions'>
Wrap the <code>u</code> tag only around the text "Ph.D. students".
<strong>Note:</strong> Try to avoid using the <code>u</code> tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
</section>
To underline text, you can use the `u` tag. This is often used to signify that a section of text is important, or something to remember. With the `u` tag, the browser applies the CSS of `text-decoration: underline;` to the element.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: Your code should add a <code>u</code> tag to the markup.
testString: assert($('u').length === 1);
- text: The <code>u</code> tag should wrap around the text <code>Ph.D. students</code>.
testString: assert($('u').text() === 'Ph.D. students');
Wrap the `u` tag only around the text "Ph.D. students".
**Note:** Try to avoid using the `u` tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
# --hints--
Your code should add a `u` tag to the markup.
```js
assert($('u').length === 1);
```
</section>
The `u` tag should wrap around the text `Ph.D. students`.
## Challenge Seed
<section id='challengeSeed'>
```js
assert($('u').text() === 'Ph.D. students');
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -77,14 +75,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -126,5 +117,3 @@ tests:
</div>
</div>
```
</section>