Diseñando un sidebar menu con HTML, CSS (Bootstrap 4 Dashboard) Parte 1
Вставка
- Опубліковано 9 лют 2025
- Sidebar menu con Bootstrap 4 en español para principiantes.
En este tutorial aprenderás a crear un sidebar menu con HTML, CSS, JQuery (Bootstrap 4) y un Dashbooard atractivo.
Descargar archivos: gum.co/EOlLx
Si quieres aprender a diseñar como un PRO, te recomiendo mi curso en Udemy donde aprenderás bases solidas de Figma.
www.udemy.com/...
Chartjs:
www.chartjs.org/
Chartjs documentación
www.chartjs.or...
Si te interesa apoyarme puedes comprar mi curso de "Diseño Web" en Udemy www.udemy.com/...
Tutorial Dashboard creado con React:
• Como crear un Sidebar ...
Hola me llamo Diego Velázquez Rabasa, si te gusto el video sígueme en mis redes sociales.
MeniuApp: meniuapp.com/
Twitter: / diegovr77
Instagram: / diegovr7
Dribbble: dribbble.com/d...
Behance: www.behance.ne...
LinkedIn: / diego-velazquez-rabasa
Twitter: / diegovr77
Tutoriales recomendados:
Las mejores páginas web: • Las mejores páginas we...
Bootstrap 5 - • Bootstrap 5 tutorial e...
Si quieres aprender a diseñar como un PRO, te recomiendo mi curso en Udemy donde aprenderás bases solidas de Figma. www.udemy.com/course/diseno-web-ux-ui-profesional-curso-completo/?referralCode=6ABC5462AE493D33A52E
Crea tu página web gratis, sin saber html, css o javascript: www.framer.com?via=templune
Tutorial Dashboard creado con React: ua-cam.com/video/l0F09p_7L7k/v-deo.html
Las mejores páginas web: ua-cam.com/video/pXD5OainmTY/v-deo.html
sinceramente lo mejor de youtube ,gracias maestro ,aprendi mucho de html ,css y bootstrap gracias a ti .el mejor!!!!
Muchas gracias por tu comentarios Carlos, me alegra que te haya servido :D
Muchisimas gracias, con tu video pude realizar algo que me tenia bastante estancado en un proyecto.
Man, tu canal es GENIAL!
Hola Jose, gracias por tu comentario :D
Gracias a tus videos he logrado dominar un poco más HTML, al igual que estilos css junto con bootstrap!! Muchas gracias
Hola Isaac, me alegra que te hayan servido los videos. Sigue practicando y serás un experto :D
eres una master mas videos como estés y gracias por compartir este template, sigue subiendo mas videos así saludos amigo
gracias por compartir tus conocimientos, estoy aprendiendo sobre Bootstrap, éxitos en lo que emprendas
Aplausos hermano, excelente tutorial. Me ha sido de mucha utilidad. Saludos desde Panamá.
Excelente tutorial, muy didáctico y fácil de seguir
Muchas gracias por tu comentario Carlos, que bueno que te gusto :D
Tremendo amigo! Muy buen trabajo y buena explicacion
Hola Facundo, gracias por tu comentario. Que bueno que te haya servido :D
Saludos desde MX buen video !!
Dice bienvenido Diego, me sentí como en casa. :)
X2
X3
Pequeños cambios en bootstrap 5, pero nada que sea imposible viendo desde la documentación. 100% op para 2021!
Bro ,gracias por compartir el dashboard ,siempre es bueno utilizar estas plantillas para realizar proyectos académicos gracias por compartir tu conocimiento
Hola Sasha, que bueno que te haya servido :D
Excelente video, muy bien explicado men! gracias
Hola Humberto, muchas gracias por tu comentario :D
Que trabalho lindo! toda sorte do mundo
Muito obrigado Kézia.
hola gracias por tu video es de bastante ayuda para mi, bendiciones
Gracias por tu comentario, que bueno que te haya servido :D
Excelente video sigue así 😉👍🏽
Muchas gracias por tu comentario :D
Buen video, gracias por enseñar. Tienes un ruido muy molesto en el video como en los 0:30 a 0:40 mitutos se escucha y se repite en varias partes del video.
De nada Juan, si tienes razón. Ya en mis videos más recientes utilizo un microfono mejor
una consulta al adquirir el curso tambien explicara sobre css como lo explica en el video
Hola Abraham, si en el curso explico de figma, bootstrap y tailwind por el momento. Pero mi intención es incluir más temas, como por ejemplo React, webpack, firebase, etc
@@Templune gracias espero aprender con el curso ya lo acabo de adquirir
excelente
Quiero hacer ese menú en wordpres, que me recomiendas 👌
jajajajajajaja minuto 7:21 muy gracioso, esperas algo y al ver que no sale dices "y.... ahorita no se está viendo" pero excelente tut.
Gracias amigo
De nada, espero te sirva :D
excelente video felicitaciones :D
Gracias por tu comentario, que bueno que te gusto :D
muy buen, tutorial.
Muchas gracias por tu comentario :D
Ótimo vídeo parabéns 👏.
Muito obrigado :D
Para hacerlo con bootstrap 5?
obrigado pelo video, aprendi muita coisa
Obrigado pelo seu comentário Danilo
genial bro
Gracias a ti por tu comentario :D
genial
Muchas gracias por tu comentario Jesus :D
Soy nuevo en esto y tengo una pregunta... si no deseo hacer el archivo "style.css" como podría implementar todo directamente en el "Index.html"?
Hola Aldair, puedes poner tu css dentro de la etiqueta de en un
para hacer todo al principio me tarde 1 semana y el lo hizo en 20 min jaja
Todo es cuestión de práctica David, seguro que en unos meses serás un experto
Una consulta, cuando hago el :root y sobreescribo cuando lo ejecuta no funciona, cuando lo revise dice: invalid property value
alguien me ayuda, porfavor
Excelente me has ayudado mucho con tus vídeos. Disculpa, ¿como podría poner el sidebar al lado derecho de la página? Agradecería mucho tu respuesta. Exactamente he ocupado el mismo código de tu video, pero necesito alinear el sidebar al lado derecho. ¿Podrías ayudarme? por favor,
Hola Carlos, que bueno que te hayan servido. Unicamente tienes que poner el div que tiene el ID de "sidebar-container" después del div que tiene la clase "w-100" que engloba al contenido de la derecha.
amigo esta plantilla si queda responsive?
Excelente tutorial. Disculpa como podría agregar un footer
Muy bueno todo, gracias, lo único que pongo el text-decoration: none y me queda con la linea debajo de los links
Muchas gracias Jorge, revisa con el inspector de Google Chrome que estilo esta poniendo la linea abajo, para quitarla.
Hola puedes realizar un tutorial sobre Dashboard y CRUD con html y css?
en móviles el menú izquierdo no aparece?
excelente video! tengo una pregunta, dentro la Navegacion, cuando quiero acceder a otra pestaña (configuracion, o perfil), es necesario crear otros archivos con todo lo mismo? o hay alguna forma de acceder sin necesidad de hacer eso. Muchas gracias y espero tu respuesta :)
Hola, tienes que heredar el layout en el html
Hola me interesó mucho tu video y lo desarrolle a mi manera pero quisiera saber ¿cómo hacerlo funcionar? Puedes traer un video haciendo funcionar
Muy bueno, podrías hacer uno con un menú horizontal, también se ve muy bien, gracias por compartir.
Muchas gracias por el tutorial esta excelete, solo una duda, en google font ya no existe Muli, solo Mulish, será la misma? Saludos.
Tienes razón, al parecer la quitaron. Si, puedes utilizarla o esta también es similar fonts.google.com/specimen/Spartan
@@Templune muchas gracias por el apoyo! Saludos.
@@edmar065 De nada, suerte :D
Amigo excelente lo que realizas sin embargo al descargar el .ZIP extrae un archivo .fig
Vale gracias por avisarme, en la semana lo cambio por el correcto
Muy buen video, gracias por el aporte...Como sería para que cada opción del menú se vea en el frame donde esta el dashboard y no se pierda el menú, es decir que no se abra el link en una pestaña nueva del navegador.
Saludos desde Colombia, puedes hacer esto mismo con Angular por favor ?
hola yo estoy tratando de hacerlo en angular, tu pudiste hacerlo????? me cuesta un monton
@@nuditosmacrame8147 Si, si lo hice de otra forma pero si quedo excelente y con angular y boostrap
@@vianeyvargas7736 me puedes guiar con algún video. estoy atascada. de donde aprendiste angular.??
Hola, buen video pero el link para descargar esta caído.
Hola Mario, ya lo actualice. Es este gumroad.com/l/EOlLx
@@Templune gracias buen aporte, me suscribo
Excelente video, solo que mis oídos terminaron adoloridos
Gracias por tu comentario Mitchell, jajaja una disculpa.
genial pero en otra sin ese fondo negro... no se lee nada
Hola esta roto el enlace de la descarga teni otro porfavor?
Hola Julio, listo ya actualice el link de descarga gum.co/EOlLx también esta en la descripción del video.
mas de lo mismo todos colocan las imágenes en forma directa pero no es la forma nadie enseña hacer lo con un ingreso de usuario que la imagen se cambie sola porque la realidad es otra se lo podes vender a uno que no sabe nada pero la realidad es otra CUANDO ENSEÑEN PIENSEN BIEN PORQUE ESTOS VIDEOS ESTA LLENOS.
En pantallas pequeñas el sidebar desaparece completamente.
0:38 están sangrando...
no me sirvio al colocar los iconos porque le i vueltas y naa , espero estes vivo
¿Soy yo o ya quitaron Muli de google fonts?
Sí, tienes razón. Hay otra que se llama Mulish, creo que es parecida fonts.google.com/specimen/Mulish?query=muli
@@Templune Si, esa exactamente le puse. Gracias, quedo super.
@@yazzer1046 Perfecto :D
I don't understand the language what he saying.