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

Add languages Russian, Arabic, Chinese, Portuguese (#18305)

Browse Source
This commit is contained in:
Beau Carnes
2018-10-10 18:03:03 -04:00
committed by mrugesh mohapatra
parent 09d3eca712
commit 2ca3a2093f
5517 changed files with 371466 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.portuguese.md Normal file
View File

@@ -0,0 +1,60 @@
---
id: 587d78b0367417b2b2512b08
title: Create a Media Query
challengeType: 0
videoUrl: ''
localeTitle: Criar uma consulta de mídia
---
## Description
<section id="description"> Consultas de mídia são uma nova técnica introduzida no CSS3 que altera a apresentação do conteúdo com base em diferentes tamanhos de viewport. A janela de visualização é uma área visível de um usuário de uma página da Web e é diferente dependendo do dispositivo usado para acessar o site. Consultas de mídia consistem em um tipo de mídia e, se esse tipo de mídia corresponder ao tipo de dispositivo em que o documento é exibido, os estilos serão aplicados. Você pode ter tantos seletores e estilos dentro de sua consulta de mídia quanto desejar. Veja um exemplo de uma consulta de mídia que retorna o conteúdo quando a largura do dispositivo é menor ou igual a 100px: <code>@media (max-width: 100px) { /* CSS Rules */ }</code> e a consulta de mídia a seguir retorna o conteúdo quando o a altura do dispositivo é maior ou igual a 350px: @media <code>@media (min-height: 350px) { /* CSS Rules */ }</code> Lembre-se, o CSS dentro da consulta de mídia é aplicado somente se o tipo de mídia corresponder ao do dispositivo que está sendo usado. </section>
## Instructions
<section id="instructions"> Adicione uma consulta de mídia para que a tag <code>p</code> tenha um <code>font-size</code> de <code>font-size</code> de 10px quando a altura do dispositivo for menor ou igual a 800px. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu elemento <code>p</code> deve ter o <code>font-size</code> da <code>font-size</code> de 10px quando a <code>height</code> do dispositivo for menor ou igual a 800px.
testString: 'assert($("p").css("font-size") == "10px", "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.");'
- text: Declare uma consulta <code>@media</code> para dispositivos com uma <code>height</code> menor ou igual a 800px.
testString: 'assert(code.match(/@media\s*?\(\s*?max-height\s*?:\s*?800px\s*?\)/g), "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
p {
font-size: 20px;
}
/* Add media query below */
</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>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

57
curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.portuguese.md Normal file
View File

@@ -0,0 +1,57 @@
---
id: 587d78b1367417b2b2512b09
title: Make an Image Responsive
challengeType: 0
videoUrl: ''
localeTitle: Faça uma imagem responsiva
---
## Description
<section id="description"> Fazer imagens responsivas com CSS é realmente muito simples. Em vez de aplicar uma largura absoluta a um elemento: <code>img { width: 720px; }</code> Você pode usar: <blockquote> img { <br> max-width: 100%; <br> display: bloco; <br> altura: auto; <br> } </blockquote> A propriedade <code>max-width</code> de 100% dimensiona a imagem para se ajustar à largura do contêiner, mas a imagem não se estende mais do que a largura original. Definir a propriedade de <code>display</code> para bloquear altera a imagem de um elemento in-line (seu padrão) para um elemento de bloco em sua própria linha. A propriedade <code>height</code> do auto mantém a proporção original da imagem. </section>
## Instructions
<section id="instructions"> Adicione regras de estilo para a tag <code>img</code> para torná-lo responsivo ao tamanho de seu contêiner. Ele deve exibir como um elemento de nível de bloco, ele deve caber toda a largura de seu contêiner sem esticar e deve manter sua proporção original. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Sua tag <code>img</code> deve ter uma <code>max-width</code> definida como 100%.
testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.");'
- text: Sua tag <code>img</code> deve ter um conjunto de <code>display</code> para bloquear.
testString: 'assert($("img").css("display") == "block", "Your <code>img</code> tag should have a <code>display</code> set to block.");'
- text: Sua tag <code>img</code> deve ter uma <code>height</code> definida como automática.
testString: 'assert(code.match(/height:\s*?auto;/g), "Your <code>img</code> tag should have a <code>height</code> set to auto.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
</style>
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

56
curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.portuguese.md Normal file
View File

@@ -0,0 +1,56 @@
---
id: 587d78b1367417b2b2512b0c
title: Make Typography Responsive
challengeType: 0
videoUrl: ''
localeTitle: Faça tipografia responsiva
---
## Description
<section id="description"> Em vez de usar <code>em</code> ou <code>px</code> para dimensionar texto, você pode usar unidades de viewport para tipografia responsiva. As unidades de viewport, como porcentagens, são unidades relativas, mas são baseadas em itens diferentes. As unidades de porta de visualização são relativas às dimensões da janela de visualização (largura ou altura) de um dispositivo e as porcentagens são relativas ao tamanho do elemento de contêiner pai. As quatro unidades de viewport diferentes são: <ul><li> <code>vw: 10vw</code> seria 10% da largura da janela de visualização. </li><li> <code>vh: 3vh</code> seria 3% da altura da viewport. </li><li> <code>vmin: 70vmin</code> seria 70% da dimensão menor da viewport (altura vs. largura). </li><li> <code>vmax: 100vmax</code> seria 100% da dimensão maior da viewport (altura vs. largura). </li></ul></section>
## Instructions
<section id="instructions"> Defina a <code>width</code> da tag <code>h2</code> para 80% da largura da viewport e a <code>width</code> do parágrafo como 75% da dimensão menor da viewport. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Sua tag <code>h2</code> deve ter uma <code>width</code> de 80vw.
testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), "Your <code>h2</code> tag should have a <code>width</code> of 80vw.");'
- text: Sua tag <code>p</code> deve ter uma <code>width</code> de 75vmin.
testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), "Your <code>p</code> tag should have a <code>width</code> of 75vmin.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

55
curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.portuguese.md Normal file
View File

@@ -0,0 +1,55 @@
---
id: 587d78b1367417b2b2512b0a
title: Use a Retina Image for Higher Resolution Displays
challengeType: 0
videoUrl: ''
localeTitle: Use uma imagem de retina para exibições de maior resolução
---
## Description
<section id="description"> A maneira mais simples de fazer com que suas imagens apareçam &quot;retina&quot; (e otimizá-las para exibições de retina) é definir seus valores de <code>width</code> e <code>height</code> como apenas metade do que o arquivo original é. Aqui está um exemplo de uma imagem que usa apenas metade da altura e largura originais: <blockquote> &lt;style&gt; <br> img {altura: 250px; largura: 250px; } <br> &lt;/ style&gt; <br> &lt;img src = &quot;coolPic500x500&quot; alt = &quot;Uma imagem excelente&quot;&gt; </blockquote></section>
## Instructions
<section id="instructions"> Defina a <code>width</code> e a <code>height</code> da tag <code>img</code> para metade de seus valores originais. Nesse caso, a <code>height</code> original e a <code>width</code> original são de 200 px. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Sua tag <code>img</code> deve ter uma <code>width</code> de 100 pixels.
testString: 'assert($("img").css("width") == "100px", "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.");'
- text: Sua tag <code>img</code> deve ter uma <code>height</code> de 100 pixels.
testString: 'assert($("img").css("height") == "100px", "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
</style>
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>