Skip to content
Submitted about 2 years ago

QR image solution using HTML & css

Shubham Srivastava•60
@shubham7522
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

  • skipprrr•70
    @skipprrrPosted about 2 years ago

    bro where is your website , its showing nothing , your server isn't online , your should check it

    Marked as helpful
    0
    Shubham Srivastava•60
    @shubham7522Posted about 2 years ago

    @skipprrr thanks bro for your suggestion its reuploaded and working

    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @shubham7522 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

    Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further.

    The reason why it is not displayed is that you have a folder "qr-code-component-main" and inside is the solution.

    Here are some other suggestions:

    With semantic tags:

    <body>
   <main class="white-board">
      . . .
   </main>
   <footer class="attribution">
      . . .
   </footer>
<body>
    • The <br> tag is not a semantic tag, so you should not use it. Also, if a screen-reader reads the text, it will break the flow of reading at the line break tag, so it should be used to add vertical spacing. There are only a few cases where it is necessary (for example, in a poem or an address), and it is possible to avoid them by applying padding and margin styles via CSS. More information here.
    • Try to use more descriptive names for your classes. I suggest you learn the BEM naming convention standard for CSS class names because increases the readability of front-end code and provides a modular structure.
    • Add an h1 tag to your solution. The <h1> element is the main heading on a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

    Solution:

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

    I hope those tips will help you.

    Good job, and happy coding!

    Marked as helpful
    0
  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi Shubham Srivastava,

    Excellent work! You have received some helpful feedback which is nice to see , just going to add some suggestions as well:

    • In order to center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> add a little padding to the body that way it stops the card from hitting the edges of the browser. No need for the large margins or position:absolute. Also remove position: absolute from the rest element
    • Consider using rem for font size , it' not recommended to use px for font size as absolute units don’t scale for example 15px will always be 15px on the same device. Using pixels is a particularly bad practice for font sizing because it can create some accessibility problems for users with vision impairments.
    • width: 300px an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem.
    • height: 450px It's not recommended to set fixed height to component, you almost never want to set it. let the content of the component define the height.
    • Remember a modern css reset on every project that make all browsers display elements the same.

    Hopefully this feedback helps.

    1

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