QR Code Component - Responsive Web Design with HTML and CSS only
Design comparison
Solution retrospective
I've started my web developer journey with this 1st project, please review and let me know below
-
Good practices wrt HTML - I've used semantic tags as much possible. Is this good enough for SEO and accessibility ?
-
CSS improvements needed - I have always found CSS is difficult to master but I'm slow & steady with my efforts. Please review & let me know good practices, areas of improvement
Community feedback
- @zambobencePosted over 2 years ago
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 helpful1@vikramviPosted over 2 years ago@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 ?
0@zambobencePosted over 2 years ago@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.
1
Please log in to post a comment
Log in with GitHubJoin 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