diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-016.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-016.md index da55d169e4..d12b0b12b2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-016.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-016.md @@ -14,6 +14,7 @@ Give your `#gallery` selector a `padding` property set to `0 4px`. Your `#gallery` selector should have a `padding` property set to `0 4px`. ```js +// @nhcarrigan The following steps do not have this assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingTop, '0px'); assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingBottom, '0px'); assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingLeft, '4px'); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-005.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-005.md index 1093b0b1db..b2711e3d55 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-005.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-005.md @@ -56,7 +56,7 @@ assert(document.querySelector('p')?.className === 'hero-subtitle'); Your `p` element should have the text set to `Our efforts to restructure our curriculum with a more project-based focus`. ```js -assert.equal(document.querySelector('p')?.textContent, 'Our efforts to restructure our curriculum with a more project-based focus'); +assert.equal(document.querySelector('p')?.textContent?.trim(), 'Our efforts to restructure our curriculum with a more project-based focus'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-061.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-061.md index a7b4745b19..cf0466c57a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-061.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-061.md @@ -14,6 +14,7 @@ To give the `hr` a color, you need to adjust the `border` property. Give the `hr Your `hr` should have a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. ```js +// @nhcarrigan The following steps do not have this assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderWidth, '1px'); assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderStyle, 'solid'); assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderColor, 'rgba(120, 120, 120, 0.6)'); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-080.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-080.md index 45902803f1..4909d09487 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-080.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-080.md @@ -16,7 +16,7 @@ Congratulations! Your magazine is now complete. You should have a new `@media` query for `only screen and (max-width: 420px)`. This should be the last query in the `@media` query list. ```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText === 'only screen and (max-width: 420px)'); +assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText, 'only screen and (max-width: 420px)'); ``` Your new `@media` query should have a `.hero-title` selector. diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-029.md b/curriculum/challenges/english/01-responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-029.md index daf37e28f9..8566ef9cca 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-029.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-029.md @@ -14,6 +14,7 @@ These dots are just a little too square. Give the `black-dot` class a `border-ra Your `.black-dot` selector should have a `border-radius` property set to `50%`. ```js +// @nhcarrigan This is not in the following steps assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-089.md b/curriculum/challenges/english/01-responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-089.md index 1aa6cf5e9f..4d03562198 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-089.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-089.md @@ -385,7 +385,7 @@ body { # --solutions-- ```html -// TODO: Add solution once step 070 is fixed! +// TODO: Add solution once steps 029 and 070 is fixed! ``` ```css diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-004.md b/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-004.md index eb37a8b485..ebed308079 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-004.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-004.md @@ -56,6 +56,7 @@ assert(links.find(link => link?.getAttribute('href') === 'https://fonts.googleap

Nutrition Facts

8 servings per container

+

Serving size 2/3 cup (55g)

--fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-033.md b/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-033.md index b575dacf6d..786762393d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-033.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-033.md @@ -20,7 +20,11 @@ assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')); Your new `.calories-info h1` selector should have a `margin` property set to `-5px 0`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.margin === '-5px 0px'); +// @nhcarrigan The next step uses `-5px -2px` +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginTop, '-5px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginBottom, '-5px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginLeft, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginRight, '0px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-064.md b/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-064.md index 00f0fe6f27..2ae1c2a398 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-064.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-064.md @@ -12,7 +12,7 @@ Add a medium divider after your `.daily-value` element. Below that new divider, Give the `p` element the following text: ``` -The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice. +* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice. ``` # --hints-- @@ -45,7 +45,7 @@ assert(document.querySelector('.label')?.lastElementChild?.classList?.contains(' Your new `p` element should have the provided text. ```js -assert(document.querySelector('.label')?.lastElementChild?.innerText === 'The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.'); +assert(document.querySelector('.label')?.lastElementChild?.innerText === '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-065.md b/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-065.md index 3b505ecc46..7f44865429 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-065.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-065.md @@ -50,38 +50,38 @@ assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');

8 servings per container

Serving size 2/3 cup (55g)

-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g 10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
-

Includes 10g Added Sugars 20% -

-

Protein 3g

-

Vitamin D 2mcg 10%

-

Calcium 260mg 20%

-

Iron 8mg 45%

-

Potassium 235mg 6%

-
-
-

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g 10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+
+

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-066.md b/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-066.md index 04aad22d5b..ad0fb2eff2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-066.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-typography-by-building-a-nutrition-label/step-066.md @@ -16,7 +16,10 @@ With these last changes, your nutrition label is complete! Your `.note` selector should have a `padding` property set to `0 8px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.note')?.padding === '0px 8px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px'); ``` Your `.note` selector should have a `text-indent` property set to `-8px`. @@ -173,3 +176,150 @@ p { } --fcc-editable-region-- ``` + +# --solutions-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g 10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+
+

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} + +.note { + font-size: 0.6rem; + margin: 5px 0; + padding: 0px 8px; + text-indent: -8px; +} +```