Carnival FullStack Landing Page

Tecnologías Utilizadas

Este proyecto utiliza las siguientes tecnologías:

• HTML5: Para la estructura del contenido.
• CSS3: Para el diseño y estilos, incluyendo el uso de variables CSS y media queries para diseño responsivo.
• JavaScript: Para la lógica y funcionalidad del formulario y la navegación interactiva.

Estructura de Carpetas

La estructura de carpetas del proyecto es la siguiente:

landing_web_ejemplo/
│
├── assets/          # Archivos estáticos como imágenes y favicon
├── pages/           # Páginas adicionales como "about" y "media"
├── style.css        # Archivo principal de estilos
├── script.js        # Archivo principal de JavaScript
├── index.html       # Página principal del proyecto
└── README.md        # Documentación del proyecto

Buenas Prácticas para Ordenar Archivos y CSS

1. Estructura de Archivos:

   • Mantén los archivos estáticos (imágenes, íconos, etc.) en una carpeta assets.
   • Divide las páginas HTML en una carpeta pages para mantener el proyecto organizado.
   • Usa nombres descriptivos para los archivos y carpetas.

2. CSS:

   • Utiliza variables CSS para colores y estilos reutilizables.
   • Organiza las reglas CSS en secciones claras (por ejemplo: estilos generales, estilos específicos de componentes, media queries).
   • Coloca las media queries al final del archivo CSS o cerca de los estilos relacionados.

Validación del Formulario

El formulario incluye validaciones básicas implementadas en JavaScript para garantizar que los datos ingresados sean correctos antes de enviarlos. A continuación, se describen los pasos principales:

1. Campos Requeridos:

   • Se verifica que todos los campos obligatorios estén completos.

2. Validación de Email:

   • Se utiliza una expresión regular para comprobar que el correo electrónico tenga un formato válido.

3. Mensajes de Error:

   • Si algún campo no pasa la validación, se muestra un mensaje de error debajo del campo correspondiente.

4. Prevención de Envío:

   • Si hay errores, el formulario no se envía hasta que todos los campos sean válidos.

El código de validación se encuentra en el archivo script.js y utiliza eventos como submit y input para manejar la interacción del usuario.

Cómo Clonar el Proyecto

Sigue estos pasos para clonar el proyecto:

1. Abre tu terminal y ejecuta el siguiente comando:

   git clone <URL_DEL_REPOSITORIO>

2. Navega al directorio del proyecto:

   cd landing_web_ejemplo

Cómo Ejecutarlo

1. Abre el archivo index.html en tu navegador preferido.
2. Asegúrate de que los archivos style.css y script.js estén en el mismo nivel o en las rutas especificadas en el archivo HTML.

¡Listo! Ahora puedes explorar la landing page y probar su funcionalidad.