Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML5 - CSS - SASS - Flexbox - BEM

@lcascardo

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Cuales son las buenas practicas para aplicar el responsive design?

Community feedback

Victor 290

@cervantesdeveloper

Posted

Espero haber entendido bien tu pregunta. Si con responsive design te refieres a cuestiones de UX / UI design, muchas cuestiones tienen que ver con la ergonomía de la percepción: -Contraste entre el fondo y el texto. (en color.adobe.com tienen una herramienta de accesibilidad) -Tamaño mínimo de la fuente según el dispositivo. -poner un atributo "alt" descriptivo en las imagenes. -hacer uso de etiquetas semanticas como main, aside, footer, nav, et.

Puedes hacer un curso de responsive web design en https://www.freecodecamp.org/learn

Ahora, si te refieres a como hacer un sitio responsivo, una buena practica es tratar de prescindir de las media queries en la medida de lo posible. Lo anterior se puede lograr al aplicar algunos valores como width: clamp(minimo, idoneo, maximo) // esta linea la suelo usar con botones.

si piensas poner muchas cards, puedes con grid definir el ancho de las columnas de la siguiente manera

.grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

Espero que te sea de ayuda.

Marked as helpful

0

@lcascardo

Posted

@cervantesdeveloper Claro me referia mas a como hacer un sitio responsivo. En este caso para que la card sea responsive utilizando buenas practicas.

Muchas gracias por tu feedback

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord