Skip to content
Submitted 2 months ago

QR code with HTML and CSS

Shuaib Mursaleen•10
@Saul077
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'm proud of my ability to replicate the given design as close as possible to it.

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

I had trouble getting curved edges with border-radius while having padding. To solve this I referred to stack overflow, in which a user suggested to add the padding value to the border-radius value to solve it

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

What do you guys think of my approach to center the QR image in the div element, and how differently would you have done it?

Community feedback

  • Teodor Jenkler•3,760
    @TedJenklerPosted 2 months ago

    Hi @Saul077,

    Nice project! I have a couple of suggestions for improvement:

    Centering a Div (Alternative Method): A fun technique to know is centering a div using position: relative for the parent and position: absolute for the child, with top: 50%, left: 50%, and transform: translate(-50%, -50%). Although the first method (using Flexbox) is better in most cases, this method is handy when you need to center content that overlaps.

    Semantic HTML: Consider using semantic HTML to improve accessibility and SEO. For example, you could use a <main> tag and replace unnecessary divs. Flexbox can help you simplify your layout by using just one container for the entire page, with Flex on the body and a flex column for the card.

    Heading Usage: For headings, consider using an <h2> tag for the title of your content, as this is the correct heading level for this project.

    Keep up the good work!

    Best, Teodor

    Marked as helpful
    1
  • Svitlana Suslenkova•5,340
    @SvitlanaSuslenkovaPosted 2 months ago

    body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget abut min-height. You can use grid instead of flex too(with some changes). Hope you found this comment helpful :)

    Marked as helpful
    1

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