Skip to content
Submitted almost 2 years ago

My first challenge

Javier014334•40
@Javier014334
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

If you have tips for improvement, don't hesitate to tell me!

Community feedback

  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Well done on completing the challenge

    HTML 📄

    • replace <div> after the <body> tag with <main> tag to fix accessibility issues.

    • Always provide the <img> tag with meaningful and understandable descriptive text about what the image is about in the alt attribute. to improve accessibility.

    • Rather than using three <h2> you can contain the entire text in a <p> and give it a style of text-align: center; and width: 70%; to get the exact same result. It will also improve accessibility.

    CSS 🎨

    • Use relative units such as em or rem for margin, padding, width, and height. most preferably rem for font size. avoid using px since it is an absolute unit.

    • It is a good practice to use CSS custom properties. learn more about it here

    To center the card to the center of the screen. Do the quick fix below

    • In div remove margin: 5% auto;

    • In the body element add the following lines of code

    justify-content: center;
align-items: center;
min-height: 100vh;

    I hope this was useful 😊

    KEEP GRINDING 💪

    0
    Javier014334•40
    @Javier014334Posted almost 2 years ago

    @Mr-jaw Muchisimas Gracias! hice lo que pude con varios tutoriales en youtube 😁 y seguire aprendiendo, thx! 💪🔥

    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