From 59a726fb1dab7561d49f66ce8cefcb0bc0d049c6 Mon Sep 17 00:00:00 2001
From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Date: Tue, 5 Sep 2023 11:41:32 -0700
Subject: [PATCH] feat: adding explanation for id selector for cafe menu
 project (#51437)

---
 .../5f356ed60785e1f3e9850b6e.md               |  8 +++++---
 .../5f356ed60a5decd94ab66986.md               |  6 +++---
 .../5f356ed6199b0cdef1d2be8f.md               | 14 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 20 ++++++++++++++-----
 .../5f356ed63e0fa262326eef05.md               | 10 +++++-----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++------
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               |  8 ++++++--
 8 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index 7c4f58a9c6a..0211bc2a565 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -7,7 +7,9 @@ dashedName: step-24
 
 # --description--
 
-Now it's easy to see that the text is centered inside the `div` element. Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
+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--
 
@@ -39,7 +41,7 @@ assert(!hasWidth);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -63,7 +65,7 @@ h1, h2, p {
   text-align: center;
 }
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index c60b6f44652..82012ae3d4b 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -14,7 +14,7 @@ Comments in CSS look like this:
 /* 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 `div` element. This will make the background white again.
+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--
 
@@ -46,7 +46,7 @@ assert(bodyCSS === "rgba(0, 0, 0, 0)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
   text-align: center;
 }
 
-div {
+#menu {
   width: 300px;
 }
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index 20f78c3658e..112a748e061 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,9 @@ dashedName: step-26
 
 # --description--
 
-So far you have been using type selectors to style elements. A <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this:
+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. 
+
+A <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this:
 
 ```css
 .class-name {
@@ -15,7 +17,7 @@ So far you have been using type selectors to style elements. A <dfn>class select
 }
 ```
 
-Change the existing `div` selector into a class selector by replacing `div` with a class named `menu`.
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
 
 # --hints--
 
@@ -26,10 +28,10 @@ const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
 assert(hasMenu);
 ```
 
-You should not have a `div` selector.
+You should not have a `#menu` selector.
 
 ```js
-const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
+const hasDiv = new __helpers.CSSHelp(document).getStyle('#menu');
 assert(!hasDiv);
 ```
 
@@ -47,7 +49,7 @@ assert(!hasDiv);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -72,7 +74,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
   margin-left: auto;
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index 05bfa0802e8..60e819c1de9 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -7,14 +7,24 @@ 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. Create a new type selector in the style sheet that gives your `div` element a width of `300px`.
+The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. 
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> is defined by a name with a hash symbol directly in front of it, like this:
+
+```css
+#example-id {
+  width: 250px;
+}
+```
+
+Use the `#menu` selector to give your element a width of `300px`.
 
 # --hints--
 
-You should have a `div` type selector.
+You should have a `#menu` selector.
 
 ```js
-const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
+const hasDiv = new __helpers.CSSHelp(document).getStyle("#menu");
 assert(hasDiv);
 ```
 
@@ -28,7 +38,7 @@ assert(hasWidth);
 Your `div` should have a width of 300px.
 
 ```js
-const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
+const divWidth = new __helpers.CSSHelp(document).getStyle("#menu")?.getPropertyValue('width');
 assert(divWidth === '300px');
 ```
 
@@ -46,7 +56,7 @@ assert(divWidth === '300px');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index 648718a742f..73460fdc8d1 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -7,7 +7,7 @@ dashedName: step-23
 
 # --description--
 
-Now use the existing `div` selector to set the background color of the `div` element to be `burlywood`.
+Now use the existing `#menu` selector to set the background color of the `div` element to be `burlywood`.
 
 # --hints--
 
@@ -18,10 +18,10 @@ const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x
 assert(hasBackgroundColor);
 ```
 
-Your `div` should have a burlywood background.
+Your `#menu` selector should have a burlywood background.
 
 ```js
-const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
+const divBackground = new __helpers.CSSHelp(document).getStyle('#menu')?.getPropertyValue('background-color');
 assert(divBackground === 'burlywood');
 ```
 
@@ -39,7 +39,7 @@ assert(divBackground === 'burlywood');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
 }
 --fcc-editable-region--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index 40e67fb290f..39310a39c5c 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -7,7 +7,7 @@ dashedName: step-25
 
 # --description--
 
-Next, you want to center the `div` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `div` element within the `body` element.
+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--
 
@@ -25,11 +25,11 @@ const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.styl
 assert(hasMargin);
 ```
 
-You should set the `margin-left` and `margin-right` properties of your `div` to `auto`.
+You should set the `margin-left` and `margin-right` properties of your `#menu` to `auto`.
 
 ```js
-const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right');
-const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left');
+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');
 ```
@@ -48,7 +48,7 @@ assert(divMarginLeft === 'auto');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index 1e1fda43521..45631a27c68 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-To apply the class's styling to the `div` element, add a `class` attribute to the `div` element's opening tag and set its value to `menu`.
+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--
 
@@ -23,6 +23,12 @@ Your `div` element should have the `menu` class.
 assert($('div').attr('class').includes('menu'));
 ```
 
+Your `div` element should no longer have the `menu` id.
+
+```js
+assert(!$('div#menu').length);
+```
+
 # --seed--
 
 ## --seed-contents--
@@ -38,7 +44,7 @@ assert($('div').attr('class').includes('menu'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index 99d2576ae7e..ae79c027890 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -9,12 +9,15 @@ dashedName: step-20
 
 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--
 
-You should have an opening `<div>` tag.
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
 You should have a closing `</div>` tag.
@@ -36,6 +39,7 @@ const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--