gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(learn): Remove isHidden from frontmatter for steps 87-94 of Cafe Menu project (#39974)

Browse Source 
* fix: remove isHidden from frontmatter

* fix: corrected ERM name

* fix: removed duplicate step (54)
This commit is contained in:
Randell Dawson
2020-10-15 07:24:25 -07:00
committed by GitHub
parent 89737e1406
commit 52f27c1cbf
42 changed files with 482 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
curriculum/challenges/_meta/basic-css-cafe-menu/meta.json
View File

@ -223,168 +223,164 @@
"Part 53" "Part 53"
], ],
[ [
"5f3ef6e0eaa7da26e3d34d78", "5f3ef6e0086dc80481f8cb03",
"Part 54" "Part 54"
], ],
[ [
"5f3ef6e0086dc80481f8cb03", "5f3ef6e0eaa7da26e3d34d78",
"Part 55" "Part 55"
], ],
[ [
"5f3ef6e0eaa7da26e3d34d78", "5f3ef6e050279c7a4a7101d3",
"Part 56" "Part 56"
], ],
[ [
"5f3ef6e050279c7a4a7101d3", "5f3ef6e04559b939080db057",
"Part 57" "Part 57"
], ],
[ [
"5f3ef6e04559b939080db057", "5f3ef6e03d719d5ac4738993",
"Part 58" "Part 58"
], ],
[ [
"5f3ef6e03d719d5ac4738993", "5f3ef6e05473f91f948724ab",
"Part 59" "Part 59"
], ],
[ [
"5f3ef6e05473f91f948724ab", "5f3ef6e056bdde6ae6892ba2",
"Part 60" "Part 60"
], ],
[ [
"5f3ef6e056bdde6ae6892ba2", "5f3ef6e0e9629bad967cd71e",
"Part 61" "Part 61"
], ],
[ [
"5f3ef6e0e9629bad967cd71e", "5f3ef6e06d34faac0447fc44",
"Part 62" "Part 62"
], ],
[ [
"5f3ef6e06d34faac0447fc44", "5f3ef6e087d56ed3ffdc36be",
"Part 63" "Part 63"
], ],
[ [
"5f3ef6e087d56ed3ffdc36be", "5f3ef6e0f8c230bdd2349716",
"Part 64" "Part 64"
], ],
[ [
"5f3ef6e0f8c230bdd2349716", "5f3ef6e07276f782bb46b93d",
"Part 65" "Part 65"
], ],
[ [
"5f3ef6e07276f782bb46b93d", "5f3ef6e0a81099d9a697b550",
"Part 66" "Part 66"
], ],
[ [
"5f3ef6e0a81099d9a697b550", "5f3ef6e0b431cc215bb16f55",
"Part 67" "Part 67"
], ],
[ [
"5f3ef6e0b431cc215bb16f55", "5f3ef6e01f288a026d709587",
"Part 68" "Part 68"
], ],
[ [
"5f3ef6e01f288a026d709587", "5f3f26fa39591db45e5cd7a0",
"Part 69" "Part 69"
], ],
[ [
"5f3f26fa39591db45e5cd7a0", "5f459225127805351a6ad057",
"Part 70" "Part 70"
], ],
[ [
"5f459225127805351a6ad057", "5f459a7ceb8b5c446656d88b",
"Part 71" "Part 71"
], ],
[ [
"5f459a7ceb8b5c446656d88b", "5f459cf202c2a3472fae6a9f",
"Part 72" "Part 72"
], ],
[ [
"5f459cf202c2a3472fae6a9f", "5f459fd48bdc98491ca6d1a3",
"Part 73" "Part 73"
], ],
[ [
"5f459fd48bdc98491ca6d1a3", "5f45a05977e2fa49d9119437",
"Part 74" "Part 74"
], ],
[ [
"5f45a05977e2fa49d9119437", "5f45a276c093334f0f6e9df4",
"Part 75" "Part 75"
], ],
[ [
"5f45a276c093334f0f6e9df4", "5f45a5a7c49a8251f0bdb527",
"Part 76" "Part 76"
], ],
[ [
"5f45a5a7c49a8251f0bdb527", "5f46fc57528aa1c4b5ea7c2e",
"Part 77" "Part 77"
], ],
[ [
"5f46fc57528aa1c4b5ea7c2e", "5f4701b942c824109626c3d8",
"Part 78" "Part 78"
], ],
[ [
"5f4701b942c824109626c3d8", "5f46ede1ff8fec5ba656b44c",
"Part 79" "Part 79"
], ],
[ [
"5f46ede1ff8fec5ba656b44c", "5f45a66d4a2b0453301e5a26",
"Part 80" "Part 80"
], ],
[ [
"5f45a66d4a2b0453301e5a26", "5f45b0731d39e15d54df4dfc",
"Part 81" "Part 81"
], ],
[ [
"5f45b0731d39e15d54df4dfc", "5f45b25e7ec2405f166b9de1",
"Part 82" "Part 82"
], ],
[ [
"5f45b25e7ec2405f166b9de1", "5f45b3c93c027860d9298dbd",
"Part 83" "Part 83"
], ],
[ [
"5f45b3c93c027860d9298dbd", "5f45b45d099f3e621fbbb256",
"Part 84" "Part 84"
], ],
[ [
"5f45b45d099f3e621fbbb256", "5f45b4c81cea7763550e40df",
"Part 85" "Part 85"
], ],
[ [
"5f45b4c81cea7763550e40df", "5f45b715301bbf667badc04a",
"Part 86" "Part 86"
], ],
[ [
"5f45b715301bbf667badc04a", "5f46e270702a8456a664f0df",
"Part 87" "Part 87"
], ],
[ [
"5f46e270702a8456a664f0df", "5f46e36e745ead58487aabf2",
"Part 88" "Part 88"
], ],
[ [
"5f46e36e745ead58487aabf2", "5f46e7a4750dd05b5a673920",
"Part 89" "Part 89"
], ],
[ [
"5f46e7a4750dd05b5a673920", "5f46e8284aae155c83015dee",
"Part 90" "Part 90"
], ],
[ [
"5f46e8284aae155c83015dee", "5f475bb508746c16c9431d42",
"Part 91" "Part 91"
], ],
[ [
"5f475bb508746c16c9431d42", "5f475e1c7f71a61d913836c6",
"Part 92" "Part 92"
], ],
[
"5f475e1c7f71a61d913836c6",
"Part 93"
],
[ [
"5f47fe7e31980053a8d4403b", "5f47fe7e31980053a8d4403b",
"Part 94" "Part 93"
] ]
], ],
"helpRoom": "Help", "helpRoom": "Help",

12
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e0eaa7da26e3d34d78 id: 5f3ef6e0086dc80481f8cb03
title: Part 54 title: Part 54
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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.
</section> </section>
@ -98,23 +98,23 @@ h1, h2, p {
text-align: center; text-align: center;
} }
--fcc-editable-region--
.menu { .menu {
width: 80%; width: 80%;
background-color: burlywood; background-color: burlywood;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
--fcc-editable-region--
.item p { .item p {
display: inline-block; display: inline-block;
} }
.flavor, .dessert { --fcc-editable-region--
.flavor {
text-align: left; text-align: left;
width: 75%; width: 75%;
} }
--fcc-editable-region--
.price { .price {
text-align: right; text-align: right;

12
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e0086dc80481f8cb03 id: 5f3ef6e0eaa7da26e3d34d78
title: Part 55 title: Part 55
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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`.
</section> </section>
@ -98,23 +98,23 @@ h1, h2, p {
text-align: center; text-align: center;
} }
--fcc-editable-region--
.menu { .menu {
width: 80%; width: 80%;
background-color: burlywood; background-color: burlywood;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
--fcc-editable-region--
.item p { .item p {
display: inline-block; display: inline-block;
} }
--fcc-editable-region-- .flavor, .dessert {
.flavor {
text-align: left; text-align: left;
width: 75%; width: 75%;
} }
--fcc-editable-region--
.price { .price {
text-align: right; text-align: right;

8
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e0eaa7da26e3d34d78 id: 5f3ef6e050279c7a4a7101d3
title: Part 56 title: Part 56
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
You can give your menu some space between the content and the sides with various `padding` properties. That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
</section> </section>
@ -104,6 +102,8 @@ h1, h2, p {
background-color: burlywood; background-color: burlywood;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 20px;
padding-right: 20px;
} }
--fcc-editable-region-- --fcc-editable-region--

6
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e050279c7a4a7101d3 id: 5f3ef6e04559b939080db057
title: Part 57 title: Part 57
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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`.
</section> </section>
@ -104,6 +104,8 @@ h1, h2, p {
margin-right: auto; margin-right: auto;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
} }
--fcc-editable-region-- --fcc-editable-region--

11
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e04559b939080db057 id: 5f3ef6e03d719d5ac4738993
title: Part 58 title: Part 58
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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.
</section> </section>
@ -102,10 +104,7 @@ h1, h2, p {
background-color: burlywood; background-color: burlywood;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 20px; padding: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
} }
--fcc-editable-region-- --fcc-editable-region--

11
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e03d719d5ac4738993 id: 5f3ef6e05473f91f948724ab
title: Part 59 title: Part 59
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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.
</section> </section>
@ -90,23 +90,24 @@ tests:
<div id='css-seed'> <div id='css-seed'>
```css ```css
--fcc-editable-region--
body { body {
background-image: url(https://tinyurl.com/coffee-beans-fcc); background-image: url(https://tinyurl.com/coffee-beans-fcc);
} }
--fcc-editable-region--
h1, h2, p { h1, h2, p {
text-align: center; text-align: center;
} }
--fcc-editable-region--
.menu { .menu {
width: 80%; width: 80%;
background-color: burlywood; background-color: burlywood;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 20px; padding: 20px;
max-width: 500px;
} }
--fcc-editable-region--
.item p { .item p {
display: inline-block; display: inline-block;

13
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e05473f91f948724ab id: 5f3ef6e056bdde6ae6892ba2
title: Part 60 title: Part 60
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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.
</section> </section>
@ -90,11 +90,10 @@ tests:
<div id='css-seed'> <div id='css-seed'>
```css ```css
--fcc-editable-region--
body { body {
background-image: url(https://tinyurl.com/coffee-beans-fcc); background-image: url(https://tinyurl.com/coffee-beans-fcc);
font-family: sans-serif;
} }
--fcc-editable-region--
h1, h2, p { h1, h2, p {
text-align: center; text-align: center;
@ -109,6 +108,10 @@ h1, h2, p {
max-width: 500px; max-width: 500px;
} }
--fcc-editable-region--
--fcc-editable-region--
.item p { .item p {
display: inline-block; display: inline-block;
} }

10
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e056bdde6ae6892ba2 id: 5f3ef6e0e9629bad967cd71e
title: Part 61 title: Part 61
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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 <dfn>fallback</dfn> 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.
</section> </section>
@ -109,7 +109,9 @@ h1, h2, p {
} }
--fcc-editable-region-- --fcc-editable-region--
h1, h2 {
font-family: Impact;
}
--fcc-editable-region-- --fcc-editable-region--
.item p { .item p {

14
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e0e9629bad967cd71e id: 5f3ef6e06d34faac0447fc44
title: Part 62 title: Part 62
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
You can add a <dfn>fallback</dfn> 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. Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`.
Add the fallback font `serif` after the `Impact` font.
</section> </section>
@ -95,6 +93,10 @@ body {
font-family: sans-serif; font-family: sans-serif;
} }
--fcc-editable-region--
--fcc-editable-region--
h1, h2, p { h1, h2, p {
text-align: center; text-align: center;
} }
@ -108,11 +110,9 @@ h1, h2, p {
max-width: 500px; max-width: 500px;
} }
--fcc-editable-region--
h1, h2 { h1, h2 {
font-family: Impact; font-family: Impact, serif;
} }
--fcc-editable-region--
.item p { .item p {
display: inline-block; display: inline-block;

12
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e06d34faac0447fc44 id: 5f3ef6e087d56ed3ffdc36be
title: Part 63 title: Part 63
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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.
</section> </section>
@ -39,10 +39,12 @@ tests:
</head> </head>
<body> <body>
<div class="menu"> <div class="menu">
--fcc-editable-region--
<header> <header>
<h1>CAMPER CAFE</h1> <h1>CAMPER CAFE</h1>
<p>Est. 2020</p> <p>Est. 2020</p>
</header> </header>
--fcc-editable-region--
<main> <main>
<section> <section>
<h2>Coffees</h2> <h2>Coffees</h2>
@ -93,9 +95,9 @@ body {
font-family: sans-serif; font-family: sans-serif;
} }
--fcc-editable-region-- .established {
font-style: italic;
--fcc-editable-region-- }
h1, h2, p { h1, h2, p {
text-align: center; text-align: center;

14
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e087d56ed3ffdc36be id: 5f3ef6e0f8c230bdd2349716
title: Part 64 title: Part 64
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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`.
</section> </section>
@ -39,12 +41,10 @@ tests:
</head> </head>
<body> <body>
<div class="menu"> <div class="menu">
--fcc-editable-region--
<header> <header>
<h1>CAMPER CAFE</h1> <h1>CAMPER CAFE</h1>
<p>Est. 2020</p> <p class="established">Est. 2020</p>
</header> </header>
--fcc-editable-region--
<main> <main>
<section> <section>
<h2>Coffees</h2> <h2>Coffees</h2>
@ -95,6 +95,10 @@ body {
font-family: sans-serif; font-family: sans-serif;
} }
--fcc-editable-region--
--fcc-editable-region--
.established { .established {
font-style: italic; font-style: italic;
} }

16
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e0f8c230bdd2349716 id: 5f3ef6e07276f782bb46b93d
title: Part 65 title: Part 65
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
The `h1` and `h2` elements' text are set by default values of the user's browser. Add a `footer` element below the `main` element, where you can some additional information.
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`.
</section> </section>
@ -45,6 +43,7 @@ tests:
<h1>CAMPER CAFE</h1> <h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p> <p class="established">Est. 2020</p>
</header> </header>
--fcc-editable-region--
<main> <main>
<section> <section>
<h2>Coffees</h2> <h2>Coffees</h2>
@ -80,6 +79,7 @@ tests:
</article> </article>
</section> </section>
</main> </main>
--fcc-editable-region--
</div> </div>
</body> </body>
<html> <html>
@ -95,9 +95,13 @@ body {
font-family: sans-serif; font-family: sans-serif;
} }
--fcc-editable-region-- h1 {
font-size: 40px;
}
--fcc-editable-region-- h2 {
font-size: 30px;
}
.established { .established {
font-style: italic; font-style: italic;

9
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e07276f782bb46b93d id: 5f3ef6e0a81099d9a697b550
title: Part 66 title: Part 66
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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`.
</section> </section>
@ -26,6 +26,7 @@ tests:
## Challenge Seed ## Challenge Seed
<section id='challengeSeed'> <section id='challengeSeed'>
<div id='html-seed'> <div id='html-seed'>
```html ```html
@ -43,7 +44,6 @@ tests:
<h1>CAMPER CAFE</h1> <h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p> <p class="established">Est. 2020</p>
</header> </header>
--fcc-editable-region--
<main> <main>
<section> <section>
<h2>Coffees</h2> <h2>Coffees</h2>
@ -80,6 +80,9 @@ tests:
</section> </section>
</main> </main>
--fcc-editable-region-- --fcc-editable-region--
<footer>
</footer>
--fcc-editable-region--
</div> </div>
</body> </body>
<html> <html>

12
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e0a81099d9a697b550 id: 5f3ef6e0b431cc215bb16f55
title: Part 67 title: Part 67
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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`.
</section> </section>
@ -26,7 +26,6 @@ tests:
## Challenge Seed ## Challenge Seed
<section id='challengeSeed'> <section id='challengeSeed'>
<div id='html-seed'> <div id='html-seed'>
```html ```html
@ -79,10 +78,13 @@ tests:
</article> </article>
</section> </section>
</main> </main>
--fcc-editable-region--
<footer> <footer>
--fcc-editable-region--
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
--fcc-editable-region--
</footer> </footer>
--fcc-editable-region--
</div> </div>
</body> </body>
<html> <html>

11
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e0b431cc215bb16f55 id: 5f3ef6e01f288a026d709587
title: Part 68 title: Part 68
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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.
</section> </section>
@ -39,6 +41,7 @@ tests:
</head> </head>
<body> <body>
<div class="menu"> <div class="menu">
--fcc-editable-region--
<header> <header>
<h1>CAMPER CAFE</h1> <h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p> <p class="established">Est. 2020</p>
@ -78,12 +81,12 @@ tests:
</article> </article>
</section> </section>
</main> </main>
--fcc-editable-region--
<footer> <footer>
--fcc-editable-region--
<p> <p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p> </p>
--fcc-editable-region-- <p>123 Free Code Camp Drive</p>
</footer> </footer>
</div> </div>
</body> </body>

14
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3ef6e01f288a026d709587 id: 5f3f26fa39591db45e5cd7a0
title: Part 69 title: Part 69
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,10 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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.
</section> </section>
@ -41,11 +42,11 @@ tests:
</head> </head>
<body> <body>
<div class="menu"> <div class="menu">
--fcc-editable-region--
<header> <header>
<h1>CAMPER CAFE</h1> <h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p> <p class="established">Est. 2020</p>
</header> </header>
<hr>
<main> <main>
<section> <section>
<h2>Coffees</h2> <h2>Coffees</h2>
@ -81,7 +82,6 @@ tests:
</article> </article>
</section> </section>
</main> </main>
--editable-region-marker--
<footer> <footer>
<p> <p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
@ -128,6 +128,10 @@ h1, h2, p {
max-width: 500px; max-width: 500px;
} }
--fcc-editable-region--
--fcc-editable-region--
h1, h2 { h1, h2 {
font-family: Impact, serif; font-family: Impact, serif;
} }

11
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f3f26fa39591db45e5cd7a0 id: 5f459225127805351a6ad057
title: Part 70 title: Part 70
challengeType: 0 challengeType: 0
--- ---
@ -7,10 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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 background color of the `hr` element to `brown` so it matches the color of the coffee beans.
Change the height the `hr` element to be `3px`.
</section> </section>
@ -129,7 +126,9 @@ h1, h2, p {
} }
--fcc-editable-region-- --fcc-editable-region--
hr {
height: 3px;
}
--fcc-editable-region-- --fcc-editable-region--
h1, h2 { h1, h2 {

7
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-071.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f459225127805351a6ad057 id: 5f459a7ceb8b5c446656d88b
title: Part 71 title: Part 71
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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 <dfn>borders</dfn>. 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.
</section> </section>
@ -128,6 +130,7 @@ h1, h2, p {
--fcc-editable-region-- --fcc-editable-region--
hr { hr {
height: 3px; height: 3px;
background-color: brown;
} }
--fcc-editable-region-- --fcc-editable-region--

7
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f459a7ceb8b5c446656d88b id: 5f459cf202c2a3472fae6a9f
title: Part 72 title: Part 72
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
Notice the grey color along the edges of the line. Those edges are known as <dfn>borders</dfn>. 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`.
</section> </section>
@ -131,6 +131,7 @@ h1, h2, p {
hr { hr {
height: 3px; height: 3px;
background-color: brown; background-color: brown;
border-color: brown;
} }
--fcc-editable-region-- --fcc-editable-region--

12
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f459cf202c2a3472fae6a9f id: 5f459fd48bdc98491ca6d1a3
title: Part 73 title: Part 73
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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`). Go ahead and add another `hr` element between the `main` element and the `footer` element.
Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`.
</section> </section>
@ -46,6 +44,7 @@ tests:
<p class="established">Est. 2020</p> <p class="established">Est. 2020</p>
</header> </header>
<hr> <hr>
--fcc-editable-region--
<main> <main>
<section> <section>
<h2>Coffees</h2> <h2>Coffees</h2>
@ -87,6 +86,7 @@ tests:
</p> </p>
<p>123 Free Code Camp Drive</p> <p>123 Free Code Camp Drive</p>
</footer> </footer>
--fcc-editable-region--
</div> </div>
</body> </body>
<html> <html>
@ -127,13 +127,11 @@ h1, h2, p {
max-width: 500px; max-width: 500px;
} }
--fcc-editable-region--
hr { hr {
height: 3px; height: 2px;
background-color: brown; background-color: brown;
border-color: brown; border-color: brown;
} }
--fcc-editable-region--
h1, h2 { h1, h2 {
font-family: Impact, serif; font-family: Impact, serif;

9
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f459fd48bdc98491ca6d1a3 id: 5f45a05977e2fa49d9119437
title: Part 74 title: Part 74
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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.
</section> </section>
@ -44,7 +44,6 @@ tests:
<p class="established">Est. 2020</p> <p class="established">Est. 2020</p>
</header> </header>
<hr> <hr>
--fcc-editable-region--
<main> <main>
<section> <section>
<h2>Coffees</h2> <h2>Coffees</h2>
@ -80,13 +79,13 @@ tests:
</article> </article>
</section> </section>
</main> </main>
<hr>
<footer> <footer>
<p> <p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p> </p>
<p>123 Free Code Camp Drive</p> <p>123 Free Code Camp Drive</p>
</footer> </footer>
--fcc-editable-region--
</div> </div>
</body> </body>
<html> <html>
@ -97,10 +96,12 @@ tests:
<div id='css-seed'> <div id='css-seed'>
```css ```css
--fcc-editable-region--
body { body {
background-image: url(https://tinyurl.com/coffee-beans-fcc); background-image: url(https://tinyurl.com/coffee-beans-fcc);
font-family: sans-serif; font-family: sans-serif;
} }
--fcc-editable-region--
h1 { h1 {
font-size: 40px; font-size: 40px;

11
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f45a05977e2fa49d9119437 id: 5f45a276c093334f0f6e9df4
title: Part 75 title: Part 75
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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`.
</section> </section>
@ -96,12 +98,11 @@ tests:
<div id='css-seed'> <div id='css-seed'>
```css ```css
--fcc-editable-region--
body { body {
background-image: url(https://tinyurl.com/coffee-beans-fcc); background-image: url(https://tinyurl.com/coffee-beans-fcc);
font-family: sans-serif; font-family: sans-serif;
padding: 20px;
} }
--fcc-editable-region--
h1 { h1 {
font-size: 40px; font-size: 40px;
@ -134,6 +135,7 @@ hr {
border-color: brown; border-color: brown;
} }
--fcc-editable-region--
h1, h2 { h1, h2 {
font-family: Impact, serif; font-family: Impact, serif;
} }
@ -151,6 +153,7 @@ h1, h2 {
text-align: right; text-align: right;
width: 25% width: 25%
} }
--fcc-editable-region--
``` ```
</div> </div>

12
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f45a276c093334f0f6e9df4 id: 5f45a5a7c49a8251f0bdb527
title: Part 76 title: Part 76
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
Focusing on the menu items and prices, there is a fairly large gap between each line. 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`.
Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`.
</section> </section>
@ -135,14 +133,17 @@ hr {
border-color: brown; border-color: brown;
} }
--fcc-editable-region--
h1, h2 { h1, h2 {
font-family: Impact, serif; font-family: Impact, serif;
} }
--fcc-editable-region--
.item p { .item p {
display: inline-block; display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
} }
--fcc-editable-region--
.flavor, .dessert { .flavor, .dessert {
text-align: left; text-align: left;
@ -153,7 +154,6 @@ h1, h2 {
text-align: right; text-align: right;
width: 25% width: 25%
} }
--fcc-editable-region--
``` ```
</div> </div>

13
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f45a5a7c49a8251f0bdb527 id: 5f46fc57528aa1c4b5ea7c2e
title: Part 77 title: Part 77
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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.
</section> </section>
@ -133,17 +135,20 @@ hr {
border-color: brown; border-color: brown;
} }
--fcc-editable-region--
--fcc-editable-region--
h1, h2 { h1, h2 {
font-family: Impact, serif; font-family: Impact, serif;
} }
--fcc-editable-region--
.item p { .item p {
display: inline-block; display: inline-block;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 18px;
} }
--fcc-editable-region--
.flavor, .dessert { .flavor, .dessert {
text-align: left; text-align: left;

14
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f46fc57528aa1c4b5ea7c2e id: 5f4701b942c824109626c3d8
title: Part 78 title: Part 78
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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. Now add the `bottom-line` class to the second `hr` element so the styling is applied.
Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.
</section> </section>
@ -81,7 +79,9 @@ tests:
</article> </article>
</section> </section>
</main> </main>
--fcc-editable-region--
<hr> <hr>
--fcc-editable-region--
<footer> <footer>
<p> <p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
@ -135,9 +135,9 @@ hr {
border-color: brown; border-color: brown;
} }
--fcc-editable-region-- .bottom-line {
margin-top: 25px;
--fcc-editable-region-- }
h1, h2 { h1, h2 {
font-family: Impact, serif; font-family: Impact, serif;

15
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-079.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f4701b942c824109626c3d8 id: 5f46ede1ff8fec5ba656b44c
title: Part 79 title: Part 79
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
Now add the `bottom-line` class to the second `hr` element so the styling is applied. 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`.
</section> </section>
@ -79,10 +79,7 @@ tests:
</article> </article>
</section> </section>
</main> </main>
--fcc-editable-region-- <hr class="bottom-line">
<hr>
--fcc-editable-region--
<footer>
<p> <p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p> </p>
@ -147,7 +144,7 @@ h1, h2 {
display: inline-block; display: inline-block;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 18px; font-size: 18px;
} }
.flavor, .dessert { .flavor, .dessert {
@ -159,6 +156,10 @@ h1, h2 {
text-align: right; text-align: right;
width: 25% width: 25%
} }
--fcc-editable-region--
--fcc-editable-region--
``` ```
</div> </div>

9
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f46ede1ff8fec5ba656b44c id: 5f45a66d4a2b0453301e5a26
title: Part 80 title: Part 80
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='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.
</section> </section>
@ -80,6 +80,7 @@ tests:
</section> </section>
</main> </main>
<hr class="bottom-line"> <hr class="bottom-line">
<footer>
<p> <p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p> </p>
@ -144,7 +145,7 @@ h1, h2 {
display: inline-block; display: inline-block;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 18px; font-size: 18px;
} }
.flavor, .dessert { .flavor, .dessert {
@ -157,6 +158,8 @@ h1, h2 {
width: 25% width: 25%
} }
/* FOOTER */
--fcc-editable-region-- --fcc-editable-region--
--fcc-editable-region-- --fcc-editable-region--

9
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-081.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f45a66d4a2b0453301e5a26 id: 5f45b0731d39e15d54df4dfc
title: Part 81 title: Part 81
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
Moving down to the `footer` element, make all the text have a value of `14px` for the font size. The default color of link that has not yet been clicked on a page is typically blue. The default color of a link that has already been visited from a page is typically purple.
To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property.
</section> </section>
@ -160,6 +162,9 @@ h1, h2 {
/* FOOTER */ /* FOOTER */
footer {
font-size: 14px;
}
--fcc-editable-region-- --fcc-editable-region--
--fcc-editable-region-- --fcc-editable-region--

11
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-082.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f45b0731d39e15d54df4dfc id: 5f45b25e7ec2405f166b9de1
title: Part 82 title: Part 82
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
The default color of link that has not yet been clicked on a page is typically blue. The default color of a link that has already been visited from a page is typically purple. You change properties of a link when the link has actually been visited by using a <dfn>pseudo-selector</dfn> that looks like `a:visited { propertyName: propertyValue; }`.
To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property. Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link.
</section> </section>
@ -165,6 +165,11 @@ h1, h2 {
footer { footer {
font-size: 14px; font-size: 14px;
} }
a {
color: black;
}
--fcc-editable-region-- --fcc-editable-region--
--fcc-editable-region-- --fcc-editable-region--

10
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-083.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f45b25e7ec2405f166b9de1 id: 5f45b3c93c027860d9298dbd
title: Part 83 title: Part 83
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
You change properties of a link when the link has actually been visited by using a <dfn>pseudo-selector</dfn> that looks like `a:visited { propertyName: propertyValue; }`. You change properties of a link when the mouse hovers them by using a <dfn>pseudo-selector</dfn> that looks like `a:hover { propertyName: propertyValue; }`.
Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link. Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it.
</section> </section>
@ -170,6 +170,10 @@ a {
color: black; color: black;
} }
a:visited {
color: grey;
}
--fcc-editable-region-- --fcc-editable-region--
--fcc-editable-region-- --fcc-editable-region--

11
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-084.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f45b3c93c027860d9298dbd id: 5f45b45d099f3e621fbbb256
title: Part 84 title: Part 84
challengeType: 0 challengeType: 0
--- ---
@ -7,9 +7,10 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
You change properties of a link when the mouse hovers them by using a <dfn>pseudo-selector</dfn> that looks like `a:hover { propertyName: propertyValue; }`. You change properties of a link when the link is actually clicked by using a <dfn>pseudo-selector</dfn> that looks like `a:active { propertyName: propertyValue; }`.
Change the color of the footer `Visit our website` link to be `white` when a clicks on it.
Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it.
</section> </section>
@ -174,6 +175,10 @@ a:visited {
color: grey; color: grey;
} }
a:hover {
color: brown;
}
--fcc-editable-region-- --fcc-editable-region--
--fcc-editable-region-- --fcc-editable-region--

13
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-085.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f45b45d099f3e621fbbb256 id: 5f45b4c81cea7763550e40df
title: Part 85 title: Part 85
challengeType: 0 challengeType: 0
--- ---
@ -7,10 +7,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
You change properties of a link when the link is actually clicked by using a <dfn>pseudo-selector</dfn> that looks like `a:active { propertyName: propertyValue; }`. To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked.
Change the color of the footer `Visit our website` link to be `white` when a clicks on it.
</section> </section>
@ -171,6 +168,7 @@ a {
color: black; color: black;
} }
--fcc-editable-region--
a:visited { a:visited {
color: grey; color: grey;
} }
@ -179,8 +177,9 @@ a:hover {
color: brown; color: brown;
} }
--fcc-editable-region-- a:active {
color: white;
}
--fcc-editable-region-- --fcc-editable-region--
``` ```

14
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-086.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5f45b4c81cea7763550e40df id: 5f45b715301bbf667badc04a
title: Part 86 title: Part 86
challengeType: 0 challengeType: 0
--- ---
@ -7,7 +7,9 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked. The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element.
Change the top margin of the `h1` element to `0` to remove all the top margin.
</section> </section>
@ -102,9 +104,11 @@ body {
padding: 20px; padding: 20px;
} }
--fcc-editable-region--
h1 { h1 {
font-size: 40px; font-size: 40px;
} }
--fcc-editable-region--
h2 { h2 {
font-size: 30px; font-size: 30px;
@ -168,9 +172,8 @@ a {
color: black; color: black;
} }
--fcc-editable-region--
a:visited { a:visited {
color: grey; color: black;
} }
a:hover { a:hover {
@ -178,9 +181,8 @@ a:hover {
} }
a:active { a:active {
color: white; color: brown;
} }
--fcc-editable-region--
``` ```
</div> </div>

8
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-087.md
View File

@ -1,16 +1,13 @@
--- ---
id: 5f45b715301bbf667badc04a id: 5f46e270702a8456a664f0df
title: Part 87 title: Part 87
challengeType: 0 challengeType: 0
isHidden: true
--- ---
## Description ## Description
<section id='description'> <section id='description'>
The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element. To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`.
Change the top margin of the `h1` element to `0` to remove all the top margin.
</section> </section>
@ -108,6 +105,7 @@ body {
--fcc-editable-region-- --fcc-editable-region--
h1 { h1 {
font-size: 40px; font-size: 40px;
margin-top: 0;
} }
--fcc-editable-region-- --fcc-editable-region--

14
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-088.md
View File

@ -1,14 +1,15 @@
--- ---
id: 5f46e270702a8456a664f0df id: 5f46e36e745ead58487aabf2
title: Part 88 title: Part 88
challengeType: 0 challengeType: 0
isHidden: true
--- ---
## Description ## Description
<section id='description'> <section id='description'>
To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`. Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element.
To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property.
</section> </section>
@ -103,12 +104,11 @@ body {
padding: 20px; padding: 20px;
} }
--fcc-editable-region--
h1 { h1 {
font-size: 40px; font-size: 40px;
margin-top: 0; margin-top: 0;
margin-bottom: 15px;
} }
--fcc-editable-region--
h2 { h2 {
font-size: 30px; font-size: 30px;
@ -168,6 +168,10 @@ footer {
font-size: 14px; font-size: 14px;
} }
--fcc-editable-region--
--fcc-editable-region--
a { a {
color: black; color: black;
} }

15
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-089.md
View File

@ -1,16 +1,13 @@
--- ---
id: 5f46e36e745ead58487aabf2 id: 5f46e7a4750dd05b5a673920
title: Part 89 title: Part 89
challengeType: 0 challengeType: 0
isHidden: true
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element. Now apply the `address` class to the `p` element containing the address.
To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property.
</section> </section>
@ -83,12 +80,14 @@ tests:
</section> </section>
</main> </main>
<hr class="bottom-line"> <hr class="bottom-line">
--fcc-editable-region--
<footer> <footer>
<p> <p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p> </p>
<p>123 Free Code Camp Drive</p> <p>123 Free Code Camp Drive</p>
</footer> </footer>
--fcc-editable-region--
</div> </div>
</body> </body>
<html> <html>
@ -169,9 +168,9 @@ footer {
font-size: 14px; font-size: 14px;
} }
--fcc-editable-region-- .address {
margin-bottom: 5px;
--fcc-editable-region-- }
a { a {
color: black; color: black;

13
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-090.md
View File

@ -1,14 +1,15 @@
--- ---
id: 5f46e7a4750dd05b5a673920 id: 5f46e8284aae155c83015dee
title: Part 90 title: Part 90
challengeType: 0 challengeType: 0
isHidden: true
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Now apply the `address` class to the `p` element containing the address. The menu looks good, but other than the coffee beans background image, it is mainly just text.
Under the `Coffees` heading, add an image using the url `https://tinyurl.com/cafe-coffee-fcc`. Give the image an `alt` value of `coffee icon`.
</section> </section>
@ -47,7 +48,9 @@ tests:
<hr> <hr>
<main> <main>
<section> <section>
--fcc-editable-region--
<h2>Coffees</h2> <h2>Coffees</h2>
--fcc-editable-region--
<article class="item"> <article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p> <p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article> </article>
@ -81,14 +84,12 @@ tests:
</section> </section>
</main> </main>
<hr class="bottom-line"> <hr class="bottom-line">
--fcc-editable-region--
<footer> <footer>
<p> <p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p> </p>
<p>123 Free Code Camp Drive</p> <p class="address">123 Free Code Camp Drive</p>
</footer> </footer>
--fcc-editable-region--
</div> </div>
</body> </body>
<html> <html>

14
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-091.md
View File

@ -1,16 +1,15 @@
--- ---
id: 5f46e8284aae155c83015dee id: 5f475bb508746c16c9431d42
title: Part 91 title: Part 91
challengeType: 0 challengeType: 0
isHidden: true
--- ---
## Description ## Description
<section id='description'> <section id='description'>
The menu looks good, but other than the coffee beans background image, it is mainly just text. The image you added is not centered horizontally like the `Coffees` heading above it. `img` elements are "like" inline elements.
Under the `Coffees` heading, add an image using the url `https://tinyurl.com/cafe-coffee-fcc`. Give the image an `alt` value of `coffee icon`. To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally.
</section> </section>
@ -49,9 +48,8 @@ tests:
<hr> <hr>
<main> <main>
<section> <section>
--fcc-editable-region--
<h2>Coffees</h2> <h2>Coffees</h2>
--fcc-editable-region-- <img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
<article class="item"> <article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p> <p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article> </article>
@ -134,6 +132,10 @@ h1, h2, p {
max-width: 500px; max-width: 500px;
} }
--fcc-editable-region--
--fcc-editable-region--
hr { hr {
height: 2px; height: 2px;
background-color: brown; background-color: brown;

19
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-092.md
View File

@ -1,16 +1,13 @@
--- ---
id: 5f475bb508746c16c9431d42 id: 5f475e1c7f71a61d913836c6
title: Part 92 title: Part 92
challengeType: 0 challengeType: 0
isHidden: true
--- ---
## Description ## Description
<section id='description'> <section id='description'>
The image you added is not centered horizontally like the `Coffees` heading above it. `img` elements are "like" inline elements. Add one last image under the `Desserts` heading using the url `https://tinyurl.com/cafe-pie-fcc`. Give the image an `alt` value of `pie icon`.
To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally.
</section> </section>
@ -68,7 +65,9 @@ tests:
</article> </article>
</section> </section>
<section> <section>
--fcc-editable-region--
<h2>Desserts</h2> <h2>Desserts</h2>
--fcc-editable-region--
<article class="item"> <article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p> <p class="dessert">Donut</p><p class="price">1.50</p>
</article> </article>
@ -133,9 +132,11 @@ h1, h2, p {
max-width: 500px; max-width: 500px;
} }
--fcc-editable-region-- img {
display: block;
--fcc-editable-region-- margin-left: auto;
margin-right: auto;
}
hr { hr {
height: 2px; height: 2px;
@ -165,7 +166,7 @@ h1, h2 {
.price { .price {
text-align: right; text-align: right;
width: 25% width: 25%;
} }
/* FOOTER */ /* FOOTER */

187
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-093.md
View File

@ -1,14 +1,15 @@
--- ---
id: 5f475e1c7f71a61d913836c6 id: 5f47fe7e31980053a8d4403b
title: Part 93 title: Part 93
challengeType: 0 challengeType: 0
isHidden: true
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Add one last image under the `Desserts` heading using the url `https://tinyurl.com/cafe-pie-fcc`. Give the image an `alt` value of `pie icon`. It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number.
There is an easier way, simply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative margin of `25px` in the `img` type selector.
</section> </section>
@ -66,9 +67,182 @@ tests:
</article> </article>
</section> </section>
<section> <section>
--fcc-editable-region--
<h2>Desserts</h2> <h2>Desserts</h2>
--fcc-editable-region-- <img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
</article>
</section>
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</footer>
</div>
</body>
<html>
```
</div>
<div id='css-seed'>
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
font-family: sans-serif;
padding: 20px;
}
h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
h2 {
font-size: 30px;
}
.established {
font-style: italic;
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
--fcc-editable-region--
img {
display: block;
margin-left: auto;
margin-right: auto;
}
--fcc-editable-region--
hr {
height: 2px;
background-color: brown;
border-color: brown;
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%;
}
/* FOOTER */
footer {
font-size: 14px;
}
.address {
margin-bottom: 5px;
}
a {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color: brown;
}
```
</section>
## Solution
<section id='solution'>
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Camper Cafe Menu</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<header>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
</header>
<hr>
<main>
<section>
<h2>Coffees</h2>
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
<article class="item"> <article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p> <p class="dessert">Donut</p><p class="price">1.50</p>
</article> </article>
@ -137,6 +311,7 @@ img {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: -25px;
} }
hr { hr {
@ -197,6 +372,4 @@ a:active {
} }
``` ```
</div>
</section> </section>

376
curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-094.md
View File

@ -1,376 +0,0 @@
---
id: 5f47fe7e31980053a8d4403b
title: Part 94
challengeType: 0
isHidden: true
---
## Description
<section id='description'>
It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number.
There is an easier way, simply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative margin of `25px` in the `img` type selector.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: Test 1
testString: ''
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Camper Cafe Menu</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<header>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
</header>
<hr>
<main>
<section>
<h2>Coffees</h2>
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
</article>
</section>
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</footer>
</div>
</body>
<html>
```
</div>
<div id='css-seed'>
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
font-family: sans-serif;
padding: 20px;
}
h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
h2 {
font-size: 30px;
}
.established {
font-style: italic;
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
--fcc-editable-region--
img {
display: block;
margin-left: auto;
margin-right: auto;
}
--fcc-editable-region--
hr {
height: 2px;
background-color: brown;
border-color: brown;
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%;
}
/* FOOTER */
footer {
font-size: 14px;
}
.address {
margin-bottom: 5px;
}
a {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color: brown;
}
```
</section>
## Solution
<section id='solution'>
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Camper Cafe Menu</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<header>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
</header>
<hr>
<main>
<section>
<h2>Coffees</h2>
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
</article>
</section>
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</footer>
</div>
</body>
<html>
```
</div>
<div id='css-seed'>
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
font-family: sans-serif;
padding: 20px;
}
h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
h2 {
font-size: 30px;
}
.established {
font-style: italic;
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -25px;
}
hr {
height: 2px;
background-color: brown;
border-color: brown;
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%;
}
/* FOOTER */
footer {
font-size: 14px;
}
.address {
margin-bottom: 5px;
}
a {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color: brown;
}
```
</section>