mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): add second flexbox workshop to FSD cert (#62735)
Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com> Co-authored-by: Leonhard Gulewitsch <leonhard@gulewitsch.com> Co-authored-by: l3onhard <l3onhard@users.noreply.github.com> Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> Co-authored-by: Anna <a.rcottrill521@gmail.com> Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com> Co-authored-by: John Doe <johnDoe123@email.com> Co-authored-by: Ilenia M <nethleen@gmail.com> Co-authored-by: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com> Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Sebastian
@@ -5760,6 +5760,12 @@
|
||||
"In this workshop, you'll use Flexbox to build a responsive photo gallery webpage."
|
||||
]
|
||||
},
|
||||
"workshop-colorful-boxes": {
|
||||
"title": "Design a Set of Colorful Boxes",
|
||||
"intro": [
|
||||
"In this workshop, you will practice working with CSS flexbox by designing a set of colored boxes."
|
||||
]
|
||||
},
|
||||
"lab-pricing-plans-layout": {
|
||||
"title": "Design a Pricing Plans Layout Page",
|
||||
"intro": [
|
||||
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 68ed661e9f463c155bb677a1
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop you will practice working with CSS flexbox by designing a set of colored boxes.
|
||||
|
||||
To begin, inside the `body` element, add a `header` element. Nest an `h1` element inside the `header` element with the text `Colored Boxes Layout`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `header` element inside the `body` element.
|
||||
|
||||
```js
|
||||
const headerEl = document.querySelector('body > header');
|
||||
assert.exists(headerEl);
|
||||
```
|
||||
|
||||
Your `header` element should have an `h1` element inside it.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector('body > header > h1');
|
||||
assert.exists(h1El);
|
||||
```
|
||||
|
||||
Your `h1` element should have the text `Colored Boxes Layout` inside it.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector('body > header > h1');
|
||||
assert.equal(h1El?.textContent.trim(), 'Colored Boxes Layout');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 68ef0b3237fef991c92d9c19
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now add a `div` element with the class `flex-container` below your `header`. Then create six `div` elements with the class `box` inside the `div` you just created.
|
||||
|
||||
Remember that a class attribute is often used to point to a class name in a style sheet. In this case, all of the `div` elements will be styled equally according to the `.flex-container` and `.box` style definition.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `div` element below the `header` element.
|
||||
|
||||
```js
|
||||
const divELBelowHeader = document.querySelector('header + div');
|
||||
assert.exists(divELBelowHeader);
|
||||
```
|
||||
|
||||
Your `div` element below the `header` element should have the class `flex-container`.
|
||||
|
||||
```js
|
||||
const divELBelowHeader = document.querySelector('header + div');
|
||||
assert.equal(divELBelowHeader.className, 'flex-container');
|
||||
```
|
||||
|
||||
You should have six `div` elements nested inside the `.flex-container` element.
|
||||
|
||||
```js
|
||||
const divElsInsideContainer = document.querySelectorAll('div.flex-container > div');
|
||||
assert.lengthOf(divElsInsideContainer, 6);
|
||||
```
|
||||
|
||||
All six of your `div` elements inside of the `.flex-container` element should have the class `box`.
|
||||
|
||||
```js
|
||||
const divElsInsideContainerWithBox = document.querySelectorAll('div.flex-container > div.box');
|
||||
assert.lengthOf(divElsInsideContainerWithBox, 6);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
```
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 68ef0d6d156f86a6ac1824c6
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you are going to use the `align-content` property. This property controls the arrangement of items along the cross axis. While the default value of `align-content` is `stretch`, the most relevant options you can use for `align-content` are: `space-between`, `start`, `center`, `end`, `space-around` and `space-evenly`.
|
||||
|
||||
Add the property `align-content` with the value `space-between` to see how the boxes will align in the `.flex-container` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.flex-container` selector should have the property `align-content` with the value `space-between`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('align-content'), 'space-between');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 68ef134c17c96be0af5de613
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now try another alignment value. Change the `align-content` value from `space-between` to `start`.
|
||||
|
||||
With the `start` value, items are packed toward the start edge of the alignment container.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.flex-container` selector should have the property `align-content` with the value `start`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('align-content'), 'start');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
--fcc-editable-region--
|
||||
align-content: space-between;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 68ef16591f684df7c1d702e1
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next on the list is the `center` value. Change `align-content` value from `start` to `center`.
|
||||
|
||||
With the `center` value, items will be packed to the center of the alignment container.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.flex-container` selector should have the property `align-content` with the value `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('align-content'), 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
--fcc-editable-region--
|
||||
align-content: start;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 68ef1750c8ca08009f518b61
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now to see how the `end` value works, change the `align-content` value from `center` to `end`.
|
||||
|
||||
With the `end` value, items will be packed to the end of the alignment container.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.flex-container` selector should have the property `align-content` with the value `end`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('align-content'), 'end');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
--fcc-editable-region--
|
||||
align-content: center;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 68ef1835b7772808b7185d11
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
With the `space-around` value, items are evenly distributed within the alignment container. To see it in action, change the `align-content` value from `end` to `space-around`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.flex-container` selector should have the property `align-content` with the value `space-around`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('align-content'), 'space-around');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
--fcc-editable-region--
|
||||
align-content: end;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 68ef18bf52e0620eb8ae2694
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you are going to check on the last alignment value. Change the `align-content` value from `space-around` to `space-evenly`.
|
||||
|
||||
With the `space-evenly` value, items are evenly distributed within the alignment container. The space between all items is exactly the same, including the space at the start and the end.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.flex-container` selector should have the property `align-content` with the value `space-evenly`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('align-content'), 'space-evenly');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
--fcc-editable-region--
|
||||
align-content: space-around;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+103
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 68ef1b1c657f1b2396d98592
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `flex` property controls the size and behavior of the items inside a flexible container. It is composed by three properties: `flex-grow`, `flex-shrink`, and `flex-basis`.
|
||||
|
||||
The `flex-grow` property controls how much extra space the flex item should take up if there is free space available in the container.
|
||||
|
||||
Now, getting back to the `.box` selector, change the first number in `flex` (corresponding to the `flex-grow` value) from `1` to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `flex` with a value of `0 1 100px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('flex'), '0 1 100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
--fcc-editable-region--
|
||||
flex: 1 1 100px;
|
||||
--fcc-editable-region--
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
```
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 68ef1eda8fdbe33f87cfc71d
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The second value of the `flex` property sets the `flex-shrink` property. This property controls how much the flex item will shrink when there isn't enough space in the container for all items.
|
||||
|
||||
Still inside the `.box` selector, change the second value in `flex` from `1` to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `flex` with a value of `0 0 100px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('flex'), '0 0 100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
--fcc-editable-region--
|
||||
flex: 0 1 100px;
|
||||
--fcc-editable-region--
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
```
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 68ef2080ba680d4c8c0213aa
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last value of the `flex` property sets the `flex-basis` property. This property sets the starting size of a flex item before it grows or shrinks.
|
||||
|
||||
Finally, change the last value in `flex` from `100px` to `150px` inside your `.box` selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `flex` with a value of `0 0 150px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('flex'), '0 0 150px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
--fcc-editable-region--
|
||||
flex: 0 0 100px;
|
||||
--fcc-editable-region--
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
```
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 68ef216359687854fa2f3081
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Going back to the `html` file, add the class `box1` to the first `div` with the class of `box`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the class `box1` to your first `.box` element.
|
||||
|
||||
```js
|
||||
const firstBox = document.querySelector('.box');
|
||||
assert.include(firstBox.className.split(' '), 'box1')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
--fcc-editable-region--
|
||||
<div class="box">
|
||||
--fcc-editable-region--
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
```
|
||||
+106
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 68ef96d3fc1b7b4db79e093a
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Going back to the `html` file, add the class `box2` to the second `.box` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the class `box2` to your second `.box` element.
|
||||
|
||||
```js
|
||||
const secondBox = document.querySelectorAll('.box')[1];
|
||||
assert.include(secondBox.className.split(' '), "box2")
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="box">
|
||||
--fcc-editable-region--
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
```
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 68ef9855a1aa425c78b0bc4a
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In your `html` file, add the class `box3` to the third `.box` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the class `box3` to your third `.box` element.
|
||||
|
||||
```js
|
||||
const thirdBox = document.querySelectorAll('.box')[2];
|
||||
assert.include(thirdBox.className.split(' '), "box3")
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="box">
|
||||
--fcc-editable-region--
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: #f4a261;
|
||||
order: 0;
|
||||
}
|
||||
```
|
||||
+116
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 68ef9a0b710ba66dd23ed260
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
Inside the `html` file, add the class `box4` to your fourth `.box` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the class `box4` to your fourth `.box` element.
|
||||
|
||||
```js
|
||||
const fourthBox = document.querySelectorAll('.box')[3];
|
||||
assert.include(fourthBox.className.split(' '), "box4")
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box box3">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="box">
|
||||
--fcc-editable-region--
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: #f4a261;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
background: #ffd166;
|
||||
order: 2;
|
||||
flex-shrink: 3;
|
||||
}
|
||||
```
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 68ef9ac77f6b4176b773e3ac
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the class `box5` to your fifth `.box` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the class `box5` to your fifth `.box` element.
|
||||
|
||||
```js
|
||||
const fifthBox = document.querySelectorAll('.box')[4];
|
||||
assert.include(fifthBox.className.split(' '), 'box5')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box box3">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box box4">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="box">
|
||||
--fcc-editable-region--
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: #f4a261;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
background: #ffd166;
|
||||
order: 2;
|
||||
flex-shrink: 3;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
background: #4caf50;
|
||||
order: 3;
|
||||
}
|
||||
```
|
||||
+127
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 68ef9c7dbdab54899bdf1738
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally add the class `box6` to the last of your `.box` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the class `box6` to your sixth `.box` element.
|
||||
|
||||
```js
|
||||
const sixthBox = document.querySelectorAll('.box')[5];
|
||||
assert.include(sixthBox.className.split(' '), 'box6')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box box3">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box box4">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box box5">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="box">
|
||||
--fcc-editable-region--
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: #f4a261;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
background: #ffd166;
|
||||
order: 2;
|
||||
flex-shrink: 3;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
background: #4caf50;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.box5 {
|
||||
background: #457b9d;
|
||||
order: 4;
|
||||
}
|
||||
```
|
||||
+123
@@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 68f46b758eb8ea7043abd73c
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you are going to organize the boxes inside your flexbox container. First, create a `.box1` selector and add to it the `background` property with the value `#f16e79`.
|
||||
|
||||
Then, add the property `order` with the value `1`. You'll see the first box move to the end. This happens because the `box` class already has an `order` value of `0`, and items with higher order values appear later.
|
||||
|
||||
Also add the `flex-grow` property with a value of `1`. This will make the box grow to fill extra space on its line.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.box1` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.box1'));
|
||||
```
|
||||
|
||||
You `.box1` selector should have the property `background` with the value `#f16e79`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box1')?.getPropVal('background'), 'rgb(241, 110, 121)');
|
||||
```
|
||||
|
||||
Your `.box1` selector should have the property `order` with the value `1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box1')?.getPropVal('order'), '1');
|
||||
```
|
||||
|
||||
Your `.box1` selector should have the property `flex-grow` with the value `1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box1')?.getPropVal('flex-grow'), '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 68f46e53fdfdc18a773282ba
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `styles.css` file, create a `.box2` selector and add the `background` property with the value `#f4a261` to it.
|
||||
|
||||
Also, add the `order` property with a value of `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.box2` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.box2'));
|
||||
```
|
||||
|
||||
Your `.box2` selector should have the property `background` with the value `#f4a261`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box2')?.getPropVal('background'), 'rgb(244, 162, 97)');
|
||||
```
|
||||
|
||||
Your `.box2` selector should have the property `order` with the value `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box2')?.getPropVal('order'), '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+135
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 68f46fcc34da869b1005455d
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now to continue styling your boxes, create a new `.box3` selector and add the `background` property with the value `#ffd166` to it.
|
||||
|
||||
Then, add the `order` property with a value of `2` to your new selector. You'll see this box move after the `.box1` element.
|
||||
|
||||
Also add the `flex-shrink` property with a value of `3`. This means that this box will shrink three times as much as the other boxes when there isn't enough space on its line.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.box3` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.box3'));
|
||||
```
|
||||
|
||||
Your `.box3` selector should have the property `background` with the value `#ffd166`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box3')?.getPropVal('background'), 'rgb(255, 209, 102)');
|
||||
```
|
||||
|
||||
Your `.box3` selector should have the property `order` with the value `2`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box3')?.getPropVal('order'), '2');
|
||||
```
|
||||
|
||||
Your `.box3` selector should have the property `flex-shrink` with the value `3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box3')?.getPropVal('flex-shrink'), '3');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box box3">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: #f4a261;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+133
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 68f47093c85c7da27c7ee5cb
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now create a `.box4` selector and add the `background` property with the value `#4caf50` to it.
|
||||
|
||||
Then add the `order` property with a value of `3` to the `.box4` selector. You'll see this box move after the one with the `box3` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.box4` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.box4'));
|
||||
```
|
||||
|
||||
Your `.box4` selector should have the property `background` with the value `#4caf50`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box4')?.getPropVal('background'), 'rgb(76, 175, 80)');
|
||||
```
|
||||
|
||||
Your `.box4` selector should have the property `order` with the value `3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box4')?.getPropVal('order'), '3');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box box3">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box box4">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: #f4a261;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
background: #ffd166;
|
||||
order: 2;
|
||||
flex-shrink: 3;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 68f471410dbccba9aac8234f
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now create a `.box5` selector and add the `background` property with the value `#457b9d` to it.
|
||||
|
||||
Then add the `order` property with a value of `4` to your new selector. You'll see this box move after the one with the `box4` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.box5` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.box5'));
|
||||
```
|
||||
|
||||
Your `.box5` selector should have the property `background` with the value `#457b9d`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box5')?.getPropVal('background'), 'rgb(69, 123, 157)');
|
||||
```
|
||||
|
||||
Your `.box5` selector should have the property `order` with the value `4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box5')?.getPropVal('order'), '4');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box box3">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box box4">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box box5">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: #f4a261;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
background: #ffd166;
|
||||
order: 2;
|
||||
flex-shrink: 3;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
background: #4caf50;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+263
@@ -0,0 +1,263 @@
|
||||
---
|
||||
id: 68f471d46fa193b002a5bfb8
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.box6` selector and add the `background` property with the value `#3f51b5` to it.
|
||||
|
||||
Then add the `order` property with a value of `5` to your new selector. You'll see the `.box6` element move after the `.box5` element.
|
||||
|
||||
Also, add the `flex-grow` property with a value of `1`. This will make box 6 grow to fill any remaining space in the container.
|
||||
|
||||
With that, the colorful boxes workshop is complete!
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.box6` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.box6'));
|
||||
```
|
||||
|
||||
Your `.box6` selector should have the property `background` with the value `#3f51b5`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box6')?.getPropVal('background'), 'rgb(63, 81, 181)');
|
||||
```
|
||||
|
||||
Your `.box6` selector should have the property `order` with the value `5`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box6')?.getPropVal('order'), '5');
|
||||
```
|
||||
|
||||
Your `.box6` selector should have the property `flex-grow` with the value `1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box6')?.getPropVal('flex-grow'), '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box box3">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box box4">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box box5">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box box6">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: #f4a261;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
background: #ffd166;
|
||||
order: 2;
|
||||
flex-shrink: 3;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
background: #4caf50;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.box5 {
|
||||
background: #457b9d;
|
||||
order: 4;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box box1">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box box3">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box box4">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box box5">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box box6">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 0 0 150px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
height: 400px;
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f16e79;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: #f4a261;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
background: #ffd166;
|
||||
order: 2;
|
||||
flex-shrink: 3;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
background: #4caf50;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.box5 {
|
||||
background: #457b9d;
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.box6 {
|
||||
background: #3f51b5;
|
||||
order: 5;
|
||||
flex-grow: 1;
|
||||
}
|
||||
```
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 68f91df5776e693049fb8942
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to add some CSS rules to the `styles.css` file. Start by creating a selector for the `h1` element.
|
||||
|
||||
Center the content of the `h1` element by setting its `text-align` property to `center`. Also create a `margin-bottom` property with the value `10px` to add margin between the bottom of the `h1` element and any HTML element that goes bellow.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `h1` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||
```
|
||||
|
||||
Your `h1` selector should set the `text-align` property to `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.getPropVal('text-align'), 'center');
|
||||
```
|
||||
|
||||
Your `h1` selector should set the `margin-bottom` property to `10px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.getPropVal('margin-bottom'), '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
---
|
||||
id: 68f92924265e9185f1bb391b
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.flex-container` selector and set the `display` property to the value `flex`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.flex-container` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.flex-container'));
|
||||
```
|
||||
|
||||
You should set the `display` property to the value `flex` within the `.flex-container` selector.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('display'), 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 68f932c803f4d3d9f511b436
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `flex-wrap` property defines whether flex items are forced onto one line or can wrap onto multiple lines.
|
||||
|
||||
By default, flex items have a value of `nowrap`, meaning they stay on a single line even if they overflow the container. The `wrap` value instead makes flex items wrap onto new lines when they don't fit in the container's width, creating a more flexible, responsive layout.
|
||||
|
||||
To continue, add the `flex-wrap` property with the value `wrap` to the `.flex-container` class selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.flex-container` selector should have the property `flex-wrap` with the value `wrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('flex-wrap'), 'wrap');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+103
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 68f9366fb3358401adf0ec79
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you will set the width and height of the `.flex-container` element. To do this, add the `width` property with the value `70%` and the `height` property with the value `600px`.
|
||||
|
||||
Defining `width` and `height` properties will set the amount of width and height the `div` takes form its parent element, in this case the `body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.flex-container` selector should have the property `width` with the value `70%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('width'), '70%');
|
||||
```
|
||||
|
||||
Your `.flex-container` selector should have the property `height` with the value `600px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('height'), '600px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 68f93a8b58cbf330b4ba45c6
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To finish styling the `flex-container` class, add the `padding` property with a value of `10px` and the `margin` property with a value of `20px auto`.
|
||||
|
||||
Remember: `padding` adds space inside the element (between the border and content), while `margin` adds space outside the element (between the border and other elements).
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.flex-container` selector should have the property `padding` with the value `10px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('padding'), '10px');
|
||||
```
|
||||
|
||||
Your `.flex-container` selector should have the property `margin` with the value `20px auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.flex-container')?.getPropVal('margin'), '20px auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
height: 600px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 692f22933ba1cb86cd75a70c
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it's time to create the color name for the boxes. To do this, add a `p` element below each `h2` element with these color names in order: `Red`, `Orange`, `Yellow`, `Green`, `Blue`, and `Indigo`. One color for each box.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `p` element with the text `Red` below the `h2` element inside the first `.box` element.
|
||||
|
||||
```js
|
||||
const heading = document.querySelectorAll("div.box > h2 + p")[0];
|
||||
assert.equal(heading.textContent, "Red");
|
||||
```
|
||||
|
||||
You should add a `p` element with the text `Orange` below the `h2` element inside the second `.box` element.
|
||||
|
||||
```js
|
||||
const heading = document.querySelectorAll("div.box > h2 + p")[1];
|
||||
assert.equal(heading.textContent, "Orange");
|
||||
```
|
||||
|
||||
You should add a `p` element with the text `Yellow` below the `h2` element inside the third `.box` element.
|
||||
|
||||
```js
|
||||
const heading = document.querySelectorAll("div.box > h2 + p")[2];
|
||||
assert.equal(heading.textContent, "Yellow");
|
||||
```
|
||||
|
||||
You should add a `p` element with the text `Green` below the `h2` element inside the fourth `.box` element.
|
||||
|
||||
```js
|
||||
const heading = document.querySelectorAll("div.box > h2 + p")[3];
|
||||
assert.equal(heading.textContent, "Green");
|
||||
```
|
||||
|
||||
You should add a `p` element with the text `Blue` below the `h2` element inside the fifth `.box` element.
|
||||
|
||||
```js
|
||||
const heading = document.querySelectorAll("div.box > h2 + p")[4];
|
||||
assert.equal(heading.textContent, "Blue");
|
||||
```
|
||||
|
||||
You should add a `p` element with the text `Indigo` below the `h2` element inside the sixth `.box` element.
|
||||
|
||||
```js
|
||||
const heading = document.querySelectorAll("div.box > h2 + p")[5];
|
||||
assert.equal(heading.textContent, "Indigo");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
--fcc-editable-region--
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
```
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 692f22a2ad44ae887a24c8f9
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside each `.box` element, add an `h2` element with the text `Box` followed by a space and a sequential number starting from `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `h2` element with the text `Box 1` inside the first `div` with the class `box`.
|
||||
|
||||
```js
|
||||
const firstH2El = document.querySelector("div.box:nth-of-type(1) > h2");
|
||||
assert.equal(firstH2El.textContent, "Box 1");
|
||||
```
|
||||
|
||||
You should have an `h2` element with the text `Box 2` inside the second `div` with the class `box`.
|
||||
|
||||
```js
|
||||
const secondH2El = document.querySelector("div.box:nth-of-type(2) > h2");
|
||||
assert.equal(secondH2El.textContent, "Box 2");
|
||||
```
|
||||
|
||||
You should have an `h2` element with the text `Box 3` inside the third `div` with the class `box`.
|
||||
|
||||
```js
|
||||
const thirdH2El = document.querySelector("div.box:nth-of-type(3) > h2");
|
||||
assert.equal(thirdH2El.textContent, "Box 3");
|
||||
```
|
||||
|
||||
You should have an `h2` element with the text `Box 4` inside the fourth `div` with the class `box`.
|
||||
|
||||
```js
|
||||
const fourthH2El = document.querySelector("div.box:nth-of-type(4) > h2");
|
||||
assert.equal(fourthH2El.textContent, "Box 4");
|
||||
```
|
||||
|
||||
You should have an `h2` element with the text `Box 5` inside the fifth `div` with the class `box`.
|
||||
|
||||
```js
|
||||
const fifthH2El = document.querySelector("div.box:nth-of-type(5) > h2");
|
||||
assert.equal(fifthH2El.textContent, "Box 5");
|
||||
```
|
||||
|
||||
You should have an `h2` element with the text `Box 6` inside the last `div` with the class `box`.
|
||||
|
||||
```js
|
||||
const sixthH2El = document.querySelector("div.box:nth-of-type(6) > h2");
|
||||
assert.equal(sixthH2El.textContent, "Box 6");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
--fcc-editable-region--
|
||||
<div class="box">
|
||||
|
||||
</div>
|
||||
<div class="box">
|
||||
|
||||
</div>
|
||||
<div class="box">
|
||||
|
||||
</div>
|
||||
<div class="box">
|
||||
|
||||
</div>
|
||||
<div class="box">
|
||||
|
||||
</div>
|
||||
<div class="box">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
```
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 692f2b9f2b9aa9458f6fdc97
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you are going to style the `div` elements with the class `box`. First create a `.box` class selector and add the property `max-height` with the value `120px` to the `box` class selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `max-height` with a value `120px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('max-height'), '120px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 692f2bd6b0a43a4a2254ca5d
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Still inside the `.box` selector, add the property `color` with the value `#000`. This is going to make all text of `.box` elements to have the `#000` color.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `color` with the value `#000`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('color'), 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 692f2c20cb7f9e5050b935a7
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the property `border` with the value `1px solid #000` to the `.box` selector. The `border` property is used to create a visible outline around an element. It can be customized in terms of `border-width`, `border-style`, and `border-color`.
|
||||
|
||||
In this case ,`1px` is `border-width`, which defines the thickness of the border. `solid` is `border-style` and sets the appearance of the border (solid, dashed, dotted and so on). And `#000` is `border-color`, which defines the color of the border.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `border` with the value `1px solid #000`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('border'), '1px solid rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 692f2c8ea9aa5a593758ccff
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `display` property controls how an element is rendered on the page. When you define it with the `flex` value, this enables flexbox layout mode, which gives you control to arrange and align the items inside the container.
|
||||
|
||||
Now add the property `display` with the value `flex` to the `.box` selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `display` with the value `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('display'), 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 692f2d37f34ed866ed42fcd6
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `flex-direction` property controls how flex items are arranged within their container. The default value is `row`, which arranges items horizontally from left to right. This property only works on elements with `display: flex` or `display: inline-flex`.
|
||||
|
||||
With the `column` value, items stack vertically from top to bottom. Other possible values are `row`, `row-reverse` and `column-reverse`.
|
||||
|
||||
Now add the `flex-direction` property with the value `column` to the `.box` selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `flex-direction` with the value `column`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('flex-direction'), 'column');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 692f3001c9fc019f006f6b4e
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `align-items` property aligns flex items along the cross axis (perpendicular to the main axis).
|
||||
|
||||
Now add the `align-items` property with the value `center` to the `.box` selector. Since the `box` class has `flex-direction: column`, the cross axis is horizontal, so `center` will center items horizontally within the box.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `align-items` with the value `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('align-items'), 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 692f3041ad7ae9a47a49aa61
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now add the property `margin` with the value `10px` to the `.box` selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `margin` with the value `10px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('margin'), '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 692f30b1f1d2acadb3025de7
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `font-weight` property controls font thickness.
|
||||
|
||||
Now add the `font-weight` property with a value `bold` to the `.box` selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `font-weight` with the value `bold`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('font-weight'), 'bold');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 692f30e86027a4b253d0a42d
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the property `font-size` with the value `1.125rem` to the `.box` selector.
|
||||
|
||||
The `font-size` property specifies the size of the text. It can be set using different units like pixels, em, rem, percentages, and so on, making it flexible for responsive designs.
|
||||
|
||||
In this case, the value uses `rem` units, which are relative to the root `html` element, not the parent element. This means the font size stays consistent and isn't affected by parent element sizes, making it more predictable for layouts.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `font-size` with the value `1.125rem`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('font-size'), '1.125rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 692f314d449329ba8bcd5d2e
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `border-radius` property rounds the corners of an element's border. You can specify:
|
||||
|
||||
- One value to apply to all four corners.
|
||||
- Two values, with the first value for top-left/bottom-right, and second for top-right/bottom-left.
|
||||
- Three values, corresponding to top-left, top-right/bottom-left, bottom-right.
|
||||
- Four values, which set the border radius clockwise starting from from top-left corner.
|
||||
|
||||
Now add the property `border-radius` with the value `5px` to the `.box` selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `border-radius` with the value `5px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('border-radius'), '5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 692f318859d5e4bf8fd77ba1
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `order` property specifies the order of a flex item relative to other flex items inside the same container. By default, all flex items have an `order` value of `0`, meaning they appear in the order they're written in the HTML. Items with lower `order` values appear first, while items with higher values appear last.
|
||||
|
||||
Add the property `order` with the value `0` to the `.box` selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have the property `order` with the value `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('order'), '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 5px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 694afa3fcd55df0cbc49a3cf
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now link your `styles.css` file to the HTML document.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `link` element inside the `head` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > link'));
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` attribute.
|
||||
|
||||
```js
|
||||
const linkEl = document.querySelector('head > link');
|
||||
assert.exists(linkEl?.getAttribute('rel'));
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` attribute set to `stylesheet`.
|
||||
|
||||
```js
|
||||
const linkEl = document.querySelector('head > link');
|
||||
assert.equal(linkEl?.getAttribute('rel'), 'stylesheet');
|
||||
```
|
||||
|
||||
Your `link` element should have an `href` attribute set to `styles.css`.
|
||||
|
||||
```js
|
||||
const linkHrefValue = document.querySelector('head > link')?.dataset?.href;
|
||||
assert.match(linkHrefValue, /^(\.\/)?styles\.css$/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 694b46a414bb2f5079868ed1
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `flex` property controls the size and behavior of the items inside a flexible container. It is composed by three properties: `flex-grow`, `flex-shrink`, and `flex-basis`.
|
||||
|
||||
Now add the `flex` property with the value `1 1 100px` to the `.box` selector. This will make each box start at `100px`, allowing them to grow to fill available space, or shrink when needed.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.box` selector should have a property `flex` with the value `1 1 100px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.box')?.getPropVal('flex'), '1 1 100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Colored Boxes</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colored Boxes Layout</h1>
|
||||
</header>
|
||||
<div class="flex-container">
|
||||
<div class="box">
|
||||
<h2>Box 1</h2>
|
||||
<p>Red</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 2</h2>
|
||||
<p>Orange</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 3</h2>
|
||||
<p>Yellow</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 4</h2>
|
||||
<p>Green</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 5</h2>
|
||||
<p>Blue</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Box 6</h2>
|
||||
<p>Indigo</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 120px;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "Design a Set of Colorful Boxes",
|
||||
"isUpcomingChange": false,
|
||||
"dashedName": "workshop-colorful-boxes",
|
||||
"helpCategory": "HTML-CSS",
|
||||
"blockLayout": "challenge-grid",
|
||||
"challengeOrder": [
|
||||
{ "id": "68ed661e9f463c155bb677a1", "title": "Step 1" },
|
||||
{ "id": "694afa3fcd55df0cbc49a3cf", "title": "Step 2" },
|
||||
{ "id": "68f91df5776e693049fb8942", "title": "Step 3" },
|
||||
{ "id": "68ef0b3237fef991c92d9c19", "title": "Step 4" },
|
||||
{ "id": "692f22a2ad44ae887a24c8f9", "title": "Step 5" },
|
||||
{ "id": "692f22933ba1cb86cd75a70c", "title": "Step 6" },
|
||||
{ "id": "692f2b9f2b9aa9458f6fdc97", "title": "Step 7" },
|
||||
{ "id": "692f2bd6b0a43a4a2254ca5d", "title": "Step 8" },
|
||||
{ "id": "692f2c20cb7f9e5050b935a7", "title": "Step 9" },
|
||||
{ "id": "692f2c8ea9aa5a593758ccff", "title": "Step 10" },
|
||||
{ "id": "694b46a414bb2f5079868ed1", "title": "Step 11" },
|
||||
{ "id": "692f2d37f34ed866ed42fcd6", "title": "Step 12" },
|
||||
{ "id": "692f3001c9fc019f006f6b4e", "title": "Step 13" },
|
||||
{ "id": "692f3041ad7ae9a47a49aa61", "title": "Step 14" },
|
||||
{ "id": "692f30b1f1d2acadb3025de7", "title": "Step 15" },
|
||||
{ "id": "692f30e86027a4b253d0a42d", "title": "Step 16" },
|
||||
{ "id": "692f314d449329ba8bcd5d2e", "title": "Step 17" },
|
||||
{ "id": "692f318859d5e4bf8fd77ba1", "title": "Step 18" },
|
||||
{ "id": "68f92924265e9185f1bb391b", "title": "Step 19" },
|
||||
{ "id": "68f932c803f4d3d9f511b436", "title": "Step 20" },
|
||||
{ "id": "68f9366fb3358401adf0ec79", "title": "Step 21" },
|
||||
{ "id": "68f93a8b58cbf330b4ba45c6", "title": "Step 22" },
|
||||
{ "id": "68ef0d6d156f86a6ac1824c6", "title": "Step 23" },
|
||||
{ "id": "68ef134c17c96be0af5de613", "title": "Step 24" },
|
||||
{ "id": "68ef16591f684df7c1d702e1", "title": "Step 25" },
|
||||
{ "id": "68ef1750c8ca08009f518b61", "title": "Step 26" },
|
||||
{ "id": "68ef1835b7772808b7185d11", "title": "Step 27" },
|
||||
{ "id": "68ef18bf52e0620eb8ae2694", "title": "Step 28" },
|
||||
{ "id": "68ef1b1c657f1b2396d98592", "title": "Step 29" },
|
||||
{ "id": "68ef1eda8fdbe33f87cfc71d", "title": "Step 30" },
|
||||
{ "id": "68ef2080ba680d4c8c0213aa", "title": "Step 31" },
|
||||
{ "id": "68ef216359687854fa2f3081", "title": "Step 32" },
|
||||
{ "id": "68f46b758eb8ea7043abd73c", "title": "Step 33" },
|
||||
{ "id": "68ef96d3fc1b7b4db79e093a", "title": "Step 34" },
|
||||
{ "id": "68f46e53fdfdc18a773282ba", "title": "Step 35" },
|
||||
{ "id": "68ef9855a1aa425c78b0bc4a", "title": "Step 36" },
|
||||
{ "id": "68f46fcc34da869b1005455d", "title": "Step 37" },
|
||||
{ "id": "68ef9a0b710ba66dd23ed260", "title": "Step 38" },
|
||||
{ "id": "68f47093c85c7da27c7ee5cb", "title": "Step 39" },
|
||||
{ "id": "68ef9ac77f6b4176b773e3ac", "title": "Step 40" },
|
||||
{ "id": "68f471410dbccba9aac8234f", "title": "Step 41" },
|
||||
{ "id": "68ef9c7dbdab54899bdf1738", "title": "Step 42" },
|
||||
{ "id": "68f471d46fa193b002a5bfb8", "title": "Step 43" }
|
||||
],
|
||||
"blockLabel": "workshop",
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true
|
||||
}
|
||||
@@ -190,6 +190,7 @@
|
||||
"blocks": [
|
||||
"lecture-working-with-css-flexbox",
|
||||
"workshop-flexbox-photo-gallery",
|
||||
"workshop-colorful-boxes",
|
||||
"lab-pricing-plans-layout",
|
||||
"review-css-flexbox",
|
||||
"quiz-css-flexbox"
|
||||
|
||||
Reference in New Issue
Block a user