39 lines
5.2 KiB
Markdown
39 lines
5.2 KiB
Markdown
|
---
|
||
|
|
id: 587d78b0367417b2b2512b05
|
||
|
|
title: Build a Technical Documentation Page
|
||
|
|
isRequired: true
|
||
|
|
challengeType: 3
|
||
|
|
videoUrl: ''
|
||
|
|
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, desk
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id="instructions">
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests: []
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|