From 52f27c1cbf29613d99d8d8a77df7dc8bb5b3da13 Mon Sep 17 00:00:00 2001 From: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Date: Thu, 15 Oct 2020 07:24:25 -0700 Subject: [PATCH] fix(learn): Remove isHidden from frontmatter for steps 87-94 of Cafe Menu project (#39974) * fix: remove isHidden from frontmatter * fix: corrected ERM name * fix: removed duplicate step (54) --- .../_meta/basic-css-cafe-menu/meta.json | 84 ++-- .../basic-css-cafe-menu/part-054.md | 12 +- .../basic-css-cafe-menu/part-055.md | 12 +- .../basic-css-cafe-menu/part-056.md | 8 +- .../basic-css-cafe-menu/part-057.md | 6 +- .../basic-css-cafe-menu/part-058.md | 11 +- .../basic-css-cafe-menu/part-059.md | 11 +- .../basic-css-cafe-menu/part-060.md | 13 +- .../basic-css-cafe-menu/part-061.md | 10 +- .../basic-css-cafe-menu/part-062.md | 14 +- .../basic-css-cafe-menu/part-063.md | 12 +- .../basic-css-cafe-menu/part-064.md | 14 +- .../basic-css-cafe-menu/part-065.md | 16 +- .../basic-css-cafe-menu/part-066.md | 9 +- .../basic-css-cafe-menu/part-067.md | 12 +- .../basic-css-cafe-menu/part-068.md | 11 +- .../basic-css-cafe-menu/part-069.md | 14 +- .../basic-css-cafe-menu/part-070.md | 11 +- .../basic-css-cafe-menu/part-071.md | 7 +- .../basic-css-cafe-menu/part-072.md | 7 +- .../basic-css-cafe-menu/part-073.md | 12 +- .../basic-css-cafe-menu/part-074.md | 9 +- .../basic-css-cafe-menu/part-075.md | 11 +- .../basic-css-cafe-menu/part-076.md | 12 +- .../basic-css-cafe-menu/part-077.md | 13 +- .../basic-css-cafe-menu/part-078.md | 14 +- .../basic-css-cafe-menu/part-079.md | 15 +- .../basic-css-cafe-menu/part-080.md | 9 +- .../basic-css-cafe-menu/part-081.md | 9 +- .../basic-css-cafe-menu/part-082.md | 11 +- .../basic-css-cafe-menu/part-083.md | 10 +- .../basic-css-cafe-menu/part-084.md | 11 +- .../basic-css-cafe-menu/part-085.md | 13 +- .../basic-css-cafe-menu/part-086.md | 14 +- .../basic-css-cafe-menu/part-087.md | 8 +- .../basic-css-cafe-menu/part-088.md | 14 +- .../basic-css-cafe-menu/part-089.md | 15 +- .../basic-css-cafe-menu/part-090.md | 13 +- .../basic-css-cafe-menu/part-091.md | 14 +- .../basic-css-cafe-menu/part-092.md | 19 +- .../basic-css-cafe-menu/part-093.md | 187 ++++++++- .../basic-css-cafe-menu/part-094.md | 376 ------------------ 42 files changed, 482 insertions(+), 621 deletions(-) delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-094.md diff --git a/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json b/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json index 40aa8e479d..656dc83011 100644 --- a/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json +++ b/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json @@ -223,168 +223,164 @@ "Part 53" ], [ - "5f3ef6e0eaa7da26e3d34d78", + "5f3ef6e0086dc80481f8cb03", "Part 54" ], [ - "5f3ef6e0086dc80481f8cb03", + "5f3ef6e0eaa7da26e3d34d78", "Part 55" ], [ - "5f3ef6e0eaa7da26e3d34d78", + "5f3ef6e050279c7a4a7101d3", "Part 56" ], [ - "5f3ef6e050279c7a4a7101d3", + "5f3ef6e04559b939080db057", "Part 57" ], [ - "5f3ef6e04559b939080db057", + "5f3ef6e03d719d5ac4738993", "Part 58" ], [ - "5f3ef6e03d719d5ac4738993", + "5f3ef6e05473f91f948724ab", "Part 59" ], [ - "5f3ef6e05473f91f948724ab", + "5f3ef6e056bdde6ae6892ba2", "Part 60" ], [ - "5f3ef6e056bdde6ae6892ba2", + "5f3ef6e0e9629bad967cd71e", "Part 61" ], [ - "5f3ef6e0e9629bad967cd71e", + "5f3ef6e06d34faac0447fc44", "Part 62" ], [ - "5f3ef6e06d34faac0447fc44", + "5f3ef6e087d56ed3ffdc36be", "Part 63" ], [ - "5f3ef6e087d56ed3ffdc36be", + "5f3ef6e0f8c230bdd2349716", "Part 64" ], [ - "5f3ef6e0f8c230bdd2349716", + "5f3ef6e07276f782bb46b93d", "Part 65" ], [ - "5f3ef6e07276f782bb46b93d", + "5f3ef6e0a81099d9a697b550", "Part 66" ], [ - "5f3ef6e0a81099d9a697b550", + "5f3ef6e0b431cc215bb16f55", "Part 67" ], [ - "5f3ef6e0b431cc215bb16f55", + "5f3ef6e01f288a026d709587", "Part 68" ], [ - "5f3ef6e01f288a026d709587", + "5f3f26fa39591db45e5cd7a0", "Part 69" ], [ - "5f3f26fa39591db45e5cd7a0", + "5f459225127805351a6ad057", "Part 70" ], [ - "5f459225127805351a6ad057", + "5f459a7ceb8b5c446656d88b", "Part 71" ], [ - "5f459a7ceb8b5c446656d88b", + "5f459cf202c2a3472fae6a9f", "Part 72" ], [ - "5f459cf202c2a3472fae6a9f", + "5f459fd48bdc98491ca6d1a3", "Part 73" ], [ - "5f459fd48bdc98491ca6d1a3", + "5f45a05977e2fa49d9119437", "Part 74" ], [ - "5f45a05977e2fa49d9119437", + "5f45a276c093334f0f6e9df4", "Part 75" ], [ - "5f45a276c093334f0f6e9df4", + "5f45a5a7c49a8251f0bdb527", "Part 76" ], [ - "5f45a5a7c49a8251f0bdb527", + "5f46fc57528aa1c4b5ea7c2e", "Part 77" ], [ - "5f46fc57528aa1c4b5ea7c2e", + "5f4701b942c824109626c3d8", "Part 78" ], [ - "5f4701b942c824109626c3d8", + "5f46ede1ff8fec5ba656b44c", "Part 79" ], [ - "5f46ede1ff8fec5ba656b44c", + "5f45a66d4a2b0453301e5a26", "Part 80" ], [ - "5f45a66d4a2b0453301e5a26", + "5f45b0731d39e15d54df4dfc", "Part 81" ], [ - "5f45b0731d39e15d54df4dfc", + "5f45b25e7ec2405f166b9de1", "Part 82" ], [ - "5f45b25e7ec2405f166b9de1", + "5f45b3c93c027860d9298dbd", "Part 83" ], [ - "5f45b3c93c027860d9298dbd", + "5f45b45d099f3e621fbbb256", "Part 84" ], [ - "5f45b45d099f3e621fbbb256", + "5f45b4c81cea7763550e40df", "Part 85" ], [ - "5f45b4c81cea7763550e40df", + "5f45b715301bbf667badc04a", "Part 86" ], [ - "5f45b715301bbf667badc04a", + "5f46e270702a8456a664f0df", "Part 87" ], [ - "5f46e270702a8456a664f0df", + "5f46e36e745ead58487aabf2", "Part 88" ], [ - "5f46e36e745ead58487aabf2", + "5f46e7a4750dd05b5a673920", "Part 89" ], [ - "5f46e7a4750dd05b5a673920", + "5f46e8284aae155c83015dee", "Part 90" ], [ - "5f46e8284aae155c83015dee", + "5f475bb508746c16c9431d42", "Part 91" ], [ - "5f475bb508746c16c9431d42", + "5f475e1c7f71a61d913836c6", "Part 92" ], - [ - "5f475e1c7f71a61d913836c6", - "Part 93" - ], [ "5f47fe7e31980053a8d4403b", - "Part 94" + "Part 93" ] ], "helpRoom": "Help", diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md index cf6508bd33..0720085ced 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0eaa7da26e3d34d78 +id: 5f3ef6e0086dc80481f8cb03 title: Part 54 challengeType: 0 --- @@ -7,9 +7,9 @@ challengeType: 0 ## Description
-You can give your menu some space between the content and the sides with various `padding` properties. +Something does not look right. You added the correct `class` attribute to the `p` elements with dessert names, but you have not defined a selector for it. -Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`. +Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it.
@@ -98,23 +98,23 @@ h1, h2, p { text-align: center; } ---fcc-editable-region-- .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; } ---fcc-editable-region-- .item p { display: inline-block; } -.flavor, .dessert { +--fcc-editable-region-- +.flavor { text-align: left; width: 75%; } +--fcc-editable-region-- .price { text-align: right; diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md index 4d0c55628d..7630e5ea56 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0086dc80481f8cb03 +id: 5f3ef6e0eaa7da26e3d34d78 title: Part 55 challengeType: 0 --- @@ -7,9 +7,9 @@ challengeType: 0 ## Description
-Something does not look right. You added the correct `class` attribute to the `p` elements with dessert names, but you have not defined a selector for it. +You can give your menu some space between the content and the sides with various `padding` properties. -Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it. +Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
@@ -98,23 +98,23 @@ h1, h2, p { text-align: center; } +--fcc-editable-region-- .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; } +--fcc-editable-region-- .item p { display: inline-block; } ---fcc-editable-region-- -.flavor { +.flavor, .dessert { text-align: left; width: 75%; } ---fcc-editable-region-- .price { text-align: right; diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md index 9037ff42f6..7a468bca1f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0eaa7da26e3d34d78 +id: 5f3ef6e050279c7a4a7101d3 title: Part 56 challengeType: 0 --- @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-You can give your menu some space between the content and the sides with various `padding` properties. - -Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`. +That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
@@ -104,6 +102,8 @@ h1, h2, p { background-color: burlywood; margin-left: auto; margin-right: auto; + padding-left: 20px; + padding-right: 20px; } --fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md index 99e9daa3e5..29e1f0aa5f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e050279c7a4a7101d3 +id: 5f3ef6e04559b939080db057 title: Part 57 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-That looks better. Now try to add the same `20px` padding to the top and bottom of the menu. +Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`.
@@ -104,6 +104,8 @@ h1, h2, p { margin-right: auto; padding-left: 20px; padding-right: 20px; + padding-top: 20px; + padding-bottom: 20px; } --fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md index fca9b8a8c8..ac8a8d58ff 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e04559b939080db057 +id: 5f3ef6e03d719d5ac4738993 title: Part 58 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`. +The current width of the menu will always take of 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices. + +Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide.
@@ -102,10 +104,7 @@ h1, h2, p { background-color: burlywood; margin-left: auto; margin-right: auto; - padding-left: 20px; - padding-right: 20px; - padding-top: 20px; - padding-bottom: 20px; + padding: 20px; } --fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md index 03f13c8dc2..ab41b61c26 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e03d719d5ac4738993 +id: 5f3ef6e05473f91f948724ab title: Part 59 challengeType: 0 --- @@ -7,9 +7,9 @@ challengeType: 0 ## Description
-The current width of the menu will always take of 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices. +You can change the `font-family` of text, to make it look different the the default font of your browser. Each browser has some common fonts available to it. -Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide. +Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable.
@@ -90,23 +90,24 @@ tests:
```css +--fcc-editable-region-- body { background-image: url(https://tinyurl.com/coffee-beans-fcc); } +--fcc-editable-region-- h1, h2, p { text-align: center; } ---fcc-editable-region-- .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; padding: 20px; + max-width: 500px; } ---fcc-editable-region-- .item p { display: inline-block; diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md index f3b8a93cf9..436cf32bdd 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e05473f91f948724ab +id: 5f3ef6e056bdde6ae6892ba2 title: Part 60 challengeType: 0 --- @@ -7,9 +7,9 @@ challengeType: 0 ## Description
-You can change the `font-family` of text, to make it look different the the default font of your browser. Each browser has some common fonts available to it. +It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector. -Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable. +Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font.
@@ -90,11 +90,10 @@ tests:
```css ---fcc-editable-region-- body { background-image: url(https://tinyurl.com/coffee-beans-fcc); + font-family: sans-serif; } ---fcc-editable-region-- h1, h2, p { text-align: center; @@ -109,6 +108,10 @@ h1, h2, p { max-width: 500px; } +--fcc-editable-region-- + +--fcc-editable-region-- + .item p { display: inline-block; } diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md index b4bcb8d592..996f1fa327 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e056bdde6ae6892ba2 +id: 5f3ef6e0e9629bad967cd71e title: Part 61 challengeType: 0 --- @@ -7,9 +7,9 @@ challengeType: 0 ## Description
-It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector. +You can add a fallback value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it. -Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font. +Add the fallback font `serif` after the `Impact` font.
@@ -109,7 +109,9 @@ h1, h2, p { } --fcc-editable-region-- - +h1, h2 { + font-family: Impact; +} --fcc-editable-region-- .item p { diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md index aa33564e97..de652a533c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0e9629bad967cd71e +id: 5f3ef6e06d34faac0447fc44 title: Part 62 challengeType: 0 --- @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-You can add a fallback value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it. - -Add the fallback font `serif` after the `Impact` font. +Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`.
@@ -95,6 +93,10 @@ body { font-family: sans-serif; } +--fcc-editable-region-- + +--fcc-editable-region-- + h1, h2, p { text-align: center; } @@ -108,11 +110,9 @@ h1, h2, p { max-width: 500px; } ---fcc-editable-region-- h1, h2 { - font-family: Impact; + font-family: Impact, serif; } ---fcc-editable-region-- .item p { display: inline-block; diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md index e16403eaa5..a9b28bc442 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e06d34faac0447fc44 +id: 5f3ef6e087d56ed3ffdc36be title: Part 63 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`. +Now apply the `established` class to the `Est. 2020` text.
@@ -39,10 +39,12 @@ tests:
+ --fcc-editable-region--

CAMPER CAFE

Est. 2020

+ --fcc-editable-region--

Coffees

@@ -93,9 +95,9 @@ body { font-family: sans-serif; } ---fcc-editable-region-- - ---fcc-editable-region-- +.established { + font-style: italic; +} h1, h2, p { text-align: center; diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md index baca5049d4..b5673bf2d3 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e087d56ed3ffdc36be +id: 5f3ef6e0f8c230bdd2349716 title: Part 64 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-Now apply the `established` class to the `Est. 2020` text. +The `h1` and `h2` elements' text are set by default values of the user's browser. + +Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`.
@@ -39,12 +41,10 @@ tests:
- --fcc-editable-region--

CAMPER CAFE

-

Est. 2020

+

Est. 2020

- --fcc-editable-region--

Coffees

@@ -95,6 +95,10 @@ body { font-family: sans-serif; } +--fcc-editable-region-- + +--fcc-editable-region-- + .established { font-style: italic; } diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md index 359754fe34..56c931006b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0f8c230bdd2349716 +id: 5f3ef6e07276f782bb46b93d title: Part 65 challengeType: 0 --- @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-The `h1` and `h2` elements' text are set by default values of the user's browser. - -Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`. +Add a `footer` element below the `main` element, where you can some additional information.
@@ -45,6 +43,7 @@ tests:

CAMPER CAFE

Est. 2020

+ --fcc-editable-region--

Coffees

@@ -80,6 +79,7 @@ tests:
+ --fcc-editable-region--
@@ -95,9 +95,13 @@ body { font-family: sans-serif; } ---fcc-editable-region-- +h1 { + font-size: 40px; +} ---fcc-editable-region-- +h2 { + font-size: 30px; +} .established { font-style: italic; diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md index dc851bef00..ffe8088038 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e07276f782bb46b93d +id: 5f3ef6e0a81099d9a697b550 title: Part 66 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Add a `footer` element below the `main` element, where you can some additional information. +Inside the `footer`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`.
@@ -26,6 +26,7 @@ tests: ## Challenge Seed
+
```html @@ -43,7 +44,6 @@ tests:

CAMPER CAFE

Est. 2020

- --fcc-editable-region--

Coffees

@@ -80,6 +80,9 @@ tests:
--fcc-editable-region-- +
+
+ --fcc-editable-region--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md index 04bb8263a0..2e22f1242b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0a81099d9a697b550 +id: 5f3ef6e0b431cc215bb16f55 title: Part 67 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Inside the `footer`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`. +Add a second `p` element below the one with the link and give it the text `123 freeCodeCamp Drive`.
@@ -26,7 +26,6 @@ tests: ## Challenge Seed
-
```html @@ -79,10 +78,13 @@ tests:
- --fcc-editable-region-- - --fcc-editable-region--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md index 14a49d7138..1f0589acec 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0b431cc215bb16f55 +id: 5f3ef6e01f288a026d709587 title: Part 68 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-Add a second `p` element below the one with the link and give it the text `123 freeCodeCamp Drive`. +You can use an `hr` element to display a divider between sections of different content. + +First, add an `hr` element between the first `header` element and the `main` element.
@@ -39,6 +41,7 @@ tests:
+ --fcc-editable-region--

CAMPER CAFE

Est. 2020

@@ -78,12 +81,12 @@ tests: + --fcc-editable-region--
- --fcc-editable-region--

Visit our website

- --fcc-editable-region-- +

123 Free Code Camp Drive

diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md index e62dd88976..7d060968d2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e01f288a026d709587 +id: 5f3f26fa39591db45e5cd7a0 title: Part 69 challengeType: 0 --- @@ -7,9 +7,10 @@ challengeType: 0 ## Description
-You can use an `hr` element to display a divider between sections of different content. +The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property. + +Change the height the `hr` element to be `3px`. -First, add an `hr` element between the first `header` element and the `main` element.
@@ -41,11 +42,11 @@ tests:
- --fcc-editable-region--

CAMPER CAFE

Est. 2020

+

Coffees

@@ -81,7 +82,6 @@ tests:
- --editable-region-marker--

Visit our website @@ -128,6 +128,10 @@ h1, h2, p { max-width: 500px; } +--fcc-editable-region-- + +--fcc-editable-region-- + h1, h2 { font-family: Impact, serif; } diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md index c44b0c9876..d33ac07a03 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md @@ -1,5 +1,5 @@ --- -id: 5f3f26fa39591db45e5cd7a0 +id: 5f459225127805351a6ad057 title: Part 70 challengeType: 0 --- @@ -7,10 +7,7 @@ challengeType: 0 ## Description

-The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property. - -Change the height the `hr` element to be `3px`. - +Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans.
@@ -129,7 +126,9 @@ h1, h2, p { } --fcc-editable-region-- - +hr { + height: 3px; +} --fcc-editable-region-- h1, h2 { diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-071.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-071.md index 4c899a92f8..b66f7de428 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-071.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-071.md @@ -1,5 +1,5 @@ --- -id: 5f459225127805351a6ad057 +id: 5f459a7ceb8b5c446656d88b title: Part 71 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans. +Notice the grey color along the edges of the line. Those edges are known as borders. Each side of an element can have a different color or they can all be the same. + +Make all the edges of the `hr` element the same color as the background of it using the `border-color` property.
@@ -128,6 +130,7 @@ h1, h2, p { --fcc-editable-region-- hr { height: 3px; + background-color: brown; } --fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md index 2d24ea5542..56f17b6037 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md @@ -1,5 +1,5 @@ --- -id: 5f459a7ceb8b5c446656d88b +id: 5f459cf202c2a3472fae6a9f title: Part 72 challengeType: 0 --- @@ -7,9 +7,9 @@ challengeType: 0 ## Description
-Notice the grey color along the edges of the line. Those edges are known as borders. Each side of an element can have a different color or they can all be the same. +Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the background to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`). -Make all the edges of the `hr` element the same color as the background of it using the `border-color` property. +Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`.
@@ -131,6 +131,7 @@ h1, h2, p { hr { height: 3px; background-color: brown; + border-color: brown; } --fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md index ef4a8475de..35e8eb8488 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md @@ -1,5 +1,5 @@ --- -id: 5f459cf202c2a3472fae6a9f +id: 5f459fd48bdc98491ca6d1a3 title: Part 73 challengeType: 0 --- @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the background to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`). - -Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`. +Go ahead and add another `hr` element between the `main` element and the `footer` element.
@@ -46,6 +44,7 @@ tests:

Est. 2020

+ --fcc-editable-region--

Coffees

@@ -87,6 +86,7 @@ tests:

123 Free Code Camp Drive

+ --fcc-editable-region--
@@ -127,13 +127,11 @@ h1, h2, p { max-width: 500px; } ---fcc-editable-region-- hr { - height: 3px; + height: 2px; background-color: brown; border-color: brown; } ---fcc-editable-region-- h1, h2 { font-family: Impact, serif; diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md index 7ef148f441..5ea060ac63 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md @@ -1,5 +1,5 @@ --- -id: 5f459fd48bdc98491ca6d1a3 +id: 5f45a05977e2fa49d9119437 title: Part 74 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Go ahead and add another `hr` element between the `main` element and the `footer` element. +To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property.
@@ -44,7 +44,6 @@ tests:

Est. 2020

- --fcc-editable-region--

Coffees

@@ -80,13 +79,13 @@ tests:
+
- --fcc-editable-region--
@@ -97,10 +96,12 @@ tests:
```css +--fcc-editable-region-- body { background-image: url(https://tinyurl.com/coffee-beans-fcc); font-family: sans-serif; } +--fcc-editable-region-- h1 { font-size: 40px; diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md index fe2931531f..c3d8cf8078 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md @@ -1,5 +1,5 @@ --- -id: 5f45a05977e2fa49d9119437 +id: 5f45a276c093334f0f6e9df4 title: Part 75 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property. +Focusing on the menu items and prices, there is a fairly large gap between each line. + +Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`.
@@ -96,12 +98,11 @@ tests:
```css ---fcc-editable-region-- body { background-image: url(https://tinyurl.com/coffee-beans-fcc); font-family: sans-serif; + padding: 20px; } ---fcc-editable-region-- h1 { font-size: 40px; @@ -134,6 +135,7 @@ hr { border-color: brown; } +--fcc-editable-region-- h1, h2 { font-family: Impact, serif; } @@ -151,6 +153,7 @@ h1, h2 { text-align: right; width: 25% } +--fcc-editable-region-- ```
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md index 26fddd6716..55c018acb2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md @@ -1,5 +1,5 @@ --- -id: 5f45a276c093334f0f6e9df4 +id: 5f45a5a7c49a8251f0bdb527 title: Part 76 challengeType: 0 --- @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-Focusing on the menu items and prices, there is a fairly large gap between each line. - -Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`. +Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of `18px`.
@@ -135,14 +133,17 @@ hr { border-color: brown; } ---fcc-editable-region-- h1, h2 { font-family: Impact, serif; } +--fcc-editable-region-- .item p { display: inline-block; + margin-top: 5px; + margin-bottom: 5px; } +--fcc-editable-region-- .flavor, .dessert { text-align: left; @@ -153,7 +154,6 @@ h1, h2 { text-align: right; width: 25% } ---fcc-editable-region-- ```
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md index c220323119..f30fa3bb1c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md @@ -1,5 +1,5 @@ --- -id: 5f45a5a7c49a8251f0bdb527 +id: 5f46fc57528aa1c4b5ea7c2e title: Part 77 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of `18px`. +Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffees` heading. + +Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.
@@ -133,17 +135,20 @@ hr { border-color: brown; } +--fcc-editable-region-- + +--fcc-editable-region-- + h1, h2 { font-family: Impact, serif; } ---fcc-editable-region-- .item p { display: inline-block; margin-top: 5px; margin-bottom: 5px; + font-size: 18px; } ---fcc-editable-region-- .flavor, .dessert { text-align: left; diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md index 640d11a127..08269a219d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md @@ -1,5 +1,5 @@ --- -id: 5f46fc57528aa1c4b5ea7c2e +id: 5f4701b942c824109626c3d8 title: Part 78 challengeType: 0 --- @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffees` heading. - -Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property. +Now add the `bottom-line` class to the second `hr` element so the styling is applied.
@@ -81,7 +79,9 @@ tests: + --fcc-editable-region--
+ --fcc-editable-region--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md index 00e572ba93..d40b404160 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md @@ -1,5 +1,5 @@ --- -id: 5f46ede1ff8fec5ba656b44c +id: 5f45a66d4a2b0453301e5a26 title: Part 80 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end `styles.css` with the text `FOOTER`. +Moving down to the `footer` element, make all the text have a value of `14px` for the font size.
@@ -80,6 +80,7 @@ tests:
+