CAMPER CAFE
Est. 2020
@@ -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)") -
+
CAMPER CAFE
Est. 2020
@@ -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 class selector 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 class selector 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 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); -
+
CAMPER CAFE
Est. 2020
@@ -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 id selector 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'); -
+
CAMPER CAFE
Est. 2020
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'); -
+
CAMPER CAFE
Est. 2020
@@ -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'); -
+
CAMPER CAFE
Est. 2020
@@ -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')); --fcc-editable-region-- -
+
--fcc-editable-region--
CAMPER CAFE
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 `` tag.
+Your opening `
` tag should have an `id` attribute set to `menu`.
```js
-assert(code.match(/
/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
```
You should have a closing `
` tag.
@@ -36,6 +39,7 @@ const div = $('div')[0];
assert(div.parentElement.tagName === 'BODY');
```
+
# --seed--
## --seed-contents--