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

fix: updated the note sections for responsive web design english (#35528)

Browse Source
This commit is contained in:
rupali317
2019-03-22 22:02:12 +08:00
committed by Oliver Eyton-Williams
parent 6d43682397
commit bc72c86dc6
26 changed files with 27 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
The repeat function comes with an option called <dfn>auto-fill</dfn>. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining <code>auto-fill</code> with <code>minmax</code>, like this:
<blockquote>repeat(auto-fill, minmax(60px, 1fr));</blockquote>
When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one.
<strong>Note</strong><br>If your container can't fit all your items on one row, it will move them down to a new one.
<strong>Note:</strong> If your container can't fit all your items on one row, it will move them down to a new one.
</section>
## Instructions

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

@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
## Description
<section id='description'>
<code>auto-fit</code> works almost identically to <code>auto-fill</code>. The only difference is that when the container's size exceeds the size of all the items combined, <code>auto-fill</code> keeps inserting empty rows or columns and pushes your items to the side, while <code>auto-fit</code> collapses those empty rows or columns and stretches your items to fit the size of the container.
<strong>Note</strong><br>If your container can't fit all your items on one row, it will move them down to a new one.
<strong>Note:</strong> If your container can't fit all your items on one row, it will move them down to a new one.
</section>
## Instructions

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

@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
## Description
<section id='description'>
Turn any HTML element into a grid container by setting its <code>display</code> property to <code>grid</code>. This gives you the ability to use all the other properties associated with CSS Grid.
<strong>Note</strong><br>In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.
<strong>Note:</strong> In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.
</section>
## Instructions

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

@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using <code>grid-template-areas</code> on the container like this:
<blockquote>grid-template-areas:<br>&nbsp;&nbsp;"header header header"<br>&nbsp;&nbsp;"advert content content"<br>&nbsp;&nbsp;"footer footer footer";</blockquote>
The code above merges the top three cells together into an area named <code>header</code>, the bottom three cells into a <code>footer</code> area, and it makes two areas in the middle row; <code>advert</code> and <code>content</code>.
<strong>Note</strong><br>Every word in the code represents a cell and every pair of quotation marks represent a row.
<strong>Note:</strong> Every word in the code represents a cell and every pair of quotation marks represent a row.
In addition to custom labels, you can use a period (<code>.</code>) to designate an empty cell in the grid.
</section>

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

@ -15,7 +15,7 @@ You can also repeat multiple values with the repeat function and insert the func
<blockquote>grid-template-columns: repeat(2, 1fr 50px) 20px;</blockquote>
This translates to:
<blockquote>grid-template-columns: 1fr 50px 1fr 50px 20px;</blockquote>
<strong>Note</strong><br><code>1fr 50px</code> is repeated twice followed by 20px.
<strong>Note:</strong> The <code>1fr 50px</code> is repeated twice followed by 20px.
</section>
## Instructions