odin sign up form

O Projeto Odin - Solução de formulário de inscrição

Esta é uma solução para projetar: formulário de inscrição para o projeto Odin. O projeto Odin fornece um currículo de codificação de código aberto gratuito que pode ser tomado totalmente online.

Projeto: a calculadora é um dos dois projetos no curso intermediário de HTML e CSS. Ele oferece uma oportunidade para praticar o conteúdo abordado nas seções do curso, conceitos intermediários de HTML , conceitos intermediários de CSS e formas .

Índice

• Visão geral
  • Captura de tela
  • Links
• Meu processo
  • Construído com
  • O que eu aprendi
  • Desenvolvimento contínuo
  • Recursos úteis
• Autor
• Agradecimentos

Visão geral

Captura de tela

Links

• Repositório do GitHub
• Site ao vivo

Meu processo

Construir com

• Marcação semântica HTML5
• Propriedades personalizadas do CSS
• CSS Flexbox

O que eu aprendi

Três coisas nesta solução que eu nunca havia usado em projetos antes são:

• Tipos de entrada HTML5
• Formas de estilo
• Pilha de fontes do sistema

Outros recursos que foram abordados as seções do curso, conceitos intermediários de HTML , conceitos intermediários de CSS e formas e que eu usei na minha solução:

• CSS Reset
• Unidades relativas
• Fontes auto-hospedadas
• Estilos de texto
• Imagem de fundo
• Sombra da caixa
• Pseudo-classes
• Propriedades personalizadas

Desenvolvimento contínuo

Para minha solução, usei apenas os recursos HTML e CSS que foram abordados no currículo do caminho de aprendizado de javascript de pilha completa para este projeto.

A grade CSS é abordada na próxima seção após este projeto. O layout no arquivo de design deste projeto seria um bom candidato para o Layout First Design e CSS Grid.

O design responsivo não é coberto até muito mais tarde no currículo. Fiz minha solução o mais receptiva possível com as ferramentas que eu tinha disponível, usando o CSS Flexbox, mas sem consultas de mídia.

A acessibilidade da Web também é abordada muito mais tarde no currículo. Usei o que aprendi sobre acessibilidade enquanto trabalhava nos desafios do mentor de front -end.

Validar que os campos de senha se correspondem, requer JavaScript. O uso de JavaScript para validação de formulário é abordado em uma lição futura. Minha solução usa apenas a validação do local do cliente para o endereço de email. Ele não possui campos de formulários necessários, pois nenhum foi indicado no arquivo de design.

O formulário não tem back -end e não envia os dados enviados para qualquer lugar.

Recursos úteis

• Essas pilhas de fontes melhorarão o desempenho do seu site por Kevin Powell - este vídeo fornece uma boa introdução à pilha de fontes da interface do usuário do sistema.

Autor

Encontre -me online:

• Mastodon - @sabineemden

Agradecimentos

Além da pilha de fontes do sistema, esta solução usa o nórdico de fonte em negrito de Joël Carroché. A fonte é gratuita para uso pessoal e comercial e inclui um alfabeto rúnico completo com suporte Unicode.

Esta solução também usa a redefinição CSS de Josh Comeau e o esquema de cores quase preto e branco.