fix(guide): simplify directory structure

guide/english/certifications/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md

@@ -0,0 +1,30 @@
+---
+title: Add Flex Superpowers to the Tweet Embed
+---
+## Add Flex Superpowers to the Tweet Embed
+
+Building on the <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md' target='_blank' rel='nofollow'>previous challenge</a>, you will need to add the property to the right selectors. Here the trick is identifying the right selector then all you need to add the <i>display: flex;</i> property.
+
+The header will ensure the picture, name, handle, and follow buttons get repositioned horizonatally.
+
+```CSS
+header {
+    display: flex;
+}
+```
+Aligns the name and handle to look as one sentence.
+```CSS
+header .profile-name {
+    display:flex;
+    margin-left: 10px;
+  }
+```
+Adding the property to the follow button along with the margin will center the button to the right size.
+
+```CSS
+header .follow-btn {
+    display:flex;
+    margin: 0 0 0 auto;
+  }
+```
+The same idea is used on the footer elements.

guide/english/certifications/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property/index.md

@@ -0,0 +1,8 @@
+---
+title: Align Elements Using the align-items Property
+---
+## Align Elements Using the align-items Property
+
+While it is encourage to try the different options for `align-items`, setting is value to `center` is the only way to pass this challenge.
+
+While playing with the different options you will come to realize `strech` is the default value for the property.

guide/english/certifications/responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property/index.md

@@ -0,0 +1,12 @@
+---
+title: Align Elements Using the justify-content Property
+---
+## Align Elements Using the justify-content Property
+
+As stated on the challenge, to pass it you need to set the `justify-content` to center. However, the point of the challenge is to experiemnt and see how the different options affect the content.
+
+`center`: Will ensure your child elements are centered in the parent container.<br/>
+`flex-start`: Will push everything to the left side.<br/>
+`flex-end`: Will push everything to the right side.<br/>
+`space-between`: Will push the first and last elements to the left and right respectivelly and add even space between. If you have odd numbers of elements it will add them to the center and keep pushing left and right depending on the order.<br/>
+`space-around`: Will do similar to space-between but there will be equal spacing around the elements so the first and last will not be directly on the edge.

guide/english/certifications/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed/index.md

@@ -0,0 +1,14 @@
+---
+title: Apply the flex-direction Property to Create a Column in the Tweet Embed
+---
+## Apply the flex-direction Property to Create a Column in the Tweet Embed
+
+Changing the flex direction from its default of row to column by explicitly adding the property to the css will make the handle be shown bellow the name.
+
+```css
+header .profile-name {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+  }
+```

guide/english/certifications/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed/index.md

@@ -0,0 +1,6 @@
+---
+title: Apply the flex-direction Property to Create Rows in the Tweet Embed
+---
+## Apply the flex-direction Property to Create Rows in the Tweet Embed
+
+The purpose of this challenge is to ensure the child elements of <i>header</i> and <i>footer</i> are aligned in a row. While the default flex direction is a row. It is best to be explicit about your styling as much as possible.

guide/english/certifications/responsive-web-design/css-flexbox/index.md

@@ -0,0 +1,23 @@
+---
+title: CSS Flexbox
+---
+## CSS Flexbox
+
+These set of challenges will teach you the basics of using flex containers. The challenges are:
+1. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md' target='_blank' rel='nofollow'>Use display: flex to Position Two Boxes</a>.
+2. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md' target='_blank' rel='nofollow'>Add Flex Superpowers to the Tweet Embed</a>.
+3. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row/index.md' target='_blank' rel='nofollow'>Use the flex-direction Property to Make a Row</a>.
+4. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed/index.md' target='_blank' rel='nofollow'>Apply the flex-direction Property to Create Rows in the Tweet Embed</a>.
+5. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column/index.md' target='_blank' rel='nofollow'>Use the flex-direction Property to Make a Column</a>.
+6. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed/index.md' target='_blank' rel='nofollow'>Apply the flex-direction Property to Create a Column in the Tweet Embed</a>.
+7. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property/index.md' target='_blank' rel='nofollow'>Align Elements Using the justify-content Property</a>.
+8. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed/index.md' target='_blank' rel='nofollow'>Use the justify-content Property in the Tweet Embed</a>.
+9. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property/index.md' target='_blank' rel='nofollow'>Align Elements Using the align-items Property</a>.
+10. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed/index.md' target='_blank' rel='nofollow'>Use the align-items Property in the Tweet Embed</a>.
+11. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column/index.md' target='_blank' rel='nofollow'>Use the flex-wrap Property to Wrap a Row or Column</a>.
+12. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items/index.md' target='_blank' rel='nofollow'>Use the flex-shrink Property to Shrink Items</a>.
+13. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items/index.md' target='_blank' rel='nofollow'>Use the flex-grow Property to Expand Items</a>.
+14. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item/index.md' target='_blank' rel='nofollow'>Use the flex-basis Property to Set the Initial Size of an Item</a>.
+15. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-shorthand-property/index.md' target='_blank' rel='nofollow'>Use the flex Shorthand Property</a>.
+16. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items/index.md' target='_blank' rel='nofollow'>Use the order Property to Rearrange Items</a>.
+17. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-align-self-property/index.md' target='_blank' rel='nofollow'>Use the align-self Property</a>.

guide/english/certifications/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md

@@ -0,0 +1,16 @@
+---
+title: "Use display: flex to Position Two Boxes"
+---
+## Use display: flex to Position Two Boxes
+
+<a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/layout/flexbox/index.md' target='_blank' rel='nofollow'>Flexbox</a> is a way to structure content in CSS3 which allows you to create responsie websites.
+
+This challenge is to set the first out of thre steps when using Flexbox. You need to make the parent container a flex one by adding <i>display:flex;</i> to its CSS section.
+
+Example:
+
+```CSS
+#main-container {
+    display: flex;
+}
+```

guide/english/certifications/responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed/index.md

@@ -0,0 +1,8 @@
+---
+title: Use the align-items Property in the Tweet Embed
+---
+## Use the align-items Property in the Tweet Embed
+
+Similar to the  <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property/index.md' target='_blank' rel='nofollow'>previous challenge</a>, you will need to set the property value to `center` on the right selector.
+
+Note it might look like nothing changed but once again, the more explicit youa re with your style early on, the less side effects you will see when your CSS gets more complex.

guide/english/certifications/responsive-web-design/css-flexbox/use-the-align-self-property/index.md

@@ -0,0 +1,8 @@
+---
+title: Use the align-self Property
+---
+## Use the align-self Property
+
+The main take away from this challege should be the fact that `float`, `clear`, and `vertical-align` do not work on flex items. This is why we have the flex property `align-self` which accepts the same values as `align-items` and will take precedence over any values set by the later.
+
+This means `align-self: center;` would work while `align-items: center;` would not.

guide/english/certifications/responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item/index.md

@@ -0,0 +1,21 @@
+---
+title: Use the flex-basis Property to Set the Initial Size of an Item
+---
+## Use the flex-basis Property to Set the Initial Size of an Item
+
+You can achieve the same effect as the previous two challenges with `flax-basis`.
+After setting sthe appropiate values, you will see `#box-2` being bigger than `#box-1` before any shrinking or grow is applied.
+
+```css
+#box-1 {
+  background-color: dodgerblue;
+  height: 200px;
+  flex-basis: 10em;
+}
+
+#box-2 {
+  background-color: orangered;
+  height: 200px;
+  flex-basis: 20em;
+}
+```

guide/english/certifications/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column/index.md

@@ -0,0 +1,13 @@
+---
+title: Use the flex-direction Property to Make a Column
+---
+## Use the flex-direction Property to Make a Column
+
+To stack the child elements of your flex container on top of each other you would change the <i>flex-direction</i> the following way:
+
+```CSS
+#main-container {
+    display: flex;
+    flex-direction: column;
+}
+```

guide/english/certifications/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row/index.md

@@ -0,0 +1,14 @@
+---
+title: Use the flex-direction Property to Make a Row
+---
+## Use the flex-direction Property to Make a Row
+
+Once you have a flex container by adding <i>display: flex;</i> to the parent container, you can specify if you want the children to be stacked in a row by adding the following:
+```css
+#box-container {
+    display: flex; /* This makes the flex container */
+    height: 500px;
+    flex-direction: row-reverse; /* This makes the direction be a row with reversed elements */
+  }
+```
+You will notice how the colors switch positions as the default direction of flex containers are rows as you might have noticed from the <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md' target='_blank' rel='nofollow'>tweet example</a>.

guide/english/certifications/responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items/index.md

@@ -0,0 +1,7 @@
+---
+title: Use the flex-grow Property to Expand Items
+---
+## Use the flex-grow Property to Expand Items
+
+`flex-grow` works similarly to `flex-shrink`, the higher the number, the more it grows.
+The `#box-2` box should be wider in this excercise.

guide/english/certifications/responsive-web-design/css-flexbox/use-the-flex-shorthand-property/index.md

@@ -0,0 +1,16 @@
+---
+title: Use the flex Shorthand Property
+---
+## Use the flex Shorthand Property
+
+While you can set `flex-grow`, `flex-shrink`, and `flex-basis` properties individually. if you ever need to see the values for all of them you can do it in one line using the following format `flex: flex-grow flex-shrink flex-basis;`.
+
+Example:
+
+```css
+#box-1 {
+    background-color: dodgerblue;
+    flex: 2 2 150px;
+    height: 200px;
+  }
+```

guide/english/certifications/responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items/index.md

@@ -0,0 +1,6 @@
+---
+title: Use the flex-shrink Property to Shrink Items
+---
+## Use the flex-shrink Property to Shrink Items
+
+When using `flex-shrink` the higher the number the more it shrinks. For this challenge, afte ryou give the proper values, you should see the `#box-1` being wider than `#box-2`.

guide/english/certifications/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column/index.md

@@ -0,0 +1,8 @@
+---
+title: Use the flex-wrap Property to Wrap a Row or Column
+---
+## Use the flex-wrap Property to Wrap a Row or Column
+
+Setting the `flex-wrap` property to `wrap` will make the columns go back to their specified width and the gree and black columns will be wraped to the begining of the frame.
+
+Note that setting it to `wrap-reverse` will not make the grey empty space from the `#box-container` stay at the bottom while changing the columns order.

guide/english/certifications/responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed/index.md

@@ -0,0 +1,13 @@
+---
+title: Use the justify-content Property in the Tweet Embed
+---
+## Use the justify-content Property in the Tweet Embed
+
+The different values for `justify-content` from the previous challenge are:
+
+- `flex-start` aligns items to the start of the flex container.
+- `flex-end` aligns items to the end of the flex container.
+- `space-between` aligns items to the center of the main axis, with extra space placed between the items.
+- `space-around` similar to `space-between` but the space is distributed around all the items.
+
+Read <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content' target='_blank' rel='nofollow'>more about `justify-content`</a>.

guide/english/certifications/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items/index.md

@@ -0,0 +1,15 @@
+---
+title: Use the order Property to Rearrange Items
+---
+## Use the order Property to Rearrange Items
+
+Before you make any changes, pay attention to the order of the colors. You get blue on the left and red ont eh right. After you set the `order` property you will be able to pick which one should be displayed first without having to change the html code.
+
+```css
+#box-1 {
+    background-color: dodgerblue;
+    order: 2;
+    height: 200px;
+    width: 200px;
+  }
+  ```