3 Column Preview Card

Community feedback

• 

  Eray•1,410

  @ErayBarslan

  Posted almost 3 years ago

  Hey there, congrats on your solution! Design looks good, responsive and you have clean usage of CSS. Nothing much to add but some suggestions:

  • If you wish to place the attribution to bottom of page without effecting your container's placement you can use:

  .attribution {
    ...
    position: absolute;
    bottom: 0;
  }
  
  body {
    ...
    justify-content: center;
  }
  /* In this case you can place your container to center */
  

  • Background color is missing on body: background-color: var(--Very-light-gray); Although arguably white looks better so you might as well leave it as it is.
  • Instead using <div> on .container and .attribution you can use semantic elements to make the page accessible: <main class="container"> & <footer class="attribution">
  • You shouldn't leave alt empty. Screen readers skips empty alt. Since images on this challenge are for decorative usage, nothing wrong regarding accessibility. But your page might get lower SEO. Instead you can use like : <img src="./images/icon-sedans.svg" alt="sedan" aria-hidden="true"/>
  • On production, when you dirct links with target="_blank", adding rel="noopener noreferrer" will make it secure to attacks. Aside these nothing I'd add, happy coding :)

  11

  Marked as helpful
• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted almost 3 years ago

  Hi Nien,

  Congratulation on completing another frontend mentor challenge. I have some suggestions regarding your solution:

  • You can use the <main> landmark to wrap the body content (which is the three cards) and <footer> for the attribution. as using landmarks is important to improve navigation experience on your site for users of assistive technology.

  • About <h1>it is recommended not to have more than one h1 on the page. Multiple <h1>tags make using screen readers more difficult, decreasing your site’s accessibility. In this challenge , as it’s not a whole page, you can have<h1>visually hidden with sr-only. Then swap those <h1> with <h2>.

  • In my opinion, the images are much likely to be decorative. For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images.

  • What would happen when the user click those learn more? In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.

  • Don't capitalize in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalized text as they will often read them letter by letter thinking they are acronyms.

  Hopefully this feedback helps.

  12

  Marked as helpful