Proyecto Integrador para el curso de Front End con JavaScript de Talento Tech 2024 de la Agencia de Habilidades para el Futuro (Ministerio de Educación, Ciudad Autónoma de Buenos Aires, Argentina).

El proyecto consite en la creación de una página web con un carrito de compras. Este se hará en varias etapas de desarrollo donde se irán agregando distintos aspectos a partir de las tecnologías aprendidas en el curso.

Se cuenta con una ruta de avance con los requisitos mínimos para cada etapa.

Construye la estructura inicial con HTML:
✔️ Estructura básica HTML dividida en etiquetas semánticas estructurales.
✔️ Archivo README.md que explique el proyecto.
✔️ Integración de archivos multimedia funcionales.
✔️ Enlaces que simulen una navegación interna en la página (Inicio, Productos, etc.).
✔️ Formulario de contacto con Formspree.
✔️ Proyecto subido a un repositorio y con URL funcional.

Agrega estilos con CSS:
✔️ Aplicación de estilos básicos con CSS (header, footer, lista de navegación).
✔️ Integración de un archivo externo styles.css.
✔️ Implementación de Google Fonts.
✔️ Propiedades de Background en alguna sección (color, imagen, degradado, etc.).
✔️ Sección Productos: organizada en cards de forma responsiva con Flexbox.
✔️ Sección Reseñas: organizada con Grid.
✔️ Sección Contacto: responsiva con Media Queries.

Agrega funcionalidad con JavaScript:
✔️ Integración de un archivo script.js relacionado con el HTML.
✔️ Implementación de una función que verifique si todos los campos del formulario de contacto están completos, mostrando un mensaje en consola (extra: verifica el formato del e-mail y del teléfono).
✔️ Creación de un ciclo que genere dinámicamente una lista de productos disponibles y los muestre en la consola.
✔️ Listado de productos incluidos en nuestro HTML generado por medio de una función en Js.
✔️ Función que cree un array de productos y los muestre en la página utilizando una plantilla HTML dinámica.
✔️ Carrito de compras que permita a los usuarios añadir productos desde las cards creado provisoriamente hasta trabajar con permanencia de datos.

Temas que no se llegaron a practicar en clase:
❌ Reemplazar la barra de navegación por un navbar responsivo creado por Bootstrap, adaptada a la paleta de colores del proyecto.
❌ Implementación de un evento click que muestra la descripción ampliada del producto que clickeamos.
❌ Utilizar Fetch para obtener datos de una API pública y mostrarlos en la sección main en el HTML.
❌ Procesar los datos obtenidos de la API para organizarlos en cards (diseñadas con Flexbox o Grid).
❌ Implementar un carrito de compras que permita a los usuarios añadir productos desde las cards, utilizando localStorage y sessionStorage para almacenar la información del carrito.
❌ Los productos en el carrito se deben poder visualizar, editar (cambiar la cantidad) y eliminar.
❌ La información debe mantenerse después de recargar la página.
❌ No debe presentar errores en el inspector de código del navegador.

Esta página fue diseñada y desarrollada por Vanina Denegri.

Imágenes de uso libre:



Herramientas web utilizadas en el proyecto:



Herramientas web utilizadas en este README:

⭐ Si te gustó mi proyecto podés dejarme alguna estrellita.
📧 Mandarme algún mensaje.
🔔 Seguirme en redes para comentar y compartir.
💝 Darme los reconocimientos correspondientes si es necesario.

Estos son mis primeros proyectos. Aún me quedan muchas cosas por aprender y mejorar. Si tenés algún comentario para ayudarme a crecer lo recibiré atentamente, siempre y cuando venga con respeto.