Це відео не доступне.
Перепрошуємо.

SÓLO 3 LÍNEAS: CSS Grid responsive sin media queries

Поділитися
Вставка
  • Опубліковано 21 чер 2021
  • Las media queries nos pueden ayudar mucho pero también añaden complejidad a nuestro código. Te enseñamos como crear layouts responsive en 3 líneas de CSS!
    Aprende CSS Grid a fondo con nuestro curso 👉 pro.codely.tv/library/css-grid/
    {▶️} CodelyTV
    ├ 🎥 Suscríbete: ua-cam.com/users/CodelyTV?sub_co...
    ├ 🐦 Twitter CodelyTV: / codelytv
    ├ 🌶 Twitter Núria: / nuria_codes
    ├ 🍺 Twitter Isma: / ismanapa
    ├ 📸 Instagram: / codelytv
    ├ ℹ️ LinkedIn: / codelytv
    ├ 🟦 Facebook: / codelytv
    └ 📕 Catálogo cursos: bit.ly/cursos-codely

КОМЕНТАРІ • 506

  • @CodelyTV
    @CodelyTV  3 роки тому +74

    ¿Eres team media queries, automagia de grid, o Bootstrap? 🤔

    • @raulastete321
      @raulastete321 3 роки тому +6

      Buenas tardes, recien estoy entrando al mundo del frontend en web y queria saber que contras tiene el usar un utilitario como tailwind. Gracias

    • @raulastete321
      @raulastete321 3 роки тому

      Jeje bueno a veces sucede dentro de este mundo no preferir algunas cosas. En este caso, deseaba saber si en proyectos corporativos reales se usa esta librería o algún otro utilitario como este o es solo aconsejable su uso en POC's o proyectos MVP, ya que manejo laravel y le da bastante empuje a este pero queria saberlo si en realidad es preferible que cada equipo maneje su propio utilitario.

    • @codigoanarco5988
      @codigoanarco5988 3 роки тому +10

      @@raulastete321 Hola Raul! En el mundo del front, se ha vuelto meme reírse de Tailwind ya que es necesario sobre poblar de clases tus etiquetas css, lo que hace de tu código ilegible e inmantenible. En el fondo, la critica es... para que quieres aprender Tailwind, si puedes hacer lo mismo o mas, aprendiendo css a secas

    • @daque7253
      @daque7253 3 роки тому +15

      Fui autodidacta en mi aprendizaje para el desarrollo web, puedo decir que he probado en este trayecto muchas cosas y que en un principio Bootstrap me ayudo a entender como funciona el responsive y un sistema de 12 columnas, posteriormente opte por Materialize , pero desde el año pasado conforme fui acercandome mas al Vanilla CSS me di cuenta que existe mayor flexibilidad, alcance y personalización utilizando CSS puro, y en este caso entendiendo Flexbox asi bien posteriormente combinandolo con Grid, no me es necesario el utilizar ya los Frameworks CSS, salvo cuando requieres algo rapido y donde la personalización o diseño no es a priori. Tailwind no lo he utilizado, pero a lo que llegue a observar es que maneja muchas clases dentro del mismo HTML, y en lo personal no me agrada esta idea. Una vez que le agarras el rollo al CSS puro, optas por quedarte de ese lado.

    • @raulastete321
      @raulastete321 3 роки тому +1

      Gracias por sus respuestas. Cuando comence a ver el tema del manejo de estilos en proyectos lei que usar tu propio css es algo impensable. Pero creo que era algo erróneo. Me gusta mas trabajar con mis propias librerias en mi desarrollo asi que me va bien lo que me cuentan . Gracias

  • @juanpablocoronacorona8178
    @juanpablocoronacorona8178 2 роки тому +3

    No entiendo cómo no tiene más visitas es una locura son estos simples pasos te evitas tanto código mil graciassss! Me subscribo y mano arriba 🥺❤️

  • @horacioabitu
    @horacioabitu 2 роки тому +13

    Increible!!, estoy estudiando programación y estaba justo con flex y buscando sobre grid encontré este video, gracias chicos increíble lo que se puede hacer con tan pocas lineas, muchas gracias por compartir y que sigan los éxitos! 💪​💪​🇦🇷​👍​

  • @manuelperezetchegaray1561
    @manuelperezetchegaray1561 2 роки тому +2

    Les agradezco mucho, me salvaron del caos de una presentación a ultimo momento. Los quiero

  • @tonsofcode2478
    @tonsofcode2478 3 роки тому +1

    Justo lo que buscaba, evitarme el innecesario uso de media querys, gracias totales.

  • @charlinezequiel8259
    @charlinezequiel8259 3 роки тому +2

    Por dios , lo han hecho tan fácil y uno se tarda hora buscando documentación y stackoverflow , se ganaron mi suscripción y mi like 💪👌

  • @kyre221
    @kyre221 3 роки тому +2

    Como siempre facilitándome la vida 💛 gracias nuria y equipo codely.

  • @alexwakeup7098
    @alexwakeup7098 Рік тому +7

    Van varias veces que recurro a este video por tremendo aporte. Si a alguien no le funciona, asegurese de que un display: flex de más arriba no este causandole problemas. saludos, gracias por tremendo video

  • @sebastiangomez2412
    @sebastiangomez2412 3 роки тому +1

    Ustedes son como la respuesta que uno nunca está buscando pero es lo que uno necesita saber hahahah

  • @moltfreaky
    @moltfreaky 2 роки тому

    Sois unos megacracks. Me habéis salvado la vida y no lo olvidaré!😍

  • @AndresSaaN
    @AndresSaaN 3 роки тому +154

    Con la d horas que me pase el otro día montando el layout de un proyecto y lo hubiera hecho así en 2 minutos 😂

  • @jonathan_bestprime
    @jonathan_bestprime 2 роки тому

    Vaya magia esta linea que acabais de compartir, me ha reducido bastante trabajo, os quiero

  • @Naimadmdp
    @Naimadmdp 3 роки тому +30

    Oh Dios es desperdiciado mi vida!!! Jajaja muchas gracias voy a meterle a esto.

  • @germanslobo
    @germanslobo 3 роки тому

    Gracias. Me has ahorrado un millón de años.

  • @AlejoRomero69
    @AlejoRomero69 3 роки тому +1

    Wow esta chica es increíble!
    Mil gracias.

  • @nancysilva9582
    @nancysilva9582 2 роки тому +1

    Gracias. Son los mejores en responsive design que he conseguido

  • @albertogranillo3045
    @albertogranillo3045 3 роки тому +1

    Orales! Es la primera vez que veo su canal. Pero es muy interesante como hacen sus videos. Enseñan sin ser tan cuadrados, si no con tips de programación. Lo que si es que creo que su contenido es puro frontend.
    Me gustaría ver un canal muy parecido a lo que hacen pero con el contenido en backend o fullstacks

  • @drfcozapata
    @drfcozapata 3 роки тому

    ESPECTACULAR!!!!!!!
    Gracias, de corazón.
    Un abrazo inmenso desde Venezuela. Bendiciones.
    (compartido en mis grupos de developers de Telegram)

  • @cristhiandev4245
    @cristhiandev4245 3 роки тому +4

    Este video se merece un me encanta

  • @deborahsanchez7595
    @deborahsanchez7595 Рік тому

    Puedo decir con todas mis fuerzas que los amé (? estuve horas ayer rompiendome la cabeza y este video fue la gloria!

  • @TheProactiva
    @TheProactiva 2 роки тому

    Buenísimo!... Ahorré mucho tiempo!, les agradezco... Se ganaron un seguidor

  • @cristianalmanza5408
    @cristianalmanza5408 Рік тому

    El video que necesitava!!!necesitaba!!!! Muchas gracias 😁 y excelente canal.

  • @juanisidorogarcia1699
    @juanisidorogarcia1699 3 роки тому +1

    Buenísimo!, no conocía esa función! . El CSS lo dominio solo para salir del paso jajajaj. Me encantó! y me habéis caído estupendamente! Tenéis un suscriptor, un Like! y comentario! por supuesto!!
    Un saludo! Muchas gracias ^^

  • @joseluisrodriguez7675
    @joseluisrodriguez7675 Рік тому

    Pucha que maravilla, esto ahorra mucho tiempo, acabe de probar un par de cosas y excelente!!!!!!.

  • @AlejandroSaezM
    @AlejandroSaezM 3 роки тому +2

    Que gran video de postre me he dado, gracias por lo simple que lo dan, un abrazo que me suscribo y le doy like

  • @pabloesposito3794
    @pabloesposito3794 2 роки тому +1

    Ecelente el video, me sorprendio .me gusta usar css puro, recien estoy comenzando, uso tambien bootstrap porque dicen que las empresas me van a pedir que use esa libreria, pero si fuera por mi usaria css puro, me encanta

  • @diloes
    @diloes 2 роки тому

    Esto es maravilloso !!! Que gran descubrimiento. Muchas gracias.

  • @vladimirgutierrez7
    @vladimirgutierrez7 3 роки тому +3

    Ustedes usando Grid como cracks.. Gracias!

  • @carlosmontes7088
    @carlosmontes7088 Рік тому

    Esto es oro puro, mola un montón! Muchas gracias!

  • @kristelmanriquez8227
    @kristelmanriquez8227 Рік тому

    Me encantó!! Re fácil y queda muy responsivo todo 🥰

  • @ezequielgoma
    @ezequielgoma Рік тому +1

    Me encanta este vídeo ya he tenido que volver a verlo muchas veces para recordar jajajja Muchas gracias por la información

  • @gabriworld
    @gabriworld 3 роки тому +1

    Gracias por esto! "Está información vale millones". Saludos desde Argentina 🇦🇷

  • @cosmopolita2000
    @cosmopolita2000 3 роки тому

    WoW! Si no lo hubiero visto, hubiera dicho: imposible.
    Gracias para enseñarnoslo.

  • @alejandroIsea28
    @alejandroIsea28 2 роки тому

    mis respetos!, yo hice un proyecto y tiene como 6 Media Q jaja, se han ganado un nuevo suscriptor, saludos coders !

  • @PhosphorusMoscu-code
    @PhosphorusMoscu-code 3 роки тому

    Que grande Nuria profesando CSS Grid!

  • @LeoGagnone
    @LeoGagnone 2 роки тому

    Espectacular. ¡Han ganado un suscriptor!

  • @tapiafai
    @tapiafai 3 роки тому +4

    me ha petado la cabeza! Que bueno! Muchas gracias!! PD: sería muy interesante saber el tip para el font-size :)

  • @d-landjs
    @d-landjs 2 роки тому +7

    Hace poco ando dándole duro al css grid, aunque me falta mucho por aprender o hacerlo de la manera correcta, seria genial ver que hagan pagina web con cards o galeria de imagenes o carroseles o sliders :3

  • @gonzalobazan6144
    @gonzalobazan6144 Рік тому

    Un likazo gente!!! Muy bueno el video!!

  • @vizard626
    @vizard626 Рік тому

    Se ganaron el like con ese código, seguiré mirando la página y si encuentro un vídeo así de bueno se ganaron un suscriptor 👍🏼

  • @pabloelaldeano
    @pabloelaldeano 2 роки тому

    Pedazo de video, simplemente gracias!! Me habéis cambiado la vida jajajaj

  • @edjaen-ve
    @edjaen-ve 2 роки тому +1

    primer video que veo de ustedes y respondiendo al llamado de suscripcion y like de 3:00

  • @esteban7272
    @esteban7272 Рік тому

    No los conocia y con ese video di like y me suscribi ! Saludos desde Argentina !

  • @davidvillalobos926
    @davidvillalobos926 Рік тому

    Se han ganado un sub, le volaron la cabeza!

  • @nain5948
    @nain5948 2 роки тому

    ÉSTE ES EL MEJOR VIDEO DE UA-cam En LA HISTORIA DE NUESTRO PLANETA👏👏 jajaja díganme su dirección para mandarles un regalo por favor 🤣🤣 jaja en serio, bravo!

  • @nistraletras
    @nistraletras 3 роки тому +1

    De hecho, el like y el suscribe! qué genial! Gracias por el aporte!

  • @rogeliioburgos7848
    @rogeliioburgos7848 2 роки тому

    GENIAL YA HABIA VISTO Y APLICADO ESTA MAGIA AHORA QUE LO VEO DE NUEVO LO APLICARE DE NUEVO ME GUSTO MUY COMODO

  • @JafetMejia
    @JafetMejia 3 роки тому +10

    Estoy asombrado, recién me estoy familiarizando con grid, flex y estoy maravillado. Pero esto, esto flipa a otro nivel. Saludos desde MX. PS. Estoy cada vez más cerca de abandonar Bootstrap, que si bien me ha ayudado a crear varios layouts, siempre he sentido cierta limitación en cuanto al estilo y la carga recursiva en el servidor, en cuanto a los plugins creo que me seguirá funcionando.

  • @eamachaca
    @eamachaca 3 роки тому

    Se la ganaron el like y la suscripción 🖖. Primer video q veo de ustedes, tal vez me llegue a gustar un poco el front end 🖖🤣

  • @user-kk6wf5gf2y
    @user-kk6wf5gf2y 8 місяців тому

    Eso es nivel. .. de verdad que eres buena!

  • @user-ku3pg5vb9j
    @user-ku3pg5vb9j Рік тому

    Joder, buenísimo, queda igual de bien que con los media queries.

  • @morick4211
    @morick4211 3 роки тому

    Me encantó el video, más por favor.

  • @Cir0Demian77
    @Cir0Demian77 Рік тому +1

    Muy bueno, gracias por compartir sus conocimientos.

  • @widroz1548
    @widroz1548 2 роки тому +1

    Me ha servido muchísimo este vídeo, muchas gracias!!

  • @guillermomazzari4983
    @guillermomazzari4983 2 роки тому

    no estaba suscrito pero ahora ya, y campanita

  • @alekvga
    @alekvga 5 місяців тому

    Genial como siempre ❤

  • @carlosvasquez8436
    @carlosvasquez8436 3 роки тому

    Pasé 2 dias con un sistema medio complicado y estoy me va a servir para mejorarlo

  • @marioballestero5898
    @marioballestero5898 2 роки тому +10

    Me pasé 2h montando los media queries, los quite del grid y les coloqué estas propiedades y van mejor jeje

  • @joelventura76
    @joelventura76 3 роки тому +1

    Flex también se hace response e trabajado en varios casos en Flex para response y también elimina un poco los medias queries pero grid es una locura tremendo 👏👏

  • @joseenriquecrialesmontilla4084

    me quitaste una frustracion , y haces todo mucho mas logico y facil , gracias profesora eres una eminensia

  • @Alexxis2233
    @Alexxis2233 3 роки тому

    Excelente!! se ganaron un nuevo suscriptor!

  • @mariomh8
    @mariomh8 3 роки тому +1

    Me encanta vuestro contenido, últimamente estoy enganchado a los vídeos que estáis subiendo de css. Creo que las personas que seguimos usando librerías estilo bootstrap tailwind es por falta de conocimiento de css avanzado... Cada día tengo más ganas de quitar eses dependencias de mis proyectos y hacer a mano mis hojas de estilos.

    • @shubidhubduhu
      @shubidhubduhu 3 роки тому

      Y tmb xq tenenos deadlines q cumplir y unx usa las herramientas q puede
      No entiendo tanto haite

  • @danielcavero1430
    @danielcavero1430 2 роки тому

    Excelente chicos!
    Gracias por el tip 🙂

  • @JLonuz
    @JLonuz 3 роки тому +1

    Oye! yo ya he hecho varios videos de la plataforma y visto varios live aquí y en twitch y no estaba suscrita! PERO COMO!!! Gracias por decirlo en el video porque siempre puede haber alguien como yo XD

  • @alexcj9368
    @alexcj9368 3 роки тому

    Woow me encanta. Tomen su like.

  • @PabloGuerra-xc8vv
    @PabloGuerra-xc8vv Рік тому

    Sois unos grandes!!!!

  • @MetalxD117
    @MetalxD117 Рік тому +1

    Buenisimo!!!! Muchas gracias.

  • @arielchocobar9608
    @arielchocobar9608 Рік тому +1

    ES MAGIAAA, GRACIAS POR EL TIP CHICOS

  • @Edugoyo
    @Edugoyo 2 роки тому

    Me ha parecido genial !!! muchas gracias !!!

  • @iservisat
    @iservisat Рік тому

    Like y suscrito. Sin palabras. Muchas gracias!!!❤❤

  • @zmx_68
    @zmx_68 2 роки тому

    Primer video que veo y me impresiona :o, suscrito :]

  • @jesusfs8434
    @jesusfs8434 3 роки тому

    La verdad si se merece like el video

  • @gonzalezlillo
    @gonzalezlillo 3 роки тому

    ¡Buenísimo!

  • @joseluisrodriguez7675
    @joseluisrodriguez7675 Рік тому

    Genial, a aplicar entonces

  • @MoNkeyDpatrick
    @MoNkeyDpatrick 3 роки тому

    Que hermoso es grid ❤️

  • @luqqqqas
    @luqqqqas 3 роки тому

    dios que locura esto de grid; gracias a dios

  • @GardeniaRD
    @GardeniaRD 2 роки тому

    Ahi tienen mi like, mi suscripción y notificaciones activas. EXCELENTE APORTE!!

  • @davidaxelgonzalezflores3536

    Soy fan tu Nuria, que habilidad tiene al programar

  • @felixcomp
    @felixcomp 3 роки тому +70

    Me gustaría un vídeo con todos estos trucos, sin frameworks!

  • @plexor-dev
    @plexor-dev 3 роки тому

    Sabía que se podía hacer esto, pero estuve probando y no me salía. Me gusta el grid-auto-row: min-max(200px,auto) por ejemplo. Buen video!

  • @DavidTejedaMusic
    @DavidTejedaMusic Рік тому

    buenisimo! Este video se merece 1 millon de likes

  • @andresianorock
    @andresianorock 3 роки тому

    Nuria una grande!

  • @guipython
    @guipython Рік тому

    Muchas gracias por el vídeo saludos desde Brasil 💯

  • @wjmmk
    @wjmmk 3 роки тому

    Genial Gente... Una Chulada... 👍

  • @jonnyj.sanchezcastillo1558
    @jonnyj.sanchezcastillo1558 2 роки тому

    Super genial!! Suscrito!

  • @joecolas
    @joecolas 2 роки тому

    Excelente chicos. Con este tutorial he aprendido a no usar mas media queries. Gracias

  • @jago5101
    @jago5101 2 роки тому

    Se merece suscripción, jajaja me ayudo mucho

  • @renesteegers4236
    @renesteegers4236 3 роки тому

    Gracias por toda las cosas interesantes que comparten

  • @omarrosas5524
    @omarrosas5524 6 місяців тому

    super, que maravilla. gracias. Colombia.

  • @conradohernanvillagil2764
    @conradohernanvillagil2764 Рік тому

    Excelente video. Gracias.

  • @andresfelipepizoluligo1471
    @andresfelipepizoluligo1471 Рік тому

    Wow verdaderamente muchísimas gracias por el contenido, me ayudó mucho!!!

  • @hak3ncl
    @hak3ncl 3 роки тому

    Se lo ganaron! Excelente dato!

  • @zcoding8355
    @zcoding8355 3 роки тому +1

    Excelente vídeo!😎 Los felicito.!!! Consulta: Algunos de Ustedes ha desarrollado en UA-cam, algún un vídeo o tutorial sobre como hacer un menu de navegación utilizando CSS Grid y que a su vez, también sea totalmente responsivo, es decir que se convierta en lateral a medida que se reduce el tamaño del Viewport? Observación: El 99% de los vídeos que he visto en UA-cam sobre CSS Grid; al momento de realizar ejemplos o ejercicios para demostrar la tecnología, solo lo hacen utilizando imágenes; el 1% restante los hacen, pintando un layout básico: un Header (sin logo, ni contacto, y mucho menos menu de navegación), un footer, unas tres cajas (tal ves para dos asides y un main, etc.). En virtud de su experiencia, me gustaría ver un vídeo algo más complejo, tal como el que les sugerí. Gracias y disculpen cualquier molestia que les origine mi aspiración. Saludos!

  • @josea.chacon9526
    @josea.chacon9526 2 роки тому

    Madre, mía, con la tarde que me pasé la semana pasada para algo parecido, blasfemando con el CSS. Mi like ya lo tenéis

  • @AngelicaPerez-rk4bd
    @AngelicaPerez-rk4bd Рік тому

    Me ahorraste mucho código
    ¡Gracias!

  • @juandiazdiez5574
    @juandiazdiez5574 2 роки тому

    Gracias!! Me ha petado la mente!!!! 👍​👍​👍​👍​

  • @c4camilo
    @c4camilo 3 роки тому

    Nuria, te amo

  • @alanpaz8832
    @alanpaz8832 Рік тому

    Que bien video, gracias! 👏

  • @aldorsan
    @aldorsan 2 роки тому

    Genios ambos

  • @SofiiBell
    @SofiiBell 6 місяців тому

    Muchas gracias por compartir estos conocimientos ♥