Design comparison
Solution retrospective
This is my first submission, please let me know what I can fix. I did struggle a little with the fonts.
Community feedback
- @denieldenPosted over 2 years ago
Hi Danny, great work on this challenge! š
Here are a few tips for improve your code:
- add
main
tag and wrap the card for improve the Accessibility - add
margin: 0
to the body for remove the scroolbar of browser - use
h1
instead a simplep
for the card title - instead of using
px
use relative units of measurement likerem
-> read here
Overall you did well š Hope this help!
Marked as helpful0@dannyguzman31Posted over 2 years ago@denielden
Thanks ! will add those for sure :)
1 - add
- @kenreibmanPosted over 2 years ago
Nice job on the submission! Unfortunately the preview image isn't appearing on here, but I looked at your live site and it looks great.
I noticed you were centering the
div
twice with yourbody
andcontainer
. Yourbody
could have been yourcontainer
in this case, and thecontainer
could have been youritems
. In my opinion it was not necessary to do that.I would also recommend when you're centering a
div
to usemin-height: 100vh
instead ofheight: 100vh
to make responsiveness easier in future projects. Setting a fixedheight
like that may bring some issues in bigger projects. I would also stray away from setting a fixedwidth
like100vw
, as well, for parent elements. The setwidth
also applies to containers, or cards as well. I would set amax-width
instead, which is more responsive friendly, and you can also reassign the dimensions in a media query when the screen gets bigger/smaller.As you do bigger projects on here, you should also start giving your elements more "meaningful" names. Always think about someone else reviewing your work, and wondering if they would be able to understand what each line is referring to. If it was a bigger project, I would have no idea what
p1
andp2
is referencing. Start using naming conventions like BEM early, and maybe start putting comments in your code as well, which will definitely help people in this community when they review your code.I hope this helped!
Marked as helpful0@dannyguzman31Posted over 2 years ago@kenreibman
Thanks for the input! This really helps a ton!
1 - @shashreesamuelPosted over 2 years ago
It appears that there is a problem with your hosting. I recommend checking your website hosting logs to make sure that it has no errors
I hope this helps
Cheers Happy coding š
0@dannyguzman31Posted over 2 years ago@TheCoderGuru
Yeah for some reason it did not show, but here it is https://dannyguzman31.github.io/QR-Code_Practice/
0
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