Carrito de Compras. Con HTML, CSS y Javascript. Aprender haciendo.Sin Frameworks.

Aprendé a programar una página web real desde cero! En este ejercicio diseñamos la estructura web básica de un documento web con tarjetas renderizadas con el autocompletado de grid y botón de ventana lateral para mostrar el carrito de compras , con un botón superior para abrir el carrito en cualquier momento y la paginación para muchos productos, utilizando únicamente HTML5 , CSS3 y Javascript puro, sin frameworks. Lo que aprenderás en este video: ◆ Estructurar la información con HTML. ◆ Generar tarjetas que renderizan adaptándose a la pantalla. ◆ Filtrar la información con javascript. ◆ Paginar los productos con javascript. ◆ Optimizar tus estilos con CSS. ◆ Usar ventana lateral emergente para el carrito de compras. ◆ Totalizar el carrito de compras. ◆ Enviar pedido al dueño del negocio por whatsapp. 🕒 Marcas de tiempo del video 00:00:00 🟢 Presentación del ejemplo 00:00:57 📐 Inicio del Encabezado - Header 00:23:52 🎨 Sección Inicio 00:31:25 🖼️ Inicio sección catálogo 00:48:20 🖼️ Renderizar Tarjetas Javascript 00:57:25 🔍 Filtrado y Búsqueda 01:08:00 🛒 Ventana Emergente Carrito de Compras HTML CSS 01:14:00 🛒 Javascript Funcionamiento Carrito de Compras 🏫 ¿Para quién es este video? ● Profesores: Un excelente recurso didáctico y práctico para enseñar diseño web en sus materias y para todos aquellos profesores que deseen compartir su materia al mundo creando un documento web completamente gratuito. ● Alumnos y Principiantes: La guía perfecta para iniciarse en el mundo del desarrollo web, crear su primer documento y aprender a subirlo a internet para compartirlo con el mundo. 📂 Recursos útiles: Proyecto en acción: https://j4.codigoenweb.com/ Código:https://codigoenweb.com Servidor gratuito para subir la web: https://github.com/ https://www.netlify.com/ https://vercel.com/ Otros recursos: https://fonts.google.com/ https://cdnjs.com/libraries/font-awesome https://www.pexels.com/es-es/ https://unsplash.com https://www.photopea.com/ ¡No olvides suscribirte, darle un me gusta, compartir el video y dejar tus dudas en los comentarios! Nos ayuda a continuar y es gratis.