diff --git a/challenges/01-responsive-web-design/css-grid.json b/challenges/01-responsive-web-design/css-grid.json
index 6971ee20b5..5c34328a12 100644
--- a/challenges/01-responsive-web-design/css-grid.json
+++ b/challenges/01-responsive-web-design/css-grid.json
@@ -15,8 +15,10 @@
],
"tests": [
{
- "text": "container class should have a display property with a value of grid.",
- "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), 'container class should have a display property with a value of grid.');"
+ "text":
+ "container class should have a display property with a value of grid.",
+ "testString":
+ "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), 'container class should have a display property with a value of grid.');"
}
],
"solutions": ["var code = \".container {display: grid;}\""],
@@ -74,8 +76,10 @@
],
"tests": [
{
- "text": "container class should have a grid-template-columns property with three units of 100px.",
- "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-template-columns property with three units of 100px.');"
+ "text":
+ "container class should have a grid-template-columns property with three units of 100px.",
+ "testString":
+ "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-template-columns property with three units of 100px.');"
}
],
"solutions": [
@@ -133,8 +137,10 @@
],
"tests": [
{
- "text": "container class should have a grid-template-rows property with two units of 50px.",
- "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-template-rows property with two units of 50px.');"
+ "text":
+ "container class should have a grid-template-rows property with two units of 50px.",
+ "testString":
+ "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-template-rows property with two units of 50px.');"
}
],
"solutions": [
@@ -199,8 +205,10 @@
],
"tests": [
{
- "text": "container class should have a grid-template-columns property that has three columns with the following widths: 1fr, 100px, and 2fr.",
- "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.');"
+ "text":
+ "container class should have a grid-template-columns property that has three columns with the following widths: 1fr, 100px, and 2fr.",
+ "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.');"
}
],
"solutions": [
@@ -262,8 +270,10 @@
],
"tests": [
{
- "text": "container class should have a grid-column-gap property that has the value of 20px.",
- "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-column-gap property that has the value of 20px.');"
+ "text":
+ "container class should have a grid-column-gap property that has the value of 20px.",
+ "testString":
+ "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-column-gap property that has the value of 20px.');"
}
],
"solutions": ["var code = \".container {grid-column-gap: 20px;}\""],
@@ -322,8 +332,10 @@
],
"tests": [
{
- "text": "container class should have a grid-row-gap property that has the value of 5px.",
- "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-row-gap property that has the value of 5px.');"
+ "text":
+ "container class should have a grid-row-gap property that has the value of 5px.",
+ "testString":
+ "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-row-gap property that has the value of 5px.');"
}
],
"solutions": ["var code = \".container {grid-row-gap: 5px;}\""],
@@ -382,8 +394,10 @@
],
"tests": [
{
- "text": "container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns.",
- "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns.');"
+ "text":
+ "container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns.",
+ "testString":
+ "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns.');"
}
],
"solutions": ["var code = \".container {grid-gap: 10px 20px;}\""],
@@ -448,8 +462,10 @@
],
"tests": [
{
- "text": "item5 class should have a grid-column property that has the value of 2 / 4.",
- "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-column property that has the value of 2 / 4.');"
+ "text":
+ "item5 class should have a grid-column property that has the value of 2 / 4.",
+ "testString":
+ "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-column property that has the value of 2 / 4.');"
}
],
"solutions": ["var code = \".item5 {grid-column: 2 / 4;}\""],
@@ -512,8 +528,10 @@
],
"tests": [
{
- "text": "item5 class should have a grid-row property that has the value of 2 / 4.",
- "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-row property that has the value of 2 / 4.');"
+ "text":
+ "item5 class should have a grid-row property that has the value of 2 / 4.",
+ "testString":
+ "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-row property that has the value of 2 / 4.');"
}
],
"solutions": ["var code = \".item5 {grid-row: 2 / 4;}\""],
@@ -580,8 +598,10 @@
],
"tests": [
{
- "text": "item2 class should have a justify-self property that has the value of center.",
- "testString": "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), 'item2 class should have a justify-self property that has the value of center.');"
+ "text":
+ "item2 class should have a justify-self property that has the value of center.",
+ "testString":
+ "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), 'item2 class should have a justify-self property that has the value of center.');"
}
],
"solutions": ["var code = \".item2 {justify-self: center;}\""],
@@ -645,8 +665,10 @@
],
"tests": [
{
- "text": "item3 class should have a align-self property that has the value of end.",
- "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), 'item3 class should have a align-self property that has the value of end.');"
+ "text":
+ "item3 class should have a align-self property that has the value of end.",
+ "testString":
+ "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), 'item3 class should have a align-self property that has the value of end.');"
}
],
"solutions": ["var code = \".item3 {align-self: end;}\""],
@@ -710,8 +732,10 @@
],
"tests": [
{
- "text": "container class should have a justify-items property that has the value of center.",
- "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.');"
+ "text":
+ "container class should have a justify-items property that has the value of center.",
+ "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.');"
}
],
"solutions": ["var code = \".container {justify-items: center;}\""],
@@ -771,8 +795,10 @@
],
"tests": [
{
- "text": "container class should have a align-items property that has the value of end.",
- "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.');"
+ "text":
+ "container class should have a align-items property that has the value of end.",
+ "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.');"
}
],
"solutions": ["var code = \".container {align-items: end;}\""],
@@ -836,8 +862,10 @@
],
"tests": [
{
- "text": "container class should have a grid-template-areas property similar to the preview but has . instead of the advert 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), 'container class should have a grid-template-areas propertiy similar to the preview but has . instead of the advert area.');"
+ "text":
+ "container class should have a grid-template-areas property similar to the preview but has . instead of the advert 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), 'container class should have a grid-template-areas propertiy similar to the preview but has . instead of the advert area.');"
}
],
"solutions": [
@@ -904,8 +932,10 @@
],
"tests": [
{
- "text": "item5 class should have a grid-area property that has the value of footer.",
- "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-area property that has the value of footer.');"
+ "text":
+ "item5 class should have a grid-area property that has the value of footer.",
+ "testString":
+ "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-area property that has the value of footer.');"
}
],
"solutions": ["var code = \".item5 {grid-area: footer;}\""],
@@ -976,8 +1006,10 @@
],
"tests": [
{
- "text": "item5 class should have a grid-area property that has the value of 3/1/4/4.",
- "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), 'item5 class should have a grid-area property that has the value of 3/1/4/4.');"
+ "text":
+ "item5 class should have a grid-area property that has the value of 3/1/4/4.",
+ "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), 'item5 class should have a grid-area property that has the value of 3/1/4/4.');"
}
],
"solutions": ["var code = \".item5 {grid-area: 3/1/4/4;}\""],
@@ -1048,8 +1080,10 @@
],
"tests": [
{
- "text": "container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr.",
- "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), 'container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr.');"
+ "text":
+ "container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr.",
+ "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), 'container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr.');"
}
],
"solutions": [
@@ -1113,8 +1147,10 @@
],
"tests": [
{
- "text": "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.",
- "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), '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.');"
+ "text":
+ "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.",
+ "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), '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.');"
}
],
"solutions": [
@@ -1170,7 +1206,7 @@
"id": "5a94fe5469fb03452672e461",
"title": "Create Flexible Layouts Using auto-fill",
"description": [
- "The repeat function comes with a option called auto-fill. 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.",
+ "The repeat function comes with an option called auto-fill. 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.",
"In the preview, grid-template-columns is set to",
"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.",
@@ -1180,8 +1216,10 @@
],
"tests": [
{
- "text": "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.",
- "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), '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.');"
+ "text":
+ "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.",
+ "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), '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.');"
}
],
"solutions": [
@@ -1261,8 +1299,10 @@
],
"tests": [
{
- "text": "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.",
- "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), '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.');"
+ "text":
+ "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.",
+ "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), '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.');"
}
],
"solutions": [
@@ -1343,8 +1383,10 @@
],
"tests": [
{
- "text": "When the viewport is 400px or more, container class should have a grid-template-areas 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 400px or more, container class should have a grid-template-areas 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.');"
+ "text":
+ "When the viewport is 400px or more, container class should have a grid-template-areas 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 400px or more, container class should have a grid-template-areas 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.');"
}
],
"solutions": [
@@ -1445,12 +1487,16 @@
],
"tests": [
{
- "text": "item3 class should have a grid-template-columns property with auto and 1fr as values.",
- "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), 'item3 class should have a grid-template-columns property with auto and 1fr as values.');"
+ "text":
+ "item3 class should have a grid-template-columns property with auto and 1fr as values.",
+ "testString":
+ "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), 'item3 class should have a grid-template-columns property with auto and 1fr as values.');"
},
{
- "text": "item3 class should have a display property with the value of grid.",
- "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), 'item3 class should have a display property with the value of grid.');"
+ "text":
+ "item3 class should have a display property with the value of grid.",
+ "testString":
+ "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), 'item3 class should have a display property with the value of grid.');"
}
],
"solutions": [