replaced literal translation (#31201)
This commit is contained in:
Lucas Cazeto
committed by
Randell Dawson
Randell Dawson
parent
c852dc7d1d
commit
a4198a6232
@ -8,7 +8,7 @@ localeTitle: Criar uma página da Web de portfólio pessoal
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/zNBOYG" target="_blank">https://codepen.io/freeCodeCamp/full/zNBOYG</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>História do Usuário # 1:</strong> Meu portfólio deve ter uma seção de <code>welcome-section</code> com um id de <code>welcome-section</code> de <code>welcome-section</code> . <strong>História do Usuário # 2:</strong> A seção de boas-vindas deve ter um elemento <code>h1</code> que contenha texto. <strong>História do Usuário # 3:</strong> Meu portfólio deve ter uma seção de projetos com um id de <code>projects</code> . <strong>História do Usuário # 4:</strong> A seção de projetos deve conter pelo menos um elemento com uma classe de <code>project-tile</code> de <code>project-tile</code> para manter um projeto. <strong>História do Usuário # 5:</strong> A seção de projetos deve conter pelo menos um link para um projeto. <strong>História do Usuário # 6:</strong> Meu portfólio deve ter uma barra de navegação com um id de <code>navbar</code> . <strong>História do Usuário # 7:</strong> A barra de navegação deve conter pelo menos um link no qual eu possa clicar para navegar em diferentes seções da página. <strong>História do Usuário # 8:</strong> Meu portfólio deve ter um link com um id de <code>profile-link</code> , que abre meu perfil do GitHub ou FCC em uma nova guia. <strong>História do Usuário # 9:</strong> Meu portfólio deve ter pelo menos uma consulta de mídia. <strong>História do Usuário # 10:</strong> A altura da seção de boas vindas deve ser igual à altura da viewport. <strong>História do Usuário # 11:</strong> A barra de navegação deve estar sempre no topo da viewport. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/zNBOYG" target="_blank">https://codepen.io/freeCodeCamp/full/zNBOYG</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História do Usuário # 1:</strong> Meu portfólio deve ter uma seção de <code>welcome-section</code> com um id de <code>welcome-section</code> de <code>welcome-section</code> . <strong>História do Usuário # 2:</strong> A seção de boas-vindas deve ter um elemento <code>h1</code> que contenha texto. <strong>História do Usuário # 3:</strong> Meu portfólio deve ter uma seção de projetos com um id de <code>projects</code> . <strong>História do Usuário # 4:</strong> A seção de projetos deve conter pelo menos um elemento com uma classe de <code>project-tile</code> de <code>project-tile</code> para manter um projeto. <strong>História do Usuário # 5:</strong> A seção de projetos deve conter pelo menos um link para um projeto. <strong>História do Usuário # 6:</strong> Meu portfólio deve ter uma barra de navegação com um id de <code>navbar</code> . <strong>História do Usuário # 7:</strong> A barra de navegação deve conter pelo menos um link no qual eu possa clicar para navegar em diferentes seções da página. <strong>História do Usuário # 8:</strong> Meu portfólio deve ter um link com um id de <code>profile-link</code> , que abre meu perfil do GitHub ou FCC em uma nova guia. <strong>História do Usuário # 9:</strong> Meu portfólio deve ter pelo menos uma consulta de mídia. <strong>História do Usuário # 10:</strong> A altura da seção de boas vindas deve ser igual à altura da viewport. <strong>História do Usuário # 11:</strong> A barra de navegação deve estar sempre no topo da viewport. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa uma página de destino do produto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/RKRbwL" target="_blank">https://codepen.io/freeCodeCamp/full/RKRbwL</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>História do usuário nº 1: a</strong> página de destino do meu produto deve ter um elemento de <code>header</code> com um <code>id="header"</code> . <strong>User Story # 2:</strong> Eu posso ver uma imagem dentro do elemento <code>header</code> com um <code>id="header-img"</code> . Um logotipo da empresa faria uma boa imagem aqui. <strong>User Story # 3:</strong> Dentro do elemento <code>#header</code> eu posso ver um elemento <code>nav</code> com uma <code>id="nav-bar"</code> . <strong>História do usuário nº 4:</strong> posso ver pelo menos três elementos clicáveis dentro do elemento <code>nav</code> , cada um com o <code>nav-link</code> class. <strong>User Story # 5:</strong> Quando eu clico em um botão <code>.nav-link</code> no elemento <code>nav</code> , sou levado para a seção correspondente da página de destino. <strong>História do usuário nº 6:</strong> posso assistir a um vídeo do produto incorporado com <code>id="video"</code> . <strong>User Story # 7:</strong> Minha landing page tem um elemento <code>form</code> com um <code>id="form"</code> . <strong>User Story # 8:</strong> Dentro do formulário, há um campo de <code>input</code> com <code>id="email"</code> onde posso inserir um endereço de email. <strong>User Story # 9:</strong> O campo de entrada <code>#email</code> deve ter um texto de espaço reservado para que o usuário saiba para que serve o campo. <strong>User Story # 10:</strong> O campo de entrada <code>#email</code> usa a validação HTML5 para confirmar que o texto digitado é um endereço de e-mail. <strong>User Story # 11:</strong> Dentro do formulário, há uma <code>input</code> envio com um <code>id="submit"</code> . <strong>User Story # 12:</strong> Quando clico no elemento <code>#submit</code> , o email é enviado para uma página estática (use este URL de simulação: <a href="https://www.freecodecamp.com/email-submit" target="_blank">https://www.freecodecamp.com/email-submit</a> ) que confirma que o endereço de email foi digitado e que postou com sucesso. <strong>User Story # 13:</strong> A barra de navegação deve estar sempre no topo da viewport. <strong>História do usuário nº 14: a</strong> página de destino do meu produto deve ter pelo menos uma consulta de mídia. <strong>User Story # 15:</strong> A página de destino do meu produto deve utilizar o flexbox CSS pelo menos uma vez. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/full/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/RKRbwL" target="_blank">https://codepen.io/freeCodeCamp/full/RKRbwL</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História do usuário nº 1: a</strong> página de destino do meu produto deve ter um elemento de <code>header</code> com um <code>id="header"</code> . <strong>User Story # 2:</strong> Eu posso ver uma imagem dentro do elemento <code>header</code> com um <code>id="header-img"</code> . Um logotipo da empresa faria uma boa imagem aqui. <strong>User Story # 3:</strong> Dentro do elemento <code>#header</code> eu posso ver um elemento <code>nav</code> com uma <code>id="nav-bar"</code> . <strong>História do usuário nº 4:</strong> posso ver pelo menos três elementos clicáveis dentro do elemento <code>nav</code> , cada um com o <code>nav-link</code> class. <strong>User Story # 5:</strong> Quando eu clico em um botão <code>.nav-link</code> no elemento <code>nav</code> , sou levado para a seção correspondente da página de destino. <strong>História do usuário nº 6:</strong> posso assistir a um vídeo do produto incorporado com <code>id="video"</code> . <strong>User Story # 7:</strong> Minha landing page tem um elemento <code>form</code> com um <code>id="form"</code> . <strong>User Story # 8:</strong> Dentro do formulário, há um campo de <code>input</code> com <code>id="email"</code> onde posso inserir um endereço de email. <strong>User Story # 9:</strong> O campo de entrada <code>#email</code> deve ter um texto de espaço reservado para que o usuário saiba para que serve o campo. <strong>User Story # 10:</strong> O campo de entrada <code>#email</code> usa a validação HTML5 para confirmar que o texto digitado é um endereço de e-mail. <strong>User Story # 11:</strong> Dentro do formulário, há uma <code>input</code> envio com um <code>id="submit"</code> . <strong>User Story # 12:</strong> Quando clico no elemento <code>#submit</code> , o email é enviado para uma página estática (use este URL de simulação: <a href="https://www.freecodecamp.com/email-submit" target="_blank">https://www.freecodecamp.com/email-submit</a> ) que confirma que o endereço de email foi digitado e que postou com sucesso. <strong>User Story # 13:</strong> A barra de navegação deve estar sempre no topo da viewport. <strong>História do usuário nº 14: a</strong> página de destino do meu produto deve ter pelo menos uma consulta de mídia. <strong>User Story # 15:</strong> A página de destino do meu produto deve utilizar o flexbox CSS pelo menos uma vez. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/full/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Criar um formulário de pesquisa
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>História do usuário 1:</strong> posso ver um título com <code>id="title"</code> em tamanho de texto H1. <strong>User Story # 2:</strong> Eu posso ver uma breve explicação com <code>id="description"</code> em P tamanho do texto. <strong>User Story # 3:</strong> posso ver um <code>form</code> com <code>id="survey-form"</code> . <strong>User Story # 4:</strong> Dentro do elemento form, eu tenho que inserir meu nome em um campo com <code>id="name"</code> . <strong>User Story # 5:</strong> Dentro do elemento form, eu tenho que inserir um email em um campo com <code>id="email"</code> . <strong>História do usuário nº 6:</strong> se eu inserir um e-mail que não esteja formatado corretamente, verei um erro de validação do HTML5. <strong>User Story # 7:</strong> Dentro do formulário, posso inserir um número em um campo com <code>id="number"</code> . <strong>História do usuário nº 8:</strong> se eu inserir números diferentes na entrada do número, verei um erro de validação do HTML5. <strong>User Story # 9:</strong> Se eu inserir números fora do intervalo da entrada do número, que são definidos pelos atributos <code>min</code> e <code>max</code> , verei um erro de validação HTML5. <strong>User Story # 10:</strong> Para os campos de entrada de nome, email e número dentro do formulário, posso ver rótulos correspondentes que descrevem o objetivo de cada campo com os seguintes IDs: <code>id="name-label"</code> , <code>id="email-label"</code> e <code>id="number-label"</code> . <strong>História do usuário nº 11:</strong> para os campos de entrada de nome, e-mail e número, posso ver o texto do marcador de posição que fornece uma descrição ou instruções para cada campo. <strong>User Story # 12:</strong> Dentro do elemento form, posso selecionar uma opção em um menu suspenso que tenha um <code>id="dropdown"</code> . <strong>User Story # 13:</strong> Dentro do elemento form, posso selecionar um campo de um ou mais grupos de botões de opção. Cada grupo deve ser agrupado usando o atributo <code>name</code> . <strong>User Story # 14:</strong> Dentro do elemento form, posso selecionar vários campos de uma série de checkboxes, cada um dos quais deve ter um atributo <code>value</code> . <strong>User Story # 15:</strong> Dentro do elemento form, é apresentada uma <code>textarea</code> no final para comentários adicionais. <strong>User Story # 16:</strong> Dentro do elemento form, eu recebi um botão com <code>id="submit"</code> para enviar todas as minhas entradas. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História do usuário 1:</strong> posso ver um título com <code>id="title"</code> em tamanho de texto H1. <strong>User Story # 2:</strong> Eu posso ver uma breve explicação com <code>id="description"</code> em P tamanho do texto. <strong>User Story # 3:</strong> posso ver um <code>form</code> com <code>id="survey-form"</code> . <strong>User Story # 4:</strong> Dentro do elemento form, eu tenho que inserir meu nome em um campo com <code>id="name"</code> . <strong>User Story # 5:</strong> Dentro do elemento form, eu tenho que inserir um email em um campo com <code>id="email"</code> . <strong>História do usuário nº 6:</strong> se eu inserir um e-mail que não esteja formatado corretamente, verei um erro de validação do HTML5. <strong>User Story # 7:</strong> Dentro do formulário, posso inserir um número em um campo com <code>id="number"</code> . <strong>História do usuário nº 8:</strong> se eu inserir números diferentes na entrada do número, verei um erro de validação do HTML5. <strong>User Story # 9:</strong> Se eu inserir números fora do intervalo da entrada do número, que são definidos pelos atributos <code>min</code> e <code>max</code> , verei um erro de validação HTML5. <strong>User Story # 10:</strong> Para os campos de entrada de nome, email e número dentro do formulário, posso ver rótulos correspondentes que descrevem o objetivo de cada campo com os seguintes IDs: <code>id="name-label"</code> , <code>id="email-label"</code> e <code>id="number-label"</code> . <strong>História do usuário nº 11:</strong> para os campos de entrada de nome, e-mail e número, posso ver o texto do marcador de posição que fornece uma descrição ou instruções para cada campo. <strong>User Story # 12:</strong> Dentro do elemento form, posso selecionar uma opção em um menu suspenso que tenha um <code>id="dropdown"</code> . <strong>User Story # 13:</strong> Dentro do elemento form, posso selecionar um campo de um ou mais grupos de botões de opção. Cada grupo deve ser agrupado usando o atributo <code>name</code> . <strong>User Story # 14:</strong> Dentro do elemento form, posso selecionar vários campos de uma série de checkboxes, cada um dos quais deve ter um atributo <code>value</code> . <strong>User Story # 15:</strong> Dentro do elemento form, é apresentada uma <code>textarea</code> no final para comentários adicionais. <strong>User Story # 16:</strong> Dentro do elemento form, eu recebi um botão com <code>id="submit"</code> para enviar todas as minhas entradas. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa uma Página de Documentação Técnica
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/NdrKKL" target="_blank">https://codepen.io/freeCodeCamp/full/NdrKKL</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>User Story # 1:</strong> Eu posso ver um elemento <code>main</code> com um <code>id="main-doc"</code> correspondente, que contém o conteúdo principal da página (documentação técnica). <strong>User Story # 2:</strong> Dentro do elemento <code>#main-doc</code> , posso ver vários elementos de <code>section</code> , cada um com uma classe de <code>main-section</code> . Deve haver um mínimo de 5. <strong>User Story # 3:</strong> O primeiro elemento dentro de cada <code>.main-section</code> deve ser um elemento de <code>header</code> que contém texto que descreve o tópico dessa seção. <strong>User Story # 4:</strong> Cada elemento de <code>section</code> com a classe de <code>main-section</code> também deve ter um id que corresponda ao texto de cada <code>header</code> contido nele. Quaisquer espaços devem ser substituídos por sublinhados (por exemplo, a <code>section</code> que contém o cabeçalho "Javascript e Java" deve ter um <code>id="Javascript_and_Java"</code> ). <strong>User Story # 5:</strong> Os elementos de <code>.main-section</code> devem conter pelo menos 10 elementos <code>p</code> (não cada um). <strong>User Story # 6:</strong> Os elementos <code>.main-section</code> devem conter pelo menos 5 elementos de <code>code</code> total (não cada um). <strong>User Story # 7:</strong> Os elementos <code>.main-section</code> devem conter no mínimo 5 itens <code>li</code> (não cada um). <strong>User Story # 8:</strong> Eu posso ver um elemento <code>nav</code> com um <code>id="navbar"</code> . <strong>User Story # 9:</strong> O elemento navbar deve conter um elemento de <code>header</code> que contenha texto que descreva o tópico da documentação técnica. <strong>User Story # 10:</strong> Além disso, a barra de navegação deve conter elementos link ( <code>a</code> ) com a classe de <code>nav-link</code> . Deve haver um para cada elemento com a <code>main-section</code> da classe. <strong>User Story # 11:</strong> O elemento de <code>header</code> na barra de navegação deve vir antes de qualquer elemento de link ( <code>a</code> ) na barra de navegação. <strong>User Story # 12:</strong> Cada elemento com a classe de <code>nav-link</code> deve conter texto que corresponda ao texto do <code>header</code> dentro de cada <code>section</code> (por exemplo, se você tiver uma seção / cabeçalho "Hello world", sua barra de navegação deve ter um elemento que contenha o texto "Olá Mundo"). <strong>User Story # 13:</strong> Quando eu clico em um elemento navbar, a página deve navegar para a seção correspondente do elemento <code>main-doc</code> (por exemplo, se eu clicar em um elemento <code>nav-link</code> que contém o texto "Hello world", a página navega a uma <code>section</code> elemento que tem que id e contém o correspondente <code>header</code> <strong>User Story # 14:.</strong> no regulares dispositivos do tamanho (laptops, desktops), o elemento com <code>id="navbar"</code> deve ser mostrado no lado esquerdo da tela e deve sempre <strong>User Story # 15:</strong> Minha página de Documentação Técnica deve usar pelo menos uma consulta de mídia. Você pode criar seu projeto ao bifurcar <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> ou usar esse link CDN para executar os testes em qualquer ambiente que desejar : <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> método se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/NdrKKL" target="_blank">https://codepen.io/freeCodeCamp/full/NdrKKL</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>User Story # 1:</strong> Eu posso ver um elemento <code>main</code> com um <code>id="main-doc"</code> correspondente, que contém o conteúdo principal da página (documentação técnica). <strong>User Story # 2:</strong> Dentro do elemento <code>#main-doc</code> , posso ver vários elementos de <code>section</code> , cada um com uma classe de <code>main-section</code> . Deve haver um mínimo de 5. <strong>User Story # 3:</strong> O primeiro elemento dentro de cada <code>.main-section</code> deve ser um elemento de <code>header</code> que contém texto que descreve o tópico dessa seção. <strong>User Story # 4:</strong> Cada elemento de <code>section</code> com a classe de <code>main-section</code> também deve ter um id que corresponda ao texto de cada <code>header</code> contido nele. Quaisquer espaços devem ser substituídos por sublinhados (por exemplo, a <code>section</code> que contém o cabeçalho "Javascript e Java" deve ter um <code>id="Javascript_and_Java"</code> ). <strong>User Story # 5:</strong> Os elementos de <code>.main-section</code> devem conter pelo menos 10 elementos <code>p</code> (não cada um). <strong>User Story # 6:</strong> Os elementos <code>.main-section</code> devem conter pelo menos 5 elementos de <code>code</code> total (não cada um). <strong>User Story # 7:</strong> Os elementos <code>.main-section</code> devem conter no mínimo 5 itens <code>li</code> (não cada um). <strong>User Story # 8:</strong> Eu posso ver um elemento <code>nav</code> com um <code>id="navbar"</code> . <strong>User Story # 9:</strong> O elemento navbar deve conter um elemento de <code>header</code> que contenha texto que descreva o tópico da documentação técnica. <strong>User Story # 10:</strong> Além disso, a barra de navegação deve conter elementos link ( <code>a</code> ) com a classe de <code>nav-link</code> . Deve haver um para cada elemento com a <code>main-section</code> da classe. <strong>User Story # 11:</strong> O elemento de <code>header</code> na barra de navegação deve vir antes de qualquer elemento de link ( <code>a</code> ) na barra de navegação. <strong>User Story # 12:</strong> Cada elemento com a classe de <code>nav-link</code> deve conter texto que corresponda ao texto do <code>header</code> dentro de cada <code>section</code> (por exemplo, se você tiver uma seção / cabeçalho "Hello world", sua barra de navegação deve ter um elemento que contenha o texto "Olá Mundo"). <strong>User Story # 13:</strong> Quando eu clico em um elemento navbar, a página deve navegar para a seção correspondente do elemento <code>main-doc</code> (por exemplo, se eu clicar em um elemento <code>nav-link</code> que contém o texto "Hello world", a página navega a uma <code>section</code> elemento que tem que id e contém o correspondente <code>header</code> <strong>User Story # 14:.</strong> no regulares dispositivos do tamanho (laptops, desktops), o elemento com <code>id="navbar"</code> deve ser mostrado no lado esquerdo da tela e deve sempre <strong>User Story # 15:</strong> Minha página de Documentação Técnica deve usar pelo menos uma consulta de mídia. Você pode criar seu projeto ao bifurcar <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> ou usar esse link CDN para executar os testes em qualquer ambiente que desejar : <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> método se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa uma página de homenagem
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">https://codepen.io/freeCodeCamp/full/zNqgVx</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>User Story # 1:</strong> Minha página de tributo deve ter um elemento com um <code>id="main"</code> , que contém todos os outros elementos. <strong>User Story # 2:</strong> Eu deveria ver um elemento com um <code>id="title"</code> , que contém uma string (ou seja, texto) que descreve o assunto da página do tributo (por exemplo, "Dr. Norman Borlaug"). <strong>User Story # 3:</strong> Eu deveria ver um elemento <code>div</code> com um <code>id="img-div"</code> . <strong>User Story # 4:</strong> Dentro do elemento <code>img-div</code> , eu deveria ver um elemento <code>img</code> com uma <code>id="image"</code> . <strong>User Story # 5:</strong> Dentro do elemento <code>img-div</code> , eu deveria ver um elemento com um <code>id="img-caption"</code> que contém conteúdo textual descrevendo a imagem mostrada em <code>img-div</code> . <strong>User Story # 6:</strong> Eu deveria ver um elemento com um correspondente <code>id="tribute-info"</code> , que contém conteúdo textual descrevendo o assunto da página de tributo. <strong>User Story # 7:</strong> Eu deveria ver <code>a</code> elemento com um <code>id="tribute-link"</code> , que direciona para um site externo que contém informações adicionais sobre o assunto da página do tributo. DICA: Você deve dar ao seu elemento um atributo de <code>target</code> e configurá-lo para <code>_blank</code> para que seu link seja aberto em uma nova guia (ou seja, <code>target="_blank"</code> ). <strong>User Story # 8:</strong> O elemento <code>img</code> deve redimensionar responsavelmente, em relação à largura de seu elemento pai, sem exceder seu tamanho original. <strong>User Story # 9:</strong> O elemento <code>img</code> deve estar centrado dentro de seu elemento pai. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">https://codepen.io/freeCodeCamp/full/zNqgVx</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>User Story # 1:</strong> Minha página de tributo deve ter um elemento com um <code>id="main"</code> , que contém todos os outros elementos. <strong>User Story # 2:</strong> Eu deveria ver um elemento com um <code>id="title"</code> , que contém uma string (ou seja, texto) que descreve o assunto da página do tributo (por exemplo, "Dr. Norman Borlaug"). <strong>User Story # 3:</strong> Eu deveria ver um elemento <code>div</code> com um <code>id="img-div"</code> . <strong>User Story # 4:</strong> Dentro do elemento <code>img-div</code> , eu deveria ver um elemento <code>img</code> com uma <code>id="image"</code> . <strong>User Story # 5:</strong> Dentro do elemento <code>img-div</code> , eu deveria ver um elemento com um <code>id="img-caption"</code> que contém conteúdo textual descrevendo a imagem mostrada em <code>img-div</code> . <strong>User Story # 6:</strong> Eu deveria ver um elemento com um correspondente <code>id="tribute-info"</code> , que contém conteúdo textual descrevendo o assunto da página de tributo. <strong>User Story # 7:</strong> Eu deveria ver <code>a</code> elemento com um <code>id="tribute-link"</code> , que direciona para um site externo que contém informações adicionais sobre o assunto da página do tributo. DICA: Você deve dar ao seu elemento um atributo de <code>target</code> e configurá-lo para <code>_blank</code> para que seu link seja aberto em uma nova guia (ou seja, <code>target="_blank"</code> ). <strong>User Story # 8:</strong> O elemento <code>img</code> deve redimensionar responsavelmente, em relação à largura de seu elemento pai, sem exceder seu tamanho original. <strong>User Story # 9:</strong> O elemento <code>img</code> deve estar centrado dentro de seu elemento pai. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa uma máquina de ritmos
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/MJyNMd" target="_blank">https://codepen.io/freeCodeCamp/full/MJyNMd</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>User Story # 1:</strong> Eu deveria ser capaz de ver um container externo com um <code>id="drum-machine"</code> que contém todos os outros elementos. <strong>User Story # 2:</strong> Dentro de <code>#drum-machine</code> eu posso ver um elemento com um <code>id="display"</code> . <strong>User Story # 3:</strong> Dentro de <code>#drum-machine</code> eu posso ver 9 elementos de drum pad clicáveis, cada um com um nome de classe de <code>drum-pad</code> , um id único que descreve o clipe de áudio que o drum pad será configurado para acionar e um inner texto que corresponde a uma das seguintes teclas no teclado: Q, W, E, A, S, D, Z, X, C. Os pads de bateria DEVEM estar nesta ordem. <strong>User Story # 4:</strong> Dentro de cada <code>.drum-pad</code> , deve haver um elemento de <code>audio</code> HTML5 que tenha um atributo <code>src</code> apontando para um clipe de áudio, um nome de classe de <code>clip</code> e um id correspondente ao texto interno de seu pai <code>.drum-pad</code> (por exemplo, <code>id="Q"</code> , <code>id="W"</code> , <code>id="E"</code> etc.). <strong>User Story # 5:</strong> Quando clico em um elemento <code>.drum-pad</code> , o clipe de áudio contido em seu elemento de <code>audio</code> filho deve ser acionado. <strong>User Story # 6:</strong> Quando eu pressiono a tecla trigger associada a cada <code>.drum-pad</code> , o clipe de áudio contido em seu elemento filho de <code>audio</code> deve ser acionado (por exemplo, pressionar a tecla Q deve acionar o bloco de percussão que contém a string "Q" pressionar a tecla W deve acionar o bloco de percussão que contém a string "W", etc.). <strong>User Story # 7:</strong> Quando um <code>.drum-pad</code> é acionado, uma string descrevendo o clipe de áudio associado é exibida como o texto interno do elemento <code>#display</code> (cada string deve ser única). Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/MJyNMd" target="_blank">https://codepen.io/freeCodeCamp/full/MJyNMd</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>User Story # 1:</strong> Eu deveria ser capaz de ver um container externo com um <code>id="drum-machine"</code> que contém todos os outros elementos. <strong>User Story # 2:</strong> Dentro de <code>#drum-machine</code> eu posso ver um elemento com um <code>id="display"</code> . <strong>User Story # 3:</strong> Dentro de <code>#drum-machine</code> eu posso ver 9 elementos de drum pad clicáveis, cada um com um nome de classe de <code>drum-pad</code> , um id único que descreve o clipe de áudio que o drum pad será configurado para acionar e um inner texto que corresponde a uma das seguintes teclas no teclado: Q, W, E, A, S, D, Z, X, C. Os pads de bateria DEVEM estar nesta ordem. <strong>User Story # 4:</strong> Dentro de cada <code>.drum-pad</code> , deve haver um elemento de <code>audio</code> HTML5 que tenha um atributo <code>src</code> apontando para um clipe de áudio, um nome de classe de <code>clip</code> e um id correspondente ao texto interno de seu pai <code>.drum-pad</code> (por exemplo, <code>id="Q"</code> , <code>id="W"</code> , <code>id="E"</code> etc.). <strong>User Story # 5:</strong> Quando clico em um elemento <code>.drum-pad</code> , o clipe de áudio contido em seu elemento de <code>audio</code> filho deve ser acionado. <strong>User Story # 6:</strong> Quando eu pressiono a tecla trigger associada a cada <code>.drum-pad</code> , o clipe de áudio contido em seu elemento filho de <code>audio</code> deve ser acionado (por exemplo, pressionar a tecla Q deve acionar o bloco de percussão que contém a string "Q" pressionar a tecla W deve acionar o bloco de percussão que contém a string "W", etc.). <strong>User Story # 7:</strong> Quando um <code>.drum-pad</code> é acionado, uma string descrevendo o clipe de áudio associado é exibida como o texto interno do elemento <code>#display</code> (cada string deve ser única). Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,7 +8,7 @@ localeTitle: Criar um visualizador de markdown
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/GrZVVO" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVVO</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>User Story # 1:</strong> Eu posso ver um elemento <code>textarea</code> com um <code>id="editor"</code> . <strong>User Story # 2:</strong> Eu posso ver um elemento com um <code>id="preview"</code> . <strong>História do usuário nº 3:</strong> quando eu <code>#editor</code> texto no elemento <code>#editor</code> , o elemento <code>#preview</code> é atualizado enquanto digito para exibir o conteúdo da área de texto. <strong>User Story # 4:</strong> Quando eu <code>#editor</code> o markdown com sabor do GitHub no elemento <code>#editor</code> , o texto é renderizado como HTML no elemento <code>#preview</code> enquanto digito (DICA: você não precisa analisar o Markdown por conta própria - você pode importar a biblioteca Marked para isso: <a href="https://cdnjs.com/libraries/marked" target="_blank">https://cdnjs.com/libraries/marked</a> ). <strong>User Story # 5:</strong> Quando meu visualizador de markdown é carregado pela primeira vez, o texto padrão no campo <code>#editor</code> deve conter um markdown válido que represente pelo menos um de cada um dos seguintes elementos: um cabeçalho (tamanho H1), um sub cabeçalho (tamanho H2) , um link, um código embutido, um bloco de código, um item de lista, um blockquote, uma imagem e um texto em negrito. <strong>User Story # 6:</strong> quando meu visualizador de markdown é carregado pela primeira vez, o markdown padrão no campo <code>#editor</code> deve ser renderizado como HTML no elemento <code>#preview</code> . <strong>Bônus opcional (você não precisa fazer esse teste passar):</strong> Meu visualizador de marcação interpreta os retornos de carro e os renderiza como elementos <code>br</code> (quebra de linha). Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/GrZVVO" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVVO</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>User Story # 1:</strong> Eu posso ver um elemento <code>textarea</code> com um <code>id="editor"</code> . <strong>User Story # 2:</strong> Eu posso ver um elemento com um <code>id="preview"</code> . <strong>História do usuário nº 3:</strong> quando eu <code>#editor</code> texto no elemento <code>#editor</code> , o elemento <code>#preview</code> é atualizado enquanto digito para exibir o conteúdo da área de texto. <strong>User Story # 4:</strong> Quando eu <code>#editor</code> o markdown com sabor do GitHub no elemento <code>#editor</code> , o texto é renderizado como HTML no elemento <code>#preview</code> enquanto digito (DICA: você não precisa analisar o Markdown por conta própria - você pode importar a biblioteca Marked para isso: <a href="https://cdnjs.com/libraries/marked" target="_blank">https://cdnjs.com/libraries/marked</a> ). <strong>User Story # 5:</strong> Quando meu visualizador de markdown é carregado pela primeira vez, o texto padrão no campo <code>#editor</code> deve conter um markdown válido que represente pelo menos um de cada um dos seguintes elementos: um cabeçalho (tamanho H1), um sub cabeçalho (tamanho H2) , um link, um código embutido, um bloco de código, um item de lista, um blockquote, uma imagem e um texto em negrito. <strong>User Story # 6:</strong> quando meu visualizador de markdown é carregado pela primeira vez, o markdown padrão no campo <code>#editor</code> deve ser renderizado como HTML no elemento <code>#preview</code> . <strong>Bônus opcional (você não precisa fazer esse teste passar):</strong> Meu visualizador de marcação interpreta os retornos de carro e os renderiza como elementos <code>br</code> (quebra de linha). Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,7 +8,7 @@ localeTitle: Construa uma máquina de cotação aleatória
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank">https://codepen.io/freeCodeCamp/full/qRZeGZ</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>User Story # 1:</strong> Eu posso ver um elemento wrapper com um <code>id="quote-box"</code> . <strong>User Story # 2:</strong> Dentro de <code>#quote-box</code> , posso ver um elemento com um <code>id="text"</code> . <strong>User Story # 3:</strong> dentro de <code>#quote-box</code> , posso ver um elemento com um <code>id="author"</code> . <strong>User Story # 4:</strong> dentro de <code>#quote-box</code> , posso ver um elemento clicável com um <code>id="new-quote"</code> . <strong>User Story # 5:</strong> dentro de <code>#quote-box</code> , posso ver um clicável <codea< code=""> elemento com um correspondente <code>id="tweet-quote"</code> . <strong>User Story # 6:</strong> No primeiro carregamento, minha máquina de cotação exibe uma cotação aleatória no elemento com <code>id="text"</code> . <strong>User Story # 7:</strong> No primeiro carregamento, minha máquina de cotação exibe o autor da citação aleatória no elemento com <code>id="author"</code> . <strong>User Story # 8:</strong> Quando o botão <code>#new-quote</code> é clicado, minha máquina de cotação deve buscar uma nova cotação e exibi-la no elemento <code>#text</code> . <strong>User Story # 9:</strong> Minha máquina de cotação deve buscar o autor da nova cotação quando o botão <code>#new-quote</code> for clicado e exibi-lo no elemento <code>#author</code> . <strong>User Story # 10:</strong> Eu posso twittar a citação atual clicando no elemento <code>#tweet-quote</code> <code>a</code> . Este <code>a</code> elemento deve incluir o <code>"twitter.com/intent/tweet"</code> caminho em que é <code>href</code> atributo para twittar a cotação atual. <strong>User Story # 11:</strong> O elemento wrapper <code>#quote-box</code> deve ser centrado horizontalmente. Por favor, execute testes com o nível de zoom do navegador em 100% e a página maximizada. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </codea<></section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank">https://codepen.io/freeCodeCamp/full/qRZeGZ</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>User Story # 1:</strong> Eu posso ver um elemento wrapper com um <code>id="quote-box"</code> . <strong>User Story # 2:</strong> Dentro de <code>#quote-box</code> , posso ver um elemento com um <code>id="text"</code> . <strong>User Story # 3:</strong> dentro de <code>#quote-box</code> , posso ver um elemento com um <code>id="author"</code> . <strong>User Story # 4:</strong> dentro de <code>#quote-box</code> , posso ver um elemento clicável com um <code>id="new-quote"</code> . <strong>User Story # 5:</strong> dentro de <code>#quote-box</code> , posso ver um clicável <codea< code=""> elemento com um correspondente <code>id="tweet-quote"</code> . <strong>User Story # 6:</strong> No primeiro carregamento, minha máquina de cotação exibe uma cotação aleatória no elemento com <code>id="text"</code> . <strong>User Story # 7:</strong> No primeiro carregamento, minha máquina de cotação exibe o autor da citação aleatória no elemento com <code>id="author"</code> . <strong>User Story # 8:</strong> Quando o botão <code>#new-quote</code> é clicado, minha máquina de cotação deve buscar uma nova cotação e exibi-la no elemento <code>#text</code> . <strong>User Story # 9:</strong> Minha máquina de cotação deve buscar o autor da nova cotação quando o botão <code>#new-quote</code> for clicado e exibi-lo no elemento <code>#author</code> . <strong>User Story # 10:</strong> Eu posso twittar a citação atual clicando no elemento <code>#tweet-quote</code> <code>a</code> . Este <code>a</code> elemento deve incluir o <code>"twitter.com/intent/tweet"</code> caminho em que é <code>href</code> atributo para twittar a cotação atual. <strong>User Story # 11:</strong> O elemento wrapper <code>#quote-box</code> deve ser centrado horizontalmente. Por favor, execute testes com o nível de zoom do navegador em 100% e a página maximizada. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </codea<></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
Reference in New Issue
Block a user