Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Deve haver um elemento main com um id="main-doc" correspondente, que contenha o conteúdo principal da página (documentação técnica). 1. Dentro do elemento #main-doc, deve haver vários elementos section, cada um com a classe main-section. Deve haver, pelo menos, cinco. 1. O primeiro elemento de cada .main-section deve ser um elemento header que contenha o texto que descreve o tópico daquela seção. 1. Cada elemento section com a classe 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 underscores (por exemplo, a seção que contém o cabeçalho "JavaScript and Java" deve ter um id="JavaScript_and_Java" correspondente). 1. Os elementos .main-section devem conter, juntos, pelo menos dez elementos p no total (não 10 para cada elemento). 1. Os elementos .main-section devem conter, juntos, pelo menos cinco elementos code no total (não 5 para cada elemento). 1. Os elementos .main-section devem conter, juntos, pelo menos cinco elementos li no total (não 5 para cada elemento). 1. Deve haver um elemento nav com um id="navbar" correspondente. 1. O elemento da barra de navegação (navbar) deve conter um elemento header que contenha o texto que descreve o tópico da documentação técnica. 1. Além disso, a barra de navegação deve conter elementos de âncora (a) com a classe nav-link. Deve haver um para cada elemento com a classe main-section. 1. O elemento header em #navbar deve vir antes de qualquer elemento de link (a) na barra de navegação. 1. Cada elemento com a classe nav-link deve conter um texto que corresponda ao texto do header dentro de cada section (exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua barra de navegação deve ter um elemento que contenha o texto "Olá mundo"). 1. Ao clicar em um elemento da barra de navegação, a página deve navegar para a seção correspondente do elemento #main-doc (exemplo: ao clicar em um elemento .nav-link que contenha o texto "Olá mundo", a página deve navegar para o elemento section que tenha esse id e contenha o cabeçalho correspondente). 1. Em dispositivos com tamanho regular (laptops, desktops), o elemento com id="navbar" deve ser mostrado no lado esquerdo da tela e deve sempre estar visível para o usuário. 1. A documentação técnica deve utilizar pelo menos uma media query. Nota: Certifique-se de vincular sua folha de estilos no seu HTML e aplicar seu CSS.

Testes:

• Você deve ter um elemento `main` com o `id` `main-doc`.
• Você deve ter pelo menos cinco elementos `section` com a classe `main-section`.
• Todos os elementos com a classe `.main-section` devem ser elementos `section`.
• Você deve ter pelo menos cinco elementos `.main-section` aninhados dentro de `#main-doc`.
• O primeiro filho de `.main-section` deve ser um elemento `header`.
• Nenhum dos elementos `header` deve estar vazio.
• Todos os elementos com a classe `.main-section` devem ter um `id`.
• Cada `.main-section` deve ter um `id` que corresponda ao texto de seu primeiro filho, e todos os espaços no texto do filho devem ser substituídos por sublinhados (`_`) no id.
• Você precisa ter, pelo menos, 10 elementos `p` (ao todo) dentro dos elementos `.main-section`.
• Você precisa ter, pelo menos, cinco elementos `code` (ao todo) dentro dos elementos `.main-section`.
• Você precisa ter, pelo menos, cinco elementos `li` dentro dos elementos `.main-section`.
• Você deve ter um elemento `nav` com o `id` `navbar`.
• O elemento `#navbar` deve ter exatamente um elemento `header` dentro dele.
• Você deve ter pelo menos um elemento `a` com a classe `nav-link`.
• Todos os elementos com a classe `.nav-link` devem ser elementos âncora (`a`).
• Todos os elementos com a classe `.nav-link` devem estar dentro de `#navbar`.
• Você deve ter o mesmo número de elementos `.nav-link` e de elementos `.main-section`.
• O elemento `header` em `#navbar` deve vir antes de qualquer elemento de link (`a`) que também esteja em `#navbar`.
• Cada elemento com a classe `.nav-link` deve conter um texto que corresponda ao texto do `header` da `section` relacionada (por exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua `#navbar` deve ter um elemento `.nav-link` que contenha o texto "Olá mundo").
• Cada `.nav-link` deve ter um atributo `href` que vincule à sua `.main-section` correspondente (por exemplo: se você clicar em um elemento `.nav-link` que contenha o texto "Olá mundo", a página navegará para o elemento `section` com aquele id).
• Seu `#navbar` deve estar sempre na borda esquerda da janela.
• O projeto de documentação técnica deve utilizar pelo menos uma media query.