@vanzasetia
Posted
Hi, Tunde! 👋
Good effort on this challenge! 👍
Here are some suggestions for improvements.
- Logo is an important content of the page. It's not decorative, and not the one with blank
alt=""
text. Without that information, a screen reader user or a search engine will not know what your site/project is called. - The download buttons should be anchor tags with
download
attribute. - There's should only one
main
landmark element in this case. - Make the
b_quote
as a list element. The content is not a quotation so it should not be wrapped byblockquote
. - I recommend adding
width
andheight
attributes to each image element. This way, the browser knows how much space the image requires before it can be fully loaded. As a result, it will optimize CLS (Cumulative Layout Shift). - The
exclusv_logos
should be asection
with a visually hiddenh2
. - The images inside
exclusv_logos
should have alternative text. This is a section where the product is being used by some big companies. - The FAQs, Contact Us, Privacy Policy, etc should be link elements.
- Also, I recommend wrapping those links in a list element. Then, you can use CSS
columns
for the layout. - Each of the social media icons should be wrapped by an anchor tag. Then, use
aria-label
to give each link an accessible name.
I have two recommended videos. The first one is about how hard HTML is (HTML is not easy). The second one is talking about HTML and modern CSS.
- Manuel Matuzović - Lost in Translation - YouTube
- Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
I hope this helps! Happy coding!