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

fix(challenge-md): Fix quotes that failed in the transform

Browse Source
This commit is contained in:
Bouncey
2018-10-08 01:01:53 +01:00
committed by mrugesh mohapatra
parent 392b28fa55
commit a859035023
1333 changed files with 5710 additions and 5710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@ Give the grid container three columns that are <code>100px</code> wide each.
```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), ''<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), "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.");'
```
@ -42,19 +42,19 @@ tests:
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/* add your code below this line */
/* add your code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>

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

@ -21,7 +21,7 @@ Use <code>grid-gap</code> to introduce a <code>10px</code> gap between the rows
```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), ''<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), "<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.");'
```
@ -39,7 +39,7 @@ tests:
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
@ -49,8 +49,8 @@ tests:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* add your code below this line */
/* add your code above this line */
}
</style>

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

@ -21,7 +21,7 @@ Add two rows to the grid that are <code>50px</code> tall each.
```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), ''<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), "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.");'
```
@ -39,7 +39,7 @@ tests:
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
@ -47,12 +47,12 @@ tests:
display: grid;
grid-template-columns: 100px 100px 100px;
/* add your code below this line */
/* add your code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>

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

@ -21,7 +21,7 @@ Use this property to center all our items horizontally.
```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), ''<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), "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.");'
```
@ -39,7 +39,7 @@ tests:
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
@ -50,12 +50,12 @@ tests:
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* add your code below this line */
/* add your code above this line */
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -21,7 +21,7 @@ Use it now to move all the items to the end of each cell.
```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), ''<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), "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.");'
```
@ -39,7 +39,7 @@ tests:
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
@ -50,12 +50,12 @@ tests:
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* add your code below this line */
/* add your code above this line */
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -24,7 +24,7 @@ Use the <code>justify-self</code> property to center the item with the class <co
```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), ''<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), "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.");'
```
@ -38,19 +38,19 @@ tests:
```html
<style>
.item1{background: LightSkyBlue;}
.item2 {
background: LightSalmon;
/* add your code below this line */
/* add your code above this line */
}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
@ -62,7 +62,7 @@ tests:
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -21,7 +21,7 @@ Align the item with the class <code>item3</code> vertically at the <code>end</co
```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), ''<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), "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.");'
```
@ -36,18 +36,18 @@ tests:
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3 {
background: PaleTurquoise;
/* add your code below this line */
/* add your code above this line */
}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
@ -59,7 +59,7 @@ tests:
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -23,7 +23,7 @@ Give the columns in the grid a <code>20px</code> 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), ''<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), "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.");'
```
@ -41,7 +41,7 @@ tests:
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
@ -51,12 +51,12 @@ tests:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* add your code below this line */
/* add your code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>

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

@ -21,7 +21,7 @@ Create a gap for the rows that is <code>5px</code> tall.
```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), ''<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), "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.");'
```
@ -39,7 +39,7 @@ tests:
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
@ -49,12 +49,12 @@ tests:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* add your code below this line */
/* add your code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>

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

@ -25,7 +25,7 @@ In the first grid, use <code>auto-fill</code> with <code>repeat</code> to fill t
```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), ''<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), "<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>.");'
```
@ -43,7 +43,7 @@ tests:
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 100px;
@ -51,14 +51,14 @@ tests:
background: LightGray;
display: grid;
/* change the code below this line */
grid-template-columns: repeat(3, minmax(60px, 1fr));
/* change the code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;

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

@ -22,7 +22,7 @@ In the second grid, use <code>auto-fit</code> with <code>repeat</code> to fill t
```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(/.container\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), ''<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(/.container\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), "<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>.");'
```
@ -40,7 +40,7 @@ tests:
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 100px;
@ -51,7 +51,7 @@ tests:
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;
@ -59,15 +59,15 @@ tests:
background: Silver;
display: grid;
/* change the code below this line */
grid-template-columns: repeat(3, minmax(60px, 1fr));
/* change the code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -22,9 +22,9 @@ Turn the element with the <code>item3</code> class into a grid with two columns
```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), ''<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), "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.");'
- 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), ''<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), "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.");'
```
@ -55,36 +55,36 @@ tests:
background: LightSkyBlue;
grid-area: header;
}
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
/* enter your code below this line */
/* enter your code above this line */
}
.item4 {
background: lightpink;
grid-area: footer;
}
.itemOne {
background: PaleGreen;
}
.itemTwo {
background: BlanchedAlmond;
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>

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

@ -22,7 +22,7 @@ Change the display of the div with the <code>container</code> class to <code>gri
```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), ''<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), "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.");'
```
@ -40,18 +40,18 @@ tests:
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
/* add your code below this line */
/* add your code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>

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

@ -25,7 +25,7 @@ Place the area template so that the cell labeled <code>advert</code> becomes an
```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(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), ''<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.'');'
testString: 'assert(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), "<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.");'
```
@ -43,7 +43,7 @@ tests:
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
@ -54,7 +54,7 @@ tests:
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* change code below this line */
grid-template-areas:
"header header header"
"advert content content"
@ -62,7 +62,7 @@ tests:
/* change code above this line */
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -23,7 +23,7 @@ Using the <code>minmax</code> function, replace the <code>1fr</code> in the <cod
```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), ''<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), "<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>.");'
```
@ -41,7 +41,7 @@ tests:
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
@ -49,15 +49,15 @@ tests:
background: LightGray;
display: grid;
/* change the code below this line */
grid-template-columns: repeat(3, 1fr);
/* change the code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -23,7 +23,7 @@ Place an element with the <code>item5</code> class in the <code>footer</code> ar
```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(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi), ''<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.'');'
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.");'
```
@ -40,15 +40,15 @@ tests:
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* add your code below this line */
/* add your code above this line */
}
.container {
font-size: 40px;
min-height: 300px;
@ -58,13 +58,13 @@ tests:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -29,7 +29,7 @@ Use <code>repeat</code> to remove repetition from the <code>grid-template-column
```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), ''<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), "<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>.");'
```
@ -47,7 +47,7 @@ tests:
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
@ -55,15 +55,15 @@ tests:
background: LightGray;
display: grid;
/* change the code below this line */
grid-template-columns: 1fr 1fr 1fr;
/* change the code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -27,7 +27,7 @@ Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr.
```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), ''<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), "<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>.");'
```
@ -45,21 +45,21 @@ tests:
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/* modify the code below this line */
grid-template-columns: auto 50px 10% 2fr 1fr;
/* modify the code above this line */
grid-template-rows: 50px 50px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>

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

@ -25,7 +25,7 @@ Using the <code>grid-area</code> property, place the element with <code>item5</c
```yml
tests:
- text: <code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.
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), ''<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.'');'
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), "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.");'
```
@ -42,15 +42,15 @@ tests:
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* add your code below this line */
/* add your code above this line */
}
.container {
font-size: 40px;
min-height: 300px;
@ -62,7 +62,7 @@ tests:
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -28,7 +28,7 @@ Make the item with the class <code>item5</code> consume the last two columns of
```yml
tests:
- text: <code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), ''<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.'');'
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.");'
```
@ -45,15 +45,15 @@ tests:
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* add your code below this line */
/* add your code above this line */
}
.container {
font-size: 40px;
min-height: 300px;
@ -65,7 +65,7 @@ tests:
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -21,7 +21,7 @@ Make the element with the <code>item5</code> class consume the last two rows.
```yml
tests:
- text: <code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), ''<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.'');'
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.");'
```
@ -38,16 +38,16 @@ tests:
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
grid-column: 2 / 4;
/* add your code below this line */
/* add your code above this line */
}
.container {
font-size: 40px;
min-height: 300px;
@ -59,7 +59,7 @@ tests:
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>

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

@ -22,7 +22,7 @@ When the viewport width is <code>400px</code> or more, make the header area occu
```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 footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.'
testString: 'assert(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), ''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 footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.'');'
testString: 'assert(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), "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 footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.");'
```
@ -39,22 +39,22 @@ tests:
background: LightSkyBlue;
grid-area: header;
}
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
}
.item4 {
background: lightpink;
grid-area: footer;
}
.container {
font-size: 1.5em;
min-height: 300px;
@ -70,7 +70,7 @@ tests:
"content"
"footer";
}
@media (min-width: 300px){
.container{
grid-template-columns: auto 1fr;
@ -81,21 +81,21 @@ tests:
"advert footer";
}
}
@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-areas:
"advert header"
"advert content"
"advert footer";
/* change the code above this line */
}
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>