Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/NdrKKL . Cumpra as histórias de usuário 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 puro é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS puro. 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! História de usuário # 1: Eu posso ver um elemento main com um id="main-doc" correspondente, que contém o conteúdo principal da página (documentação técnica). História de usuário # 2: Dentro do elemento #main-doc , posso ver vários elementos de section , cada um com uma classe de main-section . Deve haver um mínimo de 5. História de usuário # 3: O primeiro elemento dentro de cada .main-section deve ser um elemento de header que contém texto que descreve o tópico dessa seção. História de usuário # 4: Cada elemento de section com a classe de main-section também deve ter um id que corresponda ao texto de cada header contido nele. Quaisquer espaços devem ser substituídos por sublinhados (por exemplo, a section que contém o cabeçalho "Javascript e Java" deve ter um id="Javascript_and_Java" ). História de usuário # 5: Os elementos de .main-section devem conter pelo menos 10 elementos p (não cada um). História de usuário # 6: Os elementos .main-section devem conter pelo menos 5 elementos de code total (não cada um). História de usuário # 7: Os elementos .main-section devem conter no mínimo 5 itens li (não cada um). História de usuário # 8: Eu posso ver um elemento nav com um id="navbar" . História de usuário # 9: O elemento navbar deve conter um elemento de header que contenha texto que descreva o tópico da documentação técnica. História de usuário # 10: Além disso, a barra de navegação deve conter elementos link ( a ) com a classe de nav-link . Deve haver um para cada elemento com a main-section da classe. História de usuário # 11: O elemento de header na barra de navegação deve vir antes de qualquer elemento de link ( a ) na barra de navegação. História de usuário # 12: Cada elemento com a classe de nav-link deve conter texto que corresponda ao texto do header dentro de cada section (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"). História de usuário # 13: Quando eu clico em um elemento navbar, a página deve navegar para a seção correspondente do elemento main-doc (por exemplo, se eu clicar em um elemento nav-link que contém o texto "Hello world", a página navega a uma section elemento que tem que id e contém o correspondente header História de usuário # 14:. no regulares dispositivos do tamanho (laptops, desktops), o elemento com id="navbar" deve ser mostrado no lado esquerdo da tela e deve sempre História de usuário # 15: Minha página de Documentação Técnica deve usar pelo menos uma consulta de mídia. Você pode criar seu projeto ao bifurcar essa caneta CodePen ou usar esse link CDN para executar os testes em qualquer ambiente que desejar : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Quando terminar, envie o URL do seu projeto, já com todos os testes aprovados. Lembre-se de usar o Read-Search-Ask método se você ficar preso.