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

Remove commas and fix minor details

Browse Source
This commit is contained in:
Carolina Knoll
2016-02-22 16:13:37 -03:00
parent 11db556b57
commit be617efcd4
1 changed files with 61 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
seed/challenges/01-front-end-development-certification/html5-and-css.json
View File

@ -56,7 +56,7 @@
"Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).", "Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).",
"Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.", "Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.",
"Para passar nos testes deste desafio, mude o texto do elemento <code>h1</code> para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"." "Para passar nos testes deste desafio, mude o texto do elemento <code>h1</code> para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -104,7 +104,7 @@
"Este elemento indica ao navegador a forma de mostrar o texto que contém.", "Este elemento indica ao navegador a forma de mostrar o texto que contém.",
"Os elementos <code>h2</code> são ligeiramente menores que os elementos <code>h1</code>. Há também os elementos <code>h3</code>, <code>h4</code>, <code>h5</code> e <code>h6</code>.", "Os elementos <code>h2</code> são ligeiramente menores que os elementos <code>h1</code>. Há também os elementos <code>h3</code>, <code>h4</code>, <code>h5</code> e <code>h6</code>.",
"Adicione uma tag <code>h2</code> que diga \"CatPhotoApp\" para criar um segundo <code>elemento</code> HTML abaixo de seu elemento <code>h1</code> chamado \"Hello World\"." "Adicione uma tag <code>h2</code> que diga \"CatPhotoApp\" para criar um segundo <code>elemento</code> HTML abaixo de seu elemento <code>h1</code> chamado \"Hello World\"."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -144,7 +144,7 @@
"Você pode criar um elemento <code>p</code> assim:", "Você pode criar um elemento <code>p</code> assim:",
"<code>&#60;p&#62;Sou uma tag p!&#60;/p&#62;</code>", "<code>&#60;p&#62;Sou uma tag p!&#60;/p&#62;</code>",
"Crie um elemento <code>p</code> abaixo de seu elemento <code>h2</code>, e dê a ele o texto \"Hello Paragraph\"." "Crie um elemento <code>p</code> abaixo de seu elemento <code>h2</code>, e dê a ele o texto \"Hello Paragraph\"."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -192,7 +192,7 @@
"Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.", "Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.",
"Você pode iniciar um comentário com <code>&#60;!--</code> e terminar seu comentário com <code>--&#62;</code>.", "Você pode iniciar um comentário com <code>&#60;!--</code> e terminar seu comentário com <code>--&#62;</code>.",
"Remova o comentário dos elementos <code>h1</code>, <code>h2</code> e <code>p</code>." "Remova o comentário dos elementos <code>h1</code>, <code>h2</code> e <code>p</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -236,7 +236,7 @@
"Lembre-se que para iniciar um comentário você precisa utilizar <code>&#60;!--</code>, e para terminar um comentário é necessário usar <code>--&#62;</code>.", "Lembre-se que para iniciar um comentário você precisa utilizar <code>&#60;!--</code>, e para terminar um comentário é necessário usar <code>--&#62;</code>.",
"Aqui, você deverá terminar o comentário antes que seu elemento <code>h2</code> inicie.", "Aqui, você deverá terminar o comentário antes que seu elemento <code>h2</code> inicie.",
"Comente o elemento <code>h1</code> e o elemento <code>p</code>, e deixe o elemento <code>h2</code> sem nenhum comentário." "Comente o elemento <code>h1</code> e o elemento <code>p</code>, e deixe o elemento <code>h2</code> sem nenhum comentário."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -280,7 +280,7 @@
"O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.", "O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.",
"Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado <code>Kitty Ipsum</code>.", "Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado <code>Kitty Ipsum</code>.",
"Substitua o texto dentro do seu elemento <code>p</code> pelas primeiras palavras deste texto Kitty Ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>" "Substitua o texto dentro do seu elemento <code>p</code> pelas primeiras palavras deste texto Kitty Ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -321,7 +321,7 @@
"Nosso celular não possui muito espaço vertical.", "Nosso celular não possui muito espaço vertical.",
"Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.", "Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.",
"Apague o elemento <code>h1</code> para simplificar o nosso espaço." "Apague o elemento <code>h1</code> para simplificar o nosso espaço."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -367,7 +367,7 @@
"Você pode mudar a cor do texto de seu elemento <code>h2</code> para azul assim:", "Você pode mudar a cor do texto de seu elemento <code>h2</code> para azul assim:",
"<code>&#60;h2 style=\"color: blue\"&#62;CatPhotoApp&#60;/h2&#62;</code>", "<code>&#60;h2 style=\"color: blue\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
"Mude o estilo do elemento <code>h2</code> para que seu texto fique com a cor vermelha." "Mude o estilo do elemento <code>h2</code> para que seu texto fique com a cor vermelha."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -432,7 +432,7 @@
"<code>&#60;/style&#62;</code>", "<code>&#60;/style&#62;</code>",
"Observe que é importante utilizar as chaves de abertura e de fechamento (<code>{</code> e <code>}</code>) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.", "Observe que é importante utilizar as chaves de abertura e de fechamento (<code>{</code> e <code>}</code>) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.",
"Apague o atributo <code>style</code> de seu elemento <code>h2</code> e então crie um elemento <code>style</code> CSS. Adicione o CSS necessário para fazer com que todos os elementos <code>h2</code> tenham a cor azul." "Apague o atributo <code>style</code> de seu elemento <code>h2</code> e então crie um elemento <code>style</code> CSS. Adicione o CSS necessário para fazer com que todos os elementos <code>h2</code> tenham a cor azul."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -509,7 +509,7 @@
"Note que em seu elemento <code>style</code> CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.", "Note que em seu elemento <code>style</code> CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.",
"Ao invés de criar um novo elemento <code>style</code>, tente eliminar a declaração de estilo de <code>h2</code> dos elementos de estilo existentes, e troque ela pela declaração de classe <code>.red-text</code>.", "Ao invés de criar um novo elemento <code>style</code>, tente eliminar a declaração de estilo de <code>h2</code> dos elementos de estilo existentes, e troque ela pela declaração de classe <code>.red-text</code>.",
"Crie uma classe CSS chamada <code>red-text</code> e então a aplique em seu elemento <code>h2</code>." "Crie uma classe CSS chamada <code>red-text</code> e então a aplique em seu elemento <code>h2</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -568,7 +568,7 @@
"Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:", "Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:",
"<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>", "<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>",
"Adicione a classe <code>red-text</code> aos seus elementos <code>h2</code> e <code>p</code>." "Adicione a classe <code>red-text</code> aos seus elementos <code>h2</code> e <code>p</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -623,7 +623,7 @@
"<code>}</code>", "<code>}</code>",
"Crie um segundo elemento <code>p</code> que tenha o seguinte texto Kitty Ipsum: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>", "Crie um segundo elemento <code>p</code> que tenha o seguinte texto Kitty Ipsum: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"Dentro da mesma tag <code>&#60;style&#62;</code> que criamos para sua classe <code>red-text</code>, modifique o <code>font-size</code> dos elementos <code>p</code> para que tenha um tamanho de 16 pixels (<code>16px</code>)." "Dentro da mesma tag <code>&#60;style&#62;</code> que criamos para sua classe <code>red-text</code>, modifique o <code>font-size</code> dos elementos <code>p</code> para que tenha um tamanho de 16 pixels (<code>16px</code>)."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -678,7 +678,7 @@
"<code>&nbsp;&nbsp;font-family: Sans-serif;</code>", "<code>&nbsp;&nbsp;font-family: Sans-serif;</code>",
"<code>}</code>", "<code>}</code>",
"Faça com que todos os elementos <code>p</code> utilizem o estilo de fonte <code>Monospace</code>." "Faça com que todos os elementos <code>p</code> utilizem o estilo de fonte <code>Monospace</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -739,7 +739,7 @@
"Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:", "Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:",
"<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>", "<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"Agora, estableça <code>Lobster</code> como o valor para font-family em seu elemento <code>h2</code>." "Agora, estableça <code>Lobster</code> como o valor para font-family em seu elemento <code>h2</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -808,7 +808,7 @@
"<code>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;</code>", "<code>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;</code>",
"<code>}</code>", "<code>}</code>",
"Agora, comente o seu chamado para a fonte do Google, para que a fonte <code>Lobster</code> não esteja disponível. Note como a fonte degrada para <code>Monospace</code>." "Agora, comente o seu chamado para a fonte do Google, para que a fonte <code>Lobster</code> não esteja disponível. Note como a fonte degrada para <code>Monospace</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -873,7 +873,7 @@
"Observe que na maior parte dos casos, os elementos <code>img</code> são de fechamento automático.", "Observe que na maior parte dos casos, os elementos <code>img</code> são de fechamento automático.",
"Agora, tente fazer isso com essa imagem:", "Agora, tente fazer isso com essa imagem:",
"<code>https://bit.ly/fcc-relaxing-cat</code>" "<code>https://bit.ly/fcc-relaxing-cat</code>"
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -942,7 +942,7 @@
"<code>&nbsp;&nbsp;}</code>", "<code>&nbsp;&nbsp;}</code>",
"<code>&#60;/style&#62;</code>", "<code>&#60;/style&#62;</code>",
"Crie uma classe chamada <code>smaller-image</code> e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura." "Crie uma classe chamada <code>smaller-image</code> e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1027,7 +1027,7 @@
"Crie uma classe chamada <code>thick-green-border</code> que insira uma borda verde de 10 pixels de largura com um estilo <code>solid</code> ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.", "Crie uma classe chamada <code>thick-green-border</code> que insira uma borda verde de 10 pixels de largura com um estilo <code>solid</code> ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.",
"Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo <code>class</code>. Por exemplo:", "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo <code>class</code>. Por exemplo:",
"<code>&lt;img class=\"clase1 clase2\"&gt;</code>" "<code>&lt;img class=\"clase1 clase2\"&gt;</code>"
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1103,7 +1103,7 @@
"Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado <code>border-radius</code>.", "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado <code>border-radius</code>.",
"Você pode especificar um <code>border-radius</code> com pixels. Adicione um <code>border-radius</code> de <code>10px</code> para a sua foto.", "Você pode especificar um <code>border-radius</code> com pixels. Adicione um <code>border-radius</code> de <code>10px</code> para a sua foto.",
"Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o <code>border-radius</code> tanto para a classe <code>.thick-green-border</code> como para a classe <code>.smaller-image</code>." "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o <code>border-radius</code> tanto para a classe <code>.thick-green-border</code> como para a classe <code>.smaller-image</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1168,7 +1168,7 @@
"descriptionPtBR": [ "descriptionPtBR": [
"Assim como pixels, você também pode usar o <code>border-radius</code> com porcentagens.", "Assim como pixels, você também pode usar o <code>border-radius</code> com porcentagens.",
"Dê para a sua foto de gato um <code>border-radius</code> de <code>50%</code>." "Dê para a sua foto de gato um <code>border-radius</code> de <code>50%</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1247,7 +1247,7 @@
"Veja um exemplo:", "Veja um exemplo:",
"<code>&#60;p&#62;Aqui está um &#60;a href=\"http://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>", "<code>&#60;p&#62;Aqui está um &#60;a href=\"http://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
"Crie um elemento <code>a</code> que esteja ligado ao site <code>http://freecatphotoapp.com</code> e tenha como <code>texto de âncora</code> \"fotos de gatos\"." "Crie um elemento <code>a</code> que esteja ligado ao site <code>http://freecatphotoapp.com</code> e tenha como <code>texto de âncora</code> \"fotos de gatos\"."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1332,7 +1332,7 @@
"<code>&#60;p&#62;Este é um &#60;a href=\"http://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>", "<code>&#60;p&#62;Este é um &#60;a href=\"http://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
"<code>Aninhamento</code> significa ter um elemento no interior de outro elemento.", "<code>Aninhamento</code> significa ter um elemento no interior de outro elemento.",
"Agora, aninhe o elemento <code>a</code> existente dentro de um novo elemento <code>p</code> de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum." "Agora, aninhe o elemento <code>a</code> existente dentro de um novo elemento <code>p</code> de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1402,7 +1402,7 @@
"As vezes você pode querer adicionar elementos <code>a</code> em sua página web antes de saber o link que as ligará.", "As vezes você pode querer adicionar elementos <code>a</code> em sua página web antes de saber o link que as ligará.",
"Isso também é útil quando você desejar mudar o comportamento de um link utilizando <code>jQuery</code>, o que vamos aprender mais adiante.", "Isso também é útil quando você desejar mudar o comportamento de um link utilizando <code>jQuery</code>, o que vamos aprender mais adiante.",
"Substitua o atributo <code>href</code> de seu elemento <code>a</code> por um <code>#</code>, também conhecido como símbolo de <em>hash</em> ou hashtag. Isso o transformará em um link inativo." "Substitua o atributo <code>href</code> de seu elemento <code>a</code> por um <code>#</code>, também conhecido como símbolo de <em>hash</em> ou hashtag. Isso o transformará em um link inativo."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1480,7 +1480,7 @@
"Aninhe sua imagem dentro de um elemento <code>a</code>. Temos aqui um exemplo.", "Aninhe sua imagem dentro de um elemento <code>a</code>. Temos aqui um exemplo.",
"<code>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>", "<code>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
"Lembre de usar <code>#</code> como atributo <code>href</code> de seu elemento <code>a</code> para tornar o link inativo." "Lembre de usar <code>#</code> como atributo <code>href</code> de seu elemento <code>a</code> para tornar o link inativo."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1557,7 +1557,7 @@
"Você pode adicionar um atributo <code>alt</code> já no elemento <code>img</code> assim:", "Você pode adicionar um atributo <code>alt</code> já no elemento <code>img</code> assim:",
"<code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\"&#62</code>", "<code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\"&#62</code>",
"Adicione um atributo <code>alt</code> com o texto <code>A cute orange cat lying on its back</code> para a nossa foto com o gato." "Adicione um atributo <code>alt</code> com o texto <code>A cute orange cat lying on its back</code> para a nossa foto com o gato."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1645,7 +1645,7 @@
"<code>&#60;/ul&#62;</code>", "<code>&#60;/ul&#62;</code>",
"Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".", "Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".",
"Apague os dois últimos elementos <code>p</code> e no final da página crie uma lista não ordenada com três coisas que os gatos adoram." "Apague os dois últimos elementos <code>p</code> e no final da página crie uma lista não ordenada com três coisas que os gatos adoram."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1741,7 +1741,7 @@
"<code>&#60;/ol&#62;</code>", "<code>&#60;/ol&#62;</code>",
"Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".", "Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".",
"Crie uma lista ordenada com as três coisas que os gatos mais odeiam." "Crie uma lista ordenada com as três coisas que os gatos mais odeiam."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1829,7 +1829,7 @@
"<code>&#60;input type=\"text\"&#62;</code>", "<code>&#60;input type=\"text\"&#62;</code>",
"Note que os elementos <code>input</code> são de fechamento automático.", "Note que os elementos <code>input</code> são de fechamento automático.",
"Crie um elemento <code>input</code> de tipo <code>text</code> abaixo de suas listas." "Crie um elemento <code>input</code> de tipo <code>text</code> abaixo de suas listas."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -1913,7 +1913,7 @@
"Você pode criar um texto indicativo assim:", "Você pode criar um texto indicativo assim:",
"<code>&#60;input type=\"text\" placeholder=\"isso é um texto indicativo\"&#62;</code>", "<code>&#60;input type=\"text\" placeholder=\"isso é um texto indicativo\"&#62;</code>",
"Estabeleça o valor do <code>texto indicativo</code> do seu campo de texto como \"cat photo URL\"." "Estabeleça o valor do <code>texto indicativo</code> do seu campo de texto como \"cat photo URL\"."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -2086,7 +2086,7 @@
"Aqui está um exemplo de um botão de enviar:", "Aqui está um exemplo de um botão de enviar:",
"<code>&#60;button type=\" submit\"&#62;este botão enviará o formulário&#60;/button&#62;</code>", "<code>&#60;button type=\" submit\"&#62;este botão enviará o formulário&#60;/button&#62;</code>",
"Adicione um botão de enviar ao seu elemento <code>form</code> com o tipo <code>submit</code> e com o texto \"Submit\"." "Adicione um botão de enviar ao seu elemento <code>form</code> com o tipo <code>submit</code> e com o texto \"Submit\"."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -2173,7 +2173,7 @@
"Por exemplo, se você quiser tornar obrigatório um campo de texto, basta adicionar a palavra <code>required</code> dentro de seu elemento <code>input</code> assim: <code>&#60;input type=\"text\" required&#62;</code>", "Por exemplo, se você quiser tornar obrigatório um campo de texto, basta adicionar a palavra <code>required</code> dentro de seu elemento <code>input</code> assim: <code>&#60;input type=\"text\" required&#62;</code>",
"Faça com que seu campo de texto seja obrigatório, de forma que o usuário não possa enviar o formulário sem ter completado esse campo.", "Faça com que seu campo de texto seja obrigatório, de forma que o usuário não possa enviar o formulário sem ter completado esse campo.",
"Após isso, tente enviar o formulário sem digitar nenhum texto no campo. Percebe como seu formulário HTML5 mostra que o campo é obrigatório?" "Após isso, tente enviar o formulário sem digitar nenhum texto no campo. Percebe como seu formulário HTML5 mostra que o campo é obrigatório?"
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -2276,7 +2276,7 @@
"Temos aqui um exemplo de um botão de seleção/rádio:", "Temos aqui um exemplo de um botão de seleção/rádio:",
"<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>", "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
"Adicione um par de botões de seleção ao seu formulário. Um deles deve ter a opção <code>indoor</code> enquanto o outro deve ter a opção <code>outdoor</code>." "Adicione um par de botões de seleção ao seu formulário. Um deles deve ter a opção <code>indoor</code> enquanto o outro deve ter a opção <code>outdoor</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -2376,7 +2376,7 @@
"Veja aqui um exemplo de uma caixa de verificação:", "Veja aqui um exemplo de uma caixa de verificação:",
"<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Carinhoso&#60;/label&#62;</code>", "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Carinhoso&#60;/label&#62;</code>",
"Adicione ao seu formulário um conjunto de três caixas de verificação. Cada uma delas deve estar aninhada dentro de seu próprio elemento <code>label</code>. As três devem compartilhar o atributo <code>name</code>." "Adicione ao seu formulário um conjunto de três caixas de verificação. Cada uma delas deve estar aninhada dentro de seu próprio elemento <code>label</code>. As três devem compartilhar o atributo <code>name</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -2568,7 +2568,7 @@
"Da mesma forma que qualquer outro elemento sem fechamento automático, você deve abrir uma tag <code>div</code> com <code>&#60;div&#62;</code> e fechá-la em outra linha com <code>&#60;/div&#62;</code>.", "Da mesma forma que qualquer outro elemento sem fechamento automático, você deve abrir uma tag <code>div</code> com <code>&#60;div&#62;</code> e fechá-la em outra linha com <code>&#60;/div&#62;</code>.",
"Tente colocar sua tag de abertura <code>div</code> acima do elemento <code>p</code> \"Things cat love\", e sua tag de fechamento de <code>div</code> depois da tag de fechamento do <code>ol</code>, para que cada uma de suas listas esteja dentro de um <code>div</code>.", "Tente colocar sua tag de abertura <code>div</code> acima do elemento <code>p</code> \"Things cat love\", e sua tag de fechamento de <code>div</code> depois da tag de fechamento do <code>ol</code>, para que cada uma de suas listas esteja dentro de um <code>div</code>.",
"Aninhe suas listas \"Things cats love\" e \"Things cats hate\" no interior de um único elemento <code>div</code>." "Aninhe suas listas \"Things cats love\" e \"Things cats hate\" no interior de um único elemento <code>div</code>."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -2861,7 +2861,7 @@
"<code>}</code>", "<code>}</code>",
"Note que dentro de seu elemento <code>style</code>, você deve sempre referenciar uma classe colocando um <code>.</code> logo antes de seu nome. Já com uma id, você deve referenciar colocando um <code>#</code> antes de seu nome.", "Note que dentro de seu elemento <code>style</code>, você deve sempre referenciar uma classe colocando um <code>.</code> logo antes de seu nome. Já com uma id, você deve referenciar colocando um <code>#</code> antes de seu nome.",
"Dê ao seu formulário, que agora possui o atributo code>id</code> em <code>cat-photo-form</code>, um fundo verde." "Dê ao seu formulário, que agora possui o atributo code>id</code> em <code>cat-photo-form</code>, um fundo verde."
], ]
}, },
{ {
"id": "bad88fee1348bd9aedf08825", "id": "bad88fee1348bd9aedf08825",
@ -2941,7 +2941,7 @@
"Aqui, podemos ver que o quadro verde e o quadro vermelho se aninham dentro do quadro amarelo. Leve em conta que o quadro vermelho tem mais preenchimento (<code>padding</code>) que o quadro verde.", "Aqui, podemos ver que o quadro verde e o quadro vermelho se aninham dentro do quadro amarelo. Leve em conta que o quadro vermelho tem mais preenchimento (<code>padding</code>) que o quadro verde.",
"Quando você aumenta o preenchimento da caixa verde, a distância entre o texto <code>padding</code> e a borda ao seu redor também será maior.", "Quando você aumenta o preenchimento da caixa verde, a distância entre o texto <code>padding</code> e a borda ao seu redor também será maior.",
"Mude o preenchimento (<code>padding</code>) da caixa verde para que coincida com a de seu quadrado vermelho." "Mude o preenchimento (<code>padding</code>) da caixa verde para que coincida com a de seu quadrado vermelho."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -3012,10 +3012,10 @@
"namePtBR": "Ajuste a Margem de um Elemento", "namePtBR": "Ajuste a Margem de um Elemento",
"descriptionPtBR": [ "descriptionPtBR": [
"A margem (<code>margin</code>) de um elemento controla a quantidade de espaço entre a borda (<code>border</code>) e os elementos ao seu redor.", "A margem (<code>margin</code>) de um elemento controla a quantidade de espaço entre a borda (<code>border</code>) e os elementos ao seu redor.",
"Aqui, podemos ver que a caixa verde e a caixa vermelha se aninham dentro da caixa amarela. Note que a caixa vermelha possui a margem maior que a caixa verde, fazendo com que ela pareça menor." "Aqui, podemos ver que a caixa verde e a caixa vermelha se aninham dentro da caixa amarela. Note que a caixa vermelha possui a margem maior que a caixa verde, fazendo com que ela pareça menor.",
"Quando você aumenta a margem (<code>margin</code>) da caixa verde, a distância entre a borda e os elementos ao seu redor também aumentará.", "Quando você aumenta a margem (<code>margin</code>) da caixa verde, a distância entre a borda e os elementos ao seu redor também aumentará.",
"Mude a margem (<code>margin</code>) da caixa verde para que coincida com a margem da caixa vermelha." "Mude a margem (<code>margin</code>) da caixa verde para que coincida com a margem da caixa vermelha."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -3161,7 +3161,7 @@
"As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (<code>padding</code>) diferente em cada um de seus lados.", "As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (<code>padding</code>) diferente em cada um de seus lados.",
"O CSS permite controlar o preenchimento (<code>padding</code>) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> e <code>padding-left</code>.", "O CSS permite controlar o preenchimento (<code>padding</code>) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> e <code>padding-left</code>.",
"Dê para a caixa verde um preenchimento (<code>padding</code>) de <code>40px</code> nas partes superior e esquerda, e de apenas <code>20px</code> em suas partes inferior e direita." "Dê para a caixa verde um preenchimento (<code>padding</code>) de <code>40px</code> nas partes superior e esquerda, e de apenas <code>20px</code> em suas partes inferior e direita."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -3231,9 +3231,9 @@
"namePtBR": "Dê Valores Diferentes de Margem a Cada Lado de um Elemento", "namePtBR": "Dê Valores Diferentes de Margem a Cada Lado de um Elemento",
"descriptionPtBR": [ "descriptionPtBR": [
"Talvez você queira personalizar um elemento para que possua uma margem (<code>margin</code>) diferente em cada um de seus lados.", "Talvez você queira personalizar um elemento para que possua uma margem (<code>margin</code>) diferente em cada um de seus lados.",
"O CSS permite controlar a margem de um elemento em todos os seus quatro lados: superior, direito, inferior e esquerdo, com as propriedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> e <code>margin-left</code>. ", "O CSS permite controlar a margem de um elemento em todos os seus quatro lados: superior, direito, inferior e esquerdo, com as propriedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> e <code>margin-left</code>.",
"Dê para a caixa verde uma margem (<code>margin</code>) de <code>40px</code> nas partes superior e esquerda, e de apenas <code>20px</code> nas partes inferior e direita." "Dê para a caixa verde uma margem (<code>margin</code>) de <code>40px</code> nas partes superior e esquerda, e de apenas <code>20px</code> nas partes inferior e direita."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -3306,7 +3306,7 @@
"<code>padding: 10px 20px 10px 20px;</code>", "<code>padding: 10px 20px 10px 20px;</code>",
"Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.", "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.",
"Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.green-box</code>\" um preenchimento de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito." "Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.green-box</code>\" um preenchimento de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -3382,7 +3382,7 @@
"<code>margin: 10px 20px 10px 20px;</code>", "<code>margin: 10px 20px 10px 20px;</code>",
"Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.", "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.",
"Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.green-box</code>\" uma margem de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito." "Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.green-box</code>\" uma margem de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
], ]
"type": "waypoint" "type": "waypoint"
}, },
{ {
@ -3425,7 +3425,7 @@
"<code>body {</code>", "<code>body {</code>",
"<code>&nbsp;&nbsp;background-color: black;</code>", "<code>&nbsp;&nbsp;background-color: black;</code>",
"<code>}</code>" "<code>}</code>"
], ]
}, },
{ {
"id": "bad87fee1348bd9aedf08746", "id": "bad87fee1348bd9aedf08746",
@ -3471,7 +3471,7 @@
"Em primeiro lugar, crie um elemento <code>h1</code> com o texto <code>Hello World</code>", "Em primeiro lugar, crie um elemento <code>h1</code> com o texto <code>Hello World</code>",
"Depois, dê a todos os elementos de sua página uma cor verde (<code>green</code>) adicionando <code>color: green;</code> na declaração de estilo de seu elemento <code>body</code>.", "Depois, dê a todos os elementos de sua página uma cor verde (<code>green</code>) adicionando <code>color: green;</code> na declaração de estilo de seu elemento <code>body</code>.",
"Por último, dê ao seu elemento <code>body</code> o tipo de fonte <code>Monospace</code> adicionando <code>font-family: Monospace;</code> na declaração de estilo de seu elemento <code>body</code>." "Por último, dê ao seu elemento <code>body</code> o tipo de fonte <code>Monospace</code> adicionando <code>font-family: Monospace;</code> na declaração de estilo de seu elemento <code>body</code>."
], ]
}, },
{ {
"id": "bad87fee1348bd9aedf08756", "id": "bad87fee1348bd9aedf08756",
@ -3571,7 +3571,7 @@
"<code>class=\"class1 class2\"</code>", "<code>class=\"class1 class2\"</code>",
"Nota: A ordem em que as classes são listadas em HTML não tem importância.", "Nota: A ordem em que as classes são listadas em HTML não tem importância.",
"Contudo, a ordem de declarações de <code>classe</code> no <code>&#60;style&#62;</code> é importante. A segunda declaração sempre terá precedência pela primeira. Já que <code>.blue-text</code> é declarado depois, ele irá sobrepor os atributos de <code>.pink-text</code>." "Contudo, a ordem de declarações de <code>classe</code> no <code>&#60;style&#62;</code> é importante. A segunda declaração sempre terá precedência pela primeira. Já que <code>.blue-text</code> é declarado depois, ele irá sobrepor os atributos de <code>.pink-text</code>."
], ]
}, },
{ {
"id": "bad87fee1348bd8aedf06756", "id": "bad87fee1348bd8aedf06756",
@ -3637,7 +3637,7 @@
"<code>&nbsp;&nbsp;color: brown;</code>", "<code>&nbsp;&nbsp;color: brown;</code>",
"<code>}</code>", "<code>}</code>",
"Nota: Não importa se você declara este CSS acima ou abaixo da classe de texto cor de rosa, já que atributos id sempre terão prioridade." "Nota: Não importa se você declara este CSS acima ou abaixo da classe de texto cor de rosa, já que atributos id sempre terão prioridade."
], ]
}, },
{ {
"id": "bad87fee1348bd9aedf06756", "id": "bad87fee1348bd9aedf06756",
@ -3692,7 +3692,7 @@
"Use um estilo <code>inline</code> para tentar fazer com que nosso elemento <code>h1</code> tenha a cor branca. Relembre que estilos inline são assim:", "Use um estilo <code>inline</code> para tentar fazer com que nosso elemento <code>h1</code> tenha a cor branca. Relembre que estilos inline são assim:",
"<code>&#60;h1 style=\"color: green\"&#62;</code>", "<code>&#60;h1 style=\"color: green\"&#62;</code>",
"Deixe as classes <code>blue-text</code> e <code>pink-text</code> em seu elemento <code>h1</code>." "Deixe as classes <code>blue-text</code> e <code>pink-text</code> em seu elemento <code>h1</code>."
], ]
}, },
{ {
"id": "bad87fee1348bd9aedf07756", "id": "bad87fee1348bd9aedf07756",
@ -3754,7 +3754,7 @@
"Vamos adicionar nossa palavra-clave <code>!important</code> para sua declaração de cor de <code>pink-text</code> para que possamos estar 100% seguros que seu elemento <code>h1</code> será sempre cor de rosa.", "Vamos adicionar nossa palavra-clave <code>!important</code> para sua declaração de cor de <code>pink-text</code> para que possamos estar 100% seguros que seu elemento <code>h1</code> será sempre cor de rosa.",
"Um exemplo para fazer isso é:", "Um exemplo para fazer isso é:",
"<code>color: red !important;</code>" "<code>color: red !important;</code>"
], ]
}, },
{ {
"id": "bad87fee1348bd9aedf08726", "id": "bad87fee1348bd9aedf08726",
@ -3791,7 +3791,7 @@
"O sistema <code>Decimal</code> nos permite representar quantidades numéricas com os dígitos de zero a nove - assim como nós os utilizamos durante o nosso dia a dia. Já o sistema <code>Hexadecimal</code> inclui estes 10 dígitos e também as letras A, B, C, D, E e F. Isso significa que o Hexadecimal possui um total de 16 dígitos possíveis, ao invés dos 10 possíveis que podemos usar com nosso sistema numérico normal de base 10.", "O sistema <code>Decimal</code> nos permite representar quantidades numéricas com os dígitos de zero a nove - assim como nós os utilizamos durante o nosso dia a dia. Já o sistema <code>Hexadecimal</code> inclui estes 10 dígitos e também as letras A, B, C, D, E e F. Isso significa que o Hexadecimal possui um total de 16 dígitos possíveis, ao invés dos 10 possíveis que podemos usar com nosso sistema numérico normal de base 10.",
"No CSS, utilizamos 6 dígitos hexadecimais para representar as cores. Por exemplo, <code>#000000</code> é o valor mais baixo possível, e representa a cor preta.", "No CSS, utilizamos 6 dígitos hexadecimais para representar as cores. Por exemplo, <code>#000000</code> é o valor mais baixo possível, e representa a cor preta.",
"Substitua a palavra <code>black</code> na cor de fundo (<code>background-color</code>) de nosso elemento <code>body</code> pela sua representação hexadecimal <code>#000000</code>." "Substitua a palavra <code>black</code> na cor de fundo (<code>background-color</code>) de nosso elemento <code>body</code> pela sua representação hexadecimal <code>#000000</code>."
], ]
}, },
{ {
"id": "bad87fee1348bd9aedf08725", "id": "bad87fee1348bd9aedf08725",
@ -3825,7 +3825,7 @@
"<code>0</code> é o dígito mais baixo em código hexadecimal, e representa a completa ausência de cor.", "<code>0</code> é o dígito mais baixo em código hexadecimal, e representa a completa ausência de cor.",
"<code>F</code> é o dígito mais alto em código hexadecimal, e representa o máximo de claridade possível.", "<code>F</code> é o dígito mais alto em código hexadecimal, e representa o máximo de claridade possível.",
"Vamos fazer com que a cor de fundo (<code>background-color</code>) em nosso elemento <code>body</code> seja branca, mudando seu código hexadecimal para <code>#FFFFFF</code>." "Vamos fazer com que a cor de fundo (<code>background-color</code>) em nosso elemento <code>body</code> seja branca, mudando seu código hexadecimal para <code>#FFFFFF</code>."
], ]
}, },
{ {
"id": "bad87fee1348bd9aedf08724", "id": "bad87fee1348bd9aedf08724",
@ -3865,7 +3865,7 @@
"Os códigos hexadecimais seguem o formato vermelho-verde-azul (<em>red-green-blue</em>), ou formato <code>rgb</code>. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.", "Os códigos hexadecimais seguem o formato vermelho-verde-azul (<em>red-green-blue</em>), ou formato <code>rgb</code>. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.",
"Sendo assim, para conseguir um vermelho brilhante, basta que você use <code>F</code> (o dígito mais alto possível) para o primeiro e o segundo dígitos, e <code>0</code> (o dígito mais baixo possível) para o terceiro, quarto, quinto e sexto dígito.", "Sendo assim, para conseguir um vermelho brilhante, basta que você use <code>F</code> (o dígito mais alto possível) para o primeiro e o segundo dígitos, e <code>0</code> (o dígito mais baixo possível) para o terceiro, quarto, quinto e sexto dígito.",
"Faça com que a cor de fundo (<code>background-color</code>) do elemento <code>body</code> seja vermelho, ao dar o código hexadecimal <code>#FF0000</code>." "Faça com que a cor de fundo (<code>background-color</code>) do elemento <code>body</code> seja vermelho, ao dar o código hexadecimal <code>#FF0000</code>."
], ]
}, },
{ {
"id": "bad87fee1348bd9aedf08723", "id": "bad87fee1348bd9aedf08723",
@ -3933,7 +3933,7 @@
"Relembre que códigos hexadecimais seguem o formato vermelho-verde-azul (<em>red-green-blue</em>), ou formato <code>rgb</code>. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.", "Relembre que códigos hexadecimais seguem o formato vermelho-verde-azul (<em>red-green-blue</em>), ou formato <code>rgb</code>. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.",
"Para conseguir o azul mais brilhante, utilizamos <code>F</code> (o dígito mais alto possível) no quinto e no sexto dígito, e <code>0</code> (o dígito mais baixo possível) para todos os outros dígitos.", "Para conseguir o azul mais brilhante, utilizamos <code>F</code> (o dígito mais alto possível) no quinto e no sexto dígito, e <code>0</code> (o dígito mais baixo possível) para todos os outros dígitos.",
"Faça com que a cor de fundo (<code>background-color</code>) do elemento <code>body</code> seja azul usando o código hexadecimal <code>#0000FF</code>." "Faça com que a cor de fundo (<code>background-color</code>) do elemento <code>body</code> seja azul usando o código hexadecimal <code>#0000FF</code>."
], ]
}, },
{ {
"id": "bad87fee1348bd9aedf08721", "id": "bad87fee1348bd9aedf08721",
@ -4001,7 +4001,7 @@
"A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.", "A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.",
"Também podemos criar tons de cinza diferentes ao misturar essas três cores.", "Também podemos criar tons de cinza diferentes ao misturar essas três cores.",
"Faça com que a cor de fundo do elemento <code>body</code> seja cinza, usando o código hexadecimal <code>#808080</code>." "Faça com que a cor de fundo do elemento <code>body</code> seja cinza, usando o código hexadecimal <code>#808080</code>."
], ]
}, },
{ {
"id": "bad87fee1348bd9aedf08720", "id": "bad87fee1348bd9aedf08720",
@ -4069,7 +4069,7 @@
"Por exemplo, o vermelho que é <code>#FF0000</code> em código hexadecimal pode ser abreviado a <code>#F00</code>. Isso quer dizer que podemos usar um dígito para vermelho, um dígito para verde e um dígito para azul.", "Por exemplo, o vermelho que é <code>#FF0000</code> em código hexadecimal pode ser abreviado a <code>#F00</code>. Isso quer dizer que podemos usar um dígito para vermelho, um dígito para verde e um dígito para azul.",
"Fazer isso reduz o número total de possíveis cores para ao redor de 4.000. Apesar disso, os navegadores interpretarão <code>#FF0000</code> e <code>#F00</code> exatamente como a mesma cor.", "Fazer isso reduz o número total de possíveis cores para ao redor de 4.000. Apesar disso, os navegadores interpretarão <code>#FF0000</code> e <code>#F00</code> exatamente como a mesma cor.",
"Continue, tente usar <code>#F00</code> para fazer com que a cor de fundo do elemento <code>body</code> seja vermelha." "Continue, tente usar <code>#F00</code> para fazer com que a cor de fundo do elemento <code>body</code> seja vermelha."
], ]
}, },
{ {
"id": "bad87fee1348bd9aede08718", "id": "bad87fee1348bd9aede08718",
@ -4118,7 +4118,7 @@
"Ao invés de utilizar 6 dígitos hexadecimais, com <code>rgb</code> você especifica o brilho de cada cor com um número entre 0 e 255.", "Ao invés de utilizar 6 dígitos hexadecimais, com <code>rgb</code> você especifica o brilho de cada cor com um número entre 0 e 255.",
"Se você fizer a matemática, 16 vezes 16 é igual a 256 valores totais. Sendo assim, o <code>rgb</code>, que começa a contar desde zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.", "Se você fizer a matemática, 16 vezes 16 é igual a 256 valores totais. Sendo assim, o <code>rgb</code>, que começa a contar desde zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.",
"Vamos substituir o código hexadecimal da cor de fundo do nosso elemento <code>body</code> pelo valor RGB para preto: <code>rgb(0, 0, 0)</code>." "Vamos substituir o código hexadecimal da cor de fundo do nosso elemento <code>body</code> pelo valor RGB para preto: <code>rgb(0, 0, 0)</code>."
], ]
}, },
{ {
"id": "bad88fee1348bd9aedf08726", "id": "bad88fee1348bd9aedf08726",
@ -4161,7 +4161,7 @@
"<code>rgb(255, 255, 255)</code>", "<code>rgb(255, 255, 255)</code>",
"Ao invés de utilizar 6 dígitos hexadecimais, com <code>rgb</code> você especifica o brilho de cada cor com um número entre 0 e 255.", "Ao invés de utilizar 6 dígitos hexadecimais, com <code>rgb</code> você especifica o brilho de cada cor com um número entre 0 e 255.",
"Substitua o código hexadecimal da cor de fundo do nosso elemento <code>body</code> que possui o valor RGB para preto, pelo valor <code>rgb</code> para branco: <code>rgb(255, 255, 255)</code>." "Substitua o código hexadecimal da cor de fundo do nosso elemento <code>body</code> que possui o valor RGB para preto, pelo valor <code>rgb</code> para branco: <code>rgb(255, 255, 255)</code>."
], ]
}, },
{ {
"id": "bad89fee1348bd9aedf08724", "id": "bad89fee1348bd9aedf08724",
@ -4195,7 +4195,7 @@
"Da mesma forma que com códigos em hexadecimal, você pode representar cores diferentes em RGB através do uso de combinações com diferentes valores.", "Da mesma forma que com códigos em hexadecimal, você pode representar cores diferentes em RGB através do uso de combinações com diferentes valores.",
"Esses valores seguem o padrão de RGB: O primeiro número representa vermelho, o segundo representa verde, e o terceiro representa azul.", "Esses valores seguem o padrão de RGB: O primeiro número representa vermelho, o segundo representa verde, e o terceiro representa azul.",
"Mude a cor de fundo do elemento <code>body</code> para vermelho usando seu valor RGB: <code>rgb(255, 0, 0)</code>." "Mude a cor de fundo do elemento <code>body</code> para vermelho usando seu valor RGB: <code>rgb(255, 0, 0)</code>."
], ]
}, },
{ {
"id": "bad80fee1348bd9aedf08723", "id": "bad80fee1348bd9aedf08723",
@ -4223,7 +4223,7 @@
"namePtBR": "Use Valores RBG para Dar a Cor Verde a Elementos", "namePtBR": "Use Valores RBG para Dar a Cor Verde a Elementos",
"descriptionPtBR": [ "descriptionPtBR": [
"Agora, mude a cor de fundo do elemento <code>body</code> para verde usando seu valor RGB: <code>rgb (0, 255, 0)</code>." "Agora, mude a cor de fundo do elemento <code>body</code> para verde usando seu valor RGB: <code>rgb (0, 255, 0)</code>."
], ]
}, },
{ {
"id": "bad81fee1348bd9aedf08722", "id": "bad81fee1348bd9aedf08722",
@ -4278,11 +4278,11 @@
"Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.", "Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.",
"Cambia el color de fondo del elemento <code>body</code> a anaranjado usando su valor RGB: <code>rgb(255, 165, 0)</code>" "Cambia el color de fondo del elemento <code>body</code> a anaranjado usando su valor RGB: <code>rgb(255, 165, 0)</code>"
], ],
"namePtBR": "Use Valores RBG Misturar Cores", "namePtBR": "Use Valores RBG para Misturar Cores",
"descriptionPtBR": [ "descriptionPtBR": [
"Assim como com código hexadecimal, você pode misturar as cores com RGB através do uso de combinações de valores diferentes.", "Assim como com código hexadecimal, você pode misturar as cores com RGB através do uso de combinações de valores diferentes.",
"Mude a cor de fundo do elemento <code>body</code> para alaranjado usando seu valor RGB: <code>rgb(255, 165, 0)</code>." "Mude a cor de fundo do elemento <code>body</code> para alaranjado usando seu valor RGB: <code>rgb(255, 165, 0)</code>."
], ]
} }
] ]
} }