chore(curriculum): Remove files in wrong format
This commit is contained in:
Bouncey
File diff suppressed because it is too large
Load Diff
@ -1,54 +0,0 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: Add a Text Alternative to Images for Visually Impaired Accessibility
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/add-alt-text-to-an-image-for-accessibility'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
It's likely you've seen an <code>alt</code> attribute on an <code>img</code> tag in other challenges. <code>Alt</code> text describes the content of the image and provides a text-alternative. This helps in case the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example:
|
||||
<code><img src="importantLogo.jpeg" alt="Company logo"></code>
|
||||
People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the <code>alt</code> attribute and read its contents to deliver key information.
|
||||
Good <code>alt</code> text is short but descriptive, and meant to briefly convey the meaning of the image. You should always include an <code>alt</code> attribute on your image. Per HTML5 specification, this is now considered mandatory.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat happens to be both a coding ninja and an actual ninja, and is building a website to share his knowledge. The profile picture he wants to use shows his skills, and should be appreciated by all site visitors. Add an <code>alt</code> attribute in the <code>img</code> tag, that explains Camper Cat is doing karate. (The image <code>src</code> doesn't link to an actual file, so you should see the <code>alt</code> text in the display.)
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.'
|
||||
testString: 'assert($(''img'').attr(''alt''), ''Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg">
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,82 +0,0 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa8
|
||||
title: Add an Accessible Date Picker
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cD9DJHr'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Forms often include the <code>input</code> field, which can be used to create several different form controls. The <code>type</code> attribute on this element indicates what kind of input will be created.
|
||||
You may have noticed the <code>text</code> and <code>submit</code> input types in prior challenges, and HTML5 introduced an option to specify a <code>date</code> field. Depending on browser support, a date picker shows up in the <code>input</code> field when it's in focus, which makes filling in a form easier for all users.
|
||||
For older browsers, the type will default to <code>text</code>, so it helps to show users the expected date format in the label or as placeholder text just in case.
|
||||
Here's an example:
|
||||
<blockquote><label for="input1">Enter a date:</label><br><input type="date" id="input1" name="input1"><br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an <code>input</code> tag with a <code>type</code> attribute of "date", an <code>id</code> attribute of "pickdate", and a <code>name</code> attribute of "date".
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add one <code>input</code> tag for the date selector field.
|
||||
testString: 'assert($(''input'').length == 2, ''Your code should add one <code>input</code> tag for the date selector field.'');'
|
||||
- text: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.
|
||||
testString: 'assert($(''input'').attr(''type'') == ''date'', ''Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.'');'
|
||||
- text: Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.
|
||||
testString: 'assert($(''input'').attr(''id'') == ''pickdate'', ''Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.'');'
|
||||
- text: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.
|
||||
testString: 'assert($(''input'').attr(''name'') == ''date'', ''Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
|
||||
|
||||
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,67 +0,0 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437as3'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
There are various forms of colorblindness. These can range from a reduced sensitivity to a certain wavelength of light to the inability to see color at all. The most common form is a reduced sensitivity to detect greens.
|
||||
For example, if two similar green colors are the foreground and background color of your content, a colorblind user may not be able to distinguish them. Close colors can be thought of as neighbors on the color wheel, and those combinations should be avoided when conveying important information.
|
||||
<strong>Note</strong><br>Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat is testing different styles for an important button, but the yellow (<code>#FFFF33</code>) <code>background-color</code> and the green (<code>#33FF33</code>) text <code>color</code> are neighboring hues on the color wheel and virtually indistinguishable for some colorblind users. (Their similar lightness also fails the contrast ratio check). Change the text <code>color</code> to a dark blue (<code>#003366</code>) to solve both problems.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.
|
||||
testString: 'assert($(''button'').css(''color'') == ''rgb(0, 51, 102)'', ''Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #33FF33;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aac
|
||||
title: Avoid Colorblindness Issues by Using Sufficient Contrast
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMEUw'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Color is a large part of visual design, but its use introduces two accessibility issues. First, color alone should not be used as the only way to convey important information because screen reader users won't see it. Second, foreground and background colors need sufficient contrast so colorblind users can distinguish them.
|
||||
Previous challenges covered having text alternatives to address the first issue. The last challenge introduced contrast checking tools to help with the second. The WCAG-recommended contrast ratio of 4.5:1 applies for color use as well as gray-scale combinations.
|
||||
Colorblind users have trouble distinguishing some colors from others - usually in hue but sometimes lightness as well. You may recall the contrast ratio is calculated using the relative luminance (or lightness) values of the foreground and background colors.
|
||||
In practice, the 4.5:1 ratio can be reached by darkening the darker color and lightening the lighter one with the aid of a color contrast checker. Darker colors on the color wheel are considered to be blues, violets, magentas, and reds, whereas lighter colors are oranges, yellows, greens, and blue-greens.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish <code>background-color</code> with maroon text <code>color</code> has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS <code>hsl()</code> property (which stands for hue, saturation, lightness) by changing the third argument. Increase the <code>background-color</code> lightness value from 35% to 55%, and decrease the <code>color</code> lightness value from 20% to 15%. This improves the contrast to 5.9:1.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.
|
||||
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), ''Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.'');'
|
||||
- text: Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.
|
||||
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), ''Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 20%);
|
||||
background-color: hsl(120, 25%, 35%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "body {color: hsl(0, 55%, 15%); background-color: hsl(120, 25%, 55%);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,61 +0,0 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: Give Links Meaning by Using Descriptive Link Text
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437DcV'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Screen reader users have different options for what type of content their device reads. This includes skipping to (or over) landmark elements, jumping to the main content, or getting a page summary from the headings. Another option is to only hear the links available on a page.
|
||||
Screen readers do this by reading the link text, or what's between the anchor (<code>a</code>) tags. Having a list of "click here" or "read more" links isn't helpful. Instead, you should use brief but descriptive text within the <code>a</code> tags to provide more meaning for these users.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (<code>a</code>) tags so they wrap around the text "information about batteries" instead of "Click here".
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".
|
||||
testString: 'assert($(''a'').text().match(/^(information about batteries)$/g), ''Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".'');'
|
||||
- text: Make sure your <code>a</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(''''|"")>/g).length, ''Make sure your <code>a</code> element has a closing tag.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,77 +0,0 @@
|
||||
---
|
||||
id: 587d7789367417b2b2512aa4
|
||||
title: Improve Accessibility of Audio Content with the audio Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5's <code>audio</code> element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.
|
||||
The <code>audio</code> tag supports the <code>controls</code> attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on.
|
||||
Here's an example:
|
||||
<blockquote><audio id="meowClip" controls><br> <source src="audio/meow.mp3" type="audio/mpeg" /><br> <source src="audio/meow.ogg" type="audio/ogg" /><br></audio><br></blockquote>
|
||||
<strong>Note</strong><br>Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an <code>audio</code> element after the <code>p</code>. Include the <code>controls</code> attribute. Then place a <code>source</code> tag inside the <code>audio</code> tags with the <code>src</code> attribute set to "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" and <code>type</code> attribute set to "audio/mpeg".
|
||||
<strong>Note</strong><br>The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should have one <code>audio</code> tag.
|
||||
testString: 'assert($(''audio'').length === 1, ''Your code should have one <code>audio</code> tag.'');'
|
||||
- text: Make sure your <code>audio</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), ''Make sure your <code>audio</code> element has a closing tag.'');'
|
||||
- text: The <code>audio</code> tag should have the <code>controls</code> attribute.
|
||||
testString: 'assert($(''audio'').attr(''controls''), ''The <code>audio</code> tag should have the <code>controls</code> attribute.'');'
|
||||
- text: Your code should have one <code>source</code> tag.
|
||||
testString: 'assert($(''source'').length === 1, ''Your code should have one <code>source</code> tag.'');'
|
||||
- text: Your <code>source</code> tag should be inside the <code>audio</code> tags.
|
||||
testString: 'assert($(''audio'').children(''source'').length === 1, ''Your <code>source</code> tag should be inside the <code>audio</code> tags.'');'
|
||||
- text: The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.
|
||||
testString: 'assert($(''source'').attr(''src'') === ''https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'', ''The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.'');'
|
||||
- text: Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.
|
||||
testString: 'assert($(''source'').attr(''type'') === ''audio/mpeg'', ''Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,103 +0,0 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa5
|
||||
title: Improve Chart Accessibility with the figure Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMqtE'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5 introduced the <code>figure</code> element, along with the related <code>figcaption</code>. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the <code>figure</code>.
|
||||
For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.
|
||||
Here's an example - note that the <code>figcaption</code> goes inside the <code>figure</code> tags and can be combined with other elements:
|
||||
<blockquote><figure><br> <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick"><br> <br><br> <figcaption><br> Master Camper Cat demonstrates proper form of a roundhouse kick.<br> </figcaption><br></figure><br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the <code>div</code> tag he used to a <code>figure</code> tag, and the <code>p</code> tag that surrounds the caption to a <code>figcaption</code> tag.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should have one <code>figure</code> tag.
|
||||
testString: 'assert($(''figure'').length == 1, ''Your code should have one <code>figure</code> tag.'');'
|
||||
- text: Your code should have one <code>figcaption</code> tag.
|
||||
testString: 'assert($(''figcaption'').length == 1, ''Your code should have one <code>figcaption</code> tag.'');'
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
|
||||
- text: Your code should not have any <code>p</code> tags.
|
||||
testString: 'assert($(''p'').length == 0, ''Your code should not have any <code>p</code> tags.'');'
|
||||
- text: The <code>figcaption</code> should be a child of the <code>figure</code> tag.
|
||||
testString: 'assert($(''figure'').children(''figcaption'').length == 1, ''The <code>figcaption</code> should be a child of the <code>figure</code> tag.'');'
|
||||
- text: Make sure your <code>figure</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, ''Make sure your <code>figure</code> element has a closing tag.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
<div>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||
</div>
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,87 +0,0 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa6
|
||||
title: Improve Form Field Accessibility with the label Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMMAN'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Improving accessibility with semantic HTML markup applies to using both appropriate tag names as well as attributes. The next several challenges cover some important scenarios using attributes in forms.
|
||||
The <code>label</code> tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The <code>for</code> attribute on a <code>label</code> tag explicitly associates that <code>label</code> with the form control and is used by screen readers.
|
||||
You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a <code>label</code> element along with the label text in order to make the text clickable. Another way to achieve this is by using the <code>for</code> attribute as explained in this lesson.
|
||||
The value of the <code>for</code> attribute must be the same as the value of the <code>id</code> attribute of the form control. Here's an example:
|
||||
<blockquote><form><br> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br></form><br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to include an email sign up form. Add a <code>for</code> attribute on the email <code>label</code> that matches the <code>id</code> on its <code>input</code> field.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.
|
||||
testString: 'assert($(''label'').attr(''for''), ''Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.'');'
|
||||
- text: Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.
|
||||
testString: 'assert($(''label'').attr(''for'') == ''email'', ''Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label>Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,70 +0,0 @@
|
||||
---
|
||||
id: 587d778e367417b2b2512aab
|
||||
title: Improve Readability with High Contrast Text
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cKb3nCq'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Low contrast between the foreground and background colors can make text difficult to read. Sufficient contrast improves the readability of your content, but what exactly does "sufficient" mean?
|
||||
The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the strongest contrast. There are many contrast checking tools available online that calculate this ratio for you.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat's choice of light gray text on a white background for his recent blog post has a 1.5:1 contrast ratio, making it hard to read. Change the <code>color</code> of the text from the current gray (<code>#D3D3D3</code>) to a darker gray (<code>#636363</code>) to improve the contrast ratio to 6:1.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.
|
||||
testString: 'assert($(''body'').css(''color'') == ''rgb(99, 99, 99)'', ''Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.'');'
|
||||
- text: Your code should not change the <code>background-color</code> for the <code>body</code>.
|
||||
testString: 'assert($(''body'').css(''background-color'') == ''rgb(255, 255, 255)'', ''Your code should not change the <code>background-color</code> for the <code>body</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #D3D3D3;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,61 +0,0 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512a9f
|
||||
title: Jump Straight to the Content Using the main Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7zuE'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>article</code>, and <code>section</code>, among others.
|
||||
By default, a browser renders these elements similarly to the humble <code>div</code>. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.
|
||||
The <code>main</code> element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners.
|
||||
The <code>main</code> tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a "Jump to Main Content" link at the top of a page, using a main tag automatically gives assistive devices that functionality.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing <code>main</code> tags between the <code>header</code> and <code>footer</code> (covered in other challenges). Keep the <code>main</code> tags empty for now.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should have one <code>main</code> tag.
|
||||
testString: 'assert($(''main'').length == 1, ''Your code should have one <code>main</code> tag.'');'
|
||||
- text: The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.
|
||||
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), ''The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<footer></footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,67 +0,0 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: Know When Alt Text Should be Left Blank
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9P4t2'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In the last challenge, you learned that including an <code>alt</code> attribute on img tags is mandatory. However, sometimes images are grouped with a caption already describing them, or are used for decoration only. In these cases <code>alt</code> text may seem redundant or unnecessary.
|
||||
In situations when an image is already explained with text content, or does not add meaning to a page, the <code>img</code> still needs an <code>alt</code> attribute, but it can be set to an empty string. Here's an example:
|
||||
<code><img src="visualDecoration.jpeg" alt=""></code>
|
||||
Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.
|
||||
<strong>Note</strong><br>For images with a caption, you may still want to include <code>alt</code> text, since it helps search engines catalog the content of the image.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat has coded a skeleton page for the blog part of his website. He's planning to add a visual break between his two articles with a decorative image of a samurai sword. Add an <code>alt</code> attribute to the <code>img</code> tag and set it to an empty string. (Note that the image <code>src</code> doesn't link to an actual file - don't worry that there are no swords showing in the display.)
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>img</code> tag should have an <code>alt</code> attribute.
|
||||
testString: 'assert(!($(''img'').attr(''alt'') == undefined), ''Your <code>img</code> tag should have an <code>alt</code> attribute.'');'
|
||||
- text: The <code>alt</code> attribute should be set to an empty string.
|
||||
testString: 'assert($(''img'').attr(''alt'') == '''', ''The <code>alt</code> attribute should be set to an empty string.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,147 +0,0 @@
|
||||
---
|
||||
id: 587d778d367417b2b2512aaa
|
||||
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c8azdfM'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect.
|
||||
However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.
|
||||
Here's an example of the CSS rules that accomplish this:
|
||||
<blockquote>.sr-only {<br> position: absolute;<br> left: -10000px;<br> width: 1px;<br> height: 1px;<br> top: auto;<br> overflow: hidden;<br>}</blockquote>
|
||||
<strong>Note</strong><br>The following CSS approaches will NOT do the same thing:
|
||||
<ul>
|
||||
<li><code>display: none;</code> or <code>visibility: hidden;</code> hides content for everyone, including screen reader users</li>
|
||||
<li>Zero values for pixel sizes, such as <code>width: 0px; height: 0px;</code> removes that element from the flow of your document, meaning screen readers will ignore it</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an <code>sr-only</code> class, but the CSS rules aren't filled in yet. Give the <code>position</code> an absolute value, the <code>left</code> a -10000px value, and the <code>width</code> and <code>height</code> both 1px values.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.
|
||||
testString: 'assert($(''.sr-only'').css(''position'') == ''absolute'', ''Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.'');'
|
||||
- text: Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.
|
||||
testString: 'assert($(''.sr-only'').css(''left'') == ''-10000px'', ''Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.'');'
|
||||
- text: Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.
|
||||
testString: 'assert(code.match(/width:\s*?1px/gi), ''Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.'');'
|
||||
- text: Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.
|
||||
testString: 'assert(code.match(/height:\s*?1px/gi), ''Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: ;
|
||||
left: ;
|
||||
width: ;
|
||||
height: ;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training-->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,80 +0,0 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512aaf
|
||||
title: Make Links Navigatable with HTML Access Keys
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQvmaTp'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML offers the <code>accesskey</code> attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users.
|
||||
HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.
|
||||
Here's an example:
|
||||
<code><button accesskey="b">Important Button</button></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an <code>accesskey</code> attribute to both links and set the first one to "g" (for Garfield) and the second one to "c" (for Chuck Norris).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".
|
||||
testString: 'assert($(''#first'').attr(''accesskey''), ''Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".'');'
|
||||
- text: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".
|
||||
testString: 'assert($(''#second'').attr(''accesskey''), ''Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".'');'
|
||||
- text: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.
|
||||
testString: 'assert($(''#first'').attr(''accesskey'') == ''g'', ''Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.'');'
|
||||
- text: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.
|
||||
testString: 'assert($(''#second'').attr(''accesskey'') == ''c'', ''Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" href="">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||
|
||||
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" href="">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,87 +0,0 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: Make Screen Reader Navigation Easier with the footer Landmark
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVrDh8'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Similar to <code>header</code> and <code>nav</code>, the <code>footer</code> element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat's training page is making good progress. Change the <code>div</code> he used to wrap his copyright information at the bottom of the page to a <code>footer</code> element.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should have one <code>footer</code> tag.
|
||||
testString: 'assert($(''footer'').length == 1, ''Your code should have one <code>footer</code> tag.'');'
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
|
||||
- text: Your code should have an opening and closing <code>footer</code> tag.
|
||||
testString: 'assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g), ''Your code should have an opening and closing <code>footer</code> tag.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<div>© 2018 Camper Cat</div>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,82 +0,0 @@
|
||||
---
|
||||
id: 587d7787367417b2b2512aa1
|
||||
title: Make Screen Reader Navigation Easier with the header Landmark
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVwWSv'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The next HTML5 element that adds semantic meaning and improves accessibility is the <code>header</code> tag. It's used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages.
|
||||
<code>header</code> shares the embedded landmark feature you saw with <code>main</code>, allowing assistive technologies to quickly navigate to that content.
|
||||
<strong>Note</strong><br><code>header</code> is meant for use in the <code>body</code> tag of your HTML document. This is different than the <code>head</code> element, which contains the page's title, meta information, etc.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top <code>div</code> that currently contains the <code>h1</code> to a <code>header</code> tag instead.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should have one <code>header</code> tag.
|
||||
testString: 'assert($(''header'').length == 1, ''Your code should have one <code>header</code> tag.'');'
|
||||
- text: Your <code>header</code> tags should wrap around the <code>h1</code>.
|
||||
testString: 'assert($(''header'').children(''h1'').length == 1, ''Your <code>header</code> tags should wrap around the <code>h1</code>.'');'
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
|
||||
- text: Make sure your <code>header</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, ''Make sure your <code>header</code> element has a closing tag.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,87 +0,0 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa2
|
||||
title: Make Screen Reader Navigation Easier with the nav Landmark
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB76vtv'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>nav</code> element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.
|
||||
If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a <code>nav</code> tag as well. Using a <code>footer</code> (covered in the next challenge) is sufficient.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat included navigation links at the top of his training page, but wrapped them in a <code>div</code>. Change the <code>div</code> to a <code>nav</code> tag to improve the accessibility on his page.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should have one <code>nav</code> tag.
|
||||
testString: 'assert($(''nav'').length == 1, ''Your code should have one <code>nav</code> tag.'');'
|
||||
- text: Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.
|
||||
testString: 'assert($(''nav'').children(''ul'').length == 1, ''Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.'');'
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
|
||||
- text: Make sure your <code>nav</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, ''Make sure your <code>nav</code> element has a closing tag.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,98 +0,0 @@
|
||||
{
|
||||
"name": "Applied Accessibility",
|
||||
"dashedName": "applied-accessibility",
|
||||
"order": 3,
|
||||
"time": "5 hours",
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"587d774c367417b2b2512a9c",
|
||||
"Add a Text Alternative to Images for Visually Impaired Accessibility"
|
||||
],
|
||||
[
|
||||
"587d774c367417b2b2512a9d",
|
||||
"Know When Alt Text Should be Left Blank"
|
||||
],
|
||||
[
|
||||
"587d774d367417b2b2512a9e",
|
||||
"Use Headings to Show Hierarchical Relationships of Content"
|
||||
],
|
||||
[
|
||||
"587d774e367417b2b2512a9f",
|
||||
"Jump Straight to the Content Using the main Element"
|
||||
],
|
||||
[
|
||||
"587d774e367417b2b2512aa0",
|
||||
"Wrap Content in the article Element"
|
||||
],
|
||||
[
|
||||
"587d7787367417b2b2512aa1",
|
||||
"Make Screen Reader Navigation Easier with the header Landmark"
|
||||
],
|
||||
[
|
||||
"587d7788367417b2b2512aa2",
|
||||
"Make Screen Reader Navigation Easier with the nav Landmark"
|
||||
],
|
||||
[
|
||||
"587d7788367417b2b2512aa3",
|
||||
"Make Screen Reader Navigation Easier with the footer Landmark"
|
||||
],
|
||||
[
|
||||
"587d7789367417b2b2512aa4",
|
||||
"Improve Accessibility of Audio Content with the audio Element"
|
||||
],
|
||||
[
|
||||
"587d778a367417b2b2512aa5",
|
||||
"Improve Chart Accessibility with the figure Element"
|
||||
],
|
||||
[
|
||||
"587d778a367417b2b2512aa6",
|
||||
"Improve Form Field Accessibility with the label Element"
|
||||
],
|
||||
[
|
||||
"587d778b367417b2b2512aa7",
|
||||
"Wrap Radio Buttons in a fieldset Element for Better Accessibility"
|
||||
],
|
||||
[
|
||||
"587d778b367417b2b2512aa8",
|
||||
"Add an Accessible Date Picker"
|
||||
],
|
||||
[
|
||||
"587d778c367417b2b2512aa9",
|
||||
"Standardize Times with the HTML5 datetime Attribute"
|
||||
],
|
||||
[
|
||||
"587d778d367417b2b2512aaa",
|
||||
"Make Elements Only Visible to a Screen Reader by Using Custom CSS"
|
||||
],
|
||||
[
|
||||
"587d778e367417b2b2512aab",
|
||||
"Improve Readability with High Contrast Text"
|
||||
],
|
||||
[
|
||||
"587d778f367417b2b2512aac",
|
||||
"Avoid Colorblindness Issues by Using Sufficient Contrast"
|
||||
],
|
||||
[
|
||||
"587d778f367417b2b2512aad",
|
||||
"Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information"
|
||||
],
|
||||
[
|
||||
"587d778f367417b2b2512aae",
|
||||
"Give Links Meaning by Using Descriptive Link Text"
|
||||
],
|
||||
[
|
||||
"587d7790367417b2b2512aaf",
|
||||
"Make Links Navigatable with HTML Access Keys"
|
||||
],
|
||||
[
|
||||
"587d7790367417b2b2512ab0",
|
||||
"Use tabindex to Add Keyboard Focus to an Element"
|
||||
],
|
||||
[
|
||||
"587d7790367417b2b2512ab1",
|
||||
"Use tabindex to Specify the Order of Keyboard Focus for Several Elements"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -1,88 +0,0 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: Standardize Times with the HTML5 datetime Attribute
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Continuing with the date theme, HTML5 also introduced the <code>time</code> element along with a <code>datetime</code> attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the <code>datetime</code> attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text.
|
||||
Here's an example:
|
||||
<code><p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat's Mortal Kombat survey results are in! Wrap a <code>time</code> tag around the text "Thursday, September 15<sup>th</sup>" and add a <code>datetime</code> attribute to it set to "2016-09-15".
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'Your <code>time</code> tags should wrap around the text "Thursday, September 15<sup>th</sup>".'
|
||||
testString: 'assert($(''time'').text().match(/Thursday, September 15th/g), ''Your <code>time</code> tags should wrap around the text "Thursday, September 15<sup>th</sup>".'');'
|
||||
- text: Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.
|
||||
testString: 'assert($(''time'').attr(''datetime''), ''Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.'');'
|
||||
- text: Your <code>datetime</code> attribute should be set to a value of 2016-09-15.
|
||||
testString: 'assert($(''time'').attr(''datetime'') === "2016-09-15", ''Your <code>datetime</code> attribute should be set to a value of 2016-09-15.'');'
|
||||
- text: Make sure your <code>time</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, ''Make sure your <code>time</code> element has a closing tag.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
|
||||
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,70 +0,0 @@
|
||||
---
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: Use Headings to Show Hierarchical Relationships of Content
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Headings (<code>h1</code> through <code>h6</code> elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for their size values.
|
||||
<em>Semantic meaning</em> means that the tag you use around content indicates the type of information it contains.
|
||||
If you were writing a paper with an introduction, a body, and a conclusion, it wouldn't make much sense to put the conclusion as a subsection of the body in your outline. It should be its own section. Similarly, the heading tags in a webpage need to go in order and indicate the hierarchical relationships of your content.
|
||||
Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one.
|
||||
As an example, a page with an <code>h2</code> element followed by several subsections labeled with <code>h4</code> tags would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing.
|
||||
One final point, each page should always have one (and only one) <code>h1</code> element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix the headings so his markup gives semantic meaning to the content, and shows the proper parent-child relationships of his sections. Change all the <code>h5</code> tags to the proper heading level to indicate they are subsections of the <code>h2</code> ones.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should have six <code>h3</code> tags.
|
||||
testString: 'assert($(''h3'').length === 6, ''Your code should have six <code>h3</code> tags.'');'
|
||||
- text: Your code should not have any <code>h5</code> tags.
|
||||
testString: 'assert($(''h5'').length === 0, ''Your code should not have any <code>h5</code> tags.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h5>How to Hide in Plain Sight</h5>
|
||||
<h5>How to Climb a Wall</h5>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h5>How to Strengthen your Body</h5>
|
||||
<h5>How to Fight like a Ninja</h5>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h5>How to Breathe Properly</h5>
|
||||
<h5>How to Simplify your Life</h5>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,101 +0,0 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: Use tabindex to Add Keyboard Focus to an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMDHW'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The HTML <code>tabindex</code> attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.
|
||||
Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as <code>div</code>, <code>span</code>, and <code>p</code>, by placing a <code>tabindex="0"</code> attribute on them. Here's an example:
|
||||
<code><div tabindex="0">I need keyboard focus!</div></code>
|
||||
<strong>Note</strong><br>A negative <code>tabindex</code> value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a <code>div</code> used for a pop-up window is activated), and is beyond the scope of these challenges.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a <code>tabindex</code> attribute to the <code>p</code> tag and set its value to "0". Bonus - using <code>tabindex</code> also enables the CSS pseudo-class <code>:focus</code> to work on the <code>p</code> tag.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.
|
||||
testString: 'assert($(''p'').attr(''tabindex''), ''Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.'');'
|
||||
- text: Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.
|
||||
testString: 'assert($(''p'').attr(''tabindex'') == ''0'', ''Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,91 +0,0 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzRRcb'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>tabindex</code> attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher.
|
||||
Setting a tabindex="1" will bring keyboard focus to that element first. Then it cycles through the sequence of specified <code>tabindex</code> values (2, 3, etc.), before moving to default and <code>tabindex="0"</code> items.
|
||||
It's important to note that when the tab order is set this way, it overrides the default order (which uses the HTML source). This may confuse users who are expecting to start navigation from the top of the page. This technique may be necessary in some circumstances, but in terms of accessibility, take care before applying it.
|
||||
Here's an example:
|
||||
<code><div tabindex="1">I get keyboard focus, and I get it first!</div></code>
|
||||
<code><div tabindex="2">I get keyboard focus, and I get it second!</div></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search <code>input</code> and submit <code>input</code> form controls to be the first two items in the tab order. Add a <code>tabindex</code> attribute set to "1" to the search <code>input</code>, and a <code>tabindex</code> attribute set to "2" to the submit <code>input</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.
|
||||
testString: 'assert($(''#search'').attr(''tabindex''), ''Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.'');'
|
||||
- text: Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.
|
||||
testString: 'assert($(''#submit'').attr(''tabindex''), ''Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.'');'
|
||||
- text: Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.
|
||||
testString: 'assert($(''#search'').attr(''tabindex'') == ''1'', ''Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.'');'
|
||||
- text: Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.
|
||||
testString: 'assert($(''#submit'').attr(''tabindex'') == ''2'', ''Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input type="search" name="search" id="search">
|
||||
<input type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,76 +0,0 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: Wrap Content in the article Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp79S3'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>article</code> is another one of the new HTML5 elements that adds semantic meaning to your markup. <code>Article</code> is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.
|
||||
Determining whether content can stand alone is usually a judgement call, but there are a couple simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed?
|
||||
Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.
|
||||
<strong>Note about <code>section</code> and <code>div</code></strong><br>The <code>section</code> element is also new with HTML5, and has a slightly different semantic meaning than <code>article</code>. An <code>article</code> is for standalone content, and a <code>section</code> is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the <code>article</code>, then each chapter is a <code>section</code>. When there's no relationship between groups of content, then use a <code>div</code>.
|
||||
<blockquote><div> - groups content<br><section> - groups related content<br><article> - groups independent, self-contained content<br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat used <code>article</code> tags to wrap the posts on his blog page, but he forgot to use them around the top one. Change the <code>div</code> tag to use an <code>article</code> tag instead.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should have three <code>article</code> tags.
|
||||
testString: 'assert($(''article'').length == 3, ''Your code should have three <code>article</code> tags.'');'
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<div>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</div>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,104 +0,0 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVefw'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The next form topic covers accessibility of radio buttons. Each choice is given a <code>label</code> with a <code>for</code> attribute tying to the <code>id</code> of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set.
|
||||
The <code>fieldset</code> tag surrounds the entire grouping of radio buttons to achieve this. It often uses a <code>legend</code> tag to provide a description for the grouping, which is read by screen readers for each choice in the <code>fieldset</code> element.
|
||||
The <code>fieldset</code> wrapper and <code>legend</code> tag are not necessary when the choices are self-explanatory, like a gender selection. Using a <code>label</code> with the <code>for</code> attribute for each radio button is sufficient.
|
||||
Here's an example:
|
||||
<blockquote><form><br> <fieldset><br> <legend>Choose one of these three items:</legend><br> <input id="one" type="radio" name="items" value="one"><br> <label for="one">Choice One</label><br><br> <input id="two" type="radio" name="items" value="two"><br> <label for="two">Choice Two</label><br><br> <input id="three" type="radio" name="items" value="three"><br> <label for="three">Choice Three</label><br> </fieldset><br></form><br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons, and learned from our last lesson to use label tags with <code>for</code> attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the <code>div</code> tag surrounding the radio buttons to a <code>fieldset</code> tag, and change the <code>p</code> tag inside it to a <code>legend</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should have a <code>fieldset</code> tag around the radio button set.
|
||||
testString: 'assert($(''fieldset'').length == 1, ''Your code should have a <code>fieldset</code> tag around the radio button set.'');'
|
||||
- text: Make sure your <code>fieldset</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, ''Make sure your <code>fieldset</code> element has a closing tag.'');'
|
||||
- text: Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.
|
||||
testString: 'assert($(''legend'').length == 1, ''Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.'');'
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
|
||||
- text: Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.
|
||||
testString: 'assert($(''p'').length == 4, ''Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
<div>
|
||||
<p>What level ninja are you?</p>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</div>
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,100 +0,0 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abe
|
||||
title: Add a box-shadow to a Card-like Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZdUd'
|
||||
---
|
||||
|
||||
## 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 <code>offset-x</code> (how far to push the shadow horizontally from the element), <code>offset-y</code> (how far to push the shadow vertically from the element), <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.
|
||||
Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:
|
||||
<blockquote>box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);</blockquote>
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.
|
||||
testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), ''Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.'');'
|
||||
- text: You should use the given CSS for the <code>box-shadow</code> value.
|
||||
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), ''You should use the given CSS for the <code>box-shadow</code> value.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "#thumbnail {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,98 +0,0 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: Adjust the background-color Property of Text
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDqwA6'
|
||||
---
|
||||
|
||||
## 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> r = red<br> g = green<br> b = blue<br> 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.'
|
||||
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), ''Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.'');'
|
||||
- text: Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.
|
||||
testString: 'assert($(''h4'').css(''padding-top'') == ''10px'' && $(''h4'').css(''padding-right'') == ''10px'' && $(''h4'').css(''padding-bottom'') == ''10px'' && $(''h4'').css(''padding-left'') == ''10px'', ''Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.'');'
|
||||
- text: The <code>height</code> property on the <code>h4</code> element should be removed.
|
||||
testString: 'assert(!($(''h4'').css(''height'') == ''25px''), ''The <code>height</code> property on the <code>h4</code> element should be removed.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,93 +0,0 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: Adjust the Color of Various Elements to Complementary Colors
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmPpud'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.'
|
||||
testString: 'assert($(''header'').css(''background-color'') == ''rgb(9, 167, 161)'', ''The <code>header</code> element should have a <code>background-color</code> of #09A7A1.'');'
|
||||
- text: 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.'
|
||||
testString: 'assert($(''footer'').css(''background-color'') == ''rgb(9, 167, 161)'', ''The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.'');'
|
||||
- text: 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.'
|
||||
testString: 'assert($(''h2'').css(''color'') == ''rgb(9, 167, 161)'', ''The <code>h2</code> element should have a <code>color</code> of #09A7A1.'');'
|
||||
- text: 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.'
|
||||
testString: 'assert($(''button'').css(''background-color'') == ''rgb(255, 121, 14)'', ''The <code>button</code> element should have a <code>background-color</code> of #FF790E.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
button {
|
||||
background-color: white;
|
||||
}
|
||||
footer {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,85 +0,0 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: Adjust the Height of an Element Using the height Property
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||
---
|
||||
|
||||
## 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:
|
||||
<blockquote>img {<br> height: 20px;<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add a <code>height</code> property to the <code>h4</code> tag and set it to 25px.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.
|
||||
testString: 'assert($(''h4'').css(''height'') == ''25px'', ''Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,62 +0,0 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: Adjust the Hover State of an Anchor Tag
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='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:
|
||||
<blockquote>a:hover {<br> color: red;<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.'
|
||||
testString: 'assert($(''a'').css(''color'') == ''rgb(0, 0, 0)'', ''The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.'');'
|
||||
- text: The anchor tag should have a <code>color</code> of blue on hover.
|
||||
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), ''The anchor tag should have a <code>color</code> of blue on hover.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,91 +0,0 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: Adjust the Hue of a Color
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp38TZ'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should use the <code>hsl()</code> property to declare the color green.
|
||||
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the <code>hsl()</code> property to declare the color green.'');'
|
||||
- text: Your code should use the <code>hsl()</code> property to declare the color cyan.
|
||||
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the <code>hsl()</code> property to declare the color cyan.'');'
|
||||
- text: Your code should use the <code>hsl()</code> property to declare the color blue.
|
||||
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the <code>hsl()</code> property to declare the color blue.'');'
|
||||
- text: The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.
|
||||
testString: 'assert($(''.green'').css(''background-color'') == ''rgb(0, 255, 0)'', ''The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.'');'
|
||||
- text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
|
||||
testString: 'assert($(''.cyan'').css(''background-color'') == ''rgb(0, 255, 255)'', ''The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.'');'
|
||||
- text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
|
||||
testString: 'assert($(''.blue'').css(''background-color'') == ''rgb(0, 0, 255)'', ''The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,90 +0,0 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: Adjust the Size of a Header Versus a Paragraph Tag
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRPTz'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.
|
||||
testString: 'assert($(''h4'').css(''font-size'') == ''27px'', ''Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,92 +0,0 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: Adjust the Tone of a Color
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDJvT7'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
The navigation bar on this site currently inherits its <code>background-color</code> from the <code>header</code> element. Starting with that color as a base, add a <code>background-color</code> to the <code>nav</code> element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.
|
||||
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), ''The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "nav {background-color: hsl(180, 80%, 25%);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,86 +0,0 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: Adjust the Width of an Element Using the width Property
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||
---
|
||||
|
||||
## 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:
|
||||
<blockquote>img {<br> width: 220px;<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.
|
||||
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), ''Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".fullCard {\nwidth: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,104 +0,0 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: Animate Elements at Variable Rates
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ89WA4'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.
|
||||
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), ''The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "@keyframes twinkle-1 {50% {transform: scale(0.5); opacity: 0.5;}}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,84 +0,0 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: Animate Elements Continually Using an Infinite Animation Count
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
||||
---
|
||||
|
||||
## 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>
|
||||
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 infinite.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>animation-iteration-count</code> property should have a value of infinite.
|
||||
testString: 'assert($(''#ball'').css(''animation-iteration-count'') == ''infinite'', ''The <code>animation-iteration-count</code> property should have a value of infinite.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 3;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,107 +0,0 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: Animate Multiple Elements at Variable Rates
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpWZc9'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.
|
||||
testString: 'assert($(''.star-1'').css(''animation-duration'') == ''1s'', ''The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.'');'
|
||||
- text: The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.
|
||||
testString: 'assert($(''.star-2'').css(''animation-duration'') == ''0.9s'', ''The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.'');'
|
||||
- text: The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.
|
||||
testString: 'assert($(''.star-3'').css(''animation-duration'') == ''1.1s'', ''The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,61 +0,0 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: Center an Element Horizontally Using the margin Property
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJqU4'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>div</code> should have a <code>margin</code> set to auto.
|
||||
testString: 'assert(code.match(/margin:\s*?auto;/g), ''The <code>div</code> should have a <code>margin</code> set to auto.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "div {background-color: blue; height: 100px; width: 100px; margin: auto;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,66 +0,0 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512ac9
|
||||
title: Change an Element's Relative Position
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVmMtZ'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS treats each HTML element as its own box, which is usually referred to as the <code>CSS Box Model</code>. 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 <code>normal flow</code> 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:
|
||||
<blockquote>p {<br> position: relative;<br> bottom: 10px;<br>}</blockquote>
|
||||
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><br>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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.
|
||||
testString: 'assert($(''h2'').css(''position'') == ''relative'', ''The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.'');'
|
||||
- text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.
|
||||
testString: 'assert($(''h2'').css(''top'') == ''15px'', ''Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,91 +0,0 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae7
|
||||
title: Change Animation Timing with Keywords
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKvwCM'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.
|
||||
testString: 'assert($(''#ball1'').css(''animation-timing-function'') == ''linear'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.'');'
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.
|
||||
testString: 'assert($(''#ball2'').css(''animation-timing-function'') == ''ease-out'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,72 +0,0 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512acf
|
||||
title: Change the Position of Overlapping Elements with the z-index Property
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM94aHk'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When elements are positioned to overlap, 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The element with class <code>first</code> should have a <code>z-index</code> value of 2.
|
||||
testString: 'assert($(''.first'').css(''z-index'') == ''2'', ''The element with class <code>first</code> should have a <code>z-index</code> value of 2.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,69 +0,0 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad6
|
||||
title: Create a Gradual CSS Linear Gradient
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4dpt9'
|
||||
---
|
||||
|
||||
## 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 90deg makes a vertical gradient and 45deg is angled like a backslash. 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>.
|
||||
<strong>Note</strong><br>While there are other ways to specify a color value, like <code>rgb()</code> or <code>hsl()</code>, use hex values for this challenge.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.
|
||||
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), ''The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "<style> div{border-radius: 20px; width: 70%; height: 400px; margin: 50px auto; background: linear-gradient(35deg, #cff, #fcc);}</style><div></div>"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,77 +0,0 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512add
|
||||
title: Create a Graphic Using CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDWPs6'
|
||||
---
|
||||
|
||||
## 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.
|
||||
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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The value of the <code>background-color</code> property should be set to <code>transparent</code>.
|
||||
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), ''The value of the <code>background-color</code> property should be set to <code>transparent</code>.'');'
|
||||
- text: The value of the <code>border-radius</code> property should be set to <code>50%</code>.
|
||||
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), ''The value of the <code>border-radius</code> property should be set to <code>50%</code>.'');'
|
||||
- text: 'The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.'
|
||||
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), ''The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center
|
||||
{
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
background-color: blue;
|
||||
border-radius: 0px;
|
||||
box-shadow: 25px 10px 10px 10px green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".center {background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0 blue;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,91 +0,0 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abb
|
||||
title: Create a Horizontal Line Using the hr Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bR8t7'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add an <code>hr</code> tag underneath the <code>h4</code> which contains the card title.
|
||||
<strong>Note</strong><br>In HTML, <code>hr</code> is a self-closing tag, and therefore doesn't need a separate closing tag.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add an <code>hr</code> tag to the markup.
|
||||
testString: 'assert($(''hr'').length == 1, ''Your code should add an <code>hr</code> tag to the markup.'');'
|
||||
- text: The <code>hr</code> tag should come between the title and the paragraph.
|
||||
testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), ''The <code>hr</code> tag should come between the title and the paragraph.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,97 +0,0 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512ade
|
||||
title: Create a More Complex Shape Using CSS and HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpz4fr'
|
||||
---
|
||||
|
||||
## 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>:
|
||||
<blockquote>.heart::before {<br> content: "";<br> background-color: yellow;<br> border-radius: 25%;<br> position: absolute;<br> height: 50px;<br> width: 70px;<br> top: -50px;<br> left: 5px;<br>}</blockquote>
|
||||
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>
|
||||
|
||||
## 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. (<code>rotate()</code> works the same way that <code>skewX()</code> and <code>skewY()</code> do).
|
||||
Finally, in the <code>heart::before</code> selector, set its <code>content</code> property to an empty string.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.'
|
||||
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), ''The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.'');'
|
||||
- text: 'The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.'
|
||||
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, ''The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.'');'
|
||||
- text: The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.
|
||||
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), ''The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.'');'
|
||||
- text: 'The <code>content</code> of the <code>heart::before</code> selector should be an empty string.'
|
||||
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|'')\1\s*?;/gi), ''The <code>content</code> of the <code>heart::before</code> selector should be an empty string.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: ;
|
||||
}
|
||||
.heart::after {
|
||||
background-color: blue;
|
||||
content: "";
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: ;
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class = "heart"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \"\"; border-radius: 50%;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,92 +0,0 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae1
|
||||
title: Create Movement Using CSS Animation
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7amZfW'
|
||||
---
|
||||
|
||||
## 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.
|
||||
<blockquote>@keyframes rainbow {<br> 0% {<br> background-color: blue;<br> top: 0px;<br> }<br> 50% {<br> background-color: green;<br> top: 50px;<br> }<br> 100% {<br> background-color: yellow;<br> top: 0px;<br> }<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.
|
||||
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), ''The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.'');'
|
||||
- text: The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.
|
||||
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), ''The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.'');'
|
||||
- text: The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), ''The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "@keyframes rainbow {0% {background-color: blue; top: 0px; left: 0px;} 50% {background-color: green; top: 50px; left: 25px;} 100% {background-color: yellow; top: 0px; left:-25px;}}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,56 +0,0 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad8
|
||||
title: Create Texture by Adding a Subtle Pattern as a Background Image
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQdwJC8'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Using the url of <code>https://i.imgur.com/MJAkxbh.png</code>, set the <code>background</code> of the whole page with the <code>body</code> selector.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.
|
||||
testString: 'assert(code.match(/background:\s*?url\(\s*("|''|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), ''Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "body {background: url('https://i.imgur.com/MJAkxbh.png')}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,89 +0,0 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab3
|
||||
title: Create Visual Balance Using the text-align Property
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3b4EAp'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should use the text-align property on the <code>h4</code> tag to set it to center.
|
||||
testString: 'assert($(''h4'').css(''text-align'') == ''center'', ''Your code should use the text-align property on the <code>h4</code> tag to set it to center.'');'
|
||||
- text: Your code should use the text-align property on the <code>p</code> tag to set it to justify.
|
||||
testString: 'assert($(''p'').css(''text-align'') == ''justify'', ''Your code should use the text-align property on the <code>p</code> tag to set it to justify.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
|
||||
}
|
||||
p {
|
||||
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,80 +0,0 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae2
|
||||
title: Create Visual Direction by Fading an Element from Left to Right
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJqqAE'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.
|
||||
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), ''The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "@keyframes fade {50% { left: 60%; opacity: 0.1;}}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,96 +0,0 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: Decrease the Opacity of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7aKqu4'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>opacity</code> 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.
|
||||
testString: 'assert.approximately(parseFloat($(''.links'').css(''opacity'')), 0.7, 0.1, ''Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,75 +0,0 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad1
|
||||
title: Learn about Complementary Colors
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MD3Tr'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='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.
|
||||
There are many color picking tools available online that have an option to find the complement of a color.
|
||||
<strong>Note</strong><br>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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
|
||||
testString: 'assert($(''.blue'').css(''background-color'') == ''rgb(0, 0, 255)'', ''The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.'');'
|
||||
- text: The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.
|
||||
testString: 'assert($(''.yellow'').css(''background-color'') == ''rgb(255, 255, 0)'', ''The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #000000;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,84 +0,0 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad2
|
||||
title: Learn about Tertiary Colors
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRDAb'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='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, red (primary) and yellow (secondary) make orange. 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>#FF7D00</td></tr><tr><td>cyan</td><td>#00FFFF</td></tr><tr><td>raspberry</td><td>#FF007D</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 as orange and raspberry are not browser-recognized color names.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.
|
||||
testString: 'assert($(''.orange'').css(''background-color'') == ''rgb(255, 125, 0)'', ''The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.'');'
|
||||
- text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
|
||||
testString: 'assert($(''.cyan'').css(''background-color'') == ''rgb(0, 255, 255)'', ''The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.'');'
|
||||
- text: The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.
|
||||
testString: 'assert($(''.raspberry'').css(''background-color'') == ''rgb(255, 0, 125)'', ''The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,94 +0,0 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae8
|
||||
title: Learn How Bezier Curves Work
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bDrs8'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.
|
||||
testString: 'assert($(''#ball1'').css(''animation-timing-function'') == ''cubic-bezier(0.25, 0.25, 0.75, 0.75)'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.'');'
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.
|
||||
testString: 'assert($(''#ball2'').css(''animation-timing-function'') == ''ease-out'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,83 +0,0 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512adf
|
||||
title: Learn How the CSS @keyframes and animation Properties Work
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakprhv'
|
||||
---
|
||||
|
||||
## 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:
|
||||
<blockquote>#anim {<br> animation-name: colorful;<br> animation-duration: 3s;<br>}<br>@keyframes colorful {<br> 0% {<br> background-color: blue;<br> }<br> 100% {<br> background-color: yellow;<br> }<br>}</blockquote>
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.
|
||||
testString: 'assert($(''#rect'').css(''animation-name'') == ''rainbow'', ''The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.'');'
|
||||
- text: The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.
|
||||
testString: 'assert($(''#rect'').css(''animation-duration'') == ''4s'', ''The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.'');'
|
||||
- text: The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.
|
||||
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), ''The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.'');'
|
||||
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.
|
||||
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), ''The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.'');'
|
||||
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.
|
||||
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), ''The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.'');'
|
||||
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), ''The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acb
|
||||
title: Lock an Element to its Parent with Absolute Positioning
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.'
|
||||
testString: 'assert($(''#searchbar'').css(''position'') == ''absolute'', ''The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.'');'
|
||||
- text: 'Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'
|
||||
testString: 'assert($(''#searchbar'').css(''top'') == ''50px'', ''Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'');'
|
||||
- text: 'Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'
|
||||
testString: 'assert($(''#searchbar'').css(''right'') == ''50px'', ''Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
|
||||
|
||||
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,86 +0,0 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acc
|
||||
title: Lock an Element to the Browser Window with Fixed Positioning
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDNUR'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>. Notice the (lack of) impact to the <code>h1</code> position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.'
|
||||
testString: 'assert($(''#navbar'').css(''position'') == ''fixed'', ''The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.'');'
|
||||
- text: 'Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'
|
||||
testString: 'assert($(''#navbar'').css(''top'') == ''0px'', ''Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'');'
|
||||
- text: 'Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'
|
||||
testString: 'assert($(''#navbar'').css(''left'') == ''0px'', ''Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#navbar {
|
||||
|
||||
|
||||
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,121 +0,0 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae4
|
||||
title: Make a CSS Heartbeat using an Infinite Animation Count
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cDZpDUr'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.
|
||||
testString: 'assert($(''.heart'').css(''animation-iteration-count'') == ''infinite'', ''The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.'');'
|
||||
- text: The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.
|
||||
testString: 'assert($(''.back'').css(''animation-iteration-count'') == ''infinite'', ''The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,89 +0,0 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512aea
|
||||
title: Make Motion More Natural Using a Bezier Curve
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7akWUv'
|
||||
---
|
||||
|
||||
## 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.
|
||||
The following cubic Bezier curve simulates a juggling movement:
|
||||
<code>cubic-bezier(0.3, 0.4, 0.5, 1.6); </code>
|
||||
Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on an 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'
|
||||
testString: 'assert($(''#green'').css(''animation-timing-function'') == ''cubic-bezier(0.311, 0.441, 0.444, 1.649)'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,218 +0,0 @@
|
||||
{
|
||||
"name": "Applied Visual Design",
|
||||
"dashedName": "applied-visual-design",
|
||||
"order": 2,
|
||||
"time": "5 hours",
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"587d7791367417b2b2512ab3",
|
||||
"Create Visual Balance Using the text-align Property"
|
||||
],
|
||||
[
|
||||
"587d7791367417b2b2512ab4",
|
||||
"Adjust the Width of an Element Using the width Property"
|
||||
],
|
||||
[
|
||||
"587d7791367417b2b2512ab5",
|
||||
"Adjust the Height of an Element Using the height Property"
|
||||
],
|
||||
[
|
||||
"587d781a367417b2b2512ab7",
|
||||
"Use the strong Tag to Make Text Bold"
|
||||
],
|
||||
[
|
||||
"587d781a367417b2b2512ab8",
|
||||
"Use the u Tag to Underline Text"
|
||||
],
|
||||
[
|
||||
"587d781a367417b2b2512ab9",
|
||||
"Use the em Tag to Italicize Text"
|
||||
],
|
||||
[
|
||||
"587d781b367417b2b2512aba",
|
||||
"Use the s Tag to Strikethrough Text"
|
||||
],
|
||||
[
|
||||
"587d781b367417b2b2512abb",
|
||||
"Create a Horizontal Line Using the hr Element"
|
||||
],
|
||||
[
|
||||
"587d781b367417b2b2512abc",
|
||||
"Adjust the background-color Property of Text"
|
||||
],
|
||||
[
|
||||
"587d781b367417b2b2512abd",
|
||||
"Adjust the Size of a Header Versus a Paragraph Tag"
|
||||
],
|
||||
[
|
||||
"587d781b367417b2b2512abe",
|
||||
"Add a box-shadow to a Card-like Element"
|
||||
],
|
||||
[
|
||||
"587d781c367417b2b2512abf",
|
||||
"Decrease the Opacity of an Element"
|
||||
],
|
||||
[
|
||||
"587d781c367417b2b2512ac0",
|
||||
"Use the text-transform Property to Make Text Uppercase"
|
||||
],
|
||||
[
|
||||
"587d781c367417b2b2512ac2",
|
||||
"Set the font-size for Multiple Heading Elements"
|
||||
],
|
||||
[
|
||||
"587d781c367417b2b2512ac3",
|
||||
"Set the font-weight for Multiple Heading Elements"
|
||||
],
|
||||
[
|
||||
"587d781c367417b2b2512ac4",
|
||||
"Set the font-size of Paragraph Text"
|
||||
],
|
||||
[
|
||||
"587d781d367417b2b2512ac5",
|
||||
"Set the line-height of Paragraphs"
|
||||
],
|
||||
[
|
||||
"587d781d367417b2b2512ac8",
|
||||
"Adjust the Hover State of an Anchor Tag"
|
||||
],
|
||||
[
|
||||
"587d781e367417b2b2512ac9",
|
||||
"Change an Element's Relative Position"
|
||||
],
|
||||
[
|
||||
"587d781e367417b2b2512aca",
|
||||
"Move a Relatively Positioned Element with CSS Offsets"
|
||||
],
|
||||
[
|
||||
"587d781e367417b2b2512acb",
|
||||
"Lock an Element to its Parent with Absolute Positioning"
|
||||
],
|
||||
[
|
||||
"587d781e367417b2b2512acc",
|
||||
"Lock an Element to the Browser Window with Fixed Positioning"
|
||||
],
|
||||
[
|
||||
"587d78a3367417b2b2512ace",
|
||||
"Push Elements Left or Right with the float Property"
|
||||
],
|
||||
[
|
||||
"587d78a3367417b2b2512acf",
|
||||
"Change the Position of Overlapping Elements with the z-index Property"
|
||||
],
|
||||
[
|
||||
"587d78a3367417b2b2512ad0",
|
||||
"Center an Element Horizontally Using the margin Property"
|
||||
],
|
||||
[
|
||||
"587d78a3367417b2b2512ad1",
|
||||
"Learn about Complementary Colors"
|
||||
],
|
||||
[
|
||||
"587d78a4367417b2b2512ad2",
|
||||
"Learn about Tertiary Colors"
|
||||
],
|
||||
[
|
||||
"587d78a4367417b2b2512ad3",
|
||||
"Adjust the Color of Various Elements to Complementary Colors"
|
||||
],
|
||||
[
|
||||
"587d78a4367417b2b2512ad4",
|
||||
"Adjust the Hue of a Color"
|
||||
],
|
||||
[
|
||||
"587d78a4367417b2b2512ad5",
|
||||
"Adjust the Tone of a Color"
|
||||
],
|
||||
[
|
||||
"587d78a5367417b2b2512ad6",
|
||||
"Create a Gradual CSS Linear Gradient"
|
||||
],
|
||||
[
|
||||
"587d78a5367417b2b2512ad7",
|
||||
"Use a CSS Linear Gradient to Create a Striped Element"
|
||||
],
|
||||
[
|
||||
"587d78a5367417b2b2512ad8",
|
||||
"Create Texture by Adding a Subtle Pattern as a Background Image"
|
||||
],
|
||||
[
|
||||
"587d78a5367417b2b2512ad9",
|
||||
"Use the CSS Transform scale Property to Change the Size of an Element"
|
||||
],
|
||||
[
|
||||
"587d78a5367417b2b2512ada",
|
||||
"Use the CSS Transform scale Property to Scale an Element on Hover"
|
||||
],
|
||||
[
|
||||
"587d78a6367417b2b2512adb",
|
||||
"Use the CSS Transform Property skewX to Skew an Element Along the X-Axis"
|
||||
],
|
||||
[
|
||||
"587d78a6367417b2b2512adc",
|
||||
"Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis"
|
||||
],
|
||||
[
|
||||
"587d78a6367417b2b2512add",
|
||||
"Create a Graphic Using CSS"
|
||||
],
|
||||
[
|
||||
"587d78a6367417b2b2512ade",
|
||||
"Create a More Complex Shape Using CSS and HTML"
|
||||
],
|
||||
[
|
||||
"587d78a7367417b2b2512adf",
|
||||
"Learn How the CSS @keyframes and animation Properties Work"
|
||||
],
|
||||
[
|
||||
"587d78a7367417b2b2512ae0",
|
||||
"Use CSS Animation to Change the Hover State of a Button"
|
||||
],
|
||||
[
|
||||
"58a7a6ebf9a6318348e2d5aa",
|
||||
"Modify Fill Mode of an Animation"
|
||||
],
|
||||
[
|
||||
"587d78a7367417b2b2512ae1",
|
||||
"Create Movement Using CSS Animation"
|
||||
],
|
||||
[
|
||||
"587d78a7367417b2b2512ae2",
|
||||
"Create Visual Direction by Fading an Element from Left to Right"
|
||||
],
|
||||
[
|
||||
"587d78a8367417b2b2512ae3",
|
||||
"Animate Elements Continually Using an Infinite Animation Count"
|
||||
],
|
||||
[
|
||||
"587d78a8367417b2b2512ae4",
|
||||
"Make a CSS Heartbeat using an Infinite Animation Count"
|
||||
],
|
||||
[
|
||||
"587d78a8367417b2b2512ae5",
|
||||
"Animate Elements at Variable Rates"
|
||||
],
|
||||
[
|
||||
"587d78a8367417b2b2512ae6",
|
||||
"Animate Multiple Elements at Variable Rates"
|
||||
],
|
||||
[
|
||||
"587d78a8367417b2b2512ae7",
|
||||
"Change Animation Timing with Keywords"
|
||||
],
|
||||
[
|
||||
"587d78a9367417b2b2512ae8",
|
||||
"Learn How Bezier Curves Work"
|
||||
],
|
||||
[
|
||||
"587d78a9367417b2b2512ae9",
|
||||
"Use a Bezier Curve to Move a Graphic"
|
||||
],
|
||||
[
|
||||
"587d78a9367417b2b2512aea",
|
||||
"Make Motion More Natural Using a Bezier Curve"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
id: 58a7a6ebf9a6318348e2d5aa
|
||||
title: Modify Fill Mode of an Animation
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDmcE'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: '<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.'
|
||||
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), ''<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
/* add your code below this line */
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "button:hover {animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,66 +0,0 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512aca
|
||||
title: Move a Relatively Positioned Element with CSS Offsets
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bQEA4'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The CSS offsets of <code>top</code> or <code>bottom</code>, and <code>left</code> or <code>right</code> tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the <code>h2</code> downwards. Likewise, using a left offset moves an item to the right.
|
||||
<img src='https://i.imgur.com/eWWi3gZ.gif' alt='' />
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use CSS offsets to move the <code>h2</code> 15 pixels to the right and 10 pixels up.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.'
|
||||
testString: 'assert($(''h2'').css(''bottom'') == ''10px'', ''Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.'');'
|
||||
- text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.'
|
||||
testString: 'assert($(''h2'').css(''left'') == ''15px'', ''Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,80 +0,0 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ace
|
||||
title: Push Elements Left or Right with the float Property
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDqu2'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.
|
||||
testString: 'assert($(''#left'').css(''float'') == ''left'', ''The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.'');'
|
||||
- text: The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.
|
||||
testString: 'assert($(''#right'').css(''float'') == ''right'', ''The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,73 +0,0 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac2
|
||||
title: Set the font-size for Multiple Heading Elements
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpQNT3'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
<ul><li>Set the <code>font-size</code> of the <code>h1</code> tag to 68px.</li><li>Set the <code>font-size</code> of the <code>h2</code> tag to 52px.</li><li>Set the <code>font-size</code> of the <code>h3</code> tag to 40px.</li><li>Set the <code>font-size</code> of the <code>h4</code> tag to 32px.</li><li>Set the <code>font-size</code> of the <code>h5</code> tag to 21px.</li><li>Set the <code>font-size</code> of the <code>h6</code> tag to 14px.</li></ul>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.
|
||||
testString: 'assert($(''h1'').css(''font-size'') == ''68px'', ''Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.'');'
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.
|
||||
testString: 'assert($(''h2'').css(''font-size'') == ''52px'', ''Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.'');'
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.
|
||||
testString: 'assert($(''h3'').css(''font-size'') == ''40px'', ''Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.'');'
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.
|
||||
testString: 'assert($(''h4'').css(''font-size'') == ''32px'', ''Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.'');'
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.
|
||||
testString: 'assert($(''h5'').css(''font-size'') == ''21px'', ''Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.'');'
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.
|
||||
testString: 'assert($(''h6'').css(''font-size'') == ''14px'', ''Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,57 +0,0 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac4
|
||||
title: Set the font-size of Paragraph Text
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJ36Cr'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.
|
||||
testString: 'assert($(''p'').css(''font-size'') == ''16px'', ''Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,92 +0,0 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac3
|
||||
title: Set the font-weight for Multiple Heading Elements
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWRHq'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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'>
|
||||
|
||||
```yml
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.
|
||||
testString: 'assert($(''h1'').css(''font-weight'') == ''800'', ''Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.'');'
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.
|
||||
testString: 'assert($(''h2'').css(''font-weight'') == ''600'', ''Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.'');'
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.
|
||||
testString: 'assert($(''h3'').css(''font-weight'') == ''500'', ''Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.'');'
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.
|
||||
testString: 'assert($(''h4'').css(''font-weight'') == ''400'', ''Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.'');'
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.
|
||||
testString: 'assert($(''h5'').css(''font-weight'') == ''300'', ''Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.'');'
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.
|
||||
testString: 'assert($(''h6'').css(''font-weight'') == ''200'', ''Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,58 +0,0 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac5
|
||||
title: Set the line-height of Paragraphs
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWdcv'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add a <code>line-height</code> property to the <code>p</code> tag and set it to 25px.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.
|
||||
testString: 'assert($(''p'').css(''line-height'') == ''25px'', ''Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,88 +0,0 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae9
|
||||
title: Use a Bezier Curve to Move a Graphic
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bnRCK'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .'
|
||||
testString: 'assert($(''#red'').css(''animation-timing-function'') == ''cubic-bezier(0, 0, 0.58, 1)'', ''The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .'');'
|
||||
- text: The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.
|
||||
testString: 'assert($(''#red'').css(''animation-timing-function'') !== ''linear'', ''The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.'');'
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.
|
||||
testString: 'assert($(''#blue'').css(''animation-timing-function'') == ''ease-out'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,85 +0,0 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad7
|
||||
title: Use a CSS Linear Gradient to Create a Striped Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bmQh2'
|
||||
---
|
||||
|
||||
## 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.
|
||||
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.
|
||||
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>
|
||||
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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The angle of the <code>repeating-linear-gradient()</code> should be 45deg.
|
||||
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), ''The angle of the <code>repeating-linear-gradient()</code> should be 45deg.'');'
|
||||
- text: The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg
|
||||
testString: 'assert(!code.match(/90deg/gi), ''The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg'');'
|
||||
- text: The color stop at 0 pixels should be <code>yellow</code>.
|
||||
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), ''The color stop at 0 pixels should be <code>yellow</code>.'');'
|
||||
- text: One color stop at 40 pixels should be <code>yellow</code>.
|
||||
testString: 'assert(code.match(/yellow\s+?40px/gi), ''One color stop at 40 pixels should be <code>yellow</code>.'');'
|
||||
- text: The second color stop at 40 pixels should be <code>black</code>.
|
||||
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), ''The second color stop at 40 pixels should be <code>black</code>.'');'
|
||||
- text: The last color stop at 80 pixels should be <code>black</code>.
|
||||
testString: 'assert(code.match(/black\s+?80px/gi), ''The last color stop at 80 pixels should be <code>black</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50 auto;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
yellow 0px,
|
||||
blue 40px,
|
||||
green 40px,
|
||||
red 80px
|
||||
);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,71 +0,0 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae0
|
||||
title: Use CSS Animation to Change the Hover State of a Button
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4vZAa'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can use CSS <code>@keyframes</code> to change the color of a button in its hover state.
|
||||
Here's an example of changing the width of an image on hover:
|
||||
<blockquote><style><br> img:hover {<br> animation-name: width;<br> animation-duration: 500ms;<br> }<br><br> @keyframes width {<br> 100% {<br> width: 40px;<br> }<br> }<br></style><br><br><img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" /></blockquote>
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The @keyframes rule should use the <code>animation-name</code> background-color.
|
||||
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), ''The @keyframes rule should use the <code>animation-name</code> background-color.'');'
|
||||
- text: 'There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.'
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), ''There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,70 +0,0 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adb
|
||||
title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLP8Sr'
|
||||
---
|
||||
|
||||
## 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.
|
||||
The following code skews the paragraph element by -32 degrees along the X-axis.
|
||||
<blockquote>p {<br> transform: skewX(-32deg);<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.
|
||||
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), ''The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "#bottom {background-color: blue; transform: skewX(24deg);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,69 +0,0 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adc
|
||||
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZ2uB'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.
|
||||
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), ''The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "#top {background-color: red; transform: skewY(-10deg);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,78 +0,0 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad9
|
||||
title: Use the CSS Transform scale Property to Change the Size of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZVSg'
|
||||
---
|
||||
|
||||
## 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:
|
||||
<blockquote>p {<br> transform:scale(2);<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.'
|
||||
testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), ''Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "#ball2 {left: 65%; transform: scale(1.5);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,70 +0,0 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ada
|
||||
title: Use the CSS Transform scale Property to Scale an Element on Hover
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLPJuM'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>transform</code> property has a variety of functions that lets 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.
|
||||
Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
|
||||
<blockquote>p:hover {<br> transform: scale(2.1);<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.
|
||||
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), ''The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "div:hover {transform: scale(1.1);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,89 +0,0 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab9
|
||||
title: Use the em Tag to Italicize Text
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJRBtp'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Wrap an <code>em</code> tag around the contents of the paragraph tag to give it emphasis.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add an <code>em</code> tag to the markup.
|
||||
testString: 'assert($(''em'').length == 1, ''Your code should add an <code>em</code> tag to the markup.'');'
|
||||
- text: The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.
|
||||
testString: 'assert($(''p'').children().length == 1 && $(''em'').children().length == 2, ''The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,91 +0,0 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512aba
|
||||
title: Use the s Tag to Strikethrough Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add one <code>s</code> tag to the markup.
|
||||
testString: 'assert($(''s'').length == 1, ''Your code should add one <code>s</code> tag to the markup.'');'
|
||||
- text: A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.
|
||||
testString: 'assert($(''s'').text().match(/Google/gi) && !$(''s'').text().match(/Alphabet/gi), ''A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.'');'
|
||||
- text: 'Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.'
|
||||
testString: 'assert($(''h4'').html().match(/Alphabet/gi), ''Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,91 +0,0 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab7
|
||||
title: Use the strong Tag to Make Text Bold
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/ceJNBSb'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Wrap a <code>strong</code> tag around "Stanford University" inside the <code>p</code> tag.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add one <code>strong</code> tag to the markup.
|
||||
testString: 'assert($(''strong'').length == 1, ''Your code should add one <code>strong</code> tag to the markup.'');'
|
||||
- text: The <code>strong</code> tag should be inside the <code>p</code> tag.
|
||||
testString: 'assert($(''p'').children(''strong'').length == 1, ''The <code>strong</code> tag should be inside the <code>p</code> tag.'');'
|
||||
- text: The <code>strong</code> tag should wrap around the words "Stanford University".
|
||||
testString: 'assert($(''strong'').text().match(/^Stanford University$/gi), ''The <code>strong</code> tag should wrap around the words "Stanford University".'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,99 +0,0 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac0
|
||||
title: Use the text-transform Property to Make Text Uppercase
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZQSP'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Transform the text of the <code>h4</code> to be uppercase using the <code>text-transform</code> property.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>h4</code> text should be uppercase.
|
||||
testString: 'assert($(''h4'').css(''text-transform'') === ''uppercase'', ''The <code>h4</code> text should be uppercase.'');'
|
||||
- text: The original text of the h4 should not be changed.
|
||||
testString: 'assert(($(''h4'').text() !== $(''h4'').text().toUpperCase()), ''The original text of the h4 should not be changed.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,90 +0,0 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab8
|
||||
title: Use the u Tag to Underline Text
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6aQCL'
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Wrap the <code>u</code> tag only around the text "Ph.D. students".
|
||||
<strong>Note</strong><br>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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your code should add a <code>u</code> tag to the markup.
|
||||
testString: 'assert($(''u'').length === 1, ''Your code should add a <code>u</code> tag to the markup.'');'
|
||||
- text: The <code>u</code> tag should wrap around the text "Ph.D. students".
|
||||
testString: 'assert($(''u'').text() === ''Ph.D. students'', ''The <code>u</code> tag should wrap around the text "Ph.D. students".'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,89 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: Add a Negative Margin to an Element
|
||||
challengeType: 0
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/add-a-negative-margin-to-an-element'
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.
|
||||
If you set an element's <code>margin</code> to a negative value, the element will grow larger.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Try to set the <code>margin</code> to a negative value like the one for the red box.
|
||||
Change the <code>margin</code> of the blue box to <code>-15px</code>, so it fills the entire horizontal width of the yellow box around it.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "-15px", ''Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,113 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: Add Borders Around Your Elements
|
||||
challengeType: 0
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/add-borders-around-your-elements'
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>
|
||||
For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:
|
||||
<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a class called <code>thick-green-border</code>. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo.
|
||||
Remember that you can apply multiple classes to an element using its <code>class</code> attribute, by separating each class name with a space. For example:
|
||||
<code><img class="class1 class2"></code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>img</code> element should have the class <code>smaller-image</code>.
|
||||
testString: 'assert($("img").hasClass("smaller-image"), ''Your <code>img</code> element should have the class <code>smaller-image</code>.'');'
|
||||
- text: Your <code>img</code> element should have the class <code>thick-green-border</code>.
|
||||
testString: 'assert($("img").hasClass("thick-green-border"), ''Your <code>img</code> element should have the class <code>thick-green-border</code>.'');'
|
||||
- text: Give your image a border width of <code>10px</code>.
|
||||
testString: 'assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, ''Give your image a border width of <code>10px</code>.'');'
|
||||
- text: Give your image a border style of <code>solid</code>.
|
||||
testString: 'assert($("img").css("border-right-style") === "solid", ''Give your image a border style of <code>solid</code>.'');'
|
||||
- text: The border around your <code>img</code> element should be green.
|
||||
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", ''The border around your <code>img</code> element should be green.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,94 +0,0 @@
|
||||
---
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: Add Different Margins to Each Side of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.
|
||||
CSS allows you to control the <code>margin</code> of all four individual sides of an element with the <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Give the blue box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "40px", ''Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.'');'
|
||||
- text: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.
|
||||
testString: 'assert($(".blue-box").css("margin-right") === "20px", ''Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.'');'
|
||||
- text: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.
|
||||
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", ''Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.'');'
|
||||
- text: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.
|
||||
testString: 'assert($(".blue-box").css("margin-left") === "40px", ''Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,95 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: Add Different Padding to Each Side of an Element
|
||||
challengeType: 0
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element'
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Sometimes you will want to customize an element so that it has different amounts of <code>padding</code> on each of its sides.
|
||||
CSS allows you to control the <code>padding</code> of all four individual sides of an element with the <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Give the blue box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.
|
||||
testString: 'assert($(".blue-box").css("padding-top") === "40px", ''Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.'');'
|
||||
- text: Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.
|
||||
testString: 'assert($(".blue-box").css("padding-right") === "20px", ''Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.'');'
|
||||
- text: Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.
|
||||
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", ''Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.'');'
|
||||
- text: Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.
|
||||
testString: 'assert($(".blue-box").css("padding-left") === "40px", ''Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,110 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: Add Rounded Corners with border-radius
|
||||
challengeType: 0
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius'
|
||||
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
You can specify a <code>border-radius</code> with pixels. Give your cat photo a <code>border-radius</code> of <code>10px</code>.
|
||||
Note: this challenge allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or the <code>.smaller-image</code> class.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your image element should have the class "thick-green-border".
|
||||
testString: 'assert($("img").hasClass("thick-green-border"), ''Your image element should have the class "thick-green-border".'');'
|
||||
- text: Your image should have a border radius of <code>10px</code>
|
||||
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, ''Your image should have a border radius of <code>10px</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,90 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: Adjust the Margin of an Element
|
||||
challengeType: 0
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element'
|
||||
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.
|
||||
Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger <code>margin</code> than the blue box, making it appear smaller.
|
||||
When you increase the blue box's <code>margin</code>, it will increase the distance between its border and surrounding elements.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the <code>margin</code> of the blue box to match that of the red box.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "20px", ''Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,91 +0,0 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: Adjust the Padding of an Element
|
||||
challengeType: 0
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element'
|
||||
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Now let's put our Cat Photo App away for a little while and learn more about styling HTML.
|
||||
You may have already noticed this, but all HTML elements are essentially little rectangles.
|
||||
Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.
|
||||
An element's <code>padding</code> controls the amount of space between the element's content and its <code>border</code>.
|
||||
Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the blue box.
|
||||
When you increase the blue box's <code>padding</code>, it will increase the distance(<code>padding</code>) between the text and the border around it.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the <code>padding</code> of your blue box to match that of your red box.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.
|
||||
testString: 'assert($(".blue-box").css("padding-top") === "20px", ''Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,262 +0,0 @@
|
||||
---
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: Attach a Fallback value to a CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.
|
||||
<strong>Note:</strong> This fallback is not used to increase browser compatibilty, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable.
|
||||
Here's how you do it:
|
||||
<blockquote>background: var(--penguin-skin, black);</blockquote>
|
||||
This will set background to black if your variable wasn't set.
|
||||
Note that this can be useful for debugging.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
It looks there is a problem with the variables supplied to the <code>.penguin-top</code> and <code>.penguin-bottom</code> classes. Rather than fix the typo, add a fallback value of <code>black</code> to the <code>background</code> property of the <code>.penguin-top</code> and <code>.penguin-bottom</code> classes.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), ''Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.'');'
|
||||
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.
|
||||
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), ''Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* change code below */
|
||||
background: var(--pengiun-skin);
|
||||
/* change code above */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* change code below */
|
||||
background: var(--pengiun-skin);
|
||||
/* change code above */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin-top {background: var(--pengiun-skin, black);} .penguin-bottom {background: var(--pengiun-skin, black);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,255 +0,0 @@
|
||||
---
|
||||
id: 5a9d7295424fe3d0e10cad14
|
||||
title: Cascading CSS variables
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as <dfn>cascading</dfn>.
|
||||
Because of cascading, CSS variables are often defined in the <dfn>:root</dfn> element.
|
||||
<code>:root</code> is a <dfn>pseudo-class</dfn> selector that matches the root element of the document, usually the <code><html></code> element. By creating your variables in <code>:root</code>, they will be available globally and can be accessed from any other selector later in the style sheet.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Define a variable named <code>--penguin-belly</code> in the <code>:root</code> selector and give it the value of <code>pink</code>. You can then see how the value will cascade down to change the value to pink, anywhere that variable is used.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'
|
||||
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), ''declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
|
||||
/* add code below */
|
||||
|
||||
/* add code above */
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
--penguin-beak: orange;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ":root {--penguin-belly: pink;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,256 +0,0 @@
|
||||
---
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: Change a variable for a specific area
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When you create your variables in <code>:root</code> they will set the value of that variable for the whole page.
|
||||
You can then over-write these variables by setting them again within a specific element.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the value of <code>--penguin-belly</code> to <code>white</code> in the <code>penguin</code> class.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), ''The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: pink;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
|
||||
/* add code below */
|
||||
|
||||
/* add code above */
|
||||
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin {--penguin-belly: white;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,87 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: Change the Color of Text
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVmSm'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Now let's change the color of some of our text.
|
||||
We can do this by changing the <code>style</code> of your <code>h2</code> element.
|
||||
The property that is responsible for the color of an element's text is the <code>color</code> style property.
|
||||
Here's how you would set your <code>h2</code> element's text color to blue:
|
||||
<code><h2 style="color: blue;">CatPhotoApp</h2></code>
|
||||
Note that it is a good practice to end inline <code>style</code> declarations with a <code>;</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change your <code>h2</code> element's style so that its text color is red.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>h2</code> element should be red.
|
||||
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", ''Your <code>h2</code> element should be red.'');'
|
||||
- text: Your <code>style</code> declaration should end with a <code>;</code> .
|
||||
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\''|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\''|")>\s*CatPhotoApp\s*<\/h2>/),'' Your <code>style</code> declaration should end with a <code>;</code> .'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,87 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: Change the Font Size of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvDc8'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Font size is controlled by the <code>font-size</code> CSS property, like this:
|
||||
<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Inside the same <code><style></code> tag that contains your <code>red-text</code> class, create an entry for <code>p</code> elements and set the <code>font-size</code> to 16 pixels (<code>16px</code>).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.'
|
||||
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), ''Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,251 +0,0 @@
|
||||
---
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: Create a custom CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
To create a CSS Variable, you just need to give it a <code>name</code> with <code>two dashes</code> in front of it and assign it a <code>value</code> like this:
|
||||
<blockquote>--penguin-skin: gray;</blockquote>
|
||||
This will create a variable named <code>--penguin-skin</code> and assign it the value of <code>gray</code>.
|
||||
Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
In the <code>penguin</code> class, create a variable name <code>--penguin-skin</code> and give it a value of <code>gray</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: <code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
|
||||
/* add code below */
|
||||
|
||||
/* add code above */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: black;
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin {--penguin-skin: gray;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,113 +0,0 @@
|
||||
---
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: Give a Background Color to a div Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can set an element's background color with the <code>background-color</code> property.
|
||||
For example, if you wanted an element's background color to be <code>green</code>, you'd put this within your <code>style</code> element:
|
||||
<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a class called <code>silver-background</code> with the <code>background-color</code> of silver. Assign this class to your <code>div</code> element.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Give your <code>div</code> element the class <code>silver-background</code>.
|
||||
testString: 'assert($("div").hasClass("silver-background"), ''Give your <code>div</code> element the class <code>silver-background</code>.'');'
|
||||
- text: Your <code>div</code> element should have a silver background.
|
||||
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", ''Your <code>div</code> element should have a silver background.'');'
|
||||
- text: Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.
|
||||
testString: 'assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/), "Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,104 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: Import a Google Font
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are various sources for web fonts on the internet but, for this example we will focus on the Google Fonts library.
|
||||
<a href='https://fonts.google.com/' target='_blank'>Google Fonts</a> is a free library of web fonts that you can use in your CSS by referencing the font's URL.
|
||||
So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).
|
||||
To import a Google Font, you can copy the font(s) URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the <code>Lobster</code> font. To do this, copy the following code snippet and paste it into the top of your code editor(before the opening <code>style</code> element):
|
||||
<code><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></code>
|
||||
Now you can use the <code>Lobster</code> font in your CSS by using <code>Lobster</code> as the FAMILY_NAME as in the following example:<br><code>font-family: FAMILY_NAME, GENERIC_NAME;</code>.
|
||||
The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.
|
||||
Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the <code>"Open Sans"</code> font, but not to use the <code>Lobster</code> font.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a <code>font-family</code> CSS rule that uses the <code>Lobster</code> font, and ensure that it will be applied to your <code>h2</code> element.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Import the <code>Lobster</code> font.
|
||||
testString: 'assert(new RegExp("googleapis", "gi").test(code), ''Import the <code>Lobster</code> font.'');'
|
||||
- text: Your <code>h2</code> element should use the font <code>Lobster</code>.
|
||||
testString: 'assert($("h2").css("font-family").match(/lobster/i), ''Your <code>h2</code> element should use the font <code>Lobster</code>.'');'
|
||||
- text: Use an <code>h2</code> CSS selector to change the font.
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?\s*;\s*\}/gi.test(code), ''Use an <code>h2</code> CSS selector to change the font.'');'
|
||||
- text: Your <code>p</code> element should still use the font <code>monospace</code>.
|
||||
testString: 'assert($("p").css("font-family").match(/monospace/i), ''Your <code>p</code> element should still use the font <code>monospace</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,65 +0,0 @@
|
||||
---
|
||||
id: 5b7d72c338cd7e35b63f3e14
|
||||
title: Improve Compatibility with Browser Fallbacks
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When working with CSS you will likely run into browser compatibility issues at some point. This is why it's important to provide browser fallbacks to avoid potential problems.
|
||||
When your browser parses the CSS of a webpage, it ignores any properties that it doesn't recognize or support. For example, if you use a CSS variable to assign a background color on a site, Internet Explorer will ignore the background color because it does not support CSS variables. In that case, the browser will use whatever value it has for that property. If it can't find any other value set for that property, it will revert to the default value, which is typically not ideal.
|
||||
This means that if you do want to provide a browser fallback, it's as easy as providing another more widely supported value immediately before your declaration. That way an older browser will have something to fall back on, while a newer browser will just interpret whatever declaration comes later in the cascade.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
It looks like a variable is being used to set the background color of the <code>.red-box</code> class. Let's improve our browser compatibility by adding another <code>background</code> declaration right before the existing declaration and set its value to red.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.
|
||||
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), ''Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code=".red-box {background: red; background: var(--red-color);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -1,70 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: Inherit Styles from the Body Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Now we've proven that every HTML page has a <code>body</code> element, and that its <code>body</code> element can also be styled with CSS.
|
||||
Remember, you can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
First, create a <code>h1</code> element with the text <code>Hello World</code>
|
||||
Then, let's give all elements on your page the color of <code>green</code> by adding <code>color: green;</code> to your <code>body</code> element's style declaration.
|
||||
Finally, give your <code>body</code> element the font-family of <code>monospace</code> by adding <code>font-family: monospace;</code> to your <code>body</code> element's style declaration.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Create an <code>h1</code> element.
|
||||
testString: 'assert(($("h1").length > 0), ''Create an <code>h1</code> element.'');'
|
||||
- text: Your <code>h1</code> element should have the text <code>Hello World</code>.
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), ''Your <code>h1</code> element should have the text <code>Hello World</code>.'');'
|
||||
- text: Make sure your <code>h1</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, ''Make sure your <code>h1</code> element has a closing tag.'');'
|
||||
- text: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.
|
||||
testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), ''Give your <code>body</code> element the <code>color</code> property of <code>green</code>.'');'
|
||||
- text: Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.
|
||||
testString: 'assert(($("body").css("font-family").match(/monospace/i)), ''Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.'');'
|
||||
- text: Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), ''Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.'');'
|
||||
- text: Your <code>h1</code> element should inherit the color green from your <code>body</code> element.
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), ''Your <code>h1</code> element should inherit the color green from your <code>body</code> element.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,109 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: Make Circular Images with a border-radius
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In addition to pixels, you can also specify the <code>border-radius</code> using a percentage.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Give your cat photo a <code>border-radius</code> of <code>50%</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.'
|
||||
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, ''Your image should have a border radius of <code>50%</code>, making it perfectly circular.'');'
|
||||
- text: Be sure to use a percentage value of <code>50%</code>.
|
||||
testString: 'assert(code.match(/50%/g), ''Be sure to use a percentage value of <code>50%</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,186 +0,0 @@
|
||||
{
|
||||
"name": "Basic CSS",
|
||||
"dashedName": "basic-css",
|
||||
"order": 1,
|
||||
"time": "5 hours",
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"bad87fee1348bd9aedf08803",
|
||||
"Change the Color of Text"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08805",
|
||||
"Use CSS Selectors to Style Elements"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aecf08806",
|
||||
"Use a CSS Class to Style an Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aefe08806",
|
||||
"Style Multiple Elements with a CSS Class"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08806",
|
||||
"Change the Font Size of an Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aede08807",
|
||||
"Set the Font Family of an Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08807",
|
||||
"Import a Google Font"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08808",
|
||||
"Specify How Fonts Should Degrade"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9acdf08812",
|
||||
"Size Your Images"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9bedf08813",
|
||||
"Add Borders Around Your Elements"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08814",
|
||||
"Add Rounded Corners with border-radius"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08815",
|
||||
"Make Circular Images with a border-radius"
|
||||
],
|
||||
[
|
||||
"bad87fed1348bd9aede07836",
|
||||
"Give a Background Color to a div Element"
|
||||
],
|
||||
[
|
||||
"bad87eee1348bd9aede07836",
|
||||
"Set the id of an Element"
|
||||
],
|
||||
[
|
||||
"bad87dee1348bd9aede07836",
|
||||
"Use an id Attribute to Style an Element"
|
||||
],
|
||||
[
|
||||
"bad88fee1348bd9aedf08825",
|
||||
"Adjust the Padding of an Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08822",
|
||||
"Adjust the Margin of an Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08823",
|
||||
"Add a Negative Margin to an Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08824",
|
||||
"Add Different Padding to Each Side of an Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1248bd9aedf08824",
|
||||
"Add Different Margins to Each Side of an Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08826",
|
||||
"Use Clockwise Notation to Specify the Padding of an Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9afdf08726",
|
||||
"Use Clockwise Notation to Specify the Margin of an Element"
|
||||
],
|
||||
[
|
||||
"58c383d33e2e3259241f3076",
|
||||
"Use Attribute Selectors to Style Elements"
|
||||
],
|
||||
[
|
||||
"bad82fee1322bd9aedf08721",
|
||||
"Understand Absolute versus Relative Units"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08736",
|
||||
"Style the HTML Body Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08746",
|
||||
"Inherit Styles from the Body Element"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08756",
|
||||
"Prioritize One Style Over Another"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf04756",
|
||||
"Override Styles in Subsequent CSS"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd8aedf06756",
|
||||
"Override Class Declarations by Styling ID Attributes"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf06756",
|
||||
"Override Class Declarations with Inline Styles"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf07756",
|
||||
"Override All Other Styles by using Important"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08726",
|
||||
"Use Hex Code for Specific Colors"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08721",
|
||||
"Use Hex Code to Mix Colors"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aedf08719",
|
||||
"Use Abbreviated Hex Code"
|
||||
],
|
||||
[
|
||||
"bad87fee1348bd9aede08718",
|
||||
"Use RGB values to Color Elements"
|
||||
],
|
||||
[
|
||||
"bad82fee1348bd9aedf08721",
|
||||
"Use RGB to Mix Colors"
|
||||
],
|
||||
[
|
||||
"5a9d725e424fe3d0e10cad10",
|
||||
"Use CSS Variables to change several elements at once"
|
||||
],
|
||||
[
|
||||
"5a9d726c424fe3d0e10cad11",
|
||||
"Create a custom CSS Variable"
|
||||
],
|
||||
[
|
||||
"5a9d727a424fe3d0e10cad12",
|
||||
"Use a custom CSS Variable"
|
||||
],
|
||||
[
|
||||
"5a9d7286424fe3d0e10cad13",
|
||||
"Attach a Fallback value to a CSS Variable"
|
||||
],
|
||||
[
|
||||
"5b7d72c338cd7e35b63f3e14",
|
||||
"Improve Compatibility with Browser Fallbacks"
|
||||
],
|
||||
[
|
||||
"5a9d7295424fe3d0e10cad14",
|
||||
"Cascading CSS variables"
|
||||
],
|
||||
[
|
||||
"5a9d72a1424fe3d0e10cad15",
|
||||
"Change a variable for a specific area"
|
||||
],
|
||||
[
|
||||
"5a9d72ad424fe3d0e10cad16",
|
||||
"Use a media query to change a variable"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -1,81 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Override All Other Styles by using Important
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Yay! We just proved that inline styles will override all the CSS declarations in your <code>style</code> element.
|
||||
But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.
|
||||
In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use <code>!important</code>
|
||||
Let's go all the way back to our <code>pink-text</code> class declaration. Remember that our <code>pink-text</code> class was overridden by subsequent class declarations, id declarations, and inline styles.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Let's add the keyword <code>!important</code> to your pink-text element's color declaration to make 100% sure that your <code>h1</code> element will be pink.
|
||||
An example of how to do this is:
|
||||
<code>color: red !important;</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
|
||||
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
|
||||
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
|
||||
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
|
||||
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", ''Your <code>h1</code> element should have the id of <code>orange-text</code>.'');'
|
||||
- text: 'Your <code>h1</code> element should have the inline style of <code>color: white</code>.'
|
||||
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), ''Your <code>h1</code> element should have the inline style of <code>color: white</code>.'');'
|
||||
- text: Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.
|
||||
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), ''Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.'');'
|
||||
- text: Your <code>h1</code> element should be pink.
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", ''Your <code>h1</code> element should be pink.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,82 +0,0 @@
|
||||
---
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: Override Class Declarations by Styling ID Attributes
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.
|
||||
But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?
|
||||
Let's override your <code>pink-text</code> and <code>blue-text</code> classes, and make your <code>h1</code> element orange, by giving the <code>h1</code> element an id and then styling that id.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-text</code>. Remember, id styles look like this:
|
||||
<code><h1 id="orange-text"></code>
|
||||
Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.
|
||||
Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like:
|
||||
<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>
|
||||
Note: It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
|
||||
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
|
||||
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
|
||||
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
|
||||
- text: Give your <code>h1</code> element the id of <code>orange-text</code>.
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", ''Give your <code>h1</code> element the id of <code>orange-text</code>.'');'
|
||||
- text: There should be only one <code>h1</code> element.
|
||||
testString: 'assert(($("h1").length === 1), ''There should be only one <code>h1</code> element.'');'
|
||||
- text: Create a CSS declaration for your <code>orange-text</code> id
|
||||
testString: 'assert(code.match(/#orange-text\s*{/gi), ''Create a CSS declaration for your <code>orange-text</code> id'');'
|
||||
- text: Do not give your <code>h1</code> any <code>style</code> attributes.
|
||||
testString: 'assert(!code.match(/<h1.*style.*>/gi), ''Do not give your <code>h1</code> any <code>style</code> attributes.'');'
|
||||
- text: Your <code>h1</code> element should be orange.
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", ''Your <code>h1</code> element should be orange.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user