Design comparison
Solution retrospective
feedbacks will be highly appreciated
Community feedback
- @vanzasetiaPosted about 2 years ago
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!
0 - Logo is an important content of the page. It's not decorative, and not the one with blank
- @aavv8931Posted about 2 years ago
I like what have you done! ✅ . Nevertheless, I might suggest to use just 1 <main> tag in the entire html. Because The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. Resource: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main"
👌
0
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