Design comparison
Solution retrospective
Feedback is always welcome :)
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Vanessa, congratulations on your first solution!π Welcome to the Frontend Mentor Coding Community!
Nice code and nice solution! You did a good job here putting everything together. Iβve some suggestions for you:
1.The border radius is too much rounded use a value under 30px like 16px:
main { border-radius: 16px; }
2.Use units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices. To save your time you can code your whole page usingpx
and then in the end use a VsCode plugin called px to rem here's the link β https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
βοΈ I hope this helps you and happy coding!
Marked as helpful0@VanessaAzPosted about 2 years ago@correlucas the units are a big lapse on my part.
Thanks for all the other advice I will make the changes, as soon as possible :)
1@correlucasPosted about 2 years ago@VanessaAz You're welcome Vanessa! I'm looking forward for your next challenge =)
0@VanessaAzPosted about 2 years ago@correlucas the extension is awesome! Already added it to my VS.
0 - @vanzasetiaPosted about 2 years ago
Hi, Vanessa! π
Congratulations on completing your first Frontend Mentor challenge! π
Here are some suggestions for improvements.
- I recommend using
h1
instead ofh3
. It is recommended for each page to have oneh1
. - Improve the alternative text of the QR code image. Tell the users about the QR code.
- I recommend adding
rel="noopener"
to any anchor tags that havetarget="_blank"
. It helps protect users of legacy browsers. I suggest reading the web.dev article to learn more about this. - Swap the attribution
div
withfooter
. Remember that each content should live in a landmark element. - Remove the
box-shadow
from the card. This way, your site will look closer to the original design.
That's it! I hope this helps!
Marked as helpful0@VanessaAzPosted about 2 years ago@vanzasetia amazing, already learning, didn't know about rel="noopener". I will make the changes right away. Thanks :)
1 - I recommend using
- @Raja-JunaidPosted about 2 years ago
Hello Vanessa! how are you?
Congratulation on completing this challenge! I really love your solution. Let me give you a few tips to improve your design:
-
When designing your website keep your work decent and lovely looking.
-
Use a framework because it is easy to use and also increases your speed.
-
Use decent colors and keep your website neat and clean
Keep Coding and Keep Practicing.
Happy Coding!
Marked as helpful0@vanzasetiaPosted about 2 years ago@Raja-Junaid
Why do you think using a framework is a good thing for this challenge?
0@Raja-JunaidPosted about 2 years ago@vanzasetia I'm not asking to use a framework for this challenge. I just asking to use overall.
0@VanessaAzPosted about 2 years ago@Raja-Junaid thanks for your advice for future coding, I will have this into consideration :)
1@vanzasetiaPosted about 2 years ago@Raja-Junaid
Using a framework isn't always a good thing to do. For example, for a small project using Bootstrap will only slow down the website.
Also, using a JavaScript framework such as React for a non-javascript website is also useless. (non-javascript websites such as static blogs, etc)
All your feedback is not specific. It's just buzzwords for me.
1@vanzasetiaPosted about 2 years ago@Raja-Junaid
Please try to provide specific feedback to the solution author. π
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