Frontend Mentor | Simple QR code preview using HTML & CSS coding challenge solution

Community feedback

@correlucas

Posted over 1 year ago

👾Hi Lakshan, congrats on completing this challenge!

I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code:

The html structure is fine and works, but you can reduce at least 20% of your code cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

✌️ I hope this helps you and happy coding!

Marked as helpful

Lakshan• 305

@M-lakshan

Posted over 1 year ago

@correlucas thanks Lucas, I'll follow your advice on my future build-ups. Appreciate your help ! 🙂✌🏼

romila• 3,570

@romila2003

Posted over 1 year ago

Hi Lakshan,

Congratulations 🎉 for completing this challenge, your Card component looks great, and it is great that you used flex to center the card. It looks pixel perfect.

The only thing I would suggest is to remove the header tag as it provides no use since there is no content within the tag. The header tag is defined as representing 'a container for introductory content or a set of navigational links' HTML Semantic Elements. Also, I would recommend you setting the value of justify-content to center.

Overall, great attempt and project and wish you the best for your future projects so keep coding 👍.

Marked as helpful

Lakshan• 305

@M-lakshan

Posted over 1 year ago

@romila2003 tnx for the heads-up Romila! * yh I also doubt that keeping the header empty. I'll correct this in my future builds. * are you talking about the <main> component -> justify-content: space-between; ? I used 'space-between' because I'm using my footer attribution as a hidden one. it uses some padding-top value until we hover over it. because of that padding, the whole element behaves as it has some height. so if I used <main> component -> justify-content: center; instead of justify-content: space-between; the center alignment of the QR section moves upwards in the mobile version. I couldn't able to fix it using margin & padding so I used this simple method. Inspect the site preview then you can understand what I achieved there. appreciate your help! 🙂✌🏼

romila• 3,570

@romila2003

Posted over 1 year ago

Hi Lakshan,

I was referring to the <body> not the <main> tag for the justify-content. But I see what you meant when you said that the card goes up when a user hovers over it. An option you could try, is giving your footer a position property and setting it to absolute. Then, give it a bottom property and set it to 2em, to prevent an overflow at the bottom of the screen. This will also prevent the card from going up and down too.

Hope this helps.

Marked as helpful

Lakshan• 305

@M-lakshan

Posted over 1 year ago

@romila2003 ah ha. got it. Tnx Romila, I will try your method in the next build (12th) 😃

Simple QR code preview using HTML & CSS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community