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

fix: Wrap codes with <code> tags in css-flexbox challenge. (#38025)

Browse Source
This commit is contained in:
TAKAHASHI Shuuji
2020-01-08 21:18:48 +09:00
committed by Ahmad Abdolsaheb
parent a70e15c0a7
commit e65c47c6ba
11 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,19 +22,19 @@ Add the CSS property <code>display: flex</code> to all of the following items -
```yml
tests:
- text: Your <code>header</code> should have a <code>display</code> property set to flex.
- text: Your <code>header</code> should have a <code>display</code> property set to <code>flex</code>.
testString: assert($('header').css('display') == 'flex');
- text: Your <code>footer</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 <code>flex</code>.
testString: assert($('footer').css('display') == 'flex');
- text: Your <code>h3</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 <code>flex</code>.
testString: assert($('h3').css('display') == 'flex');
- text: Your <code>h4</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 <code>flex</code>.
testString: assert($('h4').css('display') == 'flex');
- text: Your <code>.profile-name</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 <code>flex</code>.
testString: assert($('.profile-name').css('display') == 'flex');
- text: Your <code>.follow-btn</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 <code>flex</code>.
testString: assert($('.follow-btn').css('display') == 'flex');
- text: Your <code>.stats</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 <code>flex</code>.
testString: assert($('.stats').css('display') == 'flex');
```

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

@ -17,8 +17,8 @@ The different values available for <code>align-items</code> include:
## 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.
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 <code>center</code>.
<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 <code>center</code> is the only one that will pass this challenge.
</section>
## Tests
@ -26,7 +26,7 @@ An example helps show this property in action. Add the CSS property <code>align-
```yml
tests:
- text: The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.
- text: The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of <code>center</code>.
testString: assert($('#box-container').css('align-items') == 'center');
```

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

@ -18,8 +18,8 @@ There are several options for how to space the flex items along the line that is
## 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.
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 <code>center</code>.
<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 <code>center</code> is the only one that will pass this challenge.
</section>
## Tests
@ -27,7 +27,7 @@ An example helps show this property in action. Add the CSS property <code>justif
```yml
tests:
- text: The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.
- text: The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of <code>center</code>.
testString: assert($('#box-container').css('justify-content') == 'center');
```

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

@ -14,7 +14,7 @@ Placing the CSS property <code>display: flex;</code> on an element allows you to
## Instructions
<section id='instructions'>
Add the CSS property <code>display</code> to <code>#box-container</code> and set its value to flex.
Add the CSS property <code>display</code> to <code>#box-container</code> and set its value to <code>flex</code>.
</section>
## Tests
@ -22,7 +22,7 @@ Add the CSS property <code>display</code> to <code>#box-container</code> and set
```yml
tests:
- text: <code>#box-container</code> should have the <code>display</code> property set to a value of flex.
- text: <code>#box-container</code> should have the <code>display</code> property set to a value of <code>flex</code>.
testString: assert($('#box-container').css('display') == 'flex');
```

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

@ -21,7 +21,7 @@ Add the CSS property <code>align-items</code> to the header's <code>.follow-btn<
```yml
tests:
- text: The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.
- text: The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of <code>center</code>.
testString: assert($('.follow-btn').css('align-items') == 'center');
```

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

@ -14,7 +14,7 @@ The final property for flex items is <code>align-self</code>. This property allo
## 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.
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 <code>center</code> and give <code>#box-2</code> a value of <code>flex-end</code>.
</section>
## Tests
@ -22,9 +22,9 @@ Add the CSS property <code>align-self</code> to both <code>#box-1</code> and <co
```yml
tests:
- text: The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.
- text: The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of <code>center</code>.
testString: assert($('#box-1').css('align-self') == 'center');
- text: The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.
- text: The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of <code>flex-end</code>.
testString: assert($('#box-2').css('align-self') == 'flex-end');
```

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

@ -9,12 +9,12 @@ forumTopicId: 301111
## 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.
Using a similar example from the last challenge, if one item has a <code>flex-grow</code> value of <code>1</code> and the other has a <code>flex-grow</code> value of <code>3</code>, the one with the value of <code>3</code> 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.
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 <code>1</code> and <code>#box-2</code> a value of <code>2</code>.
</section>
## Tests
@ -22,9 +22,9 @@ Add the CSS property <code>flex-grow</code> to both <code>#box-1</code> and <cod
```yml
tests:
- text: The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.
- text: The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of <code>1</code>.
testString: assert($('#box-1').css('flex-grow') == '1');
- text: The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.
- text: The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of <code>2</code>.
testString: assert($('#box-2').css('flex-grow') == '2');
```

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

@ -15,7 +15,7 @@ The default property settings are <code>flex: 0 1 auto;</code>.
## 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.
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 <code>2</code>, its <code>flex-shrink</code> is <code>2</code>, and its <code>flex-basis</code> is <code>150px</code>. Give <code>#box-2</code> the values so its <code>flex-grow</code> is <code>1</code>, its <code>flex-shrink</code> is <code>1</code>, and its <code>flex-basis</code> is <code>150px</code>.
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>
@ -24,9 +24,9 @@ These values will cause <code>#box-1</code> to grow to fill the extra space at t
```yml
tests:
- text: 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-1</code> element should have the <code>flex</code> property set to a value of <code>2 2 150px</code>.
testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px');
- text: The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.
- text: The <code>#box-2</code> element should have the <code>flex</code> property set to a value of <code>1 1 150px</code>.
testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '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);

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

@ -10,12 +10,12 @@ forumTopicId: 301113
<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.
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 <code>1</code> and the other has a <code>flex-shrink</code> value of <code>3</code>, the one with the value of <code>3</code> 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.
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 <code>1</code> and <code>#box-2</code> a value of <code>2</code>.
</section>
## Tests
@ -23,9 +23,9 @@ Add the CSS property <code>flex-shrink</code> to both <code>#box-1</code> and <c
```yml
tests:
- text: The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.
- text: The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of <code>1</code>.
testString: assert($('#box-1').css('flex-shrink') == '1');
- text: The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.
- text: The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of <code>2</code>.
testString: assert($('#box-2').css('flex-shrink') == '2');
```

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

@ -16,7 +16,7 @@ CSS also has options for the direction of the wrap:
## 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.
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 <code>wrap</code>.
</section>
## Tests
@ -24,7 +24,7 @@ The current layout has too many boxes for one row. Add the CSS property <code>fl
```yml
tests:
- text: The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.
- text: The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of <code>wrap</code>.
testString: assert($('#box-container').css('flex-wrap') == 'wrap');
```

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

@ -13,7 +13,7 @@ The <code>order</code> property is used to tell CSS the order of how flex items
## 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.
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 <code>2</code> and give <code>#box-2</code> a value of <code>1</code>.
</section>
## Tests
@ -21,9 +21,9 @@ Add the CSS property <code>order</code> to both <code>#box-1</code> and <code>#b
```yml
tests:
- text: The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.
- text: The <code>#box-1</code> element should have the <code>order</code> property set to a value of <code>2</code>.
testString: assert($('#box-1').css('order') == '2');
- text: The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.
- text: The <code>#box-2</code> element should have the <code>order</code> property set to a value of <code>1</code>.
testString: assert($('#box-2').css('order') == '1');
```