chore(i18n,curriculum): update translations (#42487)
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: Criar media queries
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cqwKrtm'
|
||||
forumTopicId: 301139
|
||||
dashedName: create-a-media-query
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Media Queries são uma nova técnica introduzida no CSS3 que altera a apresentação do conteúdo baseando-se nas diferentes dimensões da janela de exibição (viewport). A janela de exibição é a área de uma página web visível para o usuário, e é diferente dependendo do dispositivo utilizado para acessar o site.
|
||||
|
||||
Media Queries consistem em um media type. Se esse media type corresponder ao tipo de dispositivo no qual o documento é exibido, os estilos são aplicados. Você pode ter quantos seletores e estilos quiser dentro de sua media query.
|
||||
|
||||
Aqui está um exemplo de media query que retorna o conteúdo quando a largura do dispositivo é menor ou igual a `100px`:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
e a media query a seguir retorna o conteúdo quando a altura do dispositivo é maior ou igual a `350px`:
|
||||
|
||||
```css
|
||||
@media (min-height: 350px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
Lembre-se de que o CSS dentro da media query é aplicado apenas se o tipo de mídia corresponder ao do dispositivo que está sendo usado.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Adicione uma media query, de modo que a tag `p` tenha a propriedade `font-size` com o valor de `10px` quando a altura do dispositivo for menor ou igual a `800px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve declarar uma `@media` query para dispositivos que possuam uma altura (`height`) menor ou igual a `800px`.
|
||||
|
||||
```js
|
||||
const media = new __helpers.CSSHelp(document).getCSSRules('media');
|
||||
assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));
|
||||
```
|
||||
|
||||
O elemento `p` deve ter um `font-size` de `10px` quando a altura (`height`) do dispositivo for menor ou igual a `800px`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
|
||||
assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");
|
||||
```
|
||||
|
||||
O elemento `p` deve ter um `font-size` inicial de `20px` quando a altura (`height`) do dispositivo for menor ou igual a `800px`.
|
||||
|
||||
```js
|
||||
const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
|
||||
assert(ifPFirst?.style?.fontSize === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
</style>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-height: 800px) {
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b09
|
||||
title: Tornar uma imagem responsiva
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cz763UD'
|
||||
forumTopicId: 301140
|
||||
dashedName: make-an-image-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Tornar imagens responsivas com CSS é muito simples. Você só precisa adicionar essas propriedades a uma imagem:
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
```
|
||||
|
||||
A propriedade `max-width` de valor `100%` garantirá que a imagem nunca seja mais larga do que o contêiner em que está inserida. A propriedade `height` de valor `auto`, por sua vez, fará com que a imagem mantenha sua proporção original.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Adicione as regras de estilo à classe `responsive-img` para torná-la responsiva. A imagem não pode ser mais larga do que seu contêiner (neste caso, é a janela de visualização). A proporção original deve ser mantida. Depois de adicionar seu código, redimensione a visualização para ver como suas imagens se comportam.
|
||||
|
||||
# --hints--
|
||||
|
||||
A classe `responsive-img` deve ter a propriedade `max-width` com o valor de `100%`.
|
||||
|
||||
```js
|
||||
assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
|
||||
```
|
||||
|
||||
A classe `responsive-img` deve ter a propriedade `height` com o valor de `auto`.
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?auto;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.responsive-img {
|
||||
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.responsive-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: Tornar a tipografia responsiva
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/crzN7T8'
|
||||
forumTopicId: 301141
|
||||
dashedName: make-typography-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Em vez de usar `em` ou `px` para dimensionar o texto, você pode usar unidades relativas à viewport para ter uma tipografia responsiva. As unidades de viewport, como as porcentagens, são unidades relativas, mas são baseadas em itens diferentes. As unidades de viewport são relativas às dimensões da viewport (largura ou altura) de um dispositivo e as porcentagens são relativas ao tamanho do elemento pai.
|
||||
|
||||
As quatro unidades de viewport são:
|
||||
|
||||
<ul><li><code>vw</code> (largura da viewport): <code>10vw</code> seria 10% da largura da viewport.</li><li><code>vh</code> (altura da viewport): <code>3vh</code> seria 3% da altura da viewport.</li><li><code>vmin</code> (mínimo da viewport): <code>70vmin</code> seria 70% da menor dimensão da viewport (altura ou largura).</li><li><code>vmax</code> (máximo da viewport): <code>100vmax</code> seria 100% da maior dimensão da viewport (altura ou largura).</li></ul>
|
||||
|
||||
Vemos aqui um exemplo que define a largura da tag `body` para 30% da largura da viewport.
|
||||
|
||||
```css
|
||||
body { width: 30vw; }
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Defina a largura (`width`) da tag `h2` para 80% da largura da viewport e a largura (`width`) do parágrafo para 75% da menor dimensão da viewport.
|
||||
|
||||
# --hints--
|
||||
|
||||
A tag `h2` deve ter a propriedade `width` com o valor de 80vw.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
|
||||
);
|
||||
```
|
||||
|
||||
A tag `p` deve ter a propriedade `width` com o valor de 75vmin.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<h2>Importantus Ipsum</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
width: 80vw;
|
||||
}
|
||||
p {
|
||||
width: 75vmin;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2>Importantus Ipsum</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0a
|
||||
title: Usar uma imagem Retina para telas de resolução mais alta
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
|
||||
forumTopicId: 301142
|
||||
dashedName: use-a-retina-image-for-higher-resolution-displays
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Com o aumento dos dispositivos conectados à Internet, seus tamanhos e especificações variam bastante. As telas que esses dispositivos usam podem ser diferentes externa e internamente. A densidade de pixels é um aspecto que pode ser diferente de um dispositivo para outro e essa densidade é conhecida como Pixel Por Polegada (PPI) ou pontos por polegada (DPI). A tela mais famosa é aquela conhecida como "Tela Retina" nos notebooks Apple MacBook Pro mais recentes e, nos últimos tempos, em computadores iMac. Devido à diferença na densidade de pixels entre uma tela "Retina" e "não Retina", algumas imagens que não foram feitas com uma tela de alta resolução em mente podem parecer "pixeladas" quando renderizadas em uma tela de alta resolução.
|
||||
|
||||
A maneira mais simples de fazer com que suas imagens apareçam de maneira adequada em telas de alta resolução, como a "tela retina" do MacBook Pro, é definir os valores de largura (`width`) e altura (`height`) da imagem para a metade do arquivo original. Aqui vemos um exemplo de imagem que usa apenas metade da altura e largura originais:
|
||||
|
||||
```html
|
||||
<style>
|
||||
img { height: 250px; width: 250px; }
|
||||
</style>
|
||||
<img src="coolPic500x500" alt="A most excellent picture">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Defina a largura (`width`) e a altura (`height`) da tag `img` para a metade de seus valores originais. Nesse caso, a altura (`height`) original e a largura (`width`) original são `200px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
A tag `img` deve ter a propriedade `width` com o valor de 100 pixels.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').width === 100);
|
||||
```
|
||||
|
||||
A tag `img` deve ter a propriedade `height` com o valor de 100 pixels.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').height === 100);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
Reference in New Issue
Block a user