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

QR code responsive project

@anderjackie

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


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

To finish the project and to get to understand how the tags were composed.

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

Definitely the responsiveness of the component. But when I set the min and max of the height and width everything went fine.

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

Which html tags are proper to use in this case.

Community feedback

P
Austin H. 270

@austinh-io

Posted

This looks great, seems like you did a really good job. Maybe just a nitpick, but the design had 3 lines for the paragraph, while yours only has 2. I was able to achieve that for mine by setting a max-width on the paragraph's container.

Marked as helpful

1

@anderjackie

Posted

Thank you @austinh-io

I'm sorry I didn't reply earlier, I'm still getting used to the platform.

I fixed only adjusting the container lateral padding.

0
T
Grace 29,310

@grace-snow

Posted

You won't have benefitted from the reports because the code for this challenge is buried in the repo where it shouldn't be. Again, I recommend you move this out into it's own repo as it should be and get a clean git history. This will become increasingly important on larger projects.

But just looking at the QR code solution here are things I noticed that can be improved, I hope these are helpful:

  1. You don't need a role of main on the main landmark. Don't add unnecessary roles.
  2. Ideally this component should sit within main not be main. When we build components like this try to follow that component architecture — the component should be able to have its code lifted out and dropped into a website. It would never be the main landmark on a real site.
  3. Similar, think about how and where this component would be used. It would never act as the main heading on a page so should not have a h1. Use a heading level with a lower importance.
  4. Look up how to write good alt text on images. It should never include words like "image" or "picture" because it's an element that already has an image role. Instead what is important is being clear about what this image is (QR code) and in this case where it goes (to FrontendMentor.io).
  5. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  6. Font size must never be in px. Use rem instead.
  7. The component must not have a max height or min-width. By doing that you will be breaking the component for some users. We must build components to be robust, able to adapt to the device, user settings or author content provided. It is the browsers job to decide what height this component needs to be. All this card needs is a max-width in rem, optionally a width 100% as well.
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