",
- " The Garfield Files: Lasagna as Training Fuel? ",
- " 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...
",
- " ",
- " ",
- " Defeating your Foe: the Red Dot is Ours! ",
- " 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...
",
- " ",
- " ",
- " Is Chuck Norris a Cat Person? ",
- " 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?...
",
- " ",
- " /g).length, 'Make sure your fieldset
element has a closing tag.');"
- },
- {
- "text":
- "Your code should have a legend
tag around the text asking what level ninja a user is.",
- "testString":
- "assert($('legend').length == 1, 'Your code should have a legend
tag around the text asking what level ninja a user is.');"
- },
- {
- "text": "Your code should not have any div
tags.",
- "testString":
- "assert($('div').length == 0, 'Your code should not have any div
tags.');"
- },
- {
- "text":
- "Your code should no longer have a p
tag around the text asking what level ninja a user is.",
- "testString":
- "assert($('p').length == 4, 'Your code should no longer have a p
tag around the text asking what level ninja a user is.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cVJVefw",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- " Deep Thoughts with Master Camper Cat ",
- " ",
- " ",
- " ",
- " The Garfield Files: Lasagna as Training Fuel? ",
- " 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...
",
- " ",
- " ",
- " ",
- " Defeating your Foe: the Red Dot is Ours! ",
- " 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...
",
- " ",
- " ",
- " ",
- " Is Chuck Norris a Cat Person? ",
- " 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?...
",
- " ",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d778b367417b2b2512aa8",
- "title": "Add an Accessible Date Picker",
- "description": [
- "Forms often include the input
field, which can be used to create several different form controls. The type
attribute on this element indicates what kind of input will be created.",
- "You may have noticed the text
and submit
input types in prior challenges, and HTML5 introduced an option to specify a date
field. Depending on browser support, a date picker shows up in the input
field when it's in focus, which makes filling in a form easier for all users.",
- "For older browsers, the type will default to text
, so it helps to show users the expected date format in the label or as placeholder text just in case.",
- "Here's an example:",
- "<label for="input1">Enter a date:</label> <input type="date" id="input1" name="input1"> ",
- " ",
- "Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an input
tag with a type
attribute of \"date\", an id
attribute of \"pickdate\", and a name
attribute of \"date\"."
- ],
- "tests": [
- {
- "text":
- "Your code should add one input
tag for the date selector field.",
- "testString":
- "assert($('input').length == 2, 'Your code should add one input
tag for the date selector field.');"
- },
- {
- "text":
- "Your input
tag should have a type
attribute with a value of date.",
- "testString":
- "assert($('input').attr('type') == 'date', 'Your input
tag should have a type
attribute with a value of date.');"
- },
- {
- "text":
- "Your input
tag should have an id
attribute with a value of pickdate.",
- "testString":
- "assert($('input').attr('id') == 'pickdate', 'Your input
tag should have an id
attribute with a value of pickdate.');"
- },
- {
- "text":
- "Your input
tag should have a name
attribute with a value of date.",
- "testString":
- "assert($('input').attr('name') == 'date', 'Your input
tag should have a name
attribute with a value of date.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cD9DJHr",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- " ",
- " ",
- " Mortal Kombat Tournament Survey ",
- " ",
- " ",
- " ",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d778c367417b2b2512aa9",
- "title": "Standardize Times with the HTML5 datetime Attribute",
- "description": [
- "Continuing with the date theme, HTML5 also introduced the time
element along with a datetime
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 datetime
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:",
- "<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>
",
- " ",
- "Camper Cat's Mortal Kombat survey results are in! Wrap a time
tag around the text \"Thursday, September 15<sup>th</sup>\" and add a datetime
attribute to it set to \"2016-09-15\"."
- ],
- "tests": [
- {
- "text":
- "Your time
tags should wrap around the text \"Thursday, September 15<sup>th</sup>\".",
- "testString":
- "assert($('time').text().match(/Thursday, September 15th/g), 'Your time
tags should wrap around the text \"Thursday, September 15<sup>th</sup>\".');"
- },
- {
- "text":
- "Your time
tag should have a datetime
attribute that is not empty.",
- "testString":
- "assert($('time').attr('datetime'), 'Your time
tag should have a datetime
attribute that is not empty.');"
- },
- {
- "text":
- "Your datetime
attribute should be set to a value of 2016-09-15.",
- "testString":
- "assert($('time').attr('datetime') === \"2016-09-15\", 'Your datetime
attribute should be set to a value of 2016-09-15.');"
- },
- {
- "text": "Make sure your time
element has a closing tag.",
- "testString":
- "assert(code.match(/<\\/time>/g) && code.match(/<\\/time>/g).length === 4, 'Make sure your time
element has a closing tag.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cmzMgtz",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- " ",
- " Mortal Kombat Tournament Survey Results ",
- " ",
- " ",
- " ",
- " 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 15th . May the best ninja win!
",
- " ",
- " ",
- " ",
- " ",
- " Comments: ",
- " ",
- " Posted by: Sub-Zero on August 13th
",
- " Johnny Cage better be there, I'll finish him!
",
- " ",
- " ",
- " Posted by: Doge on August 15th
",
- " Wow, much combat, so mortal.
",
- " ",
- " ",
- " Posted by: The Grim Reaper on August 16th
",
- " Looks like I'll be busy that day.
",
- " ",
- " ",
- " ",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d778d367417b2b2512aaa",
- "title":
- "Make Elements Only Visible to a Screen Reader by Using Custom CSS",
- "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:",
- ".sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; } ",
- "Note The following CSS approaches will NOT do the same thing:",
- "",
- "display: none;
or visibility: hidden;
hides content for everyone, including screen reader users ",
- "Zero values for pixel sizes, such as width: 0px; height: 0px;
removes that element from the flow of your document, meaning screen readers will ignore it ",
- " ",
- " ",
- "Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an sr-only
class, but the CSS rules aren't filled in yet. Give the position
an absolute value, the left
a -10000px value, and the width
and height
both 1px values."
- ],
- "tests": [
- {
- "text":
- "Your code should set the position
property of the sr-only
class to a value of absolute.",
- "testString":
- "assert($('.sr-only').css('position') == 'absolute', 'Your code should set the position
property of the sr-only
class to a value of absolute.');"
- },
- {
- "text":
- "Your code should set the left
property of the sr-only
class to a value of -10000px.",
- "testString":
- "assert($('.sr-only').css('left') == '-10000px', 'Your code should set the left
property of the sr-only
class to a value of -10000px.');"
- },
- {
- "text":
- "Your code should set the width
property of the sr-only
class to a value of 1 pixel.",
- "testString":
- "assert(code.match(/width:\\s*?1px/gi), 'Your code should set the width
property of the sr-only
class to a value of 1 pixel.');"
- },
- {
- "text":
- "Your code should set the height
property of the sr-only
class to a value of 1 pixel.",
- "testString":
- "assert(code.match(/height:\\s*?1px/gi), 'Your code should set the height
property of the sr-only
class to a value of 1 pixel.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c8azdfM",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- "",
- "",
- " ",
- " Training ",
- " ",
- " ",
- " ",
- " ",
- " ",
- " Master Camper Cat's Beginner Three Week Training Program ",
- " ",
- " ",
- " [Stacked bar chart]
",
- " ",
- " Breakdown per week of time to spend training in stealth, combat, and weapons. ",
- " ",
- " ",
- " Hours of Weekly Training in Stealth, Combat, and Weapons ",
- " ",
- " ",
- " ",
- " Stealth & Agility ",
- " Combat ",
- " Weapons ",
- " Total ",
- " ",
- " ",
- " ",
- " ",
- " Week One ",
- " 3 ",
- " 5 ",
- " 2 ",
- " 10 ",
- " ",
- " ",
- " Week Two ",
- " 4 ",
- " 5 ",
- " 3 ",
- " 12 ",
- " ",
- " ",
- " Week Three ",
- " 4 ",
- " 6 ",
- " 3 ",
- " 13 ",
- " ",
- " ",
- "
",
- " ",
- " ",
- " Stealth & Agility Training ",
- " Climb foliage quickly using a minimum spanning tree approach ",
- " No training is NP-complete without parkour ",
- " ",
- " ",
- " Combat Training ",
- " Dispatch multiple enemies with multithreaded tactics ",
- " Goodbye, world: 5 proven ways to knock out an opponent ",
- " ",
- " ",
- " Weapons Training ",
- " Swords: the best tool to literally divide and conquer ",
- " Breadth-first or depth-first in multi-weapon training? ",
- " ",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d778e367417b2b2512aab",
- "title": "Improve Readability with High Contrast Text",
- "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.",
- " ",
- "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 color
of the text from the current gray (#D3D3D3
) to a darker gray (#636363
) to improve the contrast ratio to 6:1."
- ],
- "tests": [
- {
- "text":
- "Your code should change the text color
for the body
to the darker gray.",
- "testString":
- "assert($('body').css('color') == 'rgb(99, 99, 99)', 'Your code should change the text color
for the body
to the darker gray.');"
- },
- {
- "text":
- "Your code should not change the background-color
for the body
.",
- "testString":
- "assert($('body').css('background-color') == 'rgb(255, 255, 255)', 'Your code should not change the background-color
for the body
.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cKb3nCq",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- "",
- "",
- " ",
- " Deep Thoughts with Master Camper Cat ",
- " ",
- " ",
- " A Word on the Recent Catnip Doping Scandal ",
- " 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.
",
- " 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.
",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d778f367417b2b2512aac",
- "title": "Avoid Colorblindness Issues by Using Sufficient Contrast",
- "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.",
- " ",
- "Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish background-color
with maroon text color
has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS hsl()
property (which stands for hue, saturation, lightness) by changing the third argument. Increase the background-color
lightness value from 35% to 55%, and decrease the color
lightness value from 20% to 15%. This improves the contrast to 5.9:1."
- ],
- "tests": [
- {
- "text":
- "Your code should only change the lightness value for the text color
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 color
property to a value of 15%.');"
- },
- {
- "text":
- "Your code should only change the lightness value for the background-color
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 background-color
property to a value of 55%.');"
- }
- ],
- "solutions": [
- "var code = \"body {color: hsl(0, 55%, 15%); background-color: hsl(120, 25%, 55%);}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cmzMEUw",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- "",
- "",
- " ",
- " Deep Thoughts with Master Camper Cat ",
- " ",
- " ",
- " A Word on the Recent Catnip Doping Scandal ",
- " 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.
",
- " 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.
",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d778f367417b2b2512aad",
- "title":
- "Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information",
- "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.",
- "Note 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.",
- " ",
- "Camper Cat is testing different styles for an important button, but the yellow (#FFFF33
) background-color
and the green (#33FF33
) text color
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 color
to a dark blue (#003366
) to solve both problems."
- ],
- "tests": [
- {
- "text":
- "Your code should change the text color
for the button
to the dark blue.",
- "testString":
- "assert($('button').css('color') == 'rgb(0, 51, 102)', 'Your code should change the text color
for the button
to the dark blue.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c437as3",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- "",
- "",
- " ",
- " Delete Internet ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d778f367417b2b2512aae",
- "title": "Give Links Meaning by Using Descriptive Link Text",
- "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 (a
) tags. Having a list of \"click here\" or \"read more\" links isn't helpful. Instead, you should use brief but descriptive text within the a
tags to provide more meaning for these users.",
- " ",
- "The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (a
) tags so they wrap around the text \"information about batteries\" instead of \"Click here\"."
- ],
- "tests": [
- {
- "text":
- "Your code should move the anchor a
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 a
tags from around the words \"Click here\" to wrap around the words \"information about batteries\".');"
- },
- {
- "text": "Make sure your a
element has a closing tag.",
- "testString":
- "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(//g).length, 'Make sure your a
element has a closing tag.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c437DcV",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- " Deep Thoughts with Master Camper Cat ",
- " ",
- " ",
- " Defeating your Foe: the Red Dot is Ours! ",
- " 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. Click here for information about batteries
",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d7790367417b2b2512aaf",
- "title": "Make Links Navigatable with HTML Access Keys",
- "description": [
- "HTML offers the accesskey
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:",
- "<button accesskey="b">Important Button</button>
",
- " ",
- "Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an accesskey
attribute to both links and set the first one to \"g\" (for Garfield) and the second one to \"c\" (for Chuck Norris)."
- ],
- "tests": [
- {
- "text":
- "Your code should add an accesskey
attribute to the a
tag with the id
of \"first\".",
- "testString":
- "assert($('#first').attr('accesskey'), 'Your code should add an accesskey
attribute to the a
tag with the id
of \"first\".');"
- },
- {
- "text":
- "Your code should add an accesskey
attribute to the a
tag with the id
of \"second\".",
- "testString":
- "assert($('#second').attr('accesskey'), 'Your code should add an accesskey
attribute to the a
tag with the id
of \"second\".');"
- },
- {
- "text":
- "Your code should set the accesskey
attribute on the a
tag with the id
of \"first\" to \"g\". Note that case matters.",
- "testString":
- "assert($('#first').attr('accesskey') == 'g', 'Your code should set the accesskey
attribute on the a
tag with the id
of \"first\" to \"g\". Note that case matters.');"
- },
- {
- "text":
- "Your code should set the accesskey
attribute on the a
tag with the id
of \"second\" to \"c\". Note that case matters.",
- "testString":
- "assert($('#second').attr('accesskey') == 'c', 'Your code should set the accesskey
attribute on the a
tag with the id
of \"second\" to \"c\". Note that case matters.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cQvmaTp",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- " Deep Thoughts with Master Camper Cat ",
- " ",
- " ",
- " ",
- " ",
- " ",
- " ",
- " ",
- " 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...
",
- " ",
- " ",
- " ",
- " ",
- " ",
- " ",
- " ",
- " 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?...
",
- " ",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d7790367417b2b2512ab0",
- "title": "Use tabindex to Add Keyboard Focus to an Element",
- "description": [
- "The HTML tabindex
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 div
, span
, and p
, by placing a tabindex=\"0\"
attribute on them. Here's an example:",
- "<div tabindex="0">I need keyboard focus!</div>
",
- "Note A negative tabindex
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 div
used for a pop-up window is activated), and is beyond the scope of these challenges.",
- " ",
- "Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a tabindex
attribute to the p
tag and set its value to \"0\". Bonus - using tabindex
also enables the CSS pseudo-class :focus
to work on the p
tag."
- ],
- "tests": [
- {
- "text":
- "Your code should add a tabindex
attribute to the p
tag that holds the form instructions.",
- "testString":
- "assert($('p').attr('tabindex'), 'Your code should add a tabindex
attribute to the p
tag that holds the form instructions.');"
- },
- {
- "text":
- "Your code should set the tabindex
attribute on the p
tag to a value of 0.",
- "testString":
- "assert($('p').attr('tabindex') == '0', 'Your code should set the tabindex
attribute on the p
tag to a value of 0.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cmzMDHW",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- "",
- "",
- " ",
- " Ninja Survey ",
- " ",
- " ",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d7790367417b2b2512ab1",
- "title":
- "Use tabindex to Specify the Order of Keyboard Focus for Several Elements",
- "description": [
- "The tabindex
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 tabindex
values (2, 3, etc.), before moving to default and tabindex=\"0\"
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:",
- "<div tabindex="1">I get keyboard focus, and I get it first!</div>
",
- "<div tabindex="2">I get keyboard focus, and I get it second!</div>
",
- " ",
- "Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search input
and submit input
form controls to be the first two items in the tab order. Add a tabindex
attribute set to \"1\" to the search input
, and a tabindex
attribute set to \"2\" to the submit input
."
- ],
- "tests": [
- {
- "text":
- "Your code should add a tabindex
attribute to the search input
tag.",
- "testString":
- "assert($('#search').attr('tabindex'), 'Your code should add a tabindex
attribute to the search input
tag.');"
- },
- {
- "text":
- "Your code should add a tabindex
attribute to the submit input
tag.",
- "testString":
- "assert($('#submit').attr('tabindex'), 'Your code should add a tabindex
attribute to the submit input
tag.');"
- },
- {
- "text":
- "Your code should set the tabindex
attribute on the search input
tag to a value of 1.",
- "testString":
- "assert($('#search').attr('tabindex') == '1', 'Your code should set the tabindex
attribute on the search input
tag to a value of 1.');"
- },
- {
- "text":
- "Your code should set the tabindex
attribute on the submit input
tag to a value of 2.",
- "testString":
- "assert($('#submit').attr('tabindex') == '2', 'Your code should set the tabindex
attribute on the submit input
tag to a value of 2.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cmzRRcb",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- " Even Deeper Thoughts with Master Camper Cat ",
- " ",
- " ",
- " ",
- " ",
- " ",
- " Inspirational Quotes ",
- " ",
- " “There's no Theory of Evolution, just a list of creatures I've allowed to live.” ",
- " - Chuck Norris
",
- " ",
- " ",
- " “Wise men say forgiveness is divine, but never pay full price for late pizza.” ",
- " - TMNT
",
- " ",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- }
- ]
-}
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.en.md
deleted file mode 100644
index 6280473a1e..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.en.md
+++ /dev/null
@@ -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
-
-It's likely you've seen an alt
attribute on an img
tag in other challenges. Alt
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:
-<img src="importantLogo.jpeg" alt="Company logo">
-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 alt
attribute and read its contents to deliver key information.
-Good alt
text is short but descriptive, and meant to briefly convey the meaning of the image. You should always include an alt
attribute on your image. Per HTML5 specification, this is now considered mandatory.
-
-
-## 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 alt
attribute in the img
tag, that explains Camper Cat is doing karate. (The image src
doesn't link to an actual file, so you should see the alt
text in the display.)
-
-
-## Tests
-
-
-```yml
-- text: 'Your img
tag should have an alt
attribute, and it should not be empty.'
- testString: 'assert($(''img'').attr(''alt''), ''Your img
tag should have an alt
attribute, and it should not be empty.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.en.md
deleted file mode 100644
index 1d34c5b1c6..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.en.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-id: 587d778b367417b2b2512aa8
-title: Add an Accessible Date Picker
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cD9DJHr'
----
-
-## Description
-
-Forms often include the input
field, which can be used to create several different form controls. The type
attribute on this element indicates what kind of input will be created.
-You may have noticed the text
and submit
input types in prior challenges, and HTML5 introduced an option to specify a date
field. Depending on browser support, a date picker shows up in the input
field when it's in focus, which makes filling in a form easier for all users.
-For older browsers, the type will default to text
, so it helps to show users the expected date format in the label or as placeholder text just in case.
-Here's an example:
-<label for="input1">Enter a date:</label> <input type="date" id="input1" name="input1">
-
-
-## Instructions
-
-Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an input
tag with a type
attribute of "date", an id
attribute of "pickdate", and a name
attribute of "date".
-
-
-## Tests
-
-
-```yml
-- text: Your code should add one input
tag for the date selector field.
- testString: 'assert($(''input'').length == 2, ''Your code should add one input
tag for the date selector field.'');'
-- text: Your input
tag should have a type
attribute with a value of date.
- testString: 'assert($(''input'').attr(''type'') == ''date'', ''Your input
tag should have a type
attribute with a value of date.'');'
-- text: Your input
tag should have an id
attribute with a value of pickdate.
- testString: 'assert($(''input'').attr(''id'') == ''pickdate'', ''Your input
tag should have an id
attribute with a value of pickdate.'');'
-- text: Your input
tag should have a name
attribute with a value of date.
- testString: 'assert($(''input'').attr(''name'') == ''date'', ''Your input
tag should have a name
attribute with a value of date.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
- Mortal Kombat Tournament Survey
-
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.en.md
deleted file mode 100644
index 2d42d9f408..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.en.md
+++ /dev/null
@@ -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
-
-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.
-Note 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.
-
-
-## Instructions
-
-Camper Cat is testing different styles for an important button, but the yellow (#FFFF33
) background-color
and the green (#33FF33
) text color
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 color
to a dark blue (#003366
) to solve both problems.
-
-
-## Tests
-
-
-```yml
-- text: Your code should change the text color
for the button
to the dark blue.
- testString: 'assert($(''button'').css(''color'') == ''rgb(0, 51, 102)'', ''Your code should change the text color
for the button
to the dark blue.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
- Delete Internet
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.en.md
deleted file mode 100644
index 3c4091a23d..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.en.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: 587d778f367417b2b2512aac
-title: Avoid Colorblindness Issues by Using Sufficient Contrast
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cmzMEUw'
----
-
-## 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.
-
-
-## Instructions
-
-Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish background-color
with maroon text color
has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS hsl()
property (which stands for hue, saturation, lightness) by changing the third argument. Increase the background-color
lightness value from 35% to 55%, and decrease the color
lightness value from 20% to 15%. This improves the contrast to 5.9:1.
-
-
-## Tests
-
-
-```yml
-- text: Your code should only change the lightness value for the text color
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 color
property to a value of 15%.'');'
-- text: Your code should only change the lightness value for the background-color
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 background-color
property to a value of 55%.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
- Deep Thoughts with Master Camper Cat
-
-
- A Word on the Recent Catnip Doping Scandal
- 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.
- 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.
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "body {color: hsl(0, 55%, 15%); background-color: hsl(120, 25%, 55%);}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.en.md
deleted file mode 100644
index 823d7e1da8..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.en.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-id: 587d778f367417b2b2512aae
-title: Give Links Meaning by Using Descriptive Link Text
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c437DcV'
----
-
-## 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 (a
) tags. Having a list of "click here" or "read more" links isn't helpful. Instead, you should use brief but descriptive text within the a
tags to provide more meaning for these users.
-
-
-## Instructions
-
-The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (a
) tags so they wrap around the text "information about batteries" instead of "Click here".
-
-
-## Tests
-
-
-```yml
-- text: Your code should move the anchor a
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 a
tags from around the words "Click here" to wrap around the words "information about batteries".'');'
-- text: Make sure your a
element has a closing tag.
- testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(//g).length, ''Make sure your a
element has a closing tag.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
- Deep Thoughts with Master Camper Cat
-
-
- Defeating your Foe: the Red Dot is Ours!
- 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. Click here for information about batteries
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.en.md
deleted file mode 100644
index ccc48a7adf..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.en.md
+++ /dev/null
@@ -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
-
-HTML5's audio
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 audio
tag supports the controls
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:
-<audio id="meowClip" controls> <source src="audio/meow.mp3" type="audio/mpeg" /> <source src="audio/meow.ogg" type="audio/ogg" /> </audio>
-Note 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.
-
-
-## Instructions
-
-Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an audio
element after the p
. Include the controls
attribute. Then place a source
tag inside the audio
tags with the src
attribute set to "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" and type
attribute set to "audio/mpeg".
-Note The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.
-
-
-## Tests
-
-
-```yml
-- text: Your code should have one audio
tag.
- testString: 'assert($(''audio'').length === 1, ''Your code should have one audio
tag.'');'
-- text: Make sure your audio
element has a closing tag.
- testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/[\s\S]*<\/audio>/g), ''Make sure your audio
element has a closing tag.'');'
-- text: The audio
tag should have the controls
attribute.
- testString: 'assert($(''audio'').attr(''controls''), ''The audio
tag should have the controls
attribute.'');'
-- text: Your code should have one source
tag.
- testString: 'assert($(''source'').length === 1, ''Your code should have one source
tag.'');'
-- text: Your source
tag should be inside the audio
tags.
- testString: 'assert($(''audio'').children(''source'').length === 1, ''Your source
tag should be inside the audio
tags.'');'
-- text: The value for the src
attribute on the source
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 src
attribute on the source
tag should match the link in the instructions exactly.'');'
-- text: Your code should include a type
attribute on the source
tag with a value of audio/mpeg.
- testString: 'assert($(''source'').attr(''type'') === ''audio/mpeg'', ''Your code should include a type
attribute on the source
tag with a value of audio/mpeg.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
- A sound clip of Zersiax's screen reader in action.
-
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.en.md
deleted file mode 100644
index a29eb8226b..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.en.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-id: 587d778a367417b2b2512aa5
-title: Improve Chart Accessibility with the figure Element
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cGJMqtE'
----
-
-## Description
-
-HTML5 introduced the figure
element, along with the related figcaption
. 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 figure
.
-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 figcaption
goes inside the figure
tags and can be combined with other elements:
-<figure> <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick"> <br> <figcaption> Master Camper Cat demonstrates proper form of a roundhouse kick. </figcaption> </figure>
-
-
-## 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 div
tag he used to a figure
tag, and the p
tag that surrounds the caption to a figcaption
tag.
-
-
-## Tests
-
-
-```yml
-- text: Your code should have one figure
tag.
- testString: 'assert($(''figure'').length == 1, ''Your code should have one figure
tag.'');'
-- text: Your code should have one figcaption
tag.
- testString: 'assert($(''figcaption'').length == 1, ''Your code should have one figcaption
tag.'');'
-- text: Your code should not have any div
tags.
- testString: 'assert($(''div'').length == 0, ''Your code should not have any div
tags.'');'
-- text: Your code should not have any p
tags.
- testString: 'assert($(''p'').length == 0, ''Your code should not have any p
tags.'');'
-- text: The figcaption
should be a child of the figure
tag.
- testString: 'assert($(''figure'').children(''figcaption'').length == 1, ''The figcaption
should be a child of the figure
tag.'');'
-- text: Make sure your figure
element has a closing tag.
- testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(//g).length, ''Make sure your figure
element has a closing tag.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
Breakdown per week of time to spend training in stealth, combat, and weapons.
-
-
-
-
-
- Stealth & Agility Training
- Climb foliage quickly using a minimum spanning tree approach
- No training is NP-complete without parkour
-
-
- Combat Training
- Dispatch multiple enemies with multithreaded tactics
- Goodbye world: 5 proven ways to knock out an opponent
-
-
- Weapons Training
- Swords: the best tool to literally divide and conquer
- Breadth-first or depth-first in multi-weapon training?
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.en.md
deleted file mode 100644
index 4176c1c611..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.en.md
+++ /dev/null
@@ -1,87 +0,0 @@
----
-id: 587d778a367417b2b2512aa6
-title: Improve Form Field Accessibility with the label Element
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cGJMMAN'
----
-
-## 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 label
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 for
attribute on a label
tag explicitly associates that label
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 label
element along with the label text in order to make the text clickable. Another way to achieve this is by using the for
attribute as explained in this lesson.
-The value of the for
attribute must be the same as the value of the id
attribute of the form control. Here's an example:
-<form> <label for="name">Name:</label> <input type="text" id="name" name="name"> </form>
-
-
-## Instructions
-
-Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to include an email sign up form. Add a for
attribute on the email label
that matches the id
on its input
field.
-
-
-## Tests
-
-
-```yml
-- text: Your code should have a for
attribute on the label
tag that is not empty.
- testString: 'assert($(''label'').attr(''for''), ''Your code should have a for
attribute on the label
tag that is not empty.'');'
-- text: Your for
attribute value should match the id
value on the email input
.
- testString: 'assert($(''label'').attr(''for'') == ''email'', ''Your for
attribute value should match the id
value on the email input
.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
- Deep Thoughts with Master Camper Cat
-
-
-
- The Garfield Files: Lasagna as Training Fuel?
- 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...
-
-
-
- Defeating your Foe: the Red Dot is Ours!
- 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...
-
-
-
- Is Chuck Norris a Cat Person?
- 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?...
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.en.md
deleted file mode 100644
index ce9665514a..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.en.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-id: 587d778e367417b2b2512aab
-title: Improve Readability with High Contrast Text
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cKb3nCq'
----
-
-## 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.
-
-
-## 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 color
of the text from the current gray (#D3D3D3
) to a darker gray (#636363
) to improve the contrast ratio to 6:1.
-
-
-## Tests
-
-
-```yml
-- text: Your code should change the text color
for the body
to the darker gray.
- testString: 'assert($(''body'').css(''color'') == ''rgb(99, 99, 99)'', ''Your code should change the text color
for the body
to the darker gray.'');'
-- text: Your code should not change the background-color
for the body
.
- testString: 'assert($(''body'').css(''background-color'') == ''rgb(255, 255, 255)'', ''Your code should not change the background-color
for the body
.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
- Deep Thoughts with Master Camper Cat
-
-
- A Word on the Recent Catnip Doping Scandal
- 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.
- 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.
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.en.md
deleted file mode 100644
index 1bfc13de04..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.en.md
+++ /dev/null
@@ -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
-
-HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include main
, header
, footer
, nav
, article
, and section
, among others.
-By default, a browser renders these elements similarly to the humble div
. 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 main
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 main
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.
-
-
-## Instructions
-
-Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing main
tags between the header
and footer
(covered in other challenges). Keep the main
tags empty for now.
-
-
-## Tests
-
-
-```yml
-- text: Your code should have one main
tag.
- testString: 'assert($(''main'').length == 1, ''Your code should have one main
tag.'');'
-- text: The main
tags should be between the closing header
tag and the opening footer
tag.
- testString: 'assert(code.match(/<\/header>\s*?\s*?<\/main>/gi), ''The main
tags should be between the closing header
tag and the opening footer
tag.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.en.md
deleted file mode 100644
index 418f241d4d..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.en.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-id: 587d774c367417b2b2512a9d
-title: Know When Alt Text Should be Left Blank
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cM9P4t2'
----
-
-## Description
-
-In the last challenge, you learned that including an alt
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 alt
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 img
still needs an alt
attribute, but it can be set to an empty string. Here's an example:
-<img src="visualDecoration.jpeg" alt="">
-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.
-Note For images with a caption, you may still want to include alt
text, since it helps search engines catalog the content of the image.
-
-
-## 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 alt
attribute to the img
tag and set it to an empty string. (Note that the image src
doesn't link to an actual file - don't worry that there are no swords showing in the display.)
-
-
-## Tests
-
-
-```yml
-- text: Your img
tag should have an alt
attribute.
- testString: 'assert(!($(''img'').attr(''alt'') == undefined), ''Your img
tag should have an alt
attribute.'');'
-- text: The alt
attribute should be set to an empty string.
- testString: 'assert($(''img'').attr(''alt'') == '''', ''The alt
attribute should be set to an empty string.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
Deep Thoughts with Master Camper Cat
-
- Defeating your Foe: the Red Dot is Ours!
- To Come...
-
-
-
-
-
- Is Chuck Norris a Cat Person?
- To Come...
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.en.md
deleted file mode 100644
index 5990a421e0..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.en.md
+++ /dev/null
@@ -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
-
-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:
-.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; }
-Note The following CSS approaches will NOT do the same thing:
-
-display: none;
or visibility: hidden;
hides content for everyone, including screen reader users
-Zero values for pixel sizes, such as width: 0px; height: 0px;
removes that element from the flow of your document, meaning screen readers will ignore it
-
-
-
-## Instructions
-
-Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an sr-only
class, but the CSS rules aren't filled in yet. Give the position
an absolute value, the left
a -10000px value, and the width
and height
both 1px values.
-
-
-## Tests
-
-
-```yml
-- text: Your code should set the position
property of the sr-only
class to a value of absolute.
- testString: 'assert($(''.sr-only'').css(''position'') == ''absolute'', ''Your code should set the position
property of the sr-only
class to a value of absolute.'');'
-- text: Your code should set the left
property of the sr-only
class to a value of -10000px.
- testString: 'assert($(''.sr-only'').css(''left'') == ''-10000px'', ''Your code should set the left
property of the sr-only
class to a value of -10000px.'');'
-- text: Your code should set the width
property of the sr-only
class to a value of 1 pixel.
- testString: 'assert(code.match(/width:\s*?1px/gi), ''Your code should set the width
property of the sr-only
class to a value of 1 pixel.'');'
-- text: Your code should set the height
property of the sr-only
class to a value of 1 pixel.
- testString: 'assert(code.match(/height:\s*?1px/gi), ''Your code should set the height
property of the sr-only
class to a value of 1 pixel.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
-
- Master Camper Cat's Beginner Three Week Training Program
-
-
- [Stacked bar chart]
-
- Breakdown per week of time to spend training in stealth, combat, and weapons.
-
-
- Hours of Weekly Training in Stealth, Combat, and Weapons
-
-
-
- Stealth & Agility
- Combat
- Weapons
- Total
-
-
-
-
- Week One
- 3
- 5
- 2
- 10
-
-
- Week Two
- 4
- 5
- 3
- 12
-
-
- Week Three
- 4
- 6
- 3
- 13
-
-
-
-
-
- Stealth & Agility Training
- Climb foliage quickly using a minimum spanning tree approach
- No training is NP-complete without parkour
-
-
- Combat Training
- Dispatch multiple enemies with multithreaded tactics
- Goodbye, world: 5 proven ways to knock out an opponent
-
-
- Weapons Training
- Swords: the best tool to literally divide and conquer
- Breadth-first or depth-first in multi-weapon training?
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.en.md
deleted file mode 100644
index 0232c080d3..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.en.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-id: 587d7790367417b2b2512aaf
-title: Make Links Navigatable with HTML Access Keys
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cQvmaTp'
----
-
-## Description
-
-HTML offers the accesskey
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:
-<button accesskey="b">Important Button</button>
-
-
-## Instructions
-
-Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an accesskey
attribute to both links and set the first one to "g" (for Garfield) and the second one to "c" (for Chuck Norris).
-
-
-## Tests
-
-
-```yml
-- text: Your code should add an accesskey
attribute to the a
tag with the id
of "first".
- testString: 'assert($(''#first'').attr(''accesskey''), ''Your code should add an accesskey
attribute to the a
tag with the id
of "first".'');'
-- text: Your code should add an accesskey
attribute to the a
tag with the id
of "second".
- testString: 'assert($(''#second'').attr(''accesskey''), ''Your code should add an accesskey
attribute to the a
tag with the id
of "second".'');'
-- text: Your code should set the accesskey
attribute on the a
tag with the id
of "first" to "g". Note that case matters.
- testString: 'assert($(''#first'').attr(''accesskey'') == ''g'', ''Your code should set the accesskey
attribute on the a
tag with the id
of "first" to "g". Note that case matters.'');'
-- text: Your code should set the accesskey
attribute on the a
tag with the id
of "second" to "c". Note that case matters.
- testString: 'assert($(''#second'').attr(''accesskey'') == ''c'', ''Your code should set the accesskey
attribute on the a
tag with the id
of "second" to "c". Note that case matters.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
- Deep Thoughts with Master Camper Cat
-
-
-
-
-
-
-
- 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...
-
-
-
-
-
-
-
- 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?...
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.en.md
deleted file mode 100644
index 9eea867d6e..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.en.md
+++ /dev/null
@@ -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
-
-Similar to header
and nav
, the footer
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.
-
-
-## Instructions
-
-Camper Cat's training page is making good progress. Change the div
he used to wrap his copyright information at the bottom of the page to a footer
element.
-
-
-## Tests
-
-
-```yml
-- text: Your code should have one footer
tag.
- testString: 'assert($(''footer'').length == 1, ''Your code should have one footer
tag.'');'
-- text: Your code should not have any div
tags.
- testString: 'assert($(''div'').length == 0, ''Your code should not have any div
tags.'');'
-- text: Your code should have an opening and closing footer
tag.
- testString: 'assert(code.match(/\s*© 2018 Camper Cat\s*<\/footer>/g), ''Your code should have an opening and closing footer
tag.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
- Stealth & Agility Training
- Climb foliage quickly using a minimum spanning tree approach
- No training is NP-complete without parkour
-
-
- Combat Training
- Dispatch multiple enemies with multithreaded tactics
- Goodbye world: 5 proven ways to knock out an opponent
-
-
- Weapons Training
- Swords: the best tool to literally divide and conquer
- Breadth-first or depth-first in multi-weapon training?
-
-
-
-
-
© 2018 Camper Cat
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.en.md
deleted file mode 100644
index 94a0e72776..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.en.md
+++ /dev/null
@@ -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
-
-The next HTML5 element that adds semantic meaning and improves accessibility is the header
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.
-header
shares the embedded landmark feature you saw with main
, allowing assistive technologies to quickly navigate to that content.
-Note header
is meant for use in the body
tag of your HTML document. This is different than the head
element, which contains the page's title, meta information, etc.
-
-
-## 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 div
that currently contains the h1
to a header
tag instead.
-
-
-## Tests
-
-
-```yml
-- text: Your code should have one header
tag.
- testString: 'assert($(''header'').length == 1, ''Your code should have one header
tag.'');'
-- text: Your header
tags should wrap around the h1
.
- testString: 'assert($(''header'').children(''h1'').length == 1, ''Your header
tags should wrap around the h1
.'');'
-- text: Your code should not have any div
tags.
- testString: 'assert($(''div'').length == 0, ''Your code should not have any div
tags.'');'
-- text: Make sure your header
element has a closing tag.
- testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(//g).length, ''Make sure your header
element has a closing tag.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
Training with Camper Cat
-
-
-
-
-
- Stealth & Agility Training
- Climb foliage quickly using a minimum spanning tree approach
- No training is NP-complete without parkour
-
-
- Combat Training
- Dispatch multiple enemies with multithreaded tactics
- Goodbye world: 5 proven ways to knock out an opponent
-
-
- Weapons Training
- Swords: the best tool to literally divide and conquer
- Breadth-first or depth-first in multi-weapon training?
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.en.md
deleted file mode 100644
index 1028b2a98b..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.en.md
+++ /dev/null
@@ -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
-
-The nav
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 nav
tag as well. Using a footer
(covered in the next challenge) is sufficient.
-
-
-## Instructions
-
-Camper Cat included navigation links at the top of his training page, but wrapped them in a div
. Change the div
to a nav
tag to improve the accessibility on his page.
-
-
-## Tests
-
-
-```yml
-- text: Your code should have one nav
tag.
- testString: 'assert($(''nav'').length == 1, ''Your code should have one nav
tag.'');'
-- text: Your nav
tags should wrap around the ul
and its list items.
- testString: 'assert($(''nav'').children(''ul'').length == 1, ''Your nav
tags should wrap around the ul
and its list items.'');'
-- text: Your code should not have any div
tags.
- testString: 'assert($(''div'').length == 0, ''Your code should not have any div
tags.'');'
-- text: Make sure your nav
element has a closing tag.
- testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(//g).length, ''Make sure your nav
element has a closing tag.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
- Training with Camper Cat
-
-
-
-
-
-
- Stealth & Agility Training
- Climb foliage quickly using a minimum spanning tree approach
- No training is NP-complete without parkour
-
-
- Combat Training
- Dispatch multiple enemies with multithreaded tactics
- Goodbye world: 5 proven ways to knock out an opponent
-
-
- Weapons Training
- Swords: the best tool to literally divide and conquer
- Breadth-first or depth-first in multi-weapon training?
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/meta.json b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/meta.json
deleted file mode 100644
index b7d3841c15..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/meta.json
+++ /dev/null
@@ -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"
- ]
- ]
-}
\ No newline at end of file
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.en.md
deleted file mode 100644
index cbc9aad8fd..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.en.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-id: 587d778c367417b2b2512aa9
-title: Standardize Times with the HTML5 datetime Attribute
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cmzMgtz'
----
-
-## Description
-
-Continuing with the date theme, HTML5 also introduced the time
element along with a datetime
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 datetime
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:
-<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>
-
-
-## Instructions
-
-Camper Cat's Mortal Kombat survey results are in! Wrap a time
tag around the text "Thursday, September 15<sup>th</sup>" and add a datetime
attribute to it set to "2016-09-15".
-
-
-## Tests
-
-
-```yml
-- text: 'Your time
tags should wrap around the text "Thursday, September 15<sup>th</sup>".'
- testString: 'assert($(''time'').text().match(/Thursday, September 15th/g), ''Your time
tags should wrap around the text "Thursday, September 15<sup>th</sup>".'');'
-- text: Your time
tag should have a datetime
attribute that is not empty.
- testString: 'assert($(''time'').attr(''datetime''), ''Your time
tag should have a datetime
attribute that is not empty.'');'
-- text: Your datetime
attribute should be set to a value of 2016-09-15.
- testString: 'assert($(''time'').attr(''datetime'') === "2016-09-15", ''Your datetime
attribute should be set to a value of 2016-09-15.'');'
-- text: Make sure your time
element has a closing tag.
- testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, ''Make sure your time
element has a closing tag.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
- Mortal Kombat Tournament Survey Results
-
-
-
- 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 15th . May the best ninja win!
-
-
-
-
- Comments:
-
- Posted by: Sub-Zero on August 13th
- Johnny Cage better be there, I'll finish him!
-
-
- Posted by: Doge on August 15th
- Wow, much combat, so mortal.
-
-
- Posted by: The Grim Reaper on August 16th
- Looks like I'll be busy that day.
-
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.en.md
deleted file mode 100644
index 011a8266d1..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.en.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-id: 587d774d367417b2b2512a9e
-title: Use Headings to Show Hierarchical Relationships of Content
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cqVEktm'
----
-
-## Description
-
-Headings (h1
through h6
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.
-Semantic meaning 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 h2
element followed by several subsections labeled with h4
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) h1
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.
-
-
-## 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 h5
tags to the proper heading level to indicate they are subsections of the h2
ones.
-
-
-## Tests
-
-
-```yml
-- text: Your code should have six h3
tags.
- testString: 'assert($(''h3'').length === 6, ''Your code should have six h3
tags.'');'
-- text: Your code should not have any h5
tags.
- testString: 'assert($(''h5'').length === 0, ''Your code should not have any h5
tags.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
How to Become a Ninja
-
- Learn the Art of Moving Stealthily
- How to Hide in Plain Sight
- How to Climb a Wall
-
- Learn the Art of Battle
- How to Strengthen your Body
- How to Fight like a Ninja
-
- Learn the Art of Living with Honor
- How to Breathe Properly
- How to Simplify your Life
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.en.md
deleted file mode 100644
index 0c685eac6d..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.en.md
+++ /dev/null
@@ -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
-
-The HTML tabindex
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 div
, span
, and p
, by placing a tabindex="0"
attribute on them. Here's an example:
-<div tabindex="0">I need keyboard focus!</div>
-Note A negative tabindex
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 div
used for a pop-up window is activated), and is beyond the scope of these challenges.
-
-
-## Instructions
-
-Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a tabindex
attribute to the p
tag and set its value to "0". Bonus - using tabindex
also enables the CSS pseudo-class :focus
to work on the p
tag.
-
-
-## Tests
-
-
-```yml
-- text: Your code should add a tabindex
attribute to the p
tag that holds the form instructions.
- testString: 'assert($(''p'').attr(''tabindex''), ''Your code should add a tabindex
attribute to the p
tag that holds the form instructions.'');'
-- text: Your code should set the tabindex
attribute on the p
tag to a value of 0.
- testString: 'assert($(''p'').attr(''tabindex'') == ''0'', ''Your code should set the tabindex
attribute on the p
tag to a value of 0.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.en.md
deleted file mode 100644
index c99b65b6bd..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.en.md
+++ /dev/null
@@ -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
-
-The tabindex
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 tabindex
values (2, 3, etc.), before moving to default and tabindex="0"
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:
-<div tabindex="1">I get keyboard focus, and I get it first!</div>
-<div tabindex="2">I get keyboard focus, and I get it second!</div>
-
-
-## Instructions
-
-Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search input
and submit input
form controls to be the first two items in the tab order. Add a tabindex
attribute set to "1" to the search input
, and a tabindex
attribute set to "2" to the submit input
.
-
-
-## Tests
-
-
-```yml
-- text: Your code should add a tabindex
attribute to the search input
tag.
- testString: 'assert($(''#search'').attr(''tabindex''), ''Your code should add a tabindex
attribute to the search input
tag.'');'
-- text: Your code should add a tabindex
attribute to the submit input
tag.
- testString: 'assert($(''#submit'').attr(''tabindex''), ''Your code should add a tabindex
attribute to the submit input
tag.'');'
-- text: Your code should set the tabindex
attribute on the search input
tag to a value of 1.
- testString: 'assert($(''#search'').attr(''tabindex'') == ''1'', ''Your code should set the tabindex
attribute on the search input
tag to a value of 1.'');'
-- text: Your code should set the tabindex
attribute on the submit input
tag to a value of 2.
- testString: 'assert($(''#submit'').attr(''tabindex'') == ''2'', ''Your code should set the tabindex
attribute on the submit input
tag to a value of 2.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
- Even Deeper Thoughts with Master Camper Cat
-
-
-
-
-
-
Inspirational Quotes
-
- “There's no Theory of Evolution, just a list of creatures I've allowed to live.”
- - Chuck Norris
-
-
- “Wise men say forgiveness is divine, but never pay full price for late pizza.”
- - TMNT
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.en.md
deleted file mode 100644
index dcd7fe80ca..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.en.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-id: 587d774e367417b2b2512aa0
-title: Wrap Content in the article Element
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cPp79S3'
----
-
-## Description
-
-article
is another one of the new HTML5 elements that adds semantic meaning to your markup. Article
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.
-Note about section
and div
The section
element is also new with HTML5, and has a slightly different semantic meaning than article
. An article
is for standalone content, and a section
is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article
, then each chapter is a section
. When there's no relationship between groups of content, then use a div
.
-<div> - groups content <section> - groups related content <article> - groups independent, self-contained content
-
-
-## Instructions
-
-Camper Cat used article
tags to wrap the posts on his blog page, but he forgot to use them around the top one. Change the div
tag to use an article
tag instead.
-
-
-## Tests
-
-
-```yml
-- text: Your code should have three article
tags.
- testString: 'assert($(''article'').length == 3, ''Your code should have three article
tags.'');'
-- text: Your code should not have any div
tags.
- testString: 'assert($(''div'').length == 0, ''Your code should not have any div
tags.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
Deep Thoughts with Master Camper Cat
-
-
-
The Garfield Files: Lasagna as Training Fuel?
-
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...
-
-
-
-
-
- Defeating your Foe: the Red Dot is Ours!
- 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...
-
-
-
-
-
- Is Chuck Norris a Cat Person?
- 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?...
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.en.md
deleted file mode 100644
index dc56bdd60a..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.en.md
+++ /dev/null
@@ -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
-
-The next form topic covers accessibility of radio buttons. Each choice is given a label
with a for
attribute tying to the id
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 fieldset
tag surrounds the entire grouping of radio buttons to achieve this. It often uses a legend
tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset
element.
-The fieldset
wrapper and legend
tag are not necessary when the choices are self-explanatory, like a gender selection. Using a label
with the for
attribute for each radio button is sufficient.
-Here's an example:
-<form> <fieldset> <legend>Choose one of these three items:</legend> <input id="one" type="radio" name="items" value="one"> <label for="one">Choice One</label><br> <input id="two" type="radio" name="items" value="two"> <label for="two">Choice Two</label><br> <input id="three" type="radio" name="items" value="three"> <label for="three">Choice Three</label> </fieldset> </form>
-
-
-## Instructions
-
-Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons, and learned from our last lesson to use label tags with for
attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the div
tag surrounding the radio buttons to a fieldset
tag, and change the p
tag inside it to a legend
.
-
-
-## Tests
-
-
-```yml
-- text: Your code should have a fieldset
tag around the radio button set.
- testString: 'assert($(''fieldset'').length == 1, ''Your code should have a fieldset
tag around the radio button set.'');'
-- text: Make sure your fieldset
element has a closing tag.
- testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(//g).length, ''Make sure your fieldset
element has a closing tag.'');'
-- text: Your code should have a legend
tag around the text asking what level ninja a user is.
- testString: 'assert($(''legend'').length == 1, ''Your code should have a legend
tag around the text asking what level ninja a user is.'');'
-- text: Your code should not have any div
tags.
- testString: 'assert($(''div'').length == 0, ''Your code should not have any div
tags.'');'
-- text: Your code should no longer have a p
tag around the text asking what level ninja a user is.
- testString: 'assert($(''p'').length == 4, ''Your code should no longer have a p
tag around the text asking what level ninja a user is.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
- Deep Thoughts with Master Camper Cat
-
-
-
- The Garfield Files: Lasagna as Training Fuel?
- 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...
-
-
-
- Defeating your Foe: the Red Dot is Ours!
- 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...
-
-
-
- Is Chuck Norris a Cat Person?
- 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?...
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design.json b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design.json
deleted file mode 100644
index 3e4cf1b139..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design.json
+++ /dev/null
@@ -1,3816 +0,0 @@
-{
- "name": "Applied Visual Design",
- "order": 2,
- "time": "5 hours",
- "helpRoom": "Help",
- "challenges": [
- {
- "id": "587d7791367417b2b2512ab3",
- "title": "Create Visual Balance Using the text-align Property",
- "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 text-align
property.",
- "text-align: justify;
causes all lines of text except the last line to meet the left and right edges of the line box.",
- "text-align: center;
centers the text",
- "text-align: right;
right-aligns the text",
- "And text-align: left;
(the default) left-aligns the text.",
- " ",
- "Align the h4
tag's text, which says \"Google\", to the center. Then justify the paragraph tag which contains information about how Google was founded."
- ],
- "tests": [
- {
- "text":
- "Your code should use the text-align property on the h4
tag to set it to center.",
- "testString":
- "assert($('h4').css('text-align') == 'center', 'Your code should use the text-align property on the h4
tag to set it to center.');"
- },
- {
- "text":
- "Your code should use the text-align property on the p
tag to set it to justify.",
- "testString":
- "assert($('p').css('text-align') == 'justify', 'Your code should use the text-align property on the p
tag to set it to justify.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c3b4EAp",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Google ",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d7791367417b2b2512ab4",
- "title": "Adjust the Width of an Element Using the width Property",
- "description": [
- "You can specify the width of an element using the width
property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:",
- "img { width: 220px; } ",
- " ",
- "Add a width
property to the entire card and set it to an absolute value of 245px. Use the fullCard
class to select the element."
- ],
- "tests": [
- {
- "text":
- "Your code should change the width
property of the card to 245 pixels by using the fullCard
class selector.",
- "testString":
- "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the width
property of the card to 245 pixels by using the fullCard
class selector.');"
- }
- ],
- "solutions": [
- "var code = \".fullCard {\\nwidth: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px;}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cvVLPtN",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Google ",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d7791367417b2b2512ab5",
- "title": "Adjust the Height of an Element Using the height Property",
- "description": [
- "You can specify the height of an element using the height
property in CSS, similar to the width
property. Here's an example that changes the height of an image to 20px:",
- "img { height: 20px; } ",
- " ",
- "Add a height
property to the h4
tag and set it to 25px."
- ],
- "tests": [
- {
- "text":
- "Your code should change the h4
height
property to a value of 25 pixels.",
- "testString":
- "assert($('h4').css('height') == '25px', 'Your code should change the h4
height
property to a value of 25 pixels.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cEDaDTN",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Google ",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781a367417b2b2512ab7",
- "title": "Use the strong Tag to Make Text Bold",
- "description": [
- "To make text bold, you can use the strong
tag. This is often used to draw attention to text and symbolize that it is important. With the strong
tag, the browser applies the CSS of font-weight: bold;
to the element.",
- " ",
- "Wrap a strong
tag around \"Stanford University\" inside the p
tag."
- ],
- "tests": [
- {
- "text":
- "Your code should add one strong
tag to the markup.",
- "testString":
- "assert($('strong').length == 1, 'Your code should add one strong
tag to the markup.');"
- },
- {
- "text":
- "The strong
tag should be inside the p
tag.",
- "testString":
- "assert($('p').children('strong').length == 1, 'The strong
tag should be inside the p
tag.');"
- },
- {
- "text":
- "The strong
tag should wrap around the words \"Stanford University\".",
- "testString":
- "assert($('strong').text().match(/^Stanford University$/gi), 'The strong
tag should wrap around the words \"Stanford University\".');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/ceJNBSb",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Google ",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781a367417b2b2512ab8",
- "title": "Use the u Tag to Underline Text",
- "description": [
- "To underline text, you can use the u
tag. This is often used to signify that a section of text is important, or something to remember. With the u
tag, the browser applies the CSS of text-decoration: underline;
to the element.",
- " ",
- "Wrap the u
tag only around the text \"Ph.D. students\".",
- "Note Try to avoid using the u
tag when it could be confused for a link. Anchor tags also have a default underlined formatting."
- ],
- "tests": [
- {
- "text": "Your code should add a u
tag to the markup.",
- "testString":
- "assert($('u').length === 1, 'Your code should add a u
tag to the markup.');"
- },
- {
- "text":
- "The u
tag should wrap around the text \"Ph.D. students\".",
- "testString":
- "assert($('u').text() === 'Ph.D. students', 'The u
tag should wrap around the text \"Ph.D. students\".');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cN6aQCL",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Google ",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781a367417b2b2512ab9",
- "title": "Use the em Tag to Italicize Text",
- "description": [
- "To emphasize text, you can use the em
tag. This displays text as italicized, as the browser applies the CSS of font-style: italic;
to the element.",
- " ",
- "Wrap an em
tag around the contents of the paragraph tag to give it emphasis."
- ],
- "tests": [
- {
- "text": "Your code should add an em
tag to the markup.",
- "testString":
- "assert($('em').length == 1, 'Your code should add an em
tag to the markup.');"
- },
- {
- "text":
- "The em
tag should wrap around the contents of the p
tag but not the p
tag itself.",
- "testString":
- "assert($('p').children().length == 1 && $('em').children().length == 2, 'The em
tag should wrap around the contents of the p
tag but not the p
tag itself.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cVJRBtp",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Google ",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781b367417b2b2512aba",
- "title": "Use the s Tag to Strikethrough Text",
- "description": [
- "To strikethrough text, which is when a horizontal line cuts across the characters, you can use the s
tag. It shows that a section of text is no longer valid. With the s
tag, the browser applies the CSS of text-decoration: line-through;
to the element.",
- " ",
- "Wrap the s
tag around \"Google\" inside the h4
tag and then add the word Alphabet beside it, which should not have the strikethrough formatting."
- ],
- "tests": [
- {
- "text": "Your code should add one s
tag to the markup.",
- "testString":
- "assert($('s').length == 1, 'Your code should add one s
tag to the markup.');"
- },
- {
- "text":
- "A s
tag should wrap around the Google text in the h4
tag. It should not contain the word Alphabet.",
- "testString":
- "assert($('s').text().match(/Google/gi) && !$('s').text().match(/Alphabet/gi), 'A s
tag should wrap around the Google text in the h4
tag. It should not contain the word Alphabet.');"
- },
- {
- "text":
- "Include the word Alphabet in the h4
tag, without strikethrough formatting.",
- "testString":
- "assert($('h4').html().match(/Alphabet/gi), 'Include the word Alphabet in the h4
tag, without strikethrough formatting.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Google ",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781b367417b2b2512abb",
- "title": "Create a Horizontal Line Using the hr Element",
- "description": [
- "You can use the hr
tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.",
- " ",
- "Add an hr
tag underneath the h4
which contains the card title.",
- "Note In HTML, hr
is a self-closing tag, and therefore doesn't need a separate closing tag."
- ],
- "tests": [
- {
- "text": "Your code should add an hr
tag to the markup.",
- "testString":
- "assert($('hr').length == 1, 'Your code should add an hr
tag to the markup.');"
- },
- {
- "text":
- "The hr
tag should come between the title and the paragraph.",
- "testString":
- "assert(code.match(/<\\/h4>\\s*? |\\s*?\\/>)\\s*?/gi), 'The hr
tag should come between the title and the paragraph.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c3bR8t7",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "
",
- "
",
- "
",
- "
Google Alphabet",
- " ",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781b367417b2b2512abc",
- "title": "Adjust the background-color Property of Text",
- "description": [
- "Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a background-color
to the element holding the text you want to emphasize. This challenge uses rgba()
instead of hex
codes or normal rgb()
.",
- "rgba stands for: r = red g = green b = blue a = alpha/level of opacity ",
- "The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. rgba()
is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.",
- "You'll use background-color: rgba(45, 45, 45, 0.1)
for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.",
- " ",
- "To make the text stand out more, adjust the background-color
of the h4
element to the given rgba()
value.",
- "Also for the h4
, remove the height
property and add padding
of 10px."
- ],
- "tests": [
- {
- "text":
- "Your code should add a background-color
property to the h4
element set to rgba(45, 45, 45, 0.1)
.",
- "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 background-color
property to the h4
element set to rgba(45, 45, 45, 0.1)
.');"
- },
- {
- "text":
- "Your code should add a padding
property to the h4
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 padding
property to the h4
element and set it to 10 pixels.');"
- },
- {
- "text":
- "The height
property on the h4
element should be removed.",
- "testString":
- "assert(!($('h4').css('height') == '25px'), 'The height
property on the h4
element should be removed.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cEDqwA6",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Alphabet ",
- "
",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781b367417b2b2512abd",
- "title": "Adjust the Size of a Header Versus a Paragraph Tag",
- "description": [
- "The font size of header tags (h1
through h6
) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the font-size
property to adjust the size of the text in an element.",
- " ",
- "To make the heading significantly larger than the paragraph, change the font-size
of the h4
tag to 27 pixels."
- ],
- "tests": [
- {
- "text":
- "Your code should add a font-size
property to the h4
element set to 27 pixels.",
- "testString":
- "assert($('h4').css('font-size') == '27px', 'Your code should add a font-size
property to the h4
element set to 27 pixels.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c3bRPTz",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Alphabet ",
- "
",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781b367417b2b2512abe",
- "title": "Add a box-shadow to a Card-like Element",
- "description": [
- "The box-shadow
property applies one or more shadows to an element.",
- "The box-shadow
property takes values for offset-x
(how far to push the shadow horizontally from the element), offset-y
(how far to push the shadow vertically from the element), blur-radius
, spread-radius
and a color value, in that order. The blur-radius
and spread-radius
values are optional.",
- "Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:",
- "box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); ",
- " ",
- "The element now has an id of thumbnail
. With this selector, use the example CSS values above to place a box-shadow
on the card."
- ],
- "tests": [
- {
- "text":
- "Your code should add a box-shadow
property for the thumbnail
id.",
- "testString":
- "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), 'Your code should add a box-shadow
property for the thumbnail
id.');"
- },
- {
- "text":
- "You should use the given CSS for the box-shadow
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 box-shadow
value.');"
- }
- ],
- "solutions": [
- "var code = \"#thumbnail {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cvVZdUd",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Alphabet ",
- "
",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781c367417b2b2512abf",
- "title": "Decrease the Opacity of an Element",
- "description": [
- "The opacity
property in CSS is used to adjust the opacity, or conversely, the transparency for an item.",
- "A value of 1 is opaque, which isn't transparent at all. A value of 0.5 is half see-through. A value of 0 is completely transparent. ",
- "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.",
- " ",
- "Set the opacity
of the anchor tags to 0.7 using links
class to select them."
- ],
- "tests": [
- {
- "text":
- "Your code should set the opacity
property to 0.7 on the anchor tags by selecting the class of links
.",
- "testString":
- "assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, 'Your code should set the opacity
property to 0.7 on the anchor tags by selecting the class of links
.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c7aKqu4",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Alphabet ",
- "
",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781c367417b2b2512ac0",
- "title": "Use the text-transform Property to Make Text Uppercase",
- "description": [
- "The text-transform
property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.",
- "The following table shows how the different text-transform
values change the example text \"Transform me\".",
- " Value Result lowercase
\"transform me\" uppercase
\"TRANSFORM ME\" capitalize
\"Transform Me\" initial
Use the default value inherit
Use the text-transform
value from the parent element none
Default: Use the original text
",
- " ",
- "Transform the text of the h4
to be uppercase using the text-transform
property."
- ],
- "tests": [
- {
- "text": "The h4
text should be uppercase.",
- "testString":
- "assert($('h4').css('text-transform') === 'uppercase', 'The h4
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.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cvVZQSP",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
Alphabet ",
- "
",
- "
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781c367417b2b2512ac2",
- "title": "Set the font-size for Multiple Heading Elements",
- "description": [
- "The font-size
property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all h1
through h6
tags to balance the heading sizes.",
- " ",
- "Set the font-size
of the h1
tag to 68px. Set the font-size
of the h2
tag to 52px. Set the font-size
of the h3
tag to 40px. Set the font-size
of the h4
tag to 32px. Set the font-size
of the h5
tag to 21px. Set the font-size
of the h6
tag to 14px. "
- ],
- "tests": [
- {
- "text":
- "Your code should set the font-size
property for the h1
tag to 68 pixels.",
- "testString":
- "assert($('h1').css('font-size') == '68px', 'Your code should set the font-size
property for the h1
tag to 68 pixels.');"
- },
- {
- "text":
- "Your code should set the font-size
property for the h2
tag to 52 pixels.",
- "testString":
- "assert($('h2').css('font-size') == '52px', 'Your code should set the font-size
property for the h2
tag to 52 pixels.');"
- },
- {
- "text":
- "Your code should set the font-size
property for the h3
tag to 40 pixels.",
- "testString":
- "assert($('h3').css('font-size') == '40px', 'Your code should set the font-size
property for the h3
tag to 40 pixels.');"
- },
- {
- "text":
- "Your code should set the font-size
property for the h4
tag to 32 pixels.",
- "testString":
- "assert($('h4').css('font-size') == '32px', 'Your code should set the font-size
property for the h4
tag to 32 pixels.');"
- },
- {
- "text":
- "Your code should set the font-size
property for the h5
tag to 21 pixels.",
- "testString":
- "assert($('h5').css('font-size') == '21px', 'Your code should set the font-size
property for the h5
tag to 21 pixels.');"
- },
- {
- "text":
- "Your code should set the font-size
property for the h6
tag to 14 pixels.",
- "testString":
- "assert($('h6').css('font-size') == '14px', 'Your code should set the font-size
property for the h6
tag to 14 pixels.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cPpQNT3",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "This is h1 text ",
- "This is h2 text ",
- "This is h3 text ",
- "This is h4 text ",
- "This is h5 text ",
- "This is h6 text "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781c367417b2b2512ac3",
- "title": "Set the font-weight for Multiple Heading Elements",
- "description": [
- "You set the font-size
of each heading tag in the last challenge, here you'll adjust the font-weight
.",
- "The font-weight
property sets how thick or thin characters are in a section of text.",
- " ",
- "Set the font-weight
of the h1
tag to 800. Set the font-weight
of the h2
tag to 600. Set the font-weight
of the h3
tag to 500. Set the font-weight
of the h4
tag to 400. Set the font-weight
of the h5
tag to 300. Set the font-weight
of the h6
tag to 200. "
- ],
- "tests": [
- {
- "text":
- "Your code should set the font-weight
property for the h1
tag to 800.",
- "testString":
- "assert($('h1').css('font-weight') == '800', 'Your code should set the font-weight
property for the h1
tag to 800.');"
- },
- {
- "text":
- "Your code should set the font-weight
property for the h2
tag to 600.",
- "testString":
- "assert($('h2').css('font-weight') == '600', 'Your code should set the font-weight
property for the h2
tag to 600.');"
- },
- {
- "text":
- "Your code should set the font-weight
property for the h3
tag to 500.",
- "testString":
- "assert($('h3').css('font-weight') == '500', 'Your code should set the font-weight
property for the h3
tag to 500.');"
- },
- {
- "text":
- "Your code should set the font-weight
property for the h4
tag to 400.",
- "testString":
- "assert($('h4').css('font-weight') == '400', 'Your code should set the font-weight
property for the h4
tag to 400.');"
- },
- {
- "text":
- "Your code should set the font-weight
property for the h5
tag to 300.",
- "testString":
- "assert($('h5').css('font-weight') == '300', 'Your code should set the font-weight
property for the h5
tag to 300.');"
- },
- {
- "text":
- "Your code should set the font-weight
property for the h6
tag to 200.",
- "testString":
- "assert($('h6').css('font-weight') == '200', 'Your code should set the font-weight
property for the h6
tag to 200.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/crVWRHq",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "This is h1 text ",
- "This is h2 text ",
- "This is h3 text ",
- "This is h4 text ",
- "This is h5 text ",
- "This is h6 text "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781c367417b2b2512ac4",
- "title": "Set the font-size of Paragraph Text",
- "description": [
- "The font-size
property in CSS is not limited to headings, it can be applied to any element containing text.",
- " ",
- "Change the value of the font-size
property for the paragraph to 16px to make it more visible."
- ],
- "tests": [
- {
- "text":
- "Your p
tag should have a font-size
of 16 pixels.",
- "testString":
- "assert($('p').css('font-size') == '16px', 'Your p
tag should have a font-size
of 16 pixels.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cVJ36Cr",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- " 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.",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781d367417b2b2512ac5",
- "title": "Set the line-height of Paragraphs",
- "description": [
- "CSS offers the line-height
property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.",
- " ",
- "Add a line-height
property to the p
tag and set it to 25px."
- ],
- "tests": [
- {
- "text":
- "Your code should set the line-height
of the p
tag to 25 pixels.",
- "testString":
- "assert($('p').css('line-height') == '25px', 'Your code should set the line-height
of the p
tag to 25 pixels.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/crVWdcv",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- " 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.",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781d367417b2b2512ac8",
- "title": "Adjust the Hover State of an Anchor Tag",
- "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 :hover
pseudo-class selector. Here's the CSS to change the color
of the anchor tag to red during its hover state:",
- "a:hover { color: red; } ",
- " ",
- "The code editor has a CSS rule to style all a
tags black. Add a rule so that when the user hovers over the a
tag, the color
is blue."
- ],
- "tests": [
- {
- "text":
- "The anchor tag color
should remain black, only add CSS rules for the :hover
state.",
- "testString":
- "assert($('a').css('color') == 'rgb(0, 0, 0)', 'The anchor tag color
should remain black, only add CSS rules for the :hover
state.');"
- },
- {
- "text":
- "The anchor tag should have a color
of blue on hover.",
- "testString":
- "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), 'The anchor tag should have a color
of blue on hover.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cakRGcm",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "CatPhotoApp "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781e367417b2b2512ac9",
- "title": "Change an Element's Relative Position",
- "description": [
- "CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model
. 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 normal flow
of a document, but CSS offers the position property to override it.",
- "When the position of an element is set to relative
, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left
or right
, and top
or bottom
. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:",
- "p { position: relative; bottom: 10px; } ",
- "Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.",
- "Note Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.",
- " ",
- "Change the position
of the h2
to relative
, and use a CSS offset to move it 15 pixels away from the top
of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements."
- ],
- "tests": [
- {
- "text":
- "The h2
element should have a position
property set to relative
.",
- "testString":
- "assert($('h2').css('position') == 'relative', 'The h2
element should have a position
property set to relative
.');"
- },
- {
- "text":
- "Your code should use a CSS offset to relatively position the h2
15px away from the top
of where it normally sits.",
- "testString":
- "assert($('h2').css('top') == '15px', 'Your code should use a CSS offset to relatively position the h2
15px away from the top
of where it normally sits.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/czVmMtZ",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- " On Being Well-Positioned ",
- " Move me! ",
- " I still think the h2 is where it normally sits.
",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781e367417b2b2512aca",
- "title": "Move a Relatively Positioned Element with CSS Offsets",
- "description": [
- "The CSS offsets of top
or bottom
, and left
or right
tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the h2
downwards. Likewise, using a left offset moves an item to the right.",
- " ",
- " ",
- "Use CSS offsets to move the h2
15 pixels to the right and 10 pixels up."
- ],
- "tests": [
- {
- "text":
- "Your code should use a CSS offset to relatively position the h2
10px upwards. In other words, move it 10px away from the bottom
of where it normally sits.",
- "testString":
- "assert($('h2').css('bottom') == '10px', 'Your code should use a CSS offset to relatively position the h2
10px upwards. In other words, move it 10px away from the bottom
of where it normally sits.');"
- },
- {
- "text":
- "Your code should use a CSS offset to relatively position the h2
15px towards the right. In other words, move it 15px away from the left
of where it normally sits.",
- "testString":
- "assert($('h2').css('left') == '15px', 'Your code should use a CSS offset to relatively position the h2
15px towards the right. In other words, move it 15px away from the left
of where it normally sits.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c9bQEA4",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "",
- "",
- " On Being Well-Positioned ",
- " Move me! ",
- " I still think the h2 is where it normally sits.
",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781e367417b2b2512acb",
- "title": "Lock an Element to its Parent with Absolute Positioning",
- "description": [
- "The next option for the CSS position
property is absolute
, which locks the element in place relative to its parent container. Unlike the relative
position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.",
- "One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;
), the browser will keep looking up the chain and ultimately default to the body tag.",
- " ",
- "Lock the #searchbar
element to the top-right of its section
parent by declaring its position
as absolute
. Give it top
and right
offsets of 50 pixels each."
- ],
- "tests": [
- {
- "text":
- "The #searchbar
element should have a position
set to absolute
.",
- "testString":
- "assert($('#searchbar').css('position') == 'absolute', 'The #searchbar
element should have a position
set to absolute
.');"
- },
- {
- "text":
- "Your code should use the top
CSS offset of 50 pixels on the #searchbar
element.",
- "testString":
- "assert($('#searchbar').css('top') == '50px', 'Your code should use the top
CSS offset of 50 pixels on the #searchbar
element.');"
- },
- {
- "text":
- "Your code should use the right
CSS offset of 50 pixels on the #searchbar
element.",
- "testString":
- "assert($('#searchbar').css('right') == '50px', 'Your code should use the right
CSS offset of 50 pixels on the #searchbar
element.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cyLJ7c3",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- " Welcome! ",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d781e367417b2b2512acc",
- "title": "Lock an Element to the Browser Window with Fixed Positioning",
- "description": [
- "The next layout scheme that CSS offers is the fixed
position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer \"realize\" where it is positioned, which may require some layout adjustments elsewhere.",
- "One key difference between the fixed
and absolute
positions is that an element with a fixed position won't move when the user scrolls.",
- " ",
- "The navigation bar in the code is labeled with an id of navbar
. Change its position
to fixed
, and offset it 0 pixels from the top
and 0 pixels from the left
. Notice the (lack of) impact to the h1
position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately."
- ],
- "tests": [
- {
- "text":
- "The #navbar
element should have a position
set to fixed
.",
- "testString":
- "assert($('#navbar').css('position') == 'fixed', 'The #navbar
element should have a position
set to fixed
.');"
- },
- {
- "text":
- "Your code should use the top
CSS offset of 0 pixels on the #navbar
element.",
- "testString":
- "assert($('#navbar').css('top') == '0px', 'Your code should use the top
CSS offset of 0 pixels on the #navbar
element.');"
- },
- {
- "text":
- "Your code should use the left
CSS offset of 0 pixels on the #navbar
element.",
- "testString":
- "assert($('#navbar').css('left') == '0px', 'Your code should use the left
CSS offset of 0 pixels on the #navbar
element.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c2MDNUR",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- " ",
- " Welcome! ",
- " ",
- " ",
- " ",
- " ",
- " I shift up when the #navbar is fixed to the browser window.
",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a3367417b2b2512ace",
- "title": "Push Elements Left or Right with the float Property",
- "description": [
- "The next positioning tool does not actually use position
, but sets the float
property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left
or right
of their containing parent element. It's commonly used with the width
property to specify how much horizontal space the floated element requires.",
- " ",
- "The given markup would work well as a two-column layout, with the section
and aside
elements next to each other. Give the #left
item a float
of left
and the #right
item a float
of right
."
- ],
- "tests": [
- {
- "text":
- "The element with id left
should have a float
value of left
.",
- "testString":
- "assert($('#left').css('float') == 'left', 'The element with id left
should have a float
value of left
.');"
- },
- {
- "text":
- "The element with id right
should have a float
value of right
.",
- "testString":
- "assert($('#right').css('float') == 'right', 'The element with id right
should have a float
value of right
.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c2MDqu2",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- "",
- "",
- " ",
- " ",
- " Content ",
- " Good stuff
",
- " ",
- " ",
- " Sidebar ",
- " Links
",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a3367417b2b2512acf",
- "title":
- "Change the Position of Overlapping Elements with the z-index Property",
- "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 z-index
property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the z-index
property of an element move it higher in the stack than those with lower values.",
- " ",
- "Add a z-index
property to the element with the class name of first
(the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle)."
- ],
- "tests": [
- {
- "text":
- "The element with class first
should have a z-index
value of 2.",
- "testString":
- "assert($('.first').css('z-index') == '2', 'The element with class first
should have a z-index
value of 2.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cM94aHk",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a3367417b2b2512ad0",
- "title": "Center an Element Horizontally Using the margin Property",
- "description": [
- "Another positioning technique is to center a block element horizontally. One way to do this is to set its margin
to a value of auto.",
- "This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the display
property to block.",
- " ",
- "Center the div
on the page by adding a margin
property with a value of auto."
- ],
- "tests": [
- {
- "text":
- "The div
should have a margin
set to auto.",
- "testString":
- "assert(code.match(/margin:\\s*?auto;/g), 'The div
should have a margin
set to auto.');"
- }
- ],
- "solutions": [
- "var code = \"div {background-color: blue; height: 100px; width: 100px; margin: auto;}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cyLJqU4",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a3367417b2b2512ad1",
- "title": "Learn about Complementary Colors",
- "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:",
- "red (#FF0000) and cyan (#00FFFF) green (#00FF00) and magenta (#FF00FF) blue (#0000FF) and yellow (#FFFF00) ",
- "This is different than the outdated RYB color model that many of us were taught in school, which has different primary and complementary colors. Modern color theory uses the additive RGB model (like on a computer screen) and the subtractive CMY(K) model (like in printing). Read here 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.",
- "Note For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.",
- " ",
- "Change the background-color
property of the blue
and yellow
classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background."
- ],
- "tests": [
- {
- "text":
- "The div
element with class blue
should have a background-color
of blue.",
- "testString":
- "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'The div
element with class blue
should have a background-color
of blue.');"
- },
- {
- "text":
- "The div
element with class yellow
should have a background-color
of yellow.",
- "testString":
- "assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'The div
element with class yellow
should have a background-color
of yellow.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c2MD3Tr",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a4367417b2b2512ad2",
- "title": "Learn about Tertiary Colors",
- "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:",
- "Color Hex Code orange #FF7D00 cyan #00FFFF raspberry #FF007D
",
- " ",
- "Change the background-color
property of the orange
, cyan
, and raspberry
classes to their respective colors. Make sure to use the hex codes as orange and raspberry are not browser-recognized color names."
- ],
- "tests": [
- {
- "text":
- "The div
element with class orange
should have a background-color
of orange.",
- "testString":
- "assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'The div
element with class orange
should have a background-color
of orange.');"
- },
- {
- "text":
- "The div
element with class cyan
should have a background-color
of cyan.",
- "testString":
- "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'The div
element with class cyan
should have a background-color
of cyan.');"
- },
- {
- "text":
- "The div
element with class raspberry
should have a background-color
of raspberry.",
- "testString":
- "assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'The div
element with class raspberry
should have a background-color
of raspberry.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c3bRDAb",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a4367417b2b2512ad3",
- "title": "Adjust the Color of Various Elements to Complementary Colors",
- "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.",
- " ",
- "This page will use a shade of teal (#09A7A1
) as the dominant color, and its orange (#FF790E
) complement to visually highlight the sign-up buttons. Change the background-color
of both the header
and footer
from black to the teal color. Then change the h2
text color
to teal as well. Finally, change the background-color
of the button
to the orange color."
- ],
- "tests": [
- {
- "text":
- "The header
element should have a background-color
of #09A7A1.",
- "testString":
- "assert($('header').css('background-color') == 'rgb(9, 167, 161)', 'The header
element should have a background-color
of #09A7A1.');"
- },
- {
- "text":
- "The footer
element should have a background-color
of #09A7A1.",
- "testString":
- "assert($('footer').css('background-color') == 'rgb(9, 167, 161)', 'The footer
element should have a background-color
of #09A7A1.');"
- },
- {
- "text":
- "The h2
element should have a color
of #09A7A1.",
- "testString":
- "assert($('h2').css('color') == 'rgb(9, 167, 161)', 'The h2
element should have a color
of #09A7A1.');"
- },
- {
- "text":
- "The button
element should have a background-color
of #FF790E.",
- "testString":
- "assert($('button').css('background-color') == 'rgb(255, 121, 14)', 'The button
element should have a background-color
of #FF790E.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cWmPpud",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- " Cooking with FCC! ",
- " ",
- "",
- " ",
- " Machine Learning in the Kitchen ",
- " 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 fetch Pringles
.
",
- " Sign Up ",
- " ",
- " ",
- " Bisection Vegetable Chopping ",
- " 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.
",
- " Sign Up ",
- " ",
- " ",
- " ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a4367417b2b2512ad4",
- "title": "Adjust the Hue of a Color",
- "description": [
- "Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the hsl()
property as an alternative way to pick a color by directly stating these characteristics.",
- "Hue is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl()
, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.",
- "Saturation is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.",
- "Lightness is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.",
- "Here are a few examples of using hsl()
with fully-saturated, normal lightness colors:",
- "Color HSL red hsl(0, 100%, 50%) yellow hsl(60, 100%, 50%) green hsl(120, 100%, 50%) cyan hsl(180, 100%, 50%) blue hsl(240, 100%, 50%) magenta hsl(300, 100%, 50%)
",
- " ",
- "Change the background-color
of each div
element based on the class names (green
, cyan
, or blue
) using hsl()
. All three should have full saturation and normal lightness."
- ],
- "tests": [
- {
- "text":
- "Your code should use the hsl()
property to declare the color green.",
- "testString":
- "assert(code.match(/\\.green\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the hsl()
property to declare the color green.');"
- },
- {
- "text":
- "Your code should use the hsl()
property to declare the color cyan.",
- "testString":
- "assert(code.match(/\\.cyan\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the hsl()
property to declare the color cyan.');"
- },
- {
- "text":
- "Your code should use the hsl()
property to declare the color blue.",
- "testString":
- "assert(code.match(/\\.blue\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the hsl()
property to declare the color blue.');"
- },
- {
- "text":
- "The div
element with class green
should have a background-color
of green.",
- "testString":
- "assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'The div
element with class green
should have a background-color
of green.');"
- },
- {
- "text":
- "The div
element with class cyan
should have a background-color
of cyan.",
- "testString":
- "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'The div
element with class cyan
should have a background-color
of cyan.');"
- },
- {
- "text":
- "The div
element with class blue
should have a background-color
of blue.",
- "testString":
- "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'The div
element with class blue
should have a background-color
of blue.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cPp38TZ",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a4367417b2b2512ad5",
- "title": "Adjust the Tone of a Color",
- "description": [
- "The hsl()
option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of hsl()
stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.",
- " ",
- "The navigation bar on this site currently inherits its background-color
from the header
element. Starting with that color as a base, add a background-color
to the nav
element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade."
- ],
- "tests": [
- {
- "text":
- "The nav
element should have a background-color
of the adjusted cyan tone using the hsl()
property.",
- "testString":
- "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180,\\s*?80%,\\s*?25%\\)/gi), 'The nav
element should have a background-color
of the adjusted cyan tone using the hsl()
property.');"
- }
- ],
- "solutions": [
- "var code = \"nav {background-color: hsl(180, 80%, 25%);}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cEDJvT7",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- "",
- " Cooking with FCC! ",
- " ",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a5367417b2b2512ad6",
- "title": "Create a Gradual CSS Linear Gradient",
- "description": [
- "Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the background
property's linear-gradient()
function. Here is the general syntax:",
- "background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
",
- "The first argument specifies the direction from which color transition starts - it can be stated as a degree, where 90deg makes a vertical gradient and 45deg is angled like a backslash. The following arguments specify the order of colors used in the gradient.",
- "Example:",
- "background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
",
- " ",
- "Use a linear-gradient()
for the div
element's background
, and set it from a direction of 35 degrees to change the color from #CCFFFF
to #FFCCCC
.",
- "Note While there are other ways to specify a color value, like rgb()
or hsl()
, use hex values for this challenge."
- ],
- "tests": [
- {
- "text":
- "The div
element should have a linear-gradient
background
with the specified direction and colors.",
- "testString":
- "assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?(#CCFFFF|#CFF),\\s*?(#FFCCCC|#FCC)\\);/gi), 'The div
element should have a linear-gradient
background
with the specified direction and colors.');"
- }
- ],
- "solutions": [
- "var code = \"
\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cg4dpt9",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a5367417b2b2512ad7",
- "title": "Use a CSS Linear Gradient to Create a Striped Element",
- "description": [
- "The repeating-linear-gradient()
function is very similar to linear-gradient()
with the major difference that it repeats the specified gradient pattern. repeating-linear-gradient()
accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge.",
- "The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.",
- "In the example demonstrated in the code editor, the gradient starts with the color yellow
at 0 pixels which blends into the second color blue
at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color green
, which itself blends into the fourth color value red
as that is 80 pixels away from the beginning of the gradient.",
- "For this example, it helps to think about the color stops as pairs where every two colors blend together.",
- "0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
",
- "If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.",
- " ",
- "Make stripes by changing the repeating-linear-gradient()
to use a gradient angle of 45deg
, then set the first two color stops to yellow
, and finally the second two color stops to black
."
- ],
- "tests": [
- {
- "text":
- "The angle of the repeating-linear-gradient()
should be 45deg.",
- "testString":
- "assert(code.match(/background:\\s*?repeating-linear-gradient\\(\\s*?45deg/gi), 'The angle of the repeating-linear-gradient()
should be 45deg.');"
- },
- {
- "text":
- "The angle of the repeating-linear-gradient()
should no longer be 90deg",
- "testString":
- "assert(!code.match(/90deg/gi), 'The angle of the repeating-linear-gradient()
should no longer be 90deg');"
- },
- {
- "text": "The color stop at 0 pixels should be yellow
.",
- "testString":
- "assert(code.match(/yellow\\s+?0(px)?/gi), 'The color stop at 0 pixels should be yellow
.');"
- },
- {
- "text": "One color stop at 40 pixels should be yellow
.",
- "testString":
- "assert(code.match(/yellow\\s+?40px/gi), 'One color stop at 40 pixels should be yellow
.');"
- },
- {
- "text":
- "The second color stop at 40 pixels should be black
.",
- "testString":
- "assert(code.match(/yellow\\s+?40px,\\s*?black\\s+?40px/gi), 'The second color stop at 40 pixels should be black
.');"
- },
- {
- "text":
- "The last color stop at 80 pixels should be black
.",
- "testString":
- "assert(code.match(/black\\s+?80px/gi), 'The last color stop at 80 pixels should be black
.');"
- }
- ],
- "solutions": [
- "var code = \"background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c6bmQh2",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a5367417b2b2512ad8",
- "title":
- "Create Texture by Adding a Subtle Pattern as a Background Image",
- "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 background
property supports the url()
function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.",
- " ",
- "Using the url of https://i.imgur.com/MJAkxbh.png
, set the background
of the whole page with the body
selector."
- ],
- "tests": [
- {
- "text":
- "Your body
element should have a background
property set to a url()
with the given link.",
- "testString":
- "assert(code.match(/background:\\s*?url\\(\\s*(\"|'|)https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png\\1\\s*\\)/gi), 'Your body
element should have a background
property set to a url()
with the given link.');"
- }
- ],
- "solutions": [
- "var code = \"body {background: url('https://i.imgur.com/MJAkxbh.png')}\""
- ],
- "hints": [
- "Remember to wrap the address in quotes within the url() function."
- ],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cQdwJC8",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [""],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a5367417b2b2512ad9",
- "title":
- "Use the CSS Transform scale Property to Change the Size of an Element",
- "description": [
- "To change the scale of an element, CSS has the transform
property, along with its scale()
function. The following code example doubles the size of all the paragraph elements on the page:",
- "p { transform:scale(2); } ",
- " ",
- "Increase the size of the element with the id of ball2
to 1.5 times its original size."
- ],
- "tests": [
- {
- "text":
- "Set the transform
property for #ball2
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 transform
property for #ball2
to scale it 1.5 times its size.');"
- }
- ],
- "solutions": [
- "var code = \"#ball2 {left: 65%; transform: scale(1.5);}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c2MZVSg",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a5367417b2b2512ada",
- "title":
- "Use the CSS Transform scale Property to Scale an Element on Hover",
- "description": [
- "The transform
property has a variety of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover
that specify a certain state of an element, the transform
property can easily add interactivity to your elements.",
- "Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:",
- "p:hover { transform: scale(2.1); } ",
- " ",
- "Add a CSS rule for the hover
state of the div
and use the transform
property to scale the div
element to 1.1 times its original size when a user hovers over it."
- ],
- "tests": [
- {
- "text":
- "The size of the div
element should scale 1.1 times when the user hovers over it.",
- "testString":
- "assert(code.match(/div:hover\\s*?{\\s*?transform:\\s*?scale\\(1\\.1\\);/gi), 'The size of the div
element should scale 1.1 times when the user hovers over it.');"
- }
- ],
- "solutions": ["var code = \"div:hover {transform: scale(1.1);}\""],
- "hints": [
- "Make sure to apply the CSS rule to the hover state of the div, using div:hover"
- ],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cyLPJuM",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a6367417b2b2512adb",
- "title":
- "Use the CSS Transform Property skewX to Skew an Element Along the X-Axis",
- "description": [
- "The next function of the transform
property is skewX()
, which skews the selected element along its X (horizontal) axis by a given degree.",
- "The following code skews the paragraph element by -32 degrees along the X-axis.",
- "p { transform: skewX(-32deg); } ",
- " ",
- "Skew the element with the id of bottom
by 24 degrees along the X-axis by using the transform
property."
- ],
- "tests": [
- {
- "text":
- "The element with id bottom
should be skewed by 24 degrees along its X-axis.",
- "testString":
- "assert(code.match(/#bottom\\s*?{\\s*?.*?\\s*?transform:\\s*?skewX\\(24deg\\);/g), 'The element with id bottom
should be skewed by 24 degrees along its X-axis.');"
- }
- ],
- "solutions": [
- "var code = \"#bottom {background-color: blue; transform: skewX(24deg);}\""
- ],
- "hints": [
- "Notice that there is no space between the number and \"deg\" (-32deg) when declaring the degrees value."
- ],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cyLP8Sr",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a6367417b2b2512adc",
- "title":
- "Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis",
- "description": [
- "Given that the skewX()
function skews the selected element along the X-axis by a given degree, it is no surprise that the skewY()
property skews an element along the Y (vertical) axis.",
- " ",
- "Skew the element with the id of top
-10 degrees along the Y-axis by using the transform
property."
- ],
- "tests": [
- {
- "text":
- "The element with id top
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 top
should be skewed by -10 degrees along its Y-axis.');"
- }
- ],
- "solutions": [
- "var code = \"#top {background-color: red; transform: skewY(-10deg);}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c2MZ2uB",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a6367417b2b2512add",
- "title": "Create a Graphic Using CSS",
- "description": [
- "By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the box-shadow
property that sets the shadow of an element, along with the border-radius
property that controls the roundness of the element's corners.",
- "You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.",
- "In order to create a round object, the border-radius
property should be set to a value of 50%.",
- "You may recall from an earlier challenge that the box-shadow
property takes values for offset-x
, offset-y
, blur-radius
, spread-radius
and a color value in that order. The blur-radius
and spread-radius
values are optional.",
- " ",
- "Manipulate the square element in the editor to create the moon shape. First, change the background-color
to transparent, then set the border-radius
property to 50% to make the circular shape. Finally, change the box-shadow
property to set the offset-x
to 25px, the offset-y
to 10px, blur-radius
to 0, spread-radius
to 0, and color to blue."
- ],
- "tests": [
- {
- "text":
- "The value of the background-color
property should be set to transparent
.",
- "testString":
- "assert(code.match(/background-color:\\s*?transparent;/gi), 'The value of the background-color
property should be set to transparent
.');"
- },
- {
- "text":
- "The value of the border-radius
property should be set to 50%
.",
- "testString":
- "assert(code.match(/border-radius:\\s*?50%;/gi), 'The value of the border-radius
property should be set to 50%
.');"
- },
- {
- "text":
- "The value of the box-shadow
property should be set to 25px for offset-x
, 10px for offset-y
, 0 for blur-radius
, 0 for spread-radius
, and finally blue for the color.",
- "testString":
- "assert(code.match(/box-shadow:\\s*?25px\\s+?10px\\s+?0(px)?\\s+?0(px)?\\s+?blue\\s*?;/gi), 'The value of the box-shadow
property should be set to 25px for offset-x
, 10px for offset-y
, 0 for blur-radius
, 0 for spread-radius
, and finally blue for the color.');"
- }
- ],
- "solutions": [
- "var code = \".center {background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0 blue;}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cEDWPs6",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a6367417b2b2512ade",
- "title": "Create a More Complex Shape Using CSS and HTML",
- "description": [
- "One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the ::before
and ::after
pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a ::before
pseudo-element is used to add a rectangle to an element with the class heart
:",
- ".heart::before { content: \"\"; background-color: yellow; border-radius: 25%; position: absolute; height: 50px; width: 70px; top: -50px; left: 5px; } ",
- "For the ::before
and ::after
pseudo-elements to function properly, they must have a defined content
property. This property is usually used to add things like a photo or text to the selected element. When the ::before
and ::after
pseudo-elements are used to make shapes, the content
property is still required, but it's set to an empty string.",
- "In the above example, the element with the class of heart
has a ::before
pseudo-element that produces a yellow rectangle with height
and width
of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the left
and 50px above the top
of the element.",
- " ",
- "Transform the element on the screen to a heart. In the heart::after
selector, change the background-color
to pink and the border-radius
to 50%.",
- "Next, target the element with the class heart
(just heart
) and fill in the transform
property. Use the rotate()
function with -45 degrees. (rotate()
works the same way that skewX()
and skewY()
do).",
- "Finally, in the heart::before
selector, set its content
property to an empty string."
- ],
- "tests": [
- {
- "text":
- "The background-color
property of the heart::after
selector should be pink.",
- "testString":
- "assert(code.match(/\\.heart::after\\s*?{\\s*?background-color\\s*?:\\s*?pink\\s*?;/gi), 'The background-color
property of the heart::after
selector should be pink.');"
- },
- {
- "text":
- "The border-radius
of the heart::after
selector should be 50%.",
- "testString":
- "assert(code.match(/border-radius\\s*?:\\s*?50%/gi).length == 2, 'The border-radius
of the heart::after
selector should be 50%.');"
- },
- {
- "text":
- "The transform
property for the heart
class should use a rotate()
function set to -45 degrees.",
- "testString":
- "assert(code.match(/transform\\s*?:\\s*?rotate\\(\\s*?-45deg\\s*?\\)/gi), 'The transform
property for the heart
class should use a rotate()
function set to -45 degrees.');"
- },
- {
- "text":
- "The content
of the heart::before
selector should be an empty string.",
- "testString":
- "assert(code.match(/\\.heart::before\\s*?{\\s*?content\\s*?:\\s*?(\"|')\\1\\s*?;/gi), 'The content
of the heart::before
selector should be an empty string.');"
- }
- ],
- "solutions": [
- "var code = \".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \\\"\\\"; border-radius: 50%;}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cPpz4fr",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a7367417b2b2512adf",
- "title": "Learn How the CSS @keyframes and animation Properties Work",
- "description": [
- "To animate an element, you need to know about the animation properties and the @keyframes
rule. The animation properties control how the animation should behave and the @keyframes
rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:",
- "animation-name
sets the name of the animation, which is later used by @keyframes
to tell CSS which rules go with which animations.",
- "animation-duration
sets the length of time for the animation.",
- "@keyframes
is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific \"frames\" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of @keyframes
and the animation properties:",
- "#anim { animation-name: colorful; animation-duration: 3s; } @keyframes colorful { 0% { background-color: blue; } 100% { background-color: yellow; } } ",
- "For the element with the anim
id, the code snippet above sets the animation-name
to colorful
and sets the animation-duration
to 3 seconds. Then the @keyframes
rule links to the animation properties with the name colorful
. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.",
- " ",
- "Create an animation for the element with the id rect
, by setting the animation-name
to rainbow and the animation-duration
to 4 seconds. Next, declare a @keyframes
rule, and set the background-color
at the beginning of the animation (0%
) to blue, the middle of the animation (50%
) to green, and the end of the animation (100%
) to yellow."
- ],
- "tests": [
- {
- "text":
- "The element with id of rect
should have an animation-name
property with a value of rainbow.",
- "testString":
- "assert($('#rect').css('animation-name') == 'rainbow', 'The element with id of rect
should have an animation-name
property with a value of rainbow.');"
- },
- {
- "text":
- "The element with id of rect
should have an animation-duration
property with a value of 4s.",
- "testString":
- "assert($('#rect').css('animation-duration') == '4s', 'The element with id of rect
should have an animation-duration
property with a value of 4s.');"
- },
- {
- "text":
- "The @keyframes
rule should use the animation-name
of rainbow.",
- "testString":
- "assert(code.match(/@keyframes\\s+?rainbow\\s*?{/g), 'The @keyframes
rule should use the animation-name
of rainbow.');"
- },
- {
- "text":
- "The @keyframes
rule for rainbow should use a background-color
of blue at 0%.",
- "testString":
- "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?}/gi), 'The @keyframes
rule for rainbow should use a background-color
of blue at 0%.');"
- },
- {
- "text":
- "The @keyframes
rule for rainbow should use a background-color
of green at 50%.",
- "testString":
- "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?}/gi), 'The @keyframes
rule for rainbow should use a background-color
of green at 50%.');"
- },
- {
- "text":
- "The @keyframes
rule for rainbow should use a background-color
of yellow at 100%.",
- "testString":
- "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?}/gi), 'The @keyframes
rule for rainbow should use a background-color
of yellow at 100%.');"
- }
- ],
- "solutions": [],
- "hints": ["Make sure the @keyframes rule links to the animation-name."],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cakprhv",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a7367417b2b2512ae0",
- "title": "Use CSS Animation to Change the Hover State of a Button",
- "description": [
- "You can use CSS @keyframes
to change the color of a button in its hover state.",
- "Here's an example of changing the width of an image on hover:",
- "<style> img:hover { animation-name: width; animation-duration: 500ms; } @keyframes width { 100% { width: 40px; } } </style> <img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" /> ",
- " ",
- "Note that ms
stands for milliseconds, where 1000ms is equal to 1s.",
- "Use CSS @keyframes
to change the background-color
of the button
element so it becomes #4791d0
when a user hovers over it. The @keyframes
rule should only have an entry for 100%
."
- ],
- "tests": [
- {
- "text":
- "The @keyframes rule should use the animation-name
background-color.",
- "testString":
- "assert(code.match(/@keyframes\\s+?background-color\\s*?{/g), 'The @keyframes rule should use the animation-name
background-color.');"
- },
- {
- "text":
- "There should be one rule under @keyframes
that changes the background-color
to #4791d0
at 100%.",
- "testString":
- "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?#4791d0;\\s*?}/gi), 'There should be one rule under @keyframes
that changes the background-color
to #4791d0
at 100%.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cg4vZAa",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- " ",
- "Register "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "58a7a6ebf9a6318348e2d5aa",
- "title": "Modify Fill Mode of an Animation",
- "description": [
- "That's great, but it doesn't work right yet. Notice how the animation resets after 500ms
has passed, causing the button to revert back to the original color. You want the button to stay highlighted.",
- "This can be done by setting the animation-fill-mode
property to forwards
. The animation-fill-mode
specifies the style applied to an element when the animation has finished. You can set it like so:",
- "animation-fill-mode: forwards;
",
- " ",
- "Set the animation-fill-mode
property of button:hover
to forwards
so the button stays highlighted when a user hovers over it."
- ],
- "tests": [
- {
- "text":
- "button:hover
should have a animation-fill-mode
property with a value of forwards
.",
- "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), 'button:hover
should have a animation-fill-mode
property with a value of forwards
.');"
- }
- ],
- "solutions": [
- "var code = \"button:hover {animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}\""
- ],
- "hints": [],
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cVJDmcE",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "Register "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a7367417b2b2512ae1",
- "title": "Create Movement Using CSS Animation",
- "description": [
- "When elements have a specified position
, such as fixed
or relative
, the CSS offset properties right
, left
, top
, and bottom
can be used in animation rules to create movement.",
- "As shown in the example below, you can push the item downwards then upwards by setting the top
property of the 50%
keyframe to 50px, but having it set to 0px for the first (0%
) and the last (100%
) keyframe.",
- "@keyframes rainbow { 0% { background-color: blue; top: 0px; } 50% { background-color: green; top: 50px; } 100% { background-color: yellow; top: 0px; } } ",
- " ",
- "Add a horizontal motion to the div
animation. Using the left
offset property, add to the @keyframes
rule so rainbow starts at 0 pixels at 0%
, moves to 25 pixels at 50%
, and ends at -25 pixels at 100%
. Don't replace the top
property in the editor - the animation should have both vertical and horizontal motion."
- ],
- "tests": [
- {
- "text":
- "The @keyframes
rule for 0%
should use the left
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 @keyframes
rule for 0%
should use the left
offset of 0px.');"
- },
- {
- "text":
- "The @keyframes
rule for 50%
should use the left
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 @keyframes
rule for 50%
should use the left
offset of 25px.');"
- },
- {
- "text":
- "The @keyframes
rule for 100%
should use the left
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 @keyframes
rule for 100%
should use the left
offset of -25px.');"
- }
- ],
- "solutions": [
- "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;}}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c7amZfW",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a7367417b2b2512ae2",
- "title":
- "Create Visual Direction by Fading an Element from Left to Right",
- "description": [
- "For this challenge, you'll change the opacity
of an animated element so it gradually fades as it reaches the right side of the screen.",
- "In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the @keyframes
rule.",
- " ",
- "Target the element with the id of ball
and add the opacity
property set to 0.1 at 50%
, so the element fades as it moves to the right."
- ],
- "tests": [
- {
- "text":
- "The keyframes
rule for fade should set the opacity
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 keyframes
rule for fade should set the opacity
property to 0.1 at 50%.');"
- }
- ],
- "solutions": [
- "var code = \"@keyframes fade {50% { left: 60%; opacity: 0.1;}}\""
- ],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cGJqqAE",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a8367417b2b2512ae3",
- "title": "Animate Elements Continually Using an Infinite Animation Count",
- "description": [
- "The previous challenges covered how to use some of the animation properties and the @keyframes
rule. Another animation property is the animation-iteration-count
, which allows you to control how many times you would like to loop through the animation. Here's an example:",
- "animation-iteration-count: 3;
",
- "In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.",
- " ",
- "To keep the ball bouncing on the right on a continuous loop, change the animation-iteration-count
property to infinite."
- ],
- "tests": [
- {
- "text":
- "The animation-iteration-count
property should have a value of infinite.",
- "testString":
- "assert($('#ball').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count
property should have a value of infinite.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cVJDVfq",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a8367417b2b2512ae4",
- "title": "Make a CSS Heartbeat using an Infinite Animation Count",
- "description": [
- "Here's one more continuous animation example with the animation-iteration-count
property that uses the heart you designed in a previous challenge.",
- "The one-second long heartbeat animation consists of two animated pieces. The heart
elements (including the :before
and :after
pieces) are animated to change size using the transform
property, and the background div
is animated to change its color using the background
property.",
- " ",
- "Keep the heart beating by adding the animation-iteration-count
property for both the back
class and the heart
class and setting the value to infinite. The heart:before
and heart:after
selectors do not need any animation properties."
- ],
- "tests": [
- {
- "text":
- "The animation-iteration-count
property for the heart
class should have a value of infinite.",
- "testString":
- "assert($('.heart').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count
property for the heart
class should have a value of infinite.');"
- },
- {
- "text":
- "The animation-iteration-count
property for the back
class should have a value of infinite.",
- "testString":
- "assert($('.back').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count
property for the back
class should have a value of infinite.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cDZpDUr",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a8367417b2b2512ae5",
- "title": "Animate Elements at Variable Rates",
- "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 animation-iteration-count
property and setting @keyframes
rules.",
- "To illustrate, the animation on the right consists of two \"stars\" that each decrease in size and opacity at the 20% mark in the @keyframes
rule, which creates the twinkle animation. You can change the @keyframes
rule for one of the elements so the stars twinkle at different rates.",
- " ",
- "Alter the animation rate for the element with the class name of star-1
by changing its @keyframes
rule to 50%."
- ],
- "tests": [
- {
- "text":
- "The @keyframes
rule for the star-1
class should be 50%.",
- "testString":
- "assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'The @keyframes
rule for the star-1
class should be 50%.');"
- }
- ],
- "solutions": [
- "var code = \"@keyframes twinkle-1 {50% {transform: scale(0.5); opacity: 0.5;}}\""
- ],
- "hints": [
- "Check the animation-name declared in the star-1 class to find the right @keyframes rule to change."
- ],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cZ89WA4",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a8367417b2b2512ae6",
- "title": "Animate Multiple Elements at Variable Rates",
- "description": [
- "In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes
rules. You can achieve the same goal by manipulating the animation-duration
of multiple elements.",
- "In the animation running in the code editor, there are three \"stars\" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the animation-duration
property to different values for each element.",
- " ",
- "Set the animation-duration
of the elements with the classes star-1
, star-2
, and star-3
to 1s, 0.9s, and 1.1s, respectively."
- ],
- "tests": [
- {
- "text":
- "The animation-duration
property for the star with class star-1
should remain at 1s.",
- "testString":
- "assert($('.star-1').css('animation-duration') == '1s', 'The animation-duration
property for the star with class star-1
should remain at 1s.');"
- },
- {
- "text":
- "The animation-duration
property for the star with class star-2
should be 0.9s.",
- "testString":
- "assert($('.star-2').css('animation-duration') == '0.9s', 'The animation-duration
property for the star with class star-2
should be 0.9s.');"
- },
- {
- "text":
- "The animation-duration
property for the star with class star-3
should be 1.1s.",
- "testString":
- "assert($('.star-3').css('animation-duration') == '1.1s', 'The animation-duration
property for the star with class star-3
should be 1.1s.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cnpWZc9",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a8367417b2b2512ae7",
- "title": "Change Animation Timing with Keywords",
- "description": [
- "In CSS animations, the animation-timing-function
property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your animation-duration
), the animation-timing-function
says how the car accelerates and decelerates over the course of the drive.",
- "There are a number of predefined keywords available for popular options. For example, the default value is ease
, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include ease-out
, which is quick in the beginning then slows down, ease-in
, which is slow in the beginning, then speeds up at the end, or linear
, which applies a constant animation speed throughout.",
- " ",
- "For the elements with id of ball1
and ball2
, add an animation-timing-function
property to each, and set #ball1
to linear
, and #ball2
to ease-out
. Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration
of 2 seconds."
- ],
- "tests": [
- {
- "text":
- "The value of the animation-timing-function
property for the element with the id ball1
should be linear.",
- "testString":
- "assert($('#ball1').css('animation-timing-function') == 'linear', 'The value of the animation-timing-function
property for the element with the id ball1
should be linear.');"
- },
- {
- "text":
- "The value of the animation-timing-function
property for the element with the id ball2
should be ease-out.",
- "testString":
- "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the animation-timing-function
property for the element with the id ball2
should be ease-out.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cJKvwCM",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a9367417b2b2512ae8",
- "title": "Learn How Bezier Curves Work",
- "description": [
- "The last challenge introduced the animation-timing-function
property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.",
- "In CSS animations, Bezier curves are used with the cubic-bezier
function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.",
- "The cubic-bezier
function consists of four main points that sit on this 1 by 1 grid: p0
, p1
, p2
, and p3
. p0
and p3
are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the p1
and p2
\"anchor\" points in the form: (x1, y1, x2, y2)
. Pulling it all together, here's an example of a Bezier curve in CSS code:",
- "animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
",
- "In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the linear
keyword. In other words, it changes at a constant speed.",
- " ",
- "For the element with the id of ball1
, change the value of the animation-timing-function
property from linear
to its equivalent cubic-bezier
function value. Use the point values given in the example above."
- ],
- "tests": [
- {
- "text":
- "The value of the animation-timing-function
property for the element with the id ball1
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 animation-timing-function
property for the element with the id ball1
should be the linear-equivalent cubic-bezier function.');"
- },
- {
- "text":
- "The value of the animation-timing-function
property for the element with the id ball2
should not change.",
- "testString":
- "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the animation-timing-function
property for the element with the id ball2
should not change.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c9bDrs8",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a9367417b2b2512ae9",
- "title": "Use a Bezier Curve to Move a Graphic",
- "description": [
- "A previous challenge discussed the ease-out
keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the ease-out
keyword (for the blue element) and linear
keyword (for the red element) is demonstrated. Similar animation progressions to the ease-out
keyword can be achieved by using a custom cubic Bezier curve function.",
- "In general, changing the p1
and p2
anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:",
- "animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
",
- "Remember that all cubic-bezier
functions start with p0
at (0, 0) and end with p3
at (1, 1). In this example, the curve moves faster through the Y-axis (starts at 0, goes to p1
y value of 0, then goes to p2
y value of 1) than it moves through the X-axis (0 to start, then 0 for p1
, up to 0.58 for p2
). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.",
- " ",
- "To see the effect of this Bezier curve in action, change the animation-timing-function
of the element with id of red
to a cubic-bezier
function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly."
- ],
- "tests": [
- {
- "text":
- "The value of the animation-timing-function
property of the element with the id red
should be a cubic-bezier
function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .",
- "testString":
- "assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'The value of the animation-timing-function
property of the element with the id red
should be a cubic-bezier
function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .');"
- },
- {
- "text":
- "The element with the id red
should no longer have the animation-timing-function
property of linear.",
- "testString":
- "assert($('#red').css('animation-timing-function') !== 'linear', 'The element with the id red
should no longer have the animation-timing-function
property of linear.');"
- },
- {
- "text":
- "The value of the animation-timing-function
property for the element with the id blue
should not change.",
- "testString":
- "assert($('#blue').css('animation-timing-function') == 'ease-out', 'The value of the animation-timing-function
property for the element with the id blue
should not change.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c6bnRCK",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "587d78a9367417b2b2512aea",
- "title": "Make Motion More Natural Using a Bezier Curve",
- "description": [
- "This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the linear
and ease-out
cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this.",
- "The animation-timing-function
automatically loops at every keyframe when the animation-iteration-count
is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at 50%
), it results in two identical animation progressions at the upward and downward movement of the ball.",
- "The following cubic Bezier curve simulates a juggling movement:",
- "cubic-bezier(0.3, 0.4, 0.5, 1.6);
",
- "Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on 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.",
- " ",
- "Change value of the animation-timing-function
of the element with the id of green
to a cubic-bezier
function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649."
- ],
- "tests": [
- {
- "text":
- "The value of the animation-timing-function
property for the element with the id green
should be a cubic-bezier
function with x1, y1, x2, y2 values as specified.",
- "testString":
- "assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'The value of the animation-timing-function
property for the element with the id green
should be a cubic-bezier
function with x1, y1, x2, y2 values as specified.');"
- }
- ],
- "solutions": [],
- "hints": [],
- "releasedOn": "Feb 17, 2017",
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/c7akWUv",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "
",
- "
",
- "
"
- ],
- "head": [],
- "tail": []
- }
- }
- }
- ]
-}
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.en.md
deleted file mode 100644
index 5bd258c237..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.en.md
+++ /dev/null
@@ -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
-
-The box-shadow
property applies one or more shadows to an element.
-The box-shadow
property takes values for offset-x
(how far to push the shadow horizontally from the element), offset-y
(how far to push the shadow vertically from the element), blur-radius
, spread-radius
and a color value, in that order. The blur-radius
and spread-radius
values are optional.
-Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:
-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-
-
-## Instructions
-
-The element now has an id of thumbnail
. With this selector, use the example CSS values above to place a box-shadow
on the card.
-
-
-## Tests
-
-
-```yml
-- text: Your code should add a box-shadow
property for the thumbnail
id.
- testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), ''Your code should add a box-shadow
property for the thumbnail
id.'');'
-- text: You should use the given CSS for the box-shadow
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 box-shadow
value.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Alphabet
-
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
-
-
-
-
-```
-
-
-
-
-
-
-
-## 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);}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.en.md
deleted file mode 100644
index 7dfbc83fa9..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.en.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-id: 587d781b367417b2b2512abc
-title: Adjust the background-color Property of Text
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cEDqwA6'
----
-
-## Description
-
-Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a background-color
to the element holding the text you want to emphasize. This challenge uses rgba()
instead of hex
codes or normal rgb()
.
-rgba stands for: r = red g = green b = blue a = alpha/level of opacity
-The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. rgba()
is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.
-You'll use background-color: rgba(45, 45, 45, 0.1)
for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.
-
-
-## Instructions
-
-To make the text stand out more, adjust the background-color
of the h4
element to the given rgba()
value.
-Also for the h4
, remove the height
property and add padding
of 10px.
-
-
-## Tests
-
-
-```yml
-- text: 'Your code should add a background-color
property to the h4
element set to rgba(45, 45, 45, 0.1)
.'
- 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 background-color
property to the h4
element set to rgba(45, 45, 45, 0.1)
.'');'
-- text: Your code should add a padding
property to the h4
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 padding
property to the h4
element and set it to 10 pixels.'');'
-- text: The height
property on the h4
element should be removed.
- testString: 'assert(!($(''h4'').css(''height'') == ''25px''), ''The height
property on the h4
element should be removed.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Alphabet
-
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.en.md
deleted file mode 100644
index 3dd34afbbf..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.en.md
+++ /dev/null
@@ -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
-
-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.
-
-
-## Instructions
-
-This page will use a shade of teal (#09A7A1
) as the dominant color, and its orange (#FF790E
) complement to visually highlight the sign-up buttons. Change the background-color
of both the header
and footer
from black to the teal color. Then change the h2
text color
to teal as well. Finally, change the background-color
of the button
to the orange color.
-
-
-## Tests
-
-
-```yml
-- text: 'The header
element should have a background-color
of #09A7A1.'
- testString: 'assert($(''header'').css(''background-color'') == ''rgb(9, 167, 161)'', ''The header
element should have a background-color
of #09A7A1.'');'
-- text: 'The footer
element should have a background-color
of #09A7A1.'
- testString: 'assert($(''footer'').css(''background-color'') == ''rgb(9, 167, 161)'', ''The footer
element should have a background-color
of #09A7A1.'');'
-- text: 'The h2
element should have a color
of #09A7A1.'
- testString: 'assert($(''h2'').css(''color'') == ''rgb(9, 167, 161)'', ''The h2
element should have a color
of #09A7A1.'');'
-- text: 'The button
element should have a background-color
of #FF790E.'
- testString: 'assert($(''button'').css(''background-color'') == ''rgb(255, 121, 14)'', ''The button
element should have a background-color
of #FF790E.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
- Machine Learning in the Kitchen
- 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 fetch Pringles
.
- Sign Up
-
-
- Bisection Vegetable Chopping
- 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.
- Sign Up
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.en.md
deleted file mode 100644
index cf91723799..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.en.md
+++ /dev/null
@@ -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
-
-You can specify the height of an element using the height
property in CSS, similar to the width
property. Here's an example that changes the height of an image to 20px:
-img { height: 20px; }
-
-
-## Instructions
-
-Add a height
property to the h4
tag and set it to 25px.
-
-
-## Tests
-
-
-```yml
-- text: Your code should change the h4
height
property to a value of 25 pixels.
- testString: 'assert($(''h4'').css(''height'') == ''25px'', ''Your code should change the h4
height
property to a value of 25 pixels.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Google
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.en.md
deleted file mode 100644
index 4cab5d9e37..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.en.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-id: 587d781d367417b2b2512ac8
-title: Adjust the Hover State of an Anchor Tag
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cakRGcm'
----
-
-## 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 :hover
pseudo-class selector. Here's the CSS to change the color
of the anchor tag to red during its hover state:
-a:hover { color: red; }
-
-
-## Instructions
-
-The code editor has a CSS rule to style all a
tags black. Add a rule so that when the user hovers over the a
tag, the color
is blue.
-
-
-## Tests
-
-
-```yml
-- text: 'The anchor tag color
should remain black, only add CSS rules for the :hover
state.'
- testString: 'assert($(''a'').css(''color'') == ''rgb(0, 0, 0)'', ''The anchor tag color
should remain black, only add CSS rules for the :hover
state.'');'
-- text: The anchor tag should have a color
of blue on hover.
- testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), ''The anchor tag should have a color
of blue on hover.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.en.md
deleted file mode 100644
index 8100a027fb..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.en.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-id: 587d78a4367417b2b2512ad4
-title: Adjust the Hue of a Color
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cPp38TZ'
----
-
-## Description
-
-Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the hsl()
property as an alternative way to pick a color by directly stating these characteristics.
-Hue is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl()
, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.
-Saturation is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.
-Lightness is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.
-Here are a few examples of using hsl()
with fully-saturated, normal lightness colors:
-Color HSL red hsl(0, 100%, 50%) yellow hsl(60, 100%, 50%) green hsl(120, 100%, 50%) cyan hsl(180, 100%, 50%) blue hsl(240, 100%, 50%) magenta hsl(300, 100%, 50%)
-
-
-## Instructions
-
-Change the background-color
of each div
element based on the class names (green
, cyan
, or blue
) using hsl()
. All three should have full saturation and normal lightness.
-
-
-## Tests
-
-
-```yml
-- text: Your code should use the hsl()
property to declare the color green.
- testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the hsl()
property to declare the color green.'');'
-- text: Your code should use the hsl()
property to declare the color cyan.
- testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the hsl()
property to declare the color cyan.'');'
-- text: Your code should use the hsl()
property to declare the color blue.
- testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the hsl()
property to declare the color blue.'');'
-- text: The div
element with class green
should have a background-color
of green.
- testString: 'assert($(''.green'').css(''background-color'') == ''rgb(0, 255, 0)'', ''The div
element with class green
should have a background-color
of green.'');'
-- text: The div
element with class cyan
should have a background-color
of cyan.
- testString: 'assert($(''.cyan'').css(''background-color'') == ''rgb(0, 255, 255)'', ''The div
element with class cyan
should have a background-color
of cyan.'');'
-- text: The div
element with class blue
should have a background-color
of blue.
- testString: 'assert($(''.blue'').css(''background-color'') == ''rgb(0, 0, 255)'', ''The div
element with class blue
should have a background-color
of blue.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.en.md
deleted file mode 100644
index bae449fc8e..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.en.md
+++ /dev/null
@@ -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
-
-The font size of header tags (h1
through h6
) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the font-size
property to adjust the size of the text in an element.
-
-
-## Instructions
-
-To make the heading significantly larger than the paragraph, change the font-size
of the h4
tag to 27 pixels.
-
-
-## Tests
-
-
-```yml
-- text: Your code should add a font-size
property to the h4
element set to 27 pixels.
- testString: 'assert($(''h4'').css(''font-size'') == ''27px'', ''Your code should add a font-size
property to the h4
element set to 27 pixels.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Alphabet
-
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.en.md
deleted file mode 100644
index 7611961853..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.en.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-id: 587d78a4367417b2b2512ad5
-title: Adjust the Tone of a Color
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cEDJvT7'
----
-
-## Description
-
-The hsl()
option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of hsl()
stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.
-
-
-## Instructions
-
-The navigation bar on this site currently inherits its background-color
from the header
element. Starting with that color as a base, add a background-color
to the nav
element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade.
-
-
-## Tests
-
-
-```yml
-- text: The nav
element should have a background-color
of the adjusted cyan tone using the hsl()
property.
- testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), ''The nav
element should have a background-color
of the adjusted cyan tone using the hsl()
property.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
- Cooking with FCC!
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "nav {background-color: hsl(180, 80%, 25%);}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.en.md
deleted file mode 100644
index b5dcb6a860..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.en.md
+++ /dev/null
@@ -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
-
-You can specify the width of an element using the width
property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
-img { width: 220px; }
-
-
-## Instructions
-
-Add a width
property to the entire card and set it to an absolute value of 245px. Use the fullCard
class to select the element.
-
-
-## Tests
-
-
-```yml
-- text: Your code should change the width
property of the card to 245 pixels by using the fullCard
class selector.
- testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), ''Your code should change the width
property of the card to 245 pixels by using the fullCard
class selector.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Google
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = ".fullCard {\nwidth: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px;}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.en.md
deleted file mode 100644
index ad6c734ed3..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.en.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-id: 587d78a8367417b2b2512ae5
-title: Animate Elements at Variable Rates
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cZ89WA4'
----
-
-## 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 animation-iteration-count
property and setting @keyframes
rules.
-To illustrate, the animation on the right consists of two "stars" that each decrease in size and opacity at the 20% mark in the @keyframes
rule, which creates the twinkle animation. You can change the @keyframes
rule for one of the elements so the stars twinkle at different rates.
-
-
-## Instructions
-
-Alter the animation rate for the element with the class name of star-1
by changing its @keyframes
rule to 50%.
-
-
-## Tests
-
-
-```yml
-- text: The @keyframes
rule for the star-1
class should be 50%.
- testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), ''The @keyframes
rule for the star-1
class should be 50%.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "@keyframes twinkle-1 {50% {transform: scale(0.5); opacity: 0.5;}}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.en.md
deleted file mode 100644
index cf5d972995..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.en.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-id: 587d78a8367417b2b2512ae3
-title: Animate Elements Continually Using an Infinite Animation Count
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cVJDVfq'
----
-
-## Description
-
-The previous challenges covered how to use some of the animation properties and the @keyframes
rule. Another animation property is the animation-iteration-count
, which allows you to control how many times you would like to loop through the animation. Here's an example:
-animation-iteration-count: 3;
-In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.
-
-
-## Instructions
-
-To keep the ball bouncing on the right on a continuous loop, change the animation-iteration-count
property to infinite.
-
-
-## Tests
-
-
-```yml
-- text: The animation-iteration-count
property should have a value of infinite.
- testString: 'assert($(''#ball'').css(''animation-iteration-count'') == ''infinite'', ''The animation-iteration-count
property should have a value of infinite.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.en.md
deleted file mode 100644
index cbeaae1fa0..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.en.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-id: 587d78a8367417b2b2512ae6
-title: Animate Multiple Elements at Variable Rates
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cnpWZc9'
----
-
-## Description
-
-In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes
rules. You can achieve the same goal by manipulating the animation-duration
of multiple elements.
-In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the animation-duration
property to different values for each element.
-
-
-## Instructions
-
-Set the animation-duration
of the elements with the classes star-1
, star-2
, and star-3
to 1s, 0.9s, and 1.1s, respectively.
-
-
-## Tests
-
-
-```yml
-- text: The animation-duration
property for the star with class star-1
should remain at 1s.
- testString: 'assert($(''.star-1'').css(''animation-duration'') == ''1s'', ''The animation-duration
property for the star with class star-1
should remain at 1s.'');'
-- text: The animation-duration
property for the star with class star-2
should be 0.9s.
- testString: 'assert($(''.star-2'').css(''animation-duration'') == ''0.9s'', ''The animation-duration
property for the star with class star-2
should be 0.9s.'');'
-- text: The animation-duration
property for the star with class star-3
should be 1.1s.
- testString: 'assert($(''.star-3'').css(''animation-duration'') == ''1.1s'', ''The animation-duration
property for the star with class star-3
should be 1.1s.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.en.md
deleted file mode 100644
index aa9979280d..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.en.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-id: 587d78a3367417b2b2512ad0
-title: Center an Element Horizontally Using the margin Property
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cyLJqU4'
----
-
-## Description
-
-Another positioning technique is to center a block element horizontally. One way to do this is to set its margin
to a value of auto.
-This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the display
property to block.
-
-
-## Instructions
-
-Center the div
on the page by adding a margin
property with a value of auto.
-
-
-## Tests
-
-
-```yml
-- text: The div
should have a margin
set to auto.
- testString: 'assert(code.match(/margin:\s*?auto;/g), ''The div
should have a margin
set to auto.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-## Solution
-
-
-
-```js
-var code = "div {background-color: blue; height: 100px; width: 100px; margin: auto;}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.en.md
deleted file mode 100644
index 4dcdfeb60d..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.en.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-id: 587d781e367417b2b2512ac9
-title: Change an Element's Relative Position
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/czVmMtZ'
----
-
-## Description
-
-CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model
. 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 normal flow
of a document, but CSS offers the position property to override it.
-When the position of an element is set to relative
, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left
or right
, and top
or bottom
. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
-p { position: relative; bottom: 10px; }
-Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.
-Note Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
-
-
-## Instructions
-
-Change the position
of the h2
to relative
, and use a CSS offset to move it 15 pixels away from the top
of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements.
-
-
-## Tests
-
-
-```yml
-- text: The h2
element should have a position
property set to relative
.
- testString: 'assert($(''h2'').css(''position'') == ''relative'', ''The h2
element should have a position
property set to relative
.'');'
-- text: Your code should use a CSS offset to relatively position the h2
15px away from the top
of where it normally sits.
- testString: 'assert($(''h2'').css(''top'') == ''15px'', ''Your code should use a CSS offset to relatively position the h2
15px away from the top
of where it normally sits.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
On Being Well-Positioned
-
Move me!
-
I still think the h2 is where it normally sits.
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.en.md
deleted file mode 100644
index 4c9ddf38e7..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.en.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-id: 587d78a8367417b2b2512ae7
-title: Change Animation Timing with Keywords
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cJKvwCM'
----
-
-## Description
-
-In CSS animations, the animation-timing-function
property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your animation-duration
), the animation-timing-function
says how the car accelerates and decelerates over the course of the drive.
-There are a number of predefined keywords available for popular options. For example, the default value is ease
, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include ease-out
, which is quick in the beginning then slows down, ease-in
, which is slow in the beginning, then speeds up at the end, or linear
, which applies a constant animation speed throughout.
-
-
-## Instructions
-
-For the elements with id of ball1
and ball2
, add an animation-timing-function
property to each, and set #ball1
to linear
, and #ball2
to ease-out
. Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration
of 2 seconds.
-
-
-## Tests
-
-
-```yml
-- text: The value of the animation-timing-function
property for the element with the id ball1
should be linear.
- testString: 'assert($(''#ball1'').css(''animation-timing-function'') == ''linear'', ''The value of the animation-timing-function
property for the element with the id ball1
should be linear.'');'
-- text: The value of the animation-timing-function
property for the element with the id ball2
should be ease-out.
- testString: 'assert($(''#ball2'').css(''animation-timing-function'') == ''ease-out'', ''The value of the animation-timing-function
property for the element with the id ball2
should be ease-out.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.en.md
deleted file mode 100644
index 9b3fba6d18..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.en.md
+++ /dev/null
@@ -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
-
-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 z-index
property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the z-index
property of an element move it higher in the stack than those with lower values.
-
-
-## Instructions
-
-Add a z-index
property to the element with the class name of first
(the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle).
-
-
-## Tests
-
-
-```yml
-- text: The element with class first
should have a z-index
value of 2.
- testString: 'assert($(''.first'').css(''z-index'') == ''2'', ''The element with class first
should have a z-index
value of 2.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.en.md
deleted file mode 100644
index 2a94dfe1a6..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.en.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-id: 587d78a5367417b2b2512ad6
-title: Create a Gradual CSS Linear Gradient
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cg4dpt9'
----
-
-## Description
-
-Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the background
property's linear-gradient()
function. Here is the general syntax:
-background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
-The first argument specifies the direction from which color transition starts - it can be stated as a degree, where 90deg makes a vertical gradient and 45deg is angled like a backslash. The following arguments specify the order of colors used in the gradient.
-Example:
-background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
-
-
-## Instructions
-
-Use a linear-gradient()
for the div
element's background
, and set it from a direction of 35 degrees to change the color from #CCFFFF
to #FFCCCC
.
-Note While there are other ways to specify a color value, like rgb()
or hsl()
, use hex values for this challenge.
-
-
-## Tests
-
-
-```yml
-- text: The div
element should have a linear-gradient
background
with the specified direction and colors.
- testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), ''The div
element should have a linear-gradient
background
with the specified direction and colors.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "
"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.en.md
deleted file mode 100644
index a59a0c884f..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.en.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-id: 587d78a6367417b2b2512add
-title: Create a Graphic Using CSS
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cEDWPs6'
----
-
-## Description
-
-By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the box-shadow
property that sets the shadow of an element, along with the border-radius
property that controls the roundness of the element's corners.
-You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.
-In order to create a round object, the border-radius
property should be set to a value of 50%.
-You may recall from an earlier challenge that the box-shadow
property takes values for offset-x
, offset-y
, blur-radius
, spread-radius
and a color value in that order. The blur-radius
and spread-radius
values are optional.
-
-
-## Instructions
-
-Manipulate the square element in the editor to create the moon shape. First, change the background-color
to transparent, then set the border-radius
property to 50% to make the circular shape. Finally, change the box-shadow
property to set the offset-x
to 25px, the offset-y
to 10px, blur-radius
to 0, spread-radius
to 0, and color to blue.
-
-
-## Tests
-
-
-```yml
-- text: The value of the background-color
property should be set to transparent
.
- testString: 'assert(code.match(/background-color:\s*?transparent;/gi), ''The value of the background-color
property should be set to transparent
.'');'
-- text: The value of the border-radius
property should be set to 50%
.
- testString: 'assert(code.match(/border-radius:\s*?50%;/gi), ''The value of the border-radius
property should be set to 50%
.'');'
-- text: 'The value of the box-shadow
property should be set to 25px for offset-x
, 10px for offset-y
, 0 for blur-radius
, 0 for spread-radius
, and finally blue for the color.'
- testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), ''The value of the box-shadow
property should be set to 25px for offset-x
, 10px for offset-y
, 0 for blur-radius
, 0 for spread-radius
, and finally blue for the color.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-## Solution
-
-
-
-```js
-var code = ".center {background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0 blue;}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.en.md
deleted file mode 100644
index 841e19a575..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.en.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-id: 587d781b367417b2b2512abb
-title: Create a Horizontal Line Using the hr Element
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c3bR8t7'
----
-
-## Description
-
-You can use the hr
tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.
-
-
-## Instructions
-
-Add an hr
tag underneath the h4
which contains the card title.
-Note In HTML, hr
is a self-closing tag, and therefore doesn't need a separate closing tag.
-
-
-## Tests
-
-
-```yml
-- text: Your code should add an hr
tag to the markup.
- testString: 'assert($(''hr'').length == 1, ''Your code should add an hr
tag to the markup.'');'
-- text: The hr
tag should come between the title and the paragraph.
- testString: 'assert(code.match(/<\/h4>\s*? |\s*?\/>)\s*?/gi), ''The hr
tag should come between the title and the paragraph.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Google Alphabet
-
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.en.md
deleted file mode 100644
index 3f0538a801..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.en.md
+++ /dev/null
@@ -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
-
-One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the ::before
and ::after
pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a ::before
pseudo-element is used to add a rectangle to an element with the class heart
:
-.heart::before { content: ""; background-color: yellow; border-radius: 25%; position: absolute; height: 50px; width: 70px; top: -50px; left: 5px; }
-For the ::before
and ::after
pseudo-elements to function properly, they must have a defined content
property. This property is usually used to add things like a photo or text to the selected element. When the ::before
and ::after
pseudo-elements are used to make shapes, the content
property is still required, but it's set to an empty string.
-In the above example, the element with the class of heart
has a ::before
pseudo-element that produces a yellow rectangle with height
and width
of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the left
and 50px above the top
of the element.
-
-
-## Instructions
-
-Transform the element on the screen to a heart. In the heart::after
selector, change the background-color
to pink and the border-radius
to 50%.
-Next, target the element with the class heart
(just heart
) and fill in the transform
property. Use the rotate()
function with -45 degrees. (rotate()
works the same way that skewX()
and skewY()
do).
-Finally, in the heart::before
selector, set its content
property to an empty string.
-
-
-## Tests
-
-
-```yml
-- text: 'The background-color
property of the heart::after
selector should be pink.'
- testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), ''The background-color
property of the heart::after
selector should be pink.'');'
-- text: 'The border-radius
of the heart::after
selector should be 50%.'
- testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, ''The border-radius
of the heart::after
selector should be 50%.'');'
-- text: The transform
property for the heart
class should use a rotate()
function set to -45 degrees.
- testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), ''The transform
property for the heart
class should use a rotate()
function set to -45 degrees.'');'
-- text: 'The content
of the heart::before
selector should be an empty string.'
- testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|'')\1\s*?;/gi), ''The content
of the heart::before
selector should be an empty string.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-## Solution
-
-
-
-```js
-var code = ".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \"\"; border-radius: 50%;}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.en.md
deleted file mode 100644
index b3d95b02a9..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.en.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-id: 587d78a7367417b2b2512ae1
-title: Create Movement Using CSS Animation
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c7amZfW'
----
-
-## Description
-
-When elements have a specified position
, such as fixed
or relative
, the CSS offset properties right
, left
, top
, and bottom
can be used in animation rules to create movement.
-As shown in the example below, you can push the item downwards then upwards by setting the top
property of the 50%
keyframe to 50px, but having it set to 0px for the first (0%
) and the last (100%
) keyframe.
-@keyframes rainbow { 0% { background-color: blue; top: 0px; } 50% { background-color: green; top: 50px; } 100% { background-color: yellow; top: 0px; } }
-
-
-## Instructions
-
-Add a horizontal motion to the div
animation. Using the left
offset property, add to the @keyframes
rule so rainbow starts at 0 pixels at 0%
, moves to 25 pixels at 50%
, and ends at -25 pixels at 100%
. Don't replace the top
property in the editor - the animation should have both vertical and horizontal motion.
-
-
-## Tests
-
-
-```yml
-- text: The @keyframes
rule for 0%
should use the left
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 @keyframes
rule for 0%
should use the left
offset of 0px.'');'
-- text: The @keyframes
rule for 50%
should use the left
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 @keyframes
rule for 50%
should use the left
offset of 25px.'');'
-- text: The @keyframes
rule for 100%
should use the left
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 @keyframes
rule for 100%
should use the left
offset of -25px.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-```
-
-
-
-
-
-
-
-## 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;}}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.en.md
deleted file mode 100644
index 86dc4d40dc..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.en.md
+++ /dev/null
@@ -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
-
-One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The background
property supports the url()
function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.
-
-
-## Instructions
-
-Using the url of https://i.imgur.com/MJAkxbh.png
, set the background
of the whole page with the body
selector.
-
-
-## Tests
-
-
-```yml
-- text: Your body
element should have a background
property set to a url()
with the given link.
- testString: 'assert(code.match(/background:\s*?url\(\s*("|''|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), ''Your body
element should have a background
property set to a url()
with the given link.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "body {background: url('https://i.imgur.com/MJAkxbh.png')}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.en.md
deleted file mode 100644
index e7a2aa03f7..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.en.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-id: 587d7791367417b2b2512ab3
-title: Create Visual Balance Using the text-align Property
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c3b4EAp'
----
-
-## 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 text-align
property.
-text-align: justify;
causes all lines of text except the last line to meet the left and right edges of the line box.
-text-align: center;
centers the text
-text-align: right;
right-aligns the text
-And text-align: left;
(the default) left-aligns the text.
-
-
-## Instructions
-
-Align the h4
tag's text, which says "Google", to the center. Then justify the paragraph tag which contains information about how Google was founded.
-
-
-## Tests
-
-
-```yml
-- text: Your code should use the text-align property on the h4
tag to set it to center.
- testString: 'assert($(''h4'').css(''text-align'') == ''center'', ''Your code should use the text-align property on the h4
tag to set it to center.'');'
-- text: Your code should use the text-align property on the p
tag to set it to justify.
- testString: 'assert($(''p'').css(''text-align'') == ''justify'', ''Your code should use the text-align property on the p
tag to set it to justify.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Google
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.en.md
deleted file mode 100644
index e149e1d7c5..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.en.md
+++ /dev/null
@@ -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
-
-For this challenge, you'll change the opacity
of an animated element so it gradually fades as it reaches the right side of the screen.
-In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the @keyframes
rule.
-
-
-## Instructions
-
-Target the element with the id of ball
and add the opacity
property set to 0.1 at 50%
, so the element fades as it moves to the right.
-
-
-## Tests
-
-
-```yml
-- text: The keyframes
rule for fade should set the opacity
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 keyframes
rule for fade should set the opacity
property to 0.1 at 50%.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "@keyframes fade {50% { left: 60%; opacity: 0.1;}}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.en.md
deleted file mode 100644
index 1a5cbf6471..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.en.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-id: 587d781c367417b2b2512abf
-title: Decrease the Opacity of an Element
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c7aKqu4'
----
-
-## Description
-
-The opacity
property in CSS is used to adjust the opacity, or conversely, the transparency for an item.
-A value of 1 is opaque, which isn't transparent at all. A value of 0.5 is half see-through. A value of 0 is completely transparent.
-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.
-
-
-## Instructions
-
-Set the opacity
of the anchor tags to 0.7 using links
class to select them.
-
-
-## Tests
-
-
-```yml
-- text: Your code should set the opacity
property to 0.7 on the anchor tags by selecting the class of links
.
- testString: 'assert.approximately(parseFloat($(''.links'').css(''opacity'')), 0.7, 0.1, ''Your code should set the opacity
property to 0.7 on the anchor tags by selecting the class of links
.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Alphabet
-
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.en.md
deleted file mode 100644
index fdcf7a6a66..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.en.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-id: 587d78a3367417b2b2512ad1
-title: Learn about Complementary Colors
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c2MD3Tr'
----
-
-## 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:
-red (#FF0000) and cyan (#00FFFF) green (#00FF00) and magenta (#FF00FF) blue (#0000FF) and yellow (#FFFF00)
-This is different than the outdated RYB color model that many of us were taught in school, which has different primary and complementary colors. Modern color theory uses the additive RGB model (like on a computer screen) and the subtractive CMY(K) model (like in printing). Read here 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.
-Note For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
-
-
-## Instructions
-
-Change the background-color
property of the blue
and yellow
classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background.
-
-
-## Tests
-
-
-```yml
-- text: The div
element with class blue
should have a background-color
of blue.
- testString: 'assert($(''.blue'').css(''background-color'') == ''rgb(0, 0, 255)'', ''The div
element with class blue
should have a background-color
of blue.'');'
-- text: The div
element with class yellow
should have a background-color
of yellow.
- testString: 'assert($(''.yellow'').css(''background-color'') == ''rgb(255, 255, 0)'', ''The div
element with class yellow
should have a background-color
of yellow.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.en.md
deleted file mode 100644
index 832d8a0199..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.en.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-id: 587d78a4367417b2b2512ad2
-title: Learn about Tertiary Colors
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c3bRDAb'
----
-
-## 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:
-Color Hex Code orange #FF7D00 cyan #00FFFF raspberry #FF007D
-
-
-## Instructions
-
-Change the background-color
property of the orange
, cyan
, and raspberry
classes to their respective colors. Make sure to use the hex codes as orange and raspberry are not browser-recognized color names.
-
-
-## Tests
-
-
-```yml
-- text: The div
element with class orange
should have a background-color
of orange.
- testString: 'assert($(''.orange'').css(''background-color'') == ''rgb(255, 125, 0)'', ''The div
element with class orange
should have a background-color
of orange.'');'
-- text: The div
element with class cyan
should have a background-color
of cyan.
- testString: 'assert($(''.cyan'').css(''background-color'') == ''rgb(0, 255, 255)'', ''The div
element with class cyan
should have a background-color
of cyan.'');'
-- text: The div
element with class raspberry
should have a background-color
of raspberry.
- testString: 'assert($(''.raspberry'').css(''background-color'') == ''rgb(255, 0, 125)'', ''The div
element with class raspberry
should have a background-color
of raspberry.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.en.md
deleted file mode 100644
index 9ed30392e0..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.en.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-id: 587d78a9367417b2b2512ae8
-title: Learn How Bezier Curves Work
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c9bDrs8'
----
-
-## Description
-
-The last challenge introduced the animation-timing-function
property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.
-In CSS animations, Bezier curves are used with the cubic-bezier
function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.
-The cubic-bezier
function consists of four main points that sit on this 1 by 1 grid: p0
, p1
, p2
, and p3
. p0
and p3
are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the p1
and p2
"anchor" points in the form: (x1, y1, x2, y2)
. Pulling it all together, here's an example of a Bezier curve in CSS code:
-animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
-In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the linear
keyword. In other words, it changes at a constant speed.
-
-
-## Instructions
-
-For the element with the id of ball1
, change the value of the animation-timing-function
property from linear
to its equivalent cubic-bezier
function value. Use the point values given in the example above.
-
-
-## Tests
-
-
-```yml
-- text: The value of the animation-timing-function
property for the element with the id ball1
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 animation-timing-function
property for the element with the id ball1
should be the linear-equivalent cubic-bezier function.'');'
-- text: The value of the animation-timing-function
property for the element with the id ball2
should not change.
- testString: 'assert($(''#ball2'').css(''animation-timing-function'') == ''ease-out'', ''The value of the animation-timing-function
property for the element with the id ball2
should not change.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.en.md
deleted file mode 100644
index 830b4196f4..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.en.md
+++ /dev/null
@@ -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
-
-To animate an element, you need to know about the animation properties and the @keyframes
rule. The animation properties control how the animation should behave and the @keyframes
rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:
-animation-name
sets the name of the animation, which is later used by @keyframes
to tell CSS which rules go with which animations.
-animation-duration
sets the length of time for the animation.
-@keyframes
is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific "frames" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of @keyframes
and the animation properties:
-#anim { animation-name: colorful; animation-duration: 3s; } @keyframes colorful { 0% { background-color: blue; } 100% { background-color: yellow; } }
-For the element with the anim
id, the code snippet above sets the animation-name
to colorful
and sets the animation-duration
to 3 seconds. Then the @keyframes
rule links to the animation properties with the name colorful
. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.
-
-
-## Instructions
-
-Create an animation for the element with the id rect
, by setting the animation-name
to rainbow and the animation-duration
to 4 seconds. Next, declare a @keyframes
rule, and set the background-color
at the beginning of the animation (0%
) to blue, the middle of the animation (50%
) to green, and the end of the animation (100%
) to yellow.
-
-
-## Tests
-
-
-```yml
-- text: The element with id of rect
should have an animation-name
property with a value of rainbow.
- testString: 'assert($(''#rect'').css(''animation-name'') == ''rainbow'', ''The element with id of rect
should have an animation-name
property with a value of rainbow.'');'
-- text: The element with id of rect
should have an animation-duration
property with a value of 4s.
- testString: 'assert($(''#rect'').css(''animation-duration'') == ''4s'', ''The element with id of rect
should have an animation-duration
property with a value of 4s.'');'
-- text: The @keyframes
rule should use the animation-name
of rainbow.
- testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), ''The @keyframes
rule should use the animation-name
of rainbow.'');'
-- text: The @keyframes
rule for rainbow should use a background-color
of blue at 0%.
- testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), ''The @keyframes
rule for rainbow should use a background-color
of blue at 0%.'');'
-- text: The @keyframes
rule for rainbow should use a background-color
of green at 50%.
- testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), ''The @keyframes
rule for rainbow should use a background-color
of green at 50%.'');'
-- text: The @keyframes
rule for rainbow should use a background-color
of yellow at 100%.
- testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), ''The @keyframes
rule for rainbow should use a background-color
of yellow at 100%.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.en.md
deleted file mode 100644
index b251231adb..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.en.md
+++ /dev/null
@@ -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
-
-The next option for the CSS position
property is absolute
, which locks the element in place relative to its parent container. Unlike the relative
position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.
-One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;
), the browser will keep looking up the chain and ultimately default to the body tag.
-
-
-## Instructions
-
-Lock the #searchbar
element to the top-right of its section
parent by declaring its position
as absolute
. Give it top
and right
offsets of 50 pixels each.
-
-
-## Tests
-
-
-```yml
-- text: 'The #searchbar
element should have a position
set to absolute
.'
- testString: 'assert($(''#searchbar'').css(''position'') == ''absolute'', ''The #searchbar
element should have a position
set to absolute
.'');'
-- text: 'Your code should use the top
CSS offset of 50 pixels on the #searchbar
element.'
- testString: 'assert($(''#searchbar'').css(''top'') == ''50px'', ''Your code should use the top
CSS offset of 50 pixels on the #searchbar
element.'');'
-- text: 'Your code should use the right
CSS offset of 50 pixels on the #searchbar
element.'
- testString: 'assert($(''#searchbar'').css(''right'') == ''50px'', ''Your code should use the right
CSS offset of 50 pixels on the #searchbar
element.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
Welcome!
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.en.md
deleted file mode 100644
index af9686ea2f..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.en.md
+++ /dev/null
@@ -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
-
-The next layout scheme that CSS offers is the fixed
position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it is positioned, which may require some layout adjustments elsewhere.
-One key difference between the fixed
and absolute
positions is that an element with a fixed position won't move when the user scrolls.
-
-
-## Instructions
-
-The navigation bar in the code is labeled with an id of navbar
. Change its position
to fixed
, and offset it 0 pixels from the top
and 0 pixels from the left
. Notice the (lack of) impact to the h1
position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately.
-
-
-## Tests
-
-
-```yml
-- text: 'The #navbar
element should have a position
set to fixed
.'
- testString: 'assert($(''#navbar'').css(''position'') == ''fixed'', ''The #navbar
element should have a position
set to fixed
.'');'
-- text: 'Your code should use the top
CSS offset of 0 pixels on the #navbar
element.'
- testString: 'assert($(''#navbar'').css(''top'') == ''0px'', ''Your code should use the top
CSS offset of 0 pixels on the #navbar
element.'');'
-- text: 'Your code should use the left
CSS offset of 0 pixels on the #navbar
element.'
- testString: 'assert($(''#navbar'').css(''left'') == ''0px'', ''Your code should use the left
CSS offset of 0 pixels on the #navbar
element.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
I shift up when the #navbar is fixed to the browser window.
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.en.md
deleted file mode 100644
index b1c543a4fb..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.en.md
+++ /dev/null
@@ -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
-
-Here's one more continuous animation example with the animation-iteration-count
property that uses the heart you designed in a previous challenge.
-The one-second long heartbeat animation consists of two animated pieces. The heart
elements (including the :before
and :after
pieces) are animated to change size using the transform
property, and the background div
is animated to change its color using the background
property.
-
-
-## Instructions
-
-Keep the heart beating by adding the animation-iteration-count
property for both the back
class and the heart
class and setting the value to infinite. The heart:before
and heart:after
selectors do not need any animation properties.
-
-
-## Tests
-
-
-```yml
-- text: The animation-iteration-count
property for the heart
class should have a value of infinite.
- testString: 'assert($(''.heart'').css(''animation-iteration-count'') == ''infinite'', ''The animation-iteration-count
property for the heart
class should have a value of infinite.'');'
-- text: The animation-iteration-count
property for the back
class should have a value of infinite.
- testString: 'assert($(''.back'').css(''animation-iteration-count'') == ''infinite'', ''The animation-iteration-count
property for the back
class should have a value of infinite.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.en.md
deleted file mode 100644
index cd0667a699..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.en.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-id: 587d78a9367417b2b2512aea
-title: Make Motion More Natural Using a Bezier Curve
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c7akWUv'
----
-
-## Description
-
-This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the linear
and ease-out
cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this.
-The animation-timing-function
automatically loops at every keyframe when the animation-iteration-count
is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at 50%
), it results in two identical animation progressions at the upward and downward movement of the ball.
-The following cubic Bezier curve simulates a juggling movement:
-cubic-bezier(0.3, 0.4, 0.5, 1.6);
-Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on 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.
-
-
-## Instructions
-
-Change value of the animation-timing-function
of the element with the id of green
to a cubic-bezier
function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649.
-
-
-## Tests
-
-
-```yml
-- text: 'The value of the animation-timing-function
property for the element with the id green
should be a cubic-bezier
function with x1, y1, x2, y2 values as specified.'
- testString: 'assert($(''#green'').css(''animation-timing-function'') == ''cubic-bezier(0.311, 0.441, 0.444, 1.649)'', ''The value of the animation-timing-function
property for the element with the id green
should be a cubic-bezier
function with x1, y1, x2, y2 values as specified.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/meta.json b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/meta.json
deleted file mode 100644
index 716e22a1dc..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/meta.json
+++ /dev/null
@@ -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"
- ]
- ]
-}
\ No newline at end of file
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.en.md
deleted file mode 100644
index d95b9256b6..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.en.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: 58a7a6ebf9a6318348e2d5aa
-title: Modify Fill Mode of an Animation
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cVJDmcE'
----
-
-## Description
-
-That's great, but it doesn't work right yet. Notice how the animation resets after 500ms
has passed, causing the button to revert back to the original color. You want the button to stay highlighted.
-This can be done by setting the animation-fill-mode
property to forwards
. The animation-fill-mode
specifies the style applied to an element when the animation has finished. You can set it like so:
-animation-fill-mode: forwards;
-
-
-## Instructions
-
-Set the animation-fill-mode
property of button:hover
to forwards
so the button stays highlighted when a user hovers over it.
-
-
-## Tests
-
-
-```yml
-- text: 'button:hover
should have a animation-fill-mode
property with a value of forwards
.'
- 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), ''button:hover
should have a animation-fill-mode
property with a value of forwards
.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-Register
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "button:hover {animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.en.md
deleted file mode 100644
index 76fc9708a6..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.en.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-id: 587d781e367417b2b2512aca
-title: Move a Relatively Positioned Element with CSS Offsets
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c9bQEA4'
----
-
-## Description
-
-The CSS offsets of top
or bottom
, and left
or right
tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the h2
downwards. Likewise, using a left offset moves an item to the right.
-
-
-
-## Instructions
-
-Use CSS offsets to move the h2
15 pixels to the right and 10 pixels up.
-
-
-## Tests
-
-
-```yml
-- text: 'Your code should use a CSS offset to relatively position the h2
10px upwards. In other words, move it 10px away from the bottom
of where it normally sits.'
- testString: 'assert($(''h2'').css(''bottom'') == ''10px'', ''Your code should use a CSS offset to relatively position the h2
10px upwards. In other words, move it 10px away from the bottom
of where it normally sits.'');'
-- text: 'Your code should use a CSS offset to relatively position the h2
15px towards the right. In other words, move it 15px away from the left
of where it normally sits.'
- testString: 'assert($(''h2'').css(''left'') == ''15px'', ''Your code should use a CSS offset to relatively position the h2
15px towards the right. In other words, move it 15px away from the left
of where it normally sits.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
On Being Well-Positioned
-
Move me!
-
I still think the h2 is where it normally sits.
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.en.md
deleted file mode 100644
index 3db005f598..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.en.md
+++ /dev/null
@@ -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
-
-The next positioning tool does not actually use position
, but sets the float
property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left
or right
of their containing parent element. It's commonly used with the width
property to specify how much horizontal space the floated element requires.
-
-
-## Instructions
-
-The given markup would work well as a two-column layout, with the section
and aside
elements next to each other. Give the #left
item a float
of left
and the #right
item a float
of right
.
-
-
-## Tests
-
-
-```yml
-- text: The element with id left
should have a float
value of left
.
- testString: 'assert($(''#left'').css(''float'') == ''left'', ''The element with id left
should have a float
value of left
.'');'
-- text: The element with id right
should have a float
value of right
.
- testString: 'assert($(''#right'').css(''float'') == ''right'', ''The element with id right
should have a float
value of right
.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.en.md
deleted file mode 100644
index aa5e9e4622..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.en.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-id: 587d781c367417b2b2512ac2
-title: Set the font-size for Multiple Heading Elements
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cPpQNT3'
----
-
-## Description
-
-The font-size
property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all h1
through h6
tags to balance the heading sizes.
-
-
-## Instructions
-
-Set the font-size
of the h1
tag to 68px. Set the font-size
of the h2
tag to 52px. Set the font-size
of the h3
tag to 40px. Set the font-size
of the h4
tag to 32px. Set the font-size
of the h5
tag to 21px. Set the font-size
of the h6
tag to 14px.
-
-
-## Tests
-
-
-```yml
-- text: Your code should set the font-size
property for the h1
tag to 68 pixels.
- testString: 'assert($(''h1'').css(''font-size'') == ''68px'', ''Your code should set the font-size
property for the h1
tag to 68 pixels.'');'
-- text: Your code should set the font-size
property for the h2
tag to 52 pixels.
- testString: 'assert($(''h2'').css(''font-size'') == ''52px'', ''Your code should set the font-size
property for the h2
tag to 52 pixels.'');'
-- text: Your code should set the font-size
property for the h3
tag to 40 pixels.
- testString: 'assert($(''h3'').css(''font-size'') == ''40px'', ''Your code should set the font-size
property for the h3
tag to 40 pixels.'');'
-- text: Your code should set the font-size
property for the h4
tag to 32 pixels.
- testString: 'assert($(''h4'').css(''font-size'') == ''32px'', ''Your code should set the font-size
property for the h4
tag to 32 pixels.'');'
-- text: Your code should set the font-size
property for the h5
tag to 21 pixels.
- testString: 'assert($(''h5'').css(''font-size'') == ''21px'', ''Your code should set the font-size
property for the h5
tag to 21 pixels.'');'
-- text: Your code should set the font-size
property for the h6
tag to 14 pixels.
- testString: 'assert($(''h6'').css(''font-size'') == ''14px'', ''Your code should set the font-size
property for the h6
tag to 14 pixels.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
This is h1 text
-This is h2 text
-This is h3 text
-This is h4 text
-This is h5 text
-This is h6 text
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.en.md
deleted file mode 100644
index 00cbb6c433..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.en.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-id: 587d781c367417b2b2512ac4
-title: Set the font-size of Paragraph Text
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cVJ36Cr'
----
-
-## Description
-
-The font-size
property in CSS is not limited to headings, it can be applied to any element containing text.
-
-
-## Instructions
-
-Change the value of the font-size
property for the paragraph to 16px to make it more visible.
-
-
-## Tests
-
-
-```yml
-- text: Your p
tag should have a font-size
of 16 pixels.
- testString: 'assert($(''p'').css(''font-size'') == ''16px'', ''Your p
tag should have a font-size
of 16 pixels.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
- 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.
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.en.md
deleted file mode 100644
index 15ff1712d8..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.en.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-id: 587d781c367417b2b2512ac3
-title: Set the font-weight for Multiple Heading Elements
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/crVWRHq'
----
-
-## Description
-
-You set the font-size
of each heading tag in the last challenge, here you'll adjust the font-weight
.
-The font-weight
property sets how thick or thin characters are in a section of text.
-
-
-## Instructions
-
-Set the font-weight
of the h1
tag to 800. Set the font-weight
of the h2
tag to 600. Set the font-weight
of the h3
tag to 500. Set the font-weight
of the h4
tag to 400. Set the font-weight
of the h5
tag to 300. Set the font-weight
of the h6
tag to 200.
-
-
-## Tests
-
-
-```yml
-- text: Your code should set the font-weight
property for the h1
tag to 800.
- testString: 'assert($(''h1'').css(''font-weight'') == ''800'', ''Your code should set the font-weight
property for the h1
tag to 800.'');'
-- text: Your code should set the font-weight
property for the h2
tag to 600.
- testString: 'assert($(''h2'').css(''font-weight'') == ''600'', ''Your code should set the font-weight
property for the h2
tag to 600.'');'
-- text: Your code should set the font-weight
property for the h3
tag to 500.
- testString: 'assert($(''h3'').css(''font-weight'') == ''500'', ''Your code should set the font-weight
property for the h3
tag to 500.'');'
-- text: Your code should set the font-weight
property for the h4
tag to 400.
- testString: 'assert($(''h4'').css(''font-weight'') == ''400'', ''Your code should set the font-weight
property for the h4
tag to 400.'');'
-- text: Your code should set the font-weight
property for the h5
tag to 300.
- testString: 'assert($(''h5'').css(''font-weight'') == ''300'', ''Your code should set the font-weight
property for the h5
tag to 300.'');'
-- text: Your code should set the font-weight
property for the h6
tag to 200.
- testString: 'assert($(''h6'').css(''font-weight'') == ''200'', ''Your code should set the font-weight
property for the h6
tag to 200.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
This is h1 text
-This is h2 text
-This is h3 text
-This is h4 text
-This is h5 text
-This is h6 text
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.en.md
deleted file mode 100644
index 9902835ca7..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.en.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-id: 587d781d367417b2b2512ac5
-title: Set the line-height of Paragraphs
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/crVWdcv'
----
-
-## Description
-
-CSS offers the line-height
property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.
-
-
-## Instructions
-
-Add a line-height
property to the p
tag and set it to 25px.
-
-
-## Tests
-
-
-```yml
-- text: Your code should set the line-height
of the p
tag to 25 pixels.
- testString: 'assert($(''p'').css(''line-height'') == ''25px'', ''Your code should set the line-height
of the p
tag to 25 pixels.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
- 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.
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.en.md
deleted file mode 100644
index 2ae61ea423..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.en.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-id: 587d78a9367417b2b2512ae9
-title: Use a Bezier Curve to Move a Graphic
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/c6bnRCK'
----
-
-## Description
-
-A previous challenge discussed the ease-out
keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the ease-out
keyword (for the blue element) and linear
keyword (for the red element) is demonstrated. Similar animation progressions to the ease-out
keyword can be achieved by using a custom cubic Bezier curve function.
-In general, changing the p1
and p2
anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:
-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-Remember that all cubic-bezier
functions start with p0
at (0, 0) and end with p3
at (1, 1). In this example, the curve moves faster through the Y-axis (starts at 0, goes to p1
y value of 0, then goes to p2
y value of 1) than it moves through the X-axis (0 to start, then 0 for p1
, up to 0.58 for p2
). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.
-
-
-## Instructions
-
-To see the effect of this Bezier curve in action, change the animation-timing-function
of the element with id of red
to a cubic-bezier
function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly.
-
-
-## Tests
-
-
-```yml
-- text: 'The value of the animation-timing-function
property of the element with the id red
should be a cubic-bezier
function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .'
- testString: 'assert($(''#red'').css(''animation-timing-function'') == ''cubic-bezier(0, 0, 0.58, 1)'', ''The value of the animation-timing-function
property of the element with the id red
should be a cubic-bezier
function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .'');'
-- text: The element with the id red
should no longer have the animation-timing-function
property of linear.
- testString: 'assert($(''#red'').css(''animation-timing-function'') !== ''linear'', ''The element with the id red
should no longer have the animation-timing-function
property of linear.'');'
-- text: The value of the animation-timing-function
property for the element with the id blue
should not change.
- testString: 'assert($(''#blue'').css(''animation-timing-function'') == ''ease-out'', ''The value of the animation-timing-function
property for the element with the id blue
should not change.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.en.md
deleted file mode 100644
index 237286f1c2..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.en.md
+++ /dev/null
@@ -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
-
-The repeating-linear-gradient()
function is very similar to linear-gradient()
with the major difference that it repeats the specified gradient pattern. repeating-linear-gradient()
accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge.
-The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.
-In the example demonstrated in the code editor, the gradient starts with the color yellow
at 0 pixels which blends into the second color blue
at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color green
, which itself blends into the fourth color value red
as that is 80 pixels away from the beginning of the gradient.
-For this example, it helps to think about the color stops as pairs where every two colors blend together.
-0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
-If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.
-
-
-## Instructions
-
-Make stripes by changing the repeating-linear-gradient()
to use a gradient angle of 45deg
, then set the first two color stops to yellow
, and finally the second two color stops to black
.
-
-
-## Tests
-
-
-```yml
-- text: The angle of the repeating-linear-gradient()
should be 45deg.
- testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), ''The angle of the repeating-linear-gradient()
should be 45deg.'');'
-- text: The angle of the repeating-linear-gradient()
should no longer be 90deg
- testString: 'assert(!code.match(/90deg/gi), ''The angle of the repeating-linear-gradient()
should no longer be 90deg'');'
-- text: The color stop at 0 pixels should be yellow
.
- testString: 'assert(code.match(/yellow\s+?0(px)?/gi), ''The color stop at 0 pixels should be yellow
.'');'
-- text: One color stop at 40 pixels should be yellow
.
- testString: 'assert(code.match(/yellow\s+?40px/gi), ''One color stop at 40 pixels should be yellow
.'');'
-- text: The second color stop at 40 pixels should be black
.
- testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), ''The second color stop at 40 pixels should be black
.'');'
-- text: The last color stop at 80 pixels should be black
.
- testString: 'assert(code.match(/black\s+?80px/gi), ''The last color stop at 80 pixels should be black
.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.en.md
deleted file mode 100644
index 6c022f145c..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.en.md
+++ /dev/null
@@ -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
-
-You can use CSS @keyframes
to change the color of a button in its hover state.
-Here's an example of changing the width of an image on hover:
-<style> img:hover { animation-name: width; animation-duration: 500ms; } @keyframes width { 100% { width: 40px; } } </style> <img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
-
-
-## Instructions
-
-Note that ms
stands for milliseconds, where 1000ms is equal to 1s.
-Use CSS @keyframes
to change the background-color
of the button
element so it becomes #4791d0
when a user hovers over it. The @keyframes
rule should only have an entry for 100%
.
-
-
-## Tests
-
-
-```yml
-- text: The @keyframes rule should use the animation-name
background-color.
- testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), ''The @keyframes rule should use the animation-name
background-color.'');'
-- text: 'There should be one rule under @keyframes
that changes the background-color
to #4791d0
at 100%.'
- testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), ''There should be one rule under @keyframes
that changes the background-color
to #4791d0
at 100%.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-Register
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.en.md
deleted file mode 100644
index f00fb3e816..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.en.md
+++ /dev/null
@@ -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
-
-The next function of the transform
property is skewX()
, which skews the selected element along its X (horizontal) axis by a given degree.
-The following code skews the paragraph element by -32 degrees along the X-axis.
-p { transform: skewX(-32deg); }
-
-
-## Instructions
-
-Skew the element with the id of bottom
by 24 degrees along the X-axis by using the transform
property.
-
-
-## Tests
-
-
-```yml
-- text: The element with id bottom
should be skewed by 24 degrees along its X-axis.
- testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), ''The element with id bottom
should be skewed by 24 degrees along its X-axis.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "#bottom {background-color: blue; transform: skewX(24deg);}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.en.md
deleted file mode 100644
index 0cabced3a6..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.en.md
+++ /dev/null
@@ -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
-
-Given that the skewX()
function skews the selected element along the X-axis by a given degree, it is no surprise that the skewY()
property skews an element along the Y (vertical) axis.
-
-
-## Instructions
-
-Skew the element with the id of top
-10 degrees along the Y-axis by using the transform
property.
-
-
-## Tests
-
-
-```yml
-- text: The element with id top
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 top
should be skewed by -10 degrees along its Y-axis.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "#top {background-color: red; transform: skewY(-10deg);}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.en.md
deleted file mode 100644
index 830fb6ae77..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.en.md
+++ /dev/null
@@ -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
-
-To change the scale of an element, CSS has the transform
property, along with its scale()
function. The following code example doubles the size of all the paragraph elements on the page:
-p { transform:scale(2); }
-
-
-## Instructions
-
-Increase the size of the element with the id of ball2
to 1.5 times its original size.
-
-
-## Tests
-
-
-```yml
-- text: 'Set the transform
property for #ball2
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 transform
property for #ball2
to scale it 1.5 times its size.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "#ball2 {left: 65%; transform: scale(1.5);}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.en.md
deleted file mode 100644
index 8ab60dec60..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.en.md
+++ /dev/null
@@ -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
-
-The transform
property has a variety of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover
that specify a certain state of an element, the transform
property can easily add interactivity to your elements.
-Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
-p:hover { transform: scale(2.1); }
-
-
-## Instructions
-
-Add a CSS rule for the hover
state of the div
and use the transform
property to scale the div
element to 1.1 times its original size when a user hovers over it.
-
-
-## Tests
-
-
-```yml
-- text: The size of the div
element should scale 1.1 times when the user hovers over it.
- testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), ''The size of the div
element should scale 1.1 times when the user hovers over it.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-
-```js
-var code = "div:hover {transform: scale(1.1);}"
-```
-
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.en.md
deleted file mode 100644
index d789f1822c..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.en.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-id: 587d781a367417b2b2512ab9
-title: Use the em Tag to Italicize Text
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cVJRBtp'
----
-
-## Description
-
-To emphasize text, you can use the em
tag. This displays text as italicized, as the browser applies the CSS of font-style: italic;
to the element.
-
-
-## Instructions
-
-Wrap an em
tag around the contents of the paragraph tag to give it emphasis.
-
-
-## Tests
-
-
-```yml
-- text: Your code should add an em
tag to the markup.
- testString: 'assert($(''em'').length == 1, ''Your code should add an em
tag to the markup.'');'
-- text: The em
tag should wrap around the contents of the p
tag but not the p
tag itself.
- testString: 'assert($(''p'').children().length == 1 && $(''em'').children().length == 2, ''The em
tag should wrap around the contents of the p
tag but not the p
tag itself.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Google
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.en.md
deleted file mode 100644
index abcff6c395..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.en.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-id: 587d781b367417b2b2512aba
-title: Use the s Tag to Strikethrough Text
-challengeType: 0
-videoUrl: ''
----
-
-## Description
-
-To strikethrough text, which is when a horizontal line cuts across the characters, you can use the s
tag. It shows that a section of text is no longer valid. With the s
tag, the browser applies the CSS of text-decoration: line-through;
to the element.
-
-
-## Instructions
-
-Wrap the s
tag around "Google" inside the h4
tag and then add the word Alphabet beside it, which should not have the strikethrough formatting.
-
-
-## Tests
-
-
-```yml
-- text: Your code should add one s
tag to the markup.
- testString: 'assert($(''s'').length == 1, ''Your code should add one s
tag to the markup.'');'
-- text: A s
tag should wrap around the Google text in the h4
tag. It should not contain the word Alphabet.
- testString: 'assert($(''s'').text().match(/Google/gi) && !$(''s'').text().match(/Alphabet/gi), ''A s
tag should wrap around the Google text in the h4
tag. It should not contain the word Alphabet.'');'
-- text: 'Include the word Alphabet in the h4
tag, without strikethrough formatting.'
- testString: 'assert($(''h4'').html().match(/Alphabet/gi), ''Include the word Alphabet in the h4
tag, without strikethrough formatting.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Google
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.en.md
deleted file mode 100644
index 28bb035f2e..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.en.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-id: 587d781a367417b2b2512ab7
-title: Use the strong Tag to Make Text Bold
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/ceJNBSb'
----
-
-## Description
-
-To make text bold, you can use the strong
tag. This is often used to draw attention to text and symbolize that it is important. With the strong
tag, the browser applies the CSS of font-weight: bold;
to the element.
-
-
-## Instructions
-
-Wrap a strong
tag around "Stanford University" inside the p
tag.
-
-
-## Tests
-
-
-```yml
-- text: Your code should add one strong
tag to the markup.
- testString: 'assert($(''strong'').length == 1, ''Your code should add one strong
tag to the markup.'');'
-- text: The strong
tag should be inside the p
tag.
- testString: 'assert($(''p'').children(''strong'').length == 1, ''The strong
tag should be inside the p
tag.'');'
-- text: The strong
tag should wrap around the words "Stanford University".
- testString: 'assert($(''strong'').text().match(/^Stanford University$/gi), ''The strong
tag should wrap around the words "Stanford University".'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Google
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.en.md
deleted file mode 100644
index 58f74cdd13..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.en.md
+++ /dev/null
@@ -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
-
-The text-transform
property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.
-The following table shows how the different text-transform
values change the example text "Transform me".
-Value Result lowercase
"transform me" uppercase
"TRANSFORM ME" capitalize
"Transform Me" initial
Use the default value inherit
Use the text-transform
value from the parent element none
Default: Use the original text
-
-
-## Instructions
-
-Transform the text of the h4
to be uppercase using the text-transform
property.
-
-
-## Tests
-
-
-```yml
-- text: The h4
text should be uppercase.
- testString: 'assert($(''h4'').css(''text-transform'') === ''uppercase'', ''The h4
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.'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Alphabet
-
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.en.md b/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.en.md
deleted file mode 100644
index 0e7fdb9254..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.en.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-id: 587d781a367417b2b2512ab8
-title: Use the u Tag to Underline Text
-challengeType: 0
-videoUrl: 'https://scrimba.com/c/cN6aQCL'
----
-
-## Description
-
-To underline text, you can use the u
tag. This is often used to signify that a section of text is important, or something to remember. With the u
tag, the browser applies the CSS of text-decoration: underline;
to the element.
-
-
-## Instructions
-
-Wrap the u
tag only around the text "Ph.D. students".
-Note Try to avoid using the u
tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
-
-
-## Tests
-
-
-```yml
-- text: Your code should add a u
tag to the markup.
- testString: 'assert($(''u'').length === 1, ''Your code should add a u
tag to the markup.'');'
-- text: The u
tag should wrap around the text "Ph.D. students".
- testString: 'assert($(''u'').text() === ''Ph.D. students'', ''The u
tag should wrap around the text "Ph.D. students".'');'
-
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
-
Google
-
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .
-
-
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/en/01-responsive-web-design/basic-css.json b/curriculum/challenges/en/01-responsive-web-design/basic-css.json
deleted file mode 100644
index 2a04c781b6..0000000000
--- a/curriculum/challenges/en/01-responsive-web-design/basic-css.json
+++ /dev/null
@@ -1,6104 +0,0 @@
-{
- "name": "Basic CSS",
- "order": 1,
- "time": "5 hours",
- "helpRoom": "Help",
- "challenges": [
- {
- "id": "bad87fee1348bd9aedf08803",
- "title": "Change the Color of Text",
- "description": [
- "Now let's change the color of some of our text.",
- "We can do this by changing the style
of your h2
element.",
- "The property that is responsible for the color of an element's text is the color
style property.",
- "Here's how you would set your h2
element's text color to blue:",
- "<h2 style=\"color: blue;\">CatPhotoApp</h2>
",
- "Note that it is a good practice to end inline style
declarations with a ;
.",
- " ",
- "Change your h2
element's style so that its text color is red."
- ],
- "tests": [
- {
- "text": "Your h2
element should be red.",
- "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2
element should be red.');"
- },
- {
- "text": "Your style
declaration should end with a ;
.",
- "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),' Your style
declaration should end with a ;
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "description": [
- "Lass uns jetzt die Farbe von unserem Text ändern.",
- "Wir können das bewerkstelligen, indem wir den style
des h2
Elements ändern.",
- "Der Style, der zuständig für die Textfarbe eines Elements ist, ist der \"color\" Style.",
- "So könntest du die Textfarbe des h2
Elements in Blau ändern:",
- "<h2 style=\"color: blue\">CatPhotoApp</h2>
",
- " ",
- "Ändere den Style des h2
Elements, damit die Textfarbe rot (\"red\") ist."
- ]
- },
- "fr": {
- "title": "Changer la couleur du texte",
- "description": [
- "Changeons maintenant la couleur de quelques-uns de nos textes.",
- "Nous pouvons le faire en changeant le style
de votre élément h2
.",
- "Le style responsable de la couleur de texte d'un élément est \"color\".",
- "Voici comment changer en bleu la couleur du texte de votre élément h2
:",
- "<h2 style=\"color: blue\">CatPhotoApp</h2>
",
- " ",
- "Changez le style de votre élément h2
pour que son texte soit de couleur rouge."
- ]
- },
- "pt-br": {
- "title": "Substitua a Cor do Texto",
- "description": [
- "Agora vamos substituir a cor de parte do nosso texto.",
- "Podemos fazer isso mudando o style
do elemento h2
.",
- "A propriedade de estilo responsável pela cor do texto se chama \"color\".",
- "Você pode mudar a cor do texto de seu elemento h2
para azul assim:",
- "<h2 style=\"color: blue\">CatPhotoApp</h2>
",
- " ",
- "Mude o estilo do elemento h2
para que seu texto fique com a cor vermelha."
- ]
- },
- "ru": {
- "title": "Измените цвет текста",
- "description": [
- "Теперь давайте изменим цвет части нашего текста.",
- "Мы можем сделать это изменив style
нашего элемента h2
.",
- "Параметр стиля, отвечающий за цвет текста внутри элемента - \"color\".",
- "Вот как вы могли бы установить цвет текста вашего элемента h2
синим:",
- "<h2 style=\"color: blue\">CatPhotoApp</h2>
",
- " ",
- "Измените стиль вашего элемента h2
таким образом, чтобы текст элемента стал красным."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cRkVmSm",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08805",
- "title": "Use CSS Selectors to Style Elements",
- "description": [
- "With CSS, there are hundreds of CSS properties
that you can use to change the way an element looks on your page.",
- "When you entered <h2 style=\"color: red\">CatPhotoApp</h2>
, you were styling that individual h2
element with inline CSS
, which stands for Cascading Style Sheets
.",
- "That's one way to specify the style of an element, but there's a better way to apply CSS
.",
- "At the top of your code, create a style
block like this:",
- "<style> </style> ",
- "Inside that style block, you can create a CSS selector
for all h2
elements. For example, if you wanted all h2
elements to be red, you would add a style rule that looks like this:",
- "<style> h2 {color: red;} </style> ",
- "Note that it's important to have both opening and closing curly braces ({
and }
) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.",
- " ",
- "Delete your h2
element's style attribute, and instead create a CSS style
block. Add the necessary CSS to turn all h2
elements blue."
- ],
- "tests": [
- {
- "text": "Remove the style attribute from your h2
element.",
- "testString": "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your h2
element.');"
- },
- {
- "text": "Create a style
element.",
- "testString": "assert($(\"style\") && $(\"style\").length > 1, 'Create a style
element.');"
- },
- {
- "text": "Your h2
element should be blue.",
- "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your h2
element should be blue.');"
- },
- {
- "text": "Ensure that your stylesheet h2
declaration is valid with a semicolon and closing brace.",
- "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet h2
declaration is valid with a semicolon and closing brace.');"
- },
- {
- "text": "Make sure all your style
elements are valid and have a closing tag.",
- "testString": "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aefe08806",
- "title": "Style Multiple Elements with a CSS Class",
- "description": [
- "Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your red-text
class to the first p
element."
- ],
- "tests": [
- {
- "text": "Your h2
element should be red.",
- "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2
element should be red.');"
- },
- {
- "text": "Your h2
element should have the class red-text
.",
- "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2
element should have the class red-text
.');"
- },
- {
- "text": "Your first p
element should be red.",
- "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your first p
element should be red.');"
- },
- {
- "text": "Your second and third p
elements should not be red.",
- "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'Your second and third p
elements should not be red.');"
- },
- {
- "text": "Your first p
element should have the class red-text
.",
- "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first p
element should have the class red-text
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "description": [
- "Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\"
innerhalb des öffnenden Tags schreibst.",
- "Vergiss nicht dass CSS Klassenselektoren einen Punkt am Anfang brauchen:",
- ".blue-text { color: blue; } ",
- "Aber Klassen-Deklarationen brauchen keinen Punkt:",
- "<h2 class=\"blue-text\">CatPhotoApp</h2>
",
- " ",
- "Füge die red-text
Klasse dem ersten p
Element hinzu."
- ]
- },
- "fr": {
- "title": "Stylez plusieurs éléments avec une classe CSS",
- "description": [
- "Souvenez-vous que vous pouvez ajouter des classes aux éléments HTML en utilisant class=\"votre-classe-ici\"
à l'intérieur de la balise ouvrante correspondante.",
- "Souvenez-vous que les sélecteurs CSS nécessitent un point au début comme ceci :",
- ".blue-text { color: blue; } ",
- "Rappelez-vous également que les déclarations de classes n'ont pas de point, comme ceci :",
- "<h2 class=\"blue-text\">CatPhotoApp</h2>
",
- " ",
- "Appliquez la classe red-text
à votre premier élément p
."
- ]
- },
- "pt-br": {
- "title": "Estilize Múltiplos Elementos com uma Classe CSS",
- "description": [
- "Lembre-se que é possível adicionar classes a elementos HTML ao utilizar class=\"sua-classe-aqui\"
dentro da tag de abertura do elemento.",
- "Relembre também que os seletores de classes CSS exigem um ponto em seu início, assim:",
- ".blue-text {
",
- " color: blue;
",
- "}
",
- "Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:",
- "<h2 class=\"blue-text\">CatPhotoApp<h2>
",
- " ",
- "Adicione a classe red-text
ao seu primeiro elemento p
."
- ]
- },
- "ru": {
- "title": "Стилизуйте множество элементов с помощью CSS-класса",
- "description": [
- "Помните, что вы можете присваивать классы HTML-элементам используя class=\"ваш-класс-тут\"
внутри открывающей метки соответствующего элемента.",
- "Помните, что селекторы CSS-классов должны начинаться с точки, например:",
- ".blue-text { color: blue; } ",
- "Но также не забывайте, что присваивание классов не использует точку, например:",
- "<h2 class=\"blue-text\">CatPhotoApp</h2>
",
- " ",
- "Примените класс red-text
к вашим элемент первые p
."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cRkVbsQ",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08806",
- "title": "Change the Font Size of an Element",
- "description": [
- "Font size is controlled by the font-size
CSS property, like this:",
- "h1 { font-size: 30px; } ",
- " ",
- "Inside the same <style>
tag that contains your red-text
class, create an entry for p
elements and set the font-size
to 16 pixels (16px
)."
- ],
- "tests": [
- {
- "text": "Between the style
tags, give the p
elements font-size
of 16px
. 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 style
tags, give the p
elements font-size
of 16px
. Browser and Text zoom should be at 100%.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "description": [
- "Schriftgröße wird von dem CSS Attribut font-size
kontrolliert:",
- "h1 { font-size: 30px; } ",
- " ",
- "Erstelle dann innerhalb deines <style>
Elements, das auch deine red-text
Klasse enthält, einen Eintrag für p
Elemente und setzte font-size
auf 16 Pixel (16px
)."
- ]
- },
- "fr": {
- "title": "Changez la taille de police d'un élément",
- "description": [
- "La taille de police est contrôlée par la propriété CSS font-size
, comme ceci :",
- "h1 { font-size: 30px; } ",
- " ",
- "À l'intérieur de la même balise <style>
qui contiens votre classe .red-text
, créez une nouvelle entrée pour les éléments p
et paramétrer le font-size
à 16 pixels (16px
)."
- ]
- },
- "pt-br": {
- "title": "Mude o Tamanho da Fonte de um Elemento",
- "description": [
- "O tamanho da fonte é controlado pela propriedade CSS \"font-size\", como aqui:",
- "h1 {
",
- " font-size: 30px;
",
- "}
",
- " ",
- "Dentro da mesma tag <style>
que criamos para sua classe red-text
, modifique o font-size
dos elementos p
para que tenha um tamanho de 16 pixels (16px
)."
- ]
- },
- "ru": {
- "title": "Измените размер шрифта элемента",
- "description": [
- "Размером шрифта управляют с помощтю CSS-своайства font-size
, например:",
- "h1 { font-size: 30px; } ",
- " ",
- "Внутри того же элемента <style>
, который содержит ваш класс red-text
, создайте вхождение для элементов p
и установите свойство font-size
равным 16 пикселей (16px
)."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/c3bvDc8",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aede08807",
- "title": "Set the Font Family of an Element",
- "description": [
- "You can set which font an element should use, by using the font-family
property.",
- "For example, if you wanted to set your h2
element's font to sans-serif
, you would use the following CSS:",
- "h2 { font-family: sans-serif; } ",
- " ",
- "Make all of your p
elements use the monospace
font."
- ],
- "tests": [
- {
- "text": "Your p
elements should use the font monospace
.",
- "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your p
elements should use the font monospace
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "description": [
- "Du kannst einem Element mit font-family
eine Schriftart zuweisen.",
- "Wenn du zum Beispiel deinem h2
Element die Schriftart sans-serif
zuweisen willst, kannst du das mit dem folgenden CSS tun:",
- "h2 { font-family: sans-serif; } ",
- " ",
- "Definiere für alle p
Elemente die Schriftart monospace
."
- ]
- },
- "fr": {
- "title": "Paramétrer la famille de police d'un élément",
- "description": [
- "Vous pouvez paramétrer la police d'un élément en utilisant la propriété font-family
.",
- "Par exemple, si vous voulez paramétrer la police de votre élément h2
à sans-serif
, vous devez utiliser le CSS suivant :",
- "h2 { font-family: sans-serif; } ",
- " ",
- "Faites en sorte que tous vos éléments p
aient la police monospace
."
- ]
- },
- "pt-br": {
- "title": "Defina a Fonte para um Elemento",
- "description": [
- "Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade font-family
.",
- "Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento h2
como sans-serif
, você poderá utilizar o seguinte código em CSS:",
- "h2 {
",
- " font-family: sans-serif;
",
- "}
",
- " ",
- "Faça com que todos os elementos p
utilizem o estilo de fonte monospace
."
- ]
- },
- "ru": {
- "title": "Установите семейство шрифтов для элемента",
- "description": [
- "Вы можете установить семейство шрифтов для элемента используя свойство font-family
.",
- "Например, если бы вы хотели установить семейство шрифтов sans-serif
для вашего элемента h2
, вы бы использовали следующий CSS:",
- "h2 { font-family: sans-serif; } ",
- " ",
- "Присвойте шрифт monospace
всем вашим элементам p
."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/c3bvpCg",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08807",
- "title": "Import a Google Font",
- "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.",
- "Google Fonts 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 Lobster
font. To do this, copy the following code snippet and paste it into the top of your code editor(before the opening style
element):",
- "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">
",
- "Now you can use the Lobster
font in your CSS by using Lobster
as the FAMILY_NAME as in the following example:font-family: FAMILY_NAME, GENERIC_NAME;
.",
- "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 \"Open Sans\"
font, but not to use the Lobster
font.",
- " ",
- "Create a font-family
CSS rule that uses the Lobster
font, and ensure that it will be applied to your h2
element."
- ],
- "tests": [
- {
- "text": "Import the Lobster
font.",
- "testString": "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'Import the Lobster
font.');"
- },
- {
- "text": "Your h2
element should use the font Lobster
.",
- "testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your h2
element should use the font Lobster
.');"
- },
- {
- "text": "Use an h2
CSS selector to change the font.",
- "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an h2
CSS selector to change the font.');"
- },
- {
- "text": "Your p
element should still use the font monospace
.",
- "testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your p
element should still use the font monospace
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "description": [
- "Lass uns jetzt eine Google Font importieren und verwenden. (Beachte dass du diese Challenge überspringen musst, falls Google in deinem Land blockiert wird)",
- "Zuerst musst du einen call
(Anfrage) an Google machen um um auf Lobster
zugreifen und in dein HMTL einbinden zu können.",
- "Kopiere den folgenden Code und füge diesen in deinen Editor oben ein:",
- "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">
",
- "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2
Element hinzufügen.",
- " ",
- "Füge dem h2
Element die Schriftart oder font-family
Lobster
hinzu."
- ]
- },
- "fr": {
- "title": "Importer une police de Google",
- "description": [
- "Maintenant, importons et appliquons une police de Google (prenez note que si Google est interdit d'accès dans votre pays, vous devrez omettre ce défi).",
- "Premièrement, vous devrez faire un appel
vers Google pour prendre la police Lobster
et la charger dans votre HTML.",
- "Copier l'extrait de code suivant et coller le dans le haut de votre éditeur de code :",
- "Maintenant vous pouvez paramétrer Lobster
comme valeur de police de votre élément h2
.",
- " ",
- "Appliquer la valeur Lobster
à la font-family
de votre élément h2
."
- ]
- },
- "pt-br": {
- "title": "Importe uma Fonte a Partir do Google Fonts",
- "description": [
- "Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.",
- "Primeiro, faça um chamado
ao Google Fonts para poder utilizar a fonte chamada Lobster
e carregá-la em seu HTML.",
- "Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:",
- "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">
",
- " ",
- "Agora, estableça Lobster
como o valor para font-family em seu elemento h2
."
- ]
- },
- "ru": {
- "title": "Импортируйте шрифт Google",
- "description": [
- "Теперь давайте импортируем и применим шрифт Google (обратите внимание, что если Google заблокирован в ваней стране, вам нужно будет пропустить это испытание).",
- "Сначала вам понадобится сделать запрос
к Google для получения шрифта Lobster
и загрузить его в ваш HTML.",
- "Скопируйте следующй кусок кода и вставьте его в самый верх вашего редактора кода:",
- "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">
",
- "Теперь вы можете установить шрифт Lobster
в качестве значения семейства шрифтов для вашего h2
.",
- " ",
- "Примените свойство font-family
со значением Lobster
к вашему элементу h2
."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cM9MRsJ",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08808",
- "title": "Specify How Fonts Should Degrade",
- "description": [
- "There are several default fonts that are available in all browsers. These generic font families include monospace
, serif
and sans-serif
",
- "When one font isn't available, you can tell the browser to \"degrade\" to another font.",
- "For example, if you wanted an element to use the Helvetica
font, but degrade to the sans-serif
font when Helvetica
wasn't available, you will specify it as follows:",
- "p { font-family: Helvetica, sans-serif; } ",
- "Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.",
- " ",
- "To begin with, apply the monospace
font to the h2
element, so that it now has two fonts - Lobster
and monospace
.",
- "In the last challenge, you imported the Lobster
font using the link
tag. Now comment out that import of the Lobster
font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your h2
element degrades to the monospace
font.",
- "Note If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font."
- ],
- "tests": [
- {
- "text": "Your h2 element should use the font Lobster
.",
- "testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font Lobster
.');"
- },
- {
- "text": "Your h2 element should degrade to the font monospace
when Lobster
is not available.",
- "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'Your h2 element should degrade to the font monospace
when Lobster
is not available.');"
- },
- {
- "text": "Comment out your call to Google for the Lobster
font by putting <!--
in front of it.",
- "testString": "assert(new RegExp(\"\", \"gi\").test(code), 'Be sure to close your comment by adding -->
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "description": [
- "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem monospace
, serif
und sans-serif
.",
- "Falls eine Font nicht verfügbar ist kannst du dem Browser sagen was er stattdessen verwenden soll.",
- "Wenn du zum Beispiel einem Element die Schriftart Helvetica
geben möchtest, aber gleichzeitig als Alertnative die Schrift sans-serif
laden willst, falls Helvetica
nicht verfügbar ist, kannst du diesen CSS Style verwenden:",
- "p { font-family: Helvetica, sans-serif; } ",
- " ",
- "Kommentiere jetzt den Aufruf an Google Fonts aus, sodass Lobster
nicht zur Verfügung steht. Beachte, wie nun alternativ die Schriftart monospace
geladen wird."
- ]
- },
- "fr": {
- "title": "Spécifier comment vos polices devraient dégrader",
- "description": [
- "Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend monospace
, serif
et sans-serif
.",
- "Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.",
- "Par exemple, si vous voulez qu'un élément utilise la police Helvetica
, mais également dégrader vers sans-serif
lorsque la police Helvetica
n'est pas disponible, vous pouvez utiliser le style CSS suivant :",
- "p { font-family: Helvetica, sans-serif; } ",
- " ",
- "Maintenant, commenter votre appel vers les polices de Google, pour que la police Lobster
ne soit pas disponible. Regardez comment la police se dégrade vers monospace
."
- ]
- },
- "pt-br": {
- "title": "Especifique como as Fontes Devem se Degradar",
- "description": [
- "Existem diversas fontes que estão disponíveis por padrão nos navegadores de internet, incluindo monospace
, serif
e sans-serif
.",
- "No entanto, quando uma fonte não está disponível, podemos dizer ao navegador que \"degrade\" a outro tipo de fonte.",
- "Por exemplo, se você deseja que um elemento use a fonte Helvetica
, e que degrade para a fonte sans-serif
quando a Helvetica
não estiver disponível, você pode utilizar o seguinte CSS:",
- "p {
",
- " font-family: Helvetica, sans-serif;
",
- "}
",
- " ",
- "Agora, comente o seu chamado para a fonte do Google, para que a fonte Lobster
não esteja disponível. Note como a fonte degrada para monospace
."
- ]
- },
- "ru": {
- "title": "Укажите порядок деградации шрифтов",
- "description": [
- "Существует несколько стандартных шрифтов, которые доступны во всех браузерах. Среди них monospace
, serif
и sans-serif
",
- "Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.",
- "Например, если бы вы хотели, чтобы элемент использовал шрифт Helvetica
, но также деградировал до шрифта sans-serif
, когда Helvetica
недоступен, вы могли бы использовать этот CSS-стиль:",
- "p { font-family: Helvetica, sans-serif; } ",
- " ",
- "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт Lobster
становится недоступен. Обратите внимание как происходит деградация до шрифта monospace
."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cpVKBfQ",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- " ",
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9acdf08812",
- "title": "Size Your Images",
- "description": [
- "CSS has a property called width
that controls an element's width. Just like with fonts, we'll use px
(pixels) to specify the image's width.",
- "For example, if we wanted to create a CSS class called larger-image
that gave HTML elements a width of 500 pixels, we'd use:",
- "<style> .larger-image { width: 500px; } </style> ",
- " ",
- "Create a class called smaller-image
and use it to resize the image so that it's only 100 pixels wide.",
- "Note Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge."
- ],
- "tests": [
- {
- "text": "Your img
element should have the class smaller-image
.",
- "testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your img
element should have the class smaller-image
.');"
- },
- {
- "text": "Your image should be 100 pixels wide. Browser zoom should be at 100%.",
- "testString": "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "description": [
- "Die Breite eines Elements wird mit dem CSS Attribut width
kontrolliert. Wie bei Schriftarten verwenden wir Pixel px
um die Größe zu definieren.",
- "Wenn wir also die CSS Klasse larger-image
erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir:",
- "<style> .larger-image { width: 500px; } </style> ",
- " ",
- "Erstelle eine Klasse mit dem Namen smaller-image
und verwende sie, um dein Bild auf 100 Pixel zu skalieren.",
- "Notiz Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen."
- ]
- },
- "fr": {
- "title": "Redimensionner vos images",
- "description": [
- "Le CSS a une propriété nommé width
qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons px
(pixels) pour déterminer la largeur d'une image.",
- "Par exemple, si nous voulons créer une classe CSS nommée larger-image
qui donnne aux éléments une largeur de 500 pixels, nous utilisons :",
- "<style> .larger-image { width: 500px; } </style> ",
- " ",
- "Créez une classe nommée smaller-image
et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.",
- "Prenez note Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi."
- ]
- },
- "pt-br": {
- "title": "Dê um Tamanho para suas Imagens",
- "description": [
- "O CSS possui uma propriedade chamada width
, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar px
(pixels) como medida para especificar a largura de nossa imagem.",
- "Por exemplo, se queremos criar uma classe CSS chamada larger-image
que dê aos elementos HTML uma largura de 500px, vamos usar:",
- "<estilo>
",
- " .larger-image{
",
- " width: 500px;
",
- " }
",
- "</style>
",
- " ",
- "Crie uma classe chamada smaller-image
e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura."
- ]
- },
- "ru": {
- "title": "Установите размер ваших изображений",
- "description": [
- "В CSS есть свойтсво, называемое width
, которе управляет шириной элемента. По аналогии со шрифтами, мы используем px
(пиксели) для указания ширины изображения.",
- "Например, если бы мы хотели создать CSS-класс larger-image
, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:",
- "<style> .larger-image { width: 500px; } </style> ",
- " ",
- "Создайте класс smaller-image
и используйте его для изменения размера изображений до 100 пикселей в ширину.",
- "Внимание По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cM9MmCP",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- " ",
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9bedf08813",
- "title": "Add Borders Around Your Elements",
- "description": [
- "CSS borders have properties like style
, color
and width
",
- "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:",
- "<style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style> ",
- " ",
- "Create a class called thick-green-border
. 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 class
attribute, by separating each class name with a space. For example:",
- "<img class=\"class1 class2\">
"
- ],
- "tests": [
- {
- "text": "Your img
element should have the class smaller-image
.",
- "testString": "assert($(\"img\").hasClass(\"smaller-image\"), 'Your img
element should have the class smaller-image
.');"
- },
- {
- "text": "Your img
element should have the class thick-green-border
.",
- "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your img
element should have the class thick-green-border
.');"
- },
- {
- "text": "Give your image a border width of 10px
.",
- "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 10px
.');"
- },
- {
- "text": "Give your image a border style of solid
.",
- "testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of solid
.');"
- },
- {
- "text": "The border around your img
element should be green.",
- "testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your img
element should be green.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "description": [
- "CSS Rahmen haben Attribute wie style
, color
und width
",
- "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:",
- "<style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style> ",
- " ",
- "Erstelle die Klasse thick-green-border
, welche einen 10 Pixel dicken, grünen Rahmen mit dem Style solid
um ein HTML Element setzt. Füge diese Klasse deinem Katzenfoto hinzu.",
- "Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im class
Attribut trennst. Zum Beispiel:",
- "<img class=\"class1 class2\">
"
- ]
- },
- "fr": {
- "title": "Ajouter des bordures autour de vos éléments",
- "description": [
- "Les bordures CSS ont des propriétés comme style
, color
et width
",
- "Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :",
- "<style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style> ",
- " ",
- "Créer une classe nommée thick-green-border
qui ajoute une bordure verte de 10 pixel avec un style solid
autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.",
- "Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut class
de l'élément. Par exemple :",
- "<img class=\"class1 class2\">
"
- ]
- },
- "pt-br": {
- "title": "Adicione Bordas ao Redor de seus Elementos",
- "description": [
- "As bordas em CSS possuem propriedades como style
, color
e width
",
- "Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:",
- "<style>
",
- " .thin-red-border {
",
- " border-color: red;
",
- " border-width: 5px;
",
- " border-style: solid;
",
- " }
",
- "</style>
",
- " ",
- "Crie uma classe chamada thick-green-border
que insira uma borda verde de 10 pixels de largura com um estilo solid
ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.",
- "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class
. Por exemplo:",
- "<img class=\"clase1 clase2\">
"
- ]
- },
- "ru": {
- "title": "Дбавьте границы вокруг ваших элементов",
- "description": [
- "CSS-границы имеют свойства: style
, color
и width
",
- "Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:",
- "<style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style> ",
- " ",
- "Создайте класс thick-green-border
, который добавляет зелёную границу шириной в 10 пикселей со стилем solid
вокруг HTML-элемента и примените этот класс к вашему фото кота.",
- "Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута class
. Например:",
- "<img class=\"class1 class2\">
"
- ]
- }
- },
- "guideUrl":
- "https://guide.freecodecamp.org/certificates/add-borders-around-your-elements",
- "videoUrl": "https://scrimba.com/c/c2MvnHZ",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- " ",
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08814",
- "title": "Add Rounded Corners with border-radius",
- "description": [
- "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius
.",
- " ",
- "You can specify a border-radius
with pixels. Give your cat photo a border-radius
of 10px
.",
- "Note: this challenge allows for multiple possible solutions. For example, you may add border-radius
to either the .thick-green-border
class or the .smaller-image
class."
- ],
- "tests": [
- {
- "text": "Your image element should have the class \"thick-green-border\".",
- "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".');"
- },
- {
- "text": "Your image should have a border radius of 10px
",
- "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of 10px
');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Füge abgerundete Ecken mit border-radius hinzu",
- "description": [
- "Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius
abrunden.",
- " ",
- "Du kannst einen border-radius
mit Pixeln deklarieren. Gib deinem Katzenfoto einen border-radius
von 10px
.",
- "Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen border-radius
zu der .thick-green-border
oder .smaller-image
Klasse hinzufügen."
- ]
- },
- "es": {
- "title": "Agrega esquinas redondeadas usando border-radius",
- "description": [
- "Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius
.",
- " ",
- "Puedes especificar border-radius
usando pixeles. Dale a tu foto del gato un border-radius
de 10px
.",
- "Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar border-radius
ya sea a la clase .thick-green-border
o a la clase .smaller-image
."
- ]
- },
- "pt-br": {
- "title": "Insira Bordas Arredondadas com o border-radius",
- "description": [
- "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius
.",
- " ",
- "Você pode especificar um border-radius
com pixels. Adicione um border-radius
de 10px
para a sua foto.",
- "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o border-radius
tanto para a classe .thick-green-border
como para a classe .smaller-image
."
- ]
- },
- "ru": {
- "title": "Добавьте скруглённые углы с помощью радиуса границы",
- "description": [
- "У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство border-radius
.",
- " ",
- "Вы можете указать значения border-radius
в пикселях. Присвойте вашему фото кота свойство border-radius
со значением 10px
.",
- "Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить border-radius
как к классу .thick-green-border
, так и к классу .smaller-image
."
- ]
- }
- },
- "guideUrl":
- "https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius",
- "videoUrl": "https://scrimba.com/c/cbZm2hg",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- " ",
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08815",
- "title": "Make Circular Images with a border-radius",
- "description": [
- "In addition to pixels, you can also specify the border-radius
using a percentage.",
- " ",
- "Give your cat photo a border-radius
of 50%
."
- ],
- "tests": [
- {
- "text": "Your image should have a border radius of 50%
, making it perfectly circular.",
- "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of 50%
, making it perfectly circular.');"
- },
- {
- "text": "Be sure to use a percentage value of 50%
.",
- "testString": "assert(code.match(/50%/g), 'Be sure to use a percentage value of 50%
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Erstelle runde Bilder mit einem border-radius",
- "description": [
- "Du kannst einem border-radius
neben Pixeln auch Prozentwerte zuweisen.",
- " ",
- "Gib deinem Katzenfoto einen border-radius
von 50%
."
- ]
- },
- "es": {
- "title": "Crea imágenes circulares usando border-radius",
- "description": [
- "Además de pixeles, puedes especificar un border-radius
usando porcentajes.",
- " ",
- "Dale a tu foto del gato un border-radius
de 50%
."
- ]
- },
- "pt-br": {
- "title": "Deixe as Imagens Circulares com o border-radius",
- "description": [
- "Assim como pixels, você também pode usar o border-radius
com porcentagens.",
- " ",
- "Dê para a sua foto de gato um border-radius
de 50%
."
- ]
- },
- "ru": {
- "title": "Сделайте круглые изображения с помощью радиуса границы",
- "description": [
- "В дополнение к пикселям, вы также может использовать проценты для указания значения свойства border-radius
.",
- " ",
- "Присвойте вашему фото кота свойство border-radius
со значением 50%
."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/c2MvrcB",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- " ",
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fed1348bd9aede07836",
- "title": "Give a Background Color to a div Element",
- "description": [
- "You can set an element's background color with the background-color
property.",
- "For example, if you wanted an element's background color to be green
, you'd put this within your style
element:",
- ".green-background { background-color: green; } ",
- " ",
- "Create a class called silver-background
with the background-color
of silver. Assign this class to your div
element."
- ],
- "tests": [
- {
- "text": "Give your div
element the class silver-background
.",
- "testString": "assert($(\"div\").hasClass(\"silver-background\"), 'Give your div
element the class silver-background
.');"
- },
- {
- "text": "Your div
element should have a silver background.",
- "testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'Your div
element should have a silver background.');"
- },
- {
- "text": "Define a class named silver-background
within the style
element and assign the value of silver
to the background-color
property.",
- "testString": "assert(code.match(/\\.silver-background\\s*{\\s*background-color:\\s*silver;\\s*}/), \"Define a class named silver-background
within the style
element and assign the value of silver
to the background-color
property.\");"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Gib einem div Element eine Hintergrundfarbe",
- "description": [
- "Du kannst die Hintergrundfarbe von einem Element mit dem background-color
Attribut setzen",
- "Wenn du zum Beispiel die Hintergrundfarbe von einem Element green
machen willst, schreibe dies in dein style
Element:",
- ".green-background { background-color: green; } ",
- " ",
- "Erstelle eine Klasse namens silver-background
mit der background-color
grau (silver). Füge diese Klasse deinem div
Element hinzu"
- ]
- },
- "es": {
- "title": "Da un color de fondo a un elemento div",
- "description": [
- "Puedes fijar el color de fondo de un elemento con la propiedad background-color
.",
- "Por ejemplo, si quieres que el color de fondo de un elemento sea verde (green
), dentro de tu elemento style
pondrías:",
- ".green-background { background-color: green; } ",
- " ",
- "Crea una clase llamada silver-background
con la propiedad background-color
en gris (silver
). Asigna esta clase a tu elemento div
."
- ]
- },
- "pt-br": {
- "title": "Dê uma Cor de Fundo a um Elemento div",
- "description": [
- "Você pode acrescentar uma cor de fundo de um elemento com a propriedade background-color
.",
- "Por exemplo, se você quiser que a cor de fundo de um elemento seja verde (green
), dentro de seu elemento style
seria assim:",
- ".green-background {
",
- " background-color: green;
",
- "}
",
- " ",
- "Crie uma classe chamada silver-background
com a propriedade background-color
em cinza (silver
). Depois, adicione essa classe ao seu elemento div
."
- ]
- },
- "ru": {
- "title": "Присвойте цвет фона элементу div",
- "description": [
- "Вы можете установить цвет фона элемента с помощью свойства background-color
.",
- "Например, если бы вы хотели установить цвет фона элемента зелёным
, вы бы использовали следующий стиль внутри вашего элемента style
:",
- ".green-background { background-color: green; } ",
- " ",
- "Создайте класс silver-background
со значением свойства background-color
равным silver
. Назначьте этот класс вашему элементу div
."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cdRKMCk",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- " ",
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87eee1348bd9aede07836",
- "title": "Set the id of an Element",
- "description": [
- "In addition to classes, each HTML element can also have an id
attribute.",
- "There are several benefits to using id
attributes: You can use an id
to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.",
- "id
attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same id
attribute.",
- "Here's an example of how you give your h2
element the id of cat-photo-app
:",
- "<h2 id=\"cat-photo-app\">
",
- " ",
- "Give your form
element the id cat-photo-form
."
- ],
- "tests": [
- {
- "text": "Give your form
element the id of cat-photo-form
.",
- "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form
element the id of cat-photo-form
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Setze die ID von einem Element",
- "description": [
- "Zusätzlich zu Klassen, kann jedes HTML Element auch ein id
Attribut haben.",
- "Es hat mehrere Vorteile id
Attribute zu verwenden und du wirst mehr über diese erfahren wenn du anfängst mit jQuery zu arbeiten.",
- "id
Attribute sollten eindeutig sein. Browser werden das nicht durchsetzen, aber es ist eine weit verbreitete und erprobte Herangehensweise. Also gib bitte nie mehr als einem Element das gleiche id
Attribut.",
- "Hier ist ein Beispiel wie du deinem h2
Element die Id cat-photo-app
gibst:",
- "<h2 id=\"cat-photo-app\">
",
- " ",
- "Gib deinem form
Element die Id cat-photo-form
."
- ]
- },
- "es": {
- "title": "Establecer el ID de un elemento",
- "description": [
- "Además de las clases, cada elemento HTML también puede tener un atributo de identificación id
.",
- "Hay varias ventajas al usar atributos id
, y aprenderás más sobre estas cuando comiences a usar jQuery.",
- "Los atributos id
deben ser únicos. Los navegadores no obligarán esto, pero es ampliamente reconocido como una de las mejores prácticas. Así que por favor no le des a más de un elemento un mismo atributo id
. ",
- "He aquí un ejemplo de cómo le das la identificación cat-photo-app
a tu elemento h2
:",
- "<h2 id=\"cat-photo-app\">
",
- " ",
- "Dale a tu elemento form
la id cat-photo-form
."
- ]
- },
- "pt-br": {
- "title": "Estabeleça a ID de um Elemento",
- "description": [
- "Além das classes, cada elemento HTML também pode ter um atributo de identificação chamado id
.",
- "Existem várias vantagens ao utilizar atributos id
, e você aprenderá mais sobre elas quando começar a utilizar jQuery.",
- "Os atributos id
devem ser únicos. Os navegadores não o obrigarão a isso, mas isso é amplamente reconhecido como uma boa prática. Assim, não dê um mesmo atributo id
a mais de um elemento.",
- "Veja aqui um exemplo de como dar a id cat-photo-app
ao seu elemento code>h2:",
- "<h2 id=\"cat-photo-app\">
",
- " ",
- "Dê ao seu elemento form
a id cat-photo-form
."
- ]
- },
- "ru": {
- "title": "Установите id элемента",
- "description": [
- "В дополнение к классам, каждый HTML-элемент может также иметь атрибут id
.",
- "Есть некоторые преимущества использования атрибутов id
, вы узнаете о них больше, когда начнёте использовать jQuery.",
- "Атрибутам id
следует быть уникальными. Браузеры не принуждают к этому, но широкой общественностью это признано лучшей практикой. Поэтому, пожалуйста, не присваивайте множеству элементов одинаковое значение атрибута id
.",
- "Вот пример того, как вы можете присвоить вашему элементу h2
значение атрибута id
равное cat-photo-app
:",
- "<h2 id=\"cat-photo-app\">
",
- " ",
- "Присвойте вашему элементу form
атрибут id
со значением cat-photo-form
."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cN6MEc2",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- " ",
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87dee1348bd9aede07836",
- "title": "Use an id Attribute to Style an Element",
- "description": [
- "One cool thing about id
attributes is that, like classes, you can style them using CSS.",
- "However, an id
is not reusable and should only be applied to one element. An id
also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id
will be applied.",
- "Here's an example of how you can take your element with the id
attribute of cat-photo-element
and give it the background color of green. In your style
element:",
- "#cat-photo-element { background-color: green; } ",
- "Note that inside your style
element, you always reference classes by putting a .
in front of their names. You always reference ids by putting a #
in front of their names.",
- " ",
- "Try giving your form, which now has the id
attribute of cat-photo-form
, a green background."
- ],
- "tests": [
- {
- "text": "Give your form
element the id of cat-photo-form
.",
- "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form
element the id of cat-photo-form
.');"
- },
- {
- "text": "Your form
element should have the background-color
of green.",
- "testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your form
element should have the background-color
of green.');"
- },
- {
- "text": "Make sure your form
element has an id
attribute.",
- "testString": "assert(code.match(/ /gi) && code.match(//gi).length > 0, 'Make sure your form
element has an id
attribute.');"
- },
- {
- "text": "Do not give your form
any class
or style
attributes.",
- "testString": "assert(!code.match(//gi) && !code.match(//gi), 'Do not give your form
any class
or style
attributes.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Benutze ein ID Attribute um ein Element zu stylen",
- "description": [
- "Eine coole Eigenschaft von id
Attributen ist, dass du sie, genauso wie Klassen, mit CSS stylen kannst.",
- "Hier ist ein Beispiel wie du einem Element mit dem id
Attribut cat-photo-element
eine grüne Hintergrundfarbe geben kannst. In deinem style
Element:",
- "#cat-photo-element { background-color: green; } ",
- "Beachte, dass du in deinem style
Element Klassen immer mit einem .
vor deren Namen ansprichst. Ids sprichst du immer mit #
vor deren Namen an.",
- " ",
- "Versuche deinem Formular, das jetzt das id
Attribut cat-photo-form
hat, einen grünen Hintergrund zu geben."
- ]
- },
- "es": {
- "title": "Usa un atributo ID para dar estilo a un elemento",
- "description": [
- "Una cosa buena sobre los atributos id
es que, al igual que con clases, puedes darles estilo usando CSS.",
- "He aquí un ejemplo de cómo puedes tomar tu elemento con atributo id
de cat-photo-element
y ponerle el color de fondo verde. En tu elemento style
: ",
- "#cat-photo-element { background-color: green; } ",
- "Ten en cuenta que dentro de tu elemento style
, siempre referencias clases poniendo un .
en frente de sus nombres. Y siempre referencias identificaciones poniendo un #
frente a sus nombres. ",
- " ",
- "Trata de darle a tu formulario, que ahora tiene el atributo id
en cat-photo-form
, un fondo verde."
- ]
- },
- "pt-br": {
- "title": "Use um Atributo ID para Estilizar um Elemento",
- "description": [
- "Algo interessante sobre os atributos id
é que, da mesma forma que com as classes, é possível dar estilos a eles usando CSS.",
- "Aqui está um exemplo de como você pode usar seu elemento com atributo id
em cat-photo-element
e dar a ele a cor de fundo verde.",
- "#cat-photo-element {
",
- " background-color: green;
",
- "}
",
- "Note que dentro de seu elemento style
, você deve sempre referenciar uma classe colocando um .
logo antes de seu nome. Já com uma id, você deve referenciar colocando um #
antes de seu nome.",
- " ",
- "Dê ao seu formulário, que agora possui o atributo code>id em cat-photo-form
, um fundo verde."
- ]
- },
- "ru": {
- "title": "Используйте атрибут id для стилизации элемента",
- "description": [
- "Одной из замечательных вещей в отношении атрибута id
является то, что, как и с классами, вы можете стилизовать их с помощью CSS.",
- "Вот пример того как вы можете присвоить вашему элементу со значением атрибута id
равным cat-photo-element
зелёный цвет фона. В вашем элементе style
:",
- "#cat-photo-element { background-color: green; } ",
- "Обратите внимание, что внутри вашего элемента style
вы ссылаетесь на классы используя .
перед их именами. При этом вы всегда ссылаетесь на идентификаторы вставляя #
перед их именами.",
- " ",
- "Попробуйте установить для своей формы, которая теперь имеет атрибут id
равный cat-photo-form
, зелёный в качестве цвета фона."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cakyZfL",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- " ",
- "",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad88fee1348bd9aedf08825",
- "title": "Adjust the Padding of an Element",
- "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: padding
, margin
, and border
.",
- "An element's padding
controls the amount of space between the element's content and its border
.",
- "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 padding
than the blue box.",
- "When you increase the blue box's padding
, it will increase the distance(padding
) between the text and the border around it.",
- " ",
- "Change the padding
of your blue box to match that of your red box."
- ],
- "tests": [
- {
- "text": "Your blue-box
class should give elements 20px
of padding
.",
- "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your blue-box
class should give elements 20px
of padding
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Justiere den Innenabstand eines Elements",
- "description": [
- "Lass uns jetzt mal unsere Katzenfoto App kurz beiseite legen um mehr über HTML Styling zu lernen",
- "Du hast vielleicht schon bemerkt, dass alle HTML Elemente im Prinzip kleine Rechtecke sind.",
- "Drei wichtige CSS-Eigenschaften beeinflussen den Platz den jedes HTML Element umgibt: padding
, margin
und border
.",
- "padding
kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – border
",
- "Wir sehen in diesem Beispiel, dass sich die blaue Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr padding
hat als die blaue Box.",
- " ",
- "Ändere das padding
der blauen Box um es an die rote Box anzugleichen."
- ]
- },
- "es": {
- "title": "Ajusta el relleno de un elemento",
- "description": [
- "Ahora vamos a dejar de lado nuestra aplicación de fotos de gatos por un tiempo, y aprenderemos más sobre dar estilo a HTML",
- "Ya habrás notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos.",
- "Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: relleno (padding
), margen (margin
) y borde (border
)",
- "El relleno (padding
) de un elemento controla la cantidad de espacio entre el elemento y su borde (border
).",
- "Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Ten en cuenta que el cuadro rojo tiene más relleno (padding
) que el cuadro verde. ",
- "Cuando aumentes el relleno de la caja verde, aumentará la distancia entre el texto padding
y el borde alrededor de este.",
- " ",
- "Cambia el relleno (padding
) de la caja verde para que coincida con el de tu cuadro rojo."
- ]
- },
- "pt-br": {
- "title": "Ajuste o Preenchimento de um Elemento",
- "description": [
- "Agora vamos deixar nosso aplicativo de fotos de gatos um pouco de lado, e aprender mais sobre dar estilos em HTML.",
- "Você provavelmente já deve ter notado, mas todos os elementos HTML são, essencialmente, pequenos retângulos.",
- "Três propriedades importantes controlam o espaço ao redor de cada elemento HTML: preenchimento (padding
), margem (margin
) e borda (border
).",
- "O preenchimento (padding
) de um elemento controla a quantidade de espaço entre o elemento e sua borda (border
).",
- "Aqui, podemos ver que o quadro verde e o quadro vermelho se aninham dentro do quadro amarelo. Leve em conta que o quadro vermelho tem mais preenchimento (padding
) que o quadro verde.",
- "Quando você aumenta o preenchimento da caixa verde, a distância entre o texto padding
e a borda ao seu redor também será maior.",
- " ",
- "Mude o preenchimento (padding
) da caixa verde para que coincida com a de seu quadrado vermelho."
- ]
- },
- "ru": {
- "title": "Настройка отступа содержимого для элемента",
- "description": [
- "Теперь давайте отложим наше фото кота на некоторое время и изучим стилизацию HTML.",
- "Вы могли уже заметить это, но все HTML-элеметы в приницпе являются небольшими прямоугольниками.",
- "Пространство вокруг каждого HTML-элемента контролируют три важных свойства: padding
, margin
, border
.",
- "Свойство элемента padding
управляет размером пространства между элементом и его границей border
.",
- "Тут мы можем видеть, что зелёный и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ содержимого padding
, чем зелёный прямоугольник.",
- "Когда вы увеличиваете padding
зелёного прямоугольника, увеличивается расстояние между границей содержимого и границей самого элемента border
.",
- " ",
- "Измените значение свойства padding
вашего зелёного прямоугольника, чтобы он был равен соответствующему значению красного прямоугольника."
- ]
- }
- },
- "guideUrl":
- "https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element",
- "videoUrl": "https://scrimba.com/c/cED8ZC2",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "margin ",
- "",
- "",
- "
padding ",
- " padding ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08822",
- "title": "Adjust the Margin of an Element",
- "description": [
- "An element's margin
controls the amount of space between an element's border
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 margin
than the blue box, making it appear smaller.",
- "When you increase the blue box's margin
, it will increase the distance between its border and surrounding elements.",
- " ",
- "Change the margin
of the blue box to match that of the red box."
- ],
- "tests": [
- {
- "text": "Your blue-box
class should give elements 20px
of margin
.",
- "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your blue-box
class should give elements 20px
of margin
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Passe den Außenabstand eines Elements an",
- "description": [
- "margin
kontrolliert den Abstand zwischen dem Rahmen - border
- eines Elements und den benachbarten Elementen.",
- "In diesem Beispiel sehen wir die blaue und die rote Box die sich beide innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr margin
aufweist als die blaue Box, wodurch sie kleiner wirkt.",
- "Wenn du den Außenabstand – margin
– der blauen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern.",
- " ",
- "Gleiche den Außenabstand – margin
der blauen Box dem der roten Box an."
- ]
- },
- "es": {
- "title": "Ajusta el margen de un elemento",
- "description": [
- "El margen (margin
) de un elemento controla la cantidad de espacio entre el borde (border
) y los elementos alrededor.",
- "Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Ten en cuenta que la caja roja tiene más margen (margin
) que la caja verde, haciendo que parezca más pequeña. ",
- "Cuando aumentes el margen (margin
) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.",
- " ",
- "Cambia el margen (margin
) de la caja verde para que coincida con el de la caja roja."
- ]
- },
- "pt-br": {
- "title": "Ajuste a Margem de um Elemento",
- "description": [
- "A margem (margin
) de um elemento controla a quantidade de espaço entre a borda (border
) e os elementos ao seu redor.",
- "Aqui, podemos ver que a caixa verde e a caixa vermelha se aninham dentro da caixa amarela. Note que a caixa vermelha possui a margem maior que a caixa verde, fazendo com que ela pareça menor.",
- "Quando você aumenta a margem (margin
) da caixa verde, a distância entre a borda e os elementos ao seu redor também aumentará.",
- " ",
- "Mude a margem (margin
) da caixa verde para que coincida com a margem da caixa vermelha."
- ]
- },
- "ru": {
- "title": "Настройка отступа элемента",
- "description": [
- "Значение свойства margin
контролирует размер отступа между границей border
элемента и его окружением.",
- "Тут мы можем видеть, что зелёный прямоугольник и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ margin
, чем зелёный прямоугольник, что делает его визуально меньше.",
- "Когда вы увеличиваете отступ margin
зелёного прямоугольника, увеличивается расстояние между его границей и окружающими элементами.",
- " ",
- "Измените значение отступа margin
зелёного прямоугольника так, чтобы оно равнялось соответствующему значению красного прямоугольника."
- ]
- }
- },
- "guideUrl":
- "https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element",
- "videoUrl": "https://scrimba.com/c/cVJarHW",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "margin ",
- "",
- "",
- "
padding ",
- " padding ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08823",
- "title": "Add a Negative Margin to an Element",
- "description": [
- "An element's margin
controls the amount of space between an element's border
and surrounding elements.",
- "If you set an element's margin
to a negative value, the element will grow larger.",
- " ",
- "Try to set the margin
to a negative value like the one for the red box.",
- "Change the margin
of the blue box to -15px
, so it fills the entire horizontal width of the yellow box around it."
- ],
- "tests": [
- {
- "text": "Your blue-box
class should give elements -15px
of margin
.",
- "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your blue-box
class should give elements -15px
of margin
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Füge einem Element negativen Außenabstand hinzu",
- "description": [
- "margin
kontrolliert den Abstand zwischen dem Rahmen - border
- eines Elements und den benachbarten Elementen.",
- "Wenn du dem Außenabstand - margin
- eines Elements einen negativen Wert zuweist, wird das Element größer.",
- " ",
- "Versuche den Außenabstand - margin
- auf einen negativen Wert, wie bei der roten Box, zu setzen.",
- "Ändere den Außenabstand – margin
– der blauen Box auf -15px
, damit sie die gelbe Box horizontal ausfüllt."
- ]
- },
- "es": {
- "title": "Agregar un margen negativo a un elemento",
- "description": [
- "El margen de un elemento controla la cantidad de espacio entre el borde del elemento y los elementos que lo rodean.",
- "Si estableces el margen de un elemento en un valor negativo, el elemento se hará más grande.",
- " ",
- "Trata de establecer el margen (margin
) a un valor negativo como el de la caja roja.",
- "Cambia el margen (margin
) de la caja verde a -15px
, de forma que ocupe todo el ancho horizontal de la caja amarilla que lo rodea."
- ]
- },
- "pt-br": {
- "title": "Adicione uma Margem Negativa a um Elemento",
- "description": [
- "A margem de um elemento controla a quantidade de espaço entre a borda do elemento e os elementos ao seu redor.",
- "Se você estabelece a margem de um elemento com um valor negativo, o elemento ficará maior.",
- " ",
- "Tente estabelecer a margem (margin
) a um valor negativo como o da caixa vermelha.",
- "Mude a margem (margin
) da caixa verde para -15px
, de forma que ocupe toda a largura horizontal da caixa amarela que a rodeia."
- ]
- },
- "ru": {
- "title": "Добавьте отрицательный отступ к элементу",
- "description": [
- "Значение свойства margin
контролирует размер отступа между границей border
элемента и его окружением.",
- "Если вы установите значение свойства margin
элемента отрицательным, то элемент будет становиться больше.",
- " ",
- "Попробуйте установить значение свойства margin
зелёного прямоугольника отрицательным, по аналогии с красным прямоугольником.",
- "Измените значение свойства margin
зелёного прямоугольника на -15px
, таким образом он занимает всю ширину окружающего жёлтого прямоугольника."
- ]
- }
- },
- "guideUrl":
- "https://guide.freecodecamp.org/certificates/add-a-negative-margin-to-an-element",
- "videoUrl": "https://scrimba.com/c/cnpyGs3",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "",
- "",
- "
padding ",
- " padding ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08824",
- "title": "Add Different Padding to Each Side of an Element",
- "description": [
- "Sometimes you will want to customize an element so that it has different amounts of padding
on each of its sides.",
- "CSS allows you to control the padding
of all four individual sides of an element with the padding-top
, padding-right
, padding-bottom
, and padding-left
properties.",
- " ",
- "Give the blue box a padding
of 40px
on its top and left side, but only 20px
on its bottom and right side."
- ],
- "tests": [
- {
- "text": "Your blue-box
class should give the top of the elements 40px
of padding
.",
- "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your blue-box
class should give the top of the elements 40px
of padding
.');"
- },
- {
- "text": "Your blue-box
class should give the right of the elements 20px
of padding
.",
- "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your blue-box
class should give the right of the elements 20px
of padding
.');"
- },
- {
- "text": "Your blue-box
class should give the bottom of the elements 20px
of padding
.",
- "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your blue-box
class should give the bottom of the elements 20px
of padding
.');"
- },
- {
- "text": "Your blue-box
class should give the left of the elements 40px
of padding
.",
- "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your blue-box
class should give the left of the elements 40px
of padding
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Gib jeder Seite eines Elements einen unterschiedlichen Innenabstand",
- "description": [
- "Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also padding
– geben wollen.",
- "CSS erlaubt dir den Innenabstand - padding
- eines Elements auf allen Seiten einzeln mit den Eigenschaften padding-top
, padding-right
, padding-bottom
und padding-left
zu steuern.",
- " ",
- "Verleihe der blauen Box einen Innenabstand – padding
– von 40px
auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite."
- ]
- },
- "es": {
- "title": "Añade relleno diferente a cada lado de un elemento",
- "description": [
- "A veces querrás personalizar un elemento para que tenga diferente relleno (padding
) en cada uno de sus lados.",
- "CSS te permite controlar el relleno (padding
) de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades padding-top
, padding-right
, padding-bottom
y padding-left
. ",
- " ",
- "Da a la caja verde un relleno (padding
) de 40px
en las partes superior e izquierda, pero sólo 20px
en sus partes inferior y derecha."
- ]
- },
- "pt-br": {
- "title": "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento",
- "description": [
- "As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (padding
) diferente em cada um de seus lados.",
- "O CSS permite controlar o preenchimento (padding
) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades padding-top
, padding-right
, padding-bottom
e padding-left
.",
- " ",
- "Dê para a caixa verde um preenchimento (padding
) de 40px
nas partes superior e esquerda, e de apenas 20px
em suas partes inferior e direita."
- ]
- },
- "ru": {
- "title": "Добавьте разный отступ содердимого с каждой стороны элемента",
- "description": [
- "Иногда вам может потребоваться изменить элемент таким образом, чтобы отступ содержимого padding
с каждой из сторон был разным.",
- "CSS позволяет вам контролировать значение свойства padding
элемента со всех сторон с помощью свойств: padding-top
, padding-right
, padding-bottom
, padding-left
.",
- " ",
- "Присвойте зелёному прямоугольнику padding
равный 40px
сверху и слева, но только 20px
снизу и справа."
- ]
- }
- },
- "guideUrl":
- "https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element",
- "videoUrl": "https://scrimba.com/c/cB7mwUw",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "margin ",
- "",
- "",
- "
padding ",
- " padding ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1248bd9aedf08824",
- "title": "Add Different Margins to Each Side of an Element",
- "description": [
- "Sometimes you will want to customize an element so that it has a different margin
on each of its sides.",
- "CSS allows you to control the margin
of all four individual sides of an element with the margin-top
, margin-right
, margin-bottom
, and margin-left
properties.",
- " ",
- "Give the blue box a margin
of 40px
on its top and left side, but only 20px
on its bottom and right side."
- ],
- "tests": [
- {
- "text": "Your blue-box
class should give the top of elements 40px
of margin
.",
- "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your blue-box
class should give the top of elements 40px
of margin
.');"
- },
- {
- "text": "Your blue-box
class should give the right of elements 20px
of margin
.",
- "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your blue-box
class should give the right of elements 20px
of margin
.');"
- },
- {
- "text": "Your blue-box
class should give the bottom of elements 20px
of margin
.",
- "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your blue-box
class should give the bottom of elements 20px
of margin
.');"
- },
- {
- "text": "Your blue-box
class should give the left of elements 40px
of margin
.",
- "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your blue-box
class should give the left of elements 40px
of margin
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Füge jeder Seite eines Elements einen unterschiedlichen Außenabstand hinzu",
- "description": [
- "Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - margin
- geben wollen.",
- "CSS erlaubt dir ebenfalls den Außenabstand - margin
- eines Elements auf jeder Seite einzeln mit den Eigenschaften margin-top
, margin-right
, margin-bottom
und margin-left
zu steuern.",
- " ",
- "Gib der blauen Box einen Außenabstand – margin
– von 40px
auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite."
- ]
- },
- "es": {
- "title": "Añade márgenes diferentes a cada lado de un elemento",
- "description": [
- "A veces querrás personalizar un elemento para que tenga un margen (margin
) diferente en cada uno de sus lados.",
- "CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades margin-top
, margin-right
, margin-bottom
y margin-left
. ",
- " ",
- "Da a la caja verde un margen (margin
) de 40px
en las partes superior e izquierda, pero sólo 20px
en su parte inferior y al lado derecho."
- ]
- },
- "pt-br": {
- "title": "Dê Valores Diferentes de Margem a Cada Lado de um Elemento",
- "description": [
- "Talvez você queira personalizar um elemento para que possua uma margem (margin
) diferente em cada um de seus lados.",
- "O CSS permite controlar a margem de um elemento em todos os seus quatro lados: superior, direito, inferior e esquerdo, com as propriedades margin-top
, margin-right
, margin-bottom
e margin-left
.",
- " ",
- "Dê para a caixa verde uma margem (margin
) de 40px
nas partes superior e esquerda, e de apenas 20px
nas partes inferior e direita."
- ]
- },
- "ru": {
- "title": "Добавьте разный отступ для элемента",
- "description": [
- "Иногда вам может потребоваться изменить элемент, установив разный отступ margin
с каждой из его сторон.",
- "CSS позволяет вам контролировать отступ margin
элемента с каждой из его сторон с помощью свойств: margin-top
, margin-right
, margin-bottom
, margin-left
.",
- " ",
- "Присвойте красному прямоугольнику значение margin
равное 40px
сверху и слева, но только 20px
снизу и справа."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cg4RWh4",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "margin ",
- "",
- "",
- "
padding ",
- " padding ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08826",
- "title": "Use Clockwise Notation to Specify the Padding of an Element",
- "description": [
- "Instead of specifying an element's padding-top
, padding-right
, padding-bottom
, and padding-left
properties individually, you can specify them all in one line, like this:",
- "padding: 10px 20px 10px 20px;
",
- "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
- " ",
- "Use Clockwise Notation to give the \".blue-box\" class a padding
of 40px
on its top and left side, but only 20px
on its bottom and right side."
- ],
- "tests": [
- {
- "text": "Your blue-box
class should give the top of elements 40px
of padding
.",
- "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your blue-box
class should give the top of elements 40px
of padding
.');"
- },
- {
- "text": "Your blue-box
class should give the right of elements 20px
of padding
.",
- "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your blue-box
class should give the right of elements 20px
of padding
.');"
- },
- {
- "text": "Your blue-box
class should give the bottom of elements 20px
of padding
.",
- "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your blue-box
class should give the bottom of elements 20px
of padding
.');"
- },
- {
- "text": "Your blue-box
class should give the left of elements 40px
of padding
.",
- "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your blue-box
class should give the left of elements 40px
of padding
.');"
- },
- {
- "text": "You should use the clockwise notation to set the padding of blue-box
class.",
- "testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of blue-box
class.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
- "description": [
- "Anstatt die Eigenschaften padding-top
, padding-right
, padding-bottom
und padding-left
zu verwenden, kannst du sie alle in einer Zeile schreiben:",
- "padding: 10px 20px 10px 20px;
",
- "Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt dasselbe wie die seitenspezifischen Anweisungen.",
- " ",
- "Gib der Klasse \".blue-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – padding
– von 40px
auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite."
- ]
- },
- "es": {
- "title": "Utiliza notación en sentido horario para especificar el relleno de un elemento",
- "description": [
- "En lugar de especificar las propiedades padding-top
, padding-right
, padding-bottom
y padding-left
de un elemento, puedes especificar todas en una sóla línea, así: ",
- "padding: 10px 20px 10px 20px;
",
- "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.",
- " ",
- "Usa la notación en sentido horario para dar a la clase \".blue-box
\" un relleno de 40px
en las partes superior e izquierda, pero sólo 20px
en su parte inferior y al lado derecho ."
- ]
- },
- "pt-br": {
- "title": "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento",
- "description": [
- "Ao invés de especificar as propriedades padding-top
, padding-right
, padding-bottom
e padding-left
de um elemento, você pode especificar todas elas em uma só linha, assim:",
- "padding: 10px 20px 10px 20px;
",
- "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.",
- " ",
- "Use a notação em sentido horário
para dar para a classe \".blue-box
\" um preenchimento de 40px
nas partes superior e esquerda, mas de apenas 20px
em sua parte inferior e ao lado direito."
- ]
- },
- "ru": {
- "title": "Используйте систему ссылок по часовой стрелке для установки отступа содержмого элемента",
- "description": [
- "Вместо указания свойств элемента: padding-top
, padding-right
, padding-bottom
, padding-left
, вы можете указать их в строку, например:",
- "padding: 10px 20px 10px 20px;
",
- "Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
- " ",
- "Используйте систему ссылок по часовой стрелке для установки для класса \".blue-box\" значения отступа содержимого padding
равное 40px
сверху и слева, но только 20px
снизу и справа."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cB7mBS9",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "margin ",
- "",
- "",
- "
padding ",
- " padding ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9afdf08726",
- "title": "Use Clockwise Notation to Specify the Margin of an Element",
- "description": [
- "Let's try this again, but with margin
this time.",
- "Instead of specifying an element's margin-top
, margin-right
, margin-bottom
, and margin-left
properties individually, you can specify them all in one line, like this:",
- "margin: 10px 20px 10px 20px;
",
- "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
- " ",
- "Use Clockwise Notation
to give the element with the blue-box
class a margin of 40px
on its top and left side, but only 20px
on its bottom and right side."
- ],
- "tests": [
- {
- "text": "Your blue-box
class should give the top of elements 40px
of margin
.",
- "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your blue-box
class should give the top of elements 40px
of margin
.');"
- },
- {
- "text": "Your blue-box
class should give the right of elements 20px
of margin
.",
- "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your blue-box
class should give the right of elements 20px
of margin
.');"
- },
- {
- "text": "Your blue-box
class should give the bottom of elements 20px
of margin
.",
- "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your blue-box
class should give the bottom of elements 20px
of margin
.');"
- },
- {
- "text": "Your blue-box
class should give the left of elements 40px
of margin
.",
- "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your blue-box
class should give the left of elements 40px
of margin
.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
- "description": [
- "Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also margin
.",
- "Anstatt die Eigenschaften margin-top
, margin-right
, margin-bottom
und margin-left
zu verwenden, kannst du alle in eine Zeile schreiben:",
- "margin: 10px 20px 10px 20px;
",
- "Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt das Gleiche wie die seitenspezifischen Anweisungen.",
- " ",
- "Nutze die Notation im Uhrzeigersinn – auch Clockwise Notation
genannt – um dem Element mit der Klasse blue-box
40px
Außenabstand auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite zu verleihen."
- ]
- },
- "es": {
- "title": "Utiliza notación en sentido horario para especificar el margen de un elemento",
- "description": [
- "Vamos a intentar esto de nuevo, pero esta vez con el margen (margin
).",
- "En lugar de especificar las propiedades margin-top
, margin-right
, margin-bottom
, y margin-left
de un elemento, puedes especificarlas en una sóla línea así: ",
- "margin: 10px 20px 10px 20px;
",
- "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.",
- " ",
- "Usa notación en sentido horario
para dar al elemento con la clase blue-box
un margen de 40px
en las partes superior e izquierda, pero sólo 20px
en su parte inferior y al lado derecho ."
- ]
- },
- "pt-br": {
- "title": "Use Notação em Sentido Horário para Especificar a Margem de um Elemento",
- "description": [
- "Vamos praticar isso outra vez, mas desta vez será com a margem (margin
).",
- "Ao invés de especificar as propriedades margin-top
, margin-right
, margin-bottom
, e margin-left
de um elemento, você pode especificar todas elas em apenas uma linha assim:",
- "margin: 10px 20px 10px 20px;
",
- "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.",
- " ",
- "Use a notação em sentido horário
para dar para a classe \".blue-box
\" uma margem de 40px
nas partes superior e esquerda, mas de apenas 20px
em sua parte inferior e ao lado direito."
- ]
- },
- "ru": {
- "title": "Используйте систему ссылок по часовой стрелке для установки отступа элемента",
- "description": [
- "Давайте попробуем то же самое, но со свойством margin
на этот раз.",
- "Вмето указания свойств элемента: margin-top
, margin-right
, margin-bottom
, margin-left
, вы можете указать их в строку, например:",
- "margin: 10px 20px 10px 20px;
",
- "Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
- " ",
- "Используйте систему ссылок по часовой стрелке для установки для класса blue-box
значения отступа margin
равное 40px
сверху и слева, но только 20px
снизу и справа."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cB7mBS9",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "margin ",
- "",
- "",
- "
padding ",
- " padding ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "58c383d33e2e3259241f3076",
- "title": "Use Attribute Selectors to Style Elements",
- "description": [
- "You have been giving id
or class
attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style.",
- "Let's bring out CatPhotoApp again to practice using CSS Selectors.",
- "For this challenge, you will use the [attr=value]
attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute type
and a corresponding value of radio
:",
- "[type='radio'] { margin: 20px 0px 20px 0px; } ",
- " ",
- "Using the type
attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px."
- ],
- "tests": [
- {
- "text": "The type
attribute selector should be used to select the checkboxes.",
- "testString": "assert(code.match(/",
- "",
- "CatPhotoApp ",
- "",
- " Click here to view more cat photos .
",
- " ",
- " ",
- " ",
- " ",
- "
Things cats love:
",
- "
",
- " cat nip ",
- " laser pointers ",
- " lasagna ",
- " ",
- "
Top 3 things cats hate:
",
- "
",
- " flea treatment ",
- " thunder ",
- " other cats ",
- " ",
- "
",
- " ",
- " ",
- " "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad82fee1322bd9aedf08721",
- "title": "Understand Absolute versus Relative Units",
- "description": [
- "The last several challenges all set an element's margin or padding with pixels (px
). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to px
, CSS has a number of different length unit options that you can use.",
- "The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in
and mm
refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.",
- "Relative units, such as em
or rem
, are relative to another length value. For example, em
is based on the size of an element's font. If you use it to set the font-size
property itself, it's relative to the parent's font-size
.",
- "Note There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section.",
- " ",
- "Add a padding
property to the element with class red-box
and set it to 1.5em
."
- ],
- "tests": [
- {
- "text": "Your red-box
class should have a padding
property.",
- "testString": "assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', 'Your red-box
class should have a padding
property.');"
- },
- {
- "text": "Your red-box
class should give elements 1.5em of padding
.",
- "testString": "assert(code.match(/\\.red-box\\s*?{\\s*?.*?\\s*?.*?\\s*?padding:\\s*?1\\.5em/gi), 'Your red-box
class should give elements 1.5em of padding
.');"
- }
- ],
- "challengeType": 0,
- "translations": {},
- "videoUrl": "https://scrimba.com/c/cN66JSL",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "margin ",
- "",
- "",
- "
padding ",
- " padding ",
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08736",
- "title": "Style the HTML Body Element",
- "description": [
- "Now let's start fresh and talk about CSS inheritance.",
- "Every HTML page has a body
element.",
- " ",
- "We can prove that the body
element exists here by giving it a background-color
of black.",
- "We can do this by adding the following to our style
element:",
- "body { background-color: black; } "
- ],
- "tests": [
- {
- "text": "Give your body
element the background-color
of black.",
- "testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your body
element the background-color
of black.');"
- },
- {
- "text": "Make sure your CSS rule is properly formatted with both opening and closing curly brackets.",
- "testString": "assert(code.match(/"],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08746",
- "title": "Inherit Styles from the Body Element",
- "description": [
- "Now we've proven that every HTML page has a body
element, and that its body
element can also be styled with CSS.",
- "Remember, you can style your body
element just like any other HTML element, and all your other elements will inherit your body
element's styles.",
- " ",
- "First, create a h1
element with the text Hello World
",
- "Then, let's give all elements on your page the color of green
by adding color: green;
to your body
element's style declaration.",
- "Finally, give your body
element the font-family of monospace
by adding font-family: monospace;
to your body
element's style declaration."
- ],
- "tests": [
- {
- "text": "Create an h1
element.",
- "testString": "assert(($(\"h1\").length > 0), 'Create an h1
element.');"
- },
- {
- "text": "Your h1
element should have the text Hello World
.",
- "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your h1
element should have the text Hello World
.');"
- },
- {
- "text": "Make sure your h1
element has a closing tag.",
- "testString": "assert(code.match(/<\\/h1>/g) && code.match(//g).length === code.match(/h1 element has a closing tag.');"
- },
- {
- "text": "Give your body
element the color
property of green
.",
- "testString": "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your body
element the color
property of green
.');"
- },
- {
- "text": "Give your body
element the font-family
property of monospace
.",
- "testString": "assert(($(\"body\").css(\"font-family\").match(/monospace/i)), 'Give your body
element the font-family
property of monospace
.');"
- },
- {
- "text": "Your h1
element should inherit the font monospace
from your body
element.",
- "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your h1
element should inherit the font monospace
from your body
element.');"
- },
- {
- "text": "Your h1
element should inherit the color green from your body
element.",
- "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your h1
element should inherit the color green from your body
element.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Erbe Styles vom Body Element",
- "description": [
- "Jetzt haben wir bewiesen dass jede HTML Seite ein body
Element besitzt und dass dieses body
Element ebenfalls mit CSS gestylt werden kann.",
- "Vergiss nicht, dass du dein body
Element wie jedes andere HTML Element stylen kannst und dass alle anderen Elemente von deinem body
Element Styles erben werden.",
- " ",
- "Erstelle zuerst ein h1
Element mit dem Text Hello World
",
- "Dann gib allen Elementen auf deiner Seite die Farbe green
indem du color:green;
deinen body
Element Styles hinzufügst.",
- "Gib deinem body
Element abschließend die Schriftart monospace
indem du font-family: monospace;
deinen body
Element Styles hinzufügst."
- ]
- },
- "es": {
- "title": "Hereda estilos del elemento cuerpo",
- "description": [
- "Ya hemos demostrado que cada página HTML tiene un cuerpo (body
), y que puede dársele estilo CSS.",
- "Recuerda que puedes dar estilo de tu elemento body
como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento body
.",
- " ",
- "En primer lugar, crea un elemento h1
con el texto Hello World
",
- "Después, vamos a darle a todos los elementos de tu página el color verde (green
) añadiendo color: green;
a la declaración de estilo de tu elemento body
.",
- "Por último, da a tu elemento body
el tipo de letra monospace
añadiendo font-family: monospace;
a la declaración del estilo de tu elemento body
."
- ]
- },
- "pt-br": {
- "title": "Herde Estilos do Elemento Body",
- "description": [
- "Já demonstramos que cada página HTML possui um corpo (body
), e que podemos dar estilo a ele através do CSS.",
- "Observe que você pode dar estilo ao seu elemento body
como a qualquer outro elemento HTML, e que todos os outros elementos herdarão os estilos de seu elemento body
.",
- " ",
- "Em primeiro lugar, crie um elemento h1
com o texto Hello World
",
- "Depois, dê a todos os elementos de sua página uma cor verde (green
) adicionando color: green;
na declaração de estilo de seu elemento body
.",
- "Por último, dê ao seu elemento body
o tipo de fonte monospace
adicionando font-family: monospace;
na declaração de estilo de seu elemento body
."
- ]
- },
- "ru": {
- "title": "Наследование стилей от элемента Body",
- "description": [
- "Мы доказали наличие у каждой HTML-страницы элемента body
и то, что этот элемент body
можно стилизовать с помощью CSS.",
- "Не забывайте, что вы можете стилизовать ваш элемент body
так же как и любой другой HTML-элемент, а все остальные элементы унаследуют стили элемента body
.",
- " ",
- "Для начала, создайте элемент h1
с текстом Hello World
",
- "Затем присвойте всем элементам на вашей странице зелёный
цвет путём добавления color: green;
к свойствам, указанным в объявлении стилей для элемента body
.",
- "В завершении, присвойте вашему элементу body
свойство семейства шрифтов равное monospace
путём добавления font-family: monospace;
к свойствам, указанным в объявлении стилей для элемента body
."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/c9bmdtR",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- ""
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf08756",
- "title": "Prioritize One Style Over Another",
- "description": [
- "Sometimes your HTML elements will receive multiple styles that conflict with one another.",
- "For example, your h1
element can't be both green and pink at the same time.",
- "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body
element's color: green;
CSS property?",
- " ",
- "Create a CSS class called pink-text
that gives an element the color pink.",
- "Give your h1
element the class of pink-text
."
- ],
- "tests": [
- {
- "text": "Your h1
element should have the class pink-text
.",
- "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1
element should have the class pink-text
.');"
- },
- {
- "text": "Your <style>
should have a pink-text
CSS class that changes the color
.",
- "testString": "assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*.+\\s*;\\s*\\}/g), 'Your <style>
should have a pink-text
CSS class that changes the color
.');"
- },
- {
- "text": "Your h1
element should be pink.",
- "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your h1
element should be pink.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Ziehe einen Style einem Anderen vor",
- "description": [
- "Manchmal werden deine HTML Elemente mehrere Styles erhalten die sich gegenseitig widersprechen.",
- "Zum Beispiel könnte dein h1
Element nicht gleichzeitig grün und pink sein.",
- " ",
- "Schauen wir uns an was passiert wenn wir eine Klasse erstellen die Text pink macht und dann einem Element hinzufügen. Wird unsere Klasse die color:green;
Eigenschaft unseres body
Elements überschreiben - override - ?"
- ]
- },
- "es": {
- "title": "Priorizar un estilo sobre otro",
- "description": [
- "A veces los elementos HTML recibirán múltiples estilos que entran en conflicto entre sí.",
- "Por ejemplo, el elemento h1
no puede ser verde y rosa al mismo tiempo.",
- "Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (override ) nuestra clase la propiedad CSS color: green
del elemento body
?",
- " ",
- "Crea una clase CSS llamada pink-text
que le da a un elemento el color rosado.",
- "Ponle a tu elemento h1
la clase de pink-text
."
- ]
- },
- "pt-br": {
- "title": "Priorize um Estilo Sobre o Outro",
- "description": [
- "As vezes os elementos HTML recebem múltiplos estilos que entram em conflito entre si.",
- "Por exemplo, o elemento h1
não pode ser verde e rosa ao mesmo tempo.",
- "Vamos ver o que acontece quando criamos uma classe que faz com que o texto seja rosa e então o aplicamos a um elemento. Isso irá sobrepor (override ) a propriedade CSS color: green
do elemento body
de nossa classe?",
- " ",
- "Crie uma classe CSS chamada pink-text
, que dê a cor rosa a um elemento.",
- "Depois, adicione a classe pink-text
ao seu elemento h1
."
- ]
- },
- "ru": {
- "title": "Установите приоритет одного стиля над другим",
- "description": [
- "Иногда вашим HTML-элементам будут присвоены множественные стили, конфликтующие друг с другом.",
- "Например, ваш элемент h1
не может быть одновременно зелёным и розовым.",
- "Давайте посмотрим, что произойдёт, когда мы создадим класс, который делает текст розовым, затем присвоим его элементу. Переопределит ли наш класс значение CSS-свойства элемента body
равное color: green;
?",
- " ",
- "Создайте CSS-класс pink-text
, который назначает элементу розовый в качестве цвета.",
- "Назначьте вашему элементу h1
класс pink-text
."
- ]
- }
- },
- "videoUrl": "https://scrimba.com/c/cZ8wnHv",
- "files": {
- "indexhtml": {
- "key": "indexhtml",
- "ext": "html",
- "name": "index",
- "contents": [
- "",
- "Hello World! "
- ],
- "head": [],
- "tail": []
- }
- }
- },
- {
- "id": "bad87fee1348bd9aedf04756",
- "title": "Override Styles in Subsequent CSS",
- "description": [
- "Our \"pink-text\" class overrode our body
element's CSS declaration!",
- "We just proved that our classes will override the body
element's CSS. So the next logical question is, what can we do to override our pink-text
class?",
- " ",
- "Create an additional CSS class called blue-text
that gives an element the color blue. Make sure it's below your pink-text
class declaration.",
- "Apply the blue-text
class to your h1
element in addition to your pink-text
class, and let's see which one wins.",
- "Applying multiple class attributes to a HTML element is done with a space between them like this:",
- "class=\"class1 class2\"
",
- "Note: It doesn't matter which order the classes are listed in the HTML element.",
- "However, the order of the class
declarations in the <style>
section are what is important. The second declaration will always take precedence over the first. Because .blue-text
is declared second, it overrides the attributes of .pink-text
"
- ],
- "tests": [
- {
- "text": "Your h1
element should have the class pink-text
.",
- "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1
element should have the class pink-text
.');"
- },
- {
- "text": "Your h1
element should have the class blue-text
.",
- "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your h1
element should have the class blue-text
.');"
- },
- {
- "text": "Both blue-text
and pink-text
should belong to the same h1
element.",
- "testString": "assert($(\".pink-text\").hasClass(\"blue-text\"), 'Both blue-text
and pink-text
should belong to the same h1
element.');"
- },
- {
- "text": "Your h1
element should be blue.",
- "testString": "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your h1
element should be blue.');"
- }
- ],
- "challengeType": 0,
- "translations": {
- "de": {
- "title": "Überschreibe Styles mit nachträglichen CSS",
- "description": [
- "Unsere \"pink-text\" Klasse hat unsere CSS Angaben des body