Skip to content
Submitted over 2 years ago

QR Code Component using CSS Flexbox

#accessibility
Ozoeze Ugo•10
@Ugonadia
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

I will appreciate any feedback on how I could have done this better especially the media queries part of my code.

Community feedback

  • Aviral Sharma•220
    @aviralsharma07Posted over 2 years ago

    Hey, Congratulations on creating this project. Here are my few suggestions for you.

    • Use semantics HTML Tags like <article> to wrap card content then <div>
    • You don't need to wrap the <img> inside an <div> it is not required.
    • Write your CSS in a separate file named styles.css and link it to HTML in the <head> section.
    • Use max-width: 25ch instead of width for .text-class
    • There is no need for a Flex basis multiple times in this project. Refer to this to learn Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    • Use margin-top for spacing between <p> and heading not padding-top.

    Hope it helps. Keep up the good work!

    Marked as helpful
    0
    Ozoeze Ugo•10
    @UgonadiaPosted over 2 years ago

    @aviralsharma07 Thank you

    1
  • Trae Zeeofor•490
    @traezPosted over 2 years ago

    Nne welcome to frontendmentor. Github seen. You're doing well. Keep building and learning!

    For starters you can take note of the Accessibility report (2) and HTML validation report (5) outstandings, and start to perfect your craft from there.

    The media query wasn't really good. Responsiveness wasn't neat. But it's your first try and it's allowed. Google and look for an article that explains how to implement media query (when shifting from mobile to desktop and vice versa)

    https://traez.github.io/time-tracking-dashboard-main/ You can check out my latest project and see how the look changes when you toggle mobile and desktop view.

    Marked as helpful
    0
    Ozoeze Ugo•10
    @UgonadiaPosted over 2 years ago

    @traez Thank you

    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