Skip to content
Submitted about 1 month ago

Static QR Code UI Component using Semantic HTML and CSS Flexbox

#accessibility#pure-css#foundation
P
Ethan John Paguntalan•180
@dev-ethanjohn
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 got to learn about CSS flexbox and alignment properties. Structuring my HTML although not yet really optimized.

In this project Im using a fixed width based off from the fixed dimension of the card design from Figma. I found adding padding to the parent container is unnecessary with flexbox (center) unless I want to have explicit horizontal padding in smaller devices and the card itself has adaptable width dimension.

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

I am quite unsure about my HTML tags semantically, but looking at some tutorials and the MDN documentation help me figure out some tags I need to use for this project.

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

If someone does look on this solution, I hope to get any feedback regarding how i structure my HTML and if my classes are descriptive enough or makes sense for styling.

Community feedback

  • Marcos Travaglini•6,210
    @BlackpachamamePosted about 1 month ago

    Hey your solution is amazing! 🤩

    I'll leave you with some comments that might help you improve:

    • I don't see any point in placing a <div class="qr-hero"> inside the main when the main itself can already serve as a general container.
    • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
    • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vh
    • A good practice for naming your CSS classes is to use the BEM methodology. Although you have done it correctly, you can put it into practice next time.
    Marked as helpful
    0
    P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted about 1 month ago

    @Blackpachamame Thanks for your feedback! And more importantly, I'll check out BEM method for CSS naming.

    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