Design comparison
Solution retrospective
Hey Everyone, I have completed the challenge using flexbox.
Check out my following article, where I have briefly explained the steps I have followed to complete this challenge.
https://uxplanet.org/challenge-004-clipboard-landing-page-7d7e088c5b33
Thank you for checking this out, and feel free to leave your feedback and thoughts!! Any feedback and tips are welcome.
Many Thanks! Nathasha 😊
Community feedback
- @vanzasetiaPosted over 2 years ago
Hello, Nathasha! 👋
Congratulations on finishing this challenge! 🎉 Also, you have written a nice blog post on how you finished the challenge. Great job! 👍
Some suggestions from me.
- I would recommend using the
img
element for the logo SVG. It will clean up the HTML a lot and then the logo image is not going to have:hover
effect (it is much easier to use inline SVG when the color of the image needs to be changed). - Also, the logo is an important image. It needs to be accessible by the screenreader users as well. So, I would recommend having an alternative text. Just tell the company name,
alt="Clipboard"
. This way, the screenreader users and potentially the search engine bots will know that it is the site of the Clipboard company. - Not all images need an alternative text. So, I recommend leaving the
alt=""
empty for all the images that don't add meaningful information or just for decorations. For example, if theimage-computer.png
doesn't exist on the site then there would be no missing information. But, the images inside theadvertising
section are meaningful images. If those images don't exist on the site then there are some missing information.- Some resources to learn about the alternative text.
- I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.
I hope this helps! Keep up the good work! 👍
0@vanzasetiaPosted over 2 years ago@NathashaR1997 One thing that I almost forget to mention is to fix all the issues that have been reported. If you don't know about the issue then you can click the "Learn More" link.
Let me know if you have any questions. I would be happy to help you. 😉
0 - I would recommend using the
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