From b3cbbe0f3dc0b36b53aa5d0c0338a13c7ebf847e Mon Sep 17 00:00:00 2001 From: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Date: Tue, 13 Oct 2020 15:27:40 -0700 Subject: [PATCH] fix(learn): Broke several steps down into smaller steps for the Cafe Menu project - v7 (#39778) * fix: made some verbiage changes to existing steps * fix: rewrite step 45 instructions * fix: added two steps between 45 and 46 * fix: miscellaneous edits for steps 21,22, 27 * fix: change step 35 to allow for smaller steps * fix: update 36-41 seed code * fix: added new step between 41 and 42 * fix: add new step between 42 and 43 * fix: broke step 33 into 4 new steps * fix: removed unnecessary step 37 * fix: change wording of step 33 instructions * fix: corrected ERM syntax * fix: corrected seed code typos in steps 45 and 46 * fix: corrected typo Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: changed wording to improve readability Co-authored-by: Kristofer Koishigawa * fix: changed "Free Code Camp" to "freeCodeCamp" Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: corrected typo and improved wording Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: corrected typo Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: correct typos Co-authored-by: Kristofer Koishigawa * fix: corrected punctuation Co-authored-by: Kristofer Koishigawa * fix: corrected punctuation Co-authored-by: Kristofer Koishigawa * fix: corrected punctuation Co-authored-by: Kristofer Koishigawa * fix: added missing period Co-authored-by: Kristofer Koishigawa * fix: corrected typo Co-authored-by: Kristofer Koishigawa * fix: added the missing word "larger" Co-authored-by: Kristofer Koishigawa * fix: corrected typo Co-authored-by: Kristofer Koishigawa * fix: change paragraph to `p` * fix: reorderd steps after step 37 deleted * fix: added two new steps to fix missing steps problem * fix: added missing ERMs for step 69 Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Kristofer Koishigawa --- .../_meta/basic-css-cafe-menu/meta.json | 140 ++++--- .../basic-css-cafe-menu/part-012.md | 9 +- .../basic-css-cafe-menu/part-014.md | 8 +- .../basic-css-cafe-menu/part-015.md | 4 +- .../basic-css-cafe-menu/part-017.md | 4 +- .../basic-css-cafe-menu/part-019.md | 4 +- .../basic-css-cafe-menu/part-020.md | 4 +- .../basic-css-cafe-menu/part-021.md | 4 +- .../basic-css-cafe-menu/part-022.md | 4 +- .../basic-css-cafe-menu/part-023.md | 8 +- .../basic-css-cafe-menu/part-025.md | 4 +- .../basic-css-cafe-menu/part-026.md | 4 +- .../basic-css-cafe-menu/part-027.md | 8 +- .../basic-css-cafe-menu/part-030.md | 4 +- .../basic-css-cafe-menu/part-031.md | 4 +- .../basic-css-cafe-menu/part-033.md | 9 +- .../basic-css-cafe-menu/part-034.md | 17 +- .../basic-css-cafe-menu/part-035.md | 17 +- .../basic-css-cafe-menu/part-036.md | 29 +- .../basic-css-cafe-menu/part-037.md | 25 +- .../basic-css-cafe-menu/part-038.md | 27 +- .../basic-css-cafe-menu/part-039.md | 20 +- .../basic-css-cafe-menu/part-040.md | 21 +- .../basic-css-cafe-menu/part-041.md | 25 +- .../basic-css-cafe-menu/part-042.md | 30 +- .../basic-css-cafe-menu/part-043.md | 32 +- .../basic-css-cafe-menu/part-044.md | 26 +- .../basic-css-cafe-menu/part-045.md | 35 +- .../basic-css-cafe-menu/part-046.md | 30 +- .../basic-css-cafe-menu/part-047.md | 25 +- .../basic-css-cafe-menu/part-048.md | 25 +- .../basic-css-cafe-menu/part-049.md | 24 +- .../basic-css-cafe-menu/part-050.md | 24 +- .../basic-css-cafe-menu/part-051.md | 24 +- .../basic-css-cafe-menu/part-052.md | 23 +- .../basic-css-cafe-menu/part-053.md | 28 +- .../basic-css-cafe-menu/part-054.md | 15 +- .../basic-css-cafe-menu/part-055.md | 21 +- .../basic-css-cafe-menu/part-056.md | 21 +- .../basic-css-cafe-menu/part-057.md | 27 +- .../basic-css-cafe-menu/part-058.md | 33 +- .../basic-css-cafe-menu/part-059.md | 33 +- .../basic-css-cafe-menu/part-060.md | 34 +- .../basic-css-cafe-menu/part-061.md | 32 +- .../basic-css-cafe-menu/part-062.md | 34 +- .../basic-css-cafe-menu/part-063.md | 31 +- .../basic-css-cafe-menu/part-064.md | 32 +- .../basic-css-cafe-menu/part-065.md | 29 +- .../basic-css-cafe-menu/part-066.md | 17 +- .../basic-css-cafe-menu/part-067.md | 21 +- .../basic-css-cafe-menu/part-068.md | 20 +- .../basic-css-cafe-menu/part-069.md | 21 +- .../basic-css-cafe-menu/part-070.md | 18 +- .../basic-css-cafe-menu/part-071.md | 21 +- .../basic-css-cafe-menu/part-072.md | 25 +- .../basic-css-cafe-menu/part-073.md | 25 +- .../basic-css-cafe-menu/part-074.md | 26 +- .../basic-css-cafe-menu/part-075.md | 32 +- .../basic-css-cafe-menu/part-076.md | 33 +- .../basic-css-cafe-menu/part-077.md | 38 +- .../basic-css-cafe-menu/part-078.md | 38 +- .../basic-css-cafe-menu/part-079.md | 34 +- .../basic-css-cafe-menu/part-080.md | 32 +- .../basic-css-cafe-menu/part-081.md | 28 +- .../basic-css-cafe-menu/part-082.md | 31 +- .../basic-css-cafe-menu/part-083.md | 28 +- .../basic-css-cafe-menu/part-084.md | 29 +- .../basic-css-cafe-menu/part-085.md | 34 +- .../basic-css-cafe-menu/part-086.md | 207 +--------- .../basic-css-cafe-menu/part-087.md | 191 +++++++++ .../basic-css-cafe-menu/part-088.md | 190 +++++++++ .../basic-css-cafe-menu/part-089.md | 195 +++++++++ .../basic-css-cafe-menu/part-090.md | 195 +++++++++ .../basic-css-cafe-menu/part-091.md | 197 +++++++++ .../basic-css-cafe-menu/part-092.md | 200 ++++++++++ .../basic-css-cafe-menu/part-093.md | 202 ++++++++++ .../basic-css-cafe-menu/part-094.md | 376 ++++++++++++++++++ 77 files changed, 2251 insertions(+), 1324 deletions(-) create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-087.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-088.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-089.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-090.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-091.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-092.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-093.md create 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 422cfad4b2..40aa8e479d 100644 --- a/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json +++ b/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json @@ -143,218 +143,250 @@ "Part 33" ], [ - "5f3c866d697fb245bc801648", + "5f769541be494f25449b292f", "Part 34" ], [ - "5f3c866de7a5b784048f94b1", + "5f76967fad478126d6552b0d", "Part 35" ], [ - "5f3c866dbf362f99b9a0c6d0", + "5f769702e6e33127d14aa120", "Part 36" ], [ - "5f3c866d0fc037f7311b4ac8", + "5f3c866de7a5b784048f94b1", "Part 37" ], [ - "5f3c866dd0d0275f01d4d847", + "5f3c866dbf362f99b9a0c6d0", "Part 38" ], [ - "5f3cade9fa77275d9f4efe62", + "5f3c866d0fc037f7311b4ac8", "Part 39" ], [ - "5f3cade94c6576e7f7b7953f", + "5f3c866dd0d0275f01d4d847", "Part 40" ], [ - "5f3cade9993019e26313fa8e", + "5f3cade9fa77275d9f4efe62", "Part 41" ], [ - "5f47633757ae3469f2d33d2e", + "5f3cade94c6576e7f7b7953f", "Part 42" ], [ - "5f3cade99dda4e6071a85dfd", + "5f3cade9993019e26313fa8e", "Part 43" ], [ - "5f3ef6e0e0c3feaebcf647ad", + "5f7691dafd882520797cd2f0", "Part 44" ], [ - "5f3ef6e0819d4f23ca7285e6", + "5f7692f7c5b3ce22a57788b6", "Part 45" ], [ - "5f3ef6e0835da6ccc3ee9958", + "5f47633757ae3469f2d33d2e", "Part 46" ], [ - "5f3ef6e0086dc80481f8cb03", + "5f3cade99dda4e6071a85dfd", "Part 47" ], [ - "5f3ef6e0eaa7da26e3d34d78", + "5f3ef6e0e0c3feaebcf647ad", "Part 48" ], [ - "5f3ef6e050279c7a4a7101d3", + "5f3ef6e0819d4f23ca7285e6", "Part 49" ], [ - "5f3ef6e04559b939080db057", + "5f716ad029ee4053c7027a7a", "Part 50" ], [ - "5f3ef6e03d719d5ac4738993", + "5f7b87422a560036fd03ccff", "Part 51" ], [ - "5f3ef6e05473f91f948724ab", + "5f7b88d37b1f98386f04edc0", "Part 52" ], [ - "5f3ef6e056bdde6ae6892ba2", + "5f716bee5838c354c728a7c5", "Part 53" ], [ - "5f3ef6e0e9629bad967cd71e", + "5f3ef6e0eaa7da26e3d34d78", "Part 54" ], [ - "5f3ef6e06d34faac0447fc44", + "5f3ef6e0086dc80481f8cb03", "Part 55" ], [ - "5f3ef6e087d56ed3ffdc36be", + "5f3ef6e0eaa7da26e3d34d78", "Part 56" ], [ - "5f3ef6e0f8c230bdd2349716", + "5f3ef6e050279c7a4a7101d3", "Part 57" ], [ - "5f3ef6e07276f782bb46b93d", + "5f3ef6e04559b939080db057", "Part 58" ], [ - "5f3ef6e0a81099d9a697b550", + "5f3ef6e03d719d5ac4738993", "Part 59" ], [ - "5f3ef6e0b431cc215bb16f55", + "5f3ef6e05473f91f948724ab", "Part 60" ], [ - "5f3ef6e01f288a026d709587", + "5f3ef6e056bdde6ae6892ba2", "Part 61" ], [ - "5f3f26fa39591db45e5cd7a0", + "5f3ef6e0e9629bad967cd71e", "Part 62" ], [ - "5f459225127805351a6ad057", + "5f3ef6e06d34faac0447fc44", "Part 63" ], [ - "5f459a7ceb8b5c446656d88b", + "5f3ef6e087d56ed3ffdc36be", "Part 64" ], [ - "5f459cf202c2a3472fae6a9f", + "5f3ef6e0f8c230bdd2349716", "Part 65" ], [ - "5f459fd48bdc98491ca6d1a3", + "5f3ef6e07276f782bb46b93d", "Part 66" ], [ - "5f45a05977e2fa49d9119437", + "5f3ef6e0a81099d9a697b550", "Part 67" ], [ - "5f45a276c093334f0f6e9df4", + "5f3ef6e0b431cc215bb16f55", "Part 68" ], [ - "5f45a5a7c49a8251f0bdb527", + "5f3ef6e01f288a026d709587", "Part 69" ], [ - "5f46fc57528aa1c4b5ea7c2e", + "5f3f26fa39591db45e5cd7a0", "Part 70" ], [ - "5f4701b942c824109626c3d8", + "5f459225127805351a6ad057", "Part 71" ], [ - "5f46ede1ff8fec5ba656b44c", + "5f459a7ceb8b5c446656d88b", "Part 72" ], [ - "5f45a66d4a2b0453301e5a26", + "5f459cf202c2a3472fae6a9f", "Part 73" ], [ - "5f45b0731d39e15d54df4dfc", + "5f459fd48bdc98491ca6d1a3", "Part 74" ], [ - "5f45b25e7ec2405f166b9de1", + "5f45a05977e2fa49d9119437", "Part 75" ], [ - "5f45b3c93c027860d9298dbd", + "5f45a276c093334f0f6e9df4", "Part 76" ], [ - "5f45b45d099f3e621fbbb256", + "5f45a5a7c49a8251f0bdb527", "Part 77" ], [ - "5f45b4c81cea7763550e40df", + "5f46fc57528aa1c4b5ea7c2e", "Part 78" ], [ - "5f45b715301bbf667badc04a", + "5f4701b942c824109626c3d8", "Part 79" ], [ - "5f46e270702a8456a664f0df", + "5f46ede1ff8fec5ba656b44c", "Part 80" ], [ - "5f46e36e745ead58487aabf2", + "5f45a66d4a2b0453301e5a26", "Part 81" ], [ - "5f46e7a4750dd05b5a673920", + "5f45b0731d39e15d54df4dfc", "Part 82" ], [ - "5f46e8284aae155c83015dee", + "5f45b25e7ec2405f166b9de1", "Part 83" ], [ - "5f475bb508746c16c9431d42", + "5f45b3c93c027860d9298dbd", "Part 84" ], [ - "5f475e1c7f71a61d913836c6", + "5f45b45d099f3e621fbbb256", "Part 85" ], [ - "5f47fe7e31980053a8d4403b", + "5f45b4c81cea7763550e40df", "Part 86" + ], + [ + "5f45b715301bbf667badc04a", + "Part 87" + ], + [ + "5f46e270702a8456a664f0df", + "Part 88" + ], + [ + "5f46e36e745ead58487aabf2", + "Part 89" + ], + [ + "5f46e7a4750dd05b5a673920", + "Part 90" + ], + [ + "5f46e8284aae155c83015dee", + "Part 91" + ], + [ + "5f475bb508746c16c9431d42", + "Part 92" + ], + [ + "5f475e1c7f71a61d913836c6", + "Part 93" + ], + [ + "5f47fe7e31980053a8d4403b", + "Part 94" ] ], "helpRoom": "Help", "fileName": "01-responsive-web-design/basic-css-cafe-menu.json" -} +} \ No newline at end of file diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md index 61e4bbfac6..7db385f2de 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md @@ -7,16 +7,15 @@ challengeType: 0 ## Description
-Without specifying any CSS (Cascasing Style Sheets) styling, an element's content is positioned to the left. To center content of block-level elements (i.e. `h1`, `section`, `p`, etc.) you would put the following between the `style` element's opening and closing tags, where `elementName` is an element name like `h3`. +You can add style to an element by specifying it in the `style` element and setting a property for it like this: ```css -elementName { - text-align: center; +element { + property: value; } - ``` -Center the menu's `h1` element by using the syntax shown above. +Center your `h1` element by setting its `text-align` property to the value `center`.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md index e1f30b8e0f..122994ffc6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md @@ -7,7 +7,13 @@ challengeType: 0 ## Description
-You currently have three type selectors with the exact same styling. To reduce the amount of CSS, you can create a single type selector by specifying all the element names by commas. +You now have three type selectors with the exact same styling. You can add the same group of styles to many elements by separating the selectors with commas like this: + +```css +selector1, selector2 { + property: value; +} +``` Use a single type selector to center the `h1`, `h2` and `p` elements at the same time. diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md index 1cbdeab018..7143526473 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-So far you have styled three elements by writing CSS inside the `style` element of the `index.html` file. Since there will many more styles, you can write CSS in a separte file (`styles.css`) and then link to it. - -Get started by taking the content of the `index.html` file's `style` element (exclude the opening and closing tags) and rewrite it in the `styles.css`. +You have styled three elements by writing CSS inside the `style` tags. This works, but since there will many more styles, it's best to put all the styles in a separate file and link to it. Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md index 707b853d06..cf1713591e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-Now you need to link the `styles.css` file content, so your page will reflect the CSS styles defined in it. - -Nest a `link` element within the `style` element. `link` elements are used for other purposes besides CSS, so you will also need to add an `rel` attribute with the value `stylesheet` and a `type` attribute with the value `text/css`. +Now you need to link the `styles.css` file so the styles will be applied again. Next a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md index b696a69c9b..a712976f79 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-You can change the entire background color of the page to brown by using a `body` type selector and specifying the value `brown` for the `background-color` property. As you have already seen, selector properties and their values have a colon (`:`) between them. - -Add a new selector to the `styles.css` file to change the color of the entire page to `brown`. +The text is centered again so the link to the CSS file is working. Add another style to the file that changes the `background-color` property to `brown` for the `body` element.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md index acab72efae..6a22cb36c8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-That brown background makes it hard to read the text on the page. - -Change the `body` element's background color to be `burlywood` to have some color but still be able to read the text. +That brown background makes it hard to read the text. Change the `body` element's background color to be `burlywood` so it has some color but you are still be able to read the text.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md index b4d4779482..cc53428d5e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-The menu takes up the full width of the page. You can use a `div` element to hold all the elements located in the `body` element and then apply some special styling to it. The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. - -Start by adding a `div` element inside the `body` element and then move all the elements located in the `body` element inside it. +The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a `div` element inside the `body` element and then move all the other elements inside the new `div`.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md index 13907864cc..34aefbd458 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-The goal now is to make the `div` element not take the entire width of the page. The CSS `width` property is perfect for this. - -Create a `div` type selector in `styles.css` and give it a `width` property with value of `300px`. +The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. Create a new type selector in the style sheet that gives your `div` element a width of `300px`.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md index 9c20852927..b29626e847 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md @@ -7,9 +7,13 @@ challengeType: 0 ## Description
-Currently the entire background color of the page is `burlywood`. So you can see the effect of only styling `div` element, you will need to first temporarily comment out the line that defines the `background-color` for the `body` element. +Comments in CSS look like this: -Add `/*` before the line and `*/` after the line to make the line a comment instead of CSS code which will make the background color of the page white again. +```css +/* comment here */ +``` + +In your style sheet, comment out the the line containing the `background-color` property and value, so you can see the effect of only styling `div` element. This will make the background white again.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md index 254f69fa58..5f2a33f3ab 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-By now it is easy to see all the text is centered inside the `div` element. The white space on the top and left sides of the `div` element will be dealt with in a later step. - -Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, so that the element's width is 80% of the `body` element's width. +Now it's easy to see that the text is centered inside the `div` element. Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, to make it is 80% the width of its parent element (`body`).
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md index b72a003bc7..8ea4ee88c7 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-Next, you need to center the `div` element horizontally. This is accomplised by adding both a `margin-left` and `margin-right` property to the it and setting the value of both `auto`. You can think of a margin as invsible space around an element. - -Using these margin properties, center the `div` element within the `body` element. +Next, you want to center the `div` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `div` element within the `body` element.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md index b115f5a58f..571c8661ec 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md @@ -7,15 +7,15 @@ challengeType: 0 ## Description
-So far you have been using type selectors to style elements. A class selector is defined by a name with a dot directly in front it. For example, if you wanted to create a class selector named `container` that makes the width of a `div` element `700px`, you would write: +So far you have been using type selectors to style elements. A class selector is defined by a name with a dot directly in front it, like this: ```css -.container { - width: 700px; +.class-name { + styles } ``` -Turn the existing `div` selector into a class selector by replacing `div` with a class named `menu`. +Change the existing `div` selector into a class selector by replacing `div` with a class named `menu`.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md index f8f6da60de..7cedd750dd 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-Now that you have your coffee background, it would be a good time to add some coffee flavors and prices under the `Coffees` heading. To do this, you are going to add an `article` element that will contain a flavor and price. - -Add an `article` element under the `Coffees` heading. +It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffees` heading. It will contain a flavor and price of each coffee you currently offer.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md index 49462b0731..a8ca036e07 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-The `article` element you added is commonly found inside `section` elements when you plan on having other informational elements that are grouped. - -Go ahead nested two `p` elements inside your `article` element. The text for the first `p` element should be `French Vanilla` and the text for the second `p` element should be `3.00`. +`article` elements commonly contain multiple elements that have related information. In this case, it will contain a coffee flavor and a price for that flavor. Nest two `p` elements inside your `article` element. The first one's text should be `French Vanilla`, and the second's text `3.00`.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md index a08bc29cb3..fe38743152 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md @@ -9,7 +9,7 @@ challengeType: 0 The flavors and prices are currently stacked on top of each other and centered with their respectable `p` elements. It would be nice if the flavor was on the left and the price was on the right. -To style the flavor `p` element different from the price `p` element, first create two separate class selectors named `flavor` and `price` in `styles.css`. Then, align the text for the `flavor` class to the left and the `price` class to the right. +Add the class name `flavor` to the `French Vanilla` `p` element.
@@ -49,8 +49,10 @@ tests:

Coffees

+ --fcc-editable-region--

French Vanilla

3.00

+ --fcc-editable-region--

Carmel Macchiato

@@ -94,11 +96,6 @@ h1, h2, p { margin-left: auto; margin-right: auto; } - ---fcc-editable-region-- - - ---fcc-editable-region-- ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md index 48af194bed..16a0408c46 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md @@ -1,5 +1,5 @@ --- -id: 5f3c866d697fb245bc801648 +id: 5f769541be494f25449b292f title: Part 34 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Now that you have defined the classes, apply them to the first `article` element's `p` elements (representing `French Vanilla`). +Using your new `flavor` class as a selector, set the `text-align` property's value to `left`.
@@ -46,12 +46,10 @@ tests:

Coffees

- --fcc-editable-region--
-

French Vanilla

+

French Vanilla

3.00

- --fcc-editable-region--

Carmel Macchiato

3.75

@@ -95,14 +93,9 @@ h1, h2, p { margin-right: auto; } -.flavor { - text-align: left; -} - -.price { - text-align: right; -} +--fcc-editable-region-- +--fcc-editable-region-- ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md index 20c2f81740..b5b768d3f0 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md @@ -1,5 +1,5 @@ --- -id: 5f3c866de7a5b784048f94b1 +id: 5f76967fad478126d6552b0d title: Part 35 challengeType: 0 --- @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-That is kind of what you want, but now it would be nice if the flavor and price were on the same line. Remember that `p` elements are block-level elements, so they take up the entire width of the parent element. - -To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Start by adding a `class` attribute with the value `item` to each `article` element. +Next, you want to align the price to the right. Add a class named `price` to your `p` element that has `3.00` as its text.
@@ -48,10 +46,11 @@ tests:

Coffees

- --fcc-editable-region--

French Vanilla

-

3.00

+ --fcc-editable-region-- +

3.00

+ --fcc-editable-region--

Carmel Macchiato

@@ -69,7 +68,6 @@ tests:

Mocha

4.50

- --fcc-editable-region--
@@ -100,11 +98,6 @@ h1, h2, p { .flavor { text-align: left; } - -.price { - text-align: right; -} - ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md index 25e75c3146..b32a7771d5 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md @@ -1,5 +1,5 @@ --- -id: 5f3c866dbf362f99b9a0c6d0 +id: 5f769702e6e33127d14aa120 title: Part 36 challengeType: 0 --- @@ -7,13 +7,7 @@ challengeType: 0 ## Description
-The `p` elements are nested in `article` elements with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` by defining a selector as: - -```css -.item p { } -``` - -Define a new style using the above selector. Add a `display` property with the value `inline-block` so the `p` elements behave more like `inline` elements instead of `block-line` elements. +Now align the text to the `right` for the elements with the `price` class.
@@ -52,23 +46,23 @@ tests:

Coffees

-
+

French Vanilla

3.00

-
+

Carmel Macchiato

3.75

-
+

Pumpkin Spice

3.50

-
+

Hazelnut

4.00

-
+

Mocha

4.50

@@ -99,18 +93,13 @@ h1, h2, p { margin-right: auto; } ---fcc-editable-region-- - ---fcc-editable-region-- - .flavor { text-align: left; } -.price { - text-align: right; -} +--fcc-editable-region-- +--fcc-editable-region-- ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md index c135fe62a9..b570b2ce8a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md @@ -1,5 +1,5 @@ --- -id: 5f3c866d0fc037f7311b4ac8 +id: 5f3c866de7a5b784048f94b1 title: Part 37 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each. +That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are block-level elements, so they take up the entire width of their parent element. + +To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to first `article` element under the `Coffees` heading.
@@ -45,24 +47,26 @@ tests:
+ --fcc-editable-region--

Coffees

-
+

French Vanilla

3.00

-
+ --fcc-editable-region-- +

Carmel Macchiato

3.75

-
+

Pumpkin Spice

3.50

-
+

Hazelnut

4.00

-
+

Mocha

4.50

@@ -93,11 +97,6 @@ h1, h2, p { margin-right: auto; } -.item p { - display: inline-block; -} - ---fcc-editable-region-- .flavor { text-align: left; } @@ -105,7 +104,7 @@ h1, h2, p { .price { text-align: right; } ---fcc-editable-region-- + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md index 6982090f61..f7563cceef 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md @@ -1,5 +1,5 @@ --- -id: 5f3c866dd0d0275f01d4d847 +id: 5f3c866dbf362f99b9a0c6d0 title: Part 38 challengeType: 0 --- @@ -7,9 +7,13 @@ challengeType: 0 ## Description
-Well that did not work. The reason is, by styling the `p` elements as `inline-block`, placing them on a separate lines in the code, there is an extra space that adds to the right of the first `p` element, so the second one shifts to the next line. There are a couple of ways to handle this. One way is to make each's width a little less than `50%`. +The `p` elements are nested in an `article` elements with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this: -Change the `width` value to `49%` for each class to see what happens. +```css +.item p { } +``` + +Using the above selector, add a `display` property with value `inline-block` so the `p` elements behave more like `inline` elements.
@@ -52,19 +56,19 @@ tests:

French Vanilla

3.00

-
+

Carmel Macchiato

3.75

-
+

Pumpkin Spice

3.50

-
+

Hazelnut

4.00

-
+

Mocha

4.50

@@ -95,21 +99,18 @@ h1, h2, p { margin-right: auto; } -.item p { - display: inline-block; -} +--fcc-editable-region-- --fcc-editable-region-- + .flavor { text-align: left; - width: 50%; } .price { text-align: right; - width: 50%; } ---fcc-editable-region-- + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md index c8614665bb..c33eb40e48 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md @@ -1,5 +1,5 @@ --- -id: 5f3cade9fa77275d9f4efe62 +id: 5f3c866d0fc037f7311b4ac8 title: Part 39 challengeType: 0 --- @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-That worked, but there is still a little space on the right of the price. - -You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them. +That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each.
@@ -49,24 +47,22 @@ tests:

Coffees

- --fcc-editable-region--

French Vanilla

3.00

- --fcc-editable-region--
-
+

Carmel Macchiato

3.75

-
+

Pumpkin Spice

3.50

-
+

Hazelnut

4.00

-
+

Mocha

4.50

@@ -101,15 +97,15 @@ h1, h2, p { display: inline-block; } +--fcc-editable-region-- .flavor { text-align: left; - width: 49%; } .price { text-align: right; - width: 49%; } +--fcc-editable-region-- ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md index c0cb2a57c1..4784c2afba 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md @@ -1,5 +1,5 @@ --- -id: 5f3cade94c6576e7f7b7953f +id: 5f3c866dd0d0275f01d4d847 title: Part 40 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again. +Well that did not work. Styling the `p` elements as `inline-block` and placing them on a separate lines in the code, creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p`'s width a little less than `50%`. + +Change the `width` value to `49%` for each class to see what happens.
@@ -47,21 +49,22 @@ tests:

Coffees

-

French Vanilla

3.00

+

French Vanilla

+

3.00

-
+

Carmel Macchiato

3.75

-
+

Pumpkin Spice

3.50

-
+

Hazelnut

4.00

-
+

Mocha

4.50

@@ -99,12 +102,12 @@ h1, h2, p { --fcc-editable-region-- .flavor { text-align: left; - width: 49%; + width: 50%; } .price { text-align: right; - width: 49%; + width: 50%; } --fcc-editable-region-- ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md index 30dab21e61..88f348e535 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md @@ -1,5 +1,5 @@ --- -id: 5f3cade9993019e26313fa8e +id: 5f3cade9fa77275d9f4efe62 title: Part 41 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-Now that you know it works, change the other `article` elements so that the `p` elements are on the same line with no space between them. You also need to apply the applicable styles `flavor` and `price` to the corresponding `p` elements. +That worked, but there is still a little space on the right of the price. + +You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them.
@@ -47,26 +49,27 @@ tests:

Coffees

-

French Vanilla

3.00

+ --fcc-editable-region-- +

French Vanilla

+

3.00

+ --fcc-editable-region--
- --fcc-editable-region-- -
+

Carmel Macchiato

3.75

-
+

Pumpkin Spice

3.50

-
+

Hazelnut

4.00

-
+

Mocha

4.50

- --fcc-editable-region--
@@ -100,12 +103,12 @@ h1, h2, p { .flavor { text-align: left; - width: 50%; + width: 49%; } .price { text-align: right; - width: 50%; + width: 49%; } ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md index 65c7e975b5..91785a1f1c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md @@ -1,5 +1,5 @@ --- -id: 5f47633757ae3469f2d33d2e +id: 5f3cade94c6576e7f7b7953f title: Part 42 challengeType: 0 --- @@ -7,9 +7,7 @@ challengeType: 0 ## Description
-If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space. - -Since you know the prices on the right have significantly less numbe of characters, change the `flavor` class `width` value to be `75%` and then `dessert` class `width` value to be `25%`. +Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again.
@@ -51,17 +49,21 @@ tests:

French Vanilla

3.00

-
-

Carmel Macchiato

3.75

+
+

Carmel Macchiato

+

3.75

-
-

Pumpkin Spice

3.50

+
+

Pumpkin Spice

+

3.50

-
-

Hazelnut

4.00

+
+

Hazelnut

+

4.00

-
-

Mocha

4.50

+
+

Mocha

+

4.50

@@ -97,12 +99,12 @@ h1, h2, p { --fcc-editable-region-- .flavor { text-align: left; - width: 50%; + width: 49%; } .price { text-align: right; - width: 50%; + width: 49%; } --fcc-editable-region-- ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md index fbb8fab72d..e48722bef0 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md @@ -1,5 +1,5 @@ --- -id: 5f3cade99dda4e6071a85dfd +id: 5f3cade9993019e26313fa8e title: Part 43 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-You will come back to the styling the menu in a few steps, but for now, go ahead add a second `section` element below the first for displaying the desserts offered by the cafe. +Now that you know it works, you can change the remaining `article` and `p` elements to match the first set. Start by adding the class `item` to the other `article` elements.
@@ -44,26 +44,30 @@ tests:

Est. 2020

- --fcc-editable-region--

Coffees

French Vanilla

3.00

-
-

Carmel Macchiato

3.75

+ --fcc-editable-region-- +
+

Carmel Macchiato

+

3.75

-
-

Pumpkin Spice

3.50

+
+

Pumpkin Spice

+

3.50

-
-

Hazelnut

4.00

+
+

Hazelnut

+

4.00

-
-

Mocha

4.50

+
+

Mocha

+

4.50

+ --fcc-editable-region--
- --fcc-editable-region--
@@ -96,12 +100,12 @@ h1, h2, p { .flavor { text-align: left; - width: 75%; + width: 50%; } .price { text-align: right; - width: 25% + width: 50%; } ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md index a2b15acb81..ebf0533b31 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0e0c3feaebcf647ad +id: 5f7691dafd882520797cd2f0 title: Part 44 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Add an `h2` element in the new section add give it the text `Desserts`. +Next, position the other `p` elements to be on the same line with no space between them.
@@ -49,23 +49,25 @@ tests:

French Vanilla

3.00

+ --fcc-editable-region--
-

Carmel Macchiato

3.75

+

Carmel Macchiato

+

3.75

-

Pumpkin Spice

3.50

+

Pumpkin Spice

+

3.50

-

Hazelnut

4.00

+

Hazelnut

+

4.00

-

Mocha

4.50

+

Mocha

+

4.50

+ --fcc-editable-region--
- --fcc-editable-region-- -
-
- --fcc-editable-region--
@@ -98,12 +100,12 @@ h1, h2, p { .flavor { text-align: left; - width: 75%; + width: 50%; } .price { text-align: right; - width: 25% + width: 50%; } ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md index fde611280d..a0891c0796 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0819d4f23ca7285e6 +id: 5f7692f7c5b3ce22a57788b6 title: Part 45 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Now you need to add four `article` elements below the `h2`. Each should have a `class` attribute with the value `item`. +To complete the styling, add the applicable class names `flavor` and `price` to all the remaining `p` elements.
@@ -49,22 +49,19 @@ tests:

French Vanilla

3.00

-
-

Carmel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
--fcc-editable-region-- -

Desserts

+
+

Carmel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
--fcc-editable-region--
@@ -99,12 +96,12 @@ h1, h2, p { .flavor { text-align: left; - width: 75%; + width: 50%; } .price { text-align: right; - width: 25% + width: 50%; } ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md index 588b673152..4e3a14f43a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0835da6ccc3ee9958 +id: 5f47633757ae3469f2d33d2e title: Part 46 challengeType: 0 --- @@ -7,14 +7,9 @@ challengeType: 0 ## Description
-Within each of the four `article` elements, add the following desserts and prices using an `article` element with two nested `p` elements inside each. Similar to what you did with the coffees, the first `p` element's text should contain the dessert name and the second `p` element's text should contain the price. +If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space. -```bash -Donut 1.50 -Cherry Pie 2.75 -Cheesecake 3.00 -Cinammon Roll -``` +Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and then `dessert` class `width` value to be `25%`.
@@ -69,19 +64,6 @@ tests:

Mocha

4.50

-
-

Desserts

- --fcc-editable-region-- -
-
-
-
-
-
-
-
- --fcc-editable-region-- -
@@ -112,15 +94,17 @@ h1, h2, p { display: inline-block; } +--fcc-editable-region-- .flavor { text-align: left; - width: 75%; + width: 50%; } .price { text-align: right; - width: 25% + width: 50%; } +--fcc-editable-region-- ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md index f9ba84d9ad..146f4ba022 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0086dc80481f8cb03 +id: 5f3cade99dda4e6071a85dfd title: Part 47 challengeType: 0 --- @@ -7,9 +7,7 @@ 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. - -Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it. +You will come back to the styling the menu in a few steps, but for now, go ahead add a second `section` element below the first for displaying the desserts offered by the cafe.
@@ -46,6 +44,7 @@ tests:

Est. 2020

+ --fcc-editable-region--

Coffees

@@ -64,21 +63,7 @@ tests:

Mocha

4.50

-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
+ --fcc-editable-region--
@@ -109,12 +94,10 @@ h1, h2, p { display: inline-block; } ---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-048.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md index 9caa3703b8..215e109518 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0eaa7da26e3d34d78 +id: 5f3ef6e0e0c3feaebcf647ad title: Part 48 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`. +Add an `h2` element in the new section add give it the text `Desserts`.
@@ -64,21 +62,10 @@ tests:

Mocha

4.50

+ --fcc-editable-region--
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
+ --fcc-editable-region-- @@ -98,20 +85,18 @@ 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 { +.flavor { text-align: left; width: 75%; } diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md index 22582b2536..022c0e1e2d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e050279c7a4a7101d3 +id: 5f3ef6e0819d4f23ca7285e6 title: Part 49 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. +Add an empty `article` element under the `Desserts` heading. Give it a `class` attribute with the value `item`.
@@ -63,19 +63,9 @@ tests:
+ --fcc-editable-region--

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
+ --fcc-editable-region--
@@ -96,22 +86,18 @@ h1, h2, p { text-align: center; } ---fcc-editable-region-- .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; - padding-left: 20px; - padding-right: 20px; } ---fcc-editable-region-- .item p { display: inline-block; } -.flavor, .dessert { +.flavor { text-align: left; width: 75%; } diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md index a969d6db3f..57e898bdae 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e04559b939080db057 +id: 5f716ad029ee4053c7027a7a title: Part 50 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Since all 4 sides of the menu have the same internal spacing, go ahread and delete the four properites and use a single `padding` property with the value `20px`. +Nest two `p` elements inside your `article` element. The first one's text should be `Donut`, and the second's text `1.50`. Put both of them on the same line making sure there is no space between them.
@@ -64,18 +64,10 @@ tests:

Desserts

+ --fcc-editable-region--
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

+ --fcc-editable-region--
@@ -96,24 +88,18 @@ h1, h2, p { text-align: center; } ---fcc-editable-region-- .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; - padding-left: 20px; - padding-right: 20px; - padding-top: 20px; - padding-bottom: 20px; } ---fcc-editable-region-- .item p { display: inline-block; } -.flavor, .dessert { +.flavor { text-align: left; width: 75%; } diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md index 2f997ec377..b1150f2169 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e03d719d5ac4738993 +id: 5f7b87422a560036fd03ccff title: Part 51 challengeType: 0 --- @@ -7,9 +7,7 @@ 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. - -Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide. +For the two `p` elements you just added, add `dessert` as the value of the first `p` element's `class` attribute and the value `price` as the second `p` elements `class` attribute.
@@ -67,16 +65,9 @@ tests:

Desserts

-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

+ --fcc-editable-region-- +

Donut

1.50

+ --fcc-editable-region--
@@ -98,21 +89,18 @@ h1, h2, p { text-align: center; } ---fcc-editable-region-- .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; - padding: 20px; } ---fcc-editable-region-- .item p { display: inline-block; } -.flavor, .dessert { +.flavor { text-align: left; width: 75%; } diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md index 65d6753a66..259aa68cba 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e05473f91f948724ab +id: 5f7b88d37b1f98386f04edc0 title: Part 52 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. +Something does not look right. You added the correct `class` attribute value to the `p` element with `Donunt` as its text, but you have not defined a selector for it. -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. +Since the `flavor` class selector already has the properties you want, just add the `dessert` class name to it.
@@ -69,15 +69,6 @@ tests:

Donut

1.50

-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
@@ -90,11 +81,9 @@ tests:
```css ---fcc-editable-region-- body { background-image: url(https://tinyurl.com/coffee-beans-fcc); } ---fcc-editable-region-- h1, h2, p { text-align: center; @@ -105,18 +94,18 @@ h1, h2, p { background-color: burlywood; margin-left: auto; margin-right: auto; - padding: 20px; - max-width: 500px; } .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-053.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md index 0f5de19d87..dea095609a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md @@ -1,5 +1,5 @@ --- -id: 5f3ef6e056bdde6ae6892ba2 +id: 5f716bee5838c354c728a7c5 title: Part 53 challengeType: 0 --- @@ -7,9 +7,13 @@ 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. +Below the dessert you just added, add the rest of the desserts and prices using three more `article` elements, each with two nested `p` elements. Each element should have the correct dessert and price text, and all of them should have the correct classes. -Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font. +```bash +Cherry Pie 2.75 +Cheesecake 3.00 +Cinammon Roll 2.50 +```
@@ -66,18 +70,11 @@ tests:

Desserts

+ --fcc-editable-region--

Donut

1.50

-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
+ --fcc-editable-region--
@@ -92,7 +89,6 @@ tests: ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); - font-family: sans-serif; } h1, h2, p { @@ -104,14 +100,8 @@ h1, h2, p { background-color: burlywood; margin-left: auto; margin-right: auto; - padding: 20px; - 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-054.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md index 6584d7c2de..cf6508bd33 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: 5f3ef6e0e9629bad967cd71e +id: 5f3ef6e0eaa7da26e3d34d78 title: Part 54 challengeType: 0 --- @@ -7,9 +7,9 @@ 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. +You can give your menu some space between the content and the sides with various `padding` properties. -Add the fallback font `serif` after the `Impact` font. +Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
@@ -92,25 +92,18 @@ tests: ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); - font-family: sans-serif; } 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-- -h1, h2 { - font-family: Impact; } --fcc-editable-region-- 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 a65a0b5f99..4d0c55628d 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: 5f3ef6e06d34faac0447fc44 +id: 5f3ef6e0086dc80481f8cb03 title: Part 55 challengeType: 0 --- @@ -7,7 +7,9 @@ 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`. +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. + +Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it.
@@ -90,13 +92,8 @@ tests: ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); - font-family: sans-serif; } ---fcc-editable-region-- - ---fcc-editable-region-- - h1, h2, p { text-align: center; } @@ -106,22 +103,18 @@ h1, h2, p { background-color: burlywood; margin-left: auto; margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; } .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-056.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md index f4b15c0db2..9037ff42f6 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: 5f3ef6e087d56ed3ffdc36be +id: 5f3ef6e0eaa7da26e3d34d78 title: Part 56 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-Now apply the `established` class to the `Est. 2020` text. +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`.
@@ -39,12 +41,10 @@ tests:
- --fcc-editable-region--

CAMPER CAFE

Est. 2020

- --fcc-editable-region--

Coffees

@@ -92,29 +92,20 @@ tests: ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); - font-family: sans-serif; -} - -.established { - font-style: italic; } 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; -} - -h1, h2 { - 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-057.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md index 742ad0c467..99e9daa3e5 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: 5f3ef6e0f8c230bdd2349716 +id: 5f3ef6e050279c7a4a7101d3 title: Part 57 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`. +That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
@@ -43,7 +41,7 @@ tests:

CAMPER CAFE

-

Est. 2020

+

Est. 2020

@@ -92,33 +90,22 @@ tests: ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); - font-family: sans-serif; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.established { - font-style: italic; } 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; -} - -h1, h2 { - font-family: Impact, serif; + padding-left: 20px; + padding-right: 20px; } +--fcc-editable-region-- .item p { display: inline-block; 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 dfd72dbfe8..fca9b8a8c8 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: 5f3ef6e07276f782bb46b93d +id: 5f3ef6e04559b939080db057 title: Part 58 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Add a `footer` element below the `main` element, where you can some additional information. +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`.
@@ -41,9 +41,8 @@ tests:

CAMPER CAFE

-

Est. 2020

+

Est. 2020

- --fcc-editable-region--

Coffees

@@ -79,7 +78,6 @@ tests:
- --fcc-editable-region--
@@ -92,37 +90,24 @@ tests: ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; } 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; -} - -h1, h2 { - font-family: Impact, serif; + padding-left: 20px; + padding-right: 20px; + padding-top: 20px; + padding-bottom: 20px; } +--fcc-editable-region-- .item p { display: inline-block; 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 531fce68b1..03f13c8dc2 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: 5f3ef6e0a81099d9a697b550 +id: 5f3ef6e03d719d5ac4738993 title: Part 59 challengeType: 0 --- @@ -7,7 +7,9 @@ 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`. +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.
@@ -26,7 +28,6 @@ tests: ## Challenge Seed
-
```html @@ -42,7 +43,7 @@ tests:

CAMPER CAFE

-

Est. 2020

+

Est. 2020

@@ -79,10 +80,6 @@ tests:
- --fcc-editable-region-- -
-
- --fcc-editable-region--
@@ -95,37 +92,21 @@ tests: ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; } 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; -} - -h1, h2 { - 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-060.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md index 5a4caf0847..f3b8a93cf9 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: 5f3ef6e0b431cc215bb16f55 +id: 5f3ef6e05473f91f948724ab title: Part 60 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 Free Code Camp Drive`. +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. + +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.
@@ -41,7 +43,7 @@ tests:

CAMPER CAFE

-

Est. 2020

+

Est. 2020

@@ -78,13 +80,6 @@ tests:
-
@@ -95,22 +90,11 @@ tests:
```css +--fcc-editable-region-- body { background-image: url(https://tinyurl.com/coffee-beans-fcc); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; } +--fcc-editable-region-- h1, h2, p { text-align: center; @@ -125,10 +109,6 @@ h1, h2, p { max-width: 500px; } -h1, h2 { - font-family: Impact, serif; -} - .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 1f509a1f08..b4bcb8d592 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: 5f3ef6e01f288a026d709587 +id: 5f3ef6e056bdde6ae6892ba2 title: Part 61 challengeType: 0 --- @@ -7,9 +7,9 @@ challengeType: 0 ## Description
-You can use an `hr` element to display a divider between sections of different content. +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. -First, add an `hr` element between the first `header` element and the `main` element. +Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font.
@@ -43,7 +43,7 @@ tests:

CAMPER CAFE

-

Est. 2020

+

Est. 2020

@@ -80,12 +80,6 @@ tests:
-
@@ -101,18 +95,6 @@ body { font-family: sans-serif; } -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - h1, h2, p { text-align: center; } @@ -126,9 +108,9 @@ h1, h2, p { max-width: 500px; } -h1, h2 { - font-family: Impact, serif; -} +--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-062.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md index 0ccbda5c1d..aa33564e97 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: 5f3f26fa39591db45e5cd7a0 +id: 5f3ef6e0e9629bad967cd71e title: Part 62 challengeType: 0 --- @@ -7,10 +7,9 @@ challengeType: 0 ## Description
-The default properties of an `hr` element will make it appear as a thin light grey line. You can change the heighth of the line by specifying a value for the `height` property. - -Change the height the `hr` element to be `3px`. +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.
@@ -44,9 +43,8 @@ tests:

CAMPER CAFE

-

Est. 2020

+

Est. 2020

-

Coffees

@@ -82,12 +80,6 @@ tests:
-
@@ -103,18 +95,6 @@ body { font-family: sans-serif; } -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - h1, h2, p { text-align: center; } @@ -129,12 +109,10 @@ h1, h2, p { } --fcc-editable-region-- - ---fcc-editable-region-- - h1, h2 { - font-family: Impact, serif; + font-family: Impact; } +--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 cf3569e8d1..e16403eaa5 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: 5f459225127805351a6ad057 +id: 5f3ef6e06d34faac0447fc44 title: Part 63 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Change the background color of the `hr` elemnent to be `brown` to make it match the color of the coffee beans. +Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`.
@@ -41,9 +41,8 @@ tests:

CAMPER CAFE

-

Est. 2020

+

Est. 2020

-

Coffees

@@ -79,12 +78,6 @@ tests:
-
@@ -100,17 +93,9 @@ body { font-family: sans-serif; } -h1 { - font-size: 40px; -} +--fcc-editable-region-- -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} +--fcc-editable-region-- h1, h2, p { text-align: center; @@ -125,12 +110,6 @@ h1, h2, p { max-width: 500px; } ---fcc-editable-region-- -hr { - height: 3px; -} ---fcc-editable-region-- - h1, h2 { font-family: Impact, serif; } 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 8ab3e92991..baca5049d4 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: 5f459a7ceb8b5c446656d88b +id: 5f3ef6e087d56ed3ffdc36be title: Part 64 challengeType: 0 --- @@ -7,9 +7,7 @@ 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. - -Make all the edges of the `hr` element the same color as the background of it using the `border-color` property. +Now apply the `established` class to the `Est. 2020` text.
@@ -41,11 +39,12 @@ tests:
+ --fcc-editable-region--

CAMPER CAFE

-

Est. 2020

+

Est. 2020

-
+ --fcc-editable-region--

Coffees

@@ -81,12 +80,6 @@ tests:
-
@@ -102,14 +95,6 @@ body { font-family: sans-serif; } -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - .established { font-style: italic; } @@ -127,13 +112,6 @@ h1, h2, p { max-width: 500px; } ---fcc-editable-region-- -hr { - height: 3px; - background-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-065.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md index 0c1885fab0..359754fe34 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: 5f459cf202c2a3472fae6a9f +id: 5f3ef6e0f8c230bdd2349716 title: Part 65 challengeType: 0 --- @@ -7,9 +7,9 @@ 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`). +The `h1` and `h2` elements' text are set by default values of the user's browser. -Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`. +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`.
@@ -45,7 +45,6 @@ tests:

CAMPER CAFE

Est. 2020

-

Coffees

@@ -81,12 +80,6 @@ tests:
-
@@ -102,13 +95,9 @@ body { font-family: sans-serif; } -h1 { - font-size: 40px; -} +--fcc-editable-region-- -h2 { - font-size: 30px; -} +--fcc-editable-region-- .established { font-style: italic; @@ -127,14 +116,6 @@ h1, h2, p { max-width: 500px; } ---fcc-editable-region-- -hr { - height: 3px; - 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-066.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md index 9103fe0f96..dc851bef00 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: 5f459fd48bdc98491ca6d1a3 +id: 5f3ef6e07276f782bb46b93d title: Part 66 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description
-Go ahead and add another `hr` element between the `main` element and the `footer` element. +Add a `footer` element below the `main` element, where you can some additional information.
@@ -43,7 +43,6 @@ tests:

CAMPER CAFE

Est. 2020

-
--fcc-editable-region--
@@ -80,12 +79,6 @@ tests:
- --fcc-editable-region--
@@ -127,12 +120,6 @@ h1, h2, p { max-width: 500px; } -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - h1, h2 { font-family: Impact, serif; } 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 142341ee80..04bb8263a0 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: 5f45a05977e2fa49d9119437 +id: 5f3ef6e0a81099d9a697b550 title: Part 67 challengeType: 0 --- @@ -7,7 +7,7 @@ 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. +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

-

Coffees

@@ -79,13 +79,10 @@ tests:
-
+ --fcc-editable-region-- + --fcc-editable-region--
@@ -96,12 +93,10 @@ 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; @@ -128,12 +123,6 @@ h1, h2, p { max-width: 500px; } -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - h1, h2 { font-family: Impact, serif; } 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 b58f912f2e..14a49d7138 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: 5f45a276c093334f0f6e9df4 +id: 5f3ef6e0b431cc215bb16f55 title: Part 68 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`. +Add a second `p` element below the one with the link and give it the text `123 freeCodeCamp Drive`.
@@ -45,7 +43,6 @@ tests:

CAMPER CAFE

Est. 2020

-

Coffees

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

Visit our website

-

123 Free Code Camp Drive

+ --fcc-editable-region--
@@ -101,7 +98,6 @@ tests: body { background-image: url(https://tinyurl.com/coffee-beans-fcc); font-family: sans-serif; - padding: 20px; } h1 { @@ -129,13 +125,6 @@ h1, h2, p { max-width: 500px; } -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - ---fcc-editable-region-- h1, h2 { font-family: Impact, serif; } @@ -153,7 +142,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-069.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md index f57811cd14..e62dd88976 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: 5f45a5a7c49a8251f0bdb527 +id: 5f3ef6e01f288a026d709587 title: Part 69 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 by using a value of `18px`. +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,11 +41,11 @@ tests:
+ --fcc-editable-region--

CAMPER CAFE

Est. 2020

-

Coffees

@@ -79,7 +81,7 @@ tests:
-
+ --editable-region-marker--

Visit our website @@ -99,7 +101,6 @@ tests: body { background-image: url(https://tinyurl.com/coffee-beans-fcc); font-family: sans-serif; - padding: 20px; } h1 { @@ -127,23 +128,13 @@ h1, h2, p { max-width: 500px; } -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - 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; 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 2925333c72..c44b0c9876 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: 5f46fc57528aa1c4b5ea7c2e +id: 5f3f26fa39591db45e5cd7a0 title: Part 70 challengeType: 0 --- @@ -7,9 +7,10 @@ challengeType: 0 ## Description

-Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinaommon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffees` heading. +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`. -Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.
@@ -81,7 +82,6 @@ tests:
-

Visit our website @@ -101,7 +101,6 @@ tests: body { background-image: url(https://tinyurl.com/coffee-beans-fcc); font-family: sans-serif; - padding: 20px; } h1 { @@ -129,12 +128,6 @@ h1, h2, p { max-width: 500px; } -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - --fcc-editable-region-- --fcc-editable-region-- @@ -145,9 +138,6 @@ h1, h2 { .item p { display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; } .flavor, .dessert { 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 84f08448e2..4c899a92f8 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: 5f4701b942c824109626c3d8 +id: 5f459225127805351a6ad057 title: Part 71 challengeType: 0 --- @@ -7,7 +7,7 @@ challengeType: 0 ## Description

-Now add the `bottom-line` class to the second `hr` element so the styling is applied. +Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans.
@@ -79,9 +79,6 @@ tests: - --fcc-editable-region-- -
- --fcc-editable-region--

Visit our website @@ -101,7 +98,6 @@ tests: body { background-image: url(https://tinyurl.com/coffee-beans-fcc); font-family: sans-serif; - padding: 20px; } h1 { @@ -129,15 +125,11 @@ h1, h2, p { max-width: 500px; } +--fcc-editable-region-- hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; + height: 3px; } +--fcc-editable-region-- h1, h2 { font-family: Impact, serif; @@ -145,9 +137,6 @@ h1, h2 { .item p { display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; } .flavor, .dessert { 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 3846dd2d88..2d24ea5542 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: 5f46ede1ff8fec5ba656b44c +id: 5f459a7ceb8b5c446656d88b title: Part 72 challengeType: 0 --- @@ -7,7 +7,9 @@ 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`. +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.
@@ -79,7 +81,7 @@ tests: -
+

Visit our website

@@ -98,7 +100,6 @@ tests: body { background-image: url(https://tinyurl.com/coffee-beans-fcc); font-family: sans-serif; - padding: 20px; } h1 { @@ -126,15 +127,12 @@ h1, h2, p { max-width: 500px; } +--fcc-editable-region-- hr { - height: 2px; + height: 3px; background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; } +--fcc-editable-region-- h1, h2 { font-family: Impact, serif; @@ -142,9 +140,6 @@ h1, h2 { .item p { display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; } .flavor, .dessert { @@ -156,10 +151,6 @@ h1, h2 { text-align: right; width: 25% } - ---fcc-editable-region-- - ---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 355eb4cd41..ef4a8475de 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: 5f45a66d4a2b0453301e5a26 +id: 5f459cf202c2a3472fae6a9f title: Part 73 challengeType: 0 --- @@ -7,7 +7,9 @@ challengeType: 0 ## Description
-Moving down to the `footer` element, make all the text have a value of `14px` for the font size. +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`.
@@ -79,7 +81,6 @@ tests: -