Тёмный

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

CodelyTV - Redescubre la programación
Подписаться 150 тыс.
Просмотров 176 тыс.
50% 1

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: ru-vid.com?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

Наука

Опубликовано:

 

21 июн 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 508   
@CodelyTV
@CodelyTV 3 года назад
¿Eres team media queries, automagia de grid, o Bootstrap? 🤔
@raulastete321
@raulastete321 3 года назад
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 года назад
@@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 года назад
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 года назад
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
@manuelperezetchegaray1561
@manuelperezetchegaray1561 2 года назад
Les agradezco mucho, me salvaron del caos de una presentación a ultimo momento. Los quiero
@juanpablocoronacorona8178
@juanpablocoronacorona8178 2 года назад
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 🥺❤️
@moltfreaky
@moltfreaky 2 года назад
Sois unos megacracks. Me habéis salvado la vida y no lo olvidaré!😍
@horacioabitu
@horacioabitu 2 года назад
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! 💪​💪​🇦🇷​👍​
@kyre221
@kyre221 3 года назад
Como siempre facilitándome la vida 💛 gracias nuria y equipo codely.
@tonsofcode2478
@tonsofcode2478 3 года назад
Justo lo que buscaba, evitarme el innecesario uso de media querys, gracias totales.
@jonathan_bestprime
@jonathan_bestprime 2 года назад
Vaya magia esta linea que acabais de compartir, me ha reducido bastante trabajo, os quiero
@joseluisrodriguez7675
@joseluisrodriguez7675 Год назад
Pucha que maravilla, esto ahorra mucho tiempo, acabe de probar un par de cosas y excelente!!!!!!.
@TheProactiva
@TheProactiva 2 года назад
Buenísimo!... Ahorré mucho tiempo!, les agradezco... Se ganaron un seguidor
@deborahsanchez7595
@deborahsanchez7595 Год назад
Puedo decir con todas mis fuerzas que los amé (? estuve horas ayer rompiendome la cabeza y este video fue la gloria!
@nancysilva9582
@nancysilva9582 2 года назад
Gracias. Son los mejores en responsive design que he conseguido
@albertogranillo3045
@albertogranillo3045 3 года назад
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)
@ezequielgoma
@ezequielgoma Год назад
Me encanta este vídeo ya he tenido que volver a verlo muchas veces para recordar jajajja Muchas gracias por la información
@pabloesposito3794
@pabloesposito3794 2 года назад
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
@cristianalmanza5408
@cristianalmanza5408 Год назад
El video que necesitava!!!necesitaba!!!! Muchas gracias 😁 y excelente canal.
@kristelmanriquez8227
@kristelmanriquez8227 Год назад
Me encantó!! Re fácil y queda muy responsivo todo 🥰
@charlinezequiel8259
@charlinezequiel8259 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 💪👌
@gabriworld
@gabriworld 2 года назад
Gracias por esto! "Está información vale millones". Saludos desde Argentina 🇦🇷
@sebastiangomez2412
@sebastiangomez2412 3 года назад
Ustedes son como la respuesta que uno nunca está buscando pero es lo que uno necesita saber hahahah
@carlosmontes7088
@carlosmontes7088 Год назад
Esto es oro puro, mola un montón! Muchas gracias!
@diloes
@diloes 2 года назад
Esto es maravilloso !!! Que gran descubrimiento. Muchas gracias.
@juanisidorogarcia1699
@juanisidorogarcia1699 2 года назад
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 ^^
@AlejoRomero69
@AlejoRomero69 3 года назад
Wow esta chica es increíble! Mil gracias.
@cosmopolita2000
@cosmopolita2000 3 года назад
WoW! Si no lo hubiero visto, hubiera dicho: imposible. Gracias para enseñarnoslo.
@AlejandroSaezM
@AlejandroSaezM 3 года назад
Que gran video de postre me he dado, gracias por lo simple que lo dan, un abrazo que me suscribo y le doy like
@pabloelaldeano
@pabloelaldeano Год назад
Pedazo de video, simplemente gracias!! Me habéis cambiado la vida jajajaj
@germanslobo
@germanslobo 2 года назад
Gracias. Me has ahorrado un millón de años.
@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 👍🏼
@cristhiandev4245
@cristhiandev4245 3 года назад
Este video se merece un me encanta
@Cir0Demian77
@Cir0Demian77 Год назад
Muy bueno, gracias por compartir sus conocimientos.
@tapiafai
@tapiafai 3 года назад
me ha petado la cabeza! Que bueno! Muchas gracias!! PD: sería muy interesante saber el tip para el font-size :)
@esteban7272
@esteban7272 Год назад
No los conocia y con ese video di like y me suscribi ! Saludos desde Argentina !
@LeoGagnone
@LeoGagnone 2 года назад
Espectacular. ¡Han ganado un suscriptor!
@vladimirgutierrez7
@vladimirgutierrez7 3 года назад
Ustedes usando Grid como cracks.. Gracias!
@davidvillalobos926
@davidvillalobos926 Год назад
Se han ganado un sub, le volaron la cabeza!
@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
@PhosphorusMoscu-code
@PhosphorusMoscu-code 3 года назад
Que grande Nuria profesando CSS Grid!
@widroz1548
@widroz1548 2 года назад
Me ha servido muchísimo este vídeo, muchas gracias!!
@JafetMejia
@JafetMejia 2 года назад
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.
@andresfelipepizoluligo1471
@andresfelipepizoluligo1471 Год назад
Wow verdaderamente muchísimas gracias por el contenido, me ayudó mucho!!!
@alejandroIsea28
@alejandroIsea28 2 года назад
mis respetos!, yo hice un proyecto y tiene como 6 Media Q jaja, se han ganado un nuevo suscriptor, saludos coders !
@SofiiBell
@SofiiBell 5 месяцев назад
Muchas gracias por compartir estos conocimientos ♥
@d-landjs
@d-landjs 2 года назад
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
@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 🖖🤣
@joelventura76
@joelventura76 3 года назад
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 👏👏
@nistraletras
@nistraletras 3 года назад
De hecho, el like y el suscribe! qué genial! Gracias por el aporte!
@arielchocobar9608
@arielchocobar9608 Год назад
ES MAGIAAA, GRACIAS POR EL TIP CHICOS
@user-kk6wf5gf2y
@user-kk6wf5gf2y 6 месяцев назад
Eso es nivel. .. de verdad que eres buena!
@Naimadmdp
@Naimadmdp 3 года назад
Oh Dios es desperdiciado mi vida!!! Jajaja muchas gracias voy a meterle a esto.
@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!
@user-ku3pg5vb9j
@user-ku3pg5vb9j Год назад
Joder, buenísimo, queda igual de bien que con los media queries.
@nain5948
@nain5948 2 года назад
ÉSTE ES EL MEJOR VIDEO DE RU-vid En LA HISTORIA DE NUESTRO PLANETA👏👏 jajaja díganme su dirección para mandarles un regalo por favor 🤣🤣 jaja en serio, bravo!
@davidaxelgonzalezflores3536
Soy fan tu Nuria, que habilidad tiene al programar
@AngelicaPerez-rk4bd
@AngelicaPerez-rk4bd Год назад
Me ahorraste mucho código ¡Gracias!
@germanbaena6579
@germanbaena6579 10 месяцев назад
Ya di mi "Like" y estoy "Suscrito"; ahora nos debes unos buenos ejemplos de Clamp CSS para "font-size" 😍
@guipython
@guipython Год назад
Muchas gracias por el vídeo saludos desde Brasil 💯
@MetalxD117
@MetalxD117 Год назад
Buenisimo!!!! Muchas gracias.
@joecolas
@joecolas Год назад
Excelente chicos. Con este tutorial he aprendido a no usar mas media queries. Gracias
@alekvga
@alekvga 4 месяца назад
Genial como siempre ❤
@iservisat
@iservisat Год назад
Like y suscrito. Sin palabras. Muchas gracias!!!❤❤
@juandiazdiez5574
@juandiazdiez5574 2 года назад
Gracias!! Me ha petado la mente!!!! 👍​👍​👍​👍​
@Edugoyo
@Edugoyo 2 года назад
Me ha parecido genial !!! muchas gracias !!!
@morick4211
@morick4211 2 года назад
Me encantó el video, más por favor.
@AndresSaaN
@AndresSaaN 3 года назад
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 😂
@EverAfterBreak2
@EverAfterBreak2 3 года назад
x2 jajajajaaja
@tergiverzado123
@tergiverzado123 2 года назад
same
@disenodigital100
@disenodigital100 11 месяцев назад
Encontré el video en el momento indicado 😅
@luqqasflores905
@luqqasflores905 2 года назад
dios que locura esto de grid; gracias a dios
@gonzalobazan6144
@gonzalobazan6144 Год назад
Un likazo gente!!! Muy bueno el video!!
@JLonuz
@JLonuz 3 года назад
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
@jmdev4583
@jmdev4583 Год назад
Excelente, muchas gracias
@jago5101
@jago5101 2 года назад
Se merece suscripción, jajaja me ayudo mucho
@Alexxis2233
@Alexxis2233 2 года назад
Excelente!! se ganaron un nuevo suscriptor!
@FerWolf-zp5qp
@FerWolf-zp5qp Год назад
Excelente información muchas gracias🎉
@alexfranciscanos4039
@alexfranciscanos4039 7 месяцев назад
Exelente video, deberian hacer mas.
@joseenriquecrialesmontilla4084
me quitaste una frustracion , y haces todo mucho mas logico y facil , gracias profesora eres una eminensia
@omarrosas5524
@omarrosas5524 4 месяца назад
super, que maravilla. gracias. Colombia.
@zcoding8355
@zcoding8355 3 года назад
Excelente vídeo!😎 Los felicito.!!! Consulta: Algunos de Ustedes ha desarrollado en RU-vid, 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 RU-vid 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!
@DavidTejedaMusic
@DavidTejedaMusic Год назад
buenisimo! Este video se merece 1 millon de likes
@danielcavero1430
@danielcavero1430 2 года назад
Excelente chicos! Gracias por el tip 🙂
@GardeniaRD
@GardeniaRD Год назад
Ahi tienen mi like, mi suscripción y notificaciones activas. EXCELENTE APORTE!!
@FeedTheFreak
@FeedTheFreak 3 года назад
Di que si!, canela en rama. Tengo mucha curiosidadpor las container queries que van a integrar proximamente, creo que tienen muchas posibilidades de convertirse en el standard de responsive. Aunque aun este en desarrollo me gustaria verlo explicado por vosotros.
@PabloGuerra-xc8vv
@PabloGuerra-xc8vv 10 месяцев назад
Sois unos grandes!!!!
@renesteegers4236
@renesteegers4236 3 года назад
Gracias por toda las cosas interesantes que comparten
@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
@carlosvasquez8436
@carlosvasquez8436 3 года назад
Pasé 2 dias con un sistema medio complicado y estoy me va a servir para mejorarlo
@conradohernanvillagil2764
@conradohernanvillagil2764 Год назад
Excelente video. Gracias.
@joseluisrodriguez7675
@joseluisrodriguez7675 Год назад
Genial, a aplicar entonces
@alanpaz8832
@alanpaz8832 11 месяцев назад
Que bien video, gracias! 👏
@alejandroalas3210
@alejandroalas3210 2 года назад
Piel de gallina con esta magia :-) sois los Ptos amos...
@Lukeeando
@Lukeeando 2 года назад
Oh no, estoy haciendo el curso de bootsrap y con lo que vi recien, no me dan ganas de seguir mas jajaj esto es genial
@alexwakeup7098
@alexwakeup7098 11 месяцев назад
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
@sebastianestrada1311
@sebastianestrada1311 4 месяца назад
Y el texto que se esta ocultando como lo arregla?
@guillermomazzari4983
@guillermomazzari4983 2 года назад
no estaba suscrito pero ahora ya, y campanita
@hiimifranco2840
@hiimifranco2840 Год назад
Muchas gracias!
@MoNkeyDpatrick
@MoNkeyDpatrick 3 года назад
Que hermoso es grid ❤️
@cristianjosequizpicoraisac5454
@cristianjosequizpicoraisac5454 3 года назад
Me parece muy interesante gracias por la informacion
@JCBILBAOC
@JCBILBAOC Год назад
no sabía esto, me suscribo👍
@esnake123
@esnake123 2 года назад
Gracias por la info!
@darckingstudio9214
@darckingstudio9214 3 года назад
Creo que tengo la vida resuelta 🤩
@logospod-cast9574
@logospod-cast9574 2 года назад
Saludos, gracias por el video
@omarmartinez9713
@omarmartinez9713 2 года назад
Primer video que veo y me impresiona :o, suscrito :]
Далее
Por qué NO has de utilizar z-index: 9999
13:11
Просмотров 15 тыс.
ЭКСПРЕСС разбор стиралки
00:39
Просмотров 907 тыс.
😈Maquetado con GRID explicado como nunca antes!
12:01
El frontend es demasiado complicado
9:04
Просмотров 59 тыс.
Aprende Ollama en menos de 8 minutos!
7:57
Просмотров 8 тыс.
Learn web development as an absolute beginner
12:57
Просмотров 2,8 млн
10 CSS Pro Tips - Code this, NOT that!
9:39
Просмотров 2,1 млн
ЛУЧШИЙ ПОВЕРБАНК ОТ XIAOMI
0:39
Просмотров 16 тыс.