Skip to content
Submitted 2 months ago

QR code component

Mario Alberto Campo Londoño•30
@MarioCampoDev
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?

Although in many examples work with the body directly. I preferred to work with the section that was going to contain my elements for the challenge.

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

I am a programmer focused on back end, I am entering the world of front end to not be so basic in terms of styles.

For me it was quite a challenge (and very difficult) to get closer to the final result.

Since it is the first time that I enter the front end and it is difficult for me to even do the most basic thing (center an element).

I read a lot of documentation in Google.

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

HTML structure and CSS styles for better visual appearance and performance

Community feedback

  • Boris•2,870
    @mkborisPosted 2 months ago

    Nice work MarioCampoDev, here are a few things to review

    • All content should be wrapped within landmarks. Wrap a main tag around the .qrCard and a footer for the .attribution
    • To properly center add this to the body and remove the overflow: hidden;
        /* your other styles */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    • Avoid setting fixed widths and height 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. Update the .backCard width to use max-width and should be defined in rem.
    • 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.
    • Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
    2

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