Cómo crear una navbar responsive con HTML y CSS Flexbox
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- En este video aprenderás cómo crear una navbar (barra de navegación) responsive y con un diseño atractivo utilizando HTML y CSS Flexbox. Te enseñaré paso a paso cómo estructurar y estilizar tu navbar, así como también cómo hacerla responsive • Crear una navbar respo... para que se adapte a diferentes tamaños de pantalla. ¡No te lo pierdas! #flexbox #navbar #css #html #navigationbar
Conviértete en miembro del canal recibe beneficios y apoya la creación de nuevo contenido:
/ @juandavid_dev
2da parte: • Crear una navbar respo...
Complementos del video:
Aprende Flexbox y posicionamiento de elementos en pantalla:
• Aprende CSS flexbox de...
Link de Descarga del Proyecto
github.com/jdo...
Redes Sociales:
/ juandavid_dev
/ juandavid_dev
/ jdoc.dev.page
justify-conten...
![ฮักเทื่อสุดท้าย - บอย ศิริชัย [OFFICIAL MV]](http://i.ytimg.com/vi/-1PoPoQ-B-k/mqdefault.jpg)
amigo es un excelente tutorial, veo el video y luego intento hacerlo por mi cuenta mientras recuerdo para que sirve cada una de las etiquetas que usaste a la par que comprendo sus funciones y me toma mucho tiempo hacerlo sin ver el video pero estoy aprendiendo mucho, muchas gracias.
si asi es que se aprende primero miras los comandos memorizas y los pones en practica sin que veas el video depronto un poco de ayuda pero no mas y asi se memoriza los comandos yo ando aprendiendo html y hago esa tecnica y me a funcionado
Había aprendido HTML y CSS pero no sabia como aplicarlo, tu vídeo me ayudo demasiado a entender mejor los conceptos. Muchas gracias
Hola, me alegra mucho que los videos sean de utilidad, un saludo.
Gran video!!
Deberias de hacer uno explicando como funciona flexbox, me cuesta aprender esa herramienta:(
Hola, ¿qué tal? Dale una miradita a este post que escribí podría ayudarte. justify-content.blogspot.com/2022/03/guia-basica-de-css-flexbox.html
vi que tiene un curso de js lo voy a ver amigo no dejes de subir videoos tienes mi apoyo :D
Muchas gracias, me ayudo la rápida explciación. 🤝
Estuvo bueno el video. Afortunadamente me salió igual, el problema es que hay cuestiones que no explicas para qué se las usa. Por ejemplo los display, solamente lo pones. Entonces termino copiandote, pero sin entender. De todas formas, buen video
Hola que tal? Si a veces trato de ser un poco más explícito, pero eso hace que los vídeos sean demasiado largos, igualmente aprecio tu comentario y lo tendré encuenta para futuros videos, saludos.
@@juandavid_dev gracias juan. Abrazo!!💪🏻
Ay por dios, gracias! Venia batallando y no sabes como me ayudo el video. Gracias!🙏
Hola que tal? Me alegra mucho que los vídeos sean de tu agrado y te ayuden en tu proceso, muchos éxitos!
me salvo la tarde de tarea, gracias mil, me gusto la demostracion y el tono del video, gracias de nuevo
Genial!
buenisimo tu proyecto, estaba necesitando como hacer responsive mi navbar :)
Me alegra que sea de utilidad, saludos.
uf parcero, llevo viendo 15 segundos del video y ya me pareció excelente, gracias por el contenido, me ayudó mucho.
Gracias por el comentario, te invito a darle una miradita al canal puede que encuentres material de tu agrado, saludos.
Sos un genio 😭
buenisimo el video, idolo !!
Gracias!
Muchisimas gracias mi hermano, buenisima explicacion!!!
Excelente . Muchas gracias por el aporte
muy chevere, muchas gracias
Hola, buenas colega eres buebo explicando sigue haciendo mas contenido, me gusto tu manera de explicar!
Hola que tal? Gracias por tu apoyo, actualmente tengo poco tiempo, pero cada vez que tengo una oportunidad trato de hacer un videito para compartirlo con todos ustedes.
Muy buena explicación, gracias por compartir!
me ayudo mucho para mi pagina gracias
gran video, me ayudo bastante.
Que bueno que te allá sido de ayuda, dale una miradita al canal, en los últimos videos hicimos un header y un footer, próximamente otras partes de un sitio. Saludos.
bro tu trabajo es excelente :DDD
Gracias por el apoyo, si necesitas hacerla resposive en la descripción o videos del canal encontrarás uno adicional, saludos.
Un crack, enseñas a hacer el navbar y usando buenas prácticas hay otros videos donde solo los hacen y ya
Hola! Me alegra que el material te sea de ayuda, saludos.
Brutal video! Te ganaste un sub! Saludos!
Gracias! Un saludo :)
Muchas gracia por la ayuda parcero
Excelente hermano.
gracias por el tutorial!
Buen video bro, explicas muy bien
buen video, me gusta y de una suscrito
Excelente 👏🏻👏🏻👏🏻
excelente video :)
Me alegra que te sea útil, saludos.
thanks bro ,nice video
Gracias!
👏👏 🔔👈
gracias!
Hola Juan!
¡¡Felicitaciones por el excelente trabajo!!
Una consulta:
.header{
padding 5px 10%; (porfa que significa ese 10%)
Muchas gracias de antemano!
Hola que tal? Con esa partecita de código le estarías diciendo que tenga un margen interno de 5px arriba y abajo, y del 10% del hancho de la pantalla a cada lado. Saludos.
excelente videoo!!!
Gracias!! 🤗
Hola Juan David, buen video, pero quisiera saber por que sería "navbar" responsive? ya que cuando lo minimizo la ventana, no se ve bien, esta como desarmado. Gracias
Hola que tal? Ese vídeo consta de dos partes th-cam.com/video/NfVLin2MZBI/w-d-xo.html saludos.
Yo tengo una gran duda, seria posible agregarle un label? Para hacer un tipo buscador tipo pinterest, youtube, Facebook, etc?
¡Hola! Claro que es posible, tendrías que crear un input de tipo search y ubicarlo en tu lugar de preferencia, podrías usar flexbox, en caso de que tengas alguna duda te invito a ver este video de posicionamiento de elementos th-cam.com/video/Wx8TpECmYHk/w-d-xo.html y luego usa este código para crear tu componente:
Buscar
Te dejo el reto de implementarlo y agregar los estilos para que este acorde a tu diseño. Saludos.
Un crack
hola! muy bueno el tutorial, tengo una pregunto con respecto a la imagen del logo. Cuales son los tamaños recomendados para trabajar. Gracias!
Hola que tal? Lo más importante sería la legibilidad del logo, sin embargo tu navbar no debe ser demasiado alta, saludos 🖐.
Buen video Juan David. Te tengo pregunto algo y es porque no alineaste los elementos con justify-content en vez usar margin-left, es posible hacer esto?
¡Hola!, en este video estamos usando flexbox y dentro de nuestro elemento padre tenemos 3 elementos hijo los cuales queremos que se distribuyan a lo largo de nuestro contenedor, por eso usamos justify-content. Mientras que el margin-left en este caso agregaría un margen a la izquierda década elemento y no se distribuirían con exactitud a lo largo del contenedor, espero esto resuelva tu duda. ¡Un Saludo!
hola a mi no me funcionó el Flex en el header no se alinean los elementos tenés una idea de xq será?
Hola que tal? Es importante que revises las clases que aplicas en el HTML y los llamados desde el css, además de verificar su correcta escritura, también recuerda que para que funcione debes convertir cada contenedor en un elemento flexible con la propiedad display Flex y luego ubicarlos en la pantalla con el la propiedad align y justify, saludos.
Muchas gracias amigo por el video. Me gustaría preguntar luego saber si me puedes ayudar a darle estilos a una img con baner que estas tengan holas en la parte del top y botton.
Hola, ¿qué tal? Te comparto este código que subí en GitHub con 2 opciones github.com/jdocdev/bannerconolas, puedes jugar con los estilos y llegar a lo que buscas, use estas 2 herramientas para la generación de las olas (opción 1 www.softr.io/tools/svg-wave-generator) (opción 2 smooth.ie/blogs/news/svg-wavey-transitions-between-sections). Espero sea de tu ayuda, saludos.
buenisimo!!!!
UNA PREGUNTA...
como podemos hacer para que sea responsive?
Hola qué tal? Dale una miradita a este video th-cam.com/video/NfVLin2MZBI/w-d-xo.html ahí la volvemos responsiva. Saludos.
Hola amigo, muchas gracias, una pregunta se puede hacer responsive esta nav?
Hola que tal! Si! En este video lo convertimos en responsive th-cam.com/video/NfVLin2MZBI/w-d-xo.html.
@@juandavid_dev De 10 amigo! , Muchas gracias
Hola Leo, te respondo como amigo, cualquier página web puede hacerse responsive, ya sea su nav, su main, o su footer, cualquier cosa se puede hacer responsive si sabes como hacerlo.
Lo mejor es hacer un curso rápido de youtube de como hacerlo, creo que hay unos de una hora, una vez que los aprendes podes hacer responsive absolutamente TODO.
Espero te sirva la respuesta Leo, saludos compañero :)
Lo que me pasa es que pongo 20px y la imagen no quedan del tamaño que te queda a vos, queda mas grande. De todas maneras, utilice una imagen que busque en google como para no hacer exactamente lo mismo y practicar un poco más. Porque puede estar pasando esto? Gracias.
Si la imagen es .png osea de fondo transparente tal vez las margenes invisibles son demasiado grandes, y esto sería un problema propiamente de la o imagen y no de tu código. Lo importante es que pruebes diferentes imágenes y tamaños de px para que comprendas y domines el funcionamiento,
@@juandavid_dev excelente gracias!!
Y sabes más o menos los márgenes ideales para no tener problemas?
Claro, lo ideal es que tu logo o imagen no tenga márgenes y lo que tu arias es agregar un pading a la imagen en caso de que lo requiera.
@@juandavid_dev excelente, gracias idolo!
no entiendo porque no me funciona esta exactamente igual
Hola! Si quieres puedes darle una miradita a este código y así poder comparar github.com/jdocdev/NavbarsFlexbox
Videazo Juan, como siempre.
Tengo una duda en el minuto 14:40 el logo se fue para la izquierda solo con margin, cual es la explicación?
Hola qué tal? Es por qué le dices que se ubique automáticamente en su contenedor al lado derecho "margin-right: auto;", espero te aclere tu duda, un saludo.
@@juandavid_dev gracias Juan!
Saludos... excelente tutorial, gracias por eso... me estaba costando trabajo conseguir una explicacion como esta... tengo una duda. En el css del menu colocas font-size 700 y eso lo hizo bold. Pero en el hover del link le colocas font-weigth 700 y eso aplico igual un bold. Como se en que caso eso me funciona para u otro??? Existe alguna regla?
Hola, En font weit solo tienes normal y bold, realmente puedes usar cualquiera, incluso tienes la opción de colocar bold en vez de 700, pero seguramente me confundí, lo que puedes hacer es tratar de usar siempre un estándar. Saludos.
muy bueno pero me quedo totalmente al rreves la imagen, quedo alverre... pero igual se ve bien, deberia hacer alguna funcion al hacer click en la imagen ?
Hola que tal?, puedes agregar un Link, normalmente lo que se hace es que al darle clic al logo este te lleve a la página del home. 🖐
Hola, .header .nav-links a debería tener font-weight de 700, esta errado eso de font-size: 700. Saludos
son detallitos que a veces se nos van, gracias por la corrección, un saludo.
@@juandavid_dev gracias por el contenido 👍🏽☺️
Como la dejamos fija en la web?
Hola que tal? Complementa el video con este pequeño tutorial para conseguir un sticky Menú, www.w3schools.com/howto/howto_js_navbar_sticky.asp , saludos.
Excelente tutorial, hice todo igual solo no se aplicó el efecto de movimiento en el logo :(
Hola, gracias por tu comentario! Si quieres puedes darle una miradita a este código y así poder comparar github.com/jdocdev/NavbarsFlexbox
que switch de teclado usas? perdona la pregunta pero es q soy una aficionada de teclados mecanicos y ame el sonidito del tuyo xdd
Hola que tal? Curiosamente en ese entonces usaba un redragon DYAUS K509. Saludos. 🖐
@@juandavid_dev wow, de membrana? sonaba como uno mecánico, muchas gracias!
buen video pero para hacerlo responsive???
Hola, ¿qué tal? Puedes seguir este video th-cam.com/video/NfVLin2MZBI/w-d-xo.html y convertirla en responsive
El navbar realmente es responsive?
Hola, ¿qué tal? Si es responsiva, consta de 2 videos, aquí tienes la segunda parte th-cam.com/video/NfVLin2MZBI/w-d-xo.htmlsi=PZzQcZuhq6SNmxgm
Y lo responsive?
Hola que tal? Aquí tienes th-cam.com/video/NfVLin2MZBI/w-d-xo.htmlsi=CUjYIfVtfJWtgyVX un saludo 🖐
y donde esta lo responsive?
Hola, ¿qué tal? Te comparto la segunda parte th-cam.com/video/NfVLin2MZBI/w-d-xo.html un saludo.
Es una pena que no tenga dropdown ....
Hola! Dale una miradita a este th-cam.com/video/NfVLin2MZBI/w-d-xo.html , con el tiempo realizaré nuevos videos, así que lo dejaré en mi lista de pendientes, saludos.
No es responsive para todos los dispositivos
Buen video igualmente
Hola que tal? En este video no trabajamos lo resposive, pero en esta segunda parte la realizamos th-cam.com/video/NfVLin2MZBI/w-d-xo.html un saludo
no veo el responsive
Hola que tal? Aquí tienes th-cam.com/video/NfVLin2MZBI/w-d-xo.html saludos.
Hola david, me resulta muy bueno este video, estoy haciendo un tranajo en desarrollar mi primera pagina web, podria pedirte ayuda por discord y conectarnos, hiciste en 3 minutos lo que yo no pude en dos dias
Escribeme por alguna de mis redes sociales, déjame tus dudas y con gusto trataré de ayudarte, un saludo.
.header .nav-links li ✅
.nav-links li❌
😂