gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Feat: add new Markdown parser (#39800)

Browse Source 
and change all the challenges to new `md` format.
This commit is contained in:
Oliver Eyton-Williams
2020-11-27 19:02:05 +01:00
committed by GitHub
parent a07f84c8ec
commit 0bd52f8bd1
2580 changed files with 113436 additions and 111979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md
View File

@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
forumTopicId: 301117
---
## Description
<section id='description'>
Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the <code>grid-template-columns</code> property on a grid container as demonstrated below:
# --description--
Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the `grid-template-columns` property on a grid container as demonstrated below:
```css
.container {
@ -17,31 +17,27 @@ Simply creating a grid element doesn't get you very far. You need to define the
}
```
This will give your grid two columns that are each 50px wide.
The number of parameters given to the <code>grid-template-columns</code> property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.
</section>
This will give your grid two columns that are each 50px wide. The number of parameters given to the `grid-template-columns` property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.
## Instructions
<section id='instructions'>
Give the grid container three columns that are each <code>100px</code> wide.
</section>
# --instructions--
## Tests
<section id='tests'>
Give the grid container three columns that are each `100px` wide.
```yml
tests:
- text: <code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi));
# --hints--
`container` class should have a `grid-template-columns` property with three units of `100px`.
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -72,18 +68,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {grid-template-columns: 100px 100px 100px;}</style>
```
</section>

47
curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
View File

@ -6,32 +6,29 @@ videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
forumTopicId: 301118
---
## Description
<section id='description'>
<code>grid-gap</code> is a shorthand property for <code>grid-row-gap</code> and <code>grid-column-gap</code> from the previous two challenges that's more convenient to use. If <code>grid-gap</code> has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.
</section>
# --description--
## Instructions
<section id='instructions'>
Use <code>grid-gap</code> to introduce a <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.
</section>
`grid-gap` is a shorthand property for `grid-row-gap` and `grid-column-gap` from the previous two challenges that's more convenient to use. If `grid-gap` has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: <code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi));
Use `grid-gap` to introduce a `10px` gap between the rows and `20px` gap between the columns.
# --hints--
`container` class should have a `grid-gap` property that introduces `10px` gap between the rows and `20px` gap between the columns.
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -64,18 +61,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {grid-gap: 10px 20px;}</style>
```
</section>

47
curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
View File

@ -6,32 +6,29 @@ videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua'
forumTopicId: 301119
---
## Description
<section id='description'>
The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the <code>grid-template-rows</code> property in the same way you used <code>grid-template-columns</code> in previous challenge.
</section>
# --description--
## Instructions
<section id='instructions'>
Add two rows to the grid that are <code>50px</code> tall each.
</section>
The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the `grid-template-rows` property in the same way you used `grid-template-columns` in previous challenge.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: <code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi));
Add two rows to the grid that are `50px` tall each.
# --hints--
`container` class should have a `grid-template-rows` property with two units of `50px`.
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -63,18 +60,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {grid-template-rows: 50px 50px;}</style>
```
</section>

45
curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md
View File

@ -6,32 +6,29 @@ videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn'
forumTopicId: 301120
---
## Description
<section id='description'>
Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by using <code>justify-items</code> on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move <b>all</b> the items in our grid to the desired alignment.
</section>
# --description--
Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by using `justify-items` on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move **all** the items in our grid to the desired alignment.
# --instructions--
## Instructions
<section id='instructions'>
Use this property to center all our items horizontally.
</section>
## Tests
<section id='tests'>
# --hints--
```yml
tests:
- text: <code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi));
`container` class should have a `justify-items` property that has the value of `center`.
```js
assert(
code.match(
/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -66,18 +63,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {justify-items: center;}</style>
```
</section>

43
curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md
View File

@ -6,32 +6,27 @@ videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv'
forumTopicId: 301121
---
## Description
<section id='description'>
Using the <code>align-items</code> property on a grid container will set the vertical alignment for all the items in our grid.
</section>
# --description--
Using the `align-items` property on a grid container will set the vertical alignment for all the items in our grid.
# --instructions--
## Instructions
<section id='instructions'>
Use it now to move all the items to the end of each cell.
</section>
## Tests
<section id='tests'>
# --hints--
```yml
tests:
- text: <code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi));
`container` class should have a `align-items` property that has the value of `end`.
```js
assert(
code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -66,18 +61,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {align-items: end;}</style>
```
</section>

54
curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md
View File

@ -6,35 +6,33 @@ videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq'
forumTopicId: 301122
---
## Description
<section id='description'>
In CSS Grid, the content of each item is located in a box which is referred to as a <dfn>cell</dfn>. You can align the content's position within its cell horizontally using the <code>justify-self</code> property on a grid item. By default, this property has a value of <code>stretch</code>, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well:
<code>start</code>: aligns the content at the left of the cell,
<code>center</code>: aligns the content in the center of the cell,
<code>end</code>: aligns the content at the right of the cell.
</section>
# --description--
## Instructions
<section id='instructions'>
Use the <code>justify-self</code> property to center the item with the class <code>item2</code>.
</section>
In CSS Grid, the content of each item is located in a box which is referred to as a <dfn>cell</dfn>. You can align the content's position within its cell horizontally using the `justify-self` property on a grid item. By default, this property has a value of `stretch`, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well:
## Tests
<section id='tests'>
`start`: aligns the content at the left of the cell,
```yml
tests:
- text: <code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.
testString: assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi));
`center`: aligns the content in the center of the cell,
`end`: aligns the content at the right of the cell.
# --instructions--
Use the `justify-self` property to center the item with the class `item2`.
# --hints--
`item2` class should have a `justify-self` property that has the value of `center`.
```js
assert(
code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -73,18 +71,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.item2 {justify-self: center;}</style>
```
</section>

43
curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md
View File

@ -6,32 +6,25 @@ videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz'
forumTopicId: 301123
---
## Description
<section id='description'>
Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you use the <code>align-self</code> property on an item. This property accepts all of the same values as <code>justify-self</code> from the last challenge.
</section>
# --description--
## Instructions
<section id='instructions'>
Align the item with the class <code>item3</code> vertically at the <code>end</code>.
</section>
Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you use the `align-self` property on an item. This property accepts all of the same values as `justify-self` from the last challenge.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: <code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.
testString: assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
Align the item with the class `item3` vertically at the `end`.
# --hints--
`item3` class should have a `align-self` property that has the value of `end`.
```js
assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -70,18 +63,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.item3 {align-self: end;}</style>
```
</section>

47
curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
View File

@ -6,38 +6,35 @@ videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
forumTopicId: 301124
---
## Description
<section id='description'>
So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the <code>grid-column-gap</code> property like this:
# --description--
So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the `grid-column-gap` property like this:
```css
grid-column-gap: 10px;
```
This creates 10px of empty space between all of our columns.
</section>
## Instructions
<section id='instructions'>
Give the columns in the grid a <code>20px</code> gap.
</section>
# --instructions--
## Tests
<section id='tests'>
Give the columns in the grid a `20px` gap.
```yml
tests:
- text: <code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi));
# --hints--
`container` class should have a `grid-column-gap` property that has the value of `20px`.
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -71,18 +68,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {grid-column-gap: 20px;}</style>
```
</section>

45
curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
View File

@ -6,32 +6,27 @@ videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv'
forumTopicId: 301125
---
## Description
<section id='description'>
You can add a gap in between the rows of a grid using <code>grid-row-gap</code> in the same way that you added a gap in between columns in the previous challenge.
</section>
# --description--
## Instructions
<section id='instructions'>
Create a gap for the rows that is <code>5px</code> tall.
</section>
You can add a gap in between the rows of a grid using `grid-row-gap` in the same way that you added a gap in between columns in the previous challenge.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: <code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi));
Create a gap for the rows that is `5px` tall.
# --hints--
`container` class should have a `grid-row-gap` property that has the value of `5px`.
```js
assert(
code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -65,18 +60,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {grid-row-gap: 5px;}</style>
```
</section>

50
curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md
View File

@ -6,39 +6,35 @@ videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
forumTopicId: 301126
---
## Description
<section id='description'>
The repeat function comes with an option called <dfn>auto-fill</dfn>. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining <code>auto-fill</code> with <code>minmax</code>, like this:
# --description--
The repeat function comes with an option called <dfn>auto-fill</dfn>. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining `auto-fill` with `minmax`, like this:
```css
repeat(auto-fill, minmax(60px, 1fr));
```
When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one.
<strong>Note:</strong> If your container can't fit all your items on one row, it will move them down to a new one.
</section>
When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one. **Note:** If your container can't fit all your items on one row, it will move them down to a new one.
## Instructions
<section id='instructions'>
In the first grid, use <code>auto-fill</code> with <code>repeat</code> to fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>. Then resize the preview to see auto-fill in action.
</section>
# --instructions--
## Tests
<section id='tests'>
In the first grid, use `auto-fill` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see auto-fill in action.
```yml
tests:
- text: <code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi));
# --hints--
`container` class should have a `grid-template-columns` property with `repeat` and `auto-fill` that will fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`.
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -90,15 +86,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -149,5 +137,3 @@ tests:
<div class="item5">5</div>
</div>
```
</section>

50
curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
View File

@ -6,33 +6,31 @@ videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
forumTopicId: 301127
---
## Description
<section id='description'>
<code>auto-fit</code> works almost identically to <code>auto-fill</code>. The only difference is that when the container's size exceeds the size of all the items combined, <code>auto-fill</code> keeps inserting empty rows or columns and pushes your items to the side, while <code>auto-fit</code> collapses those empty rows or columns and stretches your items to fit the size of the container.
<strong>Note:</strong> If your container can't fit all your items on one row, it will move them down to a new one.
</section>
# --description--
## Instructions
<section id='instructions'>
In the second grid, use <code>auto-fit</code> with <code>repeat</code> to fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>. Then resize the preview to see the difference.
</section>
`auto-fit` works almost identically to `auto-fill`. The only difference is that when the container's size exceeds the size of all the items combined, `auto-fill` keeps inserting empty rows or columns and pushes your items to the side, while `auto-fit` collapses those empty rows or columns and stretches your items to fit the size of the container.
## Tests
<section id='tests'>
**Note:** If your container can't fit all your items on one row, it will move them down to a new one.
```yml
tests:
- text: <code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.
testString: assert(code.match(/.container2\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi));
# --instructions--
In the second grid, use `auto-fit` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see the difference.
# --hints--
`container2` class should have a `grid-template-columns` property with `repeat` and `auto-fit` that will fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`.
```js
assert(
code.match(
/.container2\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -85,18 +83,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}</style>
```
</section>

56
curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.md
View File

@ -5,35 +5,37 @@ challengeType: 0
forumTopicId: 301128
---
## Description
<section id='description'>
Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid.
For example, by setting the <code>display</code> and <code>grid-template-columns</code> properties of the element with the <code>item3</code> class, you create a grid within your grid.
</section>
# --description--
## Instructions
<section id='instructions'>
Turn the element with the <code>item3</code> class into a grid with two columns with a width of <code>auto</code> and <code>1fr</code> using <code>display</code> and <code>grid-template-columns</code>.
</section>
Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid.
## Tests
<section id='tests'>
For example, by setting the `display` and `grid-template-columns` properties of the element with the `item3` class, you create a grid within your grid.
```yml
tests:
- text: <code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.
testString: assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi));
- text: <code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.
testString: assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
# --instructions--
Turn the element with the `item3` class into a grid with two columns with a width of `auto` and `1fr` using `display` and `grid-template-columns`.
# --hints--
`item3` class should have a `grid-template-columns` property with `auto` and `1fr` as values.
```js
assert(
code.match(
/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
)
);
```
</section>
`item3` class should have a `display` property with the value of `grid`.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -96,18 +98,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.item3 {grid-template-columns: auto 1fr; display: grid;}</style>
```
</section>

46
curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.md
View File

@ -6,33 +6,27 @@ videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
forumTopicId: 301129
---
## Description
<section id='description'>
Turn any HTML element into a grid container by setting its <code>display</code> property to <code>grid</code>. This gives you the ability to use all the other properties associated with CSS Grid.
<strong>Note:</strong> In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.
</section>
# --description--
## Instructions
<section id='instructions'>
Change the display of the div with the <code>container</code> class to <code>grid</code>.
</section>
Turn any HTML element into a grid container by setting its `display` property to `grid`. This gives you the ability to use all the other properties associated with CSS Grid.
## Tests
<section id='tests'>
**Note:** In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.
```yml
tests:
- text: <code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
# --instructions--
Change the display of the div with the `container` class to `grid`.
# --hints--
`container` class should have a `display` property with a value of `grid`.
```js
assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -62,18 +56,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {display: grid;}</style>
```
</section>

52
curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md
View File

@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
forumTopicId: 301130
---
## Description
<section id='description'>
You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using <code>grid-template-areas</code> on the container like this:
# --description--
You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using `grid-template-areas` on the container like this:
```css
grid-template-areas:
@ -17,32 +17,29 @@ grid-template-areas:
"footer footer footer";
```
The code above merges the top three cells together into an area named <code>header</code>, the bottom three cells into a <code>footer</code> area, and it makes two areas in the middle row; <code>advert</code> and <code>content</code>.
<strong>Note:</strong> Every word in the code represents a cell and every pair of quotation marks represent a row.
In addition to custom labels, you can use a period (<code>.</code>) to designate an empty cell in the grid.
</section>
The code above merges the top three cells together into an area named `header`, the bottom three cells into a `footer` area, and it makes two areas in the middle row; `advert` and `content`. **Note:** Every word in the code represents a cell and every pair of quotation marks represent a row. In addition to custom labels, you can use a period (`.`) to designate an empty cell in the grid.
## Instructions
<section id='instructions'>
Place the area template so that the cell labeled <code>advert</code> becomes an empty cell.
</section>
# --instructions--
## Tests
<section id='tests'>
Place the area template so that the cell labeled `advert` becomes an empty cell.
```yml
tests:
- text: <code>container</code> class should have a <code>grid-template-areas</code> property similar to the preview but has <code>.</code> instead of the <code>advert</code> area.
testString: assert(__helpers.removeCssComments(code).match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi));
# --hints--
`container` class should have a `grid-template-areas` property similar to the preview but has `.` instead of the `advert` area.
```js
assert(
__helpers
.removeCssComments(code)
.match(
/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -79,14 +76,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -121,5 +111,3 @@ tests:
<div class="item5">5</div>
</div>
```
</section>

49
curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
View File

@ -6,38 +6,35 @@ videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
forumTopicId: 301131
---
## Description
<section id='description'>
There's another built-in function to use with <code>grid-template-columns</code> and <code>grid-template-rows</code> called <code>minmax</code>. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:
# --description--
There's another built-in function to use with `grid-template-columns` and `grid-template-rows` called `minmax`. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:
```css
grid-template-columns: 100px minmax(50px, 200px);
```
In the code above, <code>grid-template-columns</code> is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.
</section>
In the code above, `grid-template-columns` is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.
## Instructions
<section id='instructions'>
Using the <code>minmax</code> function, replace the <code>1fr</code> in the <code>repeat</code> function with a column size that has the minimum width of <code>90px</code> and the maximum width of <code>1fr</code>, and resize the preview panel to see the effect.
</section>
# --instructions--
## Tests
<section id='tests'>
Using the `minmax` function, replace the `1fr` in the `repeat` function with a column size that has the minimum width of `90px` and the maximum width of `1fr`, and resize the preview panel to see the effect.
```yml
tests:
- text: <code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi));
# --hints--
`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the minimum width of `90px` and maximum width of `1fr`.
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -72,18 +69,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {grid-template-columns: repeat(3, minmax(90px, 1fr));}</style>
```
</section>

49
curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
View File

@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
forumTopicId: 301132
---
## Description
<section id='description'>
After creating an area's template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the <code>grid-area</code> property on an item like this:
# --description--
After creating an area's template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the `grid-area` property on an item like this:
```css
.item1 {
@ -16,30 +16,27 @@ After creating an area's template for your grid container, as shown in the previ
}
```
This lets the grid know that you want the <code>item1</code> class to go in the area named <code>header</code>. In this case, the item will use the entire top row because that whole row is named as the header area.
</section>
This lets the grid know that you want the `item1` class to go in the area named `header`. In this case, the item will use the entire top row because that whole row is named as the header area.
## Instructions
<section id='instructions'>
Place an element with the <code>item5</code> class in the <code>footer</code> area using the <code>grid-area</code> property.
</section>
# --instructions--
## Tests
<section id='tests'>
Place an element with the `item5` class in the `footer` area using the `grid-area` property.
```yml
tests:
- text: <code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.
testString: assert(__helpers.removeCssComments(code).match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
# --hints--
`item5` class should have a `grid-area` property that has the value of `footer`.
```js
assert(
__helpers
.removeCssComments(code)
.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -81,18 +78,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.item5 {grid-area: footer;}</style>
```
</section>

53
curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md
View File

@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
forumTopicId: 301133
---
## Description
<section id='description'>
When you used <code>grid-template-columns</code> and <code>grid-template-rows</code> to define the structure of a grid, you entered a value for each row or column you created.
Let's say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the <code>repeat</code> function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.
# --description--
When you used `grid-template-columns` and `grid-template-rows` to define the structure of a grid, you entered a value for each row or column you created.
Let's say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the `repeat` function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.
Here's an example that would create the 100 row grid, each row at 50px tall.
```css
@ -28,30 +30,27 @@ This translates to:
grid-template-columns: 1fr 50px 1fr 50px 20px;
```
<strong>Note:</strong> The <code>1fr 50px</code> is repeated twice followed by 20px.
</section>
**Note:** The `1fr 50px` is repeated twice followed by 20px.
## Instructions
<section id='instructions'>
Use <code>repeat</code> to remove repetition from the <code>grid-template-columns</code> property.
</section>
# --instructions--
## Tests
<section id='tests'>
Use `repeat` to remove repetition from the `grid-template-columns` property.
```yml
tests:
- text: <code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi));
# --hints--
`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the width of `1fr`.
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -86,18 +85,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {grid-template-columns: repeat(3, 1fr);}</style>
```
</section>

55
curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
View File

@ -6,12 +6,16 @@ videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd'
forumTopicId: 301134
---
## Description
<section id='description'>
You can use absolute and relative units like <code>px</code> and <code>em</code> in CSS Grid to define the size of rows and columns. You can use these as well:
<code>fr</code>: sets the column or row to a fraction of the available space,
<code>auto</code>: sets the column or row to the width or height of its content automatically,
<code>%</code>: adjusts the column or row to the percent width of its container.
# --description--
You can use absolute and relative units like `px` and `em` in CSS Grid to define the size of rows and columns. You can use these as well:
`fr`: sets the column or row to a fraction of the available space,
`auto`: sets the column or row to the width or height of its content automatically,
`%`: adjusts the column or row to the percent width of its container.
Here's the code that generates the output in the preview:
```css
@ -19,29 +23,26 @@ grid-template-columns: auto 50px 10% 2fr 1fr;
```
This snippet creates five columns. The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth.
</section>
## Instructions
<section id='instructions'>
# --instructions--
Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr.
</section>
## Tests
<section id='tests'>
# --hints--
```yml
tests:
- text: '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi));'
`container` class should have a `grid-template-columns` property that has three columns with the following widths: `1fr, 100px, and 2fr`.
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -74,18 +75,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.container {grid-template-columns: 1fr 100px 2fr;}</style>
```
</section>

47
curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
View File

@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
forumTopicId: 301135
---
## Description
<section id='description'>
The <code>grid-area</code> property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:
# --description--
The `grid-area` property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:
```css
item1 { grid-area: 1/1/2/4; }
@ -21,29 +21,26 @@ grid-area: horizontal line to start at / vertical line to start at / horizontal
```
So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.
</section>
## Instructions
<section id='instructions'>
Using the <code>grid-area</code> property, place the element with <code>item5</code> class between the third and fourth horizontal lines and between the first and fourth vertical lines.
</section>
# --instructions--
## Tests
<section id='tests'>
Using the `grid-area` property, place the element with `item5` class between the third and fourth horizontal lines and between the first and fourth vertical lines.
```yml
tests:
- text: The <code>item5</code> class should have a <code>grid-area</code> property to make it fill the whole area between the third and fourth horizontal lines, and first and fourth vertical lines.
testString: assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi));
# --hints--
The `item5` class should have a `grid-area` property to make it fill the whole area between the third and fourth horizontal lines, and first and fourth vertical lines.
```js
assert(
code.match(
/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -81,18 +78,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>.item5 {grid-area: 3/1/4/4;}</style>
```
</section>

81
curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
View File

@ -6,13 +6,18 @@ videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
forumTopicId: 301136
---
## Description
<section id='description'>
Up to this point, all the properties that have been discussed are for grid containers. The <code>grid-column</code> property is the first one for use on the grid items themselves.
# --description--
Up to this point, all the properties that have been discussed are for grid containers. The `grid-column` property is the first one for use on the grid items themselves.
The hypothetical horizontal and vertical lines that create the grid are referred to as <dfn>lines</dfn>. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.
This is what the lines look like for a 3x3 grid:
<div style="position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;"><p style="left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;">column lines</p><p style="left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">1</p><p style="left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">2</p><p style="left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">3</p><p style="left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">4</p><p style="left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;">row lines</p><p style="left:-10%;top:-10%;font-size:130%;position:absolute;">1</p><p style="left:-10%;top:21%;font-size:130%;position:absolute;">2</p><p style="left:-10%;top:53%;font-size:130%;position:absolute;">3</p><p style="left:-10%;top:85%;font-size:130%;position:absolute;">4</p><div style="left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;"></div></div>
To control the amount of columns an item will consume, you can use the <code>grid-column</code> property in conjunction with the line numbers you want the item to start and stop at.
This is what the lines look like for a 3x3 grid:
<div style='position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;'><p style='left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;'>column lines</p><p style='left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>1</p><p style='left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>2</p><p style='left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>3</p><p style='left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>4</p><p style='left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;'>row lines</p><p style='left:-10%;top:-10%;font-size:130%;position:absolute;'>1</p><p style='left:-10%;top:21%;font-size:130%;position:absolute;'>2</p><p style='left:-10%;top:53%;font-size:130%;position:absolute;'>3</p><p style='left:-10%;top:85%;font-size:130%;position:absolute;'>4</p><div style='left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;'></div></div>
To control the amount of columns an item will consume, you can use the `grid-column` property in conjunction with the line numbers you want the item to start and stop at.
Here's an example:
```css
@ -20,37 +25,46 @@ grid-column: 1 / 3;
```
This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.
</section>
## Instructions
<section id='instructions'>
Make the item with the class <code>item5</code> consume the last two columns of the grid.
</section>
# --instructions--
## Tests
<section id='tests'>
Make the item with the class `item5` consume the last two columns of the grid.
```yml
tests:
- text: <code>item5</code> class should have a <code>grid-column</code> property.
testString: assert(__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-column:.*}/g));
- text: <code>item5</code> class should have a <code>grid-column</code> property which results in it consuming the last two columns of the grid.
testString: "
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
const result = colStart.toString() + colEnd.toString();
const correctResults = ['24', '2-1', '2span 2', '2span2', 'span 2-1', '-12', 'span 2span 2', 'span 2auto', 'autospan 2'];
assert(correctResults.includes(result));
"
# --hints--
`item5` class should have a `grid-column` property.
```js
assert(
__helpers
.removeWhiteSpace($('style').text())
.match(/\.item5{.*grid-column:.*}/g)
);
```
</section>
`item5` class should have a `grid-column` property which results in it consuming the last two columns of the grid.
## Challenge Seed
<section id='challengeSeed'>
```js
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
const result = colStart.toString() + colEnd.toString();
const correctResults = [
'24',
'2-1',
'2span 2',
'2span2',
'span 2-1',
'-12',
'span 2span 2',
'span 2auto',
'autospan 2'
];
assert(correctResults.includes(result));
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -88,12 +102,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -127,5 +136,3 @@ tests:
<div class="item5">5</div>
</div>
```
</section>

71
curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md
View File

@ -6,40 +6,47 @@ videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4'
forumTopicId: 301137
---
## Description
<section id='description'>
Of course, you can make items consume multiple rows just like you can with columns. You define the horizontal lines you want an item to start and stop at using the <code>grid-row</code> property on a grid item.
</section>
# --description--
## Instructions
<section id='instructions'>
Make the element with the <code>item5</code> class consume the last two rows.
</section>
Of course, you can make items consume multiple rows just like you can with columns. You define the horizontal lines you want an item to start and stop at using the `grid-row` property on a grid item.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: <code>item5</code> class should have a <code>grid-row</code> property.
testString: assert(__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g));
- text: <code>item5</code> class should have a <code>grid-row</code> property which results in it consuming the last two rows of the grid.
testString: "
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
const result = rowStart.toString() + rowEnd.toString();
const correctResults = ['24', '2-1', '2span 2', '2span2', 'span 2-1', '-12', 'span 2span 2', 'span 2auto', 'autospan 2'];
assert(correctResults.includes(result));
"
Make the element with the `item5` class consume the last two rows.
# --hints--
`item5` class should have a `grid-row` property.
```js
assert(
__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g)
);
```
</section>
`item5` class should have a `grid-row` property which results in it consuming the last two rows of the grid.
## Challenge Seed
<section id='challengeSeed'>
```js
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
const result = rowStart.toString() + rowEnd.toString();
const correctResults = [
'24',
'2-1',
'2span 2',
'2span2',
'span 2-1',
'-12',
'span 2span 2',
'span 2auto',
'autospan 2'
];
assert(correctResults.includes(result));
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<style>
@ -77,15 +84,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -120,5 +119,3 @@ tests:
<div class="item5">5</div>
</div>
```
</section>

47
curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
View File

@ -6,33 +6,33 @@ videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
forumTopicId: 301138
---
## Description
<section id='description'>
# --description--
CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items.
In the preview, when the viewport width is 300px or more, the number of columns changes from 1 to 2. The advertisement area then occupies the left column completely.
</section>
## Instructions
<section id='instructions'>
When the viewport width is <code>400px</code> or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely.
</section>
# --instructions--
## Tests
<section id='tests'>
When the viewport width is `400px` or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely.
```yml
tests:
- text: When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the header and footer areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.
testString: assert(__helpers.removeCssComments(code).match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi));
# --hints--
When the viewport is `400px` or more, `container` class should have a `grid-template-areas` property in which the header and footer areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.
```js
assert(
__helpers
.removeCssComments(code)
.match(
/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -103,14 +103,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>
@ -178,5 +171,3 @@ tests:
<div class="item4">footer</div>
</div>
```
</section>