Diseñando un sidebar menu con HTML, CSS (Bootstrap 4 Dashboard) Parte 1
HTML-код
- Опубликовано: 10 май 2020
- 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/course/diseno-w...
Chartjs:
www.chartjs.org/
Chartjs documentación
www.chartjs.org/docs/latest/
Si te interesa apoyarme puedes comprar mi curso de "Diseño Web" en Udemy www.udemy.com/course/diseno-w...
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/diegovr7
Behance: www.behance.net/diegovr7
LinkedIn: / diego-velazquez-rabasa
Twitter: / diegovr77
Tutoriales recomendados:
Las mejores páginas web: • Las mejores páginas we...
Bootstrap 5 - • Bootstrap 5 tutorial e...
Muchisimas gracias, con tu video pude realizar algo que me tenia bastante estancado en un proyecto.
Aplausos hermano, excelente tutorial. Me ha sido de mucha utilidad. Saludos desde Panamá.
gracias por compartir tus conocimientos, estoy aprendiendo sobre Bootstrap, éxitos en lo que emprendas
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
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: ruclips.net/video/l0F09p_7L7k/видео.html
Las mejores páginas web: ruclips.net/video/pXD5OainmTY/видео.html
eres una master mas videos como estés y gracias por compartir este template, sigue subiendo mas videos así saludos amigo
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
Pequeños cambios en bootstrap 5, pero nada que sea imposible viendo desde la documentación. 100% op para 2021!
Excelente tutorial, muy didáctico y fácil de seguir
Muchas gracias por tu comentario Carlos, que bueno que te gusto :D
Excelente video, muy bien explicado men! gracias
Hola Humberto, muchas gracias por tu comentario :D
Saludos desde MX buen video !!
Tremendo amigo! Muy buen trabajo y buena explicacion
Hola Facundo, gracias por tu comentario. Que bueno que te haya servido :D
Man, tu canal es GENIAL!
Hola Jose, gracias por tu comentario :D
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 sigue así 😉👍🏽
Muchas gracias por tu comentario :D
Ótimo vídeo parabéns 👏.
Muito obrigado :D
hola gracias por tu video es de bastante ayuda para mi, bendiciones
Gracias por tu comentario, que bueno que te haya servido :D
Que trabalho lindo! toda sorte do mundo
Muito obrigado Kézia.
excelente video felicitaciones :D
Gracias por tu comentario, que bueno que te gusto :D
Dice bienvenido Diego, me sentí como en casa. :)
X2
X3
Hola puedes realizar un tutorial sobre Dashboard y CRUD con html y css?
Gracias amigo
De nada, espero te sirva :D
muy buen, tutorial.
Muchas gracias por tu comentario :D
excelente
obrigado pelo video, aprendi muita coisa
Obrigado pelo seu comentário Danilo
amigo esta plantilla si queda responsive?
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
genial bro
Gracias a ti por tu comentario :D
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.
Excelente tutorial. Disculpa como podría agregar un footer
Una consulta, cuando hago el :root y sobreescribo cuando lo ejecuta no funciona, cuando lo revise dice: invalid property value
alguien me ayuda, porfavor
jajajajajajaja minuto 7:21 muy gracioso, esperas algo y al ver que no sale dices "y.... ahorita no se está viendo" pero excelente tut.
Muy bueno, podrías hacer uno con un menú horizontal, también se ve muy bien, gracias por compartir.
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
Quiero hacer ese menú en wordpres, que me recomiendas 👌
genial
Muchas gracias por tu comentario Jesus :D
Para hacerlo con bootstrap 5?
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
Como le hago para que la barra lateral el sidebar se quede fijo ?
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.
en móviles el menú izquierdo no aparece?
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.
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
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
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.
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
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.??
En pantallas pequeñas el sidebar desaparece completamente.
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
genial pero en otra sin ese fondo negro... no se lee nada
Excelente video, solo que mis oídos terminaron adoloridos
Gracias por tu comentario Mitchell, jajaja una disculpa.
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
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.
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
0:38 están sangrando...
I don't understand the language what he saying.