Projeto do curso HTML5 e CSS3 (parte 4): avançando no CSS, codificado.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Barbearia Alura Completa |
| 🏷️ Tecnologias | HTML 5, CSS3 |
| 🚀 URL | https://yagojsantos.github.io/barbearia-alura-completa/ |
O foco nessa etapa foi o aprimoramento da página “Home” elaborada na primeira parte do curso.
Confira a evolução nas imagens abaixo 👇:
| Antigo | Novo |
|---|---|
 |
 |
A fim de padronizar o layout, foram adicionados cabeçalho e rodapé presentes nas demais páginas, assim como melhorias na estrutura, através da implementação de tags semânticas do html. Foram acrescentados vídeo, mapa e fonte de texto, por meio da importação e uso de fontes externas, aplicação de recursos visuais do css, além do uso do viewport e media query para que o design se tornasse responsivo.
Minha dificuldade foi determinar qual o valor de medida deveria ser usado para que os campos do formulário (inputs de texto, combo box e botão de envio), presentes na página de “Contato”, se adaptassem de maneira eficaz. A solução foi usar a ferramenta DevTools do navegador para visualizar os espaçamentos interno e externo e entender quais proporções de tamanho os inputs deveriam ter.
Overview do aprendizado:
HTML
- Tag de divisão semântica (section);
- Importação de fontes externas (vídeo, mapa, fonte de texto);
- Design responsivo com as propriedades da tag .
CSS
- Como comentar no código /**/;
- Uso do Float e Clear;
- Propriedades para melhorias visuais (opacity, box-shadow, gradient);
- Pseudo-classes (visited, required, first-child);
- Pseudo-elementos (first-letter, first-line, after, before);
- Seletores avançados (>, ~, +, not);
- Media query.
