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

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии • 95

  • @FalconMasters
    @FalconMasters  4 года назад +22

    Si te gusto el video por favor dale manita arriba 👍
    [Video] Que rayos son las unidades EM, REM y como se utilizan: ruclips.net/video/nz6DIeBdZtY/видео.html

    • @BillRocha
      @BillRocha 4 года назад

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

    • @averydonald6129
      @averydonald6129 3 года назад

      @Devin Reese You are welcome :D

  • @chicho69-cesar
    @chicho69-cesar 4 года назад +63

    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
      @FalconMasters  4 года назад +11

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

    • @chicho69-cesar
      @chicho69-cesar 4 года назад +5

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

    • @anakaren1103
      @anakaren1103 2 года назад

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

  • @patricioarecco9984
    @patricioarecco9984 Год назад

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

  • @sebastiansiman6076
    @sebastiansiman6076 2 года назад

    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 !

  • @rickyarg5298
    @rickyarg5298 3 года назад +2

    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
      @FalconMasters  3 года назад +1

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

  •  4 года назад +2

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

  • @GuidoCentesimo
    @GuidoCentesimo 3 года назад +2

    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

  • @alejandrorosales398
    @alejandrorosales398 4 года назад +2

    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
      @FalconMasters  4 года назад

      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
      @alejandrorosales398 4 года назад

      @@FalconMasters :D

  • @rodrigoemanuelmunoz8830
    @rodrigoemanuelmunoz8830 3 года назад

    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.

  • @DGamerxPRO
    @DGamerxPRO 3 года назад

    Este video vale oro para un desarrollador web

  • @martingalenda
    @martingalenda 2 года назад

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

  • @edwinloaiza1017
    @edwinloaiza1017 3 года назад

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

  • @mikersson
    @mikersson Год назад

    Excelente!! Muy bien explicado mi estimado!

  • @wildermaytamachicado6024
    @wildermaytamachicado6024 4 года назад

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

  • @jeros9183
    @jeros9183 3 года назад

    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

  • @carlos-rt5nz
    @carlos-rt5nz 4 года назад +6

    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
      @FalconMasters  4 года назад +1

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

  • @antony2894
    @antony2894 4 года назад

    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!

  • @oscardiaz9170
    @oscardiaz9170 4 года назад +1

    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
      @FalconMasters  4 года назад

      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!

  • @alannm5414
    @alannm5414 3 года назад

    que bueno que sos explicando las cosas

  • @jgvlc
    @jgvlc 2 года назад

    Genial cómo siempre, muchas gracias!

  • @henryflores1325
    @henryflores1325 4 года назад

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

  • @joaquinroman1810
    @joaquinroman1810 3 года назад

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

  • @joaquinbustelo7889
    @joaquinbustelo7889 2 года назад

    me encanta como explicas

  • @anyilojoserangelarias5622
    @anyilojoserangelarias5622 2 года назад +1

    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

  • @realcryptos
    @realcryptos 4 года назад

    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.

  • @daniel07leo
    @daniel07leo 2 года назад

    Genial, muy buen aporte.

  • @francisconelo3899
    @francisconelo3899 4 года назад +3

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

  • @melinacarraro7320
    @melinacarraro7320 4 года назад

    Me encanto! Justo lo que estaba buscando

  • @debdeb11337
    @debdeb11337 3 года назад

    Muy bien explicado! Gracias :-)

  • @devaraq
    @devaraq 4 года назад +7

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

  • @PacoCryptos
    @PacoCryptos 4 года назад

    excelente material bro, gracias

  • @leorodseg
    @leorodseg 3 года назад

    Muy bueno!!!

  • @antoniorandisi3009
    @antoniorandisi3009 4 года назад

    Saludos, Excelente como siempre

  • @estebangomez3799
    @estebangomez3799 4 года назад

    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

  • @alfredomercado3285
    @alfredomercado3285 3 года назад

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

  • @diegowagner9486
    @diegowagner9486 3 года назад

    Capo ! genio !! idolo!!! jajaja Gracias

  • @gerardoluisbv
    @gerardoluisbv 3 года назад

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

  • @hectorserrano9314
    @hectorserrano9314 4 года назад

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

  • @Saudavelpro
    @Saudavelpro 4 года назад

    that's awesome, great tutorial !!!

  • @adrianmontilla3095
    @adrianmontilla3095 4 года назад

    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

  • @BobbyLonely
    @BobbyLonely 6 месяцев назад

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

  • @matiasmartinez9053
    @matiasmartinez9053 4 года назад

    Excelente! Craaaaaack!!!

  • @gilbert_dev
    @gilbert_dev 4 года назад

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

  • @AlexdobleU
    @AlexdobleU 4 года назад

    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
      @AlexdobleU 4 года назад

      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 )

  • @JulioMartinez-nn9wc
    @JulioMartinez-nn9wc 4 года назад

    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

  • @MyMassachusetts
    @MyMassachusetts 4 года назад

    Gracias 👍🏻

  • @valeriaacevesrios4296
    @valeriaacevesrios4296 4 года назад

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

  •  4 года назад

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

  • @Nanoseo
    @Nanoseo 4 года назад

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

  • @WilliamOliveiraExcel
    @WilliamOliveiraExcel 3 года назад

    Mestre ensina a criar esse layout

  • @cristianovelazquez2048
    @cristianovelazquez2048 2 года назад

    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
      @FalconMasters  2 года назад +1

      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
      @cristianovelazquez2048 2 года назад

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

  • @berling32
    @berling32 4 года назад

    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
      @FalconMasters  4 года назад +1

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

    • @berling32
      @berling32 4 года назад

      @@FalconMasters gracias!! ^^

  • @francisconissero4906
    @francisconissero4906 3 года назад

    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
    @ict-cryptodolargamez486 3 года назад

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

  • @sergio5474
    @sergio5474 4 года назад +1

    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
      @FalconMasters  4 года назад +2

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

  • @victoriasanso230
    @victoriasanso230 2 года назад

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

    • @FalconMasters
      @FalconMasters  2 года назад

      Hola Victoria, los mediaqueries los explico en este video:
      ruclips.net/video/HtWIrGqbEwI/видео.html

  • @romeobetances7964
    @romeobetances7964 4 года назад

    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
      @FalconMasters  4 года назад +1

      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
      @romeobetances7964 4 года назад

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

  • @romuloalves9349
    @romuloalves9349 4 года назад +1

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

  • @Hablales_alin
    @Hablales_alin 4 года назад

    saludos

  • @mitubo1970
    @mitubo1970 4 года назад

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

    • @FalconMasters
      @FalconMasters  4 года назад

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

    • @mitubo1970
      @mitubo1970 4 года назад

      @@FalconMasters Estimado Arturo, échale un vistazo. ruclips.net/video/bam83Xv4VMA/видео.html y felices Reyes. Gracias.

    • @mitubo1970
      @mitubo1970 4 года назад

      @@FalconMasters ruclips.net/video/bam83Xv4VMA/видео.html
      Estimado Arturo, échale un vistazo y ... felices Reyes.

  • @John_villeneuve
    @John_villeneuve 4 года назад

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

    • @FalconMasters
      @FalconMasters  4 года назад

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

    • @John_villeneuve
      @John_villeneuve 4 года назад +1

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

  • @edglo464
    @edglo464 3 года назад

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

  • @biblioteca.antarctica
    @biblioteca.antarctica 4 года назад

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

  • @nuditosmacrame8147
    @nuditosmacrame8147 4 года назад

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

  • @wilsonpachito5722
    @wilsonpachito5722 4 года назад

    Falcon es muy berraquito con estos temas...

  • @TizianoMontenegro07
    @TizianoMontenegro07 2 года назад

    muy buen video 😁