@zambobence
Posted
The semantic tags are great.
Personally, I would not use that many compound selectors in this quite simple layout, instead, I'd use an H1 for the title and a paragraph for the text. In this case, you can declare quite easily the attributes in CSS.
I would use a fixed width for the card and add a wrapper for the card content within the <section class = "qr-code-image-with-info"> with small padding, to solve the issue with the distortion in smaller screen sizes and to have a consistent margin.
<section class = "qr-code-image-with-info">
<div class = "container">
<figure class = "qr_code_image">
...
<section class = "qr_code_info">
...
</div>
</section>
If you follow in this way you only have to set the width of the image to 100% and by not setting height it would not distort the image either.
You do not have to use flexbox to center the card, you can use
.qr-code-image-with-info {
margin: 30vh auto
}
to center it horizontally and also push it away from the top of the screen.
I hope I could help you with my feedback and please let me know if you have any further questions.
Marked as helpful
@vikramvi
Posted
@benceturbulence Thanks for your valuable time to review and give feedback. I'll incorporate these changes in my next project.
Can you please share overall good practices wrt HTML and CSS you follow in any project ?
@zambobence
Posted
@vikramvi I cannot advise you which best practices to follow but I would give you some resources I am using to learn, one of my favorite tutor is Kevin Powel, you should check his free course "conquering-responsive-layouts" and his youtube page he is explaining CSS and HTML in a clear and understandable way using the best practices in his demonstrations.
I hope I could help you with that.
@vikramvi
Posted
@benceturbulence sure thanks mate.
