# MD1 - Fron-end

- Estrutura de uma página
- Deve existir um arquivo `index.html` contendo o html da página
- Deve existir um arquivo `styles.css` contendo op estilo da página
- Deve existir a seguinte estrutura:

        <div class='container'>
            <header>
                <nav></nav>
            </header>
            <main></main>
            <footer>
                <nav></nav>
            </footer>            
        </div>

- Em cada página, só pode existir uma única tag para `header`, `main` e `footer`
- O restante do conteúdo, devem está organizados dentro das tag's `div`, `section`, `aside`, e `article`
- A div container deve está assim:

        .container {
          width: 100vw;
          height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;            
        }    

- Os itens devem está centralizados na tela
- O header, main e footer, deve está com o `widht: 1440px` e `height: 100%`
- Letras maiúsculas:
- Não escreve em maiúsculo, fazer essa conversão no CSS, usando a seguinte propriedade:

        .classe {
            text-transform: uppercase
        }

- Ao usar as letras em mauúsculas, o leitores de telas, vão entender como `siglas` e vai ler letra por letra
- Aplicando o elemento NAV
- O elemento nav não deve ser usado em links mencionados em um parágrafo de conteúdo e também em links no rodapé do tipo “site criado por…”. Apenas aqueles grupos que contém links importantes devem ser englobados por esse elemento. Forma tradicional de marcação para blocos de navegação.

- Exibição de imagens:
- Ao utilizar a tag `img`, é obrigatório a utilização do atributo `alt`

- Utilizar imagens SVG:
- Deve ser usado a tag `img` para exibir imagens `svg`:
- EX: `<img src="../../assets/home/image-homepage-hero.svg" alt="...">`
- E não dessa forma:

          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14">
              <g fill="none" fill-rule="evenodd" stroke="#5fb4a2">
                  <path d="M0 9l8 4 8-4" />
                  <path opacity=".5" d="M0 5l8 4 8-4" />
                  <path opacity=".25" d="M0 1l8 4 8-4" />
                </g>
          </svg>

- Utilizando a tag `img`, você pode usar o atributo `alt` para acessibilidade e também para informa para o usuários se houver algum erro de carregamento
- Importação das fontes:
- Pode está no arquivo `.html` ou `.css`,
- Deve ter um link com a importação das seguintes fontes:
- `Ibarra Real Nova`
- `Public Sans`
- Na propriedade font-family, deve está usando a fonte genéria depois das fontes importadas
- O ideal é que a importação das fontes esteja no arquivo `global.css`

- Organização do CSS
- Deve existir um arquivo `global.css` dentro do diretório css do projeto
- Se existir outras páginas, deve ter um arquivo contendo os estilos dos projetos do portfólio, dentro do diretório css do projeto
- Não deve ter cometários no código`.css`
- Não deve ter linhas sobrando dentro de cada bloco de estilo

- Organização do HTML
- Usar as tegs semâticas de acordo com cada conteúdo que será exibido em tela
- Usar nomes de classes o mais semâtico possível com o conteúdo que irá exibir
- Não deve ter comentários no código

- Importação do CSS e imagens
- É para utilizar o caminho relativo nas importações de estilos e imagens

- Links para arquivos externos
- Nos links para as redes sociais, deve utilizar a `ùrl` referente a cada rede

- Links para arquivos internos
- Nos links para os itens do menu, deve utilizar o caminho relativo

- Display Flex
- A organizaçõa e o alinhamento dos elementeos em tela, devem está utilizando o display flex