Creando un página de login con CSS3 y HTML5. Para el proyecto de esta semana crearemos una página de login o entrada a una aplicación web, utilizamos keyframes para crear una animación a cada uno de los elementos dentro del formulario web, adicional utilizamos google fonts, bootstrap y font-awesome.
Durante el desarrollo del todo el proyecto utilizamos HTML5 y CSS3 únicamente, para las animaciones los keyframes funcionan muy bien y nos permiten crear proyectos web con un estilo muy profesional.
Para crear una página de login como la que desarrollamos en este proyecto debes tener los conocimientos básicos en HTML5 para la estructura del proyecto y CSS3 para aplicar el diseño.
Las animaciones que utilizamos son básicas, pero como podrás observar crean un efecto muy profesional. Es un punto de partida o referencia para tus proyectos.
Les dejo los pasos del proyecto y más abajo el enlace del video en Youtube si les interesa conocer como desarrollar el proyecto desde cero.
Paso #1: Estructura HTML5
■ Lenguajes de etiquetas, CSS de Bootstrap y iconos de FontAwesome.
Paso #2: Creación de estilos con lenguaje CSS3
■ Uso de Display: Flex para la los ajustes en la estructura, animación con Keyframes y uso de lenguaje CSS3 para los colores, bordes y demás detalles importantes.
Mira el Video de Nuestro Canal en Youtube
Les dejo este vídeo donde explico en detalle el proyecto donde utilizamos el teclado para interactuar con el famoso personaje de Mario Bros.
Puede unirte a nuestro grupo de Meetup styleLeading donde hacemos proyectos en vivo y conversamos sobre diseño y desarrollo de sitios web: https://www.meetup.com/es/STYLE-LEADING/
¡Espero que les guste el proyecto! Te invito a que te des una vuelta por el canal de Youtube y también puedes visitar nuestro BLOG para ver más contenido interesante. Puedes contactar conmigo por correo electrónico, tenemos un repositorio en GitHub del proyecto con sus archivos HTML5, CSS y JavaScript, y así poder realizar las modificaciones necesarias y entender con más detalle el código utilizado.
Me despido como siempre, deseándote los mejor en tus proyectos.
Para dudas, comentarios y sugerencias me puedes contactar a: jair@cooltimedia.com