Responsive landing using CSS

Community feedback

• 

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  Hello, awesome job here.

  Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of your site. The anchor tag will achieve this.

  <a href="/">Learn More</a>
  

  Note It's a violation of the HTML5 specification to include either an anchor tag inside a button tag, or a button tag inside an anchor tag. Interactive elements are not permitted to be children of one another, as it introduces ambiguity with regard to user intent.

  Some browsers (like Chrome) will support this practice and, I believe, give the outer tag precedence when a user clicks on the nested elements, but not all browsers support it to any degree, and because it's not in the spec no browser is ever going to be required to. You'd be severely restricting the efficiency and effectiveness of your web application's cross-browser compatibility if you do this.

  Therefore, it's preferable to style your link into a button.

  • Buttons are used for actions that affect the website’s front-end or back-end like form submission.
  • links are used for navigation and actions that don’t affect the website at all.

  To solve the alternate text issue, car icons are for decoration purposes only, so they can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:

  <img src="./images/icon-sedans.svg" alt aria-hidden="true">
  <img src="./images/icon-suvs.svg" alt aria-hidden="true" >
  <img src="./images/icon-luxury.svg" alt aria-hidden="true" >
  

  Lastly, you should use the cursor: pointer property to indicate that the element like a button or a link is clickable.

  Marked as helpful

  0

  ---

  

  Guilherme Luiz•110

  @guilhermeluizdPosted almost 2 years ago

  @Ambe-Mbong-Nwi Thank you for the advice! I will pay attention on that in my next projects.

  0

  

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  @guilhermeluizd You are welcome. Glad I could be of help

  0