diff --git a/client/src/pages/learn/responsive-web-design/css-variables-skyline/index.md b/client/src/pages/learn/responsive-web-design/css-variables-skyline/index.md new file mode 100644 index 0000000000..2c0b5a60eb --- /dev/null +++ b/client/src/pages/learn/responsive-web-design/css-variables-skyline/index.md @@ -0,0 +1,8 @@ +--- +title: Introduction to the CSS Variables Skyline Challenges +block: CSS Variables Skyline +superBlock: Responsive Web Design +--- +## Introduction to the CSS Variables Skyline Challenges + +CSS Variables Skyline Placeholder Introduction. diff --git a/curriculum/challenges/_meta/css-variables-skyline/meta.json b/curriculum/challenges/_meta/css-variables-skyline/meta.json new file mode 100644 index 0000000000..63fe8aad79 --- /dev/null +++ b/curriculum/challenges/_meta/css-variables-skyline/meta.json @@ -0,0 +1,486 @@ +{ + "name": "CSS Variables Skyline", + "dashedName": "css-variables-skyline", + "order": 8, + "time": "5 hours", + "template": "", + "required": [], + "superBlock": "responsive-web-design", + "superOrder": 1, + "challengeOrder": [ + [ + "5d822fd413a79914d39e98c9", + "Part 1" + ], + [ + "5d822fd413a79914d39e98ca", + "Part 2" + ], + [ + "5d822fd413a79914d39e98cb", + "Part 3" + ], + [ + "5d822fd413a79914d39e98cc", + "Part 4" + ], + [ + "5d822fd413a79914d39e98cd", + "Part 5" + ], + [ + "5d822fd413a79914d39e98ce", + "Part 6" + ], + [ + "5d822fd413a79914d39e98cf", + "Part 7" + ], + [ + "5d822fd413a79914d39e98d0", + "Part 8" + ], + [ + "5d822fd413a79914d39e98d1", + "Part 9" + ], + [ + "5d822fd413a79914d39e98d2", + "Part 10" + ], + [ + "5d822fd413a79914d39e98d3", + "Part 11" + ], + [ + "5d822fd413a79914d39e98d4", + "Part 12" + ], + [ + "5d822fd413a79914d39e98d5", + "Part 13" + ], + [ + "5d822fd413a79914d39e98d6", + "Part 14" + ], + [ + "5d822fd413a79914d39e98d7", + "Part 15" + ], + [ + "5d822fd413a79914d39e98d8", + "Part 16" + ], + [ + "5d822fd413a79914d39e98d9", + "Part 17" + ], + [ + "5d822fd413a79914d39e98da", + "Part 18" + ], + [ + "5d822fd413a79914d39e98db", + "Part 19" + ], + [ + "5d822fd413a79914d39e98dc", + "Part 20" + ], + [ + "5d822fd413a79914d39e98dd", + "Part 21" + ], + [ + "5d822fd413a79914d39e98de", + "Part 22" + ], + [ + "5d822fd413a79914d39e98df", + "Part 23" + ], + [ + "5d822fd413a79914d39e98e0", + "Part 24" + ], + [ + "5d822fd413a79914d39e98e1", + "Part 25" + ], + [ + "5d822fd413a79914d39e98e2", + "Part 26" + ], + [ + "5d822fd413a79914d39e98e3", + "Part 27" + ], + [ + "5d822fd413a79914d39e98e4", + "Part 28" + ], + [ + "5d822fd413a79914d39e98e5", + "Part 29" + ], + [ + "5d822fd413a79914d39e98e6", + "Part 30" + ], + [ + "5d822fd413a79914d39e98e7", + "Part 31" + ], + [ + "5d822fd413a79914d39e98e8", + "Part 32" + ], + [ + "5d822fd413a79914d39e98e9", + "Part 33" + ], + [ + "5d822fd413a79914d39e98ea", + "Part 34" + ], + [ + "5d822fd413a79914d39e98eb", + "Part 35" + ], + [ + "5d822fd413a79914d39e98ec", + "Part 36" + ], + [ + "5d822fd413a79914d39e98ed", + "Part 37" + ], + [ + "5d822fd413a79914d39e98ee", + "Part 38" + ], + [ + "5d822fd413a79914d39e98ef", + "Part 39" + ], + [ + "5d822fd413a79914d39e98f0", + "Part 40" + ], + [ + "5d822fd413a79914d39e98f1", + "Part 41" + ], + [ + "5d822fd413a79914d39e98f2", + "Part 42" + ], + [ + "5d822fd413a79914d39e98f3", + "Part 43" + ], + [ + "5d822fd413a79914d39e98f4", + "Part 44" + ], + [ + "5d822fd413a79914d39e98f5", + "Part 45" + ], + [ + "5d822fd413a79914d39e98f6", + "Part 46" + ], + [ + "5d822fd413a79914d39e98f7", + "Part 47" + ], + [ + "5d822fd413a79914d39e98f8", + "Part 48" + ], + [ + "5d822fd413a79914d39e98f9", + "Part 49" + ], + [ + "5d822fd413a79914d39e98fa", + "Part 50" + ], + [ + "5d822fd413a79914d39e98fb", + "Part 51" + ], + [ + "5d822fd413a79914d39e98fc", + "Part 52" + ], + [ + "5d822fd413a79914d39e98fd", + "Part 53" + ], + [ + "5d822fd413a79914d39e98fe", + "Part 54" + ], + [ + "5d822fd413a79914d39e98ff", + "Part 55" + ], + [ + "5d822fd413a79914d39e9900", + "Part 56" + ], + [ + "5d822fd413a79914d39e9901", + "Part 57" + ], + [ + "5d822fd413a79914d39e9902", + "Part 58" + ], + [ + "5d822fd413a79914d39e9903", + "Part 59" + ], + [ + "5d822fd413a79914d39e9904", + "Part 60" + ], + [ + "5d822fd413a79914d39e9905", + "Part 61" + ], + [ + "5d822fd413a79914d39e9906", + "Part 62" + ], + [ + "5d822fd413a79914d39e9907", + "Part 63" + ], + [ + "5d822fd413a79914d39e9908", + "Part 64" + ], + [ + "5d822fd413a79914d39e9909", + "Part 65" + ], + [ + "5d822fd413a79914d39e990a", + "Part 66" + ], + [ + "5d822fd413a79914d39e990b", + "Part 67" + ], + [ + "5d822fd413a79914d39e990c", + "Part 68" + ], + [ + "5d822fd413a79914d39e990d", + "Part 69" + ], + [ + "5d822fd413a79914d39e990e", + "Part 70" + ], + [ + "5d822fd413a79914d39e990f", + "Part 71" + ], + [ + "5d822fd413a79914d39e9910", + "Part 72" + ], + [ + "5d822fd413a79914d39e9911", + "Part 73" + ], + [ + "5d822fd413a79914d39e9912", + "Part 74" + ], + [ + "5d822fd413a79914d39e9913", + "Part 75" + ], + [ + "5d822fd413a79914d39e9914", + "Part 76" + ], + [ + "5d822fd413a79914d39e9916", + "Part 78" + ], + [ + "5d822fd413a79914d39e9917", + "Part 79" + ], + [ + "5d822fd413a79914d39e9918", + "Part 80" + ], + [ + "5d822fd413a79914d39e9919", + "Part 81" + ], + [ + "5d822fd413a79914d39e991a", + "Part 82" + ], + [ + "5d822fd413a79914d39e991b", + "Part 83" + ], + [ + "5d822fd413a79914d39e991c", + "Part 84" + ], + [ + "5d822fd413a79914d39e991d", + "Part 85" + ], + [ + "5d822fd413a79914d39e991e", + "Part 86" + ], + [ + "5d822fd413a79914d39e991f", + "Part 87" + ], + [ + "5d822fd413a79914d39e9920", + "Part 88" + ], + [ + "5d822fd413a79914d39e9921", + "Part 89" + ], + [ + "5d822fd413a79914d39e9922", + "Part 90" + ], + [ + "5d822fd413a79914d39e9923", + "Part 91" + ], + [ + "5d822fd413a79914d39e9924", + "Part 92" + ], + [ + "5d822fd413a79914d39e9925", + "Part 93" + ], + [ + "5d822fd413a79914d39e9926", + "Part 94" + ], + [ + "5d822fd413a79914d39e9927", + "Part 95" + ], + [ + "5d822fd413a79914d39e9928", + "Part 96" + ], + [ + "5d822fd413a79914d39e9929", + "Part 97" + ], + [ + "5d822fd413a79914d39e992a", + "Part 98" + ], + [ + "5d822fd413a79914d39e992b", + "Part 99" + ], + [ + "5d822fd413a79914d39e992c", + "Part 100" + ], + [ + "5d822fd413a79914d39e992d", + "Part 101" + ], + [ + "5d822fd413a79914d39e992e", + "Part 102" + ], + [ + "5d822fd413a79914d39e992f", + "Part 103" + ], + [ + "5d822fd413a79914d39e9930", + "Part 104" + ], + [ + "5d822fd413a79914d39e9932", + "Part 106" + ], + [ + "5d822fd413a79914d39e9933", + "Part 107" + ], + [ + "5d822fd413a79914d39e9915", + "Part 108" + ], + [ + "5d822fd413a79914d39e9934", + "Part 109" + ], + [ + "5d822fd413a79914d39e9935", + "Part 110" + ], + [ + "5d822fd413a79914d39e9931", + "Part 111" + ], + [ + "5d822fd413a79914d39e9936", + "Part 112" + ], + [ + "5d822fd413a79914d39e9937", + "Part 113" + ], + [ + "5d822fd413a79914d39e9938", + "Part 114" + ], + [ + "5d822fd413a79914d39e9939", + "Part 115" + ], + [ + "5d822fd413a79914d39e993a", + "Part 116" + ], + [ + "5d822fd413a79914d39e993b", + "Part 117" + ], + [ + "5d822fd413a79914d39e993c", + "Part 118" + ], + [ + "5d822fd413a79914d39e993d", + "Part 119" + ], + [ + "5d822fd413a79914d39e993e", + "Part 120" + ] + ], + "helpRoom": "Help", + "fileName": "01-responsive-web-design/css-variables-skyline.json" +} \ No newline at end of file diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-1.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-1.english.md new file mode 100644 index 0000000000..545c18501c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-1.english.md @@ -0,0 +1,48 @@ +--- +id: 5d822fd413a79914d39e98c9 +title: Part 1 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Welcome to the CSS Variables skyline project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(code.match(//gi)); + +``` + +
+ +## Challenge Seed +
+
+ +```html +``` + +
+
+ + +## Solution +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-10.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-10.english.md new file mode 100644 index 0000000000..275c97ed4e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-10.english.md @@ -0,0 +1,108 @@ +--- +id: 5d822fd413a79914d39e98d2 +title: Part 10 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Nest a `div` with a class of `bb1` in the background buildings container. Give it a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1 = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; assert($(".background-buildings")[0].contains($("div.bb1")[0]) && /width\s*:\s*10%\s*(;|})/g.test(bb1) && /height\s*:\s*70%\s*(;|})/g.test(bb1)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.english.md new file mode 100644 index 0000000000..7f02559fc1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.english.md @@ -0,0 +1,706 @@ +--- +id: 5d822fd413a79914d39e992c +title: Part 100 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Nest six `div` elements within `fb4b` and give them all a class of `fb4-window`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".fb4b").children("div.fb4-window").length === 6); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.english.md new file mode 100644 index 0000000000..d89ab11f32 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.english.md @@ -0,0 +1,719 @@ +--- +id: 5d822fd413a79914d39e992d +title: Part 101 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give the `fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb4w = code.match(/\.fb4-window\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*30%\s*(;|})/g.test(fb4w) && /height\s*:\s*10%\s*(;|})/g.test(fb4w) && /border-radius\s*:\s*50%\s*(;|})/g.test(fb4w)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.english.md new file mode 100644 index 0000000000..d609ff66d4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.english.md @@ -0,0 +1,727 @@ +--- +id: 5d822fd413a79914d39e992e +title: Part 102 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb4w = code.match(/\.fb4-window\s*{[\s\S]+?[^}]}/g)[0]; assert(/background-color\s*:\s*var\(\s*--window-color1\s*\)\s*(;|})/g.test(fb4w) && /margin\s*:\s*10%\s*(;|})/g.test(fb4w)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.english.md new file mode 100644 index 0000000000..d15241116c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.english.md @@ -0,0 +1,731 @@ +--- +id: 5d822fd413a79914d39e992f +title: Part 103 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add `display: flex;` and `flex-wrap: wrap;` to the window container. This will put your windows side by side and then push them down to a new row when they don't fit. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".fb4b").css("display") === "flex" && $(".fb4b").css("flex-wrap") === "wrap"); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.english.md new file mode 100644 index 0000000000..f22a0e140c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.english.md @@ -0,0 +1,738 @@ +--- +id: 5d822fd413a79914d39e9930 +title: Part 104 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent` and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb4a = code.match(/\.fb4a\s*{[\s\S]+?[^}]}/g)[0]; assert(/border-top\s*:\s*5vh\s+solid\s+transparent\s*(;|})/g.test(fb4a) && /border-left\s*:\s*8vw\s+solid\s+var\(\s*--building-color1\s*\)\s*(;|})/g.test(fb4a)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.english.md new file mode 100644 index 0000000000..b632cf7eb0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.english.md @@ -0,0 +1,749 @@ +--- +id: 5d822fd413a79914d39e9932 +title: Part 106 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%` and `transparent` from `5%` to `10%`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb5 = code.match(/\.fb5\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*repeating-linear-gradient\(\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*5%\s*,\s*transparent\s*5%\s*,\s*transparent\s*10%\s*\)\s*(;|})/g.test(fb5)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.english.md new file mode 100644 index 0000000000..36916aee2b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.english.md @@ -0,0 +1,762 @@ +--- +id: 5d822fd413a79914d39e9933 +title: Part 107 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb5 = code.match(/\.fb5\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*repeating-linear-gradient\(\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*5%\s*,\s*transparent\s*5%\s*,\s*transparent\s*10%\s*\)\s*,\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*12%\s*,\s*var\(\s*--window-color2\s*\)\s*12%\s*,\s*var\(\s*--window-color2\s*\)\s*44%\s*\)\s*(;|})/g.test(fb5)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.english.md new file mode 100644 index 0000000000..bbde392c7d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.english.md @@ -0,0 +1,768 @@ +--- +id: 5d822fd413a79914d39e9915 +title: Part 108 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You don't need the `background-color` for this building anymore so you can remove that property. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb5 = code.match(/\.fb5\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(fb5)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.english.md new file mode 100644 index 0000000000..de402e49c6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.english.md @@ -0,0 +1,774 @@ +--- +id: 5d822fd413a79914d39e9934 +title: Part 109 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb6 = code.match(/\.fb6\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color3\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color3\s*\)\s*10%\s*,\s*transparent\s*10%\s*,\s*transparent\s*30%\s*\)\s*(;|})/g.test(fb6)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-11.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-11.english.md new file mode 100644 index 0000000000..679c9559cb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-11.english.md @@ -0,0 +1,120 @@ +--- +id: 5d822fd413a79914d39e98d3 +title: Part 11 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Nest four `div` elements in the `bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1 = $(".bb1")[0]; assert(bb1.contains($("div.bb1a")[0]) && bb1.contains($("div.bb1b")[0]) && bb1.contains($("div.bb1c")[0]) && bb1.contains($("div.bb1d")[0])); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.english.md new file mode 100644 index 0000000000..06bdf01348 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.english.md @@ -0,0 +1,787 @@ +--- +id: 5d822fd413a79914d39e9935 +title: Part 110 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb6 = code.match(/\.fb6\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color3\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color3\s*\)\s*10%\s*,\s*transparent\s*10%\s*,\s*transparent\s*30%\s*\)\s*,\s*repeating-linear-gradient\(\s*var\(\s*--building-color3\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color3\s*\)\s*10%\s*,\s*var\(\s*--window-color3\s*\)\s*10%\s*,\s*var\(\s*--window-color3\s*\)\s*30%\s*\)\s*(;|})/g.test(fb6)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.english.md new file mode 100644 index 0000000000..ffe4e1a381 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.english.md @@ -0,0 +1,792 @@ +--- +id: 5d822fd413a79914d39e9931 +title: Part 111 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You can remove the `background-color` for this building now, since it isn't needed. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb6 = code.match(/\.fb6\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(fb6)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.english.md new file mode 100644 index 0000000000..763c2c721a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.english.md @@ -0,0 +1,790 @@ +--- +id: 5d822fd413a79914d39e9936 +title: Part 112 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Okay, the buildings are done. Go back to the `*` selector and remove the border you applied to everything at the beginning and the buildings will come together. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const all = code.match(/\*\s*{[\s\S]+?[^}]}/g)[0]; assert(!/border\s*:\s*1px\s+solid\s+black/g.test(all)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.english.md new file mode 100644 index 0000000000..0824bb6b04 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.english.md @@ -0,0 +1,789 @@ +--- +id: 5d822fd413a79914d39e9937 +title: Part 113 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add `sky` as a second class to the `background-buildings` element. You are going to make a background for the skyline. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".background-buildings.sky").length === 1); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.english.md new file mode 100644 index 0000000000..2024ccbcfe --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.english.md @@ -0,0 +1,798 @@ +--- +id: 5d822fd413a79914d39e9938 +title: Part 114 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const sky = code.match(/\.sky\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*radial-gradient\(\s*#ffcf33\s*(0%\s*,|,)\s*#ffcf33\s*20%\s*,\s*#ffff66\s*21%\s*,\s*#bbeeff\s*100%\s*\)\s*(;|})/g.test(sky)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.english.md new file mode 100644 index 0000000000..3a6f1fcc15 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.english.md @@ -0,0 +1,808 @@ +--- +id: 5d822fd413a79914d39e9939 +title: Part 115 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +At the top of the sky gradient color list, where you would put a direction for the gradient; add `closest-corner circle at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const sky = code.match(/\.sky\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*radial-gradient\(\s*closest-corner\s+circle\s+at\s+15%\s+15%\s*,\s*#ffcf33\s*(0%\s*,|,)\s*#ffcf33\s*20%\s*,\s*#ffff66\s*21%\s*,\s*#bbeeff\s*100%\s*\)\s*(;|})/g.test(sky)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.english.md new file mode 100644 index 0000000000..bc8e3ea196 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.english.md @@ -0,0 +1,820 @@ +--- +id: 5d822fd413a79914d39e993a +title: Part 116 +challengeType: 0 +isBeta: true +--- + +## Description +
+A media query can be used to change styles based on certain conditions, and they look like this: + +```css +@media (condition) { + +} +``` + +Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(/\@media\s*\(\s*max-width\s*:\s*1000px\s*\)\s*{\s*}/g.test(code)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.english.md new file mode 100644 index 0000000000..2a64ae7748 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.english.md @@ -0,0 +1,825 @@ +--- +id: 5d822fd413a79914d39e993b +title: Part 117 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const sky = code.match(/\.sky\s*{[\s\S]+?[^}]}/g)[1]; assert(/background\s*:\s*radial-gradient\(\s*closest-corner\s+circle\s+at\s+15%\s+15%\s*,\s*#ffcf33\s*(0%\s*,|,)\s*#ffcf33\s*20%\s*,\s*#ffff66\s*21%\s*,\s*#bbeeff\s*100%\s*\)\s*(;|})/g.test(sky)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.english.md new file mode 100644 index 0000000000..211131f0c6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.english.md @@ -0,0 +1,833 @@ +--- +id: 5d822fd413a79914d39e993c +title: Part 118 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const sky = code.match(/\.sky\s*{[\s\S]+?[^}]}/g)[1]; assert(/background\s*:\s*radial-gradient\(\s*closest-corner\s+circle\s+at\s+15%\s+15%\s*,\s*#ccc\s*(0%\s*,|,)\s*#ccc\s*20%\s*,\s*#445\s*21%\s*,\s*#223\s*100%\s*\)\s*(;|})/g.test(sky)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-119.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-119.english.md new file mode 100644 index 0000000000..077a6d3b80 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-119.english.md @@ -0,0 +1,840 @@ +--- +id: 5d822fd413a79914d39e993d +title: Part 119 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const root = code.match(/:root\s*{[\s\S]+?[^}]}/g)[1]; assert(/--building-color1\s*:\s*#000\s*(;|})/g.test(root) && /--building-color2\s*:\s*#000\s*(;|})/g.test(root) && /--building-color3\s*:\s*#000\s*(;|})/g.test(root) && /--building-color4\s*:\s*#000\s*(;|})/g.test(root)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-12.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-12.english.md new file mode 100644 index 0000000000..88b7ed2176 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-12.english.md @@ -0,0 +1,145 @@ +--- +id: 5d822fd413a79914d39e98d4 +title: Part 12 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `bb1a`, `80%` and `10%` to `bb1b`, `90%` and `10%` to `bb1c`, and `100%` and `70%` to `bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% to fill the container vertically. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1a = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0]; const bb1b = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0]; const bb1c = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0]; const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*70%\s*(;|})/g.test(bb1a) && /height\s*:\s*10%\s*(;|})/g.test(bb1a) && /width\s*:\s*80%\s*(;|})/g.test(bb1b) && /height\s*:\s*10%\s*(;|})/g.test(bb1b) && /width\s*:\s*90%\s*(;|})/g.test(bb1c) && /height\s*:\s*10%\s*(;|})/g.test(bb1c) && /width\s*:\s*100%\s*(;|})/g.test(bb1d) && /height\s*:\s*70%\s*(;|})/g.test(bb1d)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-120.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-120.english.md new file mode 100644 index 0000000000..fdc21bce15 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-120.english.md @@ -0,0 +1,853 @@ +--- +id: 5d822fd413a79914d39e993e +title: Part 120 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night. + +Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great! +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const root = code.match(/:root\s*{[\s\S]+?[^}]}/g)[1]; assert(/--window-color1\s*:\s*#777\s*(;|})/g.test(root) && /--window-color2\s*:\s*#777\s*(;|})/g.test(root) && /--window-color3\s*:\s*#777\s*(;|})/g.test(root) && /--window-color4\s*:\s*#777\s*(;|})/g.test(root)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-13.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-13.english.md new file mode 100644 index 0000000000..be4823fd2e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-13.english.md @@ -0,0 +1,168 @@ +--- +id: 5d822fd413a79914d39e98d5 +title: Part 13 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give your `bb1` element these style properties: `display: flex;`, `flex-direction: column;`, and `align-items: center;`. This will center the parts of the building using "flex" or "flexbox". You will learn about it in more detail on another project. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1 = $(".bb1"); assert(bb1.css("display") === "flex" && bb1.css("flex-direction") === "column" && bb1.css("align-items") === "center"); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-14.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-14.english.md new file mode 100644 index 0000000000..558bdae126 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-14.english.md @@ -0,0 +1,172 @@ +--- +id: 5d822fd413a79914d39e98d6 +title: Part 14 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Now you have something that is starting to resemble a building. Lets get into your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; assert(/--building-color1\s*:\s*#999\s*(;|\s*})/g.test(bb1style)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-15.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-15.english.md new file mode 100644 index 0000000000..05755055d7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-15.english.md @@ -0,0 +1,174 @@ +--- +id: 5d822fd413a79914d39e98d7 +title: Part 15 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +To use a variable, just put the variable name in parenthesis with `var` in front of them like this: `var(--variable-name)`. Add your variable as the value of the `background-color` property of the `bb1a` class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of `#999`. So `#999` will be used as the value for the `background-color` property. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1aStyle = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0]; assert(/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(bb1aStyle)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-16.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-16.english.md new file mode 100644 index 0000000000..15217595e7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-16.english.md @@ -0,0 +1,178 @@ +--- +id: 5d822fd413a79914d39e98d8 +title: Part 16 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +It's that simple. Use the same variable as the `background-color` of the `bb1b`, `bb1c`, and `bb1d` classes to fill in the rest of the building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1bStyle = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0]; const bb1cStyle = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0]; const bb1dStyle = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; assert(/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(bb1bStyle) && /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(bb1cStyle) && /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(bb1dStyle)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-17.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-17.english.md new file mode 100644 index 0000000000..ee94e285ec --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-17.english.md @@ -0,0 +1,181 @@ +--- +id: 5d822fd413a79914d39e98d9 +title: Part 17 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +I don't really like that color. Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; assert(/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-18.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-18.english.md new file mode 100644 index 0000000000..761602fe8d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-18.english.md @@ -0,0 +1,184 @@ +--- +id: 5d822fd413a79914d39e98da +title: Part 18 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Your first building looks pretty good now. Let's make some more! Nest three new `div` elements in the `background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb = $(".background-buildings"); assert(bb.children(".bb2").length === 1 && bb.children(".bb3").length === 1 && bb.children(".bb4").length === 1); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-19.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-19.english.md new file mode 100644 index 0000000000..2a437aad34 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-19.english.md @@ -0,0 +1,202 @@ +--- +id: 5d822fd413a79914d39e98db +title: Part 19 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give the new buildings `width` and `height` properties of: `10%` and `50%` for `bb2`, `10%` and `55%` for `bb3`, and `11%` and `58%` for `bb4`. You will be using almost all percent based units and some Flexbox for this project, so everything will be completely responsive. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2 = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0]; const bb4 = code.match(/\.bb4\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*10%\s*(;|})/g.test(bb2) && /height\s*:\s*50%\s*(;|})/g.test(bb2) && /width\s*:\s*10%\s*(;|})/g.test(bb3) && /height\s*:\s*55%\s*(;|})/g.test(bb3) && /width\s*:\s*11%\s*(;|})/g.test(bb4) && /height\s*:\s*58%\s*(;|})/g.test(bb4)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-2.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-2.english.md new file mode 100644 index 0000000000..7b7b0c276b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-2.english.md @@ -0,0 +1,52 @@ +--- +id: 5d822fd413a79914d39e98ca +title: Part 2 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add opening and closing `html` tags below the doctype so you have a place to start putting some code. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(code.match(/\s*\s*<\/html\s*>/gi)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + +``` + +
+
+ + +## Solution +
+ +```html + + + + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-20.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-20.english.md new file mode 100644 index 0000000000..62e85646c8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-20.english.md @@ -0,0 +1,220 @@ +--- +id: 5d822fd413a79914d39e98dc +title: Part 20 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +The buildings are stacked on top of each other and running off the screen. Let's fix that. Add the properties `display: flex;`, `align-items: flex-end;`, and `justify-content: space-evenly;` to the `background-buildings` class. This will use Flexbox again to evenly space the buildings across the bottom of the element. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb = $(".background-buildings"); assert(bb.css("display") === "flex" && bb.css("align-items") === "flex-end" && bb.css("justify-content") === "space-evenly"); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-21.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-21.english.md new file mode 100644 index 0000000000..457e030f58 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-21.english.md @@ -0,0 +1,228 @@ +--- +id: 5d822fd413a79914d39e98dd +title: Part 21 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +I don't like how spaced out the buildings are. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `bb3` and `bb4`. These will be added as things that are spaced evenly across the container, effectively moving the buildings closer to the center. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb = $(".background-buildings").children("div"); assert(bb.length === 9 && bb[2] === $("div.bb1")[0] && bb[3] === $("div.bb2")[0] && bb[4] === $("div.bb3")[0] && bb[6] === $("div.bb4")[0]); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-22.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-22.english.md new file mode 100644 index 0000000000..21a6d38cdf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-22.english.md @@ -0,0 +1,235 @@ +--- +id: 5d822fd413a79914d39e98de +title: Part 22 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Create a new variable by the other one called `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `bb2`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; const bb2style = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; assert(/--building-color2\s*:\s*#66cc99\s*(;|\s*})/g.test(bb1style) && /background-color\s*:\s*var\(\s*--building-color2\s*\)\s*(;|\s*})/g.test(bb2style)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-23.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-23.english.md new file mode 100644 index 0000000000..054af9c525 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-23.english.md @@ -0,0 +1,237 @@ +--- +id: 5d822fd413a79914d39e98df +title: Part 23 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Hmm, I'm not sure why that didn't work. You can add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `bb2`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2style = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; assert(/background-color\s*:\s*var\(\s*--building-color2\s*,\s*green\s*\)\s*(;|\s*})/g.test(bb2style)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-24.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-24.english.md new file mode 100644 index 0000000000..b348ac02d9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-24.english.md @@ -0,0 +1,239 @@ +--- +id: 5d822fd413a79914d39e98e0 +title: Part 24 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Create a new variable by the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `bb3` class and give it a fallback value of `pink`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; const bb3style = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0];assert(/--building-color3\s*:\s*#cc6699\s*(;|\s*})/g.test(bb1style) && /background-color\s*:\s*var\(\s*--building-color3\s*,\s*pink\s*\)\s*(;|\s*})/g.test(bb3style)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-25.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-25.english.md new file mode 100644 index 0000000000..18b94992d9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-25.english.md @@ -0,0 +1,244 @@ +--- +id: 5d822fd413a79914d39e98e1 +title: Part 25 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +That one used the fallback value as well? I see the problem now! The variables you declared in `bb1` do not cascade to the `bb2` and `bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet and move all your variable declarations there. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(rootStyle) && /--building-color2\s*:\s*#66cc99\s*(;|\s*})/g.test(rootStyle) && /--building-color3\s*:\s*#cc6699\s*(;|\s*})/g.test(rootStyle) && !/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style) && !/--building-color2\s*:\s*#66cc99\s*(;|\s*})/g.test(bb1style) && !/--building-color3\s*:\s*#cc6699\s*(;|\s*})/g.test(bb1style)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-26.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-26.english.md new file mode 100644 index 0000000000..5ad20b95e5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-26.english.md @@ -0,0 +1,246 @@ +--- +id: 5d822fd413a79914d39e98e2 +title: Part 26 +challengeType: 0 +isBeta: true +--- + +## Description +
+Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2style = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; const bb3style = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0]; assert(/background-color\s*:\s*var\(\s*--building-color2\s*\)\s*(;|\s*})/g.test(bb2style) && /background-color\s*:\s*var\(\s*--building-color3\s*\)\s*(;|\s*})/g.test(bb3style)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-27.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-27.english.md new file mode 100644 index 0000000000..1f0d6afba6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-27.english.md @@ -0,0 +1,249 @@ +--- +id: 5d822fd413a79914d39e98e3 +title: Part 27 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Create another variable named `--building-color4` and give it a value of `#538cc6`, make sure it's in the `:root` selector this time. Then use it to fill in the last building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; const bb4style = code.match(/\.bb4\s*{[\s\S]+?[^}]}/g)[0]; assert(/--building-color4\s*:\s*#538cc6\s*(;|\s*})/g.test(rootStyle) && /background-color\s*:\s*var\(\s*--building-color4\s*\)\s*(;|\s*})/g.test(bb4style)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-28.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-28.english.md new file mode 100644 index 0000000000..59c14cbc2a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-28.english.md @@ -0,0 +1,253 @@ +--- +id: 5d822fd413a79914d39e98e4 +title: Part 28 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +The background buildings are starting to look pretty good. Create a new `div` below the `background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bodyDivs = $("#display-body").children("div"); assert(bodyDivs.length === 2 && bodyDivs[1] === $("div.foreground-buildings")[0]); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-29.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-29.english.md new file mode 100644 index 0000000000..9e8d485455 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-29.english.md @@ -0,0 +1,262 @@ +--- +id: 5d822fd413a79914d39e98e5 +title: Part 29 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You want the foreground buildings container to sit directly on top of the background buildings element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb = code.match(/\.foreground-buildings\s*{[\s\S]+?[^}]}/g)[0]; assert($(".foreground-buildings").css("position") === "absolute" && $(".foreground-buildings").css("top") === "0px" && /width\s*:\s*100%\s*(;|})/g.test(fb) && /height\s*:\s*100%\s*(;|})/g.test(fb)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-3.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-3.english.md new file mode 100644 index 0000000000..d5ae1fdcd8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-3.english.md @@ -0,0 +1,60 @@ +--- +id: 5d822fd413a79914d39e98cb +title: Part 3 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Next, add opening and closing `head` and `body` tags within the html element. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(code.match(/\s*\s*<\/head\s*>\s*\s*<\/body\s*>\s*<\/html\s*>/gi)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + +``` + +
+
+ + +## Solution +
+ +```html + + + + + + + + + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-30.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-30.english.md new file mode 100644 index 0000000000..f4fd4c58d6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-30.english.md @@ -0,0 +1,276 @@ +--- +id: 5d822fd413a79914d39e98e6 +title: Part 30 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Nest six `div` elements within `foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb = $(".foreground-buildings").children("div"); assert(fb.length === 6 && fb[0] === $("div.fb1")[0] && fb[1] === $("div.fb2")[0] && fb[2] === $("div.fb3")[0] && fb[3] === $("div.fb4")[0] && fb[4] === $("div.fb5")[0] && fb[5] === $("div.fb6")[0]); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-31.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-31.english.md new file mode 100644 index 0000000000..8b3a3d166e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-31.english.md @@ -0,0 +1,313 @@ +--- +id: 5d822fd413a79914d39e98e7 +title: Part 31 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give the six new elements these `width` and `height` values: `10%` and `60%` to `fb1`, `10%` and `40%` to `fb2`, `10%` and `35%` to `fb3`, `8%` and `45%` to `fb4`, `10%` and `33%` to `fb5`, and `9%` and `38%` to `fb6`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(/\.fb1\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*60%\s*(;|})|height\s*:\s*60%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test(code) && /\.fb2\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*40%\s*(;|})|height\s*:\s*40%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test(code) && /\.fb3\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*35%\s*(;|})|height\s*:\s*35%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test(code) && /\.fb4\s*{\s*(width\s*:\s*8%\s*;\s*height\s*:\s*45%\s*(;|})|height\s*:\s*45%\s*;\s*width\s*:\s*8%\s*(;|}))/g.test(code) && /\.fb5\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*33%\s*(;|})|height\s*:\s*33%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test(code) && /\.fb6\s*{\s*(width\s*:\s*9%\s*;\s*height\s*:\s*38%\s*(;|})|height\s*:\s*38%\s*;\s*width\s*:\s*9%\s*(;|}))/g.test(code)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-32.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-32.english.md new file mode 100644 index 0000000000..7508f70e67 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-32.english.md @@ -0,0 +1,346 @@ +--- +id: 5d822fd413a79914d39e98e8 +title: Part 32 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add the same `display`, `align-items`, and `justify-content` properties and values to `foreground-buildings` that you used on `background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb = $(".foreground-buildings"); assert(fb.css("display") === "flex" && fb.css("align-items") === "flex-end" && fb.css("justify-content") === "space-evenly"); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-33.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-33.english.md new file mode 100644 index 0000000000..ac4666b98a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-33.english.md @@ -0,0 +1,349 @@ +--- +id: 5d822fd413a79914d39e98e9 +title: Part 33 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +I see some code that can be optimized. Move the `position` and `top` properties and values from `foreground-buildings` to `background-buildings`. Then select both `background-buildings` and `foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".background-buildings").css("position") === "absolute" && $(".background-buildings").css("top") === "0px" && /(\.background-buildings\s*,\s*\.foreground-buildings|\.foreground-buildings\s*,\s*\.background-buildings)/g.test(code)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-34.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-34.english.md new file mode 100644 index 0000000000..8d7c2f0e3a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-34.english.md @@ -0,0 +1,341 @@ +--- +id: 5d822fd413a79914d39e98ea +title: Part 34 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Now that you did that, you can delete the old `foreground-buildings` class and all of its properties since they aren't needed anymore. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(code.match(/\.foreground-buildings/g).length === 1); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-35.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-35.english.md new file mode 100644 index 0000000000..0f06db92aa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-35.english.md @@ -0,0 +1,339 @@ +--- +id: 5d822fd413a79914d39e98eb +title: Part 35 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `fb3` and `fb4`, `--building-color2` for `fb5`, `--building-color3` for `fb2` and `fb6`, and `--building-color4` for `fb1`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".fb1").css("background-color") === "rgb(83, 140, 198)" && $(".fb2").css("background-color") === "rgb(204, 102, 153)" && $(".fb3").css("background-color") === "rgb(170, 128, 255)" && $(".fb4").css("background-color") === "rgb(170, 128, 255)" && $(".fb5").css("background-color") === "rgb(102, 204, 153)" && $(".fb6").css("background-color") === "rgb(204, 102, 153)"); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-36.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-36.english.md new file mode 100644 index 0000000000..740b2217cf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-36.english.md @@ -0,0 +1,350 @@ +--- +id: 5d822fd413a79914d39e98ec +title: Part 36 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Squeeze the buildings together again by adding two empty `div` elements at both the top and bottom of the `foreground-buildings` element, and one more in between `fb2` and `fb3`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb = $(".foreground-buildings").children("div"); assert(fb.length === 11 && fb[2] === $("div.fb1")[0] && fb[3] === $("div.fb2")[0] && fb[5] === $("div.fb3")[0] && fb[6] === $("div.fb4")[0] && fb[7] === $("div.fb5")[0] && fb[8] === $("div.fb6")[0]); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-37.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-37.english.md new file mode 100644 index 0000000000..9094087a19 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-37.english.md @@ -0,0 +1,359 @@ +--- +id: 5d822fd413a79914d39e98ed +title: Part 37 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Move the position of `fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb4style = code.match(/\.fb4\s*{[\s\S]+?[^}]}/g)[0]; const fb5style = code.match(/\.fb5\s*{[\s\S]+?[^}]}/g)[0]; assert($(".fb4").css("position") === "relative" && $(".fb5").css("position") === "relative" && /left\s*:\s*10%\s*(;|})/g.test(fb4style) && /right\s*:\s*10%\s*(;|})/g.test(fb5style)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-38.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-38.english.md new file mode 100644 index 0000000000..937308b06a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-38.english.md @@ -0,0 +1,365 @@ +--- +id: 5d822fd413a79914d39e98ee +title: Part 38 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Your code is starting to get quite long. Add a comment above the `fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//g.test(code) && /\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//g.test(code)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-39.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-39.english.md new file mode 100644 index 0000000000..157320e2fe --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-39.english.md @@ -0,0 +1,368 @@ +--- +id: 5d822fd413a79914d39e98ef +title: Part 39 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--window-color1\s*:\s*black\s*(;|})/g.test(rootStyle)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-4.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-4.english.md new file mode 100644 index 0000000000..d72049c222 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-4.english.md @@ -0,0 +1,66 @@ +--- +id: 5d822fd413a79914d39e98cc +title: Part 4 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Nest opening and closing `title` and `style` tags in the head area and give your project a title of `freeCodeCamp Skyline Project`. Any styles you are asked to add during this project should go in this style area. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(code.match(/\s*(\s*<\/style\s*>\s*freeCodeCamp Skyline Project<\/title\s*>|freeCodeCamp Skyline Project<\/title\s*>\s*\s*<\/style>)\s*<\/head\s*>/g)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + + + + + + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-40.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-40.english.md new file mode 100644 index 0000000000..39442b99ec --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-40.english.md @@ -0,0 +1,382 @@ +--- +id: 5d822fd413a79914d39e98f0 +title: Part 40 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this: + +```css +gradient-type( + color1, + color2 +); +``` + +In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1a = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*linear-gradient\(\s*var\(\s*--building-color1\s*\)\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test(bb1a)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-41.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-41.english.md new file mode 100644 index 0000000000..bdc96bd1ba --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-41.english.md @@ -0,0 +1,380 @@ +--- +id: 5d822fd413a79914d39e98f1 +title: Part 41 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You want to add the same gradient to the next two sections. But instead of doing that, create a new class called `bb1-window` and move the `height` and `background` properties and values from `bb1a` to the new class. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1wStyle = code.match(/\.bb1-window\s*{[\s\S]+?[^}]}/g)[0]; assert(/height\s*:\s*10%\s*(;|})/g.test(bb1wStyle) && /background\s*:\s*linear-gradient\(\s*var\(\s*--building-color1\s*\)\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test(bb1wStyle)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-42.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-42.english.md new file mode 100644 index 0000000000..28e32e99c6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-42.english.md @@ -0,0 +1,383 @@ +--- +id: 5d822fd413a79914d39e98f2 +title: Part 42 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add the new `bb1-window` class to the `bb1a`, `bb1b`, and `bb1c` elements. This will apply the gradient to them. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".bb1a.bb1-window").length === 1 && $(".bb1b.bb1-window").length === 1 && $(".bb1c.bb1-window").length === 1); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-43.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-43.english.md new file mode 100644 index 0000000000..1d14771eb5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-43.english.md @@ -0,0 +1,378 @@ +--- +id: 5d822fd413a79914d39e98f3 +title: Part 43 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You don't need the `height` or `background-color` properties in `bb1a`, `bb1b` or `bb1c` anymore, so go ahead and remove them. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1aStyle = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0]; const bb1bStyle = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0]; const bb1cStyle = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0]; assert(!/(height|background-color)/g.test(bb1aStyle) && !/(height|background-color)/g.test(bb1bStyle) && !/(height|background-color)/g.test(bb1cStyle)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-44.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-44.english.md new file mode 100644 index 0000000000..7b2341ef5a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-44.english.md @@ -0,0 +1,388 @@ +--- +id: 5d822fd413a79914d39e98f4 +title: Part 44 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Gradients can use as many colors as you want like this: + +```css +gradient-type( + color1, + color2, + color3 +); +``` + +Add a `linear-gradient` to `bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*linear-gradient\(\s*orange\s*,\s*var\(\s*--building-color1\s*\)\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test(bb1d)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-45.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-45.english.md new file mode 100644 index 0000000000..313de01fda --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-45.english.md @@ -0,0 +1,382 @@ +--- +id: 5d822fd413a79914d39e98f5 +title: Part 45 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `bb1d`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1dStyle = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(bb1dStyle)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-46.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-46.english.md new file mode 100644 index 0000000000..d1eacf3050 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-46.english.md @@ -0,0 +1,391 @@ +--- +id: 5d822fd413a79914d39e98f6 +title: Part 46 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You can specify where you want a gradient transition to complete by adding it to the color like this: + +```css +gradient-type( + color1, + color2 20%, + color3 +); +``` + +Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `bb1d` gradient so you can see it in action. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*linear-gradient\(\s*orange\s*,\s*var\(\s*--building-color1\s*\)\s*80%\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test(bb1d)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-47.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-47.english.md new file mode 100644 index 0000000000..2974cb33c8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-47.english.md @@ -0,0 +1,380 @@ +--- +id: 5d822fd413a79914d39e98f7 +title: Part 47 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Remove `orange` from the `bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*linear-gradient\(\s*var\(\s*--building-color1\s*\)\s*50%\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test(bb1d)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-48.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-48.english.md new file mode 100644 index 0000000000..ba1bed8f73 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-48.english.md @@ -0,0 +1,382 @@ +--- +id: 5d822fd413a79914d39e98f8 +title: Part 48 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Nest two new `div` elements within `bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2 = $(".bb2").children("div"); assert(bb2.length === 2 && bb2[0] === $(".bb2a")[0] && bb2[1] === $(".bb2b")[0]); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-49.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-49.english.md new file mode 100644 index 0000000000..3beb559f3d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-49.english.md @@ -0,0 +1,390 @@ +--- +id: 5d822fd413a79914d39e98f9 +title: Part 49 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give `bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(/\.bb2b\s*{\s*(width\s*:\s*100%\s*;\s*height\s*:\s*100%\s*(;|})|height\s*:\s*100%\s*;\s*width\s*:\s*100%\s*(;|}))/g.test(code)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-5.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-5.english.md new file mode 100644 index 0000000000..373ea66782 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-5.english.md @@ -0,0 +1,71 @@ +--- +id: 5d822fd413a79914d39e98cd +title: Part 5 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector in your style area and giving it a `border` of `1px solid black`. This is a trick I like to use to help visualize where elements are and their size. You will remove this later. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(code.match(/\s*\*\s*{\s*border\s*:\s*1px\s+solid\s+black\s*;?\s*}\s*<\/style\s*>/g)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-50.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-50.english.md new file mode 100644 index 0000000000..6de8c4790f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-50.english.md @@ -0,0 +1,396 @@ +--- +id: 5d822fd413a79914d39e98fa +title: Part 50 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--window-color2\s*:\s*#8cd9b3\s*(;|})/g.test(rootStyle)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-51.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-51.english.md new file mode 100644 index 0000000000..3e0c4537ba --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-51.english.md @@ -0,0 +1,413 @@ +--- +id: 5d822fd413a79914d39e98fb +title: Part 51 +challengeType: 0 +isBeta: true +--- + +## Description +
+You can make an instant color change in a gradient by giving the transition zero space like this: + +```css +gradient-type( + color1, + color1 50%, + color2 50%, + color2 +); +``` + +Here, the top half of the element will be `color1` and the bottom half will be `color2`. Add a `linear-gradient` to `bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2b = code.match(/\.bb2b\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*linear-gradient\(\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*9%\s*\)\s*(;|})/g.test(bb2b)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-52.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-52.english.md new file mode 100644 index 0000000000..d0f33af371 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-52.english.md @@ -0,0 +1,409 @@ +--- +id: 5d822fd413a79914d39e98fc +title: Part 52 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2b = code.match(/\.bb2b\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*repeating-linear-gradient\(\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*9%\s*\)\s*(;|})/g.test(bb2b)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-53.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-53.english.md new file mode 100644 index 0000000000..3809810a42 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-53.english.md @@ -0,0 +1,408 @@ +--- +id: 5d822fd413a79914d39e98fd +title: Part 53 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +In the next few steps, you are going to use some tricks with CSS borders to turn the `bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `bb2` since you don't need it anymore. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2 = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(bb2)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-54.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-54.english.md new file mode 100644 index 0000000000..b7ef1c7d66 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-54.english.md @@ -0,0 +1,429 @@ +--- +id: 5d822fd413a79914d39e98fe +title: Part 54 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add these properties to `bb2a`: + +```css + margin: auto; + width: 5vw; + height: 5vw; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 1vw solid #999; + border-right: 1vw solid #999; +``` + +After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; assert(/margin\s*:\s*auto\s*(;|})/g.test(bb2a) && /width\s*:\s*5vw\s*(;|})/g.test(bb2a) && /height\s*:\s*5vw\s*(;|})/g.test(bb2a) && /border-top\s*:\s*1vw\s+solid\s+#000\s*(;|})/g.test(bb2a) && /border-bottom\s*:\s*1vw\s+solid\s+#000\s*(;|})/g.test(bb2a) && /border-left\s*:\s*1vw\s+solid\s+#999\s*(;|})/g.test(bb2a) && /border-right\s*:\s*1vw\s+solid\s+#999\s*(;|})/g.test(bb2a)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-55.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-55.english.md new file mode 100644 index 0000000000..34be6095f4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-55.english.md @@ -0,0 +1,425 @@ +--- +id: 5d822fd413a79914d39e98ff +title: Part 55 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Next, remove the `width` and `height` from `bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; assert(!/width/g.test(bb2a) && !/height/g.test(bb2a) && /border-left\s*:\s*5vw\s+solid\s+#999\s*(;|})/g.test(bb2a) && /border-right\s*:\s*5vw\s+solid\s+#999\s*(;|})/g.test(bb2a)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-56.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-56.english.md new file mode 100644 index 0000000000..4aca876591 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-56.english.md @@ -0,0 +1,423 @@ +--- +id: 5d822fd413a79914d39e9900 +title: Part 56 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Next, change the two `#999` of `bb2a` to `transparent`. This will make the left and right borders invisible. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; assert(/border-left\s*:\s*5vw\s+solid\s+transparent\s*(;|})/g.test(bb2a) && /border-right\s*:\s*5vw\s+solid\s+transparent\s*(;|})/g.test(bb2a)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-57.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-57.english.md new file mode 100644 index 0000000000..837a98c8e5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-57.english.md @@ -0,0 +1,421 @@ +--- +id: 5d822fd413a79914d39e9901 +title: Part 57 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Remove the `margin` and `border-top` properties and values from `bb2a` to turn it into a triangle for the top of the building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; assert(!/margin/g.test(bb2a) && !/border-top/g.test(bb2a)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-58.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-58.english.md new file mode 100644 index 0000000000..e2062f57c3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-58.english.md @@ -0,0 +1,419 @@ +--- +id: 5d822fd413a79914d39e9902 +title: Part 58 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Finally, on the `border-bottom` property of `bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; assert(/border-bottom\s*:\s*5vh\s+solid\s+var\(\s*--building-color2\s*\)\s*(;|})/g.test(bb2a)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-59.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-59.english.md new file mode 100644 index 0000000000..af0b5c086f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-59.english.md @@ -0,0 +1,420 @@ +--- +id: 5d822fd413a79914d39e9903 +title: Part 59 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-6.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-6.english.md new file mode 100644 index 0000000000..d5263e96c9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-6.english.md @@ -0,0 +1,76 @@ +--- +id: 5d822fd413a79914d39e98ce +title: Part 6 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Also add a `box-sizing` of `border-box` to the everything. This will make it so the border you added doesn't add any size to your elements. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($("#display-body").css("box-sizing") === "border-box"); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-60.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-60.english.md new file mode 100644 index 0000000000..8d5fd826fe --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-60.english.md @@ -0,0 +1,436 @@ +--- +id: 5d822fd413a79914d39e9904 +title: Part 60 +challengeType: 0 +isBeta: true +--- + +## Description +
+So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this: + +```css +gradient-type( + direction + color1, + color2 +); +``` + +Fill in `bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color3\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color3\s*\)\s*(7\.5%\s*,|,)\s*var\(\s*--window-color3\s*\)\s*15%\s*\)\s*(;|})/g.test(bb3)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-61.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-61.english.md new file mode 100644 index 0000000000..29d5d3d3db --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-61.english.md @@ -0,0 +1,432 @@ +--- +id: 5d822fd413a79914d39e9905 +title: Part 61 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Remove the `background-color` property and value from `bb3` since you are using the gradient as the background now. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(bb3)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-62.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-62.english.md new file mode 100644 index 0000000000..e3825f7502 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-62.english.md @@ -0,0 +1,435 @@ +--- +id: 5d822fd413a79914d39e9906 +title: Part 62 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +The next building will have three sections. Nest three `div` elements within `bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb4 = $(".bb4").children("div"); assert(bb4.length === 3 && bb4[0] === $(".bb4a")[0] && bb4[1] === $(".bb4b")[0] && bb4[2] === $(".bb4c")[0]); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-63.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-63.english.md new file mode 100644 index 0000000000..684c0ec99f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-63.english.md @@ -0,0 +1,454 @@ +--- +id: 5d822fd413a79914d39e9907 +title: Part 63 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `bb4a`, `80%` and `5%` to `bb4b`, and `100%` and `85%` to `bb4c`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb4a = code.match(/\.bb4a\s*{[\s\S]+?[^}]}/g)[0]; const bb4b = code.match(/\.bb4b\s*{[\s\S]+?[^}]}/g)[0]; const bb4c = code.match(/\.bb4c\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*3%\s*(;|})/g.test(bb4a) && /height\s*:\s*10%\s*(;|})/g.test(bb4a) && /width\s*:\s*80%\s*(;|})/g.test(bb4b) && /height\s*:\s*5%\s*(;|})/g.test(bb4b) && /width\s*:\s*100%\s*(;|})/g.test(bb4c) && /height\s*:\s*85%\s*(;|})/g.test(bb4c)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-64.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-64.english.md new file mode 100644 index 0000000000..61563f9bba --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-64.english.md @@ -0,0 +1,471 @@ +--- +id: 5d822fd413a79914d39e9908 +title: Part 64 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Remove the `background-color` property and value from `bb4` and add it to the three new sections; `bb4a`, `bb4b`, and `bb4c`, so only the sections are filled. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb4 = code.match(/\.bb4\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(bb4) && $(".bb4a").css("background-color") === "rgb(83, 140, 198)" && $(".bb4b").css("background-color") === "rgb(83, 140, 198)" && $(".bb4c").css("background-color") === "rgb(83, 140, 198)"); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-65.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-65.english.md new file mode 100644 index 0000000000..db96bd82fd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-65.english.md @@ -0,0 +1,477 @@ +--- +id: 5d822fd413a79914d39e9909 +title: Part 65 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You want `bb4` to share the properties of `bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert(/\.building-wrap\s*{\s*}/g.test(code)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-66.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-66.english.md new file mode 100644 index 0000000000..c24ad73418 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-66.english.md @@ -0,0 +1,480 @@ +--- +id: 5d822fd413a79914d39e990a +title: Part 66 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Move the `display`, `flex-direction`, and `align-items` properties and values from `bb1` to the new `building-wrap` class. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bWrap = code.match(/\.building-wrap\s*{[\s\S]+?[^}]}/g)[0]; assert(/display\s*:\s*flex\s*(;|})/g.test(bWrap) && /flex-direction\s*:\s*column\s*(;|})/g.test(bWrap) && /align-items\s*:\s*center\s*(;|})/g.test(bWrap)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-67.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-67.english.md new file mode 100644 index 0000000000..9e3a250c3a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-67.english.md @@ -0,0 +1,479 @@ +--- +id: 5d822fd413a79914d39e990b +title: Part 67 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add the new `building-wrap` class to the `bb1` and `bb4` elements. This will apply the centering properties to the buildings that need it. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".bb1.building-wrap").length === 1 && $(".bb4.building-wrap").length === 1); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-68.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-68.english.md new file mode 100644 index 0000000000..c689e9a514 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-68.english.md @@ -0,0 +1,480 @@ +--- +id: 5d822fd413a79914d39e990c +title: Part 68 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-69.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-69.english.md new file mode 100644 index 0000000000..a4e8a17141 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-69.english.md @@ -0,0 +1,486 @@ +--- +id: 5d822fd413a79914d39e990d +title: Part 69 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Nest four new `div` elements within `bb4c`, give them all the class of `bb4-window`. These will be windows for this building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".bb4c").children("div.bb4-window").length === 4); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-7.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-7.english.md new file mode 100644 index 0000000000..70ac0f40d4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-7.english.md @@ -0,0 +1,83 @@ +--- +id: 5d822fd413a79914d39e98cf +title: Part 7 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You can see the body, it's the horizontal line on your page; the box around it is the html element. Make your body fill the whole viewport by giving it a `height` of `100vh`. Remove the default margin from the body by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; assert(/height\s*:\s*100vh\s*(;|})/g.test(body) && /margin\s*:\s*(0|0px)\s*(;|})/g.test(body) && /overflow\s*:\s*hidden\s*(;|})/g.test(body)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-70.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-70.english.md new file mode 100644 index 0000000000..15b2a77d38 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-70.english.md @@ -0,0 +1,497 @@ +--- +id: 5d822fd413a79914d39e990e +title: Part 70 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb4Window = code.match(/\.bb4-window\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*18%\s*(;|})/g.test(bb4Window) && /height\s*:\s*90%\s*(;|})/g.test(bb4Window) && /background-color\s*:\s*var\(\s*--window-color4\s*\)\s*(;|})/g.test(bb4Window)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-71.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-71.english.md new file mode 100644 index 0000000000..38a81ae490 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-71.english.md @@ -0,0 +1,510 @@ +--- +id: 5d822fd413a79914d39e990f +title: Part 71 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `building-wrap` called `window-wrap` and add these properties to it: `display: flex;`, `align-items: center;`, and `justify-content: space-evenly;`. This will be used in a few places to center window elements vertically and space them evenly in their parent. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const wWrap = code.match(/\.window-wrap\s*{[\s\S]+?[^}]}/g)[0]; assert(/display\s*:\s*flex\s*(;|})/g.test(wWrap) && /align-items\s*:\s*center\s*(;|})/g.test(wWrap) && /justify-content\s*:\s*space-evenly\s*(;|})/g.test(wWrap)); + + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-72.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-72.english.md new file mode 100644 index 0000000000..323a8be7ec --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-72.english.md @@ -0,0 +1,515 @@ +--- +id: 5d822fd413a79914d39e9910 +title: Part 72 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add the new `window-wrap` class to the `bb4c` element. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".bb4c.window-wrap").length === 1); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-73.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-73.english.md new file mode 100644 index 0000000000..26e86ed63d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-73.english.md @@ -0,0 +1,519 @@ +--- +id: 5d822fd413a79914d39e9911 +title: Part 73 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Looks good! On to the foreground buildings! Turn the `fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb1 = $(".fb1").children("div"); assert(fb1.length === 3 && fb1[0] === $("div.fb1a")[0] && fb1[1] === $("div.fb1b")[0] && fb1[2] === $("div.fb1c")[0]); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-74.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-74.english.md new file mode 100644 index 0000000000..f882cbd6a2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-74.english.md @@ -0,0 +1,533 @@ +--- +id: 5d822fd413a79914d39e9912 +title: Part 74 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give `fb1b` a `width` of `60%` and `height` of `10%`, and `fb1c` a `width` of `100%` and `height` of `80%`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb1b = code.match(/\.fb1b\s*{[\s\S]+?[^}]}/g)[0]; const fb1c = code.match(/\.fb1c\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*60%\s*(;|})/g.test(fb1b) && /height\s*:\s*10%\s*(;|})/g.test(fb1b) && /width\s*:\s*100%\s*(;|})/g.test(fb1c) && /height\s*:\s*80%\s*(;|})/g.test(fb1c)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-75.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-75.english.md new file mode 100644 index 0000000000..c568646a99 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-75.english.md @@ -0,0 +1,543 @@ +--- +id: 5d822fd413a79914d39e9913 +title: Part 75 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add the `building-wrap` class to the `fb1` element to center the sections. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".fb1.building-wrap").length === 1); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-76.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-76.english.md new file mode 100644 index 0000000000..56615d5ede --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-76.english.md @@ -0,0 +1,543 @@ +--- +id: 5d822fd413a79914d39e9914 +title: Part 76 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Move the `background-color` property and value from `fb1` to `fb1b`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb1b = code.match(/\.fb1b\s*{[\s\S]+?[^}]}/g)[0]; assert(/background-color\s*:\s*var\(\s*--building-color4\s*\)\s*(;|})/g.test(fb1b)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-78.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-78.english.md new file mode 100644 index 0000000000..24a8fd7f74 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-78.english.md @@ -0,0 +1,551 @@ +--- +id: 5d822fd413a79914d39e9916 +title: Part 78 +challengeType: 0 +isBeta: true +--- + +## Description +
+Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. + +Add a `repeating-linear-gradient` to `fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb1c = code.match(/\.fb1c\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color4\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color4\s*\)\s*10%\s*,\s*transparent\s*10%\s*,\s*transparent\s*15%\s*\)\s*(;|})/g.test(fb1c)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-79.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-79.english.md new file mode 100644 index 0000000000..572b3c192c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-79.english.md @@ -0,0 +1,574 @@ +--- +id: 5d822fd413a79914d39e9917 +title: Part 79 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You can add multiple gradients to an element by separating them with a comma (`,`) like this: + +```css +gradient1( + colors +), +gradient2( + colors +); +``` + +Add a `repeating-linear-gradient` to `fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb1c = code.match(/\.fb1c\s*{[\s\S]+?[^}]}/g)[0]; assert(/background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color4\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color4\s*\)\s*10%\s*,\s*transparent\s*10%\s*,\s*transparent\s*15%\s*\)\s*,\s*repeating-linear-gradient\(\s*var\(\s*--building-color4\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color4\s*\)\s*10%\s*,\s*var\(\s*--window-color4\s*\)\s*10%\s*,\s*var\(\s*--window-color4\s*\)\s*90%\s*\)\s*(;|})/g.test(fb1c)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-8.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-8.english.md new file mode 100644 index 0000000000..08a1998408 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-8.english.md @@ -0,0 +1,90 @@ +--- +id: 5d822fd413a79914d39e98d0 +title: Part 8 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +It's tough to see now, but there's a border at the edge of your preview, that's the body. Create a `div` element in the body with a class of `background-buildings`. This will be a container for a group of buildings. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($("#display-body")[0].contains($("div.background-buildings")[0])); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-80.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-80.english.md new file mode 100644 index 0000000000..24211b8b0c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-80.english.md @@ -0,0 +1,573 @@ +--- +id: 5d822fd413a79914d39e9918 +title: Part 80 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +You're going to use some more border tricks for top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb1a = code.match(/\.fb1a\s*{[\s\S]+?[^}]}/g)[0]; assert(/border-bottom\s*:\s*7vh\s+solid\s+var\(\s*--building-color4\s*\)\s*(;|})/g.test(fb1a)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-81.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-81.english.md new file mode 100644 index 0000000000..d8771145e7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-81.english.md @@ -0,0 +1,579 @@ +--- +id: 5d822fd413a79914d39e9919 +title: Part 81 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +When you make the left and right borders bigger, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent;` as the value of the `border-left` and `border-right` properties of `fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb1a = code.match(/\.fb1a\s*{[\s\S]+?[^}]}/g)[0]; assert(/border-left\s*:\s*2vw\s+solid\s+transparent\s*(;|})/g.test(fb1a) && /border-right\s*:\s*2vw\s+solid\s+transparent\s*(;|})/g.test(fb1a)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-82.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-82.english.md new file mode 100644 index 0000000000..0a9014e22d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-82.english.md @@ -0,0 +1,584 @@ +--- +id: 5d822fd413a79914d39e991a +title: Part 82 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +On to the next building! Nest two `div` elements within `fb2` and give them the classes of `fb2a` and `fb2b`, in that order. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb2 = $(".fb2").children("div"); assert(fb2.length === 2 && fb2[0] === $("div.fb2a")[0] && fb2[1] === $("div.fb2b")[0]); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-83.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-83.english.md new file mode 100644 index 0000000000..4c7172154d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-83.english.md @@ -0,0 +1,596 @@ +--- +id: 5d822fd413a79914d39e991b +title: Part 83 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give `fb2a` a `width` of `100%` and `fb2b` a `width` of `100%` and `height` of `75%`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb2a = code.match(/\.fb2a\s*{[\s\S]+?[^}]}/g)[0]; const fb2b = code.match(/\.fb2b\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*100%\s*(;|})/g.test(fb2a) && /width\s*:\s*100%\s*(;|})/g.test(fb2b) && /height\s*:\s*75%\s*(;|})/g.test(fb2b)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-84.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-84.english.md new file mode 100644 index 0000000000..1217082392 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-84.english.md @@ -0,0 +1,609 @@ +--- +id: 5d822fd413a79914d39e991c +title: Part 84 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Nest three `div` elements within `fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".fb2b").children("div.fb2-window").length === 3); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-85.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-85.english.md new file mode 100644 index 0000000000..d751ffd27a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-85.english.md @@ -0,0 +1,613 @@ +--- +id: 5d822fd413a79914d39e991d +title: Part 85 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add your `window-wrap` class to `fb2b` to position the new window elements. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".fb2b.window-wrap").length === 1); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-86.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-86.english.md new file mode 100644 index 0000000000..ef7d624cc4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-86.english.md @@ -0,0 +1,619 @@ +--- +id: 5d822fd413a79914d39e991e +title: Part 86 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give the `fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb2w = code.match(/\.fb2-window\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*22%\s*(;|})/g.test(fb2w) && /height\s*:\s*100%\s*(;|})/g.test(fb2w) && /background-color\s*:\s*var\(\s*--window-color3\s*\)\s*(;|})/g.test(fb2w)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-87.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-87.english.md new file mode 100644 index 0000000000..b13de7a586 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-87.english.md @@ -0,0 +1,625 @@ +--- +id: 5d822fd413a79914d39e991f +title: Part 87 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Move the `background-color` property and value from `fb2` to `fb2b` to just color the section and not the container. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb2 = code.match(/\.fb2\s*{[\s\S]+?[^}]}/g)[0]; const fb2b = code.match(/\.fb2b\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(fb2) && /background-color\s*:\s*var\(\s*--building-color3\s*\)\s*(;|})/g.test(fb2b)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-88.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-88.english.md new file mode 100644 index 0000000000..46d0fc7fb4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-88.english.md @@ -0,0 +1,628 @@ +--- +id: 5d822fd413a79914d39e9920 +title: Part 88 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +For `fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)` and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb2a = code.match(/\.fb2a\s*{[\s\S]+?[^}]}/g)[0]; assert(/border-bottom\s*:\s*10vh\s+solid\s+var\(\s*--building-color3\s*\)\s*(;|})/g.test(fb2a) && /border-left\s*:\s*1vw\s+solid\s+transparent\s*(;|})/g.test(fb2a) && /border-right\s*:\s*1vw\s+solid\s+transparent\s*(;|})/g.test(fb2a)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-89.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-89.english.md new file mode 100644 index 0000000000..395fcf26e5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-89.english.md @@ -0,0 +1,636 @@ +--- +id: 5d822fd413a79914d39e9921 +title: Part 89 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +For the next building, nest four `div` elements within `fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections and the top two will be almost the same as the bottom two. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb3 = $(".fb3").children("div"); console.log(fb3); assert(fb3.length === 4 && fb3[0] === $("div.fb3a")[0] && fb3[1] === $("div.fb3b")[0] && fb3[2] === $("div.fb3a")[1] && fb3[3] === $("div.fb3b")[1]); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-9.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-9.english.md new file mode 100644 index 0000000000..4274a54382 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-9.english.md @@ -0,0 +1,96 @@ +--- +id: 5d822fd413a79914d39e98d1 +title: Part 9 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give your background buildings element a `width` and `height` of `100%` to make it the full width and height of its parent, the body. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const bb = code.match(/\.background-buildings\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*100%\s*(;|})/g.test(bb) && /height\s*:\s*100%\s*(;|})/g.test(bb)) + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-90.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-90.english.md new file mode 100644 index 0000000000..121b6eca9f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-90.english.md @@ -0,0 +1,651 @@ +--- +id: 5d822fd413a79914d39e9922 +title: Part 90 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give the `fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `fb3b` element a `width` of `100%` and `height` of `35%`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb3a = code.match(/\.fb3a\s*{[\s\S]+?[^}]}/g)[0]; const fb3b = code.match(/\.fb3b\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*80%\s*(;|})/g.test(fb3a) && /height\s*:\s*15%\s*(;|})/g.test(fb3a) && /width\s*:\s*100%\s*(;|})/g.test(fb3b) && /height\s*:\s*35%\s*(;|})/g.test(fb3b)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-91.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-91.english.md new file mode 100644 index 0000000000..4b84ef15dd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-91.english.md @@ -0,0 +1,662 @@ +--- +id: 5d822fd413a79914d39e9923 +title: Part 91 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Remove the `background-color` property and value from `fb3` and add them to `fb3a` and `fb3b`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb3 = code.match(/\.fb3\s*{[\s\S]+?[^}]}/g)[0]; const fb3a = code.match(/\.fb3a\s*{[\s\S]+?[^}]}/g)[0];const fb3b = code.match(/\.fb3b\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(fb3) && /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|})/g.test(fb3a) && /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|})/g.test(fb3b)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-92.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-92.english.md new file mode 100644 index 0000000000..8c13498c95 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-92.english.md @@ -0,0 +1,663 @@ +--- +id: 5d822fd413a79914d39e9924 +title: Part 92 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add your `building-wrap` class to the `fb3` element to center the sections. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".fb3.building-wrap").length === 1); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-93.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-93.english.md new file mode 100644 index 0000000000..1f586cf53f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-93.english.md @@ -0,0 +1,667 @@ +--- +id: 5d822fd413a79914d39e9925 +title: Part 93 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Nest three new `div` elements in the first `fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".fb3 div.fb3a:first-child").children("div.fb3-window").length === 3); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-94.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-94.english.md new file mode 100644 index 0000000000..d23e7390cd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-94.english.md @@ -0,0 +1,677 @@ +--- +id: 5d822fd413a79914d39e9926 +title: Part 94 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give the `fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb3w = code.match(/\.fb3-window\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*25%\s*(;|})/g.test(fb3w) && /height\s*:\s*80%\s*(;|})/g.test(fb3w) && /background-color\s*:\s*var\(\s*--window-color1\s*\)\s*(;|})/g.test(fb3w)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-95.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-95.english.md new file mode 100644 index 0000000000..2bd02ce1d4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-95.english.md @@ -0,0 +1,683 @@ +--- +id: 5d822fd413a79914d39e9927 +title: Part 95 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add your `window-wrap` class to the `fb3a` element to center and space the windows. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: assert($(".fb3 div.fb3a:first-child").hasClass("window-wrap")); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-96.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-96.english.md new file mode 100644 index 0000000000..8643a28054 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-96.english.md @@ -0,0 +1,683 @@ +--- +id: 5d822fd413a79914d39e9928 +title: Part 96 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +I'm not thrilled about that black for the windows anymore. Change the `--window-color1` value to `#bb99ff`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const root = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-97.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-97.english.md new file mode 100644 index 0000000000..bfe008963d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-97.english.md @@ -0,0 +1,686 @@ +--- +id: 5d822fd413a79914d39e9929 +title: Part 97 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Only three more building to go. Nest two new `div` elements within the `fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `fb4` and `fb5`, so it's the rightmost purple building you are working on now. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb4 = $(".fb4").children("div"); assert(fb4.length === 2 && fb4[0] === $("div.fb4a")[0] && fb4[1] === $("div.fb4b")[0]); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-98.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-98.english.md new file mode 100644 index 0000000000..39b4c53bfa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-98.english.md @@ -0,0 +1,694 @@ +--- +id: 5d822fd413a79914d39e992a +title: Part 98 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Give `fb4b` a `width` of `100%` and `height` of `89%`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb4b = code.match(/\.fb4b\s*{[\s\S]+?[^}]}/g)[0]; assert(/width\s*:\s*100%\s*(;|})/g.test(fb4b) && /height\s*:\s*89%\s*(;|})/g.test(fb4b)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-99.english.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-99.english.md new file mode 100644 index 0000000000..ae0f2590ce --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-99.english.md @@ -0,0 +1,699 @@ +--- +id: 5d822fd413a79914d39e992b +title: Part 99 +challengeType: 0 +isBeta: true +--- + +## Description +
+ +Add your `--building-color1` variable as value of the `background-color` property of `fb4b`. Then, remove the `background-color` from `fb4`. +
+ +## Instructions +
+
+ +## Tests +
+ +```yml +tests: + - text: test-text + testString: const fb4 = code.match(/\.fb4\s*{[\s\S]+?[^}]}/g)[0]; const fb4b = code.match(/\.fb4b\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(fb4) && /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|})/g.test(fb4b)); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
+
+ + +## Solution +
+ +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +
diff --git a/utils/block-nameify.js b/utils/block-nameify.js index 534ecf1617..8122963374 100644 --- a/utils/block-nameify.js +++ b/utils/block-nameify.js @@ -17,7 +17,8 @@ const preFormattedBlockNames = { 'data-analysis-with-python': 'Data Analysis with Python', 'machine-learning-with-python': 'Machine Learning with Python', tensorflow: 'TensorFlow', - 'javascript-rpg-game': 'JavaScript RPG Game' + 'javascript-rpg-game': 'JavaScript RPG Game', + 'css-variables-skyline': 'CSS Variables Skyline' }; const noFormatting = ['and', 'for', 'of', 'the', 'up', 'with'];