mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-02-28 14:01:32 -05:00
feat(curriculum): add cafe menu to frontend cert (#56171)
This commit is contained in:
Jessica Wilkins
@@ -1810,7 +1810,13 @@
|
||||
]
|
||||
},
|
||||
"dxpc": { "title": "36", "intro": [] },
|
||||
"liti": { "title": "37", "intro": [] },
|
||||
"workshop-cafe-menu": {
|
||||
"title": "Design a Cafe Menu",
|
||||
"intro": [
|
||||
"CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.",
|
||||
"In this workshop, you'll learn CSS by designing a menu page for a cafe webpage."
|
||||
]
|
||||
},
|
||||
"lab-business-card": {
|
||||
"title": "Design a Business Card",
|
||||
"intro": [
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Design a Cafe Menu
|
||||
block: workshop-cafe-menu
|
||||
superBlock: front-end-development
|
||||
---
|
||||
|
||||
## Introduction to the Design a Cafe Menu
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
377
curriculum/challenges/_meta/workshop-cafe-menu/meta.json
Normal file
377
curriculum/challenges/_meta/workshop-cafe-menu/meta.json
Normal file
@@ -0,0 +1,377 @@
|
||||
{
|
||||
"name": "Design a Cafe Menu",
|
||||
"blockType": "workshop",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "workshop-cafe-menu",
|
||||
"order": 37,
|
||||
"superBlock": "front-end-development",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "5f33071498eb2472b87ddee4",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "5f3313e74582ad9d063e3a38",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "5f331e55dfab7a896e53c3a1",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "5f3326b143638ee1a09ff1e3",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "5f33294a6af5e9188dbdb8f3",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "5f332a88dc25a0fd25c7687a",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "5f332b23c2045fb843337579",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "5f344fc1520b6719f2e35605",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "5f344fbc22624a2976425065",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "5f344fad8bf01691e71a30eb",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "5f344f9c805cd193c33d829c",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "5f3477ae9675db8bb7655b30",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "5f3477ae34c1239cafe128be",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "5f3477aefa51bfc29327200b",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "5f3477ae8466a9a3d2cc953c",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "5f3477cb2e27333b1ab2b955",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "5f3477cbcb6ba47918c1da92",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "5f3477cb303c5cb61b43aa9b",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "5f34a1fd611d003edeafd681",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "5f356ed6cf6eab5f15f5cfe6",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "5f356ed63c7807a4f1e6d054",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "5f356ed60a5decd94ab66986",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "5f356ed63e0fa262326eef05",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "5f356ed60785e1f3e9850b6e",
|
||||
"title": "Step 24"
|
||||
},
|
||||
{
|
||||
"id": "5f356ed656a336993abd9f7c",
|
||||
"title": "Step 25"
|
||||
},
|
||||
{
|
||||
"id": "5f356ed6199b0cdef1d2be8f",
|
||||
"title": "Step 26"
|
||||
},
|
||||
{
|
||||
"id": "5f356ed69db0a491745e2bb6",
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "5f35e5c44359872a137bd98f",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "5f35e5c4321f818cdc4bed30",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "5f3c866daec9a49519871816",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "5f3c866d5414453fc2d7b480",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "5f3c866d28d7ad0de6470505",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "5f769541be494f25449b292f",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "5f76967fad478126d6552b0d",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "5f769702e6e33127d14aa120",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "5f3c866de7a5b784048f94b1",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "5f3c866dbf362f99b9a0c6d0",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "5f3c866d0fc037f7311b4ac8",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "5f3c866dd0d0275f01d4d847",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "5f3cade9fa77275d9f4efe62",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "5f3cade94c6576e7f7b7953f",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "5f3cade9993019e26313fa8e",
|
||||
"title": "Step 42"
|
||||
},
|
||||
{
|
||||
"id": "5f7691dafd882520797cd2f0",
|
||||
"title": "Step 43"
|
||||
},
|
||||
{
|
||||
"id": "5f7692f7c5b3ce22a57788b6",
|
||||
"title": "Step 44"
|
||||
},
|
||||
{
|
||||
"id": "5f47633757ae3469f2d33d2e",
|
||||
"title": "Step 45"
|
||||
},
|
||||
{
|
||||
"id": "5f3cade99dda4e6071a85dfd",
|
||||
"title": "Step 46"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e0e0c3feaebcf647ad",
|
||||
"title": "Step 47"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e0819d4f23ca7285e6",
|
||||
"title": "Step 48"
|
||||
},
|
||||
{
|
||||
"id": "5f716ad029ee4053c7027a7a",
|
||||
"title": "Step 49"
|
||||
},
|
||||
{
|
||||
"id": "5f7b87422a560036fd03ccff",
|
||||
"title": "Step 50"
|
||||
},
|
||||
{
|
||||
"id": "5f7b88d37b1f98386f04edc0",
|
||||
"title": "Step 51"
|
||||
},
|
||||
{
|
||||
"id": "5f716bee5838c354c728a7c5",
|
||||
"title": "Step 52"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e0eaa7da26e3d34d78",
|
||||
"title": "Step 53"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e050279c7a4a7101d3",
|
||||
"title": "Step 54"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e04559b939080db057",
|
||||
"title": "Step 55"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e03d719d5ac4738993",
|
||||
"title": "Step 56"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e05473f91f948724ab",
|
||||
"title": "Step 57"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e056bdde6ae6892ba2",
|
||||
"title": "Step 58"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e0e9629bad967cd71e",
|
||||
"title": "Step 59"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e06d34faac0447fc44",
|
||||
"title": "Step 60"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e087d56ed3ffdc36be",
|
||||
"title": "Step 61"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e0f8c230bdd2349716",
|
||||
"title": "Step 62"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e07276f782bb46b93d",
|
||||
"title": "Step 63"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e0a81099d9a697b550",
|
||||
"title": "Step 64"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e0b431cc215bb16f55",
|
||||
"title": "Step 65"
|
||||
},
|
||||
{
|
||||
"id": "5f3ef6e01f288a026d709587",
|
||||
"title": "Step 66"
|
||||
},
|
||||
{
|
||||
"id": "5f3f26fa39591db45e5cd7a0",
|
||||
"title": "Step 67"
|
||||
},
|
||||
{
|
||||
"id": "5f459225127805351a6ad057",
|
||||
"title": "Step 68"
|
||||
},
|
||||
{
|
||||
"id": "5f459a7ceb8b5c446656d88b",
|
||||
"title": "Step 69"
|
||||
},
|
||||
{
|
||||
"id": "5f459cf202c2a3472fae6a9f",
|
||||
"title": "Step 70"
|
||||
},
|
||||
{
|
||||
"id": "5f459fd48bdc98491ca6d1a3",
|
||||
"title": "Step 71"
|
||||
},
|
||||
{
|
||||
"id": "5f45a05977e2fa49d9119437",
|
||||
"title": "Step 72"
|
||||
},
|
||||
{
|
||||
"id": "5f45a276c093334f0f6e9df4",
|
||||
"title": "Step 73"
|
||||
},
|
||||
{
|
||||
"id": "5f45a5a7c49a8251f0bdb527",
|
||||
"title": "Step 74"
|
||||
},
|
||||
{
|
||||
"id": "5f46fc57528aa1c4b5ea7c2e",
|
||||
"title": "Step 75"
|
||||
},
|
||||
{
|
||||
"id": "5f4701b942c824109626c3d8",
|
||||
"title": "Step 76"
|
||||
},
|
||||
{
|
||||
"id": "5f46ede1ff8fec5ba656b44c",
|
||||
"title": "Step 77"
|
||||
},
|
||||
{
|
||||
"id": "5f45a66d4a2b0453301e5a26",
|
||||
"title": "Step 78"
|
||||
},
|
||||
{
|
||||
"id": "5f45b0731d39e15d54df4dfc",
|
||||
"title": "Step 79"
|
||||
},
|
||||
{
|
||||
"id": "5f45b25e7ec2405f166b9de1",
|
||||
"title": "Step 80"
|
||||
},
|
||||
{
|
||||
"id": "5f45b3c93c027860d9298dbd",
|
||||
"title": "Step 81"
|
||||
},
|
||||
{
|
||||
"id": "5f45b45d099f3e621fbbb256",
|
||||
"title": "Step 82"
|
||||
},
|
||||
{
|
||||
"id": "5f45b4c81cea7763550e40df",
|
||||
"title": "Step 83"
|
||||
},
|
||||
{
|
||||
"id": "5f45b715301bbf667badc04a",
|
||||
"title": "Step 84"
|
||||
},
|
||||
{
|
||||
"id": "5f46e270702a8456a664f0df",
|
||||
"title": "Step 85"
|
||||
},
|
||||
{
|
||||
"id": "5f46e36e745ead58487aabf2",
|
||||
"title": "Step 86"
|
||||
},
|
||||
{
|
||||
"id": "5f46e7a4750dd05b5a673920",
|
||||
"title": "Step 87"
|
||||
},
|
||||
{
|
||||
"id": "5f46e8284aae155c83015dee",
|
||||
"title": "Step 88"
|
||||
},
|
||||
{
|
||||
"id": "5f475bb508746c16c9431d42",
|
||||
"title": "Step 89"
|
||||
},
|
||||
{
|
||||
"id": "5f475e1c7f71a61d913836c6",
|
||||
"title": "Step 90"
|
||||
},
|
||||
{
|
||||
"id": "5f47fe7e31980053a8d4403b",
|
||||
"title": "Step 91"
|
||||
}
|
||||
],
|
||||
"helpCategory": "HTML-CSS"
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
id: 5f33071498eb2472b87ddee4
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop, you will learn the basics of CSS (Cascading Style Sheets) by building a cafe menu.
|
||||
|
||||
Start by adding your `<!DOCTYPE html>` and `html` element with a `lang` attribute set to `en`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have the `<!DOCTYPE html>`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<!DOCTYPE\s+html>/i);
|
||||
```
|
||||
|
||||
You should have an opening `<html lang="en">` with the language set to english.
|
||||
|
||||
```js
|
||||
assert.match(code, /<html\s+lang\s*=\s*('|")en\1\s*>/gi);
|
||||
```
|
||||
|
||||
You should have a closing `</html>` tag.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/html>/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 5f3313e74582ad9d063e3a38
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `head` element within the `html` element, so you can add a `title` element. The `title` element's text should be `Cafe Menu`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `<head>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</head>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>/i));
|
||||
```
|
||||
|
||||
You should have an opening `<title>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<title>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</title>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/title>/i));
|
||||
```
|
||||
|
||||
Your `title` element should be nested in your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>\s*<title>.*<\/title>\s*<\/head>/si));
|
||||
```
|
||||
|
||||
Your `title` element should have the text `Cafe Menu`. You may need to check your spelling.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('title')?.innerText, /Cafe Menu/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 5f331e55dfab7a896e53c3a1
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `meta` tag.
|
||||
|
||||
```js
|
||||
assert.match(code, /<meta.*?\/?>/is);
|
||||
```
|
||||
|
||||
The `meta` element is a void element, it should not have an end tag `</meta>`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /<\/meta>/i);
|
||||
```
|
||||
|
||||
Your `meta` tag should have a `charset` attribute.
|
||||
|
||||
```js
|
||||
assert.match(code, /<meta\s+charset\s*/i);
|
||||
```
|
||||
|
||||
Your `charset` attribute should have a value of `utf-8`.
|
||||
|
||||
```js
|
||||
assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 5f3326b143638ee1a09ff1e3
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To prepare to create some actual content, add a `body` element below the `head` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `<body>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</body>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body>/i));
|
||||
```
|
||||
|
||||
You should not change your `head` element. Make sure you did not delete your closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>/i));
|
||||
assert(code.match(/<\/head>/i));
|
||||
```
|
||||
|
||||
Your `body` element should come after your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head>[.\n\s]*<body>/im));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 5f33294a6af5e9188dbdb8f3
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It's time to add some menu content. Add a `main` element within the existing `body` element. It will eventually contain pricing information about coffee and desserts offered by the cafe.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have an opening `<main>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>/i));
|
||||
```
|
||||
|
||||
Your code should have a closing `</main>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/main>/i));
|
||||
```
|
||||
|
||||
You should not change your `body` element. Make sure you don't accidentally delete your closing tag.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('body'), 1);
|
||||
```
|
||||
|
||||
Your `main` tag should be within your `body` tag.
|
||||
|
||||
```js
|
||||
const main = document.querySelector('main');
|
||||
assert(main.parentElement.tagName === 'BODY');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 5f332a88dc25a0fd25c7687a
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The name of the cafe is `CAMPER CAFE`. Add an `h1` element within your `main` element. Give it the name of the cafe in capitalized letters to make it stand out.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `<h1>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</h1>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h1>/i));
|
||||
```
|
||||
|
||||
You should not change your existing `main` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('main'), 1);
|
||||
```
|
||||
|
||||
Your `h1` element should be nested in your `main` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('h1')?.parentElement?.tagName, "MAIN");
|
||||
```
|
||||
|
||||
Your `h1` element should have the text `CAMPER CAFE`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>CAMPER CAFE<\/h1>/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 5f332b23c2045fb843337579
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To let visitors know the cafe was founded in `2020`, add a `p` element below the `h1` element with the text `Est. 2020`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `<p>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</p>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>/i));
|
||||
```
|
||||
|
||||
You should not change your existing `h1` element. Make sure you did not delete the closing tag.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('h1'),1);
|
||||
```
|
||||
|
||||
Your `p` element should be below your `h1` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('p')?.previousElementSibling?.tagName, 'H1');
|
||||
```
|
||||
|
||||
Your `p` element should have the text `Est. 2020`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector("p").innerText === "Est. 2020");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<h1>CAMPER CAFE</h1>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 5f344f9c805cd193c33d829c
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In previous lecture videos, you learned how to add `CSS` properties and values like this:
|
||||
|
||||
```css
|
||||
element {
|
||||
property: value;
|
||||
}
|
||||
```
|
||||
|
||||
Center the content of the `h1` element by setting its `text-align` property to the value `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `h1` selector in your `style` element.
|
||||
|
||||
```js
|
||||
const hasSelector = new __helpers.CSSHelp(document).getStyle('h1');
|
||||
assert(hasSelector);
|
||||
```
|
||||
|
||||
Your `text-align` property should have a value of `center`.
|
||||
|
||||
```js
|
||||
const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center');
|
||||
assert(hasTextAlign);
|
||||
```
|
||||
|
||||
Your `h1` selector should set the `text-align` property to `center`.
|
||||
|
||||
```js
|
||||
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
|
||||
assert(h1TextAlign === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
--fcc-editable-region--
|
||||
<style>
|
||||
</style>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 5f344fad8bf01691e71a30eb
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Up until now, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a `style` element within the `head` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have an opening `<style>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<style\s*>/i));
|
||||
```
|
||||
|
||||
Your code should have a closing `</style>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/style\s*>/));
|
||||
```
|
||||
|
||||
Your `style` element should be nested in your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 5f344fbc22624a2976425065
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `h2` element in the `section` element and give it the text `Coffee`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `<h2>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h2\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</h2>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h2\s*>/i));
|
||||
```
|
||||
|
||||
You should not change your existing `section` element. Make sure you did not delete the closing tag.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('section'),1);
|
||||
```
|
||||
|
||||
Your `h2` element should be within your `section` element.
|
||||
|
||||
```js
|
||||
const h2 = document.querySelector('h2');
|
||||
assert(h2.parentElement.tagName === 'SECTION');
|
||||
```
|
||||
|
||||
Your `h2` element should have the text `Coffee`.
|
||||
|
||||
```js
|
||||
const h2 = document.querySelector('h2');
|
||||
assert(h2.innerText === 'Coffee');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 5f344fc1520b6719f2e35605
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
There will be two sections on the menu, one for coffees and one for desserts. Add a `section` element within the `main` element so you have a place to put all the coffees available.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `<section>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<section\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</section>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/section\s*>/i));
|
||||
```
|
||||
|
||||
You should not change your existing `main` element. Make sure you didn't delete the closing tag.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('main'),1);
|
||||
```
|
||||
|
||||
Your `section` element should be within your `main` element.
|
||||
|
||||
```js
|
||||
const main = document.querySelector('main');
|
||||
const section = document.querySelector('section');
|
||||
assert(section.parentElement === main);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 5f3477ae34c1239cafe128be
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You now have three type selectors with the exact same styling. You can add the same group of styles to many elements by creating a list of selectors. Each selector is separated with commas like this:
|
||||
|
||||
```css
|
||||
selector1, selector2 {
|
||||
property: value;
|
||||
}
|
||||
```
|
||||
|
||||
Delete the three existing type selectors and replace them with one selector list that centers the text for the `h1`, `h2`, and `p` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a single type selector for all three elements, `h1, h2, p`. Be sure to use that order.
|
||||
|
||||
```js
|
||||
const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p');
|
||||
assert(hasSelector);
|
||||
```
|
||||
|
||||
You should only have one selector in your `style` element.
|
||||
|
||||
```js
|
||||
const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText)
|
||||
assert(selectors.length === 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
--fcc-editable-region--
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 5f3477ae8466a9a3d2cc953c
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have the CSS in the `styles.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that was centered will shift back to the left.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have any `style` tags in your code.
|
||||
|
||||
```js
|
||||
assert(!code.match(/style/i));
|
||||
```
|
||||
|
||||
You should not have any CSS selectors in your HTML file.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
const html = getUserInput('editableContents');
|
||||
assert(!html.includes('style'));
|
||||
assert(!html.includes('text-align'));
|
||||
}
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
<style>
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 5f3477ae9675db8bb7655b30
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous step, you used a <dfn>type selector</dfn> to style the `h1` element. Center the content of the `h2` and the `p` elements by adding a new type selector for each one to the existing `style` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `h1` selector.
|
||||
|
||||
```js
|
||||
const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
|
||||
assert(hasH1);
|
||||
```
|
||||
|
||||
You should not add a new `style` tag. Add the new CSS rules to the existing `style` tag.
|
||||
|
||||
```js
|
||||
const hasManyStyleTags = document.querySelectorAll('style').length > 1;
|
||||
assert(!hasManyStyleTags);
|
||||
```
|
||||
|
||||
You should add a new `h2` selector.
|
||||
|
||||
```js
|
||||
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
|
||||
assert(hasH2);
|
||||
```
|
||||
|
||||
You should add a new `p` selector.
|
||||
|
||||
```js
|
||||
const hasP = new __helpers.CSSHelp(document).getStyle('p');
|
||||
assert(hasP);
|
||||
```
|
||||
|
||||
Your `h1` element should have a `text-align` of `center`.
|
||||
|
||||
```js
|
||||
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
|
||||
assert(h1TextAlign === 'center');
|
||||
```
|
||||
|
||||
Your `h2` element should have a `text-align` of `center`.
|
||||
|
||||
```js
|
||||
const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
|
||||
assert(h2TextAlign === 'center');
|
||||
```
|
||||
|
||||
Your `p` element should have a `text-align` of `center`.
|
||||
|
||||
```js
|
||||
const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
|
||||
assert(pTextAlign === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
--fcc-editable-region--
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 5f3477aefa51bfc29327200b
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You have styled three elements by writing CSS inside the `style` tags. This works, but since there will be many more styles, it's best to put all the styles in a separate file and link to it.
|
||||
|
||||
We have created a separate `styles.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor.
|
||||
|
||||
Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `styles.css` file should have the `h1, h2, p` type selector.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
assert(getUserInput('editableContents').replace(/[\s\n]*/g, "").match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/));
|
||||
}
|
||||
```
|
||||
|
||||
Your selector should set the `text-align` property to `center`.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
assert(getUserInput('editableContents').match(/text-align:\s*center;?/));
|
||||
}
|
||||
```
|
||||
|
||||
Your code should not contain the `<style>` tags.
|
||||
|
||||
```js
|
||||
assert.isFalse(/<\/html>(\n|.)*<\/?\s*style\s*>/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
<style>
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 5f3477cb2e27333b1ab2b955
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a `link` element.
|
||||
|
||||
```js
|
||||
const link = document.querySelector('link');
|
||||
assert.isNotNull(link);
|
||||
```
|
||||
|
||||
The `link` element is a void element, it should not have an end tag `</link>`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /<\/link>/i);
|
||||
```
|
||||
|
||||
You should not change your existing `head` element. Make sure you did not delete the closing tag.
|
||||
|
||||
```js
|
||||
const headElementCount = document.querySelectorAll('head')?.length;
|
||||
assert.strictEqual(headElementCount, 1);
|
||||
```
|
||||
|
||||
You should have one `link` element.
|
||||
|
||||
```js
|
||||
const linkElementCount = document.querySelectorAll('link')?.length;
|
||||
assert.strictEqual(linkElementCount, 1);
|
||||
```
|
||||
|
||||
Your `link` element should be within your `head` element.
|
||||
|
||||
```js
|
||||
const link = document.querySelector('head > link');
|
||||
assert.isNotNull(link);
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` attribute with the value `stylesheet`.
|
||||
|
||||
```js
|
||||
const linkRelValue = document.querySelector('link')?.getAttribute('rel');
|
||||
assert.strictEqual(linkRelValue, 'stylesheet');
|
||||
```
|
||||
|
||||
Your `link` element should have an `href` attribute with the value `styles.css`.
|
||||
|
||||
```js
|
||||
const linkHrefValue = document.querySelector('link')?.dataset?.href;
|
||||
assert.strictEqual(linkHrefValue, 'styles.css');
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 5f3477cb303c5cb61b43aa9b
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `body` selector.
|
||||
|
||||
```js
|
||||
const hasBody = new __helpers.CSSHelp(document).getStyle('body');
|
||||
assert(hasBody);
|
||||
```
|
||||
|
||||
You should set the `background-color` property to `brown`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
Your `body` element should have a `brown` background.
|
||||
|
||||
```js
|
||||
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
|
||||
assert(bodyBackground === 'brown');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 5f3477cbcb6ba47918c1da92
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the styling of the page to look similar on mobile as it does on a desktop or laptop, you need to add a `meta` element with a special `content` attribute.
|
||||
|
||||
You learned about the viewport `meta` element in the previous lecture videos.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have two `meta` elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(code.match(/<meta.*?\/?>/g),2);
|
||||
```
|
||||
|
||||
Your `meta` element should have a `name` attribute with a value of `viewport`.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert.exists(meta[0]?.outerHTML?.match(/name=('|")viewport\1/) || meta[1]?.outerHTML?.match(/name=('|")viewport\1/));
|
||||
```
|
||||
|
||||
Your `meta` element should have a `content` attribute with a value of `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert.exists(meta[0]?.outerHTML?.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1]?.outerHTML?.match(/content=('|")width=device-width, initial-scale=1.0\1/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 5f34a1fd611d003edeafd681
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `background-color` property to `burlywood`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
Your `body` element should have a `burlywood` background.
|
||||
|
||||
```js
|
||||
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
|
||||
assert(bodyBackground === 'burlywood');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 5f356ed60785e1f3e9850b6e
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`).
|
||||
|
||||
Change the `width` property's value to be `80%`, to make it `80%` the width of its parent element (`body`).
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `width` property to `80%`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
You should not have a `width` property of `300px`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
|
||||
assert(!hasWidth);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
#menu {
|
||||
width: 300px;
|
||||
background-color: burlywood;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 5f356ed60a5decd94ab66986
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Comments in CSS look like this:
|
||||
|
||||
```css
|
||||
/* comment here */
|
||||
```
|
||||
|
||||
In your style sheet, comment out the line containing the `background-color` property and value, so you can see the effect of only styling the `#menu` element. This will make the background white again.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should comment out the `background-color: burlywood;` line in your CSS.
|
||||
|
||||
```js
|
||||
assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i));
|
||||
```
|
||||
|
||||
|
||||
Your `body` should have a white background.
|
||||
|
||||
```js
|
||||
const body = document.querySelector("body");
|
||||
const compStyles = window.getComputedStyle(body);
|
||||
const backgroundColor = compStyles?.getPropertyValue('background-color');
|
||||
assert.equal(backgroundColor,"rgba(0, 0, 0, 0)")
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
--fcc-editable-region--
|
||||
background-color: burlywood;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#menu {
|
||||
width: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 5f356ed6199b0cdef1d2be8f
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
So far you have been using type and id selectors to style elements. However, it is more common to use a different selector to style your elements.
|
||||
|
||||
You learned how to work with `class` selectors in the previous lecture videos like this:
|
||||
|
||||
```css
|
||||
.class-name {
|
||||
styles
|
||||
}
|
||||
```
|
||||
|
||||
Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.menu` class selector.
|
||||
|
||||
```js
|
||||
const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
|
||||
assert(hasMenu);
|
||||
```
|
||||
|
||||
You should not have a `#menu` selector.
|
||||
|
||||
```js
|
||||
const hasDiv = new __helpers.CSSHelp(document).getStyle('#menu');
|
||||
assert(!hasDiv);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 5f356ed63c7807a4f1e6d054
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
You can use the `id` selector to target a specific element with an `id` attribute.
|
||||
|
||||
You learned how to work with the `id` selector in the previous lecture videos like this:
|
||||
|
||||
```css
|
||||
#cat {
|
||||
width: 250px;
|
||||
}
|
||||
```
|
||||
|
||||
Use the `#menu` selector to give your element a width of `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#menu` selector.
|
||||
|
||||
```js
|
||||
const hasDiv = new __helpers.CSSHelp(document).getStyle("#menu");
|
||||
assert(hasDiv);
|
||||
```
|
||||
|
||||
You should set the `width` property to `300px`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
Your `div` should have a width of 300px.
|
||||
|
||||
```js
|
||||
const divWidth = new __helpers.CSSHelp(document).getStyle("#menu")?.getPropertyValue('width');
|
||||
assert(divWidth === '300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 5f356ed63e0fa262326eef05
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now use the existing `#menu` selector to set the background color of the `div` element to be `burlywood`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `background-color` property to `burlywood`.
|
||||
|
||||
```js
|
||||
const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
|
||||
assert(hasBackgroundColor);
|
||||
```
|
||||
|
||||
Your `#menu` selector should have a burlywood background.
|
||||
|
||||
```js
|
||||
const divBackground = new __helpers.CSSHelp(document).getStyle('#menu')?.getPropertyValue('background-color');
|
||||
assert(divBackground === 'burlywood');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#menu {
|
||||
width: 300px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 5f356ed656a336993abd9f7c
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, you want to center the `#menu` 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 `#menu` element within the `body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin-left` property to `auto`.
|
||||
|
||||
```js
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto');
|
||||
assert(hasMargin);
|
||||
```
|
||||
|
||||
You should set the `margin-right` property to `auto`.
|
||||
|
||||
```js
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto');
|
||||
assert(hasMargin);
|
||||
```
|
||||
|
||||
You should set the `margin-left` and `margin-right` properties of your `#menu` to `auto`.
|
||||
|
||||
```js
|
||||
const divMarginRight = new __helpers.CSSHelp(document).getStyle('#menu')?.getPropertyValue('margin-right');
|
||||
const divMarginLeft = new __helpers.CSSHelp(document).getStyle('#menu')?.getPropertyValue('margin-left');
|
||||
assert(divMarginRight === 'auto');
|
||||
assert(divMarginLeft === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 5f356ed69db0a491745e2bb6
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To apply the class's styling to the `div` element, remove the `id` attribute and add a `class` attribute to the `div` element's opening tag. Make sure to set the class value to `menu`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` should still render. Make sure you haven't malformed the `<div>` tag.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('div'),1);
|
||||
```
|
||||
|
||||
Your `div` element should have the `menu` class.
|
||||
|
||||
```js
|
||||
assert.isTrue(document.querySelector('div').classList.contains('menu'));
|
||||
```
|
||||
|
||||
Your `div` element should no longer have the `menu` id.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('div#menu'),0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div id="menu">
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5f356ed6cf6eab5f15f5cfe6
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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`.
|
||||
|
||||
Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your opening `<div>` tag should have an `id` attribute set to `menu`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector('div')?.id, 'menu');
|
||||
```
|
||||
|
||||
You should have a closing `</div>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/div>/i));
|
||||
```
|
||||
|
||||
You should not change your existing `body` element. Make sure you did not delete the closing tag.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('body'), 1);
|
||||
```
|
||||
|
||||
Your `div` tag should be nested in the `body`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div')?.parentElement?.tagName, 'BODY');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 5f35e5c4321f818cdc4bed30
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `<article>` tag.
|
||||
|
||||
```js
|
||||
assert.match(code,/<article>/i);
|
||||
```
|
||||
|
||||
You should have a closing `</article>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/article>/i));
|
||||
```
|
||||
|
||||
You should not change the existing `h2` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('h2'),1);
|
||||
```
|
||||
|
||||
Your `article` element should come after your `h2` element.
|
||||
|
||||
```js
|
||||
const article = document.querySelector('article');
|
||||
assert.equal(article?.previousElementSibling?.tagName, 'H2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 5f35e5c44359872a137bd98f
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page.
|
||||
|
||||
Delete the comment and its contents inside the `body` type selector. Now add a `background-image` property and set its value to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the commented out `background-color` property.
|
||||
|
||||
```js
|
||||
assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i))
|
||||
```
|
||||
|
||||
Your `body` selector should not have any comments.
|
||||
|
||||
```js
|
||||
assert(!code.match(/body\s*{\s*\/\*/i));
|
||||
```
|
||||
|
||||
You should set the `background-image` property to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`)
|
||||
assert(hasBackground)
|
||||
```
|
||||
|
||||
Your `body` element should have the coffee beans background image.
|
||||
|
||||
```js
|
||||
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
|
||||
console.log(bodyBackground);
|
||||
assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 5f3c866d0fc037f7311b4ac8
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `width` property to `50%` in your `.flavor` selector.
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '50%');
|
||||
```
|
||||
|
||||
You should set the `width` property to `50%` in your `.price` selector.
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 5f3c866d28d7ad0de6470505
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The flavors and prices are currently stacked on top of each other and centered with their respective `p` elements. It would be nice if the flavor was on the left and the price was on the right.
|
||||
|
||||
Add the class name `flavor` to the `French Vanilla` `p` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `flavor` class to your `p` element.
|
||||
|
||||
```js
|
||||
const el = document.querySelector("p.flavor");
|
||||
assert.exists(el);
|
||||
```
|
||||
|
||||
You should only have one element with the `flavor` class.
|
||||
|
||||
```js
|
||||
const elements = document.querySelectorAll('.flavor');
|
||||
assert.lengthOf(elements, 1);
|
||||
```
|
||||
|
||||
Your `flavor` class should be on the `p` element with the text `French Vanilla`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector(".flavor");
|
||||
assert.equal(el.innerText, "French Vanilla");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
--fcc-editable-region--
|
||||
<p>French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,126 @@
|
||||
---
|
||||
id: 5f3c866d5414453fc2d7b480
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Starting below the existing coffee/price pair, add the following coffee and prices using `article` elements with two nested `p` elements inside each. As before, the first `p` element's text should contain the coffee flavor and the second `p` element's text should contain the price.
|
||||
|
||||
```bash
|
||||
Caramel Macchiato 3.75
|
||||
Pumpkin Spice 3.50
|
||||
Hazelnut 4.00
|
||||
Mocha 4.50
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have five `article` elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('article'),5);
|
||||
```
|
||||
|
||||
Each `article` element should have two `p` elements.
|
||||
|
||||
```js
|
||||
const articles = document.querySelectorAll('article');
|
||||
assert.lengthOf(articles?.[0]?.children, 2);
|
||||
assert.lengthOf(articles?.[1]?.children, 2);
|
||||
assert.lengthOf(articles?.[2]?.children, 2);
|
||||
assert.lengthOf(articles?.[3]?.children, 2);
|
||||
assert.lengthOf(articles?.[4]?.children, 2);
|
||||
```
|
||||
|
||||
Your first `article` element should have `p` elements with the text `French Vanilla` and `3.00`.
|
||||
|
||||
```js
|
||||
const children = document.querySelector('article')?.children;
|
||||
assert.match(children?.[0]?.innerText, /French Vanilla/i);
|
||||
assert.match(children?.[1]?.innerText, /3\.00/i);
|
||||
```
|
||||
|
||||
Your second `article` element should have `p` elements with the text `Caramel Macchiato` and `3.75`.
|
||||
|
||||
```js
|
||||
const children = document.querySelectorAll('article')?.[1]?.children;
|
||||
assert.match(children?.[0]?.innerText, /Caramel Macchiato/i);
|
||||
assert.match(children?.[1]?.innerText, /3\.75/i);
|
||||
```
|
||||
|
||||
Your third `article` element should have `p` elements with the text `Pumpkin Spice` and `3.50`.
|
||||
|
||||
```js
|
||||
const children = document.querySelectorAll('article')?.[2]?.children;
|
||||
assert.match(children?.[0]?.innerText, /Pumpkin Spice/i);
|
||||
assert.match(children?.[1]?.innerText, /3\.50/i);
|
||||
```
|
||||
|
||||
Your fourth `article` element should have `p` elements with the text `Hazelnut` and `4.00`.
|
||||
|
||||
```js
|
||||
const children = document.querySelectorAll('article')?.[3]?.children;
|
||||
assert.match(children?.[0]?.innerText, /Hazelnut/i);
|
||||
assert.match(children?.[1]?.innerText, /4\.00/i);
|
||||
```
|
||||
|
||||
Your fifth `article` element should have `p` elements with the text `Mocha` and `4.50`.
|
||||
|
||||
```js
|
||||
const children = document.querySelectorAll('article')?.[4]?.children;
|
||||
assert.match(children?.[0]?.innerText, /Mocha/i);
|
||||
assert.match(children?.[1]?.innerText, /4\.50/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 5f3c866daec9a49519871816
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `article` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('article'),1);
|
||||
```
|
||||
|
||||
Your `article` element should have two `p` elements.
|
||||
|
||||
```js
|
||||
const article = document.querySelector('article');
|
||||
const paragraphChildren = article?.querySelectorAll(`:scope ${'p'}`);
|
||||
assert.lengthOf(paragraphChildren,2);
|
||||
```
|
||||
|
||||
Your first `p` element should have the text `French Vanilla`.
|
||||
|
||||
```js
|
||||
const article = document.querySelector('article');
|
||||
const paragraphChildren = article?.querySelectorAll(`:scope ${'p'}`);
|
||||
const firstP = paragraphChildren?.[0];
|
||||
assert.match(firstP?.innerText, /French Vanilla/i);
|
||||
```
|
||||
|
||||
Your second `p` element should have the text `3.00`.
|
||||
|
||||
```js
|
||||
const article = document.querySelector('article');
|
||||
const paragraphChildren = article?.querySelectorAll(`:scope ${'p'}`);
|
||||
const secondP = paragraphChildren?.[1];
|
||||
assert.match(secondP?.innerText, /3\.00/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 5f3c866dbf362f99b9a0c6d0
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `p` elements are nested in an `article` element with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this:
|
||||
|
||||
```css
|
||||
.item p { }
|
||||
```
|
||||
|
||||
Using the above selector, add a `display` property with value `inline-block` so the `p` elements behave more like inline elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.item p` selector.
|
||||
|
||||
```js
|
||||
const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p');
|
||||
assert(hasItemP);
|
||||
```
|
||||
|
||||
You should set the `display` property to `inline-block`.
|
||||
|
||||
```js
|
||||
const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block');
|
||||
assert(hasDisplay);
|
||||
```
|
||||
|
||||
Your `.item p` selector should set the `display` property to `inline-block`.
|
||||
|
||||
```js
|
||||
const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display');
|
||||
assert(itemPDisplay === 'inline-block');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 5f3c866dd0d0275f01d4d847
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Well that did not work. Styling the `p` elements as `inline-block` and placing them on 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` element's width a little less than `50%`.
|
||||
|
||||
Change the `width` value to `49%` for each class to see what happens.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `width` property to `49%` in your `.flavor` selector.
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '49%');
|
||||
```
|
||||
|
||||
You should set the `width` property to `49%` in your `.price` selector.
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '49%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 5f3c866de7a5b784048f94b1
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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 <dfn>block-level</dfn> 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 <dfn>inline</dfn> elements. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should apply the `item` class to your `article` element.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('article.item');
|
||||
assert.exists(el);
|
||||
```
|
||||
|
||||
You should only have one `item` class element.
|
||||
|
||||
```js
|
||||
const elements = document.querySelectorAll('.item');
|
||||
assert.lengthOf(elements, 1);
|
||||
```
|
||||
|
||||
Your first `article` element should have the `item` class.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('article')?.className, 'item');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 5f3cade94c6576e7f7b7953f
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `width` property to `50%` in your `.flavor` selector.
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '50%');
|
||||
```
|
||||
|
||||
You should set the `width` property to `50%` in your `.price` selector.
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 49%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 5f3cade9993019e26313fa8e
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should only have five `article` elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('article'),5);
|
||||
```
|
||||
|
||||
You should only have five `.item` elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('.item'),5);
|
||||
```
|
||||
|
||||
Your `.item` elements should be your `article` elements.
|
||||
|
||||
|
||||
```js
|
||||
const articles = document.querySelectorAll('article');
|
||||
const items = document.querySelectorAll('.item');
|
||||
assert.equal(articles?.[0], items?.[0]);
|
||||
assert.equal(articles?.[1], items?.[1]);
|
||||
assert.equal(articles?.[2], items?.[2]);
|
||||
assert.equal(articles?.[3], items?.[3]);
|
||||
assert.equal(articles?.[4], items?.[4]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 5f3cade99dda4e6071a85dfd
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You will come back to styling the menu in a few steps, but for now, go ahead and add a second `section` element below the first for displaying the desserts offered by the cafe.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `section` tag.
|
||||
|
||||
```js
|
||||
assert.lengthOf(code.match(/<section>/ig) ,2);
|
||||
```
|
||||
|
||||
You should have a closing `section` tag.
|
||||
|
||||
```js
|
||||
assert.lengthOf(code.match(/<\/section>/ig) ,2);
|
||||
```
|
||||
|
||||
You should not change the existing `main` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf (document.querySelectorAll('main'), 1);
|
||||
```
|
||||
|
||||
Your new `section` element should be nested in the `main` element.
|
||||
|
||||
```js
|
||||
const main = document.querySelector('main');
|
||||
const sections = main?.querySelectorAll(`:scope ${'section'}`);
|
||||
assert.lengthOf(sections,2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 5f3cade9fa77275d9f4efe62
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --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, use the back space key on your keyboard to move the `p` element with the class `price` next to the `p` element with the class `flavor` so that they are on the same line in the editor. Make sure there is no space between the two elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` elements should not have any space between them.
|
||||
|
||||
```js
|
||||
assert(code.match(/Vanilla<\/p><p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
--fcc-editable-region--
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 49%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
id: 5f3ef6e01f288a026d709587
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can use an `hr` element to display a divider between sections of different content.
|
||||
|
||||
First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `hr` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /<hr\s?\/?>/i);
|
||||
```
|
||||
|
||||
The `hr` element is a void element, it should not have an end tag `</hr>`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /<\/hr>/i);
|
||||
```
|
||||
|
||||
You should not change your existing `p` element with the class `established`.
|
||||
|
||||
```js
|
||||
const pElementCount = document.querySelectorAll('p.established')?.length;
|
||||
assert.strictEqual(pElementCount, 1);
|
||||
```
|
||||
|
||||
You should not change your existing `main` element.
|
||||
|
||||
```js
|
||||
const mainElementCount = document.querySelectorAll('main')?.length;
|
||||
assert.strictEqual(mainElementCount, 1);
|
||||
```
|
||||
|
||||
Your `hr` element should be between your `p` element and your `section` element.
|
||||
|
||||
```js
|
||||
const hrElement = document.querySelector('hr');
|
||||
assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
|
||||
assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 5f3ef6e03d719d5ac4738993
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The current width of the menu will always take up 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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `max-width` property to `500px`.
|
||||
|
||||
```js
|
||||
const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px');
|
||||
assert(hasMaxWidth);
|
||||
```
|
||||
|
||||
Your `.menu` element should have a `max-width` of `500px`.
|
||||
|
||||
```js
|
||||
const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width');
|
||||
assert(menuMaxWidth === '500px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
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 {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 5f3ef6e04559b939080db057
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `padding-left` property.
|
||||
|
||||
```js
|
||||
assert(!code.match(/padding-left/i));
|
||||
```
|
||||
|
||||
You should remove the `padding-right` property.
|
||||
|
||||
```js
|
||||
assert(!code.match(/padding-right/i));
|
||||
```
|
||||
|
||||
You should remove the `padding-top` property.
|
||||
|
||||
```js
|
||||
assert(!code.match(/padding-top/i));
|
||||
```
|
||||
|
||||
You should remove the `padding-bottom` property.
|
||||
|
||||
```js
|
||||
assert(!code.match(/padding-bottom/i));
|
||||
```
|
||||
|
||||
You should set the `padding` property to `20px`.
|
||||
|
||||
```js
|
||||
const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px');
|
||||
assert(hasPadding);
|
||||
```
|
||||
|
||||
Your `.menu` element should have a `padding` value of `20px`.
|
||||
|
||||
```js
|
||||
const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding');
|
||||
assert(menuPadding === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
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 {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 5f3ef6e050279c7a4a7101d3
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not remove the `padding-left` or `padding-right` properties.
|
||||
|
||||
```js
|
||||
const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
|
||||
assert(paddingLeft === '20px');
|
||||
const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
|
||||
assert(paddingRight === '20px');
|
||||
```
|
||||
|
||||
You should set the `padding-top` property to `20px`.
|
||||
|
||||
```js
|
||||
const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
|
||||
assert(hasPaddingTop);
|
||||
```
|
||||
|
||||
You should set the `padding-bottom` property to `20px`.
|
||||
|
||||
```js
|
||||
const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
|
||||
assert(hasPaddingBottom);
|
||||
```
|
||||
|
||||
Your `.menu` element should have a `padding-top` of `20px`.
|
||||
|
||||
```js
|
||||
const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top');
|
||||
assert(menuPaddingTop === '20px');
|
||||
```
|
||||
|
||||
Your `.menu` element should have a `padding-bottom` of `20px`.
|
||||
|
||||
```js
|
||||
const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom');
|
||||
assert(menuPaddingBottom === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
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 {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 5f3ef6e05473f91f948724ab
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can change the `font-family` of text, to make it look different from 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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `font-family` property to `sans-serif`.
|
||||
|
||||
```js
|
||||
const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'sans-serif');
|
||||
```
|
||||
|
||||
Your `body` should have a `font-family` of `sans-serif`.
|
||||
|
||||
```js
|
||||
const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family');
|
||||
assert(bodyFontFamily === 'sans-serif');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 5f3ef6e056bdde6ae6892ba2
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
Style both the `h1` and the `h2` elements using a single selector so that these elements' text use `Impact` font.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an `h1, h2` selector.
|
||||
|
||||
```js
|
||||
const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2');
|
||||
assert(h1h2Selector);
|
||||
```
|
||||
|
||||
You should set the `font-family` to `Impact`.
|
||||
|
||||
```js
|
||||
const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'].toLowerCase() === 'impact');
|
||||
assert(hasFontFamily);
|
||||
```
|
||||
|
||||
Your `h1` element should have a `font-family` of `Impact`.
|
||||
|
||||
```js
|
||||
const h1Element = document.querySelector("h1");
|
||||
|
||||
const headingFont = window.getComputedStyle(h1Element)?.getPropertyValue('font-family');
|
||||
assert.match(headingFont,/impact/i);
|
||||
```
|
||||
|
||||
Your `h2` element should have a `font-family` of `Impact`.
|
||||
|
||||
```js
|
||||
const h2Element = document.querySelector("h2");
|
||||
const headingFont = window.getComputedStyle(h2Element)?.getPropertyValue('font-family');
|
||||
assert.match(headingFont,/impact/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
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--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 5f3ef6e06d34faac0447fc44
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `.established` selector.
|
||||
|
||||
```js
|
||||
const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established');
|
||||
assert(hasEstablished);
|
||||
```
|
||||
|
||||
You should set the `font-style` property to `italic`.
|
||||
|
||||
```js
|
||||
const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic');
|
||||
assert(hasFontStyle);
|
||||
```
|
||||
|
||||
Your `.established` selector should set the `font-style` property to `italic`.
|
||||
|
||||
```js
|
||||
const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style');
|
||||
assert(establishedFontStyle === 'italic');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
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 {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 5f3ef6e07276f782bb46b93d
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `footer` element below the `main` element, where you can add some additional information.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `<footer>` tag.
|
||||
|
||||
```js
|
||||
assert.match(code,(/<footer>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</footer>` tag.
|
||||
|
||||
```js
|
||||
assert.match(code,(/<\/footer>/i));
|
||||
```
|
||||
|
||||
You should not modify the existing `main` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('main'), 1);
|
||||
```
|
||||
|
||||
Your `footer` element should be below your `main` element.
|
||||
|
||||
```js
|
||||
const footer = document.querySelector('footer');
|
||||
assert.strictEqual(footer?.previousElementSibling?.tagName, 'MAIN');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 5f3ef6e0819d4f23ca7285e6
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add an empty `article` element under the `Desserts` heading. Give it a `class` attribute with the value `item`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change your existing `h2` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('h2'),2);
|
||||
```
|
||||
|
||||
Your `article` element should be below your `h2` element.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelectorAll('section')?.[1]?.children?.[1]?.tagName, 'ARTICLE');
|
||||
```
|
||||
|
||||
Your new `article` element should have the `item` class.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelectorAll('section')?.[1]?.children?.[1]?.className, 'item');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
--fcc-editable-region--
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 5f3ef6e087d56ed3ffdc36be
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now apply the `established` class to the `Est. 2020` text.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `class` of the `p` element to `established`.
|
||||
|
||||
```js
|
||||
assert.match(code,/<p class=('|")established\1>/i);
|
||||
```
|
||||
|
||||
Your `established` class should be on the element with the text `Est. 2020`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('.established')?.innerText, /Est\.\s2020/i);
|
||||
```
|
||||
|
||||
Your `established` class element should have italic text.
|
||||
|
||||
```js
|
||||
const establishElement = document.querySelector('.established');
|
||||
|
||||
const establishedFont = window.getComputedStyle(establishElement)?.getPropertyValue('font-style');
|
||||
assert.equal(establishedFont,"italic");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 5f3ef6e0a81099d9a697b550
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --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`.
|
||||
|
||||
Make sure that the link opens in a new tab by adding a `target` attribute with the value `_blank`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not modify the existing `footer` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll("footer").length === 1);
|
||||
```
|
||||
|
||||
Your new `p` element should be nested within your `footer` element. You should have exactly one `p` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll("footer > p").length === 1);
|
||||
assert(document.querySelectorAll("footer p").length === 1);
|
||||
```
|
||||
|
||||
Your new `a` element should be nested within your new `p` element. You should have exactly one `a` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll("footer > p > a").length === 1);
|
||||
assert(document.querySelectorAll("footer a").length === 1);
|
||||
```
|
||||
|
||||
Your new `a` element should have the text `Visit our website`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector("footer > p > a")?.innerText === "Visit our website");
|
||||
```
|
||||
|
||||
Your new `a` element should link to `https://www.freecodecamp.org`. Remember that `a` elements use the `href` attribute to create a link.
|
||||
|
||||
```js
|
||||
assert(document.querySelector("footer > p > a")?.href === "https://www.freecodecamp.org/");
|
||||
```
|
||||
|
||||
Your new `a` element should have the `target` attribute set to `_blank`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("footer > p > a")?.target, "_blank");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 5f3ef6e0b431cc215bb16f55
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a second `p` element below the one with the link and give it the text `123 Free Code Camp Drive`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a second `p` element to your `footer`.
|
||||
|
||||
```js
|
||||
const footer = document.querySelector('footer');
|
||||
const children = footer?.querySelectorAll(`:scope ${'p'}`);
|
||||
assert.lengthOf(children , 2);
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `123 Free Code Camp Drive`. Make sure your new element comes after your existing element.
|
||||
|
||||
```js
|
||||
const footer = document.querySelector('footer');
|
||||
const children = footer.querySelectorAll(`:scope ${'p'}`) || [];
|
||||
const lastChild = [...children]?.at(-1);
|
||||
assert.match(lastChild?.textContent, /123 Free Code Camp Drive/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 5f3ef6e0e0c3feaebcf647ad
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add an `h2` element in the new section and give it the text `Desserts`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change your existing `section` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('section'), 2);
|
||||
```
|
||||
|
||||
You should add an `h2` element in your second `section` element.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelectorAll('section')?.[1]?.children?.[0]?.tagName, 'H2');
|
||||
```
|
||||
|
||||
Your new `h2` element should have the text `Desserts`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll('h2')?.[1]?.innerText, /Desserts/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 5f3ef6e0e9629bad967cd71e
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can add a <dfn>fallback</dfn> value for the font-family by adding another font name separated by a comma. Fallbacks are used in instances where the initial is not found/available.
|
||||
|
||||
Add the fallback font `serif` after the `Impact` font.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add `serif` as a fallback for the `Impact` font.
|
||||
|
||||
```js
|
||||
const fontFamily = new __helpers.CSSHelp(document).getStyle('h1, h2')?.getPropertyValue('font-family');
|
||||
assert(fontFamily === 'Impact, serif');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
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--
|
||||
h1, h2 {
|
||||
font-family: Impact;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 5f3ef6e0eaa7da26e3d34d78
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `padding-left` property to `20px`.
|
||||
|
||||
```js
|
||||
const hasPaddingLeft = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-left'] === '20px');
|
||||
assert(hasPaddingLeft);
|
||||
```
|
||||
|
||||
You should set the `padding-right` property to `20px`.
|
||||
|
||||
```js
|
||||
const hasPaddingRight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-right'] === '20px');
|
||||
assert(hasPaddingRight);
|
||||
```
|
||||
|
||||
Your `.menu` element should have a `padding-left` of `20px`.
|
||||
|
||||
```js
|
||||
const menuPaddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
|
||||
assert(menuPaddingLeft === '20px');
|
||||
```
|
||||
|
||||
Your `.menu` element should have a `padding-right` of `20px`.
|
||||
|
||||
```js
|
||||
const menuPaddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
|
||||
assert(menuPaddingRight === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
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 {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 5f3ef6e0f8c230bdd2349716
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The typography of heading elements (e.g. `h1`, `h2`) is set by default values of users' browsers.
|
||||
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an `h1` selector.
|
||||
|
||||
```js
|
||||
const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
|
||||
assert(hasH1);
|
||||
```
|
||||
|
||||
You should use an `h2` selector.
|
||||
|
||||
```js
|
||||
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
|
||||
assert(hasH2);
|
||||
```
|
||||
|
||||
Your `h1` element should have a `font-size` of `40px`.
|
||||
|
||||
```js
|
||||
const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
|
||||
assert(h1FontSize === '40px');
|
||||
```
|
||||
|
||||
Your `h2` element should have a `font-size` of `30px`.
|
||||
|
||||
```js
|
||||
const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
|
||||
assert(h2FontSize === '30px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 5f3f26fa39591db45e5cd7a0
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property.
|
||||
|
||||
Change the height of the `hr` element to be `3px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `hr` selector.
|
||||
|
||||
```js
|
||||
const hasHr = new __helpers.CSSHelp(document).getStyle('hr');
|
||||
assert(hasHr);
|
||||
```
|
||||
|
||||
You should set the `height` property to `3px`.
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '3px');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
Your `hr` element should have a height of `3px`.
|
||||
|
||||
```js
|
||||
const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
|
||||
assert(hrHeight === '3px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 5f459225127805351a6ad057
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the value of the `background-color` property to `brown`.
|
||||
|
||||
```js
|
||||
const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
|
||||
```
|
||||
|
||||
Your `hr` element should have a `background-color` of `brown`.
|
||||
|
||||
```js
|
||||
const hrBackgroundColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('background-color');
|
||||
assert(hrBackgroundColor === 'brown');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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--
|
||||
hr {
|
||||
height: 3px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
---
|
||||
id: 5f459a7ceb8b5c446656d88b
|
||||
title: Step 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
Make all the edges of the `hr` element the same color as the background of it using the `border-color` property.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `border-color` property to `brown`.
|
||||
|
||||
```js
|
||||
const hasBorderColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-color'] === 'brown');
|
||||
assert(hasBorderColor);
|
||||
```
|
||||
|
||||
Your `hr` element should have a `border-color` of `brown`.
|
||||
|
||||
```js
|
||||
const hrBorderColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('border-color');
|
||||
assert(hrBorderColor === 'brown');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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--
|
||||
hr {
|
||||
height: 3px;
|
||||
background-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 5f459cf202c2a3472fae6a9f
|
||||
title: Step 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --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 border 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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `height` property to `2px`.
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '2px');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
Your `hr` element should have a `height` of `2px`.
|
||||
|
||||
```js
|
||||
const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
|
||||
assert(hrHeight === '2px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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--
|
||||
hr {
|
||||
height: 3px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 5f459fd48bdc98491ca6d1a3
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Go ahead and add another `hr` element between the `main` element and the `footer` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a second `hr` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('hr'), 2);
|
||||
```
|
||||
|
||||
Your new `hr` element should be between the `main` element and the `footer` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('hr')?.[1]?.previousElementSibling?.tagName, 'MAIN');
|
||||
assert.equal(document.querySelectorAll('hr')?.[1]?.nextElementSibling?.tagName, 'FOOTER');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 5f45a05977e2fa49d9119437
|
||||
title: Step 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `padding` property to `20px`.
|
||||
|
||||
```js
|
||||
assert(code.match(/padding:\s*20px;?/i));
|
||||
```
|
||||
|
||||
Your `body` element should have a `padding` of `20px`.
|
||||
|
||||
```js
|
||||
const bodyPadding = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('padding');
|
||||
assert(bodyPadding === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,189 @@
|
||||
---
|
||||
id: 5f45a276c093334f0f6e9df4
|
||||
title: Step 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Focusing on the menu items and prices, there is a fairly large gap between each line.
|
||||
|
||||
Use the existing selector that targets all the `p` elements nested in elements with the class named `item` and set their top and bottom margin to be `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin-top` property to `5px`.
|
||||
|
||||
```js
|
||||
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '5px');
|
||||
assert(hasMarginTop);
|
||||
```
|
||||
|
||||
You should set the `margin-bottom` property to `5px`.
|
||||
|
||||
```js
|
||||
const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px');
|
||||
assert(hasMarginBottom);
|
||||
```
|
||||
|
||||
You should use the existing `.item p` selector.
|
||||
|
||||
```js
|
||||
const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p');
|
||||
assert(hasOneSelector.length === 1);
|
||||
```
|
||||
|
||||
Your `p` elements nested in your `.item` elements should have a `margin-top` of `5px`.
|
||||
|
||||
```js
|
||||
const itemPMarginTop = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-top');
|
||||
assert(itemPMarginTop === '5px');
|
||||
```
|
||||
|
||||
Your `p` elements nested in your `.item` elements should have a `margin-bottom` of `5px`.
|
||||
|
||||
```js
|
||||
const itemPMarginBottom = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-bottom');
|
||||
assert(itemPMarginBottom === '5px');
|
||||
```
|
||||
|
||||
Your `p` elements nested in your `.item` elements should not have a `margin-left` set.
|
||||
|
||||
```js
|
||||
const itemPMarginLeft = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-left');
|
||||
assert(!itemPMarginLeft);
|
||||
```
|
||||
|
||||
Your `p` elements nested in your `.item` elements should not have a `margin-right` set.
|
||||
|
||||
```js
|
||||
const itemPMarginRight = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-right');
|
||||
assert(!itemPMarginRight);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 5f45a5a7c49a8251f0bdb527
|
||||
title: Step 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `font-size` property to `18px`.
|
||||
|
||||
```js
|
||||
const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '18px');
|
||||
assert(hasFontSize);
|
||||
```
|
||||
|
||||
You should use the existing `.item p` selector.
|
||||
|
||||
```js
|
||||
const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p');
|
||||
assert(hasOneSelector.length === 1);
|
||||
```
|
||||
|
||||
Your `p` elements nested in your `.item` elements should have a `font-size` of `18px`.
|
||||
|
||||
```js
|
||||
const itemPFontSize = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('font-size');
|
||||
assert(itemPFontSize === '18px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 5f45a66d4a2b0453301e5a26
|
||||
title: Step 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Moving down to the `footer` element, make all the text have a value of `14px` for the font size.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `footer` selector.
|
||||
|
||||
```js
|
||||
const hasFooter = new __helpers.CSSHelp(document).getStyle('footer');
|
||||
assert(hasFooter);
|
||||
```
|
||||
|
||||
Your `footer` selector should be below your comment.
|
||||
|
||||
```js
|
||||
assert(code.match(/\/\*\s*FOOTER\s*\*\/\s*footer/i));
|
||||
```
|
||||
|
||||
You should set the `font-size` property to `14px`.
|
||||
|
||||
|
||||
```js
|
||||
const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '14px');
|
||||
assert(hasFontSize);
|
||||
```
|
||||
|
||||
Your `footer` element should have a `font-size` of `14px`.
|
||||
|
||||
```js
|
||||
const footerFontSize = new __helpers.CSSHelp(document).getStyle('footer')?.getPropertyValue('font-size');
|
||||
assert(footerFontSize === '14px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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 */
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,173 @@
|
||||
---
|
||||
id: 5f45b0731d39e15d54df4dfc
|
||||
title: Step 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The default color of a link that has not yet been clicked on 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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an `a` selector.
|
||||
|
||||
```js
|
||||
const hasASelector = new __helpers.CSSHelp(document).getStyle('a');
|
||||
assert(hasASelector);
|
||||
```
|
||||
|
||||
You should set the `color` property to `black`.
|
||||
|
||||
```js
|
||||
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'black');
|
||||
```
|
||||
|
||||
Your `a` element should have a `color` of `black`.
|
||||
|
||||
```js
|
||||
const aColor = new __helpers.CSSHelp(document).getStyle('a')?.getPropertyValue('color');
|
||||
assert(aColor === 'black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,180 @@
|
||||
---
|
||||
id: 5f45b25e7ec2405f166b9de1
|
||||
title: Step 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --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; }`.
|
||||
|
||||
Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `a:visited` pseudo-selector.
|
||||
|
||||
```js
|
||||
const hasAVisited = new __helpers.CSSHelp(document).getStyle('a:visited');
|
||||
assert(hasAVisited);
|
||||
```
|
||||
|
||||
You should set the `color` property to `grey`.
|
||||
|
||||
```js
|
||||
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => (x.style.color === 'grey' || x.style.color === 'gray'));
|
||||
assert(hasColor);
|
||||
```
|
||||
|
||||
Your `a:visited` should have a `color` of `grey`.
|
||||
|
||||
```js
|
||||
const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color');
|
||||
assert(aVisitedColor === 'grey' || aVisitedColor === 'gray');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
---
|
||||
id: 5f45b3c93c027860d9298dbd
|
||||
title: Step 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You change properties of a link when the mouse hovers over 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 `brown` when a user hovers over it.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `a:hover` pseudo-selector.
|
||||
|
||||
```js
|
||||
const hasAHover = new __helpers.CSSHelp(document).getStyle('a:hover');
|
||||
assert(hasAHover);
|
||||
```
|
||||
|
||||
You should set the `color` property to `brown`.
|
||||
|
||||
```js
|
||||
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'brown');
|
||||
assert(hasColor);
|
||||
```
|
||||
|
||||
Your `a:hover` should have a `color` of `brown`.
|
||||
|
||||
```js
|
||||
const aHoverColor = new __helpers.CSSHelp(document).getStyle('a:hover')?.getPropertyValue('color');
|
||||
assert(aHoverColor === 'brown');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
---
|
||||
id: 5f45b45d099f3e621fbbb256
|
||||
title: Step 82
|
||||
challengeType: 0
|
||||
dashedName: step-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You change properties of a link when the link is actually being 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 clicked on.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `a:active` pseudo-selector.
|
||||
|
||||
```js
|
||||
const hasAActive = new __helpers.CSSHelp(document).getStyle('a:active');
|
||||
assert(hasAActive);
|
||||
```
|
||||
|
||||
You should set the `color` property to `white`.
|
||||
|
||||
```js
|
||||
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'white');
|
||||
assert(hasColor);
|
||||
```
|
||||
|
||||
Your `a:active` should have a `color` of `white`.
|
||||
|
||||
```js
|
||||
const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color');
|
||||
assert(aActiveColor === 'white');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,180 @@
|
||||
---
|
||||
id: 5f45b4c81cea7763550e40df
|
||||
title: Step 83
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `color` property to `black` when the link is `visited`.
|
||||
|
||||
```js
|
||||
const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color');
|
||||
assert(aVisitedColor === 'black');
|
||||
```
|
||||
|
||||
You should set the `color` property to `brown` when the link is `active`.
|
||||
|
||||
```js
|
||||
const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color');
|
||||
assert(aActiveColor === 'brown');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: white;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,182 @@
|
||||
---
|
||||
id: 5f45b715301bbf667badc04a
|
||||
title: Step 84
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The menu text `CAMPER CAFE` has a different space from the top than the address's space 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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin-top` property to `0`.
|
||||
|
||||
```js
|
||||
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '0px');
|
||||
assert(hasMarginTop);
|
||||
```
|
||||
|
||||
Your `h1` element should have a `margin-top` of `0`.
|
||||
|
||||
```js
|
||||
const h1MarginTop = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-top');
|
||||
assert(h1MarginTop === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 5f46e270702a8456a664f0df
|
||||
title: Step 85
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin-bottom` property to `15px`.
|
||||
|
||||
```js
|
||||
const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px');
|
||||
assert(hasMarginBottom);
|
||||
```
|
||||
|
||||
Your `h1` element should have a `margin-bottom` of `15px`.
|
||||
|
||||
```js
|
||||
const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom');
|
||||
assert(h1MarginBottom === '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
---
|
||||
id: 5f46e36e745ead58487aabf2
|
||||
title: Step 86
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `.address` selector.
|
||||
|
||||
```js
|
||||
const hasAddress = new __helpers.CSSHelp(document).getStyle('.address');
|
||||
assert(hasAddress);
|
||||
```
|
||||
|
||||
You should set the `margin-bottom` property to `5px`.
|
||||
|
||||
```js
|
||||
const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px');
|
||||
assert(hasMarginBottom);
|
||||
```
|
||||
|
||||
Your `.address` selector should have the `margin-bottom` property set to `5px`.
|
||||
|
||||
```js
|
||||
const addressMarginBottom = new __helpers.CSSHelp(document).getStyle('.address')?.getPropertyValue('margin-bottom');
|
||||
assert(addressMarginBottom === '5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
---
|
||||
id: 5f46e7a4750dd05b5a673920
|
||||
title: Step 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now apply the `address` class to the `p` element containing the street address `123 Free Code Camp Drive`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should apply the `class="address"` attribute.
|
||||
|
||||
```js
|
||||
assert(code.match(/class=('|")address\1/i));
|
||||
```
|
||||
|
||||
Your `.address` element should be your `p` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.address')?.tagName, 'P');
|
||||
```
|
||||
|
||||
Your `.address` element should have the text `123 Free Code Camp Drive`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('.address')?.innerText, /123 Free Code Camp Drive/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,201 @@
|
||||
---
|
||||
id: 5f46e8284aae155c83015dee
|
||||
title: Step 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The menu looks good, but other than the coffee beans background image, it is mainly just text.
|
||||
|
||||
Under the `Coffee` heading, add an image using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. Give the image an `alt` value of `coffee icon`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `<img>` tag.
|
||||
|
||||
```js
|
||||
const imageElementCount = document.querySelectorAll('img')?.length;
|
||||
assert.strictEqual(imageElementCount, 1);
|
||||
```
|
||||
|
||||
The `img` element is a void element, it should not have an end tag `</img>`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /<\/img>/i);
|
||||
```
|
||||
|
||||
Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
|
||||
|
||||
```js
|
||||
const imageSrcValue = document.querySelector('img')?.getAttribute('src');
|
||||
assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
|
||||
```
|
||||
|
||||
Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
|
||||
|
||||
```js
|
||||
const imageAltValue = document.querySelector('img')?.getAttribute('alt');
|
||||
assert.match(imageAltValue, /coffee icon/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 5f46ede1ff8fec5ba656b44c
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end of `styles.css` with the text `FOOTER`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a CSS comment with the text `FOOTER`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\/\*\s*FOOTER\s*\*\//i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon 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>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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%
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 5f46fc57528aa1c4b5ea7c2e
|
||||
title: Step 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Changing the `margin-bottom` 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 `Coffee` heading.
|
||||
|
||||
Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `.bottom-line` selector.
|
||||
|
||||
```js
|
||||
const hasBottomLine = new __helpers.CSSHelp(document).getStyle('.bottom-line');
|
||||
assert(hasBottomLine);
|
||||
```
|
||||
|
||||
You should set the `margin-top` property to `25px`.
|
||||
|
||||
```js
|
||||
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '25px');
|
||||
assert(hasMarginTop);
|
||||
```
|
||||
|
||||
Your `.bottom-line` selector should have a `margin-top` of `25px`.
|
||||
|
||||
```js
|
||||
const bottomLineMargin = new __helpers.CSSHelp(document).getStyle('.bottom-line')?.getPropertyValue('margin-top');
|
||||
assert(bottomLineMargin === '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
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%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 5f4701b942c824109626c3d8
|
||||
title: Step 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now add the `bottom-line` class to the second `hr` element so the styling is applied.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `class` attribute with the value `bottom-line`.
|
||||
|
||||
```js
|
||||
assert.match(code,/class=('|")bottom-line\1/i);
|
||||
```
|
||||
|
||||
Your `bottom-line` class should be applied to your second `hr` element.
|
||||
|
||||
```js
|
||||
const hrList = document.querySelectorAll("hr");
|
||||
assert.isTrue(hrList?.[1]?.classList?.contains('bottom-line'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<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">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,221 @@
|
||||
---
|
||||
id: 5f475bb508746c16c9431d42
|
||||
title: Step 89
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The image you added is not centered horizontally like the `Coffee` heading above it. `img` elements are "like" inline elements.
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an `img` selector.
|
||||
|
||||
```js
|
||||
const hasImg = new __helpers.CSSHelp(document).getStyle('img');
|
||||
assert(hasImg);
|
||||
```
|
||||
|
||||
You should set the `display` property to `block`.
|
||||
|
||||
```js
|
||||
const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'block');
|
||||
assert(hasDisplay);
|
||||
```
|
||||
|
||||
You should set the `margin-left` property to `auto`.
|
||||
|
||||
```js
|
||||
const marginLeftFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-left'] === 'auto');
|
||||
assert(marginLeftFilter.length === 2);
|
||||
```
|
||||
|
||||
You should set the `margin-right` property to `auto`.
|
||||
|
||||
```js
|
||||
const marginRightFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-right'] === 'auto');
|
||||
assert(marginRightFilter.length === 2);
|
||||
```
|
||||
|
||||
Your `img` element should have a `display` of `block`.
|
||||
|
||||
```js
|
||||
const imgDisplay = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('display');
|
||||
assert(imgDisplay === 'block');
|
||||
```
|
||||
|
||||
Your `img` element should have a `margin-left` and `margin-right` of `auto`.
|
||||
|
||||
```js
|
||||
const imgMarginLeft = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-left');
|
||||
assert(imgMarginLeft === 'auto');
|
||||
const imgMarginRight = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-right');
|
||||
assert(imgMarginRight === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" 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">Caramel 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>
|
||||
<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">Cinnamon 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>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
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--
|
||||
|
||||
--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;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
---
|
||||
id: 5f475e1c7f71a61d913836c6
|
||||
title: Step 90
|
||||
challengeType: 0
|
||||
dashedName: step-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add one last image under the `Desserts` heading using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. Give the image an `alt` value of `pie icon`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a second `img` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('img'),2);
|
||||
```
|
||||
|
||||
Your new `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`.
|
||||
|
||||
```js
|
||||
const lastImage = [...document.querySelectorAll('img')].at(-1);
|
||||
assert.equal(lastImage?.src, 'https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg');
|
||||
```
|
||||
|
||||
Your new `img` element should have an `alt` of `pie icon`.
|
||||
|
||||
```js
|
||||
const lastImage = [...document.querySelectorAll('img')].at(-1);
|
||||
assert.match(lastImage?.alt,/pie icon/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" 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">Caramel 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>
|
||||
--fcc-editable-region--
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<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">Cinnamon 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>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 5f47633757ae3469f2d33d2e
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --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 fewer characters, change the `flavor` class `width` value to be `75%` and the `price` class `width` value to be `25%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `width` property to `75%` in your `.flavor` selector.
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '75%');
|
||||
```
|
||||
|
||||
You should set the `width` property to `25%` in your `.price` selector.
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '25%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,361 @@
|
||||
---
|
||||
id: 5f47fe7e31980053a8d4403b
|
||||
title: Step 91
|
||||
challengeType: 0
|
||||
dashedName: step-91
|
||||
---
|
||||
|
||||
# --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 workshop, go ahead and use a negative top margin of `25px` in the `img` type selector.
|
||||
|
||||
Congratulations! You have completed the Cafe Menu workshop.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin-top` property to `-25px`.
|
||||
|
||||
```js
|
||||
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '-25px');
|
||||
assert(hasMarginTop);
|
||||
```
|
||||
|
||||
Your `img` elements should have a `margin-top` value of `-25px`.
|
||||
|
||||
```js
|
||||
const imgMarginTop = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-top');
|
||||
assert(imgMarginTop === '-25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" 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">Caramel 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://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" 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">Cinnamon 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>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" 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">Caramel 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://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" 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">Cinnamon 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>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 5f716ad029ee4053c7027a7a
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change your existing `article` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('article'), 6);
|
||||
```
|
||||
|
||||
Your new `article` element should have two `p` elements.
|
||||
|
||||
```js
|
||||
const newArticle = [...document.querySelectorAll('article')].at(-1);
|
||||
const paragraphs = newArticle?.querySelectorAll(`:scope ${'p'}`);
|
||||
assert.lengthOf(paragraphs, 2);
|
||||
```
|
||||
|
||||
Your first `p` element should have the text `Donut`.
|
||||
|
||||
```js
|
||||
const newArticle = [...document.querySelectorAll('article')].at(-1);
|
||||
const paragraph = newArticle?.querySelector(`:scope ${'p'}`);
|
||||
assert.match(paragraph?.innerText, /Donut/i);
|
||||
```
|
||||
|
||||
Your second `p` element should have the text `1.50`.
|
||||
|
||||
```js
|
||||
const newArticle = [...document.querySelectorAll('article')].at(-1);
|
||||
const paragraphs = newArticle?.querySelectorAll(`:scope ${'p'}`);
|
||||
assert.match(paragraphs?.[1]?.innerText, /1\.50/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
---
|
||||
id: 5f716bee5838c354c728a7c5
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
```bash
|
||||
Cherry Pie 2.75
|
||||
Cheesecake 3.00
|
||||
Cinnamon Roll 2.50
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have four `article` elements in your second `section`.
|
||||
|
||||
```js
|
||||
const secondSection = document.querySelectorAll('section')[1]
|
||||
const articles = secondSection.querySelectorAll('article')
|
||||
assert(articles.length === 4)
|
||||
```
|
||||
|
||||
You should have four `.dessert` elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('.dessert'),4);
|
||||
```
|
||||
|
||||
You should have four new `.price` elements.
|
||||
|
||||
```js
|
||||
const section = [...document.querySelectorAll('section')].at(-1);
|
||||
const prices = section.querySelectorAll(`:scope ${'.price'}`);
|
||||
assert.lengthOf(prices, 4);
|
||||
```
|
||||
|
||||
Your `section` element should have eight `p` elements.
|
||||
|
||||
```js
|
||||
const section = [...document.querySelectorAll('section')].at(-1);
|
||||
const paragraphs = section.querySelectorAll(`:scope ${'p'}`);
|
||||
|
||||
assert.lengthOf(paragraphs,8);
|
||||
```
|
||||
|
||||
Your `.dessert` elements should have the text `Donut`, `Cherry Pie`, `Cheesecake`, and `Cinnamon Roll`.
|
||||
|
||||
```js
|
||||
const dessert = document.querySelectorAll('.dessert');
|
||||
assert.match(dessert?.[0]?.innerText, /donut/i);
|
||||
assert.match(dessert?.[1]?.innerText, /cherry pie/i);
|
||||
assert.match(dessert?.[2]?.innerText, /cheesecake/i);
|
||||
assert.match(dessert?.[3]?.innerText, /cinnamon roll/i);
|
||||
```
|
||||
|
||||
Your new `.price` elements should have the text `1.50`, `2.75`, `3.00`, and `2.50`.
|
||||
|
||||
```js
|
||||
const section = [...document.querySelectorAll('section')].at(-1);
|
||||
const prices = section?.querySelectorAll(`:scope ${'.price'}`);
|
||||
assert.match(prices?.[0]?.innerText, /1\.50/);
|
||||
assert.match(prices?.[1]?.innerText, /2\.75/);
|
||||
assert.match(prices?.[2]?.innerText, /3\.00/);
|
||||
assert.match(prices?.[3]?.innerText, /2\.50/);
|
||||
```
|
||||
|
||||
You should not have any spaces between your `p` elements.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<\/p>\s+<p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 5f7691dafd882520797cd2f0
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, position the other `p` elements to be on the same line with no space between them.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have any spaces between your `p` elements.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<\/p>\s+<p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
id: 5f7692f7c5b3ce22a57788b6
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To complete the styling, add the applicable class names `flavor` and `price` to all the remaining `p` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have five `.flavor` elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('.flavor'), 5);
|
||||
```
|
||||
|
||||
You should have five `.price` elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('.price'), 5);
|
||||
```
|
||||
|
||||
Your `.flavor` elements should be your `p` elements with the text `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut`, and `Mocha`.
|
||||
|
||||
```js
|
||||
const p = document.querySelectorAll('p');
|
||||
const flavor = document.querySelectorAll('.flavor');
|
||||
assert.equal(p?.[1], flavor?.[0]);
|
||||
assert.equal(p?.[3], flavor?.[1]);
|
||||
assert.equal(p?.[5], flavor?.[2]);
|
||||
assert.equal(p?.[7], flavor?.[3]);
|
||||
assert.equal(p?.[9], flavor?.[4]);
|
||||
```
|
||||
|
||||
Your `.price` elements should be your `p` elements with the text `3.00`, `3.75`, `3.50`, `4.00`, and `4.50`.
|
||||
|
||||
```js
|
||||
const p = document.querySelectorAll('p');
|
||||
const price = document.querySelectorAll('.price');
|
||||
assert.equal(p?.[2], price?.[0]);
|
||||
assert.equal(p?.[4], price?.[1]);
|
||||
assert.equal(p?.[6], price?.[2]);
|
||||
assert.equal(p?.[8], price?.[3]);
|
||||
assert.equal(p?.[10], price?.[4]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p>Caramel Macchiato</p><p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Pumpkin Spice</p><p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Hazelnut</p><p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Mocha</p><p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 5f769541be494f25449b292f
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using your new `flavor` class as a selector, set the `text-align` property's value to `left`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `flavor` class selector.
|
||||
|
||||
```js
|
||||
const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor');
|
||||
assert(hasFlavor);
|
||||
```
|
||||
|
||||
You should set the `text-align` property to `left`.
|
||||
|
||||
```js
|
||||
const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left');
|
||||
assert(hasTextAlign);
|
||||
```
|
||||
|
||||
Your `flavor` class selector should set the `text-align` property to `left`.
|
||||
|
||||
```js
|
||||
const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align');
|
||||
assert(flavorTextAlign === 'left');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 5f76967fad478126d6552b0d
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `price` class to your `p` element.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('p.price');
|
||||
assert.exists(el);
|
||||
```
|
||||
|
||||
You should only have one element with the `price` class.
|
||||
|
||||
```js
|
||||
const elements = document.querySelectorAll('.price');
|
||||
assert.lengthOf(elements, 1);
|
||||
```
|
||||
|
||||
Your `price` class should be on the `p` element with the text `3.00`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('.price');
|
||||
assert.equal(el.innerText, "3.00");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
--fcc-editable-region--
|
||||
<p>3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 5f769702e6e33127d14aa120
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now align the text to the `right` for the elements with the `price` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `price` class selector.
|
||||
|
||||
```js
|
||||
const hasSelector = new __helpers.CSSHelp(document).getStyle('.price');
|
||||
assert.exists(hasSelector);
|
||||
```
|
||||
|
||||
Your `price` class selector should set the `text-align` property to `right`.
|
||||
|
||||
```js
|
||||
const priceSelector = new __helpers.CSSHelp(document).getStyle('.price');
|
||||
assert.equal(priceSelector?.getPropertyValue('text-align'), 'right');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 5f7b87422a560036fd03ccff
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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` element's `class` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have one `p` element with the `dessert` class.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('.dessert'), 1);
|
||||
```
|
||||
|
||||
Your `p` element with the text `Donut` should have the `dessert` class.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('.dessert')?.innerText, /donut/i);
|
||||
```
|
||||
|
||||
Your `p` element with the text `1.50` should have the `price` class.
|
||||
|
||||
```js
|
||||
const lastElement = [...document.querySelectorAll('.price')].at(-1);
|
||||
assert.match(lastElement?.textContent, /1\.50/);
|
||||
```
|
||||
|
||||
You should not have any spaces between your `p` elements.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<\/p>\s+<p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<article class="item">
|
||||
--fcc-editable-region--
|
||||
<p>Donut</p><p>1.50</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 5f7b88d37b1f98386f04edc0
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Something does not look right. You added the correct `class` attribute value to the `p` element with `Donut` as its text, but you have not defined a selector for it.
|
||||
|
||||
The CSS rule for the `flavor` class already sets the properties you want. Add the `dessert` class as an additional selector for this CSS rule.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `.dessert` selector to your `.flavor` selector.
|
||||
|
||||
```js
|
||||
const selector = new __helpers.CSSHelp(document).getStyle('.flavor, .dessert') || new __helpers.CSSHelp(document).getStyle('.dessert, .flavor');
|
||||
assert(selector)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<main>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel 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>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -16,7 +16,97 @@ const duplicatedProjectIds = [
|
||||
/*** CSS ***/
|
||||
|
||||
// Cafe Menu
|
||||
|
||||
'5f33071498eb2472b87ddee4',
|
||||
'5f3313e74582ad9d063e3a38',
|
||||
'5f331e55dfab7a896e53c3a1',
|
||||
'5f3326b143638ee1a09ff1e3',
|
||||
'5f33294a6af5e9188dbdb8f3',
|
||||
'5f332a88dc25a0fd25c7687a',
|
||||
'5f332b23c2045fb843337579',
|
||||
'5f344fc1520b6719f2e35605',
|
||||
'5f344fbc22624a2976425065',
|
||||
'5f344fad8bf01691e71a30eb',
|
||||
'5f344f9c805cd193c33d829c',
|
||||
'5f3477ae9675db8bb7655b30',
|
||||
'5f3477ae34c1239cafe128be',
|
||||
'5f3477aefa51bfc29327200b',
|
||||
'5f3477ae8466a9a3d2cc953c',
|
||||
'5f3477cb2e27333b1ab2b955',
|
||||
'5f3477cbcb6ba47918c1da92',
|
||||
'5f3477cb303c5cb61b43aa9b',
|
||||
'5f34a1fd611d003edeafd681',
|
||||
'5f356ed6cf6eab5f15f5cfe6',
|
||||
'5f356ed63c7807a4f1e6d054',
|
||||
'5f356ed60a5decd94ab66986',
|
||||
'5f356ed63e0fa262326eef05',
|
||||
'5f356ed60785e1f3e9850b6e',
|
||||
'5f356ed656a336993abd9f7c',
|
||||
'5f356ed6199b0cdef1d2be8f',
|
||||
'5f356ed69db0a491745e2bb6',
|
||||
'5f35e5c44359872a137bd98f',
|
||||
'5f35e5c4321f818cdc4bed30',
|
||||
'5f3c866daec9a49519871816',
|
||||
'5f3c866d5414453fc2d7b480',
|
||||
'5f3c866d28d7ad0de6470505',
|
||||
'5f769541be494f25449b292f',
|
||||
'5f76967fad478126d6552b0d',
|
||||
'5f769702e6e33127d14aa120',
|
||||
'5f3c866de7a5b784048f94b1',
|
||||
'5f3c866dbf362f99b9a0c6d0',
|
||||
'5f3c866d0fc037f7311b4ac8',
|
||||
'5f3c866dd0d0275f01d4d847',
|
||||
'5f3cade9fa77275d9f4efe62',
|
||||
'5f3cade94c6576e7f7b7953f',
|
||||
'5f3cade9993019e26313fa8e',
|
||||
'5f7691dafd882520797cd2f0',
|
||||
'5f7692f7c5b3ce22a57788b6',
|
||||
'5f47633757ae3469f2d33d2e',
|
||||
'5f3cade99dda4e6071a85dfd',
|
||||
'5f3ef6e0e0c3feaebcf647ad',
|
||||
'5f3ef6e0819d4f23ca7285e6',
|
||||
'5f716ad029ee4053c7027a7a',
|
||||
'5f7b87422a560036fd03ccff',
|
||||
'5f7b88d37b1f98386f04edc0',
|
||||
'5f716bee5838c354c728a7c5',
|
||||
'5f3ef6e0eaa7da26e3d34d78',
|
||||
'5f3ef6e050279c7a4a7101d3',
|
||||
'5f3ef6e04559b939080db057',
|
||||
'5f3ef6e03d719d5ac4738993',
|
||||
'5f3ef6e05473f91f948724ab',
|
||||
'5f3ef6e056bdde6ae6892ba2',
|
||||
'5f3ef6e0e9629bad967cd71e',
|
||||
'5f3ef6e06d34faac0447fc44',
|
||||
'5f3ef6e087d56ed3ffdc36be',
|
||||
'5f3ef6e0f8c230bdd2349716',
|
||||
'5f3ef6e07276f782bb46b93d',
|
||||
'5f3ef6e0a81099d9a697b550',
|
||||
'5f3ef6e0b431cc215bb16f55',
|
||||
'5f3ef6e01f288a026d709587',
|
||||
'5f3f26fa39591db45e5cd7a0',
|
||||
'5f459225127805351a6ad057',
|
||||
'5f459a7ceb8b5c446656d88b',
|
||||
'5f459cf202c2a3472fae6a9f',
|
||||
'5f459fd48bdc98491ca6d1a3',
|
||||
'5f45a05977e2fa49d9119437',
|
||||
'5f45a276c093334f0f6e9df4',
|
||||
'5f45a5a7c49a8251f0bdb527',
|
||||
'5f46fc57528aa1c4b5ea7c2e',
|
||||
'5f4701b942c824109626c3d8',
|
||||
'5f46ede1ff8fec5ba656b44c',
|
||||
'5f45a66d4a2b0453301e5a26',
|
||||
'5f45b0731d39e15d54df4dfc',
|
||||
'5f45b25e7ec2405f166b9de1',
|
||||
'5f45b3c93c027860d9298dbd',
|
||||
'5f45b45d099f3e621fbbb256',
|
||||
'5f45b4c81cea7763550e40df',
|
||||
'5f45b715301bbf667badc04a',
|
||||
'5f46e270702a8456a664f0df',
|
||||
'5f46e36e745ead58487aabf2',
|
||||
'5f46e7a4750dd05b5a673920',
|
||||
'5f46e8284aae155c83015dee',
|
||||
'5f475bb508746c16c9431d42',
|
||||
'5f475e1c7f71a61d913836c6',
|
||||
'5f47fe7e31980053a8d4403b',
|
||||
// Colored Markers
|
||||
|
||||
// Registration Form
|
||||
|
||||
Reference in New Issue
Block a user