CSS: Diseño responsivo

Name: CSS: Diseño responsivo
Author: Cliff Brozo

Este curso analiza las técnicas de diseño receptivo con CSS. Esto garantiza que las páginas web quepan en la pantalla de cualquier dispositivo que esté…

Preview the first lesson free — get full access to all 4 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

(música ligera) Bienvenido de nuevo al curso de Ciudad del Conocimiento en hojas de estilo en cascada. Soy Cliff Brozo, soy tu profesor. Y en la lección de hoy vamos a hablar de Responsive Design, cómo van a cambiar las cosas a medida que cambie la ventana gráfica. Aprenderemos sobre las diferentes ventanas gráficas. Descubriremos qué queremos decir con vista de cuadrícula y cómo lo ponemos a trabajar. Exploraremos las consultas de medios y veremos los contenedores. y cómo usarlos. Echemos un vistazo a la ventana gráfica. Es el área visible de los usuarios. Dependiendo del dispositivo que esté mirando el usuario, podría ser un teléfono, podría ser una tableta, podría ser una computadora de escritorio, podría ser una computadora portátil. Y lo que hacemos es codificar nuestro HTML prestar atención a qué dispositivo está utilizando el usuario. Y luego podemos diseñar nuestro código para que se ajuste perfectamente a ese dispositivo. Una vista de cuadrícula receptiva nos permite juntar filas y columnas y divida la página en pedazos. Y luego podemos identificar cada una de esas piezas y diseñarlos de manera diferente. Las consultas de medios nos permiten echar un vistazo a esa ventana gráfica. y pruebe el dispositivo del usuario para ver cuál o ella está usando. Luego podemos establecer nuestro ancho y alto para maximizar nuestras páginas en su dispositivo. Escala de imágenes receptivas, y hay diferentes formas de escalar la imagen para adaptarse al dispositivo. Ciertamente nos gusta mantener nuestra relación de aspecto para que la imagen no se distorsione, lo que significa que rara vez queremos estirar una imagen para ajustarse a un área de contenido de tamaño incorrecto. Las imágenes receptivas tienen tres posibilidades. Pueden estar contenidos en un área determinada como puede ver, el Puente de Londres está perfectamente contenido en esta caja cuadrada. Si le pedimos al navegador que se ajuste al London Bridge utilizando 100% del tamaño de la imagen, perdemos parte de la imagen. El resto no encaja y, como puede ver, se distorsiona. Y finalmente, si le preguntamos al navegador para cubrir toda el área, bueno, esa no es solo la caja simple si te ves muy, muy de cerca en la esquina inferior derecha, ahí está la cima del Puente de Londres porque esa es esta parte de la imagen. Las consultas de medios nos permiten poner diferentes imágenes en diferentes pantallas. Entonces, dependiendo del dispositivo del usuario, el usuario verá una imagen muy diferente de esencialmente lo mismo. Los contenedores nos permiten crear cajas tipo Excel y luego coloque las cosas en esas cajas. Podemos tener filas y columnas normales que pueden o puede que no sea del mismo tamaño, o podemos ponernos elegantes y crear una agrupación diferente de filas y columnas con superposiciones y áreas que no son del mismo tamaño. Así que veamos cómo funciona todo esto.

Intermedio Proveedor : Cliff Brozo 4 lecciones · 22m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

Este curso analiza las técnicas de diseño receptivo con CSS. Esto garantiza que las páginas web quepan en la pantalla de cualquier dispositivo que esté utilizando: teléfono, tableta o computadora de escritorio. Aprenderá qué es la ventana gráfica y cómo determinar qué dispositivo se está utilizando. También examinará la vista de cuadrícula, las consultas de medios, los contenedores y cómo usar CSS para diseñar páginas.

Lo que aprenderás

Navegar el viewport y determinar qué dispositivo se está utilizando
Aplicar media queries y contenedores para adaptar diseños en dispositivos
Poner CSS grid view a trabajar para el diseño de página
Usar CSS para diseñar páginas para que se ajusten a pantallas de teléfono, tableta y escritorio
Construir diseños web responsivos con marcos HTML y CSS responsivos

Puntos clave

El diseño responsivo con CSS asegura que las páginas web se ajusten a la pantalla de cualquier dispositivo que se esté usando, incluyendo teléfono, tableta o escritorio.
El curso explica qué es el viewport y cómo determinar qué dispositivo se está usando.
Examina grid view, media queries y contenedores como herramientas para diseñar páginas.
El curso cubre usar CSS para diseñar páginas de manera responsiva.

Preguntas frecuentes

¿Qué cubre este curso?

Cubre técnicas de diseño responsivo con CSS, incluyendo el viewport, determinar qué dispositivo se está usando, grid view, media queries, contenedores y usar CSS para diseñar páginas.

¿Qué aprenderé a hacer?

Aprenderás a navegar el viewport, explorar media queries y contenedores, y poner grid view a trabajar.

¿Por qué es importante el diseño responsivo?

El diseño responsivo asegura que las páginas web se ajusten a la pantalla de cualquier dispositivo que estés usando: teléfono, tableta o escritorio.

¿Cómo está estructurado el curso?

El curso está dividido en cuatro lecciones: Responsive Design Part 1 a Part 4.

¿Qué habilidades desarrolla este curso?

Desarrolla habilidades en Códigos CSS, Marcos CSS, CSS Grid, CSS Orientado a Objetos, HTML Responsivo y Diseño Web Responsivo.