Cómo crear una cabecera fija responsive con HTML y CSS
ฝัง
- เผยแพร่เมื่อ 16 ก.ค. 2024
- Hace un tiempo hice un tutorial explicando cómo crear una cabecera fija o estática con HTML y CSS y es momento de revisitar ese contenido y darle una actualización.
En esta nueva versión, lo haremos a modo de video y además incluiremos las instrucciones necesarias para hacer que esta cabecera sea responsive, o sea, adaptable a los diferentes tamaños del navegador.
Algunos enlaces relacionados:
Cómo crear una cabecera fija con HTML y CSS: franciscoamk.com/como-crear-u...
Unidades de medida en CSS (Px, Porcentajes, Em y Rem): franciscoamk.com/unidades-de-...
Aquí tienes algunos indicadores por si quieres saltar directamente a alguna de las secciones del video:
0:00 Introducción
1:04 Preparando los archivos base
2:39 Escribiendo el código HTML base
10:15 Escribiendo el CSS base
24:00 Haciendo que la cabecera esté fija
28:10 Haciendo la cabecera responsive
37:43 jQuery para abrir cerrar el menú
43:43 Conclusion y despedida
Si seguiste este tutorial, te invito a dejar un enlace a el proyecto que hayas creado, para poder mirarlo y que otros colegas también puedan verlo.
Hasta la próxima.
Un abrazo,
@FranciscoAMK
🎓 Cursos de diseño web: franciscoamk.com/cursos
:::
¡¡¡Nuevos videos todas las semanas!!!
:::
ACERCA DE MÍ
Soy Francisco Aguilera G., creativo enfocado principalmente en el diseño web. Diseño y desarrollo sitios web para clientes y paralelamente me dedico a enseñar sobre diseño web a través de videos, artículos, tutoriales y cursos en línea.
:::
Suscríbete: franciscoamk.com/newsletter
Cursos: franciscoamk.com/cursos
Mis dibujos: / franciscoamk
![[LIVE] : ONE ลุมพินี 70 | คู่เอก "โฟกัส vs สเตฟาน"](http://i.ytimg.com/vi/_fVieQ89DRQ/mqdefault.jpg)
Tres años tarde llegué, pero que bien explicas! Sos de los pocos que va explicando claro y sin enredarse el paso a paso de lo que vas haciendo, estoy aprendiendo CSS y el hecho de que vayas explicando cada cosa me ayuda a reforzar el conocimiento. Me suscribo 😁🖖
X2
Amigo, me encantó tu video, lo detallas tan bien y de una manera tan buena que se entiende paso a paso lo que estas haciendo. Muchas gracias! me sirvió de gran ayuda.
Dejame darte las gracias por este gran video y por tu tiempo para hacerlo, lo explicaste de una manera que es IMPOSIBLE no entenderlo. Me fue de muchísima ayuda.
Saludos!
eres la primera persona de estos temas que explica de una manera excelente y eficas , muchas Gracias..!!!
Llegue 4 años tarde pero me sirve muchísimo tu explicación ya que estoy haciendo un proyecto y necesitaba saber como hacer una cabecera fija y tu video me salvo ya que esta muy bien explicado y detallado. Muchas Gracias. Nuevo Sub
muy buen tutorial y bien explicado, quiero dar un consejo para que cuando se ponga en css margin-top: no tengas que medir donde se pone el margen si no que al dar margin-top: auto; se adapta solo a tope de la pagina. Esto lo pongo porque en el video el margin-top es de 6rem.
Excelente video, como en menos de una noche, conozco más que en 3 años. Muy buena explicación, le felicito.
Te admiro, te respeto, te adoro, eres lo máximo. Muchas gracias por este muy bien explicado tutorial.
Excelente tutorial, vine por el problema del contenido que quedaba debajo del header, con esto me quedo solucionado.
Hay muchos canales con tutoriales, ejemplos y ejercicios prácticos pero todos tienen su mérito y siempre se aprende algo nuevo en cada uno. Este video no fue la excepción y aprendí varias cosas nuevas al verlo. Gracias.
Genial :)
Estoy comenzando en esto de la creación de sitios web y tengo que agradecerte por este tutorial. El tutorial mejor explicado que he encontrado, gracias en verdad
Genial gracias :)
muchas gracias, me has solucionado varios temas en un único tutorial. Se agradece muchísimo y ya tienes mi Like!
Gracias :)
Crack
Excelente Francisco seguí paso a paso y todo muy bien.. Gracias por tu tiempo. Excelente tutorial.
Amé tu forma de explicar! Muy buen tutorial
Hola, muchas gracias
Excelente !!! Francisco eres lo máximo, la explicación paso a paso es un clase extraordinaria, funciona de maravillas.
Muchas Gracias !!!
Gracias Francisco. Dios te bendiga. Excelente video.
te encontré de de pura suerte googleando por un problema que tenía en css xD al final me di cuenta de mi error gracias a tu video c: excelente contenido, al detalle, bien visible el código y bien explicado, gracias :D me suscribí altoque xD
Estimado Francisco, quiero con estas breves palabras darte las gracias por este magnifico modo de ayudar enseñando a los demás, me ha resultado muy útil ya que como autodidacta quiero rehacer mi web personal y convertirla en 'responsive' para que la familia pueda acceder a ella desde cualquier medio. Muy agradecido recibe un cordial saludo y un fuerte abrazo desde Madrid.
Hey, muchas gracias Ramón :)
Francisco, me encanto tu video. Muy claro, lo fui haciendo con vos y quedo espectacular. Muchisimas gracias!
Excelente :)
Sos un genio chabón, me sirvió muchísimo ya que estoy haciendo un curso de diseño web y este resumen me vino genial
Realmente esta bien explicado, sin duda es una buen forma de aprender solo siendo un autodidacta, gracias.
Ya vi 4 veces este video y sigue solucionando mis dudas, muchas gracias saludos de Mendoza Argentina!!
Qué bueno
sos crack ! , te conoci por este video y ahora miro mucho tu contenido.saludos desde argentina
una pregunta sin compromiso de responder por que capaz es mucho laburo el que hay que meter, pero si quisiera que cuando se abra el menu ocupe todo el viewport como se haria ?
Muchas gracias, muy bien explicado y facil de entender. Excelente, sigue compartiendo tus conocimientos con nosotros
Gracias Luis :)
sinceramente super claro todo, es para considerar el curso, particularmente estoy cursando en un lugar y este video me abrio la cabeza tremendamente. Muchass gracias, probablemente cuando termine el curso me anote en este para mejorar.
saludos
Genial. Un gusto que mi contenido sea de utilidad :)
Te adoro explicaste de una forma tan clara y concisa que entendí todo. Muchísimas gracias saludos
Hermoso como explica y no se siente confuso, un grande este man
Gracias :)
Excelente tutorial, súper explicado y súper detallado
Acabo de terminal de ver tu video Francisco, excelente material y muy bien explicado, te felicito! saludos desde Cordoba, Argentina.
Apenas estoy aprendiendo a usar la herramienta pero tus videos me sirven de mucho. Gracias
Muchas gracias, quedo genial!, me inspiraste a seguir mejorando mis diseños
Excelente :)
El mejor que he visto la verdad, me gusto mucho que explicaras todo muy sencillo y claro,
Gracias, muchas gracias
😎
muchísimas gracias Francisco... muy claro, muy útil y muy didáctico
Muchas gracias por darte el tiempo de compartir tus conocimientos, me ayudaste mucho
O gracias, eres realmente capo, tu video me ayudo mucho a responder algunas preguntas que tenia, bueno es el tercer día de mi aprendizaje de Programación y tú me ayudaste bastante por tu contenido, bendiciones y saludos 🖖
Excelente vídeo. Entendí todo, motivado a aprender cada día más. Muchas gracias
Excelente 🤘
Amigo, muchas gracias por compartir tu conocimiento. Me ha sido de lo más útil. ¡Saludos!
Excelente :)
Hola muchas gracias por compartir.
Me fue muy útil tu video..
Saludos desde México!
Eres SECO! Con tu ayuda, logré aplicar una "ridícula" cantidad de código a la plantilla de un sitio en Wordpress para fijar la cabecera, quedando hermoso! Ahora voy a revisar el código para reducir el alto de la cabecera al hacer el scroll, y con eso pasará de hermoso a "maravilloso". Gracias inmensas, Pro!
Genial Jorge
excelente amigo! Gracias ... me a ayudado bastante (like)
Me re sirvió, sos un tipazo, te quiero mucho bro.
Muchas gracias. Eres un maestrazo. Mucho éxito con tu canal!!
Gracias :)
Excelente video, bien explicado y entendible 👏👏👍👍 me sirvió de mucho y no fue a aburrido me encanto
Genial :)
Muchisimas gracias, lo has explicado de maravilla y he disfrutado viendote programar. La de canas que me han salido intentando hacer un menu responsive otras veces. Millon de gracias. Ya tienes mi like :-)
Genial :)
señor me ha salvado la vida y ademas explica muy bien , muchas gracias por el contenido.
Qué bueno
Muchas gracias Francisco Aguilera G me has ayudado con mi pagina y vaya que fui demasiado fácil hacerla fija Jajaja. Dios te bendiga!
el mejor tutorial que he visto!!!
Bro, eres un genio compa, buen trabajo
Gracias Francisco... muy claro todo. Te mando un abrazo
Gracias man
Una observación, cuando hagas que la cabecera esté fija lo recomendable es poner la propiedad z-index en un número algo grande, ya que si hay otros elementos de css como carruseles se puede poner atrás de estos y no adelante, fuer de eso un excelente video, fue de mucha utilidad
Justamente este era el problema que tenía, gracias
justo me surgió ese problema :D, tenkiu.
Me acaba de agradar tu forma de explicar baia baia muy bien, respect
Enesta temporada de cuarentena explicas mejor que mi profesor de web gracias por salvarme de tenerme que ir a recupereción virtual!!!
psdt: muy buen video me ayudo mucho y sobretodo fácil de entender
Sos un genio, este video me ayudó banda. Graciassss
"Vamos a ver que barbaridad hemos conseguido con esto" jajajaj muy bueno!
A veces salen barbaridades buenas 😅
Uhhh yo pensando que era lo mas dificil del mundo. Me hiciste aprenderlo sin ningun problema, muchisimas gracias!
:)
excelente video francisco! muchas gracias, me sirvio mucho!!
Genial :)
Muchas gracias por compartir tus conocimientos
exelente explicacionm me sir
vió mucho enserio muchas gracias y sigue creando este tipo de contenido
Gracias por el material, apenas estoy empezando y me ayudo bastante, sigue asi
Genial :)
espectacular cómo explicás, super like 😁😁👌👌
buen tutorial amigo, explicas muy bien sin tanto rollo y con un lenguaje que se entiende perfectamente.
Gracias man :)
@@FranciscoAMK sii bro buenisimo vídeo, ideal para aprender lo que tenia que hacer para una actividad, quedo 10/10, el profe dijo que fue más que suficiente para lo que se necesitaba, mil gracias hrm ♥
Excelente, Muchas gracias
me saliooo !! eres un capo, saludos desde Perú!
Que increible lo capo que sos en css
Oye amigo muchas gracias de verdad explicaste fenomenal, me ayudo demasiado tu vídeo, tienes nuevo sub
Me alegra leer esto :)
Gracias Francisco, cuanto conocimiento!
Gracias :)
eres muy bueno explicando WAOOOOO!!!!
gracias por esto!! sos muy crack!
Muchas gracias, está genial
superbueno tu video, me respondió varias dudas que tenía del tema
muy bien explicado francisco
🤘
tengo solo un par de palabras francisco ;genio!!!!! exelente maestro
:)
Muy bueno el tutorial, la verdad que andaba olvidado de muchas cosas.
Tuve un problema con un error Missing "use strict" statement, usando dreamweaver.
Lo solucione encontrando algo en un foro:
1. Go to Preferences by pressing ctrl/Cmd+U (preferencias)
2. Navigate to Linting category (buscar Linting, lo tengo en ingles el programa :'v)
3. Select JS in the list box and click on "Edit & Apply Changes" (seleccionar donde dice JavaScript y luego editar..)
4. Set "strict" to false and save the file (buscar donde dice strict y ponerle false)
guardar el archivo (ctrl/cmd+U)
5. Reopen the JS files (abrir de nuevo el index y quedó solucionado
Paso el dato por si alguno más lo tuvo (lo se, usar dreamweaver.... pero ta, era lo que tenía mas a mano y ando a contra reloj xD)
De nuevo Francisco, muchas gracias, muy bueno el tuto, felicidades. Saludos desde Uruguay.
Soy tan feliz, al fin me salió jaja, muchas gracias c:
Y yo soy feliz de que tú seas feliz :)
Que bien
Excelente aporte, muchas gracias.
😎
¡Muy buen video! Gracias, me ayudo bastante.
:)
Gracias, excelente explicación de todo
muchas gracias bien explicado eres un buen maestro
Fue lo que buscaba, gracias.
Excelente :)
Muy buen video amigo, nuevo suscriptor.
Genial
Me gustó como explicas todo muy sencillo y muy bien explicado, tomé un curso de html y css pero el que lo da no se explica bien y se revuelve mucho pero tu si haces buenas explicaciones así uno si aprende bien espero que subas mas videos de html5, css3 y js
Sip, se vienen más videos
Gracias maestro gran tutorial super claro sigue adelante eres grande
Gracias, saludos
Excelente explicación hermano saludos.
Sos un genio Fran!
gran video, me ayudo mucho a comprender los conceptos que necesitaba aprender
Excelente.
Muchas gracias hermano, exelente video
No hay de queso, nomás de papas :)
mil gracias!!! muy muy muy claro!!
😎
muchas gracias, voy retomando la programación, me perdí en lo de jquery pero al final si quedo
Tio me mate mas buscando como meter la extension jquery que otra cosa PERO LO LOGRE, gracias tito franci
Salu2 desde la 3ra región parsero. Que buena explicación parsero.
Francisco, Mi intelecto te ama. Thanks.
Gracias por tu tutorial, me sirvió de mucho
Excelente clase, me despejo muchas dudas, gracias
Excelente :)
hermano enserio muchas gracias, me ayudo mucho :,D
Muchas gracias, excelente explicación y video de ayuda c':
😀
Gracias a este vídeo me gusto como quedo la pagina y lo utilice en la mía y me gusto buen vídeo
Super claro y didactico
Gracias Cristian
Muy buen video amigo , muchas gracias
:)
Gracias por enseñarme gracias a ti aprendí algo nuevo y pude entregar mi tarea a tiempo saludos desde Panamá
¡Excelente!