CursosEmpresasBlogLiveConfPrecios

Funciones para media queries

Clase 40 de 42 • Curso de Preprocesadores CSS

Clase anteriorSiguiente clase

Contenido del curso

Introducción
  • 1
    Qué aprenderás sobre preprocesadores

    Qué aprenderás sobre preprocesadores

    02:39
  • 2
    Conceptos básicos de CSS

    Conceptos básicos de CSS

    05:13
  • 3
    Selectores de CSS

    Selectores de CSS

    11:43
Evolución de las Tecnologías de Front-End
  • 4
    Introducción a los Preprocesadores

    Introducción a los Preprocesadores

    05:37
  • 5
    Metodologías para estructurar código

    Metodologías para estructurar código

    04:07
  • 6
    Introducción a BEM

    Introducción a BEM

    07:26
  • 7
    Guías para creación y mantenimiento de código

    Guías para creación y mantenimiento de código

    06:59
  • 8
    Instalación de herramientas de compilación

    Instalación de herramientas de compilación

    04:03
Preprocesadores para HTML
  • 9
    Introducción a Pug

    Introducción a Pug

    01:02
  • 10
    Sintaxis

    Sintaxis

    12:39
  • 11
    Interpolación

    Interpolación

    07:19
  • 12
    Variables

    Variables

    07:11
  • 13
    Condicionales y Loops

    Condicionales y Loops

    06:25
  • 14
    Mixins

    Mixins

    08:57
  • 15
    Includes y Extends

    Includes y Extends

    07:49
  • 16
    Finalizando ejercicio de Landing Page

    Finalizando ejercicio de Landing Page

    08:59
Less
  • 17
    Introducción a Less

    Introducción a Less

    13:06
  • 18
    Anidamiento e imports

    Anidamiento e imports

    07:10
  • 19
    Variables

    Variables

    10:19
  • 20
    Funciones

    Funciones

    07:59
  • 21
    Mixins

    Mixins

    12:09
  • 22
    Finalizando ejercicio de página de artículos

    Finalizando ejercicio de página de artículos

    06:21
Sass
  • 23
    Introducción a Sass

    Introducción a Sass

    12:29
  • 24
    Variables

    Variables

    12:32
  • 25
    Imports y Extends

    Imports y Extends

    12:18
  • 26
    Mixins

    Mixins

    06:06
  • 27
    Funciones

    Funciones

    11:44
  • 28
    Condicionales y Loops

    Condicionales y Loops

    10:06
  • 29
    Finalizando ejercicio de perfil de usuario

    Finalizando ejercicio de perfil de usuario

    07:57
Stylus
  • 30
    Introducción a Stylus

    Introducción a Stylus

    11:06
  • 31
    Variables

    Variables

    10:32
  • 32
    Mixins

    Mixins

    09:54
  • 33
    Funciones

    Funciones

    11:03
  • 34
    Condicionales y Loops

    Condicionales y Loops

    10:32
Desarrollo del proyecto Platzi Games
  • 35
    Introducción al proyecto

    Introducción al proyecto

    02:49
  • 36
    Plantillas modulares con PUG: Header

    Plantillas modulares con PUG: Header

    10:41
  • 37
    Plantillas modulares con PUG: Footer

    Plantillas modulares con PUG: Footer

    11:15
  • 38
    Grid System con Sass

    Grid System con Sass

    11:36
  • 39
    Mixins para manejo de fuentes responsivas

    Mixins para manejo de fuentes responsivas

    12:44
  • 40
    Funciones para media queries

    Funciones para media queries

    12:19
  • 41
    Finalizando el proyecto

    Finalizando el proyecto

    10:01
Conclusiones y Cierre
  • 42
    Conclusiones y Cierre

    Conclusiones y Cierre

    01:24
    Stiven Jiménez

    Stiven Jiménez

    student•
    hace 6 años

    🙌Aquí les dejo documentación de como usar queries sin el mixin de la clase http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32 📌siempre es mejor saber muchas formas de hacer lo mismo "con los mixins es mas rápido "👌

      Santiago Restrepo

      Santiago Restrepo

      student•
      hace 5 años

      De gran utilidad, gracias bro ✍🏼

      Addi Alberto Salazar Espinosa

      Addi Alberto Salazar Espinosa

      student•
      hace 5 años

      Muchas gracias! :)

    Jhonatan David Ibarra Lavado

    Jhonatan David Ibarra Lavado

    student•
    hace 5 años

    woooooooooooo,e sto esta un retroo chimbita 🙈 🙉

    Carlos Rodríguez

    Carlos Rodríguez

    student•
    hace 5 años

    Se recomienda que las media queries sea un file css totalmente aparte, es decir un sass solamente para cada break donde genere un css diferente y als medias llaamrlas desde el html en el head.

      Kevin Andres Curruchich Xocop

      Kevin Andres Curruchich Xocop

      student•
      hace 4 años

      Muy cierto, esto para que solo se descarge la hoja de estilos dependiendo el tamaño de pantalla que necesitemos 👌

      Dennis Bejar Challco

      Dennis Bejar Challco

      student•
      hace 4 años

      Esto tambien lo recordé, creo que siguiendo esa linea el mixin no aplica bien, tendria que ser con un mixin diferente

    John Edward León Muñoz

    John Edward León Muñoz

    student•
    hace 5 años

    Técnicas de media queries con SASS: https://css-tricks.com/approaches-media-queries-sass/

      Addi Alberto Salazar Espinosa

      Addi Alberto Salazar Espinosa

      student•
      hace 5 años

      Gracias! c:

      Kevin Andres Curruchich Xocop

      Kevin Andres Curruchich Xocop

      student•
      hace 4 años

      Gracias por tu aporte, me va a servir mucho 👌

    Jorge Alberto Rodriguez Flores

    Jorge Alberto Rodriguez Flores

    student•
    hace 5 años

    Muy buena la clase, igual nosotros podremos crear nuestros propios mixins responsivos de acuerdo a nuestras necesidades.

    Camilo Alexander Velandia Velandia

    Camilo Alexander Velandia Velandia

    student•
    hace 6 años

    muy bueno ese mixin

    Sergio Bernal

    Sergio Bernal

    student•
    hace 5 años

    Qué gran mixin 😍

    Alberto Gómez Juan

    Alberto Gómez Juan

    student•
    hace 5 años

    Wow!! Esto sí es impresionante.

    Gonzalo Pimentel

    Gonzalo Pimentel

    student•
    hace 6 años

    Increíble esta clase!! Justo lo de hacer responsive mis proyectos se me complicaba con estos mixins me quita un peso de encima!

    Omar Garrido García

    Omar Garrido García

    student•
    hace 6 años

    ese mixin es muy bueno para el responsive !

    Danelia Sanchez Sanchez

    Danelia Sanchez Sanchez

    student•
    hace 6 años

    Estas últimas clases han sido geniales 👍

    Jorge Cruz Perez

    Jorge Cruz Perez

    student•
    hace 5 años

    Me uno a la opinión generalizada, esta clase es una de las mejores del curso y será de gran utilidad en diversos proyectos en adelante, nunca pares de aprender, saludos :)

    Platzi Team

    Platzi Team

    student•
    hace 5 años

    Genial, realmente genial, me mataba mucho la cabeza con las propiedades responsive, pero este y el anterior mixin realmente son fantásticos, Gracias

    Nicolás Goux

    Nicolás Goux

    student•
    hace 4 años

    En cursos anteriores se menciono que era una mejor practica realizar los media queries en el html mediante distintos archivos CSS. Esto sigue siendo cierto incluso con la utilización de esta funcion de sass?

      Cesar Gabriel Mejias Farreras

      Cesar Gabriel Mejias Farreras

      student•
      hace 4 años

      Mmm concluyo que si. Iniciar con los estilos aplicando la metedologia Mobile-first y luego hacer carpetas diferentes para cada breakpoint.

    Andres Velasquez

    Andres Velasquez

    student•
    hace 4 años

    Recomendación para cargar componentes: Es importante que en la parte superior vayan las configuraciónes, como los breakpoints, el bootstrap reboot y el archivo de globales para evitar conflictos.

    Anfernee Valera

    Anfernee Valera

    student•
    hace 4 años

    Lo admito, esto si lo veo increíblemente funcional

    Jose Orlando Parra Soto

    Jose Orlando Parra Soto

    student•
    hace 5 años

    pero entonces tu preprocesador favorito es sass? ejejje

    Nicolas ortiz suarez

    Nicolas ortiz suarez

    student•
    hace 5 años

    Aqui puedes ver mas sobre las reglas, @keyframes, @supports @media queries https://sass-lang.com/documentation/at-rules/css#supports

    Juan José Rodríguez Portillo

    Juan José Rodríguez Portillo

    student•
    hace 4 años

    cuándo dices,estos son los mixxin que la comunidad de sass a compartido a que comunidad te refieres, y otra cosa esos mixxin que ya tienes guardados es algo que siempre debemos de usar en nuestros proyectos, seria bueno tenerlos guardados para simpre utilizarlos en nuestros proyectos ?

      Cesar Gabriel Mejias Farreras

      Cesar Gabriel Mejias Farreras

      student•
      hace 4 años

      Esos breakpoints guardados en el mixin los veo como un estándar elegidos por la comunidad que además te podrán ahorrar tiempo, pero también a base de ellos puedes hacer tus propios breakpoints.

    Alejandro Ramos

    Alejandro Ramos

    student•
    hace 3 años

    Han sido una introducción a los media queries con Sass, tocará investigar para sacarle provecho al 100%!

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads