Design comparison
Solution retrospective
I really appreciate it if you left feedback.
Community feedback
- @FarisPalayiPosted over 3 years ago
Looks great and responds really well 👍
One suggestion is that, try to set the alt text of the images that are purely decorative to
alt=""
, so that assistive devices can ignore them.Happy coding ✨
Marked as helpful1@shibuwdPosted over 3 years ago@FarisPalayi Thank you so much for the kind words. Thanks for your suggestion. Happy coding to you.
1 - @grace-snowPosted over 3 years ago
Hi
As well as Faris' suggestion, I see some problems in your html at the moment. All very easy to fix ☺
- logo alt needs to say the name of the product! Assistive tech users (and search engines) currently would not know what this site is called from
alt="logo"
andalt="f-logo"
- don't skip heading levels. There are no h2s at the moment. All headings except your h1 need to change level
- in the footer you have used 3 lists where you should only be using 1. Look into css column properties to do the layout on desktop.
- that list of links also needs wrapping in a nav element
- the social links need labels or screenreader text
Other than that, it looks like your desktop version needs the sizes and alignment adjusting to be like the design (I am viewing on mobile and looks fine on there)
Looking at the css I think you need to spend some time learning how to make styles more reusable. It is highly unusual to see padding adjusted on low level elements like paragraphs. Additionally by using nested element selectors instead of single classes, you are increasing specificity and making styles break if html has to change. (eg Changing heading levels in html means you need to change lots of lines of css, which you wouldn't have to do if styles were tied to a class)
It is clear from the number of media queries you're including that your approach to css is making it more difficult for yourself than it needs to be.
I recommend having a look at css experts writing to improve this area. Especially Andy Bell's site, Rachel Andrew, Heydon Pickering etc... That will help you.
Good luck
Marked as helpful0 - logo alt needs to say the name of the product! Assistive tech users (and search engines) currently would not know what this site is called from
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