diff --git a/challenges/01-responsive-web-design/applied-visual-design.json b/challenges/01-responsive-web-design/applied-visual-design.json
index 590d75211f0..3133fdd8c0e 100644
--- a/challenges/01-responsive-web-design/applied-visual-design.json
+++ b/challenges/01-responsive-web-design/applied-visual-design.json
@@ -717,7 +717,7 @@
"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:", - "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.
r = red
g = green
b = blue
a = alpha/level of opacity
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.",
+ "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.",
"background-color
of the h4
element to the given rgba()
value.",
@@ -1143,7 +1143,7 @@
}
],
"description": [
- "Google Fonts
is a great way to find free fonts to use in a project.",
+ "Google Fonts is a great way to find free fonts to use in a project.",
"Once you have selected the preferred font, copy the link tag that is provided and insert it into the head
of your page.",
"The Open Sans font is already added for you behind the scenes, but the code to include it in your own project is the following:",
"<link href=\"https://fonts.googleapis.com/css?family=Open+Sans\" rel=\"stylesheet\">
",
@@ -1562,7 +1562,6 @@
"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.",
"Noteposition
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."
],
"challengeSeed": [
@@ -2021,7 +2020,7 @@
"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 in 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.",
+ "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. It 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 is more subtle than using two complementary colors.",
"Here are three colors using the split-complement scheme:",
@@ -2085,7 +2084,7 @@
"id": "587d78a4367417b2b2512ad3",
"title": "Adjusting 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.",
+ "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.",
"#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."
],
@@ -2163,7 +2162,7 @@
"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.",
+ "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:",
@@ -2304,7 +2303,7 @@
"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 fist 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.",
+ "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));
",
"transform
property has a verity 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.",
+ "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);}
}
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.",
+ "The following code skews the paragraph element by -32 degrees along the X-axis.",
"p {", "
transform: skewX(-32deg);
}
bottom
by 24 degrees along the X axis by using the transform
property."
+ "Skew the element with the id of bottom
by 24 degrees along the X-axis by using the transform
property."
],
"challengeSeed": [
"