QR code card using HTML, CSS, flexbox, and SASS.
Design comparison
Solution retrospective
After completing this challenge, I questioned the necessity of creating for each element.
What challenges did you encounter, and how did you overcome them?The project helped me review concepts related to CSS custom properties and Flexbox. It also encouraged me to revisit how to set up and work with SASS.
What specific areas of your project would you like help with?I'm open for reviews and suggestions.
Community feedback
- @kodan96Posted 5 months ago
hi there! ๐
a couple of things I packed up for you after looking at your code:
HTML:
- for SEO and accessibility manners all HTML files should contain an h1 tag (one and only one)
- header tags are not about
font-size
orfont-weight
(you modified the font size on the h2 tag anyway), but they supposed to give semantic meaning for the page, giving structure to the page (mostly this followed along with visual hierarchy asw)
CSS:
-
use relative units instead of pixels, it helps with responsive design, and also gives the chance for users with bad eyesight to increase the font size of the page.
-
your
.main__container
CSS selector doesn't do anything in the sense that you could apply all these to thebody
itself. -
don't apply fixed
width
orheight
to your elements, let their child elements determine these dimensions. if you really want to determine dimensions for your elements usemax-width
ormin-width
-
you used all these:
.main-container .info-container { display: flex; flex-direction: column; justify-content: center; align-items: center;
but they can be replaced by a
text-align
property and some padding. Flexbox and Grid are powerful tools indeed, but over-relying on them is not good either, sometimes you can just use padding and margin to do the same.Hope this was helpful ๐
Good luck and happy coding! ๐ช
Marked as helpful0@IncorrigibleSpiritPosted 5 months ago@kodan96 Hi, Koda! Thank you so much for your feedback. I highly appreciate all the details and explanations you offer me. I will fix these little details ASAP. ๐
Happy coding!
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