E-commerce DESDE CERO con HTML, CSS, JS y localStorage 😱

Подписаться 14 тыс.

Просмотров 147 тыс.

50% 1

Bienvenidos a este nuevo video! 👨🏽‍💻
Estaré armando un sitio ecommerce muy completo en HTML, CSS y JavaScript con categorías, carrito de compras, botones de navegación, localStorage y muchos errores en el proceso 😅
Espero que les sirva mucho para aprender y cualquier sugerencia los espero en los comentarios!
Parte 2, versión responsive: • Parte 2: Versión mobil...
Parte 3, agregué Fetch y Librerías: • Parte 3: Agregando FET...
🔗 Links
✅ Repositorio completo: github.com/carpicoder/e-comme...
✅ Resultado final: carpicoder.github.io/e-commer...
✅ Diseñito que tomé como referencia: unblast.com/free-e-commerce-d...
✅ Repositorio completo del curso: github.com/carpicoder/curso-j...
✅ Carpeta del curso: drive.google.com/drive/folder...
Redes
📷 / carpicoder
🐦 / carpicoder
🚀 / discord
👨🏽‍💻 github.com/carpicoder
💼 / matiascoletta
Donaciones
🤙 carpicoder.com/donaciones
Contacto
✉️ hola@carpicoder.com
🌐 carpicoder.com
⌚ Capítulos
0:00 Introducción
0:55 Viendo con qué arrancamos
4:25 Escribiendo el HTML
21:30 Escribiendo el CSS
01:01:58 Escribiendo el JavaScript
2:06:08 Nunca me trabé tanto en mi vida 😂
2:06:13 Volviendo a escribir JavaScript
02:19:50 Conclusión

Опубликовано:

11 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 280

@Jose-ls9dg Год назад

Gracias Carpi !! Como dice Paulo Freire: “Enseñar no es transferir conocimiento, sino crear las posibilidades para su producción o su construcción. Quien enseña aprende al enseñar y quien enseña aprende a aprender”

@carpicoder Год назад

Y yo aprendo mucho de lo que enseño, y aprendo mucho a aprender. Me gusta mucho esa frase, gracias José! 🙌

@Rogeltelo-tw8wj 8 месяцев назад

Con este video me di cuenta después de estudiar 2 meses JavaScript, que no se un carajo de JavaScript

@carpicoder 8 месяцев назад

😂😂😂

@julianplata7630 Год назад

De todos los tutoriales que busqué, este fue el mejor el más claro fácil de entender y dinámico. Muchas gracias me encantó!!!!

@carpicoder Год назад

Muchas gracias Julián por el comentario y las palabritas! Me alegra mucho que te haya servido ♥

@robertopastor6819 9 месяцев назад

Muchas Gracias Carpi!! Estoy aprendiendo JavaScript y con este proyecto me has ayudado mucho a practicar la lógica de programación.

@vanyrov 7 месяцев назад

Gracias Carpi, estoy aprendiendo programación y lo explicaste de forma tan clara, detallada que es fácil de seguir para los que estamos aprendiendo y ese secreto para que no se rompa el bootstrap es fantástico. Nuevo suscriptor y estrella en tu repo.

@benjaminvimalkrishna 8 месяцев назад

muchas gracias Carpi, aprendi muchisimo, eres un gran profe, hiciste algo tan complejo y lo explicaste de manera simple para que personas que recien estamos comenzando pudieran aprender un poco de la magia de los cracks como tu. mil gracias, lo voy a seguir viendo al video hasta que lo pueda hacer mas o menos solito

@camilocastro2854 Год назад

excelente contenido, has mas proyectos de JavaScript y cuando haces un en directo para aprender lógica con JavaScript, me pasa que cuando veo código de JavaScript de alguien lo entiendo pero al momento de realizar algún proyecto desde cero no se como comenzar, me bloqueo y necesito practicar mucho.

@matiiaguirre 6 месяцев назад

Espectacular la explicacion del paso a paso en todo, tuve mis complicaciones y lo mas lindo fue resolverlas, con ayuda de la ia tambien jajaja ! NUEVO SUSCRIPTOR! gracias por semejante video !, ahora a seguir con el mobile y el otro ! pero espectacular. me gusto mucho lo claro que fuiste ! felicitaciones por saber tanto, ojala algun dia sepa 10% de lo que sabes, gracias a este video aprendi muchas cosas nuevas de js y entendi muchas otras !

@leonardodavidlopezvillator2806 7 месяцев назад

Exelente video, nuevo suscriptor 👍🏽 Podrías hacer otro video explicando como usarlo con una base de datos de los productos

@matiascs1908 Год назад

Excelente explicación! Me sirvió mucho! Voy a practicar haciendo una página de ecommerce con tu video!

@Mati123562 8 месяцев назад

Gracias a vos me destrabe del problema que tenia, gracias crack!

@nahuelbotaro8961 11 месяцев назад

un espectaculo como explicas. Muy bueno el ejemplo de la pagina

@axgames405 Год назад

me simplificaste muchisimas dudas, muchas gracias GENIO!!

@javierrazonacosta6759 Год назад

Me has salvado, estoy agradecido. Dejo like, comentario y sub!.

@dantebazan6654 2 месяца назад

GRANDE CARPI, quieren consolidar conceptos? este es un gran video para eso, genio, muchisimas gracias

@MBeats-ny9xt Год назад

Sin haber empezado el video te estoy amando! Me ayudas muchisimo siempre gracias y que siga esto porfaa

@carpicoder Год назад

Gracias! Me alegra mucho que te sirva el contenido!

@fernandoaliaga7449 10 месяцев назад

Mil gracias por el aporte. Sos un genio explicando!!!

@Julio_9B Год назад

Como siempre un video de calidad , mega entendible cada paso , muchas gracias Carpi.

@carpicoder Год назад

Me alegra que les guste el contenido, muchas gracias Julio! 🙌🏼💖

@kazuryto 3 месяца назад

Es como la 4ta vez que lo veo y uno sigue aprendiendo mas conceptos....Muy buen video.

@carpicoder Год назад

Parte 2, versión responsive: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-jU2RExwQMa4.html Parte 3, agregué Fetch y Librerías: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--TQ1_D-WIgE.html

@massilo100 Год назад

Excelente clase, un video super claro que toca múltiples temas explicados de manera super clara. Gracias Carpi!!!

@carpicoder Год назад

Gracias Maxi por el comentario! ❤🙌☺

@santiagocenteno2105 Год назад

Gracias de verdad por este contenido de calidad, entretenido e interesante. Agradezco que explicaras con calma y claridad. enseñas muy bien, nuevo subscriptor y espero sigas subiendo estos tipos de vídeos, un abrazo.

@carpicoder Год назад

Muchas gracias Santi! Pronto se viene otro e-commerce un poco más completo 😎

@victorhugok9700 10 месяцев назад

Muhcas gracias con tus ejemplos logre avances en mis tareas personales.

@RodrigoOsO87 7 дней назад

Muy buen material, se agradece!

@miusicpro-musicaparacreado9513 10 месяцев назад

te doy un like, seria genial poder ver algo así pero con una DB sea sqlserver o mysql, y su respectivo backend por supuesto, así poder alimentarme de mucho conocimiento.

@normanejm Год назад

Está genial el vídeo. Aunque se podría usar "fragment" en js. En vez de agregar cada iteración directamente al DOM. Sirve para hacer menos solicitud al cliente. Aunque trabajo también con React sé que con js se pueden hacer éstás maravillas... Gracias. Y me motivó a seguir amando vanilla js

@natalischwartz1942 Год назад

vine buscando cobre y encontré oro!! Excelente forma de explicar de manera sencilla y didactica!! Gracias por tu enseñanza. pd: si me hubiese tocado un profe como vos en coder, no hubiese abandonado el curso de js. Saludos!

@carpicoder Год назад

Muchas gracias Natali, me alegra mucho que te sirvan los videitos 💖✨👌🏼

@86shidalgo 19 дней назад

Que bueno, hasta que por fin alguien muestra un video que dura 2 horas y funciona... son las 2 horas y 21 minutos de pura carnita... sigue así loco... Saludos desde Costa Rica

@carpicoder 18 дней назад

Muchas gracias amigo! Un abrazo!

@jaregarc 6 месяцев назад

Excelente contenido, saludes y gracias por compartir contenido de calidad.

@kevinrojo2864 Год назад

Muchas gracias carpi!! En el curso de coder de JS me trabe mucho,no entendía muchas cosas y con tu curso pude aprender un montón!! Mil gracias por eso! Y seguro te siga después con el de react js. Saludos desde Quilmes!! 👋👋

@carpicoder Год назад

Gracias Kevin por el comentario! Me alegra mucho que les sirvan mis videítos, vamo arriba! 🙌

@FeedeeMarcattini Год назад

Excelente carpi! Muy bueno! Muchas gracias!

@carpicoder Год назад

Gracias Fede! 🙌🏼💖💕

@ldsgrowshop Год назад

Excelente video Carpi! Lo vi todo y valió la pena, muchas gracias!

@carpicoder Год назад

🥰😃 Muchas gracias!

@webdisaign 8 месяцев назад

Hola bro, la verdad te felicito por el video esta genial!!!, te quería consultar ya que realice algunos cursos de programación y estoy recién empezando, es conveniente los productos realizarlos en un array o mejor es hacerlo en una base de datos?

@JuanFernandez-lg2pd 9 месяцев назад

Muy buen contenido... Messirveeee Saludos

@josegabrielimbert3367 Год назад

Muy buen trabajo saludos desde RD, esto me ha ayudado bastante

@pipetaborda3374 Год назад

Muchas gracias Carpi🖤!!! wao muy bueno tu video!!!, Excelente y expontanea forma de transferir y trascender tu conocimiento, muy elocuente y empático toda tu explicación. Gracias de verdad.

@carpicoder Год назад

Muchas gracias por el comentario Pipe! 💖👌🏼✨

@MathiasGimenez-tp8vu 3 месяца назад

gracias por toda la info que dejas!!

@user-jy6mz5mo6z 6 месяцев назад

excelente video!! lo estudie muy bien y estoy trabajando en una aplicacion ecommerce para subir a mi portafolio, quiero agregar a cada producto un boton "+" para aumentar la cantidad de unidades de un mismo producto y lo mismo "-" para restar unidades antes de hacer la compra, porque el boton eliminar producto te elimina completo el obj y no unidades....lo voy a practicar a eso a ver si sale o rompo todo jaja . muchas gracias!!

@danielaherrera2191 Год назад

Genio carpi, nos salvas las papas a todos!!!!

@GuidoRodriguezMontiel Год назад

MAESTRO! ESTO ES ORO! No sabes la joya que nos acabas de regalar! Seguí asi!

@carpicoder Год назад

Muchas gracias Guido por tu comentario! 🙌❤🤩

@romar9695 Год назад

Excelente video Carpi Coder, soy nuevo y desconocía lo del DOM con JS, es genial. Me llevó una semana replicar lo que vos hiciste en dos horas aun tengo que ver la parte 2 y 3. Tengo un par de consultas pero antes quiero ver los videos para no preguntar en vano. Mil gracias por tomarte el tiempo de compartir tu conocimiento.

@carpicoder Год назад

Muchas gracias por el comentario! Me alegra mucho que haya servido! 👌🏼💖✨💪🏼

@degog Год назад

Gracias por tanto! Me facilitaste la vida en html y css y ahora en js también 🙏

@carpicoder Год назад

🙌❤✨🦔

@TuteDiazz 7 месяцев назад

sos la verdadera locura hemano

@leonardogarciabarreras6663 4 месяца назад

Gracias, el tutorial estuvo genial. Todo muy bien explicado, lo único que faltó fue la parte de las notificaciones que sale en la página al agregar un producto al carro, supongo que fue que se te olvidó.

@josedavidricaldeberrocal8860 Год назад

gracias Carpi esta excelente me ayudo mucho

@gooonza013 6 месяцев назад

Muy buen video!!!! segui asi !

@andreaberardi120 Год назад

Gracias, gracias, mil gracias Mati, un video con calidad de contenido, super bien explicado paso a paso. ;)

@carpicoder Год назад

Muchas gracias Andrea por el comentario! 👌❤

@hectorsena2110 Год назад

exelente video! 🤩 de los mejores tutoriales que vi!!!!

@carpicoder Год назад

Muchas gracias Héctor! Me alegra mucho que te haya servido! 🙌🏼❤️

@mauricionolting 3 месяца назад

Clave el momento 02:06:08, buen trabalenguas jajaja gracias genio! excelente video, aprendí muchísimo, la tenes super clara

@pedromila4890 10 месяцев назад

Que locura de video. Muy bueno Carpi

@carpicoder 10 месяцев назад

Gracias Pedro querido! 💪❤

@lucaslovera8594 Год назад

Que mejor que un videito de Carpi para este domingo gris.

@carpicoder Год назад

🥺💖 Gracias Lucas! 🙌🏼

@ArtePanadero Год назад

Carpi, una pregunta bro. Cómo le hago para poder agregarle todo el funcionamiento para añadir más productos y se vaya guardando de manera local. Puedes ayudarme con eso por favor?

@jorgeraele4968 Год назад

Genial, de mucha ayuda!.

@juanmartingrimaldi6714 Год назад

Agradezco mucho el trabajo que hiciste, me aclaraste mil dudas!

@carpicoder Год назад

Me alegra ayudarles Juan, gracias por el comentario! ❤

@Deus-lo-Vuilt Год назад

Ya voy por más de la mitad , me he divertido bastante haciendolo , gracias nuevamente bro!

@carpicoder Год назад

Gracias a vos por el comentario! Cuando llegues al final te vas a reír de mi trabada de cerebro cósmica 🤣

@jhonquiroz7500 9 месяцев назад

Heeeey Carpi parcero, muchas gracias de verdad que muy buena energía, tus videos y tu canal

@carpicoder 9 месяцев назад

🧡❤ Muchas gracias amigo!

@user-py6gn2jz5q 11 месяцев назад

nuevo sub, gracias con esto pasare el trimestre gracias

@eduardaguirre6887 4 месяца назад

Un besote en esas nalga amigo, muchas gracias por compartir tu sabiduría con las personas, eres grande. Saludo desde Colombia ❤🇨🇴

@daiapolo4604 Год назад

Excelente tu explicación, super tranquilo!

@carpicoder Год назад

Muchas gracias por tu comentario! ❤

@matiaslanfredi Год назад

Genio Carpi!!

@carpicoder Год назад

Matii 🙌🏼💖

@FMFT 9 месяцев назад

Muy bien explicado. Una sugerencia: Un sistema de gestión de una biblioteca de libros.

@mundodelfutbol6777 7 месяцев назад

Excelente video para practicar,,,

@thomas6661 Год назад

Carpi me gusta mucho como explicas y adoro que vayas haciendo console log para verificar el paso a paso. Muchas gracias :D

@carpicoder Год назад

Gracias Thomi por el comentario! ❤💪

@mohamedelcamellero3267 Год назад

un buen trabajo para los que nos hace falta mucha practica

@heedfraidmoran8847 Год назад

Bro una duda que extensiones que usas para visual estudio code, tengo un problemita, y es que cuando llego a las partes de las imagenes no me sale ni una sola, lo mismo cuando descargo el archivo si me podrias ayudar yo feliz

@SidneyAlanSantanaTeixeira Год назад

Hola Carpi, he intentado poner una validación en los botones de eliminar, comprar y vaciar carrito, pero no he podido, me gustaría que cuando click en vaciar, eliminar y comprar salga un alert que diga, estas seguro que desea hacer tal cosa? es posible o hay que cambiar todo el código? Gracias

@isacrack9936 11 месяцев назад

Muchisimas graciaaasss :3... Me costo pero me gusta como enseñas

@gabrielrincon6744 Год назад

exelente practica . gracias por todo . y wooow ya tienes 2mil suscriptores que rapido si hace poco tenias mil ajajjajaj excelente . Exitos

@carpicoder Год назад

💖🙌🏼 Muchas gracias Gabriel!

@Deus-lo-Vuilt Год назад

Grande bro , justo buscaba algo asi para poder practicar , estaré al tanto de tu canal , ojala sigas subiendo material

@carpicoder Год назад

Gracias! Seguiré subiendo contenido 🙌🏼💖

@Deus-lo-Vuilt Год назад

@@carpicoder excelente!

@ignaciogomez4009 Год назад

sos un capo, me solucionaste una banda de problemas en mi proyecto, muchas gracias

@carpicoder Год назад

Gracias Ignacio por el comentario! 💪❤

@eros20057 29 дней назад

muchas gracias

@miguelrodriguez2094 2 месяца назад

una duda respecto al innerHTML, he visto que es mejor usar el fragment, ya que evita el reflow, si embargo para cosas mas pequeñas el inner viene bien, entonces ¿aconsejarías usar mejor el fragment con etiquetas templates en HTML necesarios o seguir usar el innerHTML?

@ezesoyo123 10 месяцев назад

Muy bueno el canal!! me suscribo. Necesitamos aprender a enviar y recibir data directo de API's no encuentro mucho en youtube en español!!

@fernandoaguilar2309 5 месяцев назад

Muy buen video y explicación, estoy aprovechando de complementar un curso que hago actualmente y me suma muchisimo! consulta de novato: Por qué se pone id si podemos usar el class para manipular las cosas desde javascript?

@tomi5575 Год назад

sos un genio amigo muchas graciaas

@marzosinti332hsg3 Год назад

2:14 amigo llegue a 2 horas y 14 minutos tenia varios errores en el carrito cargaba todo podía eliminar, agregar, pero la logica es diferente hermano, ahora veo que debo aprender java script y no copiar y pegar. llegue del html css pero java script ando empezando. muy bueno tu video, y gracias por el codigo. voy a cambiar las imagenes y secciones. :D :D

@profeta8630 8 месяцев назад

bro, para el titulo de cada categoria era mas facil poner luego de cerrar el ELSE cargarProductos, poner que el innerText del titulo principal sea igual al innerText del currentTarget. yo lo hice asi, ocupe solo una linea corta y funciono sin ningun problema. por cierto, excelente video

@leosalomon Год назад

Hola como estas, el video esta bien explicado pero te sigo con lo sig he hecho todo el contendo html ccs y estoy sigiendo en java en esta parte el contenido no me aparece, hay forma de que veas mi codigo para que me puedas corregir? que forma de contactarme podria ser? Gracias

@leosalomon Год назад

hola como estas, estaba viendo tu video y descarge el repositorio cuando quise abrirlo el contenido no sale no pude verlo como tengo que ahcer????

@carloscarrillo4375 9 месяцев назад

seria geniar que enseñes un metodo de busqueda para buscar los productos.

@construya4884 Год назад

un saludo desde colombia , muchas gracias!!!

@carpicoder Год назад

Muchas gracias amigo por el comentario! 🚀🔥

@juanfelipesanchezg.2618 3 месяца назад

pregunta, como me dirijo con el boton de agregar producto a otro html, sin afectar los otros productos y no llevarlo la carrito sino al html nuevo?

@erikroldan4309 7 месяцев назад

Hola! Como se podria hacer para usar una base de datos para los productos?

@angelogame8728 7 месяцев назад

Una pregunta en la parte de centrar la imagen. Wrapper. No se me centra la imagen como puedo hacer para que se centre

@ferbarron3129 Год назад

Ya no se como agradecerte jajaj. Nos vemos en los videos de React!!👋👋👋

@valeriajuarez6019 11 месяцев назад

Hola una duda a mi no se me separa como ai en el minuto 50:54 me podrias ayudar por favor

@giovannimantilla6423 9 месяцев назад

Hola, que buen video, pregunta no se por que al subir todo no me carga los articulos queda en blanco muchas gracias

@fabiansilva1094 Год назад

hola capi, necesito ayuda, cuando voy en proceso de realiazar las filtraciones, no me filtra, me trae todos los productos de nuevo, ingreso el codigo tal cual esta en el video, pero no me filtra. por favor, necesito ayuda

@franmarmo2548 6 месяцев назад

impecable

@rompehuesos223 2 месяца назад

una pregunta, si quiero implementar una pasarela de pago, como lo hago? Me ha gustado mucho tu video y la verdad es que la página que has hecho esta muy bien planteada y sirve muy bien como ejemplo. Un saludo. Deberías de hacer un tutorial sobre pasarelas de pago

@mayuku5832 Год назад

Hola buenas tardes gracias me encanto su pagina pero la quiero utilizar para otro proyecto pero no me cambia las imagenes ni el nombre a que se debe

@martinborello2480 3 месяца назад

HOLA CARPI!TE HAGO UNA PREGUNTA VOS SABES QUE EN LA PARTE DONDE SE PONEN LAS IMAGENES DE LOS ABRIGOS Y DEMAS NO ME APARECE Y LA RUTA DE UBICACION ESTA CORRECTA.GRACIAS!

@florenciavita8070 Год назад

hola, cuando uso "splice" me dice que la propiedad puede no existir en el tipo cadena. A alguno le pasó lo mismo??

@francollovera306 9 месяцев назад

sos un genio!!!

@ItsKevin_13 19 дней назад

perdona, alli se le aplica una base de datos?

@javieralejandromonteslozad6970 Год назад

bro una duda quiero hacer algo parecido pero con una seccion que sea de cambio de videojuegos y y en lo que entre al link de cambio( como los que tines de todos , camisas y abrigos) que diga cambio y al entrar ahi te pida que selecciones que tipo de consola tienes (ps4,xbox,nintendo) luego de que seleccionaste te pida que ingreses el ano del lanzamieno de tu juego que desees cambiar y le mustre solo los compatibles con el mismo ano y los agrege al carrito .. ya hice el codigo pero no encuentro como imlementarlo me ayudarias?

@brayananthonycastillopalom8456 9 месяцев назад

una pregunta mi estimado, como colocar los precios que en ves de ser en dolares, sean en soles? en ves de ($). sea (s/)

@kevingamboallave3288 10 месяцев назад

Una duda no me aparece en el carrito los productos que agrego

@juan12345657 10 месяцев назад

Hola mira yo lo estoy haciendo pero sin el carrito la verdad solo necesito mostrar los productos sabes como puedo hacer que al darle click al agregar en vez de agregar al carrito se abra una pestana de detalles no se si me de a entender