Skip to content
Submitted about 2 years ago

página de qr responsiva usando flexbox y media query

Junior Roque•10
@AllenRoque
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

me resulto algo complicado redimensionar la tarjeta, ya que al usar medidas relativas desde mobile first la tarjeta aumentaba su tamaño. Lo que usé en mi css es mala practica? y con respecto a la clase atribution no lllegue a modificarlo(no use bem a esta parte)

Community feedback

  • Sebastian Vargas•100
    @sebas-tcotdPosted about 2 years ago

    ¡Hola Junior! Suele ser un poco compleja la maquetación cuando no se tiene un archivo de diseño; no obstante se puede ver que hiciste un buen trabajo. Simple y conciso.

    Sin embargo, te recomiendo que no uses, en la medida de lo posible, muchos selectores descendientes o de anidamiento (a partir de 3 niveles), ya que suele aumentar la complejidad y mantenibilidad de los archivos de estilos. Sí, es recomendable aplicar BEM y analizar por un momento cuáles vendrían a ser los elementos del bloque.

    Te recomiendo este artículo de CSS-Tricks donde explican cómo determinar esos elementos y más acerca de BEM: https://css-tricks.com/bem-101/

    Sin más, desearte la mejor de las sendas en este camino tuyo hacia el desarrollo front-end. Good luck!

    Marked as helpful
    0
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hi @AllenRoque, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

    Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

    Reduce your code by removing unnecessary elements. The HTML structure is working but you can reduce at least 20% of your code by cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

    <body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

    Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

    ✌️ I hope this helps you and happy coding!

    0
  • Favour•10
    @favxlawPosted about 2 years ago

    Cool work

    0

Please log in to post a comment

Log in with GitHub

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