🔺Cómo hacer un ACORDEON en HTML, CSS Responsive y Javascript 🔥 *FÁCIL* Eduardo Fierro Pro

[@EduardoFierroPro]

🚨Vídeo sobre los MIxins Flex y Neo kzbin.info/www/bejne/nmTchGSIqq5-sJY 🚀¿Quieres aprender a hacer Sliders, Tabs, Acordeones..? kzbin.info/aero/PLJpymL0goBgFXN27jElLCmysKQboKW7uW 🔥 ¿Conoces estos comandos de VS Code? kzbin.info/www/bejne/gqO9po2Qat6Wgdk​ ✅¿Consejos para estudiar programación web? 👉 kzbin.info/www/bejne/a6XUqJRjpJVnlbM​ 😱 ¿Usas bien el Inspector de Elementos? kzbin.info/www/bejne/nJrMhoZodpJppJo​ *ENLACE A GITHUB* github.com/eduardofierropro/Acordeon-en-HTML-CSS-y-JS-para-KZbin ¡Dale a like y suscríbete! 😃

[@madao5722]

Muchas gracias bro Estuve atorado durante varios días con una actividad de Frontend Mentor, pero gracias este video puede salir de él Es muy agradable que te tomes el tiempo para explicar cada cosa que haces, para los novatos que apenas se están introduciendo en esto del mundo frontend, te lo agradecemos

[@EduardoFierroPro]

Muchas gracias a ti crack por el apoyo! Sigue dándole duro 😀

[@alejandrofernandez8365]

Eres un maquina 👌👌, gracias por lo que haces, me encantaría saber más sobre el neomorfismo de sass que has comentado, no había oído nada... Sigue así, paciencia con los suscriptores, buen contenido y de calidad 👏👏👏

[@EduardoFierroPro]

Muchas gracias Alex!! Pues se tendrá que venir vídeo de Mixins y explicando Neomorfismo 😊

[@EduardoLopez-mf2cf]

Lo entendi a la perfección! Gracias!

[@EduardoFierroPro]

Me alegro mucho Eduardo!!! 🎉😊

[@diegoocasiano]

Eres mi heroe! Estuve horas investigando sobre ese tipo de "animación" con js. Además, explicas con proyectos muy sencillos y no pierdes el tiempo con cosas que no van relacionado al tutorial. 1000/10

[@EduardoFierroPro]

Muchísimas gracias Diego por el comentario!! Muchas veces estas animaciones con JS básico son muy muy fáciles! Así que intenta aplicar este pensamiento a otros efectos en un futuro!! 😊

[@diegoocasiano]

@@EduardoFierroPro De hecho, eso hice hace unos días jajaja. Realicé otra animación teniendo la tuya como base!

[@ezequielmaggi]

Te has ganado un FAN de tu didáctica y manera de explicar!

[@EduardoFierroPro]

Muchísimas gracias Ezequiel!! 😊

[@ComoEmprenderconExito]

Excelente, Eduardo. Casualmente, estaba creando algo muy parecido, pero con mucho código. Lo del Neumorfismo fue el gran toque 💯. Mil gracias por tu tiempo y conocimientos. 🤜💥🤛👍

[@EduardoFierroPro]

Muchas gracias Antonio!!! 😊

[@robertobenedit]

Me enamore de este diseño!

[@EduardoFierroPro]

Pues a usarlo a fuego!! Te dejo un enlace donde hablo sobre esa herramienta con SASS 👉 kzbin.info/www/bejne/fXXHe2WwmraUjLM

[@davidchoque5752]

execelente video bien explicado muchas gracais por dedicar tu tiempo para eneseñar

[@EduardoFierroPro]

Muchas gracias a ti David por el apoyo! 😊

[@bardsantiago3721]

Excelente explicación, me ayudo mucho; con tu ayuda resolví esto que no me salía. Lo hiciste ver muy sencillo, lo entendí a la primera. :D

[@EduardoFierroPro]

Muchas gracias Bard!! 😊

[@astiano25]

Gran vídeo, aún no llego a todo pero todo se andará! Muchas gracias!

[@EduardoFierroPro]

Muchas gracias Sebastian! Dale duro que llegarás 😊

[@newentu]

Excelente tutorial macho guapo!

[@EduardoFierroPro]

Muchas gracias Newentu! 😊

[@sonsolesapariciolopez4284]

Gracias de nuevo Eduardo. Eres un crack.

[@EduardoFierroPro]

Muchas gracias Sonsoles!! 😊

[@mauriciobelmonteroman4913]

Waow, excelente explicacion asi no quedo dudas sobre que hace cada cosa, me suscribo! sigue asi

[@EduardoFierroPro]

Muchas gracias Mauricio!! 😊

[@nicodiez6029]

Muy buena explicacion, gracias facha

[@EduardoFierroPro]

Muchas gracias cruck!! 😊

[@Deus-lo-Vuilt]

acabo de llegar a tu canal , me parece interesante tu contenido . no se si tienes algun curso o etc , de casualidad habrá más material como este? asi contruyendo componentes y demás? un saludo

[@EduardoFierroPro]

Gracias por tu comentario Deus!! La verdad es que no tengo ningún curso por Udemy o cosas así enfocado a componentes 😅

[@angelgarcia6911]

Muchas gracias por el contenido. Estaba practicando este mismo componente y quería saber si como lo hice era la mejor forma jajaja y pues sí. Por cierto, para cuando un tutorial de como codear así de rápido como tu (Atajos de teclado, selección múltiple, etc) estaría interesante.

[@EduardoFierroPro]

Muchas gracias por el comentario Angel!! 😊 Puedes te diría que alguno tengo 😏 ✔️ Comandos en Mac kzbin.info/www/bejne/q5elo2dtaq-lf6c ✔️ Comandos en Windows kzbin.info/www/bejne/qaCVpndphdSGp6M ✔️ Comandos aplicados a HTML y CSS kzbin.info/www/bejne/Z5-WpqWubJaehJY ✔️ Programa más rápido con Prepros kzbin.info/www/bejne/qnLVpX-PodZsrdU ✔️ Otros comandos para programar más rápido kzbin.info/www/bejne/gqO9po2Qat6Wgdk ✔️ Consejos para programar más rápido kzbin.info/www/bejne/qmiWaGRui7KGmck ¡¡Ahí van!!😊

[@marcoantoniovalencia8694]

@@EduardoFierroPro no que el box-model como el padding se manejan en REM y recién el font-size en EM ???

[@jocsereduardonunezmora1920]

Hola saludos desde Costa Rica... una pregunta... has hecho algun video de javascript... es que explicas bien el material... pero si serviría si haces un video de javascript más completo ... o si ya lo tienes cual seria... gracias por tu respuesta... buen día...

[@EduardoFierroPro]

Buenas Jocser! Ahora en Diciembre y en Enero comienzo a subir contenido de Javascript 😊

[@geografiaeducativa2727]

Saludos, estoy practicando cambiando la posición de vertical a horizontal, tengo una duda, dentro del css el cambio se aplica a body o a .acordeon

[@enriquegarcia6404]

Muy buen video!! Por aquí tienes a un nuevo sub. He probado a hacer el acordeón y todo perfecto salvo porque en Chrome y derivados, la animación de cerrar y abrir el bloque va con muchísimo lag... Sin embargo en Firefox no pasa. Y por cierto, yo también estoy esperando un video de SASS para que enseñes lo del neumorphism jaja

[@EduardoFierroPro]

Jajaja es un vídeo que se viene pronto 😊

[@Pao_Aristiguieta]

Hola buenas, muy bueno tu video. Sí quiera hacer el acordeon horizontal cómo haría? Es decir si quiero hacer un menú y que los submenu estén en acordeon

[@fatirga]

Hola muy bueno el video y gracias. Me surgio una duda, el forEach no se usa para una array?

[@EduardoFierroPro]

Correcto aunque también para recorrer Lista de Nodos 😊 Aquí te dejo la documentación oficial 👉 developer.mozilla.org/es/docs/Web/API/NodeList/forEach

[@JustoAlonso]

Hola Eduardo!... gracias por tu video. me gustaría saber si se puede incluir un acordeón en una plantilla de email de Gmail por ejemplo. Mi idea es esconder los textos legales interminables a pié de la plantilla de email y que aparezca si pulsas en el acordeón. Muchas gracias!

[@alejandroecheverria9161]

Excelente video, lo haces ver sencillo. ¿Como modificas multiples líneas de código sumultáneamente en vs code?, por ejemplo al cambiar los párrafos por imágenes

[@EduardoFierroPro]

Muchas gracias crack!! Pues tengo un vídeo hablando sobre los comandos! kzbin.info/www/bejne/gqO9po2Qat6Wgdk

[@EduardoFierroPro]

Por sacaos sirve, tengo 2 vídeos nuevos hablando sobre comandos en Mac y en Windows más organizados 😊 👉 kzbin.info/www/bejne/boC8mpl5ZbRrbbM

[@johanmunoz8525]

ya pero cuando el contenido no tiene la misma altura esa clase causa problemas o al menos yo no pillo el concepto a un así la explicación que das en el video esta muy bien lograda

[@EduardoFierroPro]

Correcto, ahí debemos de usar Javascript para calcular el ancho de cada elemento antes de esconderlo y el código sería diferente. Gracias por el comentario Johan 😊

[@naderahmad4248]

Excelente video Edu. Como harias si quisieras que al volver a dar clic en un titulo que ya esta expandido se vuelva a ocultar? Aun no domino JS.

[@EduardoFierroPro]

Buenas Nader! Pues eso vendrá en una parte 2 😊

[@staffel0232]

Hola Eduardo, tengo una duda, cuando menciona que el código de JS se puede hacer más eficiente sería con propagación de eventos?. Muchas gracias por el tuto, estoy aprendiendo mucho gracias a tus videos!.

[@JesusSanchez-fb5dq]

El video esta de lujo, Tengo una duda, ¿Si solo quiero usar solo un bloque, como le quito la clase activo?

[@geovanny2633]

Saludos, y como se haría aplicando la DELEGACION DE EVENTOS

[@germanmoralesramirez5634]

Buenas tardes Eduardo, nuevo suscriptor por el canal. Te quería preguntar si conoces de algún curso para alguien que esta empezando y quiere dedicarse a Front-end? PD: ya tengo conocimientos basicos de HTML y CCS

[@EduardoFierroPro]

Depende de si buscas una formación gratuita o de pago. Hoy justo subiré un vídeo sobre las formas de estudiar programación. Si buscas algún curso de Udemy, mira los videos de ventajas y desventajas de los cursos de Udemy y después compara. Si buscas escuelas de programación, busca la que se adapte a tu presupuesto y te dé mejor feeling 😊

[@ronyfrankcolosalarcon2925]

video del mixin con el neumorphism.

[@EduardoFierroPro]

Pues tocará grabarlo explicando SASS 👌🏼

[@astiano25]

Se dice por favor, compañero.

[@EduardoFierroPro]

Por cierto el vídeo del Neormorfismo estará disponible en esta lista la próxima semana 👉kzbin.info/www/bejne/m6CkqImNmraZbLc

[@tobiasurielvidelaguliotti8289]

Me sirvió muchísimo, pero cómo puedo hacer la altura adaptable o variable? es decir, si los contenidos tienen alturas diferentes, y quiero que cuando se abra la altura de cada contenido sea la correcta para cada contenido. No sé si me expliqué bien

[@tobiasurielvidelaguliotti8289]

description.scrollHeight serviría?

[@juanarias2831]

mi hermano gracias por tu ayuda, como seria si tengo un formulario que le quiero colocar el acordeon y hasta que no me respondan la primera pregunta no dejar seguir a la segunda pregunta, muchas Gracias

[@Dynrra]

Saludos y buenas en js como sierro el acordeon al hacer click fuera del botton

[@MiguelAngel-mf3yu]

De locos , puedo hacerlo sin aún no se mucho de javascript?

[@EduardoFierroPro]

En principio podrías, explico todo el JS en el propio vídeo 😊

[@martintorreiro]

holaa muy bien explicado, pero tengo una duda, si el contenido del p no fuese siempre el mismo y cambiase su tamaño, habria alguna manera de hacer la animacion en la que el tamaño del p fuese automatico?

[@walterustaris4934]

Creo q para eso te pueden servir las etiquetas y de html5... 👍

[@cerm88]

Lo que pasa es que este código funciona solamente con una altura definida! Que pasaría si lo queremos hacer con un height: auto, que se adapte de acuerdo al contenido de cada items en el acordeon??

[@lucianorepetti48]

Pudiste solucionarlo? porfa decime que si porque necesito para mañana eso

[@santiagogutierrez4061]

estaba matándome la cabeza pensando en porque no me funcionaba el código, hasta que caí en cuenta de que no supe el "defer" en el enlace

[@EduardoFierroPro]

El defer es esencial 🔝🔝

[@fabianbelt]

Como hago para que el primer bloque también inicie cerrado?

[@EduardoFierroPro]

Simplemente quita la clase de HTML 👍

[@yemmacastelli7032]

Me gusta la forma dinámica de explicar, pero no me funcionó, aún siguiendo todos los pasos.

[@EduardoFierroPro]

Puedes probar a descargar el código en Github que funciona sin problemas para corregir el tuyo 😊 Prueba también a usar el inspector de elementos 👉 kzbin.info/www/bejne/nJrMhoZodpJppJo