@vanzasetia
Posted
👋 Hi Priyanka!
🎉 Congratulations on finishing your second challenge on Frontend Mentor! I have some feedback to help you improve this solution:
- Accessiblity
- For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. - Only have one
h1
for every page. Heading one is used to identify each page, not for sectioning. - Also this should not be a heading. It should be a paragraph.
- For any decorative images, each
<h1 class="subhead">10k+</h1>
- Wrap all the page content inside a landmark. In this case, you can wrap it with
main
tag (This should fix the generated issue). - I would recommend making each
subdiv
to be ali
and wrapping allli
withul
. This will make your HTML markup more semantic. - Other
- Don't manually uppercase the text (unless you want it to be spelled by screen reader). Use CSS instead.
<p>COMPANIES</p>
I would recommend refactoring this code (do this challenge again), by following this guide:
- Try to learn and use
background-blend-mode
ormix-blend-mode
properties to create the purple overlay. - Don't use
float
in this case. You can use flexbox to make the card have two columns on desktop view. - Add
max-width
to the container or the card to prevent it become too large on the small or big screen size. You can see the issue by seeing your website on600px
width to1439px
and also>1440px
. - You can make the card perfectly on the center by using flexbox.
- This is obvious, but I would recommend seeing other people solutions if you get stuck or want to get an idea.
- (Best Practice) I would highly recommend naming your class in English and trying to follow BEM class naming convention.
That's it! Hopefully, this is helpful!
Marked as helpful
@priyankavasam7
Posted
@vanzasetia Thanks a lot! I didn't expect such a detailed explaination with resources to refer. I came to know blunders in my code. Thanks for going through my code and rectifying mistakes. I will do this challenge again based on your suggestions and improve it. Your feedback helped a lot😊😊
@vanzasetia
Posted
@priyankavasam7 You're welcome! Glad to know that it helped you!