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

chore(i18n,curriculum): update translations (#42629)

Browse Source
This commit is contained in:
camperbot
2021-06-26 21:42:30 +05:30
committed by GitHub
parent 6ecb507779
commit 9887fb2ca2
120 changed files with 1188 additions and 881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
---
id: 587d78ab367417b2b2512af1
title: Add Flex Superpowers to the Tweet Embed
title: Usar os superpoderes do CSS Flexbox no Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM'
forumTopicId: 301100
@@ -9,59 +9,59 @@ dashedName: add-flex-superpowers-to-the-tweet-embed
# --description--
To the right is the tweet embed that will be used as a practical example. Some of the elements would look better with a different layout. The last challenge demonstrated `display: flex`. Here you'll add it to several components in the tweet embed to start adjusting their positioning.
À direita está um tweet que será utilizado como exemplo prático. Alguns dos elementos ficariam melhores com um layout diferente. O último desafio apresentou a propriedade `display: flex`. Neste desafio, você vai adicioná-lo a vários componentes do tweet para começar a ajustar a posição deles.
# --instructions--
Add the CSS property `display: flex` to all of the following items - note that the selectors are already set up in the CSS:
Adicione a propriedade `display: flex` a todos os itens a seguir - note que os seletores já estão definidos no CSS:
`header`, the header's `.profile-name`, the header's `.follow-btn`, the header's `h3` and `h4`, the `footer`, and the footer's `.stats`.
`header`, `.profile-name`, `.follow-btn`, `h3`, `h4`, `footer` e `.stats`.
# --hints--
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
O elemento de classe `.follow-btn` deve aparecer renderizado na página. Lembre-se de desativar quaisquer extensões do tipo bloqueadores de anúncios.
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
```
Your `header` should have a `display` property set to `flex`.
O elemento `header` deve ter a propriedade `display` definida com o valor de `flex`.
```js
assert($('header').css('display') == 'flex');
```
Your `footer` should have a `display` property set to `flex`.
O elemento `footer` deve ter a propriedade `display` definida com o valor de `flex`.
```js
assert($('footer').css('display') == 'flex');
```
Your `h3` should have a `display` property set to `flex`.
O elemento `h3` deve ter a propriedade `display` definida com o valor de `flex`.
```js
assert($('h3').css('display') == 'flex');
```
Your `h4` should have a `display` property set to `flex`.
O elemento `h4` deve ter a propriedade `display` definida com o valor de `flex`.
```js
assert($('h4').css('display') == 'flex');
```
Your `.profile-name` should have a `display` property set to `flex`.
O elemento de classe `.profile-name` deve ter a propriedade `display` definida com o valor de `flex`.
```js
assert($('.profile-name').css('display') == 'flex');
```
Your `.follow-btn` should have a `display` property set to `flex`.
O elemento de classe `.follow-btn` deve ter a propriedade `display` definida com o valor de `flex`.
```js
assert($('.follow-btn').css('display') == 'flex');
```
Your `.stats` should have a `display` property set to `flex`.
O elemento de classe `.stats` deve ter a propriedade `display` definida com o valor de `flex`.
```js
assert($('.stats').css('display') == 'flex');

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

@@ -1,6 +1,6 @@
---
id: 587d78ad367417b2b2512af8
title: Align Elements Using the align-items Property
title: Alinhar elementos usando a propriedade align-items
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk'
forumTopicId: 301101
@@ -9,26 +9,26 @@ dashedName: align-elements-using-the-align-items-property
# --description--
The `align-items` property is similar to `justify-content`. Recall that the `justify-content` 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.
A propriedade `align-items` é similar à `justify-content`. Lembre que a propriedade `justify-content` alinhou os flex items ao longo do eixo principal. Para linhas, o eixo principal é uma linha horizontal e para colunas é uma linha vertical.
Flex containers also have a **cross axis** which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.
Flex containers também têm um **eixo transversal** que é o oposto do eixo principal. Para linhas, o eixo transversal é vertical, e para colunas, o eixo transversal é horizontal.
CSS offers the `align-items` 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.
O CSS oferece a propriedade `align-items` para alinhar os flex items ao longo do eixo transversal. Para linhas, ela indica ao CSS como empurrar os itens para cima ou para baixo dentro do container. E para uma coluna, como empurrar todos os itens para a esquerda ou direita dentro do container.
The different values available for `align-items` include:
Os valores disponíveis para `align-items` são:
<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. This is the default value if no <code>align-items</code> value is specified.</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>
<ul><li><code>flex-start</code>: alinha os itens no início do container. Para linhas, os flex items são posicionados no topo do container. Para colunas, os flex items são posicionados à esquerda do container.</li><li><code>flex-end</code>: alinha os itens no final do container. Para linhas, todos os flex items são posicionados na parte inferior do container. Para colunas, os flex items são posicionados à direita do container.</li><li><code>center</code>: alinha os itens ao centro. Para linhas, os flex items são posicionados verticalmente (com espaços iguais acima e abaixo dos itens). Para colunas, os flex items são posicionados horizontalmente (com espaços iguais à esquerda e à direita dos itens).</li><li><code>stretch</code>: estica os itens para preencher o container. Por exemplo, itens posicionados em linhas são esticados para preencher o contêiner de cima a baixo. Este é o valor padrão se nenhum valor for especificado para a propriedade <code>align-items</code>.</li><li><code>baseline</code>: o posicionamento é realizado com base no texto dentro de cada flex item. A linha de base (baseline) é um conceito de textos. Pense nela como se fosse a linha em que as letras ficam apoiadas.</li></ul>
# --instructions--
An example helps show this property in action. Add the CSS property `align-items` to the `#box-container` element, and give it a value of `center`.
Alguns exemplos vão te ajudar a entender os valores dessa propriedade em ação. Adicione a propriedade CSS `align-items` ao elemento `#box-container` e dê a ela o valor de `center`.
**Bonus**
Try the other options for the `align-items` 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.
**Bônus**
Use os demais valores da propriedade `align-items` no editor de código para ver as diferenças. Mas observe que o valor `center` será o único que vai fazer você passar neste desafio.
# --hints--
The `#box-container` element should have an `align-items` property set to a value of `center`.
O elemento de id `#box-container` deve ter a propriedade `align-items` definida com o valor de `center`.
```js
assert($('#box-container').css('align-items') == 'center');

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

@@ -1,6 +1,6 @@
---
id: 587d78ac367417b2b2512af6
title: Align Elements Using the justify-content Property
title: Alinhar elementos usando a propriedade justify-content
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
forumTopicId: 301102
@@ -9,26 +9,26 @@ dashedName: align-elements-using-the-justify-content-property
# --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 `justify-content` property has several options to do this. But first, there is some important terminology to understand before reviewing those options.
Às vezes, os flex items dentro de um flex container não preenchem todo o espaço no disponível no contêiner. É comum querer dizer ao CSS como alinhar e espaçar os flex items de uma certa maneira. Felizmente, a propriedade `justify-content` tem várias opções para fazer isso. Antes, no entanto, há uma terminologia importante para entender antes de aprender essas opções.
[Here is a useful image showing a row to illustrate the concepts below.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
[Aqui está uma imagem mostrando uma linha para ilustrar os conceitos abaixo.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
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 **main axis**. 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.
Lembre-se de que definir um flex container como uma linha coloca os flex items lado a lado da esquerda para a direita. Já um flex container como uma coluna coloca os flex items em uma pilha vertical de cima para baixo. Seja qual for a direção do flex container, a direção em que os flex items são posicionados é chamada de **eixo principal**. Para uma linha, o eixo principal é uma linha horizontal que passa através de cada item. E para uma coluna, o eixo principal é uma linha vertical que passa através de cada item.
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 `justify-content: center;`, which aligns all the flex items to the center inside the flex container. Other options include:
Existem várias opções para espaçar os flex items ao longo da linha que for o eixo principal. Uma dos mais usadas é `justify-content: center;`, que alinha todos os flex items ao centro dentro do flex container. As demais opções são:
<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. This is the default alignment if no <code>justify-content</code> is specified.</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 remaining space is distributed evenly among the other items.</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 with a half space on either end of the flex container.</li><li><code>space-evenly</code>: Distributes space evenly between the flex items with a full space at either end of the flex container</li></ul>
<ul><li><code>flex-start</code>: alinha os itens no início do contêiner. Para linhas, os flex items são empurrados para a esquerda do flex container. Para colunas, os flex items são empurrados para o topo do flex container. Este é o alinhamento padrão se nenhum valor for especificado para <code>justify-content</code>.</li><li><code>flex-end</code>: alinha itens no final do contêiner. Para linhas, os flex items são empurrados para a direita do flex container. Para colunas, os flex items são empurrados para a parte inferior do flex container.</li><li><code>space-between</code>: alinha os itens ao centro do eixo principal, com um espaçamento entre os itens. O primeiro item e o último são empurrados até a borda do flex container. Por exemplo, quando a direção do flex container for em linha, o primeiro item fica do lado esquerdo do contêiner e o último item fica no lado direito do contêiner. Então, o espaço restante é distribuído igualmente para os demais itens.</li><li><code>space-around</code>: similar ao <code>space-between</code> mas os primeiros e últimos itens não ficam grudados nas bordas do flex container, o espaço é distribuído em torno de todos os itens com metade do espaço em cada extremidade do flex container.</li><li><code>space-evenly</code>: distribui o espaço igualmente entre os flex items com um espaço completo em cada extremidade do flex container</li></ul>
# --instructions--
An example helps show this property in action. Add the CSS property `justify-content` to the `#box-container` element, and give it a value of `center`.
Alguns exemplos vão ajudar você a entender os valores dessa propriedade em ação. Adicione a propriedade CSS `justify-content` ao elemento `#box-container` e dê a ela o valor de `center`.
**Bonus**
Try the other options for the `justify-content` 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.
**Bônus**
Use os demais valores da propriedade `justify-content` no editor de código para ver as diferenças. Mas observe que o valor `center` será o único que vai fazer você passar neste desafio.
# --hints--
The `#box-container` element should have a `justify-content` property set to a value of `center`.
O elemento `#box-container` deve ter a propriedade `justify-content` com o valor de `center`.
```js
assert($('#box-container').css('justify-content') == 'center');

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

@@ -1,6 +1,6 @@
---
id: 587d78ac367417b2b2512af5
title: Apply the flex-direction Property to Create a Column in the Tweet Embed
title: Usar a propriedade flex-direction para criar uma coluna no Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9'
forumTopicId: 301103
@@ -9,21 +9,21 @@ dashedName: apply-the-flex-direction-property-to-create-a-column-in-the-tweet-em
# --description--
The tweet embed `header` and `footer` used the `flex-direction` property earlier with a row value. Similarly, the items inside the `.profile-name` element would work well stacked as a column.
Anteriormente, os elementos `header` e `footer` do tweet usaram a propriedade `flex-direction` para posicionar os flex items horizontalmente. Da mesma forma, os itens dentro do elemento de classe `.profile-name` funcionariam bem empilhados como uma coluna.
# --instructions--
Add the CSS property `flex-direction` to the header's `.profile-name` element and set the value to `column`.
Adicione a propriedade `flex-direction` com o valor de `column` no elemento de classe `.profile-name`.
# --hints--
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
O elemento de classe `.follow-btn` deve ser renderizado na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
```
The `.profile-name` element should have a `flex-direction` property set to `column`.
O elemento de classe `.profile-name` deve possuir a propriedade `flex-direction` com o valor de `column`.
```js
assert($('.profile-name').css('flex-direction') == 'column');

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

@@ -1,6 +1,6 @@
---
id: 587d78ab367417b2b2512af3
title: Apply the flex-direction Property to Create Rows in the Tweet Embed
title: Usar a propriedade flex-direction para criar linhas no Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
forumTopicId: 301104
@@ -9,27 +9,27 @@ dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed
# --description--
The `header` and `footer` in the tweet embed example have child items that could be arranged as rows using the `flex-direction` property. This tells CSS to align the children horizontally.
Os elementos `header` e `footer` no exemplo do tweet possuem itens filhos que podem ser posicionados em linhas usando a propriedade `flex-direction`. Você vai usar essa propriedade para dizer ao CSS para alinhar os flex items horizontalmente.
# --instructions--
Add the CSS property `flex-direction` to both the `header` and `footer` and set the value to `row`.
Adicione a propriedade `flex-direction` com o valor de `row` em ambos os elementos `header` e `footer`.
# --hints--
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
O elemento de classe `.follow-btn` deve ser renderizado na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
```
The `header` should have a `flex-direction` property set to `row`.
O elemento `header` deve possuir a propriedade `flex-direction` com o valor de `row`.
```js
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
```
The `footer` should have a `flex-direction` property set to `row`.
O elemento `footer` deve possuir a propriedade `flex-direction` com o valor de `row`.
```js
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));

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

@@ -1,6 +1,6 @@
---
id: 587d78ab367417b2b2512af0
title: 'Use display: flex to Position Two Boxes'
title: 'Usar display: flex para posicionar duas caixas'
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
forumTopicId: 301105
@@ -9,17 +9,17 @@ dashedName: use-display-flex-to-position-two-boxes
# --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.
Esta seção utiliza estilos de desafio alternados para mostrar como usar o CSS para posicionar elementos de maneira flexível. Primeiro, o desafio explicará a teoria. Em seguida, aplicaremos o conceito aprendido em um desafio prático usando um tweet simples.
Placing the CSS property `display: flex;` on an element allows you to use other flex properties to build a responsive page.
Colocando a propriedade `display: flex;` em um elemento permite que você use outras propriedades flex para construir uma página responsiva.
# --instructions--
Add the CSS property `display` to `#box-container` and set its value to `flex`.
Adicione a propriedade CSS `display` ao `#box-container` e dê a ele o valor `flex`.
# --hints--
`#box-container` should have the `display` property set to a value of `flex`.
`#box-container` deve ter a propriedade `display` com o valor de `flex`.
```js
assert($('#box-container').css('display') == 'flex');

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

@@ -1,6 +1,6 @@
---
id: 587d78ad367417b2b2512af9
title: Use the align-items Property in the Tweet Embed
title: Usar a propriedade align-items no Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq'
forumTopicId: 301106
@@ -9,21 +9,21 @@ dashedName: use-the-align-items-property-in-the-tweet-embed
# --description--
The last challenge introduced the `align-items` property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.
O último desafio apresentou a propriedade `align-items` oferecendo um exemplo. Esta propriedade pode ser aplicada a alguns elementos do tweet para alinhar os flex items dentro deles.
# --instructions--
Add the CSS property `align-items` to the header's `.follow-btn` element. Set the value to `center`.
Adicione a propriedade CSS `align-items` ao elemento `.follow-btn` que se encontra dentro do header. Defina o valor dessa propriedade para `center`.
# --hints--
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
O elemento de classe `.follow-btn` deve ser renderizado na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
```
The `.follow-btn` element should have the `align-items` property set to a value of `center`.
O elemento de classe `.follow-btn` deve ter a propriedade `align-items` definida com o valor de `center`.
```js
assert($('.follow-btn').css('align-items') == 'center');

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

@@ -1,6 +1,6 @@
---
id: 587d78af367417b2b2512b00
title: Use the align-self Property
title: Usar a propriedade align-self
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv'
forumTopicId: 301107
@@ -9,23 +9,23 @@ dashedName: use-the-align-self-property
# --description--
The final property for flex items is `align-self`. 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 `float`, `clear`, and `vertical-align` do not work on flex items.
A última propriedade relacionada aos flex items é `align-self`. Esta propriedade permite que você ajuste o alinhamento de cada item individualmente, ao invés de configurar todos de uma vez. Isso acaba sendo útil, uma vez que outras técnicas comuns de ajuste utilizando as propriedades CSS `float`, `clear` e `vertical-align` não funcionam em flex items.
`align-self` accepts the same values as `align-items` and will override any value set by the `align-items` property.
`align-self` aceita os mesmos valores que `align-items`, com a diferença que vai substituir qualquer valor anteriormente definido pela propriedade `align-items`.
# --instructions--
Add the CSS property `align-self` to both `#box-1` and `#box-2`. Give `#box-1` a value of `center` and give `#box-2` a value of `flex-end`.
Adicione a propriedade CSS `align-self` aos elementos com id de `#box-1` e `#box-2`. Dê para `#box-1` o valor de `center` e para `#box-2` o valor de `flex-end`.
# --hints--
The `#box-1` element should have the `align-self` property set to a value of `center`.
O elemento de id `#box-1` deve ter a propriedade `align-self` com o valor de `center`.
```js
assert($('#box-1').css('align-self') == 'center');
```
The `#box-2` element should have the `align-self` property set to a value of `flex-end`.
O elemento de id `#box-2` deve ter a propriedade `align-self` com o valor de `flex-end`.
```js
assert($('#box-2').css('align-self') == 'flex-end');

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

@@ -1,6 +1,6 @@
---
id: 587d78ae367417b2b2512afd
title: Use the flex-basis Property to Set the Initial Size of an Item
title: Usar a propriedade flex-basis para definir o tamanho inicial de um flex item
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa'
forumTopicId: 301108
@@ -9,35 +9,35 @@ dashedName: use-the-flex-basis-property-to-set-the-initial-size-of-an-item
# --description--
The `flex-basis` property specifies the initial size of the item before CSS makes adjustments with `flex-shrink` or `flex-grow`.
A propriedade `flex-basis` especifica o tamanho inicial do item antes do CSS fazer ajustes com `flex-shrink` ou `flex-grow`.
The units used by the `flex-basis` property are the same as other size properties (`px`, `em`, `%`, etc.). The value `auto` sizes items based on the content.
As unidades utilizadas pela propriedade `flex-basis` são as mesmas que outras propriedades de tamanho (`px`, `em`, `%`, etc.). O valor `auto` dimensiona os flex items baseado no conteúdo.
# --instructions--
Set the initial size of the boxes using `flex-basis`. Add the CSS property `flex-basis` to both `#box-1` and `#box-2`. Give `#box-1` a value of `10em` and `#box-2` a value of `20em`.
Defina o tamanho inicial das caixas usando `flex-basis`. Adicione a propriedade CSS `flex-basis` aos elementos de id `#box-1` e `#box-2`. Dê para `#box-1` o valor de `10em` e `#box-2` o valor de `20em`.
# --hints--
The `#box-1` element should have the `flex-basis` property.
O elemento de id `#box-1` deve ter a propriedade `flex-basis`.
```js
assert($('#box-1').css('flex-basis') != 'auto');
```
The `#box-1` element should have a `flex-basis` value of `10em`.
O elemento de id `#box-1` deve ter a propriedade `flex-basis` com o valor de `10em`.
```js
assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
```
The `#box-2` element should have the `flex-basis` property.
O elemento de id `#box-2` deve ter a propriedade `flex-basis`.
```js
assert($('#box-2').css('flex-basis') != 'auto');
```
The `#box-2` element should have a `flex-basis` value of `20em`.
O elemento de id `#box-2` deve ter a propriedade `flex-basis` com o valor de `20em`.
```js
assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));

8
curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
View File

@@ -1,6 +1,6 @@
---
id: 587d78ac367417b2b2512af4
title: Use the flex-direction Property to Make a Column
title: Usar a propriedade flex-direction para criar uma coluna
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
forumTopicId: 301109
@@ -9,15 +9,15 @@ dashedName: use-the-flex-direction-property-to-make-a-column
# --description--
The last two challenges used the `flex-direction` property set to `row`. This property can also create a column by vertically stacking the children of a flex container.
Os últimos dois desafios usaram a propriedade `flex-direction` com o valor de `row`. Esta propriedade também pode criar uma coluna ao empilhar verticalmente os elementos filhos de um flex container.
# --instructions--
Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `column`.
Adicione a propriedade CSS `flex-direction` ao elemento de id `#box-container` e dê a ela o valor de `column`.
# --hints--
The `#box-container` element should have a `flex-direction` property set to `column`.
O elemento de id `#box-container` deve ter a propriedade `flex-direction` com o valor de `column`.
```js
assert($('#box-container').css('flex-direction') == 'column');

12
curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
View File

@@ -1,6 +1,6 @@
---
id: 587d78ab367417b2b2512af2
title: Use the flex-direction Property to Make a Row
title: Usar a propriedade flex-direction para criar uma linha
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
forumTopicId: 301110
@@ -9,19 +9,19 @@ dashedName: use-the-flex-direction-property-to-make-a-row
# --description--
Adding `display: flex` 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 `flex-direction` 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.
Ao adicionar `display: flex` a um elemento, você o transforma em um flex container. Isso faz com que seja possível alinhar todos os filhos desse elemento em linhas ou colunas. Para fazer isso, você deve usar a propriedade `flex-direction` no item pai e definir o valor desta usando row ou column. Criar uma row (linha) vai alinhar os itens filhos horizontalmente. Criar uma column (coluna) vai alinhar os itens filhos verticalmente.
Other options for `flex-direction` are `row-reverse` and `column-reverse`.
Outras opções para `flex-direction` são `row-reverse` e `column-reverse`.
**Note:** The default value for the `flex-direction` property is `row`.
**Observação:** o valor padrão da propriedade `flex-direction` é `row`.
# --instructions--
Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `row-reverse`.
Adicione a propriedade CSS `flex-direction` ao elemento de id `#box-container` e dê a ela o valor de `row-reverse`.
# --hints--
The `#box-container` element should have a `flex-direction` property set to `row-reverse`.
O elemento de id `#box-container` deve ter a propriedade `flex-direction` com o valor de `row-reverse`.
```js
assert($('#box-container').css('flex-direction') == 'row-reverse');

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

@@ -1,6 +1,6 @@
---
id: 587d78ae367417b2b2512afc
title: Use the flex-grow Property to Expand Items
title: Usar a propriedade flex-grow para expandir flex items
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
forumTopicId: 301111
@@ -9,23 +9,23 @@ dashedName: use-the-flex-grow-property-to-expand-items
# --description--
The opposite of `flex-shrink` is the `flex-grow` property. Recall that `flex-shrink` controls the size of the items when the container shrinks. The `flex-grow` property controls the size of items when the parent container expands.
O oposto de `flex-shrink` é a propriedade `flex-grow`. Lembre-se de que `flex-shrink` controla o tamanho dos itens quando o contêiner encolhe. A propriedade `flex-grow` controla o tamanho dos itens quando o contêiner pai expande.
Using a similar example from the last challenge, if one item has a `flex-grow` value of `1` and the other has a `flex-grow` value of `3`, the one with the value of `3` will grow three times as much as the other.
Usando um exemplo semelhante ao do último desafio, se um item tem um `flex-grow` com o valor de `1` e o outro tem um `flex-grow` com o valor de `3`, aquele com o valor de `3` crescerá três vezes mais do que o outro.
# --instructions--
Add the CSS property `flex-grow` to both `#box-1` and `#box-2`. Give `#box-1` a value of `1` and `#box-2` a value of `2`.
Adicione a propriedade CSS `flex-grow` aos elementos de id `#box-1` e `#box-2`. Dê para `#box-1` o valor `1` e `#box-2` o valor `2`.
# --hints--
The `#box-1` element should have the `flex-grow` property set to a value of `1`.
O elemento de id `#box-1` deve ter a propriedade `flex-grow` com o valor de `1`.
```js
assert($('#box-1').css('flex-grow') == '1');
```
The `#box-2` element should have the `flex-grow` property set to a value of `2`.
O elemento de id `#box-2` deve ter a propriedade `flex-grow` com o valor de `2`.
```js
assert($('#box-2').css('flex-grow') == '2');

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

@@ -1,6 +1,6 @@
---
id: 587d78ae367417b2b2512afe
title: Use the flex Shorthand Property
title: Usar a propriedade abreviada flex
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE'
forumTopicId: 301112
@@ -9,21 +9,21 @@ dashedName: use-the-flex-shorthand-property
# --description--
There is a shortcut available to set several flex properties at once. The `flex-grow`, `flex-shrink`, and `flex-basis` properties can all be set together by using the `flex` property.
Há um atalho disponível para definir várias propriedades flex de uma só vez. As propriedades `flex-grow`, `flex-shrink` e `flex-basis` podem ser definidas em uma única linha usando a propriedade `flex`.
For example, `flex: 1 0 10px;` will set the item to `flex-grow: 1;`, `flex-shrink: 0;`, and `flex-basis: 10px;`.
Por exemplo, `flex: 1 0 10px;` vai definir o item como `flex-grow: 1;`, `flex-shrink: 0;` e `flex-basis: 10px;`.
The default property settings are `flex: 0 1 auto;`.
A configuração padrão dessa propriedade é `flex: 0 1 auto;`.
# --instructions--
Add the CSS property `flex` to both `#box-1` and `#box-2`. Give `#box-1` the values so its `flex-grow` is `2`, its `flex-shrink` is `2`, and its `flex-basis` is `150px`. Give `#box-2` the values so its `flex-grow` is `1`, its `flex-shrink` is `1`, and its `flex-basis` is `150px`.
Adicione a propriedade CSS `flex` aos elementos de id `#box-1` e `#box-2`. Dê a `#box-1` os valores para que seu `flex-grow` seja `2`, `flex-shrink` seja `2` e `flex-basis` seja `150px`. Dê a `#box-2` os valores para que seu `flex-grow` seja `1`, seu `flex-shrink` seja `1` e seu `flex-basis` seja `150px`.
These values will cause `#box-1` to grow to fill the extra space at twice the rate of `#box-2` when the container is greater than 300px and shrink at twice the rate of `#box-2` when the container is less than 300px. 300px is the combined size of the `flex-basis` values of the two boxes.
Estes valores farão com que `#box-1` cresça, preenchendo duas vezes mais o espaço adicional do que `#box-2`, quando o contêiner for maior que 300px, e reduzindo-o duas vezes mais do que `#box-2`, quando o contêiner for menor que 300px. 300px é o tamanho total quando somamos os valores de `flex-basis` de ambas as caixas.
# --hints--
The `#box-1` element should have the `flex` property set to a value of `2 2 150px`.
O elemento de id `#box-1` deve ter a propriedade `flex` com o valor de `2 2 150px`.
```js
assert(
@@ -33,7 +33,7 @@ assert(
);
```
The `#box-2` element should have the `flex` property set to a value of `1 1 150px`.
O elemento de id `#box-2` deve ter a propriedade `flex` com o valor de `1 1 150px`.
```js
assert(
@@ -43,7 +43,7 @@ assert(
);
```
Your code should use the `flex` property for `#box-1` and `#box-2`.
O código deve usar a propriedade `flex` nos elementos de id `#box-1` e `#box-2`.
```js
assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);

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

@@ -1,6 +1,6 @@
---
id: 587d78ad367417b2b2512afb
title: Use the flex-shrink Property to Shrink Items
title: Usar a propriedade flex-shrink para encolher itens
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
forumTopicId: 301113
@@ -9,25 +9,25 @@ dashedName: use-the-flex-shrink-property-to-shrink-items
# --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.
Até aqui, todas as propriedades nos desafios se aplicam ao flex container (o pai dos flex items). Porém, há várias propriedades úteis para os flex items.
The first is the `flex-shrink` 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.
A primeira é a propriedade `flex-shrink`. Quando é usada, permite que um item encolha se o flex container for muito pequeno. Os itens encolhem quando a largura do contêiner pai é menor do que a soma das larguras de todos os flex items dentro dele.
The `flex-shrink` 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 `flex-shrink` value of `1` and the other has a `flex-shrink` value of `3`, the one with the value of `3` will shrink three times as much as the other.
A propriedade `flex-shrink` recebe números como valor. Quanto maior o número, mais encolherá comparado a outros itens no contêiner. Por exemplo, se um item tem `flex-shrink` de valor `1` e o outro tem `flex-shrink` de valor `3`, aquele com valor `3` vai encolher três vezes mais do que o outro.
# --instructions--
Add the CSS property `flex-shrink` to both `#box-1` and `#box-2`. Give `#box-1` a value of `1` and `#box-2` a value of `2`.
Adicione a propriedade CSS `flex-shrink` aos elementos de id `#box-1` e `#box-2`. Dê para `#box-1` o valor `1` e `#box-2` o valor `2`.
# --hints--
The `#box-1` element should have the `flex-shrink` property set to a value of `1`.
O elemento de id `#box-1` deve ter a propriedade `flex-shrink` com o valor de `1`.
```js
assert($('#box-1').css('flex-shrink') == '1');
```
The `#box-2` element should have the `flex-shrink` property set to a value of `2`.
O elemento de id `#box-2` deve ter a propriedade `flex-shrink` com o valor de `2`.
```js
assert($('#box-2').css('flex-shrink') == '2');

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

@@ -1,6 +1,6 @@
---
id: 587d78ad367417b2b2512afa
title: Use the flex-wrap Property to Wrap a Row or Column
title: Usar a propriedade flex-wrap para quebrar uma linha ou coluna
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
forumTopicId: 301114
@@ -9,21 +9,21 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
# --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.
O CSS flexbox possui uma propriedade que permite dividir um flex container em várias linhas (ou colunas). Por padrão, um flex container manterá todos os flex items juntos. Por exemplo, todos os flex items estarão lado a lado na mesma linha.
However, using the `flex-wrap` property 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.
No entanto, ao usar a propriedade `flex-wrap`, informamos ao CSS para quebrar essa linha. Isso significa que os itens adicionais serão movidos para uma nova linha ou coluna. O ponto onde essa quebra acontece depende do tamanho dos itens e do tamanho do flex conteiner.
CSS also has options for the direction of the wrap:
O CSS oferece as seguintes opções para a direção da quebra de linha:
<ul><li><code>nowrap</code>: this is the default setting, and does not wrap items.</li><li><code>wrap</code>: wraps items onto multiple lines from top-to-bottom if they are in rows and left-to-right if they are in columns.</li><li><code>wrap-reverse</code>: wraps items onto multiple lines from bottom-to-top if they are in rows and right-to-left if they are in columns.</li></ul>
<ul><li><code>nowrap</code>: esta é a configuração padrão e não cria novas linhas ou colunas.</li><li><code>wrap</code>: cria novas linhas de cima para baixo se os itens estiverem dispostos em linhas e da esquerda para a direita se estiverem em colunas.</li><li><code>wrap-reverse</code>: cria novas linhas de baixo para cima se os itens estiverem dispostos em linhas e da direita para a esquerda se estiverem em colunas.</li></ul>
# --instructions--
The current layout has too many boxes for one row. Add the CSS property `flex-wrap` to the `#box-container` element, and give it a value of `wrap`.
O layout atual possui itens demais para caber em apenas uma linha. Adicione a propriedade CSS `flex-wrap` com o valor de `wrap` ao elemento de id `#box-container`.
# --hints--
The `#box-container` element should have the `flex-wrap` property set to a value of `wrap`.
O elemento de id `#box-container` deve ter a propriedade `flex-wrap` com o valor de `wrap`.
```js
assert($('#box-container').css('flex-wrap') == 'wrap');

10
curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
View File

@@ -1,6 +1,6 @@
---
id: 587d78ac367417b2b2512af7
title: Use the justify-content Property in the Tweet Embed
title: Usar a propriedade justify-content no Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa'
forumTopicId: 301115
@@ -9,21 +9,21 @@ dashedName: use-the-justify-content-property-in-the-tweet-embed
# --description--
The last challenge showed an example of the `justify-content` property. For the tweet embed, this property can be applied to align the items in the `.profile-name` element.
O último desafio mostrou um exemplo da propriedade `justify-content`. No tweet, essa propriedade pode ser utilizada para se alinhar os itens dentro do elemento de classe `.profile-name`.
# --instructions--
Add the CSS property `justify-content` to the header's `.profile-name` element and set the value to any of the options from the last challenge.
No elemento de classe `.profile-name` adicione a propriedade CSS `justify-content` e defina seu valor para qualquer uma das opções do último desafio.
# --hints--
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
O elemento de classe `.follow-btn` deve aparecer na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
```
The `.profile-name` element should have the `justify-content` property set to any of these values: `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, or `space-evenly`.
O elemento de classe `.profile-name` deve ter a propriedade `justify-content` com alguns desses valores: `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, ou `space-evenly`.
```js
assert(

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

@@ -1,6 +1,6 @@
---
id: 587d78ae367417b2b2512aff
title: Use the order Property to Rearrange Items
title: Usar a propriedade order para reorganizar os itens
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
forumTopicId: 301116
@@ -9,21 +9,21 @@ dashedName: use-the-order-property-to-rearrange-items
# --description--
The `order` 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.
A propriedade `order` é usada para informar ao CSS a ordem de aparição dos flex items dentro do flex container. Por padrão, os itens aparecerão na mesma ordem em que foram escritos no HTML. A propriedade aceita números como valor. Números negativos podem ser usados.
# --instructions--
Add the CSS property `order` to both `#box-1` and `#box-2`. Give `#box-1` a value of `2` and give `#box-2` a value of `1`.
Adicione a propriedade CSS `order` aos elementos de id `#box-1` e `#box-2`. Dê a `#box-1` um valor de `2` e dê a `#box-2` um valor de `1`.
# --hints--
The `#box-1` element should have the `order` property set to a value of `2`.
O elemento de id `#box-1` deve ter a propriedade `order` com o valor de `2`.
```js
assert($('#box-1').css('order') == '2');
```
The `#box-2` element should have the `order` property set to a value of `1`.
O elemento de id `#box-2` deve ter a propriedade `order` com o valor de `1`.
```js
assert($('#box-2').css('order') == '1');

12
curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
View File

@@ -1,6 +1,6 @@
---
id: 5a9036ee38fddaf9a66b5d35
title: Create a Column Gap Using grid-column-gap
title: Criar um espaçamento entre colunas usando grid-column-gap
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
forumTopicId: 301124
@@ -9,21 +9,21 @@ dashedName: create-a-column-gap-using-grid-column-gap
# --description--
So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the `grid-column-gap` property like this:
Até agora, nos grids que você criou, as colunas estavam todas grudadas. Às vezes, você pode querer um espaçamento entre as colunas. Para adicionar um espaço entre as colunas, use a propriedade `grid-column-gap`:
```css
grid-column-gap: 10px;
```
This creates 10px of empty space between all of our columns.
O exemplo acima cria 10px de espaço vazio entre todas as colunas.
# --instructions--
Give the columns in the grid a `20px` gap.
Dê às colunas do grid um espaçamento de `20px`.
# --hints--
`container` class should have a `grid-column-gap` property that has the value of `20px`.
O elemento de classe `container` deve ter a propriedade `grid-column-gap` com o valor de `20px`.
```js
assert(
@@ -55,7 +55,7 @@ assert(
grid-template-rows: 1fr 1fr 1fr;
/* Only change code below this line */
/* Only change code above this line */
}
</style>

10
curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
View File

@@ -1,6 +1,6 @@
---
id: 5a9036ee38fddaf9a66b5d36
title: Create a Row Gap using grid-row-gap
title: Criar um espaçamento entre linhas usando grid-row-gap
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv'
forumTopicId: 301125
@@ -9,15 +9,15 @@ dashedName: create-a-row-gap-using-grid-row-gap
# --description--
You can add a gap in between the rows of a grid using `grid-row-gap` in the same way that you added a gap in between columns in the previous challenge.
Você pode adicionar um espaçamento entre as linhas de um grid usando `grid-row-gap` da mesma forma que adicionou um espaçamento entre as colunas no desafio anterior.
# --instructions--
Create a gap for the rows that is `5px` tall.
Crie um espaço entre as linhas com `5px` de altura.
# --hints--
`container` class should have a `grid-row-gap` property that has the value of `5px`.
O elemento de classe `container` deve ter a propriedade `grid-row-gap` com o valor de `5px`.
```js
assert(
@@ -47,7 +47,7 @@ assert(
grid-template-rows: 1fr 1fr 1fr;
/* Only change code below this line */
/* Only change code above this line */
}
</style>

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

@@ -1,6 +1,6 @@
---
id: 5a94fe5469fb03452672e461
title: Create Flexible Layouts Using auto-fill
title: Criar layouts flexíveis usando auto-fill
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
forumTopicId: 301126
@@ -9,21 +9,21 @@ dashedName: create-flexible-layouts-using-auto-fill
# --description--
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 `auto-fill` with `minmax`, like this:
A função de repetição vem com uma opção chamada <dfn>preenchimento automático</dfn>. Ela permite que você insira automaticamente tantas linhas ou colunas do tamanho desejado quanto possível, dependendo do tamanho do grid container. Você pode criar layouts flexíveis ao combinar `auto-fill` com `minmax`, assim:
```css
repeat(auto-fill, minmax(60px, 1fr));
```
When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one. **Note:** If your container can't fit all your items on one row, it will move them down to a new one.
Quando o tamanho do contêiner muda, esta configuração continua inserindo colunas de 60px e esticando-as até que seja possível inserir outra. **Observação:** se não for possível ajustar todos os grid items no grid container, os grid items que ficarem de fora do grid container serão movidos para uma nova linha.
# --instructions--
In the first grid, use `auto-fill` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see auto-fill in action.
No primeiro grid, use `auto-fill` com `repeat` para preencher o grid com colunas que tenham uma largura mínima de `60px` e máxima de `1fr`. Em seguida, redimensione a janela do navegador para ver o preenchimento automático em ação.
# --hints--
`container` class should have a `grid-template-columns` property with `repeat` and `auto-fill` that will fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`.
A classe `container` deve ter a propriedade `grid-template-columns` com os valores `repeat` e `auto-fill` que devem preencher o grid com colunas de largura mínima de `60px` e máxima de `1fr`.
```js
assert(
@@ -96,7 +96,7 @@ assert(
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 100px;
@@ -104,14 +104,14 @@ assert(
background: LightGray;
display: grid;
/* Only change code below this line */
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;

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

@@ -1,6 +1,6 @@
---
id: 5a94fe6269fb03452672e462
title: Create Flexible Layouts Using auto-fit
title: Criar layouts flexíveis usando auto-fit
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
forumTopicId: 301127
@@ -9,17 +9,17 @@ dashedName: create-flexible-layouts-using-auto-fit
# --description--
`auto-fit` works almost identically to `auto-fill`. The only difference is that when the container's size exceeds the size of all the items combined, `auto-fill` keeps inserting empty rows or columns and pushes your items to the side, while `auto-fit` collapses those empty rows or columns and stretches your items to fit the size of the container.
`auto-fit` funciona quase de forma idêntica ao `auto-fill`. A única diferença é que, quando o tamanho do grid container for maior que a soma da largura de todos os grid items, o `auto-fill` continua inserindo linhas ou colunas vazias e empurra os grid items para o lado, enquanto o `auto-fit` estica os grid items para caber no tamanho do grid container.
**Note:** If your container can't fit all your items on one row, it will move them down to a new one.
**Observação:** se não for possível ajustar todos os itens em uma linha, eles serão movidos para uma nova linha.
# --instructions--
In the second grid, use `auto-fit` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see the difference.
No segundo grid, use `auto-fit` com `repeat` para preencher o grid com colunas que tenham uma largura mínima de `60px` e máxima de `1fr`. Em seguida, redimensione a janela do navegador para ver o auto-fit em ação.
# --hints--
`container2` class should have a `grid-template-columns` property with `repeat` and `auto-fit` that will fill the grid with columns that have a minimum width of `60px` and a maximum of `1fr`.
A classe `container2` deve ter a propriedade `grid-template-columns` com os valores `repeat` e `auto-fit` que devem preencher o grid com colunas de largura mínima de `60px` e máxima de `1fr`.
```js
assert(

12
curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-grids-within-grids.md
View File

@@ -1,6 +1,6 @@
---
id: 5a94fe8569fb03452672e464
title: Create Grids within Grids
title: Criar grids dentro de grids
challengeType: 0
forumTopicId: 301128
dashedName: create-grids-within-grids
@@ -8,17 +8,17 @@ dashedName: create-grids-within-grids
# --description--
Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid.
Transformar um elemento em um grid afeta apenas o comportamento de seus elementos filhos diretos. Portanto, ao transformar um elemento filho em um grid, você tem um grid dentro de um grid.
For example, by setting the `display` and `grid-template-columns` properties of the element with the `item3` class, you create a grid within your grid.
Por exemplo, ao definir as propriedades `display` e `grid-template-columns` do elemento com a classe `item3`, você cria um grid dentro de um grid.
# --instructions--
Turn the element with the `item3` class into a grid with two columns with a width of `auto` and `1fr` using `display` and `grid-template-columns`.
Transforme o elemento com a classe `item3` em um grid de duas colunas com uma largura de `auto` e `1fr` usando as propriedades `display` e `grid-template-columns`.
# --hints--
`item3` class should have a `grid-template-columns` property with `auto` and `1fr` as values.
O elemento de classe `item3` deve ter a propriedade `grid-template-columns` com os valores de `auto` e `1fr`.
```js
assert(
@@ -28,7 +28,7 @@ assert(
);
```
`item3` class should have a `display` property with the value of `grid`.
O elemento de classe `item3` deve ter a propriedade `display` com o valor de `grid`.
```js
assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));

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

@@ -1,6 +1,6 @@
---
id: 5a858944d96184f06fd60d61
title: Create Your First CSS Grid
title: Criar seu primeiro grid
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
forumTopicId: 301129
@@ -9,17 +9,17 @@ dashedName: create-your-first-css-grid
# --description--
Turn any HTML element into a grid container by setting its `display` property to `grid`. This gives you the ability to use all the other properties associated with CSS Grid.
Transforme qualquer elemento HTML em um grid container, definindo sua propriedade `display` com o valor de `grid`. Isso permite que você use todas as outras propriedades associadas ao CSS Grid.
**Note:** In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.
**Observação:** no CSS Grid, o elemento pai é conhecido como <dfn>contêiner</dfn> (grid container, no inglês) e seus filhos são chamados de <dfn>itens</dfn> (grid items, no inglês).
# --instructions--
Change the display of the div with the `container` class to `grid`.
Altere a exibição da div com a classe `container` para `grid`.
# --hints--
`container` class should have a `display` property with a value of `grid`.
O elemento de classe `container` deve ter a propriedade `display` com o valor de `grid`.
```js
assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
@@ -43,7 +43,7 @@ assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
background: LightGray;
/* Only change code below this line */
/* Only change code above this line */
}
</style>

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

@@ -1,6 +1,6 @@
---
id: 5a94fe0569fb03452672e45c
title: Divide the Grid Into an Area Template
title: Dividir o grid em áreas
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
forumTopicId: 301130
@@ -9,7 +9,7 @@ dashedName: divide-the-grid-into-an-area-template
# --description--
You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using `grid-template-areas` on the container like this:
Você pode agrupar as células do grid em uma <dfn>área</dfn> e dar a esta um nome personalizado. Faça isso usando a propriedade `grid-template-areas` no grid container:
```css
grid-template-areas:
@@ -18,15 +18,15 @@ grid-template-areas:
"footer footer footer";
```
The code above merges the top three cells together into an area named `header`, the bottom three cells into a `footer` area, and it makes two areas in the middle row; `advert` and `content`. **Note:** 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 (`.`) to designate an empty cell in the grid.
O código acima mescla as três células superiores em uma área chamada `header`, as três células inferiores em uma área chamada `footer` e faz duas áreas na linha do meio, `advert` e `content`. **Observação:** cada palavra no código representa uma célula e cada par de aspas representa uma linha. Além de nomes personalizados, você pode usar um ponto (`.`) para criar uma célula vazia no grid.
# --instructions--
Place the area template so that the cell labeled `advert` becomes an empty cell.
Crie um modelo de área de forma que a célula com o nome `advert` se torne uma célula vazia.
# --hints--
`container` class should have a `grid-template-areas` property similar to the preview but with`.` instead of the `advert` area.
O elemento de classe `container` deve ter a propriedade `grid-template-areas` semelhante ao do exemplo, mas com um `.` (ponto final) em vez do nome `advert`.
```js
assert(

10
curriculum/challenges/portuguese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
View File

@@ -1,6 +1,6 @@
---
id: 5a94fe4469fb03452672e460
title: Limit Item Size Using the minmax Function
title: Limitar o tamanho do item usando a função minmax
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
forumTopicId: 301131
@@ -9,21 +9,21 @@ dashedName: limit-item-size-using-the-minmax-function
# --description--
There's another built-in function to use with `grid-template-columns` and `grid-template-rows` called `minmax`. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:
Existe uma outra função que pode ser usada com as propriedades `grid-template-columns` e `grid-template-rows` chamada `minmax`. Ela é usada para limitar o tamanho dos grid items quando o grid container muda de tamanho. Para fazer isso, você precisa especificar um limite de tamanho aceitável para o seu grid item. Um exemplo:
```css
grid-template-columns: 100px minmax(50px, 200px);
```
In the code above, `grid-template-columns` is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.
No código acima, `grid-template-columns` é definido para criar duas colunas; a primeira tem 100px de largura e a segunda tem a largura mínima de 50px e a largura máxima de 200px.
# --instructions--
Using the `minmax` function, replace the `1fr` in the `repeat` function with a column size that has the minimum width of `90px` and the maximum width of `1fr`, and resize the preview panel to see the effect.
Usando a função `minmax`, substitua `1fr` na função `repeat` por um tamanho de coluna que tenha a largura mínima de `90px` e a largura máxima de `1fr`, e redimensione a janela do navegador para ver o efeito.
# --hints--
`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the minimum width of `90px` and maximum width of `1fr`.
O elemento de classe `container` deve ter a propriedade `grid-template-columns` configurada para repetir 3 colunas com largura mínima de `90px` e largura máxima de `1fr`.
```js
assert(

12
curriculum/challenges/portuguese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
View File

@@ -1,6 +1,6 @@
---
id: 5a94fe1369fb03452672e45d
title: Place Items in Grid Areas Using the grid-area Property
title: Definir a posição dos itens usando a propriedade grid-area
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
forumTopicId: 301132
@@ -9,7 +9,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
# --description--
After creating an area template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the `grid-area` property on an item like this:
Depois de criar um modelo de área para o seu grid container, como mostrado no desafio anterior, você pode definir a posição de um item em uma área referenciando o nome que você deu a ele. Para fazer isso, você deve usar a propriedade `grid-area` em um item:
```css
.item1 {
@@ -17,15 +17,15 @@ After creating an area template for your grid container, as shown in the previou
}
```
This lets the grid know that you want the `item1` class to go in the area named `header`. In this case, the item will use the entire top row because that whole row is named as the header area.
Isso informa ao grid que você deseja que a classe `item1` vá para a área chamada `header`. Nesse caso, o item usará toda a linha superior porque essa linha inteira foi nomeada como a área do cabeçalho (header).
# --instructions--
Place an element with the `item5` class in the `footer` area using the `grid-area` property.
Coloque o elemento com a classe `item5` na área `footer` usando a propriedade `grid-area`.
# --hints--
`item5` class should have a `grid-area` property that has the value of `footer`.
O elemento de classe `item5` deve ter a propriedade `grid-area` com o valor de `footer`.
```js
assert(
@@ -50,7 +50,7 @@ assert(
background: PaleGreen;
/* Only change code below this line */
/* Only change code above this line */
}

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

@@ -1,6 +1,6 @@
---
id: 5a94fe3669fb03452672e45f
title: Reduce Repetition Using the repeat Function
title: Reduzir repetição usando a função repeat
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
forumTopicId: 301133
@@ -9,37 +9,37 @@ dashedName: reduce-repetition-using-the-repeat-function
# --description--
When you used `grid-template-columns` and `grid-template-rows` to define the structure of a grid, you entered a value for each row or column you created.
Ao usar `grid-template-columns` e `grid-template-rows` para definir a estrutura de um grid, você inseriu um valor para cada linha ou coluna criada.
Let's say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the `repeat` function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.
Digamos que você queira um grid com 100 linhas da mesma altura. Não é muito prático inserir 100 valores manualmente. Felizmente, existe uma maneira melhor - usando a função `repeat` para especificar o número de vezes que você deseja que sua coluna ou linha seja repetida, seguida por uma vírgula e o valor que deseja repetir.
Here's an example that would create the 100 row grid, each row at 50px tall.
Um exemplo que criaria um grid de 100 linhas, cada linha com 50px de altura:
```css
grid-template-rows: repeat(100, 50px);
```
You can also repeat multiple values with the repeat function and insert the function amongst other values when defining a grid structure. Here's what that looks like:
Você pode declarar mias de um tamanho ao usar a função de repetição e também usá-la em conjunto de outros tamanhos quando estiver criando a estrutura de um grid. Um exemplo:
```css
grid-template-columns: repeat(2, 1fr 50px) 20px;
```
This translates to:
Também pode ser lido assim:
```css
grid-template-columns: 1fr 50px 1fr 50px 20px;
```
**Note:** The `1fr 50px` is repeated twice followed by 20px.
**Observação:** os valores `1fr 50px` são repetidos duas vezes seguido por 20px.
# --instructions--
Use `repeat` to remove repetition from the `grid-template-columns` property.
Use a função `repeat` para remover a repetição de valores na propriedade `grid-template-columns`.
# --hints--
`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the width of `1fr`.
O elemento de classe `container` deve ter a propriedade `grid-template-columns` configurada para criar 3 colunas com a largura de `1fr`.
```js
assert(

18
curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
View File

@@ -1,6 +1,6 @@
---
id: 5a9036ee38fddaf9a66b5d34
title: Use CSS Grid units to Change the Size of Columns and Rows
title: Usar unidades específicas de grid para alterar o tamanho de colunas e linhas
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd'
forumTopicId: 301134
@@ -9,29 +9,29 @@ dashedName: use-css-grid-units-to-change-the-size-of-columns-and-rows
# --description--
You can use absolute and relative units like `px` and `em` in CSS Grid to define the size of rows and columns. You can use these as well:
Você pode usar unidades absolutas e relativas como `px` e `em` no CSS Grid para definir o tamanho das linhas e colunas. Você também pode usar estas:
`fr`: sets the column or row to a fraction of the available space,
`fr`: define a coluna ou linha para uma fração do espaço disponível,
`auto`: sets the column or row to the width or height of its content automatically,
`auto`: define a coluna ou linha para a largura ou altura de seu conteúdo automaticamente,
`%`: adjusts the column or row to the percent width of its container.
`%`: ajusta a coluna ou linha para a largura percentual de seu contêiner.
Here's the code that generates the output in the preview:
Este é o código que gera o resultado na visualização a seguir:
```css
grid-template-columns: auto 50px 10% 2fr 1fr;
```
This snippet creates five columns. The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth.
Este código cria cinco colunas. A primeira coluna tem a largura de seu conteúdo, a segunda coluna tem 50px, a terceira coluna tem 10% de seu contêiner e nas duas últimas colunas o espaço restante é dividido em três seções, duas são alocadas para a quarta coluna e uma para a quinta.
# --instructions--
Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr.
Faça um grid com três colunas cujas larguras possuam as seguintes medidas, respectivamente: 1fr, 100px e 2fr.
# --hints--
`container` class should have a `grid-template-columns` property that has three columns with the following widths: `1fr, 100px, and 2fr`.
A classe `container` deve ter a propriedade `grid-template-columns` configurada para criar 3 colunas com as seguintes larguras: `1fr, 100px, 2fr`.
```js
assert(

12
curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
View File

@@ -1,6 +1,6 @@
---
id: 5a94fe2669fb03452672e45e
title: Use grid-area Without Creating an Areas Template
title: Usar grid-area sem criar um modelo de áreas
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
forumTopicId: 301135
@@ -9,27 +9,27 @@ dashedName: use-grid-area-without-creating-an-areas-template
# --description--
The `grid-area` property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:
A propriedade `grid-area` que você aprendeu no último desafio pode ser usada de outra maneira. Se o seu grid não possuir um modelo de áreas para fazer referência, você pode rapidamente definir uma área para um item assim:
```css
item1 { grid-area: 1/1/2/4; }
```
This is using the line numbers you learned about earlier to define where the area for this item will be. The numbers in the example above represent these values:
Esta abordagem usa os números de linha que você aprendeu anteriormente para definir onde ficará a área deste item. Os números no exemplo acima podem ser lidos assim:
```css
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
```
So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.
Portanto, o item no exemplo permanecerá entre as linhas 1 e 2 e entre as colunas 1 e 4.
# --instructions--
Using the `grid-area` property, place the element with `item5` class between the third and fourth horizontal lines and between the first and fourth vertical lines.
Usando a propriedade `grid-area`, coloque o elemento com a classe `item5` entre a terceira e a quarta linha e entre a primeira e a quarta coluna.
# --hints--
The `item5` class should have a `grid-area` property to make it fill the whole area between the third and fourth horizontal lines, and first and fourth vertical lines.
O elemento de classe `item5` deve ter a propriedade `grid-area` definida para ocupar toda a área entre a terceira e a quarta linha e a primeira e a quarta coluna.
```js
assert(

22
curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
View File

@@ -1,6 +1,6 @@
---
id: 5a90372638fddaf9a66b5d38
title: Use grid-column to Control Spacing
title: Usar grid-column para controlar a posição das colunas
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
forumTopicId: 301136
@@ -9,31 +9,31 @@ dashedName: use-grid-column-to-control-spacing
# --description--
Up to this point, all the properties that have been discussed are for grid containers. The `grid-column` property is the first one for use on the grid items themselves.
Até este ponto, todas as propriedades que foram discutidas são destinadas para o grid container. A propriedade `grid-column` é usada nos grid items.
The hypothetical horizontal and vertical lines that create the grid are referred to as <dfn>lines</dfn>. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.
As linhas horizontais e verticais que criam o grid são chamadas de <dfn>linhas</dfn> (lines). Essas linhas são numeradas começando com 1 no canto superior esquerdo do grid e movem para a direita para colunas e para baixo para linhas.
This is what the lines look like for a 3x3 grid:
Esta é a aparência das linhas em um grid 3x3:
<div style='position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;'><p style='left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;'>column lines</p><p style='left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>1</p><p style='left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>2</p><p style='left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>3</p><p style='left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>4</p><p style='left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;'>row lines</p><p style='left:-10%;top:-10%;font-size:130%;position:absolute;'>1</p><p style='left:-10%;top:21%;font-size:130%;position:absolute;'>2</p><p style='left:-10%;top:53%;font-size:130%;position:absolute;'>3</p><p style='left:-10%;top:85%;font-size:130%;position:absolute;'>4</p><div style='left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;'></div></div>
<div style='position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;'><p style='left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;'>linhas de coluna</p><p style='left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>1</p><p style='left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>2</p><p style='left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>3</p><p style='left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>4</p><p style='left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;'>linhas de linha (row)</p><p style='left:-10%;top:-10%;font-size:130%;position:absolute;'>1</p><p style='left:-10%;top:21%;font-size:130%;position:absolute;'>2</p><p style='left:-10%;top:53%;font-size:130%;position:absolute;'>3</p><p style='left:-10%;top:85%;font-size:130%;position:absolute;'>4</p><div style='left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;'></div></div>
To control the number of columns an item will consume, you can use the `grid-column` property in conjunction with the line numbers you want the item to start and stop at.
Para controlar a quantidade de colunas que um item ocupará, você pode usar a propriedade `grid-column` definindo o número da linha em que deseja que o item comece e pare.
Here's an example:
Um exemplo:
```css
grid-column: 1 / 3;
```
This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.
Isso fará com que o item comece na primeira linha vertical o grid à esquerda e se estenda até a 3ª linha do grid, ocupando duas colunas.
# --instructions--
Make the item with the class `item5` consume the last two columns of the grid.
Faça com que o item com a classe `item5` ocupe as duas últimas colunas do grid.
# --hints--
`item5` class should have a `grid-column` property.
O elemento de classe `item5` deve ter a propriedade `grid-column`.
```js
assert(
@@ -43,7 +43,7 @@ assert(
);
```
`item5` class should have a `grid-column` property which results in it consuming the last two columns of the grid.
O elemento de classe `item5` deve ter a propriedade `grid-column` definida para que o elemento ocupe as duas últimas colunas do grid.
```js
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;

10
curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
View File

@@ -1,6 +1,6 @@
---
id: 5a94fe7769fb03452672e463
title: Use Media Queries to Create Responsive Layouts
title: Usar media queries para criar layouts responsivos
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
forumTopicId: 301138
@@ -9,17 +9,17 @@ dashedName: use-media-queries-to-create-responsive-layouts
# --description--
CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items.
O CSS Grid pode tornar ainda mais fácil a tarefa de criar um site responsivo ao usar media queries para reorganizar as áreas do grid, alterar as dimensões do grid e reorganizar a posição dos itens.
In the preview, when the viewport width is 300px or more, the number of columns changes from 1 to 2. The advertisement area then occupies the left column completely.
Na visualização ao lado, quando a largura da janela for 300px ou mais, o número de colunas muda de 1 para 2. A área do anúncio então ocupa a coluna da esquerda completamente.
# --instructions--
When the viewport width is `400px` or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely.
Quando a largura da janela de visualização for de `400px` ou mais, faça com que a área do cabeçalho (header) ocupe completamente a linha superior e a área do rodapé (footer) ocupe completamente a linha inferior.
# --hints--
When the viewport is `400px` or more, `container` class should have a `grid-template-areas` property in which the header and footer areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.
Quando a janela de visualização for maior que `400px`, o elemento de classe `container` deve ter a propriedade `grid-template-areas` na qual as áreas de cabeçalho e rodapé ocupam o topo e as linhas inferiores, respectivamente, e o anúncio e o conteúdo ocupam as colunas esquerda e direita da linha do meio.
```js
assert(