<sectionid="description"><strong>Objetivo:</strong> criar um aplicativo <ahref="https://codepen.io"target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <ahref="https://codepen.io/freeCodeCamp/full/NdrKKL"target="_blank">https://codepen.io/freeCodeCamp/full/NdrKKL</a> . Cumpra as <ahref="https://pt.wikipedia.org/wiki/História_de_usuário"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 de usuário # 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>História de usuário # 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>História de usuário # 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>História de usuário # 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>História de usuário # 5:</strong> Os elementos de <code>.main-section</code> devem conter pelo menos 10 elementos <code>p</code> (não cada um). <strong>História de usuário # 6:</strong> Os elementos <code>.main-section</code> devem conter pelo menos 5 elementos de <code>code</code> total (não cada um). <strong>História de usuário # 7:</strong> Os elementos <code>.main-section</code> devem conter no mínimo 5 itens <code>li</code> (não cada um). <strong>História de usuário # 8:</strong> Eu posso ver um elemento <code>nav</code> com um <code>id="navbar"</code> . <strong>História de usuário # 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>História de usuário # 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>História de usuário # 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>História de usuário # 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>História de usuário # 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> elemen
