+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-003.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-003.md
new file mode 100644
index 00000000000000..6648f5654d3f82
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-003.md
@@ -0,0 +1,47 @@
+---
+id: 5f331e55dfab7a896e53c3a1
+title: Part 3
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The `title` is one of several elements that provide extra information not visible on the web page, but could be useful for search engines or how the page gets displayed.
+
+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. Note tha `meta` elements are self-closing.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-005.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-005.md
new file mode 100644
index 00000000000000..b968ce777ed2a7
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-005.md
@@ -0,0 +1,48 @@
+---
+id: 5f33294a6af5e9188dbdb8f3
+title: Part 5
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The name of the cafe is `Camper Cafe`. Add an `h1` element with the name of the cafe in capitalized letters to make it stand out.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-008.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-008.md
new file mode 100644
index 00000000000000..2054aff423a92e
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-008.md
@@ -0,0 +1,52 @@
+---
+id: 5f33310c1851c6c4da013250
+title: Part 8
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+It's time to add some menu content. Add a `main` element below the existing `header` element. It will eventually contain pricing information about coffees and desserts offered by the cafe.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-009.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-009.md
new file mode 100644
index 00000000000000..231240b4289fd5
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-009.md
@@ -0,0 +1,54 @@
+---
+id: 5f344fc1520b6719f2e35605
+title: Part 9
+challengeType: 0
+isHidden: true
+---
+
+## 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.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md
new file mode 100644
index 00000000000000..4c7fd6ca0acf43
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md
@@ -0,0 +1,68 @@
+---
+id: 5f344f9c805cd193c33d829c
+title: Part 12
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Without specifying any CSS (Cascasing Style Sheets) styling, an element's content is positioned to the left. To center content of block-level elements (i.e. `h1`, `section`, `p`, etc.) you would put the following between the `style` element's opening and closing tags, where `elementName` is an element name like `h3`.
+
+```css
+elementName {
+ text-align: center;
+}
+
+```
+
+Center the menu's `h1` element by using the syntax shown above.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md
new file mode 100644
index 00000000000000..6d66bc6b410924
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md
@@ -0,0 +1,62 @@
+---
+id: 5f3477ae9675db8bb7655b30
+title: Part 13
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+In the previous step, you used a type selector to style the `h1` element. Go ahead and center the `h2` and `p` elements with a new type selector for each one.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md
new file mode 100644
index 00000000000000..136a487eb73d1c
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md
@@ -0,0 +1,70 @@
+---
+id: 5f3477ae34c1239cafe128be
+title: Part 14
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+You currently have three type selectors with the exact same styling. To reduce the amount of CSS, you can create a single type selector by specifying all the element names by commas.
+
+Use a single type selector to center the `h1`, `h2` and `p` elements at the same time.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md
new file mode 100644
index 00000000000000..78adb885791b9d
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md
@@ -0,0 +1,72 @@
+---
+id: 5f3477aefa51bfc29327200b
+title: Part 15
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+So far you have styled three elements by writing CSS inside the `style` element of the `index.html` file. Since there will many more styles, you can write CSS in a separte file (`styles.css`) and then link to it.
+
+Get started by taking the content of the `index.html` file's `style` element (exclude the opening and closing tags) and rewrite it in the `styles.css`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md
new file mode 100644
index 00000000000000..3edf50816d860c
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md
@@ -0,0 +1,72 @@
+---
+id: 5f3477ae8466a9a3d2cc953c
+title: Part 16
+challengeType: 0
+isHidden: true
+---
+
+## 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 as centered, will shift back to the left.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md
new file mode 100644
index 00000000000000..b43184ce4d702c
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md
@@ -0,0 +1,69 @@
+---
+id: 5f3477cb2e27333b1ab2b955
+title: Part 17
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Now you need to link the `styles.css` file content, so your page will reflect the CSS styles defined in it.
+
+Nest a `link` element within the `style` element. `link` elements are used for other purposes besides CSS, so you will also need to add an `rel` attribute with the value `stylesheet` and a `type` attribute with the value `text/css`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md
new file mode 100644
index 00000000000000..efe6469c954180
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md
@@ -0,0 +1,74 @@
+---
+id: 5f3477cbcb6ba47918c1da92
+title: Part 18
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+So the styling of the page looks similar on mobile as it does on a desktop or laptop, you need to add a `meta` element with a special `content` attribute.
+
+Add the following within the `head` element:
+
+```html
+
+```
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md
new file mode 100644
index 00000000000000..5e73693a95c056
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md
@@ -0,0 +1,71 @@
+---
+id: 5f3477cb303c5cb61b43aa9b
+title: Part 19
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+You can change the entire background color of the page to brown by using a `body` type selector and specifying the value `brown` for the `background-color` property. As you have already seen, selector properties and their values have a colon (`:`) between them.
+
+Add a new selector to the `styles.css` file to change the color of the entire page to `brown`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md
new file mode 100644
index 00000000000000..554a92d98c5426
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md
@@ -0,0 +1,74 @@
+---
+id: 5f34a1fd611d003edeafd681
+title: Part 20
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+That brown background makes it hard to read the text on the page.
+
+Change the `body` element's background color to be `burlywood` to have some color but still be able to read the text.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md
new file mode 100644
index 00000000000000..4313ae780826b2
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md
@@ -0,0 +1,75 @@
+---
+id: 5f356ed6cf6eab5f15f5cfe6
+title: Part 21
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The menu takes up the full width of the page. You can use a `div` element to hold all the elements located in the `body` element and then apply some special styling to it. The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far.
+
+Start by adding a `div` element inside the `body` element and then move all the elements located in the `body` element inside it.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md
new file mode 100644
index 00000000000000..a216b7bfd1bac5
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md
@@ -0,0 +1,77 @@
+---
+id: 5f356ed63c7807a4f1e6d054
+title: Part 22
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The goal now is to make the `div` element not take the entire width of the page. The CSS `width` property is perfect for this.
+
+Create a `div` type selector in `styles.css` and give it a `width` property with value of `300px`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md
new file mode 100644
index 00000000000000..14c0c4367699ad
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md
@@ -0,0 +1,81 @@
+---
+id: 5f356ed60a5decd94ab66986
+title: Part 23
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Currently the entire background color of the page is `burlywood`. So you can see the effect of only styling `div` element, you will need to first temporarily comment out the line that defines the `background-color` for the `body` element.
+
+Add `/*` before the line and `*/` after the line to make the line a comment instead of CSS code which will make the background color of the page white again.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md
new file mode 100644
index 00000000000000..a64b47d3ad9c13
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md
@@ -0,0 +1,83 @@
+---
+id: 5f356ed60785e1f3e9850b6e
+title: Part 25
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+By now it is easy to see all the text is centered inside the `div` element. The white space on the top and left sides of the `div` element will be dealt with in a later step.
+
+Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, so that the element's width is 80% of the `body` element's width.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md
new file mode 100644
index 00000000000000..a17626a76f2edf
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md
@@ -0,0 +1,84 @@
+---
+id: 5f356ed656a336993abd9f7c
+title: Part 26
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Next, you need to center the `div` element horizontally. This is accomplised by adding both a `margin-left` and `margin-right` property to the it and setting the value of both `auto`. You can think of a margin as invsible space around an element.
+
+Using these margin properties, center the `div` element within the `body` element.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md
new file mode 100644
index 00000000000000..d5d98a0a2bbaae
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md
@@ -0,0 +1,92 @@
+---
+id: 5f356ed6199b0cdef1d2be8f
+title: Part 27
+challengeType: 0
+isHidden: true
+---
+
+## 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 it. For example, if you wanted to create a class selector named `container` that makes the width of a `div` element `700px`, you would write:
+
+```css
+.container {
+ width: 700px;
+}
+```
+
+Turn the existing `div` selector into a class selector by replacing `div` with a class named `menu`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md
new file mode 100644
index 00000000000000..0529f9e23876a9
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md
@@ -0,0 +1,86 @@
+---
+id: 5f35e5c44359872a137bd98f
+title: Part 29
+challengeType: 0
+isHidden: true
+---
+
+## 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://tinyurl.com/coffee-beans-fcc)`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md
new file mode 100644
index 00000000000000..99708de46f5577
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md
@@ -0,0 +1,84 @@
+---
+id: 5f35e5c4321f818cdc4bed30
+title: Part 30
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Now that you have your coffee background, it would be a good time to add some coffee flavors and prices under the `Coffees` heading. To do this, you are going to add an `article` element that will contain a flavor and price.
+
+Add an `article` element under the `Coffees` heading.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md
new file mode 100644
index 00000000000000..32759928fe68bb
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md
@@ -0,0 +1,86 @@
+---
+id: 5f3c866daec9a49519871816
+title: Part 31
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The `article` element you added is commonly found inside `section` elements when you plan on having other informational elements that are grouped.
+
+Go ahead nested two `p` elements inside your `article` element. The text for the first `p` element should be `French Vanilla` and the text for the second `p` element should be `3.00`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md
new file mode 100644
index 00000000000000..bf6d1d52acbf3d
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md
@@ -0,0 +1,93 @@
+---
+id: 5f3c866d5414453fc2d7b480
+title: Part 32
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Starting below the existing coffee/price pair, add the following coffees and prices using an `article` element 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
+Carmel Macchiato 3.75
+Pumpkin Spice 3.50
+Hazelnut 4.00
+Mocah 4.50
+```
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md
new file mode 100644
index 00000000000000..ed29f8d05d8c81
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md
@@ -0,0 +1,107 @@
+---
+id: 5f3c866d28d7ad0de6470505
+title: Part 33
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The flavors and prices are currently stacked on top of each other and centered with their respectable `p` elements. It would be nice if the flavor was on the left and the price was on the right.
+
+To style the flavor `p` element different from the price `p` element, first create two separate class selectors named `flavor` and `price` in `styles.css`. Then, align the text for the `flavor` class to the left and the `price` class to the right.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md
new file mode 100644
index 00000000000000..db67d493217971
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md
@@ -0,0 +1,113 @@
+---
+id: 5f3c866de7a5b784048f94b1
+title: Part 35
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+That is kind of what you want, but now it would be nice if the flavor and price were on the same line. Remember that `p` elements are block-level elements, so they take up the entire width of the 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. Start by adding a `class` attribute with the value `item` to each `article` element.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md
new file mode 100644
index 00000000000000..a2bae290111aa7
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md
@@ -0,0 +1,119 @@
+---
+id: 5f3c866dbf362f99b9a0c6d0
+title: Part 36
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The `p` elements are nested in `article` elements with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` by defining a selector as:
+
+```css
+.item p { }
+```
+
+Define a new style using the above selector. Add a `display` property with the value `inline-block` so the `p` elements behave more like `inline` elements instead of `block-line` elements.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md
new file mode 100644
index 00000000000000..2675c68cf5709d
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md
@@ -0,0 +1,114 @@
+---
+id: 5f3c866d0fc037f7311b4ac8
+title: Part 37
+challengeType: 0
+isHidden: true
+---
+
+## 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.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md
new file mode 100644
index 00000000000000..bfca4552584941
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md
@@ -0,0 +1,118 @@
+---
+id: 5f3c866dd0d0275f01d4d847
+title: Part 38
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Well that did not work. The reason is, by styling the `p` elements as `inline-block`, placing them on a separate lines in the code, there is an extra space that adds to the right of the first `p` element, so the second one shifts to the next line. There are a couple of ways to handle this. One way is to make each's width a little less than `50%`.
+
+Change the `width` value to `49%` for each class to see what happens.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md
new file mode 100644
index 00000000000000..355f1e9cd28f31
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md
@@ -0,0 +1,118 @@
+---
+id: 5f3cade9fa77275d9f4efe62
+title: Part 39
+challengeType: 0
+isHidden: true
+---
+
+## 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, simply move the price `p` element to be on the same line and make sure there is no space between them.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md
new file mode 100644
index 00000000000000..1a17c333388f17
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md
@@ -0,0 +1,115 @@
+---
+id: 5f3cade9993019e26313fa8e
+title: Part 41
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Now that you know it works, change the other `article` elements so that the `p` elements are on the same line with no space between them. You also need to apply the applicable styles `flavor` and `price` to the corresponding `p` elements.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md
new file mode 100644
index 00000000000000..54dbbf5221828a
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md
@@ -0,0 +1,113 @@
+---
+id: 5f47633757ae3469f2d33d2e
+title: Part 42
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space.
+
+Since you know the prices on the right have significantly less numbe of characters, change the `flavor` class `width` value to be `75%` and then `dessert` class `width` value to be `25%`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md
new file mode 100644
index 00000000000000..6ab23af689ba47
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md
@@ -0,0 +1,111 @@
+---
+id: 5f3cade99dda4e6071a85dfd
+title: Part 43
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+You will come back to the styling the menu in a few steps, but for now, go ahead add a second `section` element below the first for displaying the desserts offered by the cafe.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md
new file mode 100644
index 00000000000000..5c6254866789dc
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md
@@ -0,0 +1,114 @@
+---
+id: 5f3ef6e0819d4f23ca7285e6
+title: Part 45
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Now you need to add four `article` elements below the `h2`. Each should have a `class` attribute with the value `item`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md
new file mode 100644
index 00000000000000..f2bff0ad11b91e
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md
@@ -0,0 +1,129 @@
+---
+id: 5f3ef6e0835da6ccc3ee9958
+title: Part 46
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Within each of the four `article` elements, add the following desserts and prices using an `article` element with two nested `p` elements inside each. Similar to what you did with the coffees, the first `p` element's text should contain the dessert name and the second `p` element's text should contain the price.
+
+```bash
+Donut 1.50
+Cherry Pie 2.75
+Cheesecake 3.00
+Cinammon Roll
+```
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md
new file mode 100644
index 00000000000000..80c5d9c6b33d58
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md
@@ -0,0 +1,128 @@
+---
+id: 5f3ef6e0086dc80481f8cb03
+title: Part 47
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Something does not look right. You added the correct `class` attribute to the `p` elements with dessert names, but you have not defined a selector for it.
+
+Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md
new file mode 100644
index 00000000000000..515d1bd34683f2
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md
@@ -0,0 +1,128 @@
+---
+id: 5f3ef6e0eaa7da26e3d34d78
+title: Part 48
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+You can give your menu some space between the content and the sides with various `padding` properties.
+
+Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md
new file mode 100644
index 00000000000000..937855c5a5987a
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md
@@ -0,0 +1,130 @@
+---
+id: 5f3ef6e04559b939080db057
+title: Part 50
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Since all 4 sides of the menu have the same internal spacing, go ahread and delete the four properites and use a single `padding` property with the value `20px`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md
new file mode 100644
index 00000000000000..0fca483cc0a7a3
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md
@@ -0,0 +1,129 @@
+---
+id: 5f3ef6e03d719d5ac4738993
+title: Part 51
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The current width of the menu will always take of 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.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md
new file mode 100644
index 00000000000000..9bcf2686726d44
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md
@@ -0,0 +1,130 @@
+---
+id: 5f3ef6e05473f91f948724ab
+title: Part 52
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+You can change the `font-family` of text, to make it look different the 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.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md
new file mode 100644
index 00000000000000..467ddd463f1d5b
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md
@@ -0,0 +1,133 @@
+---
+id: 5f3ef6e056bdde6ae6892ba2
+title: Part 53
+challengeType: 0
+isHidden: true
+---
+
+## 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 so that only these elements' text use `Impact` font.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md
new file mode 100644
index 00000000000000..7395cb90c9b81e
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md
@@ -0,0 +1,135 @@
+---
+id: 5f3ef6e0e9629bad967cd71e
+title: Part 54
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+You can add a fallback value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it.
+
+Add the fallback font `serif` after the `Impact` font.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md
new file mode 100644
index 00000000000000..c3865816887894
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md
@@ -0,0 +1,141 @@
+---
+id: 5f3ef6e0f8c230bdd2349716
+title: Part 57
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The `h1` and `h2` elements' text are set by default values of the user's browser.
+
+Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md
new file mode 100644
index 00000000000000..73a833f59b27c0
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md
@@ -0,0 +1,150 @@
+---
+id: 5f3ef6e0b431cc215bb16f55
+title: Part 60
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Add a second `p` element below the one with the link and give it the text `123 Free Code Camp Drive`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md
new file mode 100644
index 00000000000000..3a28b2db5359d2
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md
@@ -0,0 +1,151 @@
+---
+id: 5f3ef6e01f288a026d709587
+title: Part 61
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+You can use an `hr` element to display a divider between sections of different content.
+
+First, add an `hr` element between the first `header` element and the `main` element.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md
new file mode 100644
index 00000000000000..355f707991a781
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md
@@ -0,0 +1,157 @@
+---
+id: 5f3f26fa39591db45e5cd7a0
+title: Part 62
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The default properties of an `hr` element will make it appear as a thin light grey line. You can change the heighth of the line by specifying a value for the `height` property.
+
+Change the height the `hr` element to be `3px`.
+
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md
new file mode 100644
index 00000000000000..369501db0db1b9
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md
@@ -0,0 +1,156 @@
+---
+id: 5f459225127805351a6ad057
+title: Part 63
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Change the background color of the `hr` elemnent to be `brown` to make it match the color of the coffee beans.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md
new file mode 100644
index 00000000000000..520f7b873ecc56
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md
@@ -0,0 +1,159 @@
+---
+id: 5f459a7ceb8b5c446656d88b
+title: Part 64
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Notice the grey color along the edges of the line. Those edges are known as borders. Each side of an element can have a different color or they can all be the same.
+
+Make all the edges of the `hr` element the same color as the background of it using the `border-color` property.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md
new file mode 100644
index 00000000000000..d81ef47fc9a177
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md
@@ -0,0 +1,160 @@
+---
+id: 5f459cf202c2a3472fae6a9f
+title: Part 65
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the background to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`).
+
+Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md
new file mode 100644
index 00000000000000..9890e3c8f8ecca
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md
@@ -0,0 +1,159 @@
+---
+id: 5f45a05977e2fa49d9119437
+title: Part 67
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md
new file mode 100644
index 00000000000000..11b5fc16f8f8d5
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md
@@ -0,0 +1,162 @@
+---
+id: 5f45a276c093334f0f6e9df4
+title: Part 68
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Focusing on the menu items and prices, there is a fairly large gap between each line.
+
+Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md
new file mode 100644
index 00000000000000..67024ddaa76c12
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md
@@ -0,0 +1,162 @@
+---
+id: 5f45a5a7c49a8251f0bdb527
+title: Part 69
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Using the same style selector in the previous step, make the font size of the items and prices by using a value of `18px`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md
new file mode 100644
index 00000000000000..e1451799c3eb32
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md
@@ -0,0 +1,167 @@
+---
+id: 5f46fc57528aa1c4b5ea7c2e
+title: Part 70
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinaommon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffees` heading.
+
+Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md
new file mode 100644
index 00000000000000..e3caff65131a10
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md
@@ -0,0 +1,168 @@
+---
+id: 5f46ede1ff8fec5ba656b44c
+title: Part 72
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end `styles.css` with the text `FOOTER`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md
new file mode 100644
index 00000000000000..e2454df03ca910
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md
@@ -0,0 +1,171 @@
+---
+id: 5f45a66d4a2b0453301e5a26
+title: Part 73
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Moving down to the `footer` element, make all the text have a value of `14px` for the font size.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md
new file mode 100644
index 00000000000000..09918c93b83fbd
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md
@@ -0,0 +1,176 @@
+---
+id: 5f45b0731d39e15d54df4dfc
+title: Part 74
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The default color of link that has not yet been clicked on a page is typically blue. The default color of a link that has already been visited from a page is typically purple.
+
+To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md
new file mode 100644
index 00000000000000..0b03cd41d3713e
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md
@@ -0,0 +1,181 @@
+---
+id: 5f45b25e7ec2405f166b9de1
+title: Part 75
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+You change properties of a link when the link has actually been visited by using a pseudo-selector that looks like `a:visited { propertyName: propertyValue }`
+
+Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md
new file mode 100644
index 00000000000000..c34731ee394315
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md
@@ -0,0 +1,185 @@
+---
+id: 5f45b3c93c027860d9298dbd
+title: Part 76
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+You change properties of a link when the mouse hovers them by using a pseudo-selector that looks like `a:hover { propertyName: propertyValue }`
+
+Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md
new file mode 100644
index 00000000000000..153b3b8e55791a
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md
@@ -0,0 +1,190 @@
+---
+id: 5f45b45d099f3e621fbbb256
+title: Part 77
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+You change properties of a link when the link is actually clicked by using a pseudo-selector that looks like `a:active { propertyName: propertyValue }`
+
+Change the color of the footer `Visit our website` link to be `white` when a clicks on it.
+
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md
new file mode 100644
index 00000000000000..0bf81fb7d9d99c
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md
@@ -0,0 +1,189 @@
+---
+id: 5f45b4c81cea7763550e40df
+title: Part 78
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-079.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-079.md
new file mode 100644
index 00000000000000..dc6c7b5a192038
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-079.md
@@ -0,0 +1,191 @@
+---
+id: 5f45b715301bbf667badc04a
+title: Part 79
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element.
+
+Change the top margin of the `h1` element to `0` to remove all the top margin.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md
new file mode 100644
index 00000000000000..cfd41ef1a4b4fa
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md
@@ -0,0 +1,190 @@
+---
+id: 5f46e270702a8456a664f0df
+title: Part 80
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`;
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-081.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-081.md
new file mode 100644
index 00000000000000..4731ad6d700e3b
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-081.md
@@ -0,0 +1,195 @@
+---
+id: 5f46e36e745ead58487aabf2
+title: Part 81
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element.
+
+To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-083.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-083.md
new file mode 100644
index 00000000000000..87fcecd701a24e
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-083.md
@@ -0,0 +1,197 @@
+---
+id: 5f46e8284aae155c83015dee
+title: Part 83
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The menu looks good, but other than the coffee beans background image, it is mainly just text.
+
+Under the `Coffees` heading, add an image using the url `https://tinyurl.com/cafe-coffee-fcc`. Give the image an `alt` value of `coffee icon`.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-084.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-084.md
new file mode 100644
index 00000000000000..aa6e071c5ba9f1
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-084.md
@@ -0,0 +1,200 @@
+---
+id: 5f475bb508746c16c9431d42
+title: Part 84
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+The image you added is not centered horizontally like the `Coffees` heading above it. `img` elements are "like" inline elements.
+
+To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-086.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-086.md
new file mode 100644
index 00000000000000..6d467d148dec9e
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-086.md
@@ -0,0 +1,376 @@
+---
+id: 5f47fe7e31980053a8d4403b
+title: Part 86
+challengeType: 0
+isHidden: true
+---
+
+## Description
+
+
+It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number.
+
+There is an easier way, simiply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative margin of `25px` in the `img` type selector.
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: Test 1
+ testString: ''
+
+```
+
+
+
+## Challenge Seed
+
+
+
+