Design comparison
Solution retrospective
Any feedbacks are welcome. I have some questions regarding background and fontawesome icons.
1- I tried to position my background exactly as the design, and it worked but only when I did background-size:contain
. The issue is using contain, when my browser got bigger, but not big enough for desktop size yet, the background doesn't cover the whole page. I hope I explained this well enough.
2- Are we still able to use fontawesome with CDN now? or we can only use with Kit? (version 5 and up)
3- Any suggestions on how I can clean up my codes? Any recommended articles/ videos on this matter?
Thank you in advance for anyone's help. I love to learn so throw me some feedbacks please :D
Community feedback
- @vanzasetiaPosted over 2 years ago
Hello, Nguyen! 👋
Great work on this challenge! Your solution looks pretty good! 😀 It's great that you wrap all the page content with landmark elements! Well done! 👍
Regarding your questions.
- I notice that it use
background-size: cover
and it works well. I usedbackground-size: cover
and it worked well. However, I hadbackground-position: center right;
and it looked similar to the design. You can see my solution if you want. - Yes, you can visit cdnjs.com and grab the
link
tag for the Font Awesome for version six and below. But, I would recommend downloading the needed icon from the Font Awesome website instead of importing the entire icons. It is going to boost the performance of the site.
For the third question, here are some suggestions from me.
- Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
- Not all images need alternative text. In this case, I would recommend leaving the
alt=""
empty so that the screen reader users won't have to listen to unrelated content.
A11y checklist would be a great resource to make your site accessible. Make sure that everytime you submit any solution you check as many items as possible.
That's it! Hope this helps. 😊
Marked as helpful1@jesuisbienbienPosted over 2 years ago@vanzasetia thank you for answering all my questions. Your feedbacks are very helpful. I really appreciate it.
0@vanzasetiaPosted over 2 years ago@jesuisbienbien You're welcome! Glad you found it to be very helpful! 😄
0 - I notice that it use
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