[Práctica] Como Transformar un Sitio a Responsive con CSS Grid, Unidades EM y REM

[@FalconMasters]

Si te gusto el video por favor dale manita arriba 👍 [Video] Que rayos son las unidades EM, REM y como se utilizan: kzbin.info/www/bejne/pKuZdXybd8mNqrs

[@BillRocha]

Excelente explicação!! Vou recomendar para meus amigos que estão começando em CSS!! 👍

[@averydonald6129]

@Devin Reese You are welcome :D

[@chicho69-cesar]

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 ❤️

[@FalconMasters]

Wow eso es increíble! Muchas felicidades! Me alegra mucho escuchar que mis contenidos les sean de mucho aprendizaje.

[@chicho69-cesar]

@@FalconMasters si muchas gracias y ojalá nunca dejes de subir contenido a todos nos es de mucha ayuda

[@anakaren1103]

Hola, felicidades! Si no te importa, quisiera saber cómo buscar concursos semejantes al que mencionas. 💕

[@patricioarecco9984]

Que buen Video, es compacto, da la info necesaria sin explayarse de mas y de regalo te ofrece el código. ¡PERFECTO!

[@sebastiansiman6076]

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 !

[@GuidoCentesimo]

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

[@rickyarg5298]

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.

[@FalconMasters]

Me alegra que te sea de ayuda! Mucha suerte en tu proyecto.

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!!!

[@FalconMasters]

Muchas gracias Janiel !

[@alejandrorosales398]

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!!!!!!

[@FalconMasters]

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.

[@alejandrorosales398]

@@FalconMasters :D

[@martingalenda]

Esto es lo que venía buscando, gracias genio... sabía que se podía optimizar mucho desde entrada esto!

[@DGamerxPRO]

Este video vale oro para un desarrollador web

[@edwinloaiza1017]

Carlos Arturo muchas gracias ahora si me quedaron despejadas las dudas sobre las medidas rem y em y el plugin de visual estudio excelente.

[@carlos-rt5nz]

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 :)

[@FalconMasters]

Muchas gracias Carlos, que gusto escuchar que le sacaras provecho al video. Saludos!

[@rodrigoemanuelmunoz8830]

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.

[@FalconMasters]

Muchas gracias

[@oscardiaz9170]

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

[@FalconMasters]

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!

[@mikersson]

Excelente!! Muy bien explicado mi estimado!

[@wildermaytamachicado6024]

La verdad primera vez que veo el grid-template-areas Muchas Gracias

[@antony2894]

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!

[@FalconMasters]

Si, la verdad es que es genial!

[@jgvlc]

Genial cómo siempre, muchas gracias!

[@alannm5414]

que bueno que sos explicando las cosas

[@henryflores1325]

Exelente ..justo lo que necesito..Gracias por compartir tus conocimientos

[@joaquinroman1810]

Increíble el video me ayudo muchísimo. Muchas gracias.

[@jeros9183]

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

[@joaquinbustelo7889]

me encanta como explicas

[@daniel07leo]

Genial, muy buen aporte.

[@francisconelo3899]

Un Like si te parece el mejor sitio de tutoriales para páginas webs / Saludos desde Venezuela

[@melinacarraro7320]

Me encanto! Justo lo que estaba buscando

[@debdeb11337]

Muy bien explicado! Gracias :-)

[@realcryptos]

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.

[@devaraq]

Falcon podrías crear un tutorial de como crear este sitio desde cero? Seria de gran ayuda!

[@leorodseg]

Muy bueno!!!

[@PacoCryptos]

excelente material bro, gracias

[@antoniorandisi3009]

Saludos, Excelente como siempre

[@diegowagner9486]

Capo ! genio !! idolo!!! jajaja Gracias

[@anyilojoserangelarias5622]

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

[@alfredomercado3285]

Buen video. Podrías hacer un video explicando esta página desde cero !!

[@estebangomez3799]

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

[@Saudavelpro]

that's awesome, great tutorial !!!

[@WilliamOliveiraExcel]

Mestre ensina a criar esse layout

[@matiasmartinez9053]

Excelente! Craaaaaack!!!

[@MyMassachusetts]

Gracias 👍🏻

[@AlexdobleU]

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

[@AlexdobleU]

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 )

[@adrianmontilla3095]

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

[@francisconissero4906]

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?

[@ict-cryptodolargamez486]

Como podemos hacer responsive con Grid sin media queries pero en una pagina.

[@gilbert_dev]

¿Es mejor hacer páginas adaptables a dispositivos móviles con el sistema de grid de Bootstrap o con CSS grid??

[@berling32]

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

[@FalconMasters]

Me alegra mucho escuchar eso! Y utilizo el tema de Ayu mirage.

[@berling32]

@@FalconMasters gracias!! ^^

[@romuloalves9349]

Gostaria de ver um Dropdow com ícones mostrando um box abaixo com JavaScript com evento lister mouseleave desde já agradeço.

[@hectorserrano9314]

Qué teclado usas bro? yo tengo un Corsair k70 RGB, no logro distinguir cuál podría ser el tuyo.

[@valeriaacevesrios4296]

Hola! Tendrás algún video pagina web con carrito de compras, mysql y bootstrap :D! Me ayudarías mucho. Gracias

Genial pues el video pasado resulto ser algo confuso. Una pregunta, tienes algun tutorial utilizando Gulp?

[@Nanoseo]

¿Siempre haces las webs primero en desktop y después la adaptas a móvil?

[@cristianovelazquez2048]

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" ?

[@FalconMasters]

Me parece extraño, pero si usar CSS Grid te resuelve el problema y no tienes que usar mediaqueries pues perfecto. No pasa nada.

[@cristianovelazquez2048]

@@FalconMasters Gracias por responder!! Gracias por todo tu contenido.

[@mitubo1970]

son realmente necesarias las media queries para que sea responsive??

[@FalconMasters]

Si, un sitio sin mediaqueries es muy difícil que sea responsive.

[@mitubo1970]

@@FalconMasters Estimado Arturo, échale un vistazo. kzbin.info/www/bejne/mJLQaWaOq5mJg6M y felices Reyes. Gracias.

[@mitubo1970]

@@FalconMasters kzbin.info/www/bejne/mJLQaWaOq5mJg6M Estimado Arturo, échale un vistazo y ... felices Reyes.

[@victoriasanso230]

hola que seria media cueris??? perdon pero no entiendo y lo mencionas bastante . gracias por el video

[@FalconMasters]

Hola Victoria, los mediaqueries los explico en este video: kzbin.info/www/bejne/fqW6eqV9psd4ras

[@sergio5474]

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?

[@FalconMasters]

Son diferentes, los cursos en Udemy son mas completos con muchas horas de contenido y proyectos.

[@TizianoMontenegro07]

muy buen video 😁

[@JulioMartinez-nn9wc]

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

[@romeobetances7964]

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).

[@FalconMasters]

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.

[@romeobetances7964]

@@FalconMasters Gracias por sacarme de dudad. Eres el mejor sigue así bro. La humanidad aun no esta perdida :v xD

[@gerardoluisbv]

Carlos Arturo: Espero estés emocionado Yo: si maestrooo

[@edglo464]

No es más fácil usar rem siempre para los textos y así no preocuparte por ponerle em a los margin ?

[@biblioteca.antarctica]

EM and REM ....better que pixels ??

[@FalconMasters]

Most of the time.

[@Hablales_alin]

saludos

[@nuditosmacrame8147]

yo tenia una web echa con px, las cambie tal cual dice el video y se me destartaló todo!!! no me sirvió

[@BobbyLonely]

tecnologia de la luz, son solo seres con una alta tecnologia basada en la luz y electricida, tal cual como la pelicula Jhon Carther

[@John_villeneuve]

He visto que algunos desarrolladores le pone font size 100% al HTML no al body 🤔🤔

[@FalconMasters]

No me ha tocado verlo, no se la razón de eso.

[@John_villeneuve]

@@FalconMasters blog.usejournal.com/dont-use-rem-em-for-paddings-margins-and-more-94e19026b000 creo que en este artículo lo explican 🤔

[@wilsonpachito5722]

Falcon es muy berraquito con estos temas...