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 Page using CSS Flexbox

P

@carstenkoerner

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?

I was proud to have completed my first project and to have worked with Git and Github for the first time.

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

Not really a challange but first time using HSL Colors.

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

So far in no area.

Community feedback

P
Grace 27,890

@grace-snow

Posted

Hi, overall this is very good. I can spot a few issues in this code, but these are very common things so don't get discouraged. Refactoring them will set you up well for the next challenge...

  1. All content should be contained within landmarks. This needs a main as the container. The attribution should be moved outside of this and should be a footer.
  2. The image is really important content so deserves a more meaningful alt description. In this case the alt should say what the image is (QR code) and where it goes (to FrontendMentor.io).
  3. You must use a heading for the heading content. As this component would not serve as a page title the heading level should be h2.
  4. 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.
  5. All of the css you have on the container class can go on the body instead.
  6. The card component should have a little margin on all sides so it can't hit screen edges. (Or a wrapping element could have padding for the same purpose)

Marked as helpful

1

P

@carstenkoerner

Posted

@grace-snow Hi Grace, thank you for your helpful and interesting advice. I have implemented all the points and uploaded the update.

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