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

chore(curriculum): Remove files in wrong format

Browse Source
This commit is contained in:
Bouncey
2018-10-04 14:37:37 +01:00
committed by Stuart Taylor
parent 61222b1fb6
commit 8f39bc1288
2947 changed files with 118541 additions and 212907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.english.md Normal file
View File

@ -0,0 +1,152 @@
---
id: 587d78ab367417b2b2512af1
title: Add Flex Superpowers to the Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM'
---
## Description
<section id='description'>
To the right is the tweet embed that will be used as the practical example. Some of the elements would look better with a different layout. The last challenge demonstrated <code>display: flex</code>. Here you'll add it to several components in the tweet embed to start adjusting their positioning.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>display: flex</code> to all of the following items - note that the selectors are already set up in the CSS:
<code>header</code>, the header's <code>.profile-name</code>, the header's <code>.follow-btn</code>, the header's <code>h3</code> and <code>h4</code>, the <code>footer</code>, and the footer's <code>.stats</code>.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: Your <code>header</code> should have a <code>display</code> property set to flex.
testString: 'assert($(''header'').css(''display'') == ''flex'', ''Your <code>header</code> should have a <code>display</code> property set to flex.'');'
- text: Your <code>footer</code> should have a <code>display</code> property set to flex.
testString: 'assert($(''footer'').css(''display'') == ''flex'', ''Your <code>footer</code> should have a <code>display</code> property set to flex.'');'
- text: Your <code>h3</code> should have a <code>display</code> property set to flex.
testString: 'assert($(''h3'').css(''display'') == ''flex'', ''Your <code>h3</code> should have a <code>display</code> property set to flex.'');'
- text: Your <code>h4</code> should have a <code>display</code> property set to flex.
testString: 'assert($(''h4'').css(''display'') == ''flex'', ''Your <code>h4</code> should have a <code>display</code> property set to flex.'');'
- text: Your <code>.profile-name</code> should have a <code>display</code> property set to flex.
testString: 'assert($(''.profile-name'').css(''display'') == ''flex'', ''Your <code>.profile-name</code> should have a <code>display</code> property set to flex.'');'
- text: Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.
testString: 'assert($(''.follow-btn'').css(''display'') == ''flex'', ''Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.'');'
- text: Your <code>.stats</code> should have a <code>display</code> property set to flex.
testString: 'assert($(''.stats'').css(''display'') == ''flex'', ''Your <code>.stats</code> should have a <code>display</code> property set to flex.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
body {
font-family: Arial, sans-serif;
}
header {
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
margin-left: 10px;
}
header .follow-btn {
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer {
}
footer .stats {
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
</style>
<header>
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
</div>
<div class="follow-btn">
<button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
<button class="retweet-btn">Retweet</button>
<button class="like-btn">Like</button>
</div>
</footer>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

79
curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md Normal file
View File

@ -0,0 +1,79 @@
---
id: 587d78ad367417b2b2512af8
title: Align Elements Using the align-items Property
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk'
---
## Description
<section id='description'>
The <code>align-items</code> property is similar to <code>justify-content</code>. Recall that the <code>justify-content</code> property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.
Flex containers also have a <strong>cross axis</strong> which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.
CSS offers the <code>align-items</code> property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.
The different values available for <code>align-items</code> include:
<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.</li><li><code>center</code>: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).</li><li><code>stretch</code>: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom.</li><li><code>baseline</code>: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.</li></ul>
</section>
## Instructions
<section id='instructions'>
An example helps show this property in action. Add the CSS property <code>align-items</code> to the <code>#box-container</code> element, and give it a value of center.
<strong>Bonus</strong><br>Try the other options for the <code>align-items</code> property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.'
testString: 'assert($(''#box-container'').css(''align-items'') == ''center'', ''The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
background: gray;
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
width: 200px;
font-size: 24px;
}
#box-2 {
background-color: orangered;
width: 200px;
font-size: 18px;
}
</style>
<div id="box-container">
<div id="box-1"><p>Hello</p></div>
<div id="box-2"><p>Goodbye</p></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

79
curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.english.md Normal file
View File

@ -0,0 +1,79 @@
---
id: 587d78ac367417b2b2512af6
title: Align Elements Using the justify-content Property
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
---
## Description
<section id='description'>
Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the <code>justify-content</code> property has several options to do this. But first, there is some important terminology to understand before reviewing those options.
<a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Here is a useful image showing a row to illustrate the concepts below.</a>
Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the <strong>main axis</strong>. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items.
There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is <code>justify-content: center;</code>, which aligns all the flex items to the center inside the flex container. Others options include:
<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.</li><li><code>space-between</code>: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the other items between them are spaced evenly.</li><li><code>space-around</code>: similar to <code>space-between</code> but the first and last items are not locked to the edges of the container, the space is distributed around all the items</li></ul>
</section>
## Instructions
<section id='instructions'>
An example helps show this property in action. Add the CSS property <code>justify-content</code> to the <code>#box-container</code> element, and give it a value of center.
<strong>Bonus</strong><br>Try the other options for the <code>justify-content</code> property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.'
testString: 'assert($(''#box-container'').css(''justify-content'') == ''center'', ''The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
background: gray;
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
width: 25%;
height: 100%;
}
#box-2 {
background-color: orangered;
width: 25%;
height: 100%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

138
curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.english.md Normal file
View File

@ -0,0 +1,138 @@
---
id: 587d78ac367417b2b2512af5
title: Apply the flex-direction Property to Create a Column in the Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9'
---
## Description
<section id='description'>
The tweet embed <code>header</code> and <code>footer</code> used the <code>flex-direction</code> property earlier with a row value. Similarly, the items inside the <code>.profile-name</code> element would work well stacked as a column.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>flex-direction</code> to the header's <code>.profile-name</code> element and set the value to column.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.
testString: 'assert($(''.profile-name'').css(''flex-direction'') == ''column'', ''The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
display: flex;
flex-direction: row;
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
margin-left: 10px;
}
header .follow-btn {
display: flex;
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
</style>
<header>
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
</div>
<div class="follow-btn">
<button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
<button class="retweet-btn">Retweet</button>
<button class="like-btn">Like</button>
</div>
</footer>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

145
curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.english.md Normal file
View File

@ -0,0 +1,145 @@
---
id: 587d78ab367417b2b2512af3
title: Apply the flex-direction Property to Create Rows in the Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
---
## Description
<section id='description'>
The <code>header</code> and <code>footer</code> in the tweet embed example have child items that could be arranged as rows using the <code>flex-direction</code> property. This tells CSS to align the children horizontally.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>flex-direction</code> to both the <code>header</code> and <code>footer</code> and set the value to row.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: The <code>header</code> should have a <code>flex-direction</code> property set to row.
testString: 'assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g), ''The <code>header</code> should have a <code>flex-direction</code> property set to row.'');'
- text: The <code>footer</code> should have a <code>flex-direction</code> property set to row.
testString: 'assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g), ''The <code>footer</code> should have a <code>flex-direction</code> property set to row.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
body {
font-family: Arial, sans-serif;
}
header {
display: flex;
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
margin-left: 10px;
}
header .follow-btn {
display: flex;
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer {
display: flex;
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
</style>
<header>
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
</div>
<div class="follow-btn">
<button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
<button class="retweet-btn">Retweet</button>
<button class="like-btn">Like</button>
</div>
</footer>
```
</div>
</section>
## Solution
<section id='solution'>
```js
var code = "header {flex-direction: row;} footer {flex-direction: row;}"
```
</section>

82
curriculum/challenges/english/01-responsive-web-design/css-flexbox/meta.json Normal file
View File

@ -0,0 +1,82 @@
{
"name": "CSS Flexbox",
"dashedName": "css-flexbox",
"order": 5,
"time": "5 hours",
"template": "",
"required": [],
"superBlock": "responsive-web-design",
"superOrder": 1,
"challengeOrder": [
[
"587d78ab367417b2b2512af0",
"Use display: flex to Position Two Boxes"
],
[
"587d78ab367417b2b2512af1",
"Add Flex Superpowers to the Tweet Embed"
],
[
"587d78ab367417b2b2512af2",
"Use the flex-direction Property to Make a Row"
],
[
"587d78ab367417b2b2512af3",
"Apply the flex-direction Property to Create Rows in the Tweet Embed"
],
[
"587d78ac367417b2b2512af4",
"Use the flex-direction Property to Make a Column"
],
[
"587d78ac367417b2b2512af5",
"Apply the flex-direction Property to Create a Column in the Tweet Embed"
],
[
"587d78ac367417b2b2512af6",
"Align Elements Using the justify-content Property"
],
[
"587d78ac367417b2b2512af7",
"Use the justify-content Property in the Tweet Embed"
],
[
"587d78ad367417b2b2512af8",
"Align Elements Using the align-items Property"
],
[
"587d78ad367417b2b2512af9",
"Use the align-items Property in the Tweet Embed"
],
[
"587d78ad367417b2b2512afa",
"Use the flex-wrap Property to Wrap a Row or Column"
],
[
"587d78ad367417b2b2512afb",
"Use the flex-shrink Property to Shrink Items"
],
[
"587d78ae367417b2b2512afc",
"Use the flex-grow Property to Expand Items"
],
[
"587d78ae367417b2b2512afd",
"Use the flex-basis Property to Set the Initial Size of an Item"
],
[
"587d78ae367417b2b2512afe",
"Use the flex Shorthand Property"
],
[
"587d78ae367417b2b2512aff",
"Use the order Property to Rearrange Items"
],
[
"587d78af367417b2b2512b00",
"Use the align-self Property"
]
],
"helpRoom": "Help",
"fileName": "01-responsive-web-design/css-flexbox.json"
}

75
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.english.md Normal file
View File

@ -0,0 +1,75 @@
---
id: 587d78ab367417b2b2512af0
title: 'Use display: flex to Position Two Boxes'
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
---
## Description
<section id='description'>
This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.
Placing the CSS property <code>display: flex;</code> on an element allows you to use other flex properties to build a responsive page.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>display</code> to <code>#box-container</code> and set its value to flex.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: '<code>#box-container</code> should have the <code>display</code> property set to a value of flex.'
testString: 'assert($(''#box-container'').css(''display'') == ''flex'', ''<code>#box-container</code> should have the <code>display</code> property set to a value of flex.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
height: 500px;
}
#box-1 {
background-color: dodgerblue;
width: 50%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 50%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

141
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md Normal file
View File

@ -0,0 +1,141 @@
---
id: 587d78ad367417b2b2512af9
title: Use the align-items Property in the Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq'
---
## Description
<section id='description'>
The last challenge introduced the <code>align-items</code> property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>align-items</code> to the header's <code>.follow-btn</code> element. Set the value to center.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.
testString: 'assert($(''.follow-btn'').css(''align-items'') == ''center'', ''The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
display: flex;
flex-direction: row;
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
}
header .follow-btn {
display: flex;
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
</style>
<header>
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
</div>
<div class="follow-btn">
<button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
<button class="retweet-btn">Retweet</button>
<button class="like-btn">Like</button>
</div>
</footer>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

77
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.english.md Normal file
View File

@ -0,0 +1,77 @@
---
id: 587d78af367417b2b2512b00
title: Use the align-self Property
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv'
---
## Description
<section id='description'>
The final property for flex items is <code>align-self</code>. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties <code>float</code>, <code>clear</code>, and <code>vertical-align</code> do not work on flex items.
<code>align-self</code> accepts the same values as <code>align-items</code> and will override any value set by the <code>align-items</code> property.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>align-self</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of center and give <code>#box-2</code> a value of flex-end.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.'
testString: 'assert($(''#box-1'').css(''align-self'') == ''center'', ''The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.'');'
- text: 'The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.'
testString: 'assert($(''#box-2'').css(''align-self'') == ''flex-end'', ''The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
width: 200px;
}
#box-2 {
background-color: orangered;
height: 200px;
width: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

80
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.english.md Normal file
View File

@ -0,0 +1,80 @@
---
id: 587d78ae367417b2b2512afd
title: Use the flex-basis Property to Set the Initial Size of an Item
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa'
---
## Description
<section id='description'>
The <code>flex-basis</code> property specifies the initial size of the item before CSS makes adjustments with <code>flex-shrink</code> or <code>flex-grow</code>.
The units used by the <code>flex-basis</code> property are the same as other size properties (<code>px</code>, <code>em</code>, <code>%</code>, etc.). The value <code>auto</code> sizes items based on the content.
</section>
## Instructions
<section id='instructions'>
Set the initial size of the boxes using <code>flex-basis</code>. Add the CSS property <code>flex-basis</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of <code>10em</code> and <code>#box-2</code> a value of <code>20em</code>.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-1</code> element should have a <code>flex-basis</code> property.'
testString: 'assert($(''#box-1'').css(''flex-basis'') != ''auto'', ''The <code>#box-1</code> element should have a <code>flex-basis</code> property.'');'
- text: 'The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.'
testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), ''The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.'');'
- text: 'The <code>#box-2</code> element should have the <code>flex-basis</code> property.'
testString: 'assert($(''#box-2'').css(''flex-basis'') != ''auto'', ''The <code>#box-2</code> element should have the <code>flex-basis</code> property.'');'
- text: 'The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.'
testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), ''The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
}
#box-2 {
background-color: orangered;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

73
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md Normal file
View File

@ -0,0 +1,73 @@
---
id: 587d78ac367417b2b2512af4
title: Use the flex-direction Property to Make a Column
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
---
## Description
<section id='description'>
The last two challenges used the <code>flex-direction</code> property set to row. This property can also create a column by vertically stacking the children of a flex container.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of column.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.'
testString: 'assert($(''#box-container'').css(''flex-direction'') == ''column'', ''The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
width: 50%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 50%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

75
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md Normal file
View File

@ -0,0 +1,75 @@
---
id: 587d78ab367417b2b2512af2
title: Use the flex-direction Property to Make a Row
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
---
## Description
<section id='description'>
Adding <code>display: flex</code> to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the <code>flex-direction</code> property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.
Other options for <code>flex-direction</code> are row-reverse and column-reverse.
<strong>Note</strong><br>The default value for the <code>flex-direction</code> property is row.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of row-reverse.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.'
testString: 'assert($(''#box-container'').css(''flex-direction'') == ''row-reverse'', ''The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
width: 50%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 50%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

76
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.english.md Normal file
View File

@ -0,0 +1,76 @@
---
id: 587d78ae367417b2b2512afc
title: Use the flex-grow Property to Expand Items
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
---
## Description
<section id='description'>
The opposite of <code>flex-shrink</code> is the <code>flex-grow</code> property. Recall that <code>flex-shrink</code> controls the size of the items when the container shrinks. The <code>flex-grow</code> property controls the size of items when the parent container expands.
Using a similar example from the last challenge, if one item has a <code>flex-grow</code> value of 1 and the other has a <code>flex-grow</code> value of 3, the one with the value of 3 will grow three times as much as the other.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>flex-grow</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 1 and <code>#box-2</code> a value of 2.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.'
testString: 'assert($(''#box-1'').css(''flex-grow'') == ''1'', ''The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.'');'
- text: 'The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.'
testString: 'assert($(''#box-2'').css(''flex-grow'') == ''2'', ''The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
}
#box-2 {
background-color: orangered;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

79
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.english.md Normal file
View File

@ -0,0 +1,79 @@
---
id: 587d78ae367417b2b2512afe
title: Use the flex Shorthand Property
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE'
---
## Description
<section id='description'>
There is a shortcut available to set several flex properties at once. The <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties can all be set together by using the <code>flex</code> property.
For example, <code>flex: 1 0 10px;</code> will set the item to <code>flex-grow: 1;</code>, <code>flex-shrink: 0;</code>, and <code>flex-basis: 10px;</code>.
The default property settings are <code>flex: 0 1 auto;</code>.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>flex</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> the values so its <code>flex-grow</code> is 2, its <code>flex-shrink</code> is 2, and its <code>flex-basis</code> is 150px. Give <code>#box-2</code> the values so its <code>flex-grow</code> is 1, its <code>flex-shrink</code> is 1, and its <code>flex-basis</code> is 150px.
These values will cause <code>#box-1</code> to grow to fill the extra space at twice the rate of <code>#box-2</code> when the container is greater than 300px and shrink at twice the rate of <code>#box-2</code> when the container is less than 300px. 300px is the combined size of the <code>flex-basis</code> values of the two boxes.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.'
testString: 'assert($(''#box-1'').css(''flex-grow'') == ''2'' && $(''#box-1'').css(''flex-shrink'') == ''2'' && $(''#box-1'').css(''flex-basis'') == ''150px'', ''The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.'');'
- text: 'The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.'
testString: 'assert($(''#box-2'').css(''flex-grow'') == ''1'' && $(''#box-2'').css(''flex-shrink'') == ''1'' && $(''#box-2'').css(''flex-basis'') == ''150px'', ''The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.'');'
- text: 'Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.'
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, ''Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
}
#box-2 {
background-color: orangered;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

78
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.english.md Normal file
View File

@ -0,0 +1,78 @@
---
id: 587d78ad367417b2b2512afb
title: Use the flex-shrink Property to Shrink Items
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
---
## Description
<section id='description'>
So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.
The first is the <code>flex-shrink</code> property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.
The <code>flex-shrink</code> property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a <code>flex-shrink</code> value of 1 and the other has a <code>flex-shrink</code> value of 3, the one with the value of 3 will shrink three times as much as the other.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>flex-shrink</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 1 and <code>#box-2</code> a value of 2.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.'
testString: 'assert($(''#box-1'').css(''flex-shrink'') == ''1'', ''The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.'');'
- text: 'The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.'
testString: 'assert($(''#box-2'').css(''flex-shrink'') == ''2'', ''The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
width: 100%;
height: 200px;
}
#box-2 {
background-color: orangered;
width: 100%;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

101
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md Normal file
View File

@ -0,0 +1,101 @@
---
id: 587d78ad367417b2b2512afa
title: Use the flex-wrap Property to Wrap a Row or Column
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
---
## Description
<section id='description'>
CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.
However, using the <code>flex-wrap</code> property, it tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.
CSS also has options for the direction of the wrap:
<ul><li><code>nowrap</code>: this is the default setting, and does not wrap items.</li><li><code>wrap</code>: wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.</li><li><code>wrap-reverse</code>: wraps items from bottom-to-top if they are in a row, or right-to-left if they are in a column.</li></ul>
</section>
## Instructions
<section id='instructions'>
The current layout has too many boxes for one row. Add the CSS property <code>flex-wrap</code> to the <code>#box-container</code> element, and give it a value of wrap.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.'
testString: 'assert($(''#box-container'').css(''flex-wrap'') == ''wrap'', ''The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
background: gray;
display: flex;
height: 100%;
}
#box-1 {
background-color: dodgerblue;
width: 25%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 25%;
height: 50%;
}
#box-3 {
background-color: violet;
width: 25%;
height: 50%;
}
#box-4 {
background-color: yellow;
width: 25%;
height: 50%;
}
#box-5 {
background-color: green;
width: 25%;
height: 50%;
}
#box-6 {
background-color: black;
width: 25%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
<div id="box-6"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

141
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.english.md Normal file
View File

@ -0,0 +1,141 @@
---
id: 587d78ac367417b2b2512af7
title: Use the justify-content Property in the Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa'
---
## Description
<section id='description'>
The last challenge showed an example of the <code>justify-content</code> property. For the tweet embed, this property can be applied to align the items in the <code>.profile-name</code> element.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>justify-content</code> to the header's <code>.profile-name</code> element and set the value to any of the options from the last challenge.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.'
testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around)\s*;/g), ''The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
display: flex;
flex-direction: row;
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
flex-direction: column;
margin-left: 10px;
}
header .follow-btn {
display: flex;
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
</style>
<header>
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>@ossia</h4>
</div>
<div class="follow-btn">
<button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
<button class="retweet-btn">Retweet</button>
<button class="like-btn">Like</button>
</div>
</footer>
```
</div>
</section>
## Solution
<section id='solution'>
```js
var code = "header .profile-name {display: flex; flex-direction: column; justify-content: center; margin-left: 10px;}"
```
</section>

76
curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.english.md Normal file
View File

@ -0,0 +1,76 @@
---
id: 587d78ae367417b2b2512aff
title: Use the order Property to Rearrange Items
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
---
## Description
<section id='description'>
The <code>order</code> property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.
</section>
## Instructions
<section id='instructions'>
Add the CSS property <code>order</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 2 and give <code>#box-2</code> a value of 1.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.'
testString: 'assert($(''#box-1'').css(''order'') == ''2'', ''The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.'');'
- text: 'The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.'
testString: 'assert($(''#box-2'').css(''order'') == ''1'', ''The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.'');'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
width: 200px;
}
#box-2 {
background-color: orangered;
height: 200px;
width: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>