Skip to content
Submitted over 1 year ago

QR code component solution

AbdulHaseebHussainRI•20
@AbdulHaseebHussainRI
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm pleased with the overall outcome, but I'd focus more on refining font sizes and component layouts for better consistency. Additionally, I recognize the need to enhance accessibility for improved user experience.

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

I initially struggled with getting started and setting appropriate font sizes. Fortunately, I sought guidance from discussions on Discord and stumbled upon a helpful blog post by Grace Snow, which provided me with the insights needed to overcome these hurdles.

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

Simplification of HTML and CSS: I'm wondering if there are further opportunities to streamline my code. Any suggestions on areas where I could reduce complexity would be greatly appreciated.

Accessibility and Semantic HTML: Are there additional HTML tags I could have utilized to enhance accessibility and improve the semantic structure of my code? Any specific recommendations in this regard would be helpful.

Font and Div Sizing: I'm unsure about the sizing of fonts and the overall div. Can you point out where I might have made errors in these aspects and offer guidance on how to correct them for better design consistency?

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Hi, The html looks great but there are some problems in the css at the moment.

    1. Never limit the height of elements that contain text, including the body. Min-height 100vh is fine to use, height is not. This is causing content to be cut off at the top on some screen sizes / for users with different text sizes.
    2. The max width on the component must be in rem not px so it scales properly even when users have a larger default text size set.
    3. Make sure the component can't hit screen edges. Either add a little padding to the body or a little margin to the component (on all sides).
    4. You can place text align center on the component itself instead of repeating it on the heading and paragraph because text alignment is inherited by children. (Optional)
    5. I recommend you place classes directly on what you want to style instead of using class element selectors. It's good to try and keep specificity low and it means if the html ever has to change in future the css would not break.
    Marked as helpful
  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    HEADINGS ARE NOT PROPERLY USED ⚠️:

    • This solution consists incorrect usage of <h2> so it can cause severe accessibility errors due to incorrect usage of level-two headings <h2>
    • Every site must want only one h1 element identifying and describing the main content of the page.
    • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
    • In this solution there's <h2> element which is this <h2>Improve your...</h2>, you can preferably use <h1> instead of <h2>. Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely
    • So we want to add a level-one heading to improve accessibility
    • Example: <h1>Improve your front-end skills by building projects</h1>
    • If you have any questions or need further clarification, and feel free to reach out to me.
    • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

  • 6xg0d•210
    @6xg0d

    Hi! The result looks good in general, that's a great job! The font weight of the h2 should be a little bit higher in order to be more bold, but even with that, your card looks great! Talking about the areas you want help:

    1. If you want to write semantic code, keep in mind tags like section, header, footer, main, etc. For example, in your HTML, instead of using a <div> inside the <main>, you could use a <section> tag to do the same job. Also, you can put the <img> inside a <figure>

    2. Talking about simplify your code. In your CSS there are a lot of rules for tags that aren't even in your code, so your basically applying properties to non-existing elements. Less is more, so if you can get the results you want with the minimum amount of lines of code, much better. I recommend you to search for semantic html tags and accessibility practices in webs like MDN and W3schools. Hope this helps you, and keep going 👋

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