Frontend Mentor | 3-column preview card component

Community feedback

• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hi Victoria Alia, how are you?

  Welcome to the front-end mentor community!

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  You should wrap this div:

  <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="#">Victoria Alia</a>.
    </div>
  

  with a footer tag!

  <button class="btn btn3"> Learn More </button>

  The best choice would be to use a tag in which case the button is written learn more so this indicates that the user will be taken to another page to learn more!

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Victoria, You have done a good work! 😁

  Some little tips to improve your code:

  • Tip of graphic design: with font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.
  • add main tag and wrap the card for improve the Accessibility
  • remove descriptive text in the alt attribute of the images because it's only decorative
  • remove all width and height from container id and add min-height: 100vh because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  Your component is not complete. It needs to be responsive in order to be considered complete. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

  https://web.dev/learn/design/

  • To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the main element.

  • The “car images/icons” in this component are purely decorative; They add no value. So their Alt Tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  • The headings in your component are being used incorrectly. Since the h1 heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading since it is reusable and it will give each heading the same level of importance.

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

  • Your buttons should have a hover and focus-visible.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🍂🦃

  Marked as helpful

  1