Responsive Huddle landing page with alternating feature blocks

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted about 2 years ago

  Hi, Sumanth Potharaju Chandana! 👋

  Add alternative text to the logo. Logo is an important content of the page. It is not decorative, and not the one with blank alternative text (alt=""). Without that information, a screen reader user or a search engine will not know what the site/project is called.

  Each of the social media icons should be wrapped by an anchor tag. They are the social media links for the company. Then, make sure you provide an accessible name to each social media link.

  Also, I think all the <button> elements should be <a> elements. For me, if this is a real website those buttons would navigate the users to a sign-up page, not doing an action.

  For your information, anchor tags are for navigation. The <button> element is for an action like opening a modal, submitting a form, toggling an element, etc. It is essential to use the correct elements.

  I recommend writing the CSS using the mobile-first approach (using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.

  If you use the desktop-first approach, then you need to write more CSS to simplify the layout (usually into a one-column layout).

  The mobile-first approach often results in smaller CSS. As a result, the website loads faster.

  Learn more — Responsive design ground rules | Polypane

  I hope this helps. Happy coding! 😄

  01