O projeto "Página Documentação Técnica" faz parte dos desafios propostos pela freeCodeCamp no âmbito da Certificação de Treinamento em Web Design Responsivo e tem como foco a criação de uma página de documentação técnica voltada para a linguagem de programação Python abrangendo conceitos fundamentais até tópicos mais avançados como classes, exceções e manipulação de arquivos.
Desenvolver um aplicativo no CodePen que possua funcionalidades semelhantes ao seguinte exemplo: https://codepen.io/freeCodeCamp/full/NdrKKL.
Este projeto visa atender às histórias de usuários listadas abaixo e garantir que todos os testes estejam passando. Além disso, é encorajado que seja adicionado um estilo pessoal ao projeto.
Para a implementação, são permitidas as seguintes tecnologias: HTML, JavaScript e CSS. Recomenda-se o uso de CSS puro, visto que é o enfoque das lições até o momento e permite praticar habilidades essenciais. Embora seja permitido o uso de Bootstrap ou SASS, é desencorajado o uso de tecnologias adicionais como jQuery, React, Angular ou Vue. O uso destas tecnologias é por conta e risco do desenvolvedor. Outros projetos proporcionarão oportunidades para explorar pilhas de tecnologia diferentes, como React.
Relatórios de problemas que adotem a pilha de tecnologia sugerida para este projeto serão aceitos e esforços serão feitos para corrigi-los.
- Posso ver um elemento principal com um id correspondente a "main-doc", que contém o conteúdo principal da página (documentação técnica).
- No elemento #main-doc, posso ver vários elementos de seção, cada um com uma classe de main-section. Deve haver no mínimo 5.
- O primeiro elemento dentro de cada .main-section deve ser um elemento de cabeçalho que contém texto que descreve o tópico daquela seção.
- Cada elemento de seção com a classe main-section também deve ter um id que corresponda ao texto de cada cabeçalho contido dentro dele. Quaisquer espaços devem ser substituídos por sublinhados (por exemplo, A seção que contém o cabeçalho "JavaScript and Java" deve ter um id correspondente a "JavaScript_and_Java").
- Os elementos .main-section devem conter pelo menos 10 elementos p no total (não cada um).
- Os elementos .main-section devem conter pelo menos 5 elementos de código no total (não cada um).
- Os elementos .main-section devem conter pelo menos 5 itens de li no total (não cada um).
- Posso ver um elemento de navegação com um id correspondente a "navbar".
- O elemento navbar deve conter um elemento de cabeçalho que contém texto que descreve o tópico da documentação técnica.
- Além disso, o navbar deve conter elementos de link (a) com a classe de nav-link. Deve haver um para cada elemento com a classe main-section.
- O elemento de cabeçalho no navbar deve vir antes de qualquer elemento de link (a) no navbar.
- Cada elemento com a classe nav-link deve conter texto que corresponda ao texto do cabeçalho dentro de cada seção (por exemplo, se você tiver uma seção/cabeçalho "Hello world", seu navbar deve ter um elemento que contenha o texto "Hello world").
- Quando 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 para um elemento de seção que possui esse id e contém o cabeçalho correspondente).
- Em dispositivos de tamanho regular (laptops, desktops), o elemento com id "navbar" deve ser mostrado no lado esquerdo da tela e deve estar sempre visível para o usuário.
- Minha página de documentação técnica deve usar pelo menos uma consulta de mídia.
O projeto utiliza as seguintes tecnologias:
- HTML5: Para estruturar o conteúdo da página da web.
- CSS3: Para estilização e design de layout.
- JavaScript: Para adicionar interatividade e navegação suave.
A estrutura do projeto é organizada da seguinte forma:
pagina-documentacao-tecnica/
|-- dist/
| |-- index.html
| |-- style.css
| |-- script.js
|-- src/
| |-- index.html
| |-- style.css
| |-- script.js
|-- README.md
|-- LICENSE.txt
- **dist/. Contém os arquivos finais do projeto, prontos para implantação.
- **src/. Contém os arquivos de código-fonte do projeto.
A página de documentação técnica oferece informações detalhadas sobre os seguintes tópicos:
- Introdução
- Variáveis
- Loops
- Funções
- Estruturas de Dados
- Classes
- Exceções
- Módulos
- Manipulação de Arquivos
- Bibliotecas
Siga os passos abaixo para executar o projeto em sua máquina local:
-
Clone o repositório:
git clone https://github.com/example/pagina-documentacao-tecnica.git
-
Navegue até o diretório do projeto:
cd pagina-documentacao-tecnica
-
Abra o arquivo
index.html
em seu navegador para visualizar a página de documentação técnica.
Contribuições para este projeto são bem-vindas. Sinta-se à vontade para abrir pull requests, relatar bugs ou sugerir novos recursos.
Este projeto está licenciado sob a Licença MIT.