Not Found
Not Found
Not Found
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502

Submitted

QR code component

MoggStephenβ€’ 160

@MoggStephen

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


Simple layout incorporating some web-dev best practice techniques.

Community feedback

@MelvinAguilar

Posted

Hello there πŸ‘‹. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

Alt text πŸ“·:

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.
  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

    If you want to learn more about the alt attribute, you can read this article. πŸ“˜.

ARIA πŸ”Š:

  • Aria-labels are not necessary for paragraphs. A paragraphs is a non-interactive element and some screen readers will ignore the aria-label on those elements, they only work on interactive elements such as buttons, links, etc.

    The aria-label attribute can be used to provide a text description of the element's content, which can be read by screen readers

I hope you find it useful! πŸ˜„ Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

0
Hassia Issahβ€’ 50,650

@Hassiai

Posted

Replace <p class="boldText"> with <h1> to fix the accessibility issue.

To center .mainContainer on the page using flexbox or grid instead of position: absolute, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

USING FLEXBOX:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
USING GRID:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

For a responsive content, replace the width in .mainContainer with max-width and give the img a max-width of 100%.

Give h1 and p the same font-size of 15px which is 0.9375rem and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

0
Francisco Carrilloβ€’ 5,540

@frank-itachi

Posted

Hello there πŸ‘‹. You did a good job!

I have some suggestions about your code that might interest you.

HTML πŸ“„:

  • The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more headings in your html code.

CSS🎨:

  • You can use grid or flexbox to center the content no matter the viewport size. Using grid you can do the following:
body {
min-height: 100vh;
display: grid;
align-items: center;
justify-content: center;
}

With flex:

body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

I hope you find it useful! 😁😁 Above all, the solution you submitted is greatπŸ‘Œ!

Happy <coding /> 😎!

Marked as helpful

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