diff --git a/challenges/01-responsive-web-design/applied-visual-design.json b/challenges/01-responsive-web-design/applied-visual-design.json index 6f89e537d9..b49147cf4a 100644 --- a/challenges/01-responsive-web-design/applied-visual-design.json +++ b/challenges/01-responsive-web-design/applied-visual-design.json @@ -1768,11 +1768,12 @@ "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 orange (#FFA500)
red (#FF0000) and cyan (#00FFFF)", + "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
green (#00FF00) and magenta (#FF00FF)
blue (#0000FF) and yellow (#FFFF00)
background-color
property of the blue
and orange
classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background."
+ "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": [
{
@@ -1783,9 +1784,9 @@
},
{
"text":
- "The div
element with class orange
should have a background-color
of orange.",
+ "The div
element with class yellow
should have a background-color
of yellow.",
"testString":
- "assert($('.orange').css('background-color') == 'rgb(255, 165, 0)', 'The div
element with class orange
should have a background-color
of orange.');"
+ "assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'The div
element with class yellow
should have a background-color
of yellow.');"
}
],
"solutions": [],
@@ -1806,7 +1807,7 @@
" .blue {",
" background-color: #000000;",
" }",
- " .orange {",
+ " .yellow {",
" background-color: #000000;",
" }",
" div {",
@@ -1816,7 +1817,7 @@
" }",
"",
"",
- ""
+ ""
],
"head": [],
"tail": []