Skip to content
Submitted 4 months ago

QR Code Component using CSS Flex

P
Dias•140
@adambeckercodes
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? What I'm Most Proud Of

I’m proud of creating clean, semantic, and accessible HTML, especially with elements like , , and ARIA labels. The skip link and responsive design make the project user-friendly, and I love how the pulse animation adds a modern touch. Organizing CSS with variables also made my styles reusable and professional.

What I Would Do Differently

Next time, I’d focus more on optimizing the design for larger screens and testing accessibility with screen readers. I’d also experiment with more interactivity, like hover effects or JavaScript, and simplify my CSS for even better maintainability.

What challenges did you encounter, and how did you overcome them? Challenges I Encountered

One of the challenges I faced was positioning the card in the exact center of the screen.

I solved this by using Flexbox on the `` element, setting display: flex, justify-content: center, and align-items: center. This allowed me to align the card both vertically and horizontally with minimal code. Additionally, I added min-height: 100vh to ensure the body always covered the full viewport height, making the centering consistent across different devices.

This approach was simple and effective, and I’ll definitely use it again in future projects!

What specific areas of your project would you like help with? Areas I’d Like Help With

I’d really appreciate more feedback on accessibility, especially regarding how I can improve the user experience for those using screen readers or navigating with a keyboard. I’ve added ARIA labels, focus styles, and a skip link, but I’d like to know if there’s anything else I could refine or add.

Additionally, I’d love advice on my code structuring. While I tried to keep my CSS organized with variables and meaningful class names, I’m open to suggestions on how to make the code cleaner, more reusable, or easier to maintain.

Any insights would be super helpful—thank you! 😊

Community feedback

  • why-not-phoenix•300
    @why-not-phoenixPosted 4 months ago

    Looks almost perfect!!! How'd you do it?

    0
    P
    Dias•140
    @adambeckercodesPosted 4 months ago

    @why-not-phoenix Thank you so much! 😊 I’m glad you liked my solution! Let me walk you through what I did step by step:

    1️⃣ Semantic and Accessible HTML

    I structured the content to ensure it’s semantic and accessible:

    • Landmark Elements: I used <main> for the main content and <aside> for attribution.
    • ARIA Attributes:
      • Added aria-labelledby and aria-describedby to associate the card’s content with its headings and descriptions.
      • Used aria-hidden="true" on the decorative image to avoid redundant information for screen readers.
    • Skip Link: Provided a skip link for keyboard users to jump directly to the main content.

    2️⃣ Responsive Design with Flexbox

    To center the card vertically and horizontally, I used Flexbox on the <body> and ensured responsiveness with min-width and min-height.

    3️⃣ CSS Variables for Reusability

    I used CSS variables to define consistent color schemes, spacing, and font sizes. This ensures maintainability and makes updates easier.

    4️⃣ Modern Visuals with Animation

    The card includes a pulse animation for a modern, interactive feel.

    5️⃣ Focus Styles for Accessibility

    I added focus styles for interactive elements, such as the skip link and attribution links, to improve keyboard navigation.

    Thank you for checking out my solution!😊

    1
  • webthingz•70
    @webthingzPosted 4 months ago

    Nice Job with aliging and sizes. Good structure Only I should not use h1 for this heading

    0
    P
    Dias•140
    @adambeckercodesPosted 4 months ago

    @webthingz Hi! Thanks for feedback! Could you explain why shouldn't I use <h1> tag in this challenge?

    0
    webthingz•70
    @webthingzPosted 4 months ago

    @adambeckercodes

    Hi, sorry it was my first comment. Just starting here @ fm. Well my thoughts about that are if this is a component then the heading will never be the main heading. So there can only be one h1 heading on a page if you want to write semantic HTML. But for the rest it was spot on man! Great Job!

    Marked as helpful
    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