Skip to content
Submitted 8 months ago

QR Code Page using CSS Flexbox

Carsten Körner•170
@carstenkoerner
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?

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

  • Grace•31,270
    @grace-snowPosted 8 months ago

    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
    Carsten Körner•170
    @carstenkoernerPosted 8 months ago

    @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

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