Huddle landing page

Hello, Samuel! 👋

Congratulations on completing your first junior challenge! 🎉

First, I recommend visiting the Solid Start website. It gives you an overview of web accessibility.

Some more suggestions for improvements.

• The logo and the "Try It Free" button should be outside the main landmark. It should be wrapped by header tag instead.
• Remove the word "logo" from the alternative text. The semantic meaning of the img element will tell users that it is an image.
• I think the "Try It Free" is a link instead of a button. I would think that when the users click that, it will navigate the users to another page (e.g. sign-up page).
• For your information, anchor tags are for navigation, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements.
• I recommend taking a look at "Quick tip: Using alt text properly - The A11Y Project".
• Avoid using br elements for presentational purposes. Read the "Accessibility concerns" part of the MDN documentation for br.
• Not every image needs alt text. If the image does not provide any meaningful content, such as those illustrations, consider using empty alt text (alt=””). This saves your screen reader users time as they navigate the page.
• Don't skip the heading level. There are h4 but there is no h3 on the page.
• I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.
• Those h5 are not headings. Those are footer links.
• The last section of the page should be wrapped by footer landmark.
• The alternative text for the social media icons are correct. You only need to wrap each icon with an anchor tag. They are social media links of the company.
• Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs. I recommend reading this article about rem and em unit. This article explains both units in a simple way.

I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

• Manuel Matuzović - Lost in Translation - YouTube
• Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
• Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

I hope this helps! Happy coding!