From 346a7aa2a9d07f1d9a134dcbcd70a840b8ccdb2e Mon Sep 17 00:00:00 2001 From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Date: Wed, 25 Sep 2024 18:33:18 -0700 Subject: [PATCH] feat(curriculum): add cafe menu to frontend cert (#56171) --- client/i18n/locales/english/intro.json | 8 +- .../workshop-cafe-menu/index.md | 9 + .../_meta/workshop-cafe-menu/meta.json | 377 ++++++++++++++++++ .../5f33071498eb2472b87ddee4.md | 44 ++ .../5f3313e74582ad9d063e3a38.md | 61 +++ .../5f331e55dfab7a896e53c3a1.md | 51 +++ .../5f3326b143638ee1a09ff1e3.md | 54 +++ .../5f33294a6af5e9188dbdb8f3.md | 55 +++ .../5f332a88dc25a0fd25c7687a.md | 63 +++ .../5f332b23c2045fb843337579.md | 64 +++ .../5f344f9c805cd193c33d829c.md | 69 ++++ .../5f344fad8bf01691e71a30eb.md | 55 +++ .../5f344fbc22624a2976425065.md | 68 ++++ .../5f344fc1520b6719f2e35605.md | 60 +++ .../5f3477ae34c1239cafe128be.md | 71 ++++ .../5f3477ae8466a9a3d2cc953c.md | 65 +++ .../5f3477ae9675db8bb7655b30.md | 92 +++++ .../5f3477aefa51bfc29327200b.md | 73 ++++ .../5f3477cb2e27333b1ab2b955.md | 92 +++++ .../5f3477cb303c5cb61b43aa9b.md | 68 ++++ .../5f3477cbcb6ba47918c1da92.md | 72 ++++ .../5f34a1fd611d003edeafd681.md | 62 +++ .../5f356ed60785e1f3e9850b6e.md | 74 ++++ .../5f356ed60a5decd94ab66986.md | 78 ++++ .../5f356ed6199b0cdef1d2be8f.md | 85 ++++ .../5f356ed63c7807a4f1e6d054.md | 86 ++++ .../5f356ed63e0fa262326eef05.md | 72 ++++ .../5f356ed656a336993abd9f7c.md | 81 ++++ .../5f356ed69db0a491745e2bb6.md | 79 ++++ .../5f356ed6cf6eab5f15f5cfe6.md | 77 ++++ .../5f35e5c4321f818cdc4bed30.md | 84 ++++ .../5f35e5c44359872a137bd98f.md | 90 +++++ .../5f3c866d0fc037f7311b4ac8.md | 105 +++++ .../5f3c866d28d7ad0de6470505.md | 101 +++++ .../5f3c866d5414453fc2d7b480.md | 126 ++++++ .../5f3c866daec9a49519871816.md | 92 +++++ .../5f3c866dbf362f99b9a0c6d0.md | 115 ++++++ .../5f3c866dd0d0275f01d4d847.md | 109 +++++ .../5f3c866de7a5b784048f94b1.md | 108 +++++ .../5f3cade94c6576e7f7b7953f.md | 106 +++++ .../5f3cade9993019e26313fa8e.md | 117 ++++++ .../5f3cade99dda4e6071a85dfd.md | 114 ++++++ .../5f3cade9fa77275d9f4efe62.md | 101 +++++ .../5f3ef6e01f288a026d709587.md | 164 ++++++++ .../5f3ef6e03d719d5ac4738993.md | 120 ++++++ .../5f3ef6e04559b939080db057.md | 145 +++++++ .../5f3ef6e050279c7a4a7101d3.md | 142 +++++++ .../5f3ef6e05473f91f948724ab.md | 119 ++++++ .../5f3ef6e056bdde6ae6892ba2.md | 141 +++++++ .../5f3ef6e06d34faac0447fc44.md | 133 ++++++ .../5f3ef6e07276f782bb46b93d.md | 147 +++++++ .../5f3ef6e0819d4f23ca7285e6.md | 109 +++++ .../5f3ef6e087d56ed3ffdc36be.md | 134 +++++++ .../5f3ef6e0a81099d9a697b550.md | 165 ++++++++ .../5f3ef6e0b431cc215bb16f55.md | 144 +++++++ .../5f3ef6e0e0c3feaebcf647ad.md | 108 +++++ .../5f3ef6e0e9629bad967cd71e.md | 119 ++++++ .../5f3ef6e0eaa7da26e3d34d78.md | 133 ++++++ .../5f3ef6e0f8c230bdd2349716.md | 145 +++++++ .../5f3f26fa39591db45e5cd7a0.md | 154 +++++++ .../5f459225127805351a6ad057.md | 146 +++++++ .../5f459a7ceb8b5c446656d88b.md | 150 +++++++ .../5f459cf202c2a3472fae6a9f.md | 151 +++++++ .../5f459fd48bdc98491ca6d1a3.md | 148 +++++++ .../5f45a05977e2fa49d9119437.md | 148 +++++++ .../5f45a276c093334f0f6e9df4.md | 189 +++++++++ .../5f45a5a7c49a8251f0bdb527.md | 160 ++++++++ .../5f45a66d4a2b0453301e5a26.md | 176 ++++++++ .../5f45b0731d39e15d54df4dfc.md | 173 ++++++++ .../5f45b25e7ec2405f166b9de1.md | 180 +++++++++ .../5f45b3c93c027860d9298dbd.md | 184 +++++++++ .../5f45b45d099f3e621fbbb256.md | 187 +++++++++ .../5f45b4c81cea7763550e40df.md | 180 +++++++++ .../5f45b715301bbf667badc04a.md | 182 +++++++++ .../5f46e270702a8456a664f0df.md | 181 +++++++++ .../5f46e36e745ead58487aabf2.md | 193 +++++++++ .../5f46e7a4750dd05b5a673920.md | 189 +++++++++ .../5f46e8284aae155c83015dee.md | 201 ++++++++++ .../5f46ede1ff8fec5ba656b44c.md | 153 +++++++ .../5f46fc57528aa1c4b5ea7c2e.md | 165 ++++++++ .../5f4701b942c824109626c3d8.md | 156 ++++++++ .../5f475bb508746c16c9431d42.md | 221 ++++++++++ .../5f475e1c7f71a61d913836c6.md | 199 +++++++++ .../5f47633757ae3469f2d33d2e.md | 104 +++++ .../5f47fe7e31980053a8d4403b.md | 361 +++++++++++++++++ .../5f716ad029ee4053c7027a7a.md | 123 ++++++ .../5f716bee5838c354c728a7c5.md | 157 ++++++++ .../5f7691dafd882520797cd2f0.md | 98 +++++ .../5f7692f7c5b3ce22a57788b6.md | 124 ++++++ .../5f769541be494f25449b292f.md | 103 +++++ .../5f76967fad478126d6552b0d.md | 103 +++++ .../5f769702e6e33127d14aa120.md | 100 +++++ .../5f7b87422a560036fd03ccff.md | 119 ++++++ .../5f7b88d37b1f98386f04edc0.md | 102 +++++ curriculum/test/utils/mongo-ids.js | 92 ++++- 95 files changed, 11551 insertions(+), 2 deletions(-) create mode 100644 client/src/pages/learn/front-end-development/workshop-cafe-menu/index.md create mode 100644 curriculum/challenges/_meta/workshop-cafe-menu/meta.json create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f33071498eb2472b87ddee4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3313e74582ad9d063e3a38.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f331e55dfab7a896e53c3a1.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3326b143638ee1a09ff1e3.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f33294a6af5e9188dbdb8f3.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f332a88dc25a0fd25c7687a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f332b23c2045fb843337579.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344f9c805cd193c33d829c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fad8bf01691e71a30eb.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fbc22624a2976425065.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fc1520b6719f2e35605.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae34c1239cafe128be.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae8466a9a3d2cc953c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae9675db8bb7655b30.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477aefa51bfc29327200b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cb2e27333b1ab2b955.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cb303c5cb61b43aa9b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cbcb6ba47918c1da92.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f34a1fd611d003edeafd681.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed60785e1f3e9850b6e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed60a5decd94ab66986.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6199b0cdef1d2be8f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63c7807a4f1e6d054.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63e0fa262326eef05.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed656a336993abd9f7c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed69db0a491745e2bb6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f35e5c44359872a137bd98f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d0fc037f7311b4ac8.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d28d7ad0de6470505.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d5414453fc2d7b480.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866daec9a49519871816.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866dbf362f99b9a0c6d0.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866dd0d0275f01d4d847.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866de7a5b784048f94b1.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade94c6576e7f7b7953f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade9993019e26313fa8e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade99dda4e6071a85dfd.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade9fa77275d9f4efe62.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e01f288a026d709587.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e03d719d5ac4738993.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e04559b939080db057.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e050279c7a4a7101d3.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e05473f91f948724ab.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e056bdde6ae6892ba2.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e06d34faac0447fc44.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e07276f782bb46b93d.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e0819d4f23ca7285e6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e087d56ed3ffdc36be.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e0a81099d9a697b550.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e0b431cc215bb16f55.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e0e9629bad967cd71e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e0f8c230bdd2349716.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3f26fa39591db45e5cd7a0.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459225127805351a6ad057.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459a7ceb8b5c446656d88b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459cf202c2a3472fae6a9f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459fd48bdc98491ca6d1a3.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a05977e2fa49d9119437.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a276c093334f0f6e9df4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a5a7c49a8251f0bdb527.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a66d4a2b0453301e5a26.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b0731d39e15d54df4dfc.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b25e7ec2405f166b9de1.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b3c93c027860d9298dbd.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b45d099f3e621fbbb256.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b4c81cea7763550e40df.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b715301bbf667badc04a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e270702a8456a664f0df.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e36e745ead58487aabf2.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e7a4750dd05b5a673920.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e8284aae155c83015dee.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46ede1ff8fec5ba656b44c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f4701b942c824109626c3d8.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475bb508746c16c9431d42.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475e1c7f71a61d913836c6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f47633757ae3469f2d33d2e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f47fe7e31980053a8d4403b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f716ad029ee4053c7027a7a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f716bee5838c354c728a7c5.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f7691dafd882520797cd2f0.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f7692f7c5b3ce22a57788b6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f769541be494f25449b292f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f76967fad478126d6552b0d.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f769702e6e33127d14aa120.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f7b87422a560036fd03ccff.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f7b88d37b1f98386f04edc0.md diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 6a1cfd36400..94ad7dfe169 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -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": [ diff --git a/client/src/pages/learn/front-end-development/workshop-cafe-menu/index.md b/client/src/pages/learn/front-end-development/workshop-cafe-menu/index.md new file mode 100644 index 00000000000..c38f7073f56 --- /dev/null +++ b/client/src/pages/learn/front-end-development/workshop-cafe-menu/index.md @@ -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. diff --git a/curriculum/challenges/_meta/workshop-cafe-menu/meta.json b/curriculum/challenges/_meta/workshop-cafe-menu/meta.json new file mode 100644 index 00000000000..d36c447b4f2 --- /dev/null +++ b/curriculum/challenges/_meta/workshop-cafe-menu/meta.json @@ -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" +} \ No newline at end of file diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f33071498eb2472b87ddee4.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f33071498eb2472b87ddee4.md new file mode 100644 index 00000000000..ac5bf1c009f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f33071498eb2472b87ddee4.md @@ -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 `` and `html` element with a `lang` attribute set to `en`. + +# --hints-- + +You should have the ``. + +```js +assert.match(code, //i); +``` + +You should have an opening `` with the language set to english. + +```js +assert.match(code, //gi); +``` + +You should have a closing `` tag. + +```js +assert.match(code, /<\/html>/i); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3313e74582ad9d063e3a38.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3313e74582ad9d063e3a38.md new file mode 100644 index 00000000000..ac73dd15cd9 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3313e74582ad9d063e3a38.md @@ -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 `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(//i)); +``` + +You should have an opening `` tag. + +```js +assert(code.match(/<title>/i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(/<\/title>/i)); +``` + +Your `title` element should be nested in your `head` element. + +```js +assert(code.match(/\s*.*<\/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> +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f331e55dfab7a896e53c3a1.md new file mode 100644 index 00000000000..7bb6944fdde --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f331e55dfab7a896e53c3a1.md @@ -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 + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3326b143638ee1a09ff1e3.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3326b143638ee1a09ff1e3.md new file mode 100644 index 00000000000..b9e32a5eac3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3326b143638ee1a09ff1e3.md @@ -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 `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` 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(//i)); +assert(code.match(/<\/head>/i)); +``` + +Your `body` element should come after your `head` element. + +```js +assert(code.match(/<\/head>[.\n\s]*/im)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Cafe Menu + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f33294a6af5e9188dbdb8f3.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f33294a6af5e9188dbdb8f3.md new file mode 100644 index 00000000000..a604495b16f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f33294a6af5e9188dbdb8f3.md @@ -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 `
` tag. + +```js +assert(code.match(/
/i)); +``` + +Your code should have a closing `
` 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 + + + + + Cafe Menu + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f332a88dc25a0fd25c7687a.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f332a88dc25a0fd25c7687a.md new file mode 100644 index 00000000000..b67240e4123 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f332a88dc25a0fd25c7687a.md @@ -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 `

` tag. + +```js +assert(code.match(/

/i)); +``` + +You should have a closing `

` 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(/

CAMPER CAFE<\/h1>/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + +--fcc-editable-region-- +
+
+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f332b23c2045fb843337579.md new file mode 100644 index 00000000000..1863d898ad1 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f332b23c2045fb843337579.md @@ -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 `

` tag. + +```js +assert(code.match(/

/i)); +``` + +You should have a closing `

` 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 + + + + + Cafe Menu + + +
+--fcc-editable-region-- +

CAMPER CAFE

+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344f9c805cd193c33d829c.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344f9c805cd193c33d829c.md new file mode 100644 index 00000000000..5e77150f260 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344f9c805cd193c33d829c.md @@ -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 + + + + + Cafe Menu +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fad8bf01691e71a30eb.md new file mode 100644 index 00000000000..6d62eb9e336 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fad8bf01691e71a30eb.md @@ -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 `` tag. + +```js +assert(code.match(/<\/style\s*>/)); +``` + +Your `style` element should be nested in your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i)) +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Cafe Menu + + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fbc22624a2976425065.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fbc22624a2976425065.md new file mode 100644 index 00000000000..b4ede64d9bb --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fbc22624a2976425065.md @@ -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 `

` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `

` 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 + + + + + Cafe Menu + + +
+

CAMPER CAFE

+

Est. 2020

+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fc1520b6719f2e35605.md new file mode 100644 index 00000000000..89f2a5e7cc8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344fc1520b6719f2e35605.md @@ -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 `
` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `
` 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 + + + + + Cafe Menu + + +--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae34c1239cafe128be.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae34c1239cafe128be.md new file mode 100644 index 00000000000..a358ff0a6a0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae34c1239cafe128be.md @@ -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 + + + + + Cafe Menu +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae8466a9a3d2cc953c.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae8466a9a3d2cc953c.md new file mode 100644 index 00000000000..5b89a7eafb8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae8466a9a3d2cc953c.md @@ -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 + + +--fcc-editable-region-- + + + Cafe Menu + + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ + +``` + +```css +h1, h2, p { + text-align: center; +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae9675db8bb7655b30.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae9675db8bb7655b30.md new file mode 100644 index 00000000000..4326c14211f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae9675db8bb7655b30.md @@ -0,0 +1,92 @@ +--- +id: 5f3477ae9675db8bb7655b30 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +In the previous step, you used a type selector 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 + + + + + Cafe Menu +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477aefa51bfc29327200b.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477aefa51bfc29327200b.md new file mode 100644 index 00000000000..7cc171c99e3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477aefa51bfc29327200b.md @@ -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 ` + + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cb2e27333b1ab2b955.md new file mode 100644 index 00000000000..251ff377cdb --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -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 ``. + +```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 + + +--fcc-editable-region-- + + + Cafe Menu + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ + +``` + +```css +h1, h2, p { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cb303c5cb61b43aa9b.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cb303c5cb61b43aa9b.md new file mode 100644 index 00000000000..7ef668776b1 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cb303c5cb61b43aa9b.md @@ -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 + + + + + + Cafe Menu + + + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ + +``` + +```css +--fcc-editable-region-- +h1, h2, p { + text-align: center; +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cbcb6ba47918c1da92.md new file mode 100644 index 00000000000..a98ebbd6427 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cbcb6ba47918c1da92.md @@ -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 + +``` + +# --hints-- + +Your code should have two `meta` elements. + +```js +assert.lengthOf(code.match(//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 + + +--fcc-editable-region-- + + + Cafe Menu + + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ + +``` + +```css +h1, h2, p { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f34a1fd611d003edeafd681.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f34a1fd611d003edeafd681.md new file mode 100644 index 00000000000..77afbab1cd0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f34a1fd611d003edeafd681.md @@ -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 + + + + + + Cafe Menu + + + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ + +``` + +```css +--fcc-editable-region-- +body { + background-color: brown; +} +--fcc-editable-region-- +h1, h2, p { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed60785e1f3e9850b6e.md new file mode 100644 index 00000000000..5f74a948eb2 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed60785e1f3e9850b6e.md @@ -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 + + + + + + Cafe Menu + + + + + + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} +--fcc-editable-region-- +#menu { + width: 300px; + background-color: burlywood; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed60a5decd94ab66986.md new file mode 100644 index 00000000000..f1b8929a344 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed60a5decd94ab66986.md @@ -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 + + + + + + Cafe Menu + + + + + + +``` + +```css +body { +--fcc-editable-region-- + background-color: burlywood; +--fcc-editable-region-- +} + +h1, h2, p { + text-align: center; +} + +#menu { + width: 300px; +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6199b0cdef1d2be8f.md new file mode 100644 index 00000000000..0928931ea41 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6199b0cdef1d2be8f.md @@ -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 + + + + + + Cafe Menu + + + + + + +``` + +```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-- +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63c7807a4f1e6d054.md new file mode 100644 index 00000000000..d6012651b1b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63c7807a4f1e6d054.md @@ -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 + + + + + + Cafe Menu + + + + + + +``` + +```css +--fcc-editable-region-- +body { + background-color: burlywood; +} + +h1, h2, p { + text-align: center; +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63e0fa262326eef05.md new file mode 100644 index 00000000000..73460fdc8d1 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63e0fa262326eef05.md @@ -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 + + + + + + Cafe Menu + + + + + + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +#menu { + width: 300px; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed656a336993abd9f7c.md new file mode 100644 index 00000000000..39310a39c5c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed656a336993abd9f7c.md @@ -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 + + + + + + Cafe Menu + + + + + + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +#menu { + width: 80%; + background-color: burlywood; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed69db0a491745e2bb6.md new file mode 100644 index 00000000000..f079d57f9da --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed69db0a491745e2bb6.md @@ -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 `
` 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 + + + + + + Cafe Menu + + + +--fcc-editable-region-- + + + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md new file mode 100644 index 00000000000..44b3a2d694b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md @@ -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 `
` tag should have an `id` attribute set to `menu`. + +```js +assert.strictEqual(document.querySelector('div')?.id, 'menu'); +``` + +You should have a closing `
` 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 + + + + + + Cafe Menu + + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+ +--fcc-editable-region-- + +``` + +```css +body { + background-color: burlywood; +} + +h1, h2, p { + text-align: center; +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md new file mode 100644 index 00000000000..55b7edefe1d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md @@ -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 `
` tag. + +```js +assert.match(code,/
/i); +``` + +You should have a closing `
` 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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

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

Coffee

+--fcc-editable-region-- +
+
+
+ + +``` + +```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; +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f35e5c44359872a137bd98f.md new file mode 100644 index 00000000000..da68438a6d2 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f35e5c44359872a137bd98f.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+
+
+ + +``` + +```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; +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d0fc037f7311b4ac8.md new file mode 100644 index 00000000000..eebf15155d1 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d0fc037f7311b4ac8.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```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-- +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d28d7ad0de6470505.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d28d7ad0de6470505.md new file mode 100644 index 00000000000..d18cdee509b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d28d7ad0de6470505.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

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

French Vanilla

+

3.00

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

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d5414453fc2d7b480.md new file mode 100644 index 00000000000..c3254d6c576 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866d5414453fc2d7b480.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

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

French Vanilla

+

3.00

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866daec9a49519871816.md new file mode 100644 index 00000000000..fd7f00df1fa --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866daec9a49519871816.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866dbf362f99b9a0c6d0.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866dbf362f99b9a0c6d0.md new file mode 100644 index 00000000000..dd0af1c141a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866dbf362f99b9a0c6d0.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866dd0d0275f01d4d847.md new file mode 100644 index 00000000000..fb483963697 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866dd0d0275f01d4d847.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```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-- +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866de7a5b784048f94b1.md new file mode 100644 index 00000000000..fe3a170031a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3c866de7a5b784048f94b1.md @@ -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 block-level elements, so they take up the entire width of their parent element. + +To get them on the same line, you need to apply some styling to the `p` elements so they behave more like inline elements. 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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

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

Coffee

+
+

French Vanilla

+

3.00

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

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade94c6576e7f7b7953f.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade94c6576e7f7b7953f.md new file mode 100644 index 00000000000..7bb2fd200d5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade94c6576e7f7b7953f.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```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-- +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade9993019e26313fa8e.md new file mode 100644 index 00000000000..9a6f394e6a4 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade9993019e26313fa8e.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

3.00

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

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```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%; +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade99dda4e6071a85dfd.md new file mode 100644 index 00000000000..ab16c44822e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade99dda4e6071a85dfd.md @@ -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(/
/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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

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

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+--fcc-editable-region-- +
+
+ + +``` + +```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% +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade9fa77275d9f4efe62.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade9fa77275d9f4efe62.md new file mode 100644 index 00000000000..e0a2279ea58 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3cade9fa77275d9f4efe62.md @@ -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>

+ + + + + Cafe Menu + + + +

+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

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

French Vanilla

+

3.00

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

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```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%; +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e01f288a026d709587.md new file mode 100644 index 00000000000..c5f5ea76b7a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e01f288a026d709587.md @@ -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, //i); +``` + +The `hr` element is a void element, it should not have an end tag ``. + +```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 + + + + + + Cafe Menu + + + +
+--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+--fcc-editable-region-- + +
+ + +``` + +```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% +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e03d719d5ac4738993.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e03d719d5ac4738993.md new file mode 100644 index 00000000000..f8c05c3d09a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e03d719d5ac4738993.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```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% +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e04559b939080db057.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e04559b939080db057.md new file mode 100644 index 00000000000..83dece0d321 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e04559b939080db057.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```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% +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e050279c7a4a7101d3.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e050279c7a4a7101d3.md new file mode 100644 index 00000000000..0caf7454747 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e050279c7a4a7101d3.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```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% +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e05473f91f948724ab.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e05473f91f948724ab.md new file mode 100644 index 00000000000..afcc40cab21 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e05473f91f948724ab.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```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% +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e056bdde6ae6892ba2.md new file mode 100644 index 00000000000..17c0abd2285 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e056bdde6ae6892ba2.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```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% +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e06d34faac0447fc44.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e06d34faac0447fc44.md new file mode 100644 index 00000000000..086db15f40c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e06d34faac0447fc44.md @@ -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 + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```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% +} +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e07276f782bb46b93d.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e07276f782bb46b93d.md new file mode 100644 index 00000000000..1ca30b088e8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e07276f782bb46b93d.md @@ -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 `