Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: Add a Submit Button to a Form
|
||||
challengeType: 0
|
||||
guideUrl: 'https://portuguese.freecodecamp.org/guide/certificates/add-a-submit-button-to-a-form'
|
||||
videoUrl: ''
|
||||
localeTitle: Adicionar um botão Enviar para um formulário
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Vamos adicionar um botão de <code>submit</code> ao seu formulário. Clicar neste botão enviará os dados do seu formulário para o URL que você especificou com o atributo de <code>action</code> do seu formulário. Aqui está um exemplo de botão de envio: <code><button type="submit">this button submits the form</button></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione um botão como o último elemento do seu elemento de <code>form</code> com um tipo de <code>submit</code> e "Enviar" como seu texto. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu formulário deve ter um botão dentro dele.
|
||||
testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
|
||||
- text: Seu botão de envio deve ter o <code>type</code> atributo definido para <code>submit</code> .
|
||||
testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");'
|
||||
- text: Seu botão de envio só deve ter o texto "Enviar".
|
||||
testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
|
||||
- text: Certifique-se de que seu elemento de <code>button</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: Add Images to Your Website
|
||||
challengeType: 0
|
||||
guideUrl: 'https://portuguese.freecodecamp.org/guide/certificates/add-images-to-your-website'
|
||||
videoUrl: ''
|
||||
localeTitle: Adicionar imagens ao seu site
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode adicionar imagens ao seu site usando o elemento <code>img</code> e apontar para o URL de uma imagem específica usando o atributo <code>src</code> . Um exemplo disso seria: <code><img src="https://www.your-image-source.com/your-image.jpg"></code> Note que os elementos <code>img</code> são de fechamento automático. Todos os elementos <code>img</code> <strong>devem</strong> ter um atributo <code>alt</code> . O texto dentro de um atributo <code>alt</code> é usado para leitores de tela para melhorar a acessibilidade e é exibido se a imagem não for carregada. Nota: Se a imagem é puramente decorativa, usar um atributo <code>alt</code> vazio é uma prática recomendada. Idealmente, o atributo <code>alt</code> não deve conter caracteres especiais, a menos que seja necessário. Vamos adicionar um atributo <code>alt</code> ao nosso exemplo de <code>img</code> acima: <code><img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Vamos tentar adicionar uma imagem ao nosso site: Insira uma tag <code>img</code> antes do elemento <code>h2</code> . Agora defina o atributo <code>src</code> para que aponte para este URL: <code>https://bit.ly/fcc-relaxing-cat</code> Por fim, não se esqueça de dar à sua imagem um texto <code>alt</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Sua página deve ter um elemento de imagem.
|
||||
testString: 'assert($("img").length > 0, "Your page should have an image element.");'
|
||||
- text: Sua imagem deve ter um atributo <code>src</code> que aponte para a imagem do gatinho.
|
||||
testString: 'assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), "Your image should have a <code>src</code> attribute that points to the kitten image.");'
|
||||
- text: Seu elemento de imagem <strong>deve</strong> ter um atributo <code>alt</code> .
|
||||
testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element <strong>must</strong> have an <code>alt</code> attribute.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: Add Placeholder Text to a Text Field
|
||||
challengeType: 0
|
||||
guideUrl: 'https://portuguese.freecodecamp.org/guide/certificates/add-placeholder-text-to-a-text-field'
|
||||
videoUrl: ''
|
||||
localeTitle: Adicionar texto do marcador de posição a um campo de texto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O texto do espaço reservado é o que é exibido no elemento de <code>input</code> antes que o usuário introduza alguma coisa. Você pode criar um texto de espaço reservado da seguinte forma: <code><input type="text" placeholder="this is placeholder text"></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Defina o valor de <code>placeholder</code> da sua <code>input</code> texto para "cat photo URL". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Adicione um atributo de <code>placeholder</code> ao elemento de <code>input</code> texto existente.
|
||||
testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");'
|
||||
- text: Defina o valor do seu atributo de espaço reservado para "cat photo URL".
|
||||
testString: 'assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), "Set the value of your placeholder attribute to "cat photo URL".");'
|
||||
- text: O elemento de <code>input</code> finalizado deve ter uma sintaxe válida.
|
||||
testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|".*?"|[\^"">\s]+))?)+\s*|\s*)\/?>/gi), "The finished <code>input</code> element should have valid syntax.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text">
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: Check Radio Buttons and Checkboxes by Default
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Verificar botões de rádio e caixas de seleção por padrão
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode definir uma caixa de seleção ou um botão de opção para ser verificado por padrão usando o atributo <code>checked</code> . Para fazer isso, basta adicionar a palavra "checked" ao interior de um elemento de entrada. Por exemplo: <code><input type="radio" name="test-name" checked></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Defina o primeiro de seus <code>radio buttons</code> e a primeira das suas <code>checkboxes</code> de <code>checkboxes</code> para ambos ser marcada por padrão. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu primeiro botão de opção no formulário deve estar marcado por padrão.
|
||||
testString: 'assert($("input[type="radio"]").prop("checked"), "Your first radio button on your form should be checked by default.");'
|
||||
- text: Sua primeira caixa de seleção no formulário deve ser marcada por padrão.
|
||||
testString: 'assert($("input[type="checkbox"]").prop("checked"), "Your first checkbox on your form should be checked by default.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: Comment out HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Comente o HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Lembre-se que para começar um comentário, você precisa usar <code><!--</code> e para finalizar um comentário, você precisa usar <code>--></code> Aqui você precisa terminar o comentário antes do seu elemento <code>h2</code> começar. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Comente seu elemento <code>h1</code> e seu elemento <code>p</code> , mas não seu elemento <code>h2</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Comente o seu elemento <code>h1</code> para que ele não fique visível na sua página.
|
||||
testString: 'assert(($("h1").length === 0), "Comment out your <code>h1</code> element so that it is not visible on your page.");'
|
||||
- text: Deixe seu elemento <code>h2</code> descomentado para que fique visível na sua página.
|
||||
testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");'
|
||||
- text: Comente o seu elemento <code>p</code> para que ele não fique visível na sua página.
|
||||
testString: 'assert(($("p").length === 0), "Comment out your <code>p</code> element so that it is not visible on your page.");'
|
||||
- text: Certifique-se de fechar cada um dos seus comentários com <code>--></code> .
|
||||
testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--></code>.");'
|
||||
- text: Não mude a ordem do <code>h1</code> <code>h2</code> ou <code>p</code> no código.
|
||||
testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") , "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: Create a Bulleted Unordered List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar uma lista não ordenada com marcadores
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O HTML possui um elemento especial para criar <code>unordered lists</code> ou listas de estilo de ponto de marcador. As listas não ordenadas começam com um elemento <code><ul></code> abertura, seguido por qualquer número de elementos <code><li></code> . Finalmente, listas não ordenadas fecham com um <code></ul></code> Por exemplo: <blockquote> <ul> <br> <li> leite </ li> <br> <li> queijo </ li> <br> </ ul> </blockquote> criaria uma lista de estilo de ponto de bala de "leite" e "queijo". </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Remova os dois últimos elementos <code>p</code> e crie uma lista não ordenada de três coisas que os gatos adoram na parte inferior da página. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Crie um elemento <code>ul</code> .
|
||||
testString: 'assert($("ul").length > 0, "Create a <code>ul</code> element.");'
|
||||
- text: Você deve ter três elementos <code>li</code> no seu elemento <code>ul</code> .
|
||||
testString: 'assert($("ul li").length > 2, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
- text: Certifique-se de que seu elemento <code>ul</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
- text: Certifique-se de que seus elementos <code>li</code> tenham tags de fechamento.
|
||||
testString: 'assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length, "Make sure your <code>li</code> elements have closing tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: Create a Form Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crie um elemento de formulário
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode criar formulários da Web que realmente enviam dados para um servidor usando nada além de HTML puro. Você pode fazer isso especificando uma ação no seu elemento de <code>form</code> . Por exemplo: <code><form action="/url-where-you-want-to-submit-form-data"></form></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Aninhe seu campo de texto dentro de um elemento de <code>form</code> e adicione o atributo <code>action="/submit-cat-photo"</code> ao elemento form. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Aninhe seu elemento de entrada de texto em um elemento de <code>form</code> .
|
||||
testString: 'assert($("form") && $("form").children("input") && $("form").children("input").length > 0, "Nest your text input element within a <code>form</code> element.");'
|
||||
- text: Certifique-se de que seu <code>form</code> tenha um atributo de <code>action</code> definido como <code>/submit-cat-photo</code>
|
||||
testString: 'assert($("form").attr("action") === "/submit-cat-photo", "Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>");'
|
||||
- text: Certifique-se de que seu elemento de <code>form</code> tenha tags de abertura e fechamento bem formadas.
|
||||
testString: 'assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length, "Make sure your <code>form</code> element has well-formed open and close tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: Create a Set of Checkboxes
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar um conjunto de caixas de seleção
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Os formulários geralmente usam <code>checkboxes</code> de <code>checkboxes</code> para perguntas que podem ter mais de uma resposta. Caixas de seleção são um tipo de <code>input</code> Cada uma de suas caixas de seleção pode ser aninhada em seu próprio elemento de <code>label</code> . Ao envolver um elemento de <code>input</code> dentro de um elemento de <code>label</code> , ele associará automaticamente a entrada da caixa de seleção ao elemento de rótulo que a envolve. Todas as entradas da caixa de seleção relacionadas devem ter o mesmo atributo de <code>name</code> . É considerada a melhor prática definir explicitamente o relacionamento entre uma <code>input</code> caixa de seleção e seu <code>label</code> correspondente <code>label</code> definindo o atributo <code>for</code> no elemento <code>label</code> para corresponder ao atributo <code>id</code> do elemento de <code>input</code> associado. Aqui está um exemplo de uma caixa de seleção: <code><label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione ao seu formulário um conjunto de três caixas de seleção. Cada caixa de seleção deve estar aninhada em seu próprio elemento <code>label</code> . Todos os três devem compartilhar o atributo do <code>name</code> da <code>personality</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Sua página deve ter três elementos de caixa de seleção.
|
||||
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
|
||||
- text: Cada um dos três elementos da caixa de seleção deve estar aninhado em seu próprio elemento <code>label</code> .
|
||||
testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own <code>label</code> element.");'
|
||||
- text: Certifique-se de que cada um dos elementos da <code>label</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length, "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
- text: Dê a suas caixas de seleção o atributo de <code>name</code> da <code>personality</code> .
|
||||
testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: Create a Set of Radio Buttons
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar um conjunto de botões de rádio
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode usar <code>radio buttons</code> de <code>radio buttons</code> para perguntas nas quais deseja que o usuário só forneça uma resposta dentre várias opções. Botões de rádio são um tipo de <code>input</code> . Cada um dos seus botões de opção pode ser aninhado em seu próprio elemento de <code>label</code> . Ao envolver um elemento de <code>input</code> dentro de um elemento de <code>label</code> , ele associará automaticamente a entrada do botão de opção ao elemento de rótulo em torno dele. Todos os botões de opção relacionados devem ter o mesmo atributo de <code>name</code> para criar um grupo de botões de opção. Ao criar um grupo de rádio, a seleção de um único botão de opção desmarcará automaticamente os outros botões dentro do mesmo grupo, garantindo que apenas uma resposta seja fornecida pelo usuário. Aqui está um exemplo de um botão de opção: <blockquote> <label> <br> <input type = "radio" name = "interior-exterior"> Interior <br> </ label> </blockquote> É considerado uma boa prática definir um atributo <code>for</code> no elemento <code>label</code> , com um valor que corresponda ao valor do atributo <code>id</code> do elemento <code>input</code> . Isso permite que tecnologias assistivas criem um relacionamento vinculado entre o rótulo e o elemento de <code>input</code> filho. Por exemplo: <blockquote> <label for = "indoor"> <br> <input id = "indoor" type = "rádio" name = "interior-exterior"> Interior <br> </ label> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione um par de botões de opção ao formulário, cada um aninhado em seu próprio elemento de rótulo. Deve-se ter a opção de <code>indoor</code> e o outro deve ter a opção de <code>outdoor</code> . Ambos devem compartilhar o atributo <code>name</code> de <code>indoor-outdoor</code> para criar um grupo de rádio. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Sua página deve ter dois elementos de botão de opção.
|
||||
testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
|
||||
- text: Dê aos seus botões de rádio o atributo <code>name</code> de <code>indoor-outdoor</code> .
|
||||
testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.");'
|
||||
- text: Cada um dos seus dois elementos de botão de opção deve ser aninhado em seu próprio elemento de <code>label</code> .
|
||||
testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button elements should be nested in its own <code>label</code> element.");'
|
||||
- text: Certifique-se de que cada um dos elementos da <code>label</code> tenha uma tag de fechamento.
|
||||
testString: 'assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length), "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
- text: Um de seus botões de rádio deve ter o rótulo <code>indoor</code> .
|
||||
testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");'
|
||||
- text: Um de seus botões de rádio deve ter o rótulo <code>outdoor</code> .
|
||||
testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");'
|
||||
- text: Cada um dos seus elementos de botão de opção deve ser adicionado na tag de <code>form</code> .
|
||||
testString: 'assert($("label").parent().get(0).tagName.match("FORM"), "Each of your radio button elements should be added within the <code>form</code> tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: Create a Text Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crie um campo de texto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Agora vamos criar um formulário web. Os elementos de entrada são uma maneira conveniente de obter informações do usuário. Você pode criar uma entrada de texto assim: <code><input type="text"></code> Observe que os elementos de <code>input</code> são de fechamento automático. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Crie um elemento de <code>input</code> do tipo <code>text</code> abaixo das suas listas. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu aplicativo deve ter um elemento de <code>input</code> do tipo <code>text</code> .
|
||||
testString: 'assert($("input[type=text]").length > 0, "Your app should have an <code>input</code> element of type <code>text</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: Create an Ordered List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crie uma lista ordenada
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O HTML tem outro elemento especial para criar <code>ordered lists</code> ou listas numeradas. As listas ordenadas começam com um elemento <code><ol></code> abertura, seguido por qualquer número de elementos <code><li></code> . Finalmente, listas ordenadas fecham com um <code></ol></code> Por exemplo: <blockquote> <ol> <br> <li> Garfield </ li> <br> <li> Sylvester </ li> <br> </ ol> </blockquote> criaria uma lista numerada de "Garfield" e "Sylvester". </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Crie uma lista ordenada das 3 principais coisas que os gatos mais odeiam. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Você deve ter uma lista ordenada para "Top 3 coisas que os gatos odeiam:"'
|
||||
testString: 'assert((/Top 3 things cats hate:/i).test($("ol").prev().text()), "You should have an ordered list for "Top 3 things cats hate:"");'
|
||||
- text: 'Você deve ter uma lista não ordenada de "Coisas que os gatos adoram:"'
|
||||
testString: 'assert((/Things cats love:/i).test($("ul").prev().text()), "You should have an unordered list for "Things cats love:"");'
|
||||
- text: Você deve ter apenas um elemento <code>ul</code> .
|
||||
testString: 'assert.equal($("ul").length, 1, "You should have only one <code>ul</code> element.");'
|
||||
- text: Você deve ter apenas um <code>ol</code> elemento.
|
||||
testString: 'assert.equal($("ol").length, 1, "You should have only one <code>ol</code> element.");'
|
||||
- text: Você deve ter três elementos <code>li</code> no seu elemento <code>ul</code> .
|
||||
testString: 'assert.equal($("ul li").length, 3, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
- text: Você deve ter três elementos <code>li</code> dentro do seu elemento <code>ol</code> .
|
||||
testString: 'assert.equal($("ol li").length, 3, "You should have three <code>li</code> elements within your <code>ol</code> element.");'
|
||||
- text: Certifique-se de que seu elemento <code>ul</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
- text: Certifique-se de que seu elemento <code>ol</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length, "Make sure your <code>ol</code> element has a closing tag.");'
|
||||
- text: Certifique-se de que seu elemento <code>li</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length, "Make sure your <code>li</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: Declare the Doctype of an HTML Document
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Declarar o Doctype de um documento HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Os desafios até agora cobriram elementos HTML específicos e seus usos. No entanto, existem alguns elementos que fornecem estrutura geral à sua página e devem ser incluídos em todos os documentos HTML. Na parte superior do seu documento, você precisa informar ao navegador qual versão do HTML sua página está usando. O HTML é uma linguagem em evolução e é atualizado regularmente. A maioria dos principais navegadores suporta a especificação mais recente, que é HTML5. No entanto, as páginas da web mais antigas podem usar versões anteriores do idioma. Você diz ao navegador essas informações adicionando a tag <code><!DOCTYPE ...></code> na primeira linha, onde a parte " <code>...</code> " é a versão do HTML. Para HTML5, você usa <code><!DOCTYPE html></code> . O <code>!</code> e <code>DOCTYPE</code> maiúsculas é importante, especialmente para navegadores mais antigos. O <code>html</code> não faz <code>html</code> entre maiúsculas e minúsculas. Em seguida, o restante do código HTML precisa ser agrupado em tags <code>html</code> . A abertura <code><html></code> vai diretamente abaixo da linha <code><!DOCTYPE html></code> , e o fechamento <code></html></code> vai no final da página. Aqui está um exemplo da estrutura da página: <blockquote> <! DOCTYPE html> <br> <html> <br> <! - Seu código HTML vai aqui -> <br> </ html> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione uma tag <code>DOCTYPE</code> para HTML5 à parte superior do documento HTML em branco no editor de código. Sob ele, adicione as tags <code>html</code> abertura e fechamento, que envolvem um elemento <code>h1</code> . O título pode incluir qualquer texto. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve incluir uma tag <code><!DOCTYPE html></code> .
|
||||
testString: 'assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi), "Your code should include a <code><!DOCTYPE html></code> tag.");'
|
||||
- text: Deve haver um elemento <code>html</code> .
|
||||
testString: 'assert($("html").length == 1, "There should be one <code>html</code> element.");'
|
||||
- text: As tags <code>html</code> devem envolver um elemento <code>h1</code> .
|
||||
testString: 'assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi), "The <code>html</code> tags should wrap around one <code>h1</code> element.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: Define the Head and Body of an HTML Document
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Definir a cabeça e o corpo de um documento HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode adicionar outro nível de organização em seu documento HTML dentro das tags <code>html</code> com os elementos <code>head</code> e <code>body</code> . Qualquer marcação com informações sobre sua página entraria na tag <code>head</code> . Então, qualquer marcação com o conteúdo da página (o que é exibido para um usuário) entraria na tag <code>body</code> . Elementos de metadados, como <code>link</code> , <code>meta</code> , <code>title</code> e <code>style</code> , normalmente entram no elemento <code>head</code> . Aqui está um exemplo de layout de uma página: <blockquote> <! DOCTYPE html> <br> <html> <br> <cabeça> <br> <! - elementos de metadados -> <br> </ head> <br> <body> <br> <! - conteúdo da página -> <br> </ body> <br> </ html> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Edite a marcação para que haja uma <code>head</code> e um <code>body</code> . O elemento <code>head</code> deve incluir apenas o <code>title</code> , e o elemento <code>body</code> deve incluir apenas o <code>h1</code> e o <code>p</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Deve haver apenas um elemento <code>head</code> na página.
|
||||
testString: 'assert($("head").length == 1, "There should be only one <code>head</code> element on the page.");'
|
||||
- text: Deve haver apenas um elemento de <code>body</code> na página.
|
||||
testString: 'assert($("body").length == 1, "There should be only one <code>body</code> element on the page.");'
|
||||
- text: O elemento <code>head</code> deve ser um filho do elemento <code>html</code> .
|
||||
testString: 'assert($("html").children("head").length == 1, "The <code>head</code> element should be a child of the <code>html</code> element.");'
|
||||
- text: O elemento <code>body</code> deve ser filho do elemento <code>html</code> .
|
||||
testString: 'assert($("html").children("body").length == 1, "The <code>body</code> element should be a child of the <code>html</code> element.");'
|
||||
- text: O elemento <code>head</code> deve envolver o elemento <code>title</code> .
|
||||
testString: 'assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi), "The <code>head</code> element should wrap around the <code>title</code> element.");'
|
||||
- text: O elemento do <code>body</code> deve envolver os elementos <code>h1</code> e <code>p</code> .
|
||||
testString: 'assert($("body").children("h1").length == 1 && $("body").children("p").length == 1, "The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>The best page ever</title>
|
||||
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: Delete HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Excluir elementos HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Nosso telefone não tem muito espaço vertical. Vamos remover os elementos desnecessários para que possamos começar a construir o nosso CatPhotoApp. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Exclua seu elemento <code>h1</code> para simplificar nossa visualização. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Exclua seu elemento <code>h1</code> .
|
||||
testString: 'assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi), "Delete your <code>h1</code> element.");'
|
||||
- text: Deixe seu elemento <code>h2</code> na página.
|
||||
testString: 'assert(code.match(/<h2>[\w\W]*<\/h2>/gi), "Leave your <code>h2</code> element on the page.");'
|
||||
- text: Deixe seu elemento <code>p</code> na página.
|
||||
testString: 'assert(code.match(/<p>[\w\W]*<\/p>/gi), "Leave your <code>p</code> element on the page.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: Fill in the Blank with Placeholder Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Preencha o espaço em branco com texto de espaço reservado
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Os desenvolvedores da Web usam tradicionalmente o <code>lorem ipsum text</code> como texto de espaço reservado. O texto "lorem ipsum" é retirado aleatoriamente de uma passagem famosa de Cícero da Roma Antiga. O texto Lorem ipsum tem sido usado como texto de espaço reservado por tipógrafos desde o século XVI, e essa tradição continua na web. Bem, 5 séculos é tempo suficiente. Já que estamos construindo um CatPhotoApp, vamos usar algo chamado <code>kitty ipsum text</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Substitua o texto dentro de seu elemento <code>p</code> com as primeiras palavras deste kitty texto 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> </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu elemento <code>p</code> deve conter as primeiras palavras do <code>kitty ipsum text</code> fornecido.
|
||||
testString: 'assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,55 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: Headline with the h2 Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Título com o elemento h2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Nas próximas lições, criaremos um aplicativo web de fotos para gatos em HTML5, peça por peça. O elemento <code>h2</code> que você adicionará nesta etapa adicionará um cabeçalho de nível dois à página da web. Esse elemento informa ao navegador sobre a estrutura do seu site. <code>h1</code> elementos <code>h1</code> são freqüentemente usados para cabeçalhos principais, enquanto os elementos <code>h2</code> são geralmente usados para subtítulos. Há também elementos <code>h3</code> , <code>h4</code> , <code>h5</code> e <code>h6</code> para indicar diferentes níveis de subtítulos. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione uma tag <code>h2</code> que diga "CatPhotoApp" para criar um segundo <code>element</code> HTML abaixo do elemento <code>h1</code> "Hello World". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Crie um elemento <code>h2</code> .
|
||||
testString: 'assert(($("h2").length > 0), "Create an <code>h2</code> element.");'
|
||||
- text: Certifique-se de que seu elemento <code>h2</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length, "Make sure your <code>h2</code> element has a closing tag.");'
|
||||
- text: Seu elemento <code>h2</code> deve ter o texto "CatPhotoApp".
|
||||
testString: 'assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()), "Your <code>h2</code> element should have the text "CatPhotoApp".");'
|
||||
- text: Seu elemento <code>h1</code> deve ter o texto "Hello World".
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: Inform with the Paragraph Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Informar com o elemento Paragraph
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>p</code> elementos <code>p</code> são o elemento preferido para o texto do parágrafo nos sites. <code>p</code> é a abreviatura de "parágrafo". Você pode criar um elemento de parágrafo como este: <code><p>I'm ap tag!</p></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Crie um elemento <code>p</code> abaixo do seu elemento <code>h2</code> e dê a ele o texto "Hello Paragraph". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Crie um elemento <code>p</code> .
|
||||
testString: 'assert(($("p").length > 0), "Create a <code>p</code> element.");'
|
||||
- text: Seu elemento <code>p</code> deve ter o texto "Hello Paragraph".
|
||||
testString: 'assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()), "Your <code>p</code> element should have the text "Hello Paragraph".");'
|
||||
- text: Certifique-se de que seu elemento <code>p</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure your <code>p</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: Introduction to HTML5 Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Introdução aos elementos HTML5
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O HTML5 introduz mais tags HTML descritivas. Estes incluem <code>header</code> , <code>footer</code> , <code>nav</code> , <code>video</code> , <code>article</code> , <code>section</code> e outros. Essas tags facilitam a leitura do seu HTML, além de ajudar na Otimização do Mecanismo de Pesquisa (SEO) e na acessibilidade. A tag HTML5 <code>main</code> ajuda os mecanismos de pesquisa e outros desenvolvedores a encontrar o conteúdo principal de sua página. <strong>Nota</strong> <br> Muitas das novas tags HTML5 e seus benefícios são abordados na seção Acessibilidade Aplicada. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Crie um segundo elemento <code>p</code> após o elemento <code>p</code> existente com o seguinte texto ipsum gatinho: <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> Enrole os parágrafos com uma tag <code>main</code> abertura e fechamento. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Você precisa de 2 elementos <code>p</code> com o texto Kitty Ipsum.
|
||||
testString: 'assert($("p").length > 1, "You need 2 <code>p</code> elements with Kitty Ipsum text.");'
|
||||
- text: Certifique-se de que cada um dos seus elementos <code>p</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
- text: Seu elemento <code>p</code> deve conter as primeiras palavras do <code>kitty ipsum text</code> adicional fornecido pelo <code>kitty ipsum text</code> .
|
||||
testString: 'assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.");'
|
||||
- text: Seu código deve ter um elemento <code>main</code> .
|
||||
testString: 'assert($("main").length === 1, "Your code should have one <code>main</code> element.");'
|
||||
- text: O elemento <code>main</code> deve ter dois elementos de parágrafo como filhos.
|
||||
testString: 'assert($("main").children("p").length === 2, "The <code>main</code> element should have two paragraph elements as children.");'
|
||||
- text: A tag <code>main</code> abertura deve vir antes da tag do primeiro parágrafo.
|
||||
testString: 'assert(code.match(/<main>\s*?<p>/g), "The opening <code>main</code> tag should come before the first paragraph tag.");'
|
||||
- text: A tag <code>main</code> fechamento deve vir após a segunda tag de parágrafo de fechamento.
|
||||
testString: 'assert(code.match(/<\/p>\s*?<\/main>/g), "The closing <code>main</code> tag should come after the second closing paragraph tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: Link to External Pages with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Link para páginas externas com elementos âncora
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode usar elementos de <code>anchor</code> para vincular a conteúdo fora da sua página da web. <code>anchor</code> elementos <code>anchor</code> precisam de um endereço da Web de destino chamado atributo <code>href</code> . Eles também precisam de texto âncora. Aqui está um exemplo: <code><a href="https://freecodecamp.org">this links to freecodecamp.org</a></code> Então o seu navegador irá exibir o texto <strong>"este links para freecodecamp.org"</strong> como um link que você pode clicar. E esse link levará você ao endereço da Web <strong>https://www.freecodecamp.org</strong> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Crie <code>a</code> elemento que vincule a <code>http://freecatphotoapp.com</code> e tenha "cat photos" como <code>anchor text</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Sua <code>a</code> elemento deve ter o <code>anchor text</code> de "fotos do gato".
|
||||
testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");'
|
||||
- text: 'Você precisa de <code>a</code> elemento que <code>http://freecatphotoapp .com</code> para <code>http://freecatphotoapp .com</code>'
|
||||
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>");'
|
||||
- text: Verifique se o seu <code>a</code> elemento tem uma marca de fechamento.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: Link to Internal Sections of a Page with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Vincular a seções internas de uma página com elementos âncora
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Os elementos âncora também podem ser usados para criar links internos para pular para diferentes seções dentro de uma página da Web. Para criar um link interno, atribua o atributo <code>href</code> um link a um símbolo de hash <code>#</code> mais o valor do atributo de <code>id</code> para o elemento que você deseja vincular internamente, geralmente mais abaixo na página. Em seguida, você precisa adicionar o mesmo atributo <code>id</code> ao elemento ao qual está vinculando. Um <code>id</code> é um atributo que descreve exclusivamente um elemento. Abaixo está um exemplo de um link de âncora interna e seu elemento de destino: <blockquote> <a href="#contacts-header"> Contatos </a> <br> ... <br> <h2 id = "contatos-cabeçalho"> Contatos </ h2> </blockquote> Quando os usuários clicam no link Contatos, eles são levados para a seção da página da Web com o elemento de cabeçalho <b>Contatos</b> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere seu link externo para um link interno alterando o atributo <code>href</code> para "#footer" e o texto de "cat photos" para "Jump to Bottom". Remova o atributo <code>target="_blank"</code> da tag de âncora, pois isso faz com que o documento vinculado seja aberto em uma nova guia da janela. Em seguida, adicione um atributo <code>id</code> com o valor "footer" ao elemento <code><footer></code> na parte inferior da página. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Deve haver apenas uma tag de âncora na sua página.
|
||||
testString: 'assert($("a").length == 1, "There should be only one anchor tag on your page.");'
|
||||
- text: Deve haver apenas uma tag de <code>footer</code> na sua página.
|
||||
testString: 'assert($("footer").length == 1, "There should be only one <code>footer</code> tag on your page.");'
|
||||
- text: 'A <code>a</code> tag deve ter um <code>href</code> atributo definido como "#footer".'
|
||||
testString: 'assert($("a").eq(0).attr("href") == "#footer", "The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".");'
|
||||
- text: A <code>a</code> tag não deve ter um <code>target</code> atributo
|
||||
testString: 'assert(typeof $("a").eq(0).attr("target") == typeof undefined || $("a").eq(0).attr("target") == true, "The <code>a</code> tag should not have a <code>target</code> attribute");'
|
||||
- text: A <code>a</code> texto deve ser "Ir para fundo".
|
||||
testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The <code>a</code> text should be "Jump to Bottom".");'
|
||||
- text: A tag de <code>footer</code> deve ter um atributo <code>id</code> definido como "footer".
|
||||
testString: 'assert($("footer").eq(0).attr("id") == "footer", "The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: Make Dead Links Using the Hash Symbol
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Faça links mortos usando o símbolo Hash
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Às vezes você quer adicionar <code>a</code> elementos para o seu site antes que você sabe onde eles vão ligar. Isso também é útil quando você está alterando o comportamento de um link usando <code>JavaScript</code> , sobre o qual aprenderemos mais tarde. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O valor atual do atributo <code>href</code> é um link que aponta para "http://freecatphotoapp.com". Substitua o valor do atributo <code>href</code> por um <code>#</code> , também conhecido como um símbolo de hash, para criar um link inativo. Por exemplo: <code>href="#"</code> </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Sua <code>a</code> elemento deve ser um link morto com o valor do <code>href</code> atributo definido como "#".'
|
||||
testString: 'assert($("a").attr("href") === "#", "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: Nest an Anchor Element within a Paragraph
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Aninhar um elemento âncora dentro de um parágrafo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode aninhar links dentro de outros elementos de texto. <blockquote> <p> <br> Aqui está um <a target="_blank" href="http://freecodecamp.org"> link para freecodecamp.org </a> para você seguir. <br> </ p> </blockquote> Vamos detalhar o exemplo: o texto normal é encapsulado no elemento <code>p</code> : <br> <code><p> Here's a ... for you to follow. </p></code> Em seguida, o elemento <code>anchor</code> <code><a></code> (que requer uma tag de fechamento <code></a></code> ): <br> <code><a> ... </a></code> <code>target</code> é um atributo de marca de âncora que especifica onde abrir o link e o valor <code>"_blank"</code> especifica para abrir o link em uma nova guia <code>href</code> é um atributo de marca de âncora que contém o endereço de URL de a ligação: <br> <code><a href="http://freecodecamp.org"> ... </a></code> O texto <strong>"link para freecodecamp.org"</strong> , dentro do elemento <code>anchor text</code> chamado <code>anchor text</code> , exibirá um link para clicar: <br> <code><a href=" ... ">link to freecodecamp.org</a></code> A saída final do exemplo ficará assim: <br><p> Aqui está um <a target="_blank" href="http://freecodecamp.org">link para freecodecamp.org</a> para você seguir. </p></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Agora ninho sua existente <code>a</code> elemento dentro de um novo <code>p</code> elemento (logo após a existente <code>main</code> elemento). O novo parágrafo deve ter o texto "Visualizar mais fotos de gatos", em que "fotos de gatos" é um link, e o restante do texto é texto simples. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Você precisa de <code>a</code> elemento que vincule a "http://freecatphotoapp.com".'
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), "You need an <code>a</code> element that links to "http://freecatphotoapp.com".");'
|
||||
- text: Sua <code>a</code> elemento deve ter o texto âncora de "fotos do gato"
|
||||
testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your <code>a</code> element should have the anchor text of "cat photos"");'
|
||||
- text: Criar um novo <code>p</code> elemento em torno de seu <code>a</code> elemento. Deve haver pelo menos três tags <code>p</code> no seu código HTML.
|
||||
testString: 'assert($("p") && $("p").length > 2, "Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.");'
|
||||
- text: Seu <code>a</code> elemento deve ser aninhado em seu novo elemento <code>p</code> .
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")), "Your <code>a</code> element should be nested within your new <code>p</code> element.");'
|
||||
- text: Seu elemento <code>p</code> deve ter o texto "Ver mais" (com um espaço após ele).
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)), "Your <code>p</code> element should have the text "View more " (with a space after it).");'
|
||||
- text: Sua <code>a</code> elemento <em>não</em> deve ter o texto "Ver mais".
|
||||
testString: 'assert(!$("a").text().match(/View\smore/gi), "Your <code>a</code> element should <em>not</em> have the text "View more".");'
|
||||
- text: Certifique-se de que cada um dos seus elementos <code>p</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
- text: Certifique-se de cada um de seus <code>a</code> elementos tem uma marca de fechamento.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: Nest Many Elements within a Single div Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Aninhar muitos elementos em um único elemento div
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O elemento <code>div</code> , também conhecido como um elemento de divisão, é um contêiner de propósito geral para outros elementos. O elemento <code>div</code> é provavelmente o elemento HTML mais usado de todos. Assim como qualquer outro elemento de não fechamento automático, você pode abrir um elemento <code>div</code> com <code><div></code> e fechá-lo em outra linha com <code></div></code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Aninhe suas "Coisas que os gatos adoram" e "Coisas que os gatos odeiam" listam todas em um único elemento <code>div</code> . Dica: Tente colocar a sua abertura <code>div</code> tag acima de suas "coisas gatos adoram" <code>p</code> elemento e seu fechamento <code>div</code> tag após o seu fechamento <code>ol</code> tag para que ambas as listas estão dentro de uma <code>div</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Aninhe seus elementos <code>p</code> dentro do seu elemento <code>div</code> .
|
||||
testString: 'assert($("div").children("p").length > 1, "Nest your <code>p</code> elements inside your <code>div</code> element.");'
|
||||
- text: Aninhe seu elemento <code>ul</code> dentro do seu elemento <code>div</code> .
|
||||
testString: 'assert($("div").children("ul").length > 0, "Nest your <code>ul</code> element inside your <code>div</code> element.");'
|
||||
- text: Aninhe seu elemento <code>ol</code> dentro do seu elemento <code>div</code> .
|
||||
testString: 'assert($("div").children("ol").length > 0, "Nest your <code>ol</code> element inside your <code>div</code> element.");'
|
||||
- text: Certifique-se de que seu elemento <code>div</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length, "Make sure your <code>div</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,49 @@
|
||||
---
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: Say Hello to HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Diga Olá para elementos HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Bem-vindo aos desafios de codificação HTML do freeCodeCamp. Eles orientarão você pelo desenvolvimento da Web, passo a passo. Primeiro, você começará construindo uma página da web simples usando HTML. Você pode editar o <code>code</code> em seu <code>code editor</code> , que é incorporado a esta página da web. Você vê o código no seu editor de código que diz <code><h1>Hello</h1></code> ? Isso é um <code>element</code> HTML. A maioria dos elementos HTML possui uma <code>opening tag</code> e uma <code>closing tag</code> . As tags de abertura são assim: <code><h1></code> tags de fechamento são assim: <code></h1></code> A única diferença entre as tags de abertura e fechamento é a barra após o colchete de abertura de uma tag de fechamento. Cada desafio tem testes que você pode executar a qualquer momento clicando no botão "Executar testes". Quando você passar em todos os testes, você será solicitado a enviar sua solução e passar para o próximo desafio de codificação. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Para passar no teste deste desafio, altere o texto do elemento <code>h1</code> para dizer "Olá mundo". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu elemento <code>h1</code> deve ter o texto "Hello World".
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: Turn an Image into a Link
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Transforme uma imagem em um link
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode criar elementos em links aninhando-os em <code>a</code> elemento. Aninhe sua imagem em <code>a</code> elemento. Aqui está um exemplo: <code><a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a></code> Lembre-se de usar <code>#</code> como seu <code>a</code> elemento <code>href</code> propriedade, a fim de transformá-lo em um link morto. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Coloque o elemento de imagem existente dentro de um elemento de âncora. Depois de fazer isso, passe o mouse sobre sua imagem com o cursor. O ponteiro normal do cursor deve se tornar o ponteiro de clique do link. A foto agora é um link. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Aninhe o elemento <code>img</code> existente em <code>a</code> elemento.
|
||||
testString: 'assert($("a").children("img").length > 0, "Nest the existing <code>img</code> element within an <code>a</code> element.");'
|
||||
- text: 'Sua <code>a</code> elemento deve ser um link morto com um <code>href</code> atributo definido como <code>#</code> .'
|
||||
testString: 'assert(new RegExp("#").test($("a").children("img").parent().attr("href")), "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.");'
|
||||
- text: Certifique-se de cada um de seus <code>a</code> elementos tem uma marca de fechamento.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: Uncomment HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: HTML sem comentário
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Comentar é uma maneira de deixar comentários para outros desenvolvedores em seu código sem afetar a saída resultante que é exibida para o usuário final. Comentar também é uma maneira conveniente de tornar o código inativo sem ter que excluí-lo completamente. Comentários em HTML começam com <code><!--</code> e terminam com um <code>--></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Descomente seus elementos <code>h1</code> , <code>h2</code> e <code>p</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Torne seu elemento <code>h1</code> visível em sua página, descomentando-o.'
|
||||
testString: 'assert($("h1").length > 0, "Make your <code>h1</code> element visible on your page by uncommenting it.");'
|
||||
- text: 'Torne seu elemento <code>h2</code> visível em sua página, descomentando-o.'
|
||||
testString: 'assert($("h2").length > 0, "Make your <code>h2</code> element visible on your page by uncommenting it.");'
|
||||
- text: 'Torne seu elemento <code>p</code> visível em sua página, descomentando-o.'
|
||||
testString: 'assert($("p").length > 0, "Make your <code>p</code> element visible on your page by uncommenting it.");'
|
||||
- text: 'Certifique-se de excluir todas as tags de comentário à direita, ou seja, <code>--></code> .'
|
||||
testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,"")), "Be sure to delete all trailing comment tags, i.e. <code>--></code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: Use HTML5 to Require a Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use HTML5 para exigir um campo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode exigir campos de formulário específicos para que o usuário não possa enviar seu formulário até que ele os preencha. Por exemplo, se você quiser tornar um campo de entrada de texto obrigatório, basta adicionar o atributo <code>required</code> ao seu elemento de <code>input</code> , da seguinte forma: <code><input type="text" required></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Faça o seu texto <code>input</code> um <code>required</code> campo, de modo que o usuário não pode enviar o formulário sem concluir neste campo. Em seguida, tente enviar o formulário sem inserir nenhum texto. Veja como o seu formulário HTML5 avisa que o campo é obrigatório? </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu elemento de <code>input</code> texto deve ter o atributo <code>required</code> .
|
||||
testString: 'assert($("input").prop("required"), "Your text <code>input</code> element should have the <code>required</code> attribute.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user