HTML.CSS.Javascript. Ecommerce bento grid. Carrito de Compras. Galería. Paginación.Video#1.

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 siguiendo el patrón bento grid. Botón de ventana lateral para mostrar el carrito de compras 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:50 🔢 Creación de Archivos necesarios 00:03:13 🏠 Header HTML-CSS 00:19:28 🖼️ Navegación HTML-CSS 00:22:01 🎨 Main Tarjeta Principal HTML-CSS 00:34:44 🗨️Main Sección Derecha HTML-CSS 00:48:30 🔍 Main Productos HTML-CSS 01:14:00 🖨️ Footer HTML-CSS 01:20:23 🎥 Hover y transiciones CSS 🏫 ¿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://j5.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.