freeCodeCamp

5.2 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d78b0367417b2b2512b05	Build a Technical Documentation Page	true	3		Construa uma Página de Documentação Técnica

Description

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 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! User Story # 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). User Story # 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. User Story # 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. User Story # 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" ). User Story # 5: Os elementos de .main-section devem conter pelo menos 10 elementos p (não cada um). User Story # 6: Os elementos .main-section devem conter pelo menos 5 elementos de code total (não cada um). User Story # 7: Os elementos .main-section devem conter no mínimo 5 itens li (não cada um). User Story # 8: Eu posso ver um elemento nav com um id="navbar" . User Story # 9: O elemento navbar deve conter um elemento de header que contenha texto que descreva o tópico da documentação técnica. User Story # 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. User Story # 11: O elemento de header na barra de navegação deve vir antes de qualquer elemento de link ( a ) na barra de navegação. User Story # 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"). User Story # 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 User Story # 14:. no regulares dispositivos do tamanho (laptops, desktops), o elemento com id="navbar" deve ser mostrado no lado esquerdo da tela e deve sempre User Story # 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 para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o Read-Search-Ask método se você ficar preso.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

5.2 KiB Raw Blame History