This is my first challenge on Frontend Mentor, I am very very newbie so I'd appreciate any kind of feedback. Thank you!
@momorocks111
Posted
It doesn't apply here, but in larger projects, in the css file I personally place a :root property so I can declare variables for each color and font size. It's faster for doing the css. Hope this helps :)
@adrivasarhelyi
Posted
@momorocks111 Every tips are helpful so thanks I'll try when I'll start doing bigger projects:)
@Islandstone89
Posted
Congratulations on your first project :)
My feedback:
HTML:
As mentioned above, it needs a <main>. You can put it on the .container.
Alt text should also tell where scanning QR Code leads.
"Scan the QR code..." should be a paragraph.
CSS:
Remove the width and height on the img. Add max-width: 100%, so it doesn't overflow the card.
Remove width on .container - it's a <div>, which means it's a block element, and they have 100% width as default.
Height should be min-height.
Remove width and height on .wrapper. You rarely want to set fixed dimensions! Consider adding a max-width in rem if card gets too big at larger screens.
You only need to put text-align: center on the <body> - the heading and paragraph will inherit the value from its ancestor.
@adrivasarhelyi
Posted
@Islandstone89 Thank you very much for your detailed feedback! They were very helpful I corrected my code according to them. :)
@Islandstone89
Posted
@adrivasarhelyi Glad to help! Don't forget to upload your files again to the repo :)
@adrivasarhelyi
Posted
@Islandstone89 I won't, thank you. :)
@Zy8712
Posted
Your website is pretty solid, the only thing I'd really add in is a <main> tag to wrap around all of your stuff. This is primarily for accessiblity purposes. Besides that your solution is very close to the original design. Nice work 👍
@adrivasarhelyi
Posted
@Zy8712 Thank you! I was thinking about doing what you're saying but next time I'll add it to my code, thanks!
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
