Skip to content
Submitted about 2 months ago

QR code element using HTML and CSS

Rebecca O'Neill•30
@rebeccaoneill
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

Community feedback

  • Steven Stroud•11,910
    @StroudyPosted about 2 months ago

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

    1
  • Rebecca Padgett•1,840
    @bccpadgePosted about 2 months ago

    Hello @rebeccaoneill. Congratulations on completing this challenge!!!🎉

    I have few suggestions to improve your solution below.

    HTML 📃:

    • Every website must have at least one landmark
    • You can wrap your content using the <main> tag
    • Alt text on the image can be more descriptive e.g: alt="Scan the qr code to visit Frontend Mentor"

    HEADINGS TAGS

    • Heading tags must be used in chronological order and you think about heading tags are similar to a table contents.

    • There should be only one h1 on every website

    <h1>Improve your front-end skills by building projects</h1>

    More info📚:

    CSS 🎨:

    • Best practice to remove all the default styles using CSS Reset
    • Font size must be in rem units. Pixels don't scale when users want to change their font size in their preferred web browser.
    • To save a few lines of CSS, you can implement the shorthand property for margin and padding and etc

    More info📚:

    Here is my solution - QR Code Component

    I hope you find this useful and don't hesitate to reach out if you have any questions

    1
  • Abhi•320
    @abhi-zeroPosted about 2 months ago

    ..

    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