Skip to content
Submitted 3 months ago

Qr code component

#web-components
Abigail Samanta Elis•30
@abigailelis
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

What are you most proud of, and what would you do differently next time?

Al principio utilice medidas que no eran adecuadas para optimizar la pagina, luego busque ayuda en la comunidad y pude observar muy buenas recomendaciones y logré optimizarlo, lo cual me pone muy contenta, poder contar con una cálida y colaborativa comunidad dispuesta a ayudar.

What challenges did you encounter, and how did you overcome them?

Como expliqué anteriormente mi mayor problema eran las medidas ya que nunca supe cuales eran la mejor opción en cada caso para distintas dimensiones de la pagina o al hacer zoom en la misma, que no se perdieran las proporciones, pero buscando soluciones en discord pude resolverlo.

What specific areas of your project would you like help with?

Me gustaría más ayuda con estilos y con la semántica correcta en HTML.

Community feedback

  • P
    Kamran Kiani•2,760
    @kaamiikPosted 3 months ago

    You did this really good. Congratulations. Just a few notes:

    1. The footer is outside the card and is not a section footer role. I think you need to shift it outside the main element.
    1. Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.
    1. No need for this width: 100dvw;. We just add `min-height to center our div.

    Keep on the great work!

    Marked as helpful
    0
    Abigail Samanta Elis•30
    @abigailelisPosted 3 months ago

    @kaamiik Thank you very much, I tried to make those changes. Can you see my new code to tell me if it's okay now? Thank you for taking a few minutes to respond to me

    0
    P
    Kamran Kiani•2,760
    @kaamiikPosted 3 months ago

    @abigailelis Sure.There are some suggestions too:

    1. You can remove your section here. There is no need to have it here.
    1. Each Page should have a h1 heading. In this challenge though, Because in a real scenario the QR code is part of another page It does not need to have h1 and you have to use a h2 because headings should only increase one by one and screen readers use this hierarchy to navigate through content efficiently, making it easier for visually impaired users to understand the page structure. It also has SEO benefits and organize your code.
    1. Inside your body add a display:flex;, flex-direction: column;, justify-content: center to put your card at the center of the page. At the end (this is a suggestion) add a flex: 1; to your main. this property let the main grow and your footer goes to the bottom of the page.
    1. Always use one Github repo for each project. This is a really bad practice to wrap all of your project in one repo and there is no positive point inside of it.

    You did this project really well and these problems are normal. Keep on and get feedback after every project and refactor your code always.

    Marked as helpful
    0
    Abigail Samanta Elis•30
    @abigailelisPosted 3 months ago

    @kaamiik Thanks!!!! I applied all the points!!

    1

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