Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/karlangaxz/contact-form-main

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.
https://github.com/karlangaxz/contact-form-main

css frontend git github html javascript vscode

Last synced: about 4 hours ago
JSON representation

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.

Awesome Lists containing this project

README 

        
# Frontend Mentor - Solución del Formulario de Contacto



Esta es mi implementación del [desafío del Formulario de Contacto en Frontend Mentor](https://www.frontendmentor.io/challenges/contact-form--G-hYlqKJj). Este proyecto fue creado para practicar y mejorar mis habilidades en HTML, CSS y JavaScript construyendo un formulario de contacto accesible y responsive.



## Tabla de Contenidos



- [Visión General](#visión-general)

  - [El Desafío](#el-desafío)

  - [Captura de Pantalla](#captura-de-pantalla)

  - [Enlaces](#enlaces)

- [Mi Proceso](#mi-proceso)

  - [Construido con](#construido-con)

  - [Lo que Aprendí](#lo-que-aprendí)

  - [Desarrollo Continuo](#desarrollo-continuo)

  - [Recursos Útiles](#recursos-útiles)

- [Autor](#autor)

- [Agradecimientos](#agradecimientos)



## Visión General



### El Desafío



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



### Captura de Pantalla



![Captura de pantalla 2](https://github.com/KarlangaXZ/contact-form-main/blob/main/muestra%20de%20la%20pagina.png)



### Enlaces



- URL de la solución: [Repositorio en GitHub](https://github.com/KarlangaXZ/contact-form-main.git)

- URL del sitio en vivo: [Demo en vivo](https://karlangaxz.github.io/contact-form-main/)



## Mi Proceso



### Construido con



- Marcado HTML5 semántico

- Propiedades personalizadas de CSS

- Flexbox

- JavaScript para validación del formulario

- Flujo de trabajo mobile-first



### Lo que Aprendí



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



### Desarrollo Continuo



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



### Recursos Útiles



- [MDN Web Docs](https://developer.mozilla.org/) - Recurso completo para documentación de HTML, CSS y JavaScript.

- [Frontend Mentor](https://www.frontendmentor.io) - Excelente plataforma para desafíos de codificación frontend.



## Autor



- GitHub - [KarlangaXZ](https://github.com/KarlangaXZ)

- Frontend Mentor - [@KarlangaXZ](https://www.frontendmentor.io/profile/KarlangaXZ)