Diseño Responsivo con CSS: Media Queries y Flexbox

Clase 42 de 84 • Curso Gratis de Programación Básica

al mn

student•

Antes me daba miedo comenzar a aprender CSS pero desde que tomo estas clases ya me siento más seguro y motivado para seguir aprendiendo 😊😊😊

Algo que me ayudo bastante fue darle en la Consola a Device toolbar para visualizar la página en diferentes resoluciones Ojalá les sirva 💚 💚

Beto Ln

student•

Gracias

Jonathan Rafael Petit Rojas

student•

gracias! excelente aporte

Rubén Ernesto Aragón Gil

student•

Si ven que no funciona el responsive desing, recuerden agregar el viewport, de lo contrario van a batallar.

Esto va dentro de la etiqueta head 👇

<meta name="viewport" content="width=device-width, initial-scale=1">

Ivan zackarias

student•

No podía hacer funcionar el responsive y no sabía el por qué, muchas gracias por tu aporte 👏🏻

Crismar Silva

student•

Gracias, no me funcionaba el responsive y ya no sabia que hacer.

Juan David Rueda Quiroga

student•

Existe una herramienta muy útil para probar el responsive desing con las dimensiones ya establecidas en una sola ventana y depurar de forma más efeciva, hablo de https://responsively.app/… lo mejor, es código libre 😄

Cifi Cifintini

student•

La pàgina fuè borrada :c

Juan David Rueda Quiroga

student•

No fue borrada, es que puse puntos suspensivos en la URL accidentalmente https://responsively.app/

Edwin Romero

student•

Así van los avances con la personalización del proyecto.!

Nicolas Umile

student•

Como lograste colocar las imagenes de cada mokepon seleccionado en la caja de mensajes?

Edwin Romero

student•

Hola amigo la lógica es exactamente igual que colocar el span , solo debes sustituir el selector y crear una etiqueta imagen.

lo debes hacer en las dos funciones que se encargan de seleccionar el mokepon.

Julian Maestre

student•

Versión Responsive!!

Nestor Rios Garcia

student•

¡Te quedo genial!

Arnaldo Medina

student•

¡Qué pasada!

Erik Ucenik

student•

Tip: Si le dan a este botón podrán ver cómo se ve su página en distintas resoluciones y dispositivos ;)

Ibis Amaya

student•

gracias

Gabriel López

student•

gracsia

Maria del Carmen Valero Carreño

student•

![](

Así modifique los estilos de CSS con JAVASCRIPT

Eduardo Peña Ramos

student•

Buena idea poner con colores las victorias y derrotas.

Elizabeth M

student•

para a los que no les sale el @media en CSS es porque se deben de aumentar los pixeles . Estuve horas buscando soluciones y al fin lo encontre. de 360px lo aumente a 400 px y dio tal cual de la profesora

<@media (max-width: 400px) {
    .tarjetas, .tarjetas-ataques {
       flex-direction: column;>

Andres Dominguez

student•

Gracias bro, estaba sufriendo ya que hasta añadí mete en html y no me aparecía jeje grax

Ivan Pereira

student•

Genial, muchas gracias. realmente me sirvió!!! 🙌🏻

Ayelen Torres

student•

hola, o me perdi en alguna clase, o me salteé porque no habia visto la explicación de poner en un mismo selector 2 clases separadas con "," y en esta clase, la nro 42, veo que la habia usando anteriormente...

Jorge Lezcano

student•

note lo mismo, y veo que ya estuvo dandole estilos a el nro de vidas

Teo Zavala

student•

Tambien note que hay un selector que ajusta el tamaño del numero en las vidas, y hasta esta clase no se ha hecho eso.

Ari Torres

student•

Si a alguien no le toma el @media, lo más probable es que les falte la siguiente línea de código en el html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tienen que añadirla en el header del mismo

Brenda Siwonia

student•

gracias!!

Yilma Espitia

student•

Lo tengo tal cual, no se por que no me toma el responsive :'(

Sebastian Gómez

student•

Buenas noches equipo.

En el minuto 8:27 la profe da una de las posibles soluciones al reto de la clase anterior (centras los textos de los ataques de jugador y enemigo). Ella utiliza las propiedades de grid para centrarlo, pero es algo extensa y hay una manera más fácil de hacerlo. Simplemente a la clase .ataques le dan la propiedad text-align: center; y listo.

.ataques{ display: grid; grid-template-columns: 100px 100px; color: white; text-align: center; }

David Toro

student•

exelente parcero gracias

Freddy Zambrano Galeano

student•

Gracias amigo, yo también lo solucione así, pero no sabia si estaba bien o era mejor como explica la profesora.

Ignacio Mora

student•

me esta encantando este modulo 😁

Diego Alejandro Moreno Pedroza

student•

Esta idea se ve super cool, me gusta tu diseño

Noel Alvarez

student•

oh exelente estilo, 👍🏻

Julian S

student•

Recomiendo desarrollar pensando en dispositivos moviles, (Mobile First),

Un artículo acerca del Mobile First: https://guias.makeitreal.camp/html-y-css/media-queries

Diego Perez

student•

isaac mollado

student•

así quedo mi CSS. Realmente me esforcé. con gusto paso el código. mas que nada también para que alguien me diga como podía hacerlo mas fluido y entendible.

Juan Camilo Santa Sánchez

student•

Que chidoris!! xd

Erik Ucenik

student•

Le acabo de perder todo el miedo al diseño responsivo, qué maravilla

Andres Salazar

student•

Super!, no es dificil ese tipo de diseño, pero como se nos ha venido mostrando en las clases anteriores, lo importante es planeación. En cuanto a código los media query te la hacen todo! :)

Pablo Alejandro Figueroa

student•

++GRID++: Crear estructuras .
++FLEXBOX++: Acomodar elementos

Vivian Daniela Romero

student•

Así va mi juego, no es tan llamativo como los de otros compañeros, pero me encanta lo logrado. Mokepon

Juan Daniel Ramirez Coroy

student•

Está cool! sigamos adelante aprendiendo.

Nahuel Neira

student•

Entre la clase anterior y esta, le agrego un par de cosas verdad? especificaente la linea numero 103 #vidas-jugador, #vidas-enemigo. y no se q mas hizo xq ya no me coinciden la misma lineas con los numeros. yo en la linea 103 tengo el color del .ataques

Pedro Francisco Caicedo Palco

student•

es cierto, porque lo hiso?

Germán Andrés Guerrero Ramírez

student•

Ya aprendí a leer y entender los errores de tantas veces que me salen. Que buena práctica es usar la consola. Gracias profe 👍😎

Diseño Responsivo con CSS: Media Queries y Flexbox

Fundamentos de Programación

Programación Básica: Fundamentos y Creación de Proyectos en Línea

Programación Básica en Google Chrome: Variables y Funciones

Creación de una Página Web Básica con HTML

Estructura Básica de un Documento HTML

Estructura y funcionamiento básico de HTML y JavaScript

Instalación y uso básico de Visual Studio Code para programar

Declaración y Uso Básico de Variables en JavaScript

Programación de Piedra, Papel o Tijera en JavaScript

Programación de Piedra, Papel o Tijera en JavaScript

Generación de Números Aleatorios con JavaScript

Creación y uso de funciones en programación

Ciclos y Condiciones en Programación: Piedra, Papel o Tijera

Programación de un Juego de Piedra, Papel o Tijera en JavaScript

Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web

Manipulación del DOM y Eventos en JavaScript para Juegos Web

Desarrollando un juego con HTML y JavaScript

Maquetación de Páginas Web para Videojuegos en HTML

Selección de Mascotas en HTML para Juegos Interactivos

Programar eventos de clic en botones HTML con JavaScript

Eventos de Carga en JavaScript: Iniciar Juego y Seleccionar Mascota

Selección de Mascota en JavaScript: Implementación y Validación

Manipulación del DOM con JavaScript para mostrar mascota seleccionada

Selección Aleatoria de Mascota Enemiga en JavaScript

Eventos de clic y lógica de ataque en JavaScript

Ataques Aleatorios para Mascotas Enemigas en JavaScript

Creación de Mensajes Dinámicos en Combate HTML y JavaScript

Lógica de Combate en JavaScript para Juego Mokepon

Operadores Lógicos en Programación: AND, OR y NOT

Actualización de Vidas en Juego de Combate con JavaScript

Validación de Vidas y Mensajes Finales en Juegos

Funcionalidad de Reinicio y Desactivación de Botones en Juego

Mostrar y ocultar secciones en HTML con JavaScript

Estilos con CSS

Estilos CSS: Selectores, Propiedades y Valores

Tipos de Visualización en CSS: Display Block, Inline e Inline Block

Alineación de Elementos con Flexbox en CSS

Modelo de Caja en CSS: Espaciado y Bordes

Diseño y Estilo de Páginas Web con HTML y CSS

Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas

Estilos CSS para Mejorar la Interfaz de un Juego

Estilizado de Pantallas de Juego con CSS y Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid: Organiza Elementos en Rejillas Bidimensionales

Diseño Responsivo con CSS: Media Queries y Flexbox

Pseudoclases en CSS: Mejora la Interacción del Usuario

Optimización de código

Optimización de Código JavaScript con Clases y Objetos

Optimización de Código JavaScript: Variables y Funciones

Optimización de Código JavaScript con Clases y Objetos

Construcción de Clases y Objetos en JavaScript

Uso de Arreglos para Almacenar Objetos en JavaScript

Agregar ataques a objetos en JavaScript

Renderizado Dinámico de Objetos en HTML con JavaScript

Solución de errores en variables y elementos HTML en JavaScript

Uso de Objetos para Centralizar Información en JavaScript

Selección de Mascota Aleatoria en JavaScript

Iteración de Arreglos y Manipulación DOM en JavaScript

Crear Función "mostrarAtaques" en JavaScript para Juegos

Eventos de Clic en Botones con JavaScript

Secuencia de Ataques y Validación de Resultados en JavaScript

Implementación de lógica de combate en juegos JavaScript

Programación de Juegos: Lógica de Ataques y Victorias

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibujo y manejo de gráficos en Canvas con JavaScript

Movimiento de Capipepo en Canvas con HTML y JavaScript

Movimiento Continuo de Personajes en Canvas con JavaScript

Eventos de Teclado para Controlar Personajes en Juegos

Pintar Fondos y Personajes en Canvas HTML

Métodos de Clases en JavaScript para Juegos Interactivos

Detección de Colisiones en Videojuegos con JavaScript

Programación de eventos y colisiones en un juego interactivo

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos Responsivos en HTML y CSS para Mapas Interactivos

Backend: videojuego multijugador

Desarrollo de Juegos Multijugador con Cliente-Servidor y API

Instalación de Node.js en Windows para desarrollo backend

Uso básico de la terminal de comandos y Node.js