Reto 1: Formulario de suscripción a newsletter

Cuando escribí sobre los consejos para el trabajo Front End, una de las cosas que quería hacer es resolver pruebas de código y/o ayudar a gente con estos enfoques.

Si bien no voy a coger directamente la que usé en mi empresa, voy a empezar con una versión venida a menos de la prueba: un formulario de alta para una newsletter.

El reto

Coge el fichero y recrea el formulario de inicio de sesión con lo que quieras. Es un reto de front-end y no necesitamos gestionar el formulario en sí.

Las instrucciones son:

• Validar el correo y evitar enviar un formulario erróneo.
• Gestionar el foco en el formulario.
• Uso de elementos semánticos.
• Experiencia accesible.

Conseguirás puntos extras si...

• Hay transiciones (sencillas),
• Usas CSS moderno.
• No matas moscas a cañonazos con librerías extra.

Ver fichero en tamaño completo.

Algunos de los colores:

:root {
  --primary-color: #4292f4;
  --text-color: #1f1f27;
  --border-color: #e4e4e4;
  --placeholder-color: rgba(31, 31, 39, .5);
  --error-color: #af2854;
  --error-background: #fbecf1;
  --success-color: #93f48b;
  --success-background: #f8fef8;
}

Los colores los he obtenido usando solo el color principal y usando ColorSpace y luego 0to255.com para los tintes de errores.

¿Te animas? Si quieres me lo puedes enviar y lo colgaré como solución. Si no quieres hacerlo por twitter siempre puedes encontrar mi correo por aquí.

En 1-2 semanas colgaré mi solución en otro artículo probablemente con vídeo para ir comentando el razonamiento.

¡Te espero!