fix(guide): restructure curriculum guide articles (#36501)

* fix: restructure certifications guide articles
* fix: added 3 dashes line before prob expl
* fix: added 3 dashes line before hints
* fix: added 3 dashes line before solutions

guide/english/certifications/responsive-web-design/css-grid/add-columns-with-grid-template-columns/index.md

@@ -1,24 +1,36 @@
 ---
 title: Add Columns with grid-template-columns
 ---
-## Add Columns with grid-template-columns
+# Add Columns with grid-template-columns
 
+---
+## Problem Explanation
 In this challenge, you are required to define columns for the grid.
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 You can define columns by declaring the following in your CSS codeblock:
 
-````css
+```css
 grid-template-columns: parameters;
-````
+```
 
 where parameters is whatever you want it to be.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since the challenge requires you to create three columns of 100px each, declare the following in your .container CSS codeblock:
 
-````css
+```css
 grid-template-columns: 100px 100px 100px;
-````
+```
+
+</details>

guide/english/certifications/responsive-web-design/css-grid/add-gaps-faster-with-grid-gap/index.md

@@ -1,24 +1,36 @@
 ---
 title: Add Gaps Faster with grid-gap
 ---
-## Add Gaps Faster with grid-gap
+# Add Gaps Faster with grid-gap
 
+---
+## Problem Explanation
 In this challenge you are required to use "grid-gap" to define a row gap and a column gap.
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 You can define the gap for the row and column by declaring the following in the .container CSS codeblock:
 
-````css
+```css
 grid-gap: 'row-gap' 'column-gap';
-````
+```
 
 and inserting the desired parameters for 'row-gap' and 'column-gap'.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since the challenge requires you to create a 10px gap between the rows and a 20px gap between the columns, add the following code to the .container CSS codeblock:
 
-````css
+```css
 grid-gap: 10px 20px;
-````
+```
+
+</details>

guide/english/certifications/responsive-web-design/css-grid/add-rows-with-grid-template-rows/index.md

@@ -1,18 +1,30 @@
 ---
 title: Add Rows with grid-template-rows
 ---
-## Add Rows with grid-template-rows
+# Add Rows with grid-template-rows
 
+---
+## Problem Explanation
 In this challenge, you are required to define rows for the CSS grid in `<div class="container">`.
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
  
 You can define rows by using the `grid-template-rows` CSS property.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since the challenge requires you to create two rows of `50px` each, declare the following in your `.container` CSS code block:
  
-````css
+```css
 grid-template-rows: 50px 50px;
-````
+```
+
+</details>

guide/english/certifications/responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items/index.md

@@ -1,24 +1,35 @@
 ---
 title: Align All Items Horizontally using justify-items
 ---
-## Align All Items Horizontally using justify-items
+# Align All Items Horizontally using justify-items
 
+---
+## Problem Explanation
 In this challenge you are required to use the "justify-items" property to horizontally align all the items in the grid.
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 You can horizontally align the items by declaring the following in your CSS codeblock:
 
-````css
+```css
 justify-items: value;
-````
+```
 
 where value is how you would like to horizontally align the items.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since the challenge requires you to horizontally center all the items, declare the following in your .container CSS codeblock:
 
-````css
+```css
 justify-items: center;
-````
+```
+</details>

guide/english/certifications/responsive-web-design/css-grid/align-all-items-vertically-using-align-items/index.md

@@ -1,24 +1,36 @@
 ---
 title: Align All Items Vertically using align-items
 ---
-## Align All Items Vertically using align-items
+# Align All Items Vertically using align-items
 
+---
+## Problem Explanation
 In this challenge you are required to use the "align-items" property to vertically align all the items in the grid.
 
+
+---
+## Hints
+
 ### Hint
 
 You can vertically align the items by declaring the following in your CSS codeblock:
 
-````css
+```css
 align-items: value;
-````
+```
 
 where value is how you could like to vertically align the items.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since the challenge requires you to move all the items to the end of each cell (vertically), declare the following in your .container CSS codeblock:
 
-````css
+```css
 align-items: end;
-````
+```
+
+</details>

guide/english/certifications/responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self/index.md

@@ -1,24 +1,36 @@
 ---
 title: Align an Item Horizontally using justify-self
 ---
-## Align an Item Horizontally using justify-self
+# Align an Item Horizontally using justify-self
 
+---
+## Problem Explanation
 In this challenge you are required to use the "justify-self" property to horizontally align a grid item.
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 You can horizontally align an item by declaring the following in your CSS codeblock:
 
-````css
+```css
 justify-self: value;
-````
+```
 
 where value is how you would like to horizontally align the item.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since this challenge requires you to (horizontally) center the item with the class `item2`, declare the following in your `.item2` CSS codeblock:
 
-````css
+```css
 justify-self: center;
-````
+```
+
+</details>

guide/english/certifications/responsive-web-design/css-grid/align-an-item-vertically-using-align-self/index.md

@@ -1,24 +1,35 @@
 ---
 title: Align an Item Vertically using align-self
 ---
-## Align an Item Vertically using align-self
+# Align an Item Vertically using align-self
 
+---
+## Problem Explanation
 In this challenge you are required to use the "align-self" property to vertically align a grid item.
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 You can vertically align an item by declaring the following in your CSS codeblock:
 
-````css
+```css
 align-self: value;
-````
+```
 
 where value is how you would like to vertically align the item.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since this challenge requires you to vertically align the item with the class `item3` at the end, declare the following in your `.item3` CSS codeblock:
 
-````css
+```css
 align-self: end;
-````
+```
+</details>

guide/english/certifications/responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap/index.md

@@ -1,24 +1,36 @@
 ---
 title: Create a Column Gap Using grid-column-gap
 ---
-## Create a Column Gap Using grid-column-gap
+# Create a Column Gap Using grid-column-gap
 
+---
+## Problem Explanation
 This challenge requires you to add a gap of 20px between all the columns of the CSS Grid in .container.
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 To add the gap between the columns of a grid, we use:
 
-````css
+```css
 grid-column-gap: parameter;
-```` 
+``` 
 
 where parameter is the required gap.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since the challenge has you adding a gap of 20px, you would add the following line to the .container CSS codeblock.
 
-````css
+```css
 grid-column-gap: 20px;
-````
+```
+
+</details>

guide/english/certifications/responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap/index.md

@@ -1,18 +1,30 @@
 ---
 title: Create a Row Gap using grid-row-gap
 ---
-## Create a Row Gap using grid-row-gap
+# Create a Row Gap using grid-row-gap
 
+---
+## Problem Explanation
 This challenge requires you to add a gap of `20px` between all the rows of the CSS Grid in .container.
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 To add a gap between the rows in a CSS grid, we use the `grid-row-gap` CSS property.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since the challenge has you adding a gap of `5px`, you would add the following line to the `.container` CSS code block.
 
-````css
+```css
 grid-row-gap: 5px;
-````
+```
+
+</details>

guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill/index.md

@@ -1,23 +1,27 @@
 ---
 title: Create Flexible Layouts Using auto-fill
 ---
-## Create Flexible Layouts Using auto-fill ##
 
+# Create Flexible Layouts Using auto-fill
+
+---
+## Problem Explanation
 This challenge will expound upon the previous challenge by adding the **auto-fill** value to the *repeat* function. This will cause the number of divs to expand based on the viewport's size rather than the previously specified column value. In the **Before** section below, the **grid-template-column** value "3" is specified.
 
 *Keep in mind that the following code snippets are only examples and not the exact challege from freeCodeCamp's curriculum.*
 
-### Before ###
+**Before**
+
 ```css
-    grid-template-columns: repeat(3, minmax(50px, 2fr));
+grid-template-columns: repeat(3, minmax(50px, 2fr));
 ```
 
-### After ###
+**After**
+
 ```css
-    grid-template-columns: repeat(auto-fill, minmax(50px, 2fr));
+grid-template-columns: repeat(auto-fill, minmax(50px, 2fr));
 ```
 
----
-### Resources ###
+#### Relevant Links
 You may refer to the **Syntax** portion of the following page to see the **auto-fill** value:
 [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat)

guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit/index.md

@@ -1,7 +1,7 @@
 ---
 title: Create Flexible Layouts Using auto-fit
 ---
-## Create Flexible Layouts Using auto-fit
+# Create Flexible Layouts Using auto-fit
 
 This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
 

guide/english/certifications/responsive-web-design/css-grid/create-grids-within-grids/index.md

@@ -1,20 +1,24 @@
 ---
 title: Create Grids within Grids
 ---
-## Create Grids within Grids
+# Create Grids within Grids
 
+---
+## Problem Explanation
 A grid within a grid is made the same as any other grid.
 1. Just nest one element inside another,
 2. set them *both* to grids,
 3. and *POOF*! You have a grid-within-a-grid.
 
-### Nesting an element
+**Nesting an element**
+
 For any refreshers, nesting an element looks like this:
 `<div class='gridElement'> Here is your grid
   <div class='nestedGridElement'>Here is your nested grid</div>
  </div>`
 
-### Setting your elements to grids
+**Setting your elements to grids**
+
 After that, adjust the following CSS properties:
 `.gridElement{
   /* this gives you a grid */
@@ -26,6 +30,6 @@ After that, adjust the following CSS properties:
     display: grid;
  }`
 
-### Additional Information
+** Notes:**
 After that, feel free to customize your grids however you like.
 i.e. `grid-template-columns: auto 1fr;` might look good in that nested grid.

guide/english/certifications/responsive-web-design/css-grid/create-your-first-css-grid/index.md

@@ -1,15 +1,19 @@
 ---
 title: Create Your First CSS Grid
 ---
-## Create Your First CSS Grid
+# Create Your First CSS Grid
+
+
+---
+## Hints
 
 ### Hint 1
 
 To change display of any element, the following syntax is used:
 
-````css
+```css
 display: propertyName;
-````
+```
 
 ### Hint 2
 
@@ -19,10 +23,16 @@ Change the display property of the .container element
 
 Set the display of the .container element to grid
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 To set the display of the .container element to grid:
 
-````css
+```css
 display: grid;
-````
+```
+
+</details>

guide/english/certifications/responsive-web-design/css-grid/divide-the-grid-into-an-area-template/index.md

@@ -1,21 +1,33 @@
 ---
 title: Divide the Grid Into an Area Template
 ---
-## Divide the Grid Into an Area Template
+# Divide the Grid Into an Area Template
 
+---
+## Problem Explanation
 In this challenge you are required to use the "grid-template-areas" property to group cells of a grid together into areas and give the areas a custom name.
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 A period (`.`) designates an empty cell in a grid.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since the challenge requires you to make the cell labeled `advert` into an empty cell, change `advert` to a `.` (period) so that the code reflects the following:
 
-````css
+```css
 grid-template-areas:
   "header header header"
   ". content content"
   "footer footer footer";
-````
+```
+
+</details>

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

@@ -1,7 +1,7 @@
 ---
 title: CSS Grid
 ---
-## CSS Grid
+# CSS Grid
 
 This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/mathematics/quadratic-equations/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
 
@@ -9,6 +9,6 @@ This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/
 
 <!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
 
-#### More Information:
+#### Relevant Links
 <!-- Please add any articles you think might be helpful to read before writing the article -->
 [CSS tricks guide to grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

guide/english/certifications/responsive-web-design/css-grid/limit-item-size-using-the-minmax-function/index.md

@@ -1,21 +1,23 @@
 ---
-title: Limit Item Size Using the minmax Function ##
+title: Limit Item Size Using the minmax Function
 ---
 
+# Limit Item Size Using the minmax Function
+
+---
+## Problem Explanation
 Using the *minmax* function in conjunction with the *repeat* function is exactly what this challenge describes, but this was not inherently obvious to me at first. The way to pass this challenge is to remove the **max-width** value within the *repeat* function, and then add the *minmax* function in place of the *repeat* **max-width** value.
 
 Here is an **example** of what that looks like using a *before* and *after* approach:
 
-### Before ###
+**Before**
 ```css
     grid-template-columns: repeat(3, 1fr);
 ```
-### After ###
+**After**
 ```css
     grid-template-columns: repeat(3, minmax(50px, 2fr));
 ```
 ---
 
-
-### Resources ###
-[Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax)
+#### Relevant Links[Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax)

guide/english/certifications/responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property/index.md

@@ -1,15 +1,23 @@
 ---
 title: Place Items in Grid Areas Using the grid-area Property
 ---
-## Place Items in Grid Areas Using the grid-area Property
+# Place Items in Grid Areas Using the grid-area Property
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 Use the `grid-area` property.
 
-### Solution
+
+---
+## Solutions
 
 ```html
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
 <style>
   .item1{background:LightSkyBlue;}
   .item2{background:LightSalmon;}
@@ -45,3 +53,4 @@ Use the `grid-area` property.
   <div class="item5">5</div>
 </div>
 ```
+</details>

guide/english/certifications/responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function/index.md

@@ -1,7 +1,7 @@
 ---
 title: Reduce Repetition Using the repeat Function
 ---
-## Reduce Repetition Using the repeat Function
+# Reduce Repetition Using the repeat Function
 
 This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
 

guide/english/certifications/responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows/index.md

@@ -1,22 +1,33 @@
 ---
 title: Use CSS Grid Units to Change the Size of Columns and Rows
 ---
-## Use CSS Grid units to Change the Size of Columns and Rows
+# Use CSS Grid Units to Change the Size of Columns and Rows
 
+---
+## Problem Explanation
 This challenge requires you to set the width of the columns of the container to the ones as specified in the challenge description.
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 Change the `grid-template-columns` property.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 Since the challenge requires you to set the width to `1fr`, `100px`, and `2fr`, change the `css grid-template-columns` property of `.container` to:
 
-````css
+```css
 grid-template-columns: 1fr 100px 2fr;
-````
+```
 
-#### More Infomation
+#### Relevant Links
 
 * [An Introduction to the fr CSS unit - CSS tricks](https://css-tricks.com/introduction-fr-css-unit/)
+</details>

guide/english/certifications/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template/index.md

@@ -1,13 +1,21 @@
 ---
 title: Use grid-area Without Creating an Areas Template
 ---
-## Use grid-area Without Creating an Areas Template
+# Use grid-area Without Creating an Areas Template
 
-### Hint
+
+---
+## Hints
+
+### Hint 1
 
 The `grid-area` takes values in the following format `horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at`.
 
-### Solution
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
 ```html
 <style>
@@ -41,3 +49,5 @@ The `grid-area` takes values in the following format `horizontal line to start a
   <div class="item5">5</div>
 </div>
 ```
+
+</details>

guide/english/certifications/responsive-web-design/css-grid/use-grid-column-to-control-spacing/index.md

@@ -1,7 +1,7 @@
 ---
 title: Use grid-column to Control Spacing
 ---
-## Use grid-column to Control Spacing
+# Use grid-column to Control Spacing
 
 This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/css-grid/use-grid-column-to-control-spacing/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
 

guide/english/certifications/responsive-web-design/css-grid/use-grid-row-to-control-spacing/index.md

@@ -1,7 +1,7 @@
 ---
 title: Use grid-row to Control Spacing
 ---
-## Use grid-row to Control Spacing
+# Use grid-row to Control Spacing
 
 This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/css-grid/use-grid-row-to-control-spacing/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
 

guide/english/certifications/responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts/index.md

@@ -1,7 +1,7 @@
 ---
 title: Use Media Queries to Create Responsive Layouts
 ---
-## Use Media Queries to Create Responsive Layouts
+# Use Media Queries to Create Responsive Layouts
 
 This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.