Front-end com Vue 3

Aparência

Mãos à Obra: Construindo o Site ​

Nesta fase prática do curso, vamos aplicar os conceitos aprendidos para construir um site completo para a nossa cafeteria fictícia, "Café do Código". O site consistirá em várias páginas — Página Inicial, Sobre Nós, Menu e Contato — cada uma com elementos específicos que refletem a identidade e as ofertas da cafeteria. Também vamos estilizar o site para criar uma experiência visual coesa e atraente.

Página Inicial (Home) ​

  • Estrutura Básica: Comece com a definição do esqueleto básico usando as tags html, head, e body.
  • Cabeçalho: Inclua um header que contém o nome da cafeteria e um menu de navegação para facilitar o acesso às outras páginas.
  • Banner Principal: Use a tag <img> para inserir uma imagem de banner que captura a essência da cafeteria.
  • Descrição Breve: Adicione um parágrafo de texto introduzindo a cafeteria, destacando seus pontos únicos ou uma mensagem de boas-vindas.
html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Café do Código</title>
  </head>
  <body>
    <header>
      <h1>Café do Código</h1>
      <nav>
        <ul>
          <li><a href="#sobre">Sobre Nós</a></li>
          <li><a href="#menu">Menu</a></li>
          <li><a href="#contato">Contato</a></li>
        </ul>
      </nav>
    </header>
    <img src="banner.png" alt="Vista do Café do Código" />
    <p>
      Bem-vindo ao Café do Código, seu novo espaço para desfrutar de café de
      qualidade e deliciosos petiscos.
    </p>
  </body>
</html>

Página Sobre Nós ​

  • Conteúdo: Relate a história da cafeteria, incluindo sua missão, visão e valores.
  • Imagens: Inserir fotos do local e da equipe para criar uma conexão visual com os visitantes.

Página do Menu ​

  • Listagem de Produtos: Utilize listas <ul> ou <ol> para categorizar e listar os produtos oferecidos, como Cafés, Bolos e Sanduíches.

Página de Contato ​

  • Formulário de Contato: Crie um formulário com campos para nome, e-mail, e mensagem, permitindo que os visitantes entrem em contato facilmente.
  • Informações de Contato: Inclua detalhes como endereço e telefone da cafeteria.

Estilização com CSS ​

  • Estilos Uniformes: Aplique CSS para garantir que o site tenha um visual harmonioso e profissional.
  • Destaque no Cabeçalho e Rodapé: Use estilos distintos para áreas de cabeçalho e rodapé para definir claramente as seções do site.
  • Classes e IDs: Utilize classes e IDs para estilizar elementos específicos e manter o CSS organizado e fácil de manter.
css
body {
  font-family: Arial, sans-serif;
}
header {
  background-color: #333;
  color: white;
  padding: 10px 20px;
}
nav ul {
  list-style-type: none;
}
nav ul li {
  display: inline;
  margin-right: 10px;
}
img {
  width: auto;
  height: 120px;
}

Este projeto prático irá consolidar sua capacidade de criar um site funcional e visualmente atraente, utilizando HTML e CSS para estruturar e estilizar eficazmente. Ao finalizar, você terá não apenas um produto final para adicionar ao seu portfólio, mas também uma compreensão mais profunda de como os elementos do desenvolvimento web se integram para criar sites completos e funcionais.