Esta es mi implementación del desafío del Formulario de Contacto en Frontend Mentor. Este proyecto fue creado para practicar y mejorar mis habilidades en HTML, CSS y JavaScript construyendo un formulario de contacto accesible y responsive.
Los usuarios deben ser capaces de:
- Completar el formulario y ver un mensaje de éxito al enviarlo correctamente
- Recibir mensajes de validación del formulario si:
- Se omite un campo requerido
- La dirección de correo electrónico no tiene el formato correcto
- Completar el formulario usando solo el teclado
- Tener los inputs, mensajes de error y el mensaje de éxito anunciados en su lector de pantalla
- Ver el diseño óptimo de la interfaz dependiendo del tamaño de la pantalla de su dispositivo
- Ver estados de enfoque y hover para todos los elementos interactivos en la página
- URL de la solución: Repositorio en GitHub
- URL del sitio en vivo: Demo en vivo
- Marcado HTML5 semántico
- Propiedades personalizadas de CSS
- Flexbox
- JavaScript para validación del formulario
- Flujo de trabajo mobile-first
Durante este proyecto, mejoré mi comprensión sobre:
- Cómo construir formularios accesibles con HTML y CSS
- Implementación de validación de formularios del lado del cliente utilizando JavaScript
- Principios y técnicas de diseño responsive
- Uso de media queries para adaptar el diseño a diferentes tamaños de pantalla
Para futuros proyectos, planeo:
- Explorar técnicas más avanzadas de validación de formularios
- Mejorar la accesibilidad aprendiendo más sobre roles y propiedades ARIA
- Experimentar con frameworks y bibliotecas modernas de CSS para agilizar el desarrollo
- MDN Web Docs - Recurso completo para documentación de HTML, CSS y JavaScript.
- Frontend Mentor - Excelente plataforma para desafíos de codificación frontend.
- GitHub - KarlangaXZ
- Frontend Mentor - @KarlangaXZ