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 component Using FlexBox

@Prototype-113322

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'm working on creating a responsive website using Flexbox and Grid. I also want to improve my skills in creating layouts.

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

I want you to mark issues so I can use your guide to fix my issues.

Community feedback

Boris 2,870

@mkboris

Posted

Hi Prototype-113322 congrats on completing your first challenge you did great, here are a few things to review

  • All content should be wrapped within landmarks. Wrap a main tag around the .container-flex and a footer for the attribution.
  • Every page should have at least one heading element typically an h1 element to provide a clear structure. The p with the class of .heading should be a heading element
  • Your image is missing an alt attribute like so alt="Qr Code to Frontendmentor.io"
  • Font-size should be written in rem not px
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
  • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Change the width of the .content to max-width and it should be defined in rem. Remove the heights from the .container-flex and .content and add this on your body to properly center the card
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;

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