[Práctica] Como Transformar un Sitio a Responsive con CSS Grid, Unidades EM y REM
ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- En este video vamos a practicar transformando un sitio no adaptable a dispositivos, a Responsive Design usando CSS Grid, Unidades EM y REM.
🚀 Blog de Diseño Web:
www.falconmaste...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
📄 Código del Proyecto: github.com/fal...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters
![[UNCUT]"ตุลามรณะ"ย้อนฟังคำทำนาย หมอดูทุกสาย ดวงเมืองร้อน (หมอปลาย ฟองสนาน อ.โอเล่)I คนดังนั่งเคลียร์](http://i.ytimg.com/vi/lE5az5VvT9M/mqdefault.jpg)
![[UNCUT] “บอสณวัฒน์” ลากไส้!! ใครหนุนหลัง "แม่ตั๊ก ป๋าเบียร์" I คนดังนั่งเคลียร์ I 30 ก.ย. 67](http://i.ytimg.com/vi/QlD7mU2KKRk/mqdefault.jpg)
Si te gusto el video por favor dale manita arriba 👍
[Video] Que rayos son las unidades EM, REM y como se utilizan: th-cam.com/video/nz6DIeBdZtY/w-d-xo.html
Excelente explicação!!
Vou recomendar para meus amigos que estão começando em CSS!! 👍
@Devin Reese You are welcome :D
Me gustaría agradecerte porque gracias a ti yo y una amiga ganamos un concurso muy importante con el diseño de una plataforma web con conocimientos obtenidos en tu canal muchas gracias ❤️
Wow eso es increíble! Muchas felicidades!
Me alegra mucho escuchar que mis contenidos les sean de mucho aprendizaje.
@@FalconMasters si muchas gracias y ojalá nunca dejes de subir contenido a todos nos es de mucha ayuda
Hola, felicidades! Si no te importa, quisiera saber cómo buscar concursos semejantes al que mencionas. 💕
Que buen Video, es compacto, da la info necesaria sin explayarse de mas y de regalo te ofrece el código. ¡PERFECTO!
Nunca comento pero me abrió la cabeza este video. Entendí de golpe toda la teoría de css y como hacer una web responsive design. Abrazo grande desde Argentina !
Te agradezco mucho que compartas tus conocimientos, estaba enfocado en el back con php y ahora con esto va a quedar muy bien mi pagina.
1000 gracias.
Me alegra que te sea de ayuda!
Mucha suerte en tu proyecto.
Tío incursione en el mundo web con WordPress y Elementor, pero me veo tus vídeos para aprender de html, ccs y de verdad que son geniales, tienes mucha pedagogía, te felicito y seguiré viéndote. Con CSS puedes hacer maravillas. Un saludo
Un Like si te parece el mejor sitio de tutoriales para páginas webs / Saludos desde Venezuela
Excelente práctica en donde combinamos las medidas EM y REM con las GRID. Muy intuitivo, profesional y de calidad. ¡Muchas gracias Carlos! Tus vídeos realmente son lo más!! Supermegalike!!!
Muchas gracias Janiel !
Este video vale oro para un desarrollador web
Excelente!! Muy bien explicado mi estimado!
tu contenido es maravilloso, diria que tienes un don, pero se que no es asi, lo que tu tienes es el esfuerzo de tu propio trabajo y el resultado es este maravilloso contenido....
lo mejor es que cada vez que creo llegar al final de todos los conocimientos, tu sales con otro enorme curso y eso lo vuelve muy entretenido, MUCHAS GRACIAS!!!!!!
Alejandro rosales Muchas gracias de verdad por este comentario, me da mucho gusto que mis videos y cursos te ayuden a aprender de este maravilloso mundo del desarrollo web.
@@FalconMasters :D
Esto es lo que venía buscando, gracias genio... sabía que se podía optimizar mucho desde entrada esto!
Carlos Arturo muchas gracias ahora si me quedaron despejadas las dudas sobre las medidas rem y em y el plugin de visual estudio excelente.
Loco recién voy aprendiendo de HTML y CSS, justamente hoy descubrí que existía CSS grid y me emocioné mal. Tremendo video y muy específico, explicas, modificas y mostras sin vueltas. Seguí así por favor.
Muchas gracias
woooow de verdad una pasada de video !!! ahora que ya se esto, voy a aplicarlo a mi pagina web, muchas gracias !!
PD: sigue haciendo mas tutoriales asi :)
Muchas gracias Carlos, que gusto escuchar que le sacaras provecho al video. Saludos!
Genial cómo siempre, muchas gracias!
La verdad primera vez que veo el grid-template-areas Muchas Gracias
Excelente! Justo lo que buscaba. Ojalá puedas hacer más videos como este, que sirvan de práctica, es la mejor manera de aprender. Porque he visto mucho contenido teórico pero luego en la práctica es donde me cuesta, si pudieras seguir creando contenido con practicas, sería lo mejor 😁 o incluso si hicieras un curso completo con puras prácticas yo si lo compraría
Me da mucho gusto que te sirva este video, voy a tener en cuenta este formato para hacer mas videos practicas así.
Si he pensado hacer un curso de puras practicas, quizás lo haga luego que acabe el que estoy preparando de react.
Saludos!
que bueno que sos explicando las cosas
me encanta como explicas
Exelente ..justo lo que necesito..Gracias por compartir tus conocimientos
Wow!! La aplicación de em y rem hace que lograr el diseño responsive sea super fácil y rápido!! Gracias por el video!
Si, la verdad es que es genial!
Genial, muy buen aporte.
Increíble el video me ayudo muchísimo. Muchas gracias.
cuando vi que estaba todo el codigo para descargar dije, seguro es malisimo, pero la verdad que te hace tocar solo el css "responsive" y se entiende mucho mejor el concepto y sabes que "tocar" a la hora de querer hacerlo en un futuro
Amigo usted es muy inteligente... Yo usted monto una web de trabajo y creo una cryptomoneda para interactuar en el sitio web con la misma.
Me encanto! Justo lo que estaba buscando
Falcon podrías crear un tutorial de como crear este sitio desde cero? Seria de gran ayuda!
Muy bueno!!!
Muy bien explicado! Gracias :-)
REM : funciona igual que el em, con la diferencia que es relativo al valor de la fuente del elemento html, y no tiene en cuenta el valor heredado o del elemento que lo contiene.
Por defecto el html viene con un tamaño de fuente de 16px así que siempre
1 REM = 16PX
Si queremos aplicar rem de una forma mas sencilla para no tener que hacer tantos cálculos hacemos lo siguiente
vamos a reescribir en css nuestro html
html {
font-size: 62.5%;
}
esto lo que hará es darle a el html un valor de 10px ya que 16px - 62.5% = 10px
ahora si por ejemplo a una etiqueta le asignamos 2rem este hará referencia a 20px, o si por ejemplo le damos un valor de 1.5rem su valor será de 15px
Capo ! genio !! idolo!!! jajaja Gracias
excelente material bro, gracias
Falcon, debería uno empezar a construir una página web desde las medidas más pequeñas de móviles hasta las pantallas más grandes
Buen video. Podrías hacer un video explicando esta página desde cero !!
Saludos, Excelente como siempre
Carlos Arturo: Espero estés emocionado
Yo: si maestrooo
¿Es mejor hacer páginas adaptables a dispositivos móviles con el sistema de grid de Bootstrap o con CSS grid??
Gracias 👍🏻
Entonces "rem y em" solamente es usado para cambiarle el font size al body? ¿no es un poco tedioso hacerlo solo por eso? estoy seguro que hay algo que no entendi....
si el responsive del ancho de cada componente esta determinado por los porcentajes (%)
y el orden de los elementos (incluso el font size) los cambias con los media querys... ¿que es realmente lo que cambia a pasarlo a rem y em?
Excelente! Craaaaaack!!!
super facil de hacer asi no se tiene que depender netamente de boostrap o materialize para maquetar y hacer responsive un sitio, porque cuando te pidan o quieras hacer retoques como mover cierto segmento en alguna resolucion te estaras dando cabezasos contra la pared porque no sabes como hacer desde un framework
Hola!
Tendrás algún video pagina web con carrito de compras, mysql y bootstrap :D!
Me ayudarías mucho. Gracias
that's awesome, great tutorial !!!
Genial pues el video pasado resulto ser algo confuso. Una pregunta, tienes algun tutorial utilizando Gulp?
Me encantó hacer esta práctica!! Y creo que de ahora en adelante usaré esos Media Quaries jajaja muchas gracias =D
por cierto, que tema personalizado usas en VS Code? saludos
Me alegra mucho escuchar eso! Y utilizo el tema de Ayu mirage.
@@FalconMasters gracias!! ^^
Gostaria de ver um Dropdow com ícones mostrando um box abaixo com JavaScript com evento lister mouseleave desde já agradeço.
¿Siempre haces las webs primero en desktop y después la adaptas a móvil?
Una duda, en el diseño para movil... no seria mejor que la fuente sea un poco mas grande ? y el user tenga la opción de ver mejor el contenido escrito, o tal vez estoy equivocado
mi pregunta no es si es ley hacerlas mas pequeñas para dispositivos móviles, mi duda es, si dentro de los patrones de diseño cabe la idea de hacer un poco mas grande la fuente en dispositivos móviles para hacerla mas visible (importante .... estoy aprendiendo, no es que este corrigiendo algo en el vídeo )
Qué teclado usas bro? yo tengo un Corsair k70 RGB, no logro distinguir cuál podría ser el tuyo.
Hola qué tal Carlos Arturo, me gustaría saber cómo se llama ese plugins de firefox para ver cómo quedan las páginas en los dispositivos móviles osea para que se adapten a los Smartphones
Hola!
Los cursos que tenes en udemy, de diseño web desde 0, es el mismo que tenes subido a youtube?? o son totalmente distintos?
Son diferentes, los cursos en Udemy son mas completos con muchas horas de contenido y proyectos.
Gracias por tus vídeos. Tengo una duda: ¿ Qué pasa cuando realizas un sitio adaptable, y otro responsive ? Pero, al final...los dos cumplen la necesidad. Qué pasa cuándo utilizas "CSS GRID", sin la necesidad de utilizar "Media Queries" ?
Me parece extraño, pero si usar CSS Grid te resuelve el problema y no tienes que usar mediaqueries pues perfecto. No pasa nada.
@@FalconMasters Gracias por responder!! Gracias por todo tu contenido.
Excelente amigo, por cierto esas unidades he leído un poco sobre ella y me di cuenta de algo que tal vez(ya sabes) es que si analizas multiplican el tamaña de su contenedor, osea, todo sabemos que el tamaña predeterminado es 16px, si le pones 2.5 rem , se multiplica con esa cantidad. ¿Estoy en lo correcto?(aunque no lo creo).
Si así es, aunque no multiplican el tamaño directamente, multiplican el tamaño del font-size y las unidades em y rem hacen referencia a ese font-size.
@@FalconMasters Gracias por sacarme de dudad. Eres el mejor sigue así bro. La humanidad aun no esta perdida :v xD
tecnologia de la luz, son solo seres con una alta tecnologia basada en la luz y electricida, tal cual como la pelicula Jhon Carther
Como podemos hacer responsive con Grid sin media queries pero en una pagina.
hola que seria media cueris??? perdon pero no entiendo y lo mencionas bastante . gracias por el video
Hola Victoria, los mediaqueries los explico en este video:
th-cam.com/video/HtWIrGqbEwI/w-d-xo.html
Mestre ensina a criar esse layout
saludos
No es más fácil usar rem siempre para los textos y así no preocuparte por ponerle em a los margin ?
yo tenia una web echa con px, las cambie tal cual dice el video y se me destartaló todo!!! no me sirvió
son realmente necesarias las media queries para que sea responsive??
Si, un sitio sin mediaqueries es muy difícil que sea responsive.
@@FalconMasters Estimado Arturo, échale un vistazo. th-cam.com/video/bam83Xv4VMA/w-d-xo.html y felices Reyes. Gracias.
@@FalconMasters th-cam.com/video/bam83Xv4VMA/w-d-xo.html
Estimado Arturo, échale un vistazo y ... felices Reyes.
He visto que algunos desarrolladores le pone font size 100% al HTML no al body 🤔🤔
No me ha tocado verlo, no se la razón de eso.
@@FalconMasters blog.usejournal.com/dont-use-rem-em-for-paddings-margins-and-more-94e19026b000 creo que en este artículo lo explican 🤔
EM and REM ....better que pixels ??
Most of the time.
Falcon es muy berraquito con estos temas...
muy buen video 😁