Skip to content
Submitted 3 months ago

QRR Code Component using Flexbox

RajanCP•90
@RajanCP
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 am proud of the css styling as I believe it matched up fairly well to the example. However, I spent too much time trying to format the text in html, this should be adjusted later on in css,

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

The tag was overwriting my font weight. I had to replace the tag with , which then allowed me to customise the font weight as needed.

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

Is the html code semantically correct? Did I create unnecessary when splitting the text up?

Community feedback

  • Steven Stroud•11,910
    @StroudyPosted 3 months ago

    Hey Great solution, You should be proud, Somethings to consider,

    • Your .attribution has a low-contrast text and is difficult or impossible for many users to read. Link text that is discernible improves the experience for users with low vision. You can change this by using a Contrast Checker,
    • Missing a <meta> description tag for SEO purposes, I do not want to give you the answer but just to point you in the right direction.
    • It is best practice to have a <main> tag inside your body highlighting the main section.
    • ‍Using max-width: 100% or min-width: 100% is way more responsive then just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.
    • You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.
    • Another great resource for px to rem converter.
    • Setting a height and width attribute to your <img> will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image,
    • You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset
    • Using a naming convention like BEM, Using proper naming will prepare you for the changes in design of the website.

    I hope you found some of this information helpful, You should give the articles a good read and I look forward to seeing some more from you, Happy coding! 💻

    1
  • RajanCP•90
    @RajanCPPosted 3 months ago

    @Stroudy Hi Thank you for this detailed response.

    -Regarding the .attribution I do agree it would be considered difficult to read and will consider this going forward.

    -I am new to using <meta> will also consider this.

    -What is the purpose behind using max-width: 100% or min-width: 100%

    -How useful is using a main tag in this instance? Since everything is incapsulated around <body>, I used .body in css to style it. Is this incorrect? Should I be using <main> and styling <main> directly?

    -Will use rem units going forward.

    0
    Steven Stroud•11,910
    @StroudyPosted 3 months ago

    @RajanCP,

    • The <main> tag lets search engines know what the content is about, It's best practice and best for SEO and is semantically correct,

    • You can style the main the exact same it's just using the correct syntax,

    • The properties max-width, min-width, and width in CSS are used to control the sizing behaviour of elements, but they each serve different purposes and provide different levels of flexibility in responsive design, -

    • Allowing elements to resize dynamically based on the available space or viewport size. This is key for responsive web design, where content must adapt to different devices and screen sizes.

    • Using these properties helps to ensure that text, images, and other content are always presented in a user-friendly way, avoiding overly wide or narrow elements.

    Conclusion

    • Use max-width to allow elements to grow up to a certain point, providing flexibility without exceeding a maximum size.
    • Use min-width to prevent elements from becoming too small, ensuring they remain functional and readable.

    I hope this answers some more of your questions, You should highly consider reading those responsive links above, They can go into even more detail. If this was helpful I would greatly appreciate it if you could mark it as so to help me get some more points for the, Wall of Fame, Thank you, Happy Coding!

    1
  • Wasiqur Zaman•130
    @wasiqurzamanPosted 3 months ago

    Great job. But it looks like the attribution div is inside the main card container.

    <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>. </div>

    Put this div outside of the card container. 👆

    0
    RajanCP•90
    @RajanCPPosted 3 months ago

    @wasiqurzaman Yes I did notice that, I should have kept it outside at the bottom as a footer note. Thank you for the comment

    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