🤯 MEDIA QUERIES en RESPONSIVE WEB DESIGN 🚀 | Eduardo Fierro Pro

👉Hoy nos toca ver TODO lo relacionado con las MEDIA QUERY o MEDIA QUERIES: Desde que es una media query o media queries hasta cómo se escribe una media query, que hace @media en CSS, que es el media screen y cómo se usa una media query y te cuento trucos para hacer una web Responsive.
🔖 TODOS los vídeos de esta SERIE:
• 🚀 TODO sobre RESPONSIV...
✓ Breakpoints en Responsive Design • ✅ BREAKPOINTS RESPONSI...
✓ TEORIA sobre MEDIA QUERIES en 2021 • 🤯 MEDIA QUERIES en RES...
✓ CÓMO hacer MEDIA QUERIES EN CSS • 🔴CÓMO hacer MEDIA QUER...
Si te ha gustado el vídeo dale a like, suscríbete y ¡dale a la campanita! 😊
_______
📹Otros vídeos de mi canal
😊 Vídeos recomendados • 👉Vídeos recomendados
🚀ROADMAP Desarrollo WEB • 🔎ROADMAP de un DESARRO...
🤯 Explicando Web de forma diferente • 😱Explicando conceptos:...
🙇🏻 Construyendo un Slider, Acordeón, Tabs... • 🤯 Construyendo un Carr...
_______
📚¿Estás buscando un Curso, Máster o Bootcamp sobre desarrollo web?
Soy profesor en la escuela CEI donde imparto Cursos y Másters sobre desarrollo web donde puedes obtener un descuento del 5% en el precio del curso usando el código embajador.eduardofierro
¡Pide información sobre los cursos donde soy profesor desde este enlace!
👉cei.es/?ref=eduardofierropro
_______
✅ Directos en Twitch: / eduardofierropro
✓ ¡Apóyame en KZbin! kzbin.info...
✓ Trucos rápidos en TikTok / eduardofierro.pro
✓ Podcast sobre desarrollo web anchor.fm/eduardofierropro
✓ Programación en Instagram / eduardofierro.pro
✓ Códigos para descargar en Github github.com/eduardofierropro
✓ Noticias sobre web en Twitter / 1325827794627129344
✓ Mi web eduardofierro.pro
_______
🔥Enlaces a productos de mi setup
🖥 Samsung Space Monitor 27" amzn.to/3mABk0R
🖥 LG Ultrawide 25" amzn.to/3XrMwOp
💪 Brazo EarGear amzn.to/3YPPnBF
🖥 Mac Studio M1 Max amzn.to/3xlwqez
💻 MacBook Pro 15" 2019 amzn.to/2XEdeGL
⚡️ Mesa elevable Flexispot amzn.to/3xlwqez
⌨️ HHKB Hybrid Type-S amzn.to/3xlwqez
⌨️ Logitech G915 amzn.to/2Tzy1da
🖱 Logitech MX Master 2 amzn.to/2WZlUZa
💡 Elgato Key Light Air amzn.to/2TzxPus
💡 Elgato Right Light amzn.to/3tWoM62
🎛 Elgato Stream Deck XL amzn.to/3d1cy4n
🎙 Elgato Wave 3 amzn.to/2QsPLbU
🎙 Elgato Wave Pop Filter amzn.to/33ONkU1
✔️ Elgato Soporte Teléfono amzn.to/2RTZatj
🎧 Beats Wireless Studio 3 amzn.to/3YOtDWT
✔️ Corsair ST100 RGB premium amzn.to/3d3hiZY
📱 iPhone 13 Pro amzn.to/3lsPRPI
📱 Motorola G amzn.to/2TzYcjO
📱 Samsung M11 amzn.to/3uTwNKh
🪑 Drift dr500bamzn.to/3kaEHtE
Enlaces en los productos en mi web: eduardofierro.pro/workspace
______
Psss... Si has llegado hasta aquí eres un auténtico CRUCK de la vida. ¿Vemos cuántos somos poniendo "de frontends!!" en los comentarios? 😏
______
Capítulos:
00:00 Introducción
00:27 Lo esencial de las media queries
01:31¿Que es una media query?
02:21 ¿Cómo se escribe una media query?
03:33 ¿Qué hace @media en CSS?
04:29 ¿Qué es el media screen?
05:45 ¿Cómo funciona el @media?
07:01 ¿Cómo se usa una media query?
07:55 ¿Cómo usar el @media en HTML?
08:35 ¿Cómo poner media en picture?
09:25 ¿Qué es una etiqueta meta viewport?
09:58 Trucos para hacer una web Responsive
11:07 ¿Cómo comprobar mi diseño responsive?
11:39 ¿Cómo probar responsive en Chrome?
12:00 ¿Cómo probar mi web en el móvil?

[@EduardoFierroPro]

✓ Breakpoints en Responsive Design kzbin.info/www/bejne/lXa2nIGMrr2dmrs ✓ TEORIA sobre MEDIA QUERIES en 2021 kzbin.info/www/bejne/goGziamIftKVkKc ✓ CÓMO hacer MEDIA QUERIES EN CSS kzbin.info/www/bejne/p6vciJKQm5WVmM0 🔥 CONSTRUYE tu PORTAFOLIO de DESARROLLADOR WEB 👉 kzbin.info/aero/PLJpymL0goBgELkXg-XumuHwS_jijzosF8 🙀 ROADMAP de un DESARROLLADOR WEB 👉 kzbin.info/aero/PLJpymL0goBgFzvCuhEJJ29-x1H_Uo5Esv ¡Dale a like y suscríbete si te ha gustado! 😊

[@hectoryegre7043]

Reportándome por aquí

[@belenappez323]

este video es maravilloso! muchas gracias!

[@enzoespinola930]

Genial la manera y el diseño a la hora de explicar. Por más vídeos así por favor 🙏💪💪

[@edadvega2265]

Me suscribo ! Muchas gracias, de verdad muchas gracias por tomarte el trabajo de hacer los videos con esta info y subirlos. Soy programador en formación y el responsive es algo que se me había hecho muy difícil de comprender hasta este momento, la explicación ha sido fenomenal. Saludos desde Medellín - Colombia !

[@EduardoFierroPro]

Me alegro mucho Edwin!! Ahora a practica a fuego! 😊

[@estvrank]

Tienes vídeos muy buenos. No te complicas explicando mil cosas a la vez, sino realmente lo necesario e importante, me subscribo :D

[@EduardoFierroPro]

Muchas gracias EsTV Rank!! 😊

[@AngelRamirez82]

Que grande eres , gracias por hacer contenido de este tipo, a mi me estás ayudando mucho. 👍🏼

[@EduardoFierroPro]

Muchísimas gracias a ti por el apoyo Angel!! 😊

[@F3RC4O]

Gracias por compartir tu conocimiento crack! Te mereces más seguidores!!

[@EduardoFierroPro]

Muchas gracias F3RC40!! Si el contenido gusta y se comparte llegarán! 😊

[@gladiscorrea3892]

muy buen video. Quiero ver mas

[@anairinaku]

Muchas gracias por las explicaciones tan claras Eduardo! ya estaba enloqueciendo con el responsive design. Estoy ingresando a este mundo de la programación de a poco y la explicación que me había dado mi profesora sobre el tema, me dejó muchas dudas y pocas certezas, ahora comprendí mucho mejor.

[@EduardoFierroPro]

Pues espero que ahora te resulte más fácil y con los conceptos más claros! Muchas gracias Ana!! 😊

[@sebastianbernal9387]

Eduardo que buen canal, aportas mucho valor, me ayudas mucho a entender mejor CSS, Mil gracias Crack! Nuevo Sub .

[@EduardoFierroPro]

Muchísimas gracias por suscribirte Sebastian!! 😊

[@outletshelssy]

Excelente contenido

[@samuelnavas567]

Tremendo!!! eres un crack!

[@EduardoFierroPro]

Tú si que eres un crack 😊

[@codegerstec]

Exelente me gusto así de rápido y preciso un suscriptor mas saludos y éxitos crack

[@EduardoFierroPro]

Muchas gracias LINCOLN! 😊

[@hectorgancedograde5137]

Muchas gracias por la explicación Eduardo

[@EduardoFierroPro]

Gracias a ti Hector por el comentario 😊

[@aabonillam]

Excelente información #crack Gracias por el contenido..

[@EduardoFierroPro]

Muchas gracias Andrés!! 😊

[@raulgallegos240]

wow! saludos desde mexico! me sorprende que no tengas mas seguidores! Felicidades por tu trabajo tan excelente!

[@EduardoFierroPro]

Muchas gracias por tu apoyo Raul! Vamos poco a poco 😊

[@davidalejandroballen4223]

Que buen video. Que Dios te bendiga!!

[@EduardoFierroPro]

Muchas gracias David!! 😊

[@ivar.G19]

Que bien explicas, gracias por compartir tu conocimiento . Saludos de Argentina!!!

[@EduardoFierroPro]

Me alegra que te sirva la explicación!! Muchas gracias por el apoyo Ivar! 😊

[@webdeveloper8675]

muchisimas gracias por tus videos estan expectaculares, me puedes decir si hicistes el video de las imagenes por fa? gracias...

[@Cibergroup]

Reportandome jejeje saludos

[@EduardoFierroPro]

Creo que soy muy boomer 😅 qué significa? 😗

[@Cibergroup]

@@EduardoFierroPro jejeje profe reportandome significa que estoy presente en la clase como cuando te llaman a lista en el colegio

[@Cibergroup]

@@EduardoFierroPro y no eres boomer solo que soy de colombia y aqui se maneja un jerga mas distinta para expresarce

[@slashgo6209]

reportándome por aquíí!!

[@EduardoFierroPro]

@@Cibergroup Aaaah pueees te digo que ya no tienes la falta de clase 😏

[@eltiosam3129]

Buena serie bro :'3 estaba retocando mi página y se rompió xD es que solo tenía 2 breakpoints, y me doy cuenta que necesito más para que se vea correcto en distintos dispositivos :3

[@Jjosemanuel_05]

Muchas graciasss

[@EduardoFierroPro]

Muchas gracias a tí por el comentario y el apoyo Jose 😊

[@facundodtd]

Excelente video y contenido en general. Tengo una duda, en lo personal me gusta realizar los media queries en una hoja aparte del css por temas de comodidad, podrías decirme si es algo recomendable o no, o si da igual y no influye en nada hacer esto?, saludos y gracias de antemano

[@mancapitan5261]

Vaya currada tecnica de videos q te has marcado, muy bueno y ahora la duda en Vs code q es mejor el plugin oficial live server de microsoft o el liveServer q se instala la mayoria ese del logo verde, thanks

[@antonioaquinodelaluz5737]

Una duda entonces hoy en día cuales serian los puntos de quiebre que tendría un proyecto web con vista para moviles?

[@carthuncat2787]

12:15 eso es cierto, ayer subí un pequeño proyecto a modo de prueba a la web, y me di con la sorpresa de que las letras se veían muy pequeñas y una parte del media query no funcionaba.

[@tomasgarcia6030]

Yo recomiendo colocar los media queris debajo de cada selector, clase, etc. asi no tengo que subir y bajar todo mi documento. ademas que le da mas sentido

[@EduardoFierroPro]

Es otra forma y muy utilizada también! Yo uso SASS y un mixin que al compilarse genera el @media debajo del selector como cuento aquí 😊👉 kzbin.info/www/bejne/Y4etl5iEgZKJfpI

[@tomasgarcia6030]

@@EduardoFierroPro lo veré :) Y por cierto felicitaciones, tus videos son de demasiada ayuda :D

[@samuelfigueroa4415]

Hola Eduardo una pregunta, es necesario usar mediaquery para monitores mas grandes o solo en teléfonos móviles??

[@DhaniverhMugiwaramugiwara]

Gracias!

[@EduardoFierroPro]

A tí Dhannibel Reyes! 😊

[@DhaniverhMugiwaramugiwara]

@@EduardoFierroPro me sirvió mucho, he visto como 10 videos de media queries, y ninguno me explicaba el porqué aún poniendo bien la sintaxis del media, no me funcionaba cuando probaba con la herramienta de desarrollador del navegador, todo era porque no había puesto “viewport” en la etiqueta meta. Me gustaría tener un contacto más cercano contigo.

[@alojatedemente]

hable del font-face

[@cesarenriquerosalesricalde321]

Genial eh 😊

[@EduardoFierroPro]

Muchas gracias cesar! 😊

[@katerineardilacaicedo4004]

muy bien explicado el video, pero tengo una pequeña duda , en el momento que estabas explicando en como usar media query en la parte donde suscribes el codigo vi que colocaste .h2 y lo que me han enseñado que las etiquetas no llevan puntos, solamente las clases o los id, por fa me quitarias esa duda.ya que estoy en aprendizaje y quiero tener todo bien claro . muchas gracias.

[@jorgecclemente]

Muy buen video con contenido completo, claro y directo. Como dice el amigo F3RC4O poco se te conoce para las curradas que te pegas 🙄 Por cierto, ya he visto los otros videos que recomiendas y no creo que con el pelo largo parezcas un Backstreet Boy 🙄 ahora, Backstreet Girl...🤔 sí 😬🤣

[@EduardoFierroPro]

Muchas gracias Jorge!!! 😊😊 con respecto al pelo largo …. 😂😂

[@jorgecclemente]

@@EduardoFierroPro ha sido un placer... guapetona 💁🏻‍♀️🤣

[@SonGoku-pc7jl]

ayer aprendí lo de @font-face y luego comentas lo de display swap carga default... tienes video del tema? :) gracias

[@EduardoFierroPro]

Aún no tengo vídeo pero se vendrá!! 😊

[@nychu4]

Buenas mi pagina web se ve perfecta en modzilla pero al visualizarla en crhome el grid y algunos modulos se estiran y bugean , he buscado pero no encuentro nada concreto que me oriente para darcon la causa y poder solucionarlo , intuyo que puede ser alguna incompatibilidad de alguna sintaxis o tecnologia como grid o alguna carachteristica de las mismas , te agradeceria la ayuda , un saludo cruck ;).

[@mordorr1958]

Haz un vídeo sobre imágenes Bro

[@EduardoFierroPro]

Justo explico imágenes Responsive aquí 👉kzbin.info/www/bejne/p6vciJKQm5WVmM0

[@luisramirez7361]

Vaya, que lo de la prueba real si que es todo una odisea, estoy sufriendo un poco con el responsive porque no solo basta esa prueba de emulación con el navegador (ahí pintaba todo bien), si no también el uso de diversos navegadores móviles... Hoy me percate que que mi proyecto en el lavegador de duckduck, se ve tal cual lo diseñe, pero me dió curiosidad de verlo en Chrome, en el navegador por defecto del móvil, brave y firefox y vaya desastre se me ah liado .-. Además tengo dos monitores que aparentemente son de la misma resolución (1366*720) y en un monitor se ve bien y cuando la paso al secundario que se ah comido algunos trozos de padding tsss luego me prestan otro móvil y que le falta espacio por rellenar eh intentado poner diversos break points pero no han sido suficientes, son un montón .-. intentaré en práctica lo de min-height, en fin solo quería liberar mi frustración me ah servido :')

[@geografiaeducativa2727]

Saludos, es posible hacer responsive sin usar @media ? Y como se podría hacer.

[@EduardoFierroPro]

Buenas crack!! Pues dependiendo de dónde quieras aplicarlo: tipografía, cajas... hay varias técnicas tanto en Grid como en textos... 😊

[@sebastianmedina5106]

¿que dices en la intro? groups?

[@EduardoFierroPro]

digo crucks! xD

[@sebastianmedina5106]

@@EduardoFierroPro jaja significa como amigos? Oye muy buenos tus vídeos, se aprende mucho a un muy buen ritmo, a un ritmo ideal donde uno no se aburre ni se pierde, muchas gracias por todo tu esfuerzo ^^

[@johanaf.5840]

Hola Eduardo, me gustan tus vídeos y agradezco tu información. Lo único que no me gusta del canal es que cuando dices "este es el segundo de tres vídeos..." no me es fácil encontrar los otros dos. Dices que dejas enlaces pero no me es fácil reconocerlos o no los veo porque tienes demasiados links y me dispersa un poco. Solo hago este comentario por ayudar o que me ayudes a facilitar esto, muchas gracias y es con todo mis respetos.

[@EduardoFierroPro]

Hola Johana, tienes toda la razón. Pienso en actualizarlo pero después de me olvida. Mañana corrijo los enlaces de los vídeos y aviso por un comentario aquí 😊 gracias por el comentario!

[@EduardoFierroPro]

Ya están revisados casi todos los vídeos del canal y he puesto tarjetas y en las descripciones los enlaces a las listas de reproducción 😊

[@johanaf.5840]

@@EduardoFierroPro muchas gracias, espero que te siga yendo genial. Eres muy amable 🤗👏👏👏👏y tu contenido muy didáctico 💪👍👏👏

[@EduardoFierroPro]

Muchas gracias a ti! Ahora revisaré algunos vídeos por si me he dejado algo. Un saludo! 😊

[@eddiemora5333]

Haga el vídeo del @font-face