3-Column Preview Card Component | HTML5, CSS3, Grid & Flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted over 1 year ago

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

  Regarding your question, it is best practice to link the font-family in the HTML due to performance (even if it is minimal).

  • The section and figure elements are being used incorrectly ❌. section are for sections of a page while the figure is only used when there is a figcaption.

  • 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.

  More Info:📚

  MDN The Anchor element

  • For "visually hidden" content use the following code:

  .visually-hidden {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
  }
  

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

  Happy Coding! 👾

  Marked as helpful

  1

  ---

  

  David Ochoa•290

  @davidochoadevPosted over 1 year ago

  @vcarames Thank you for your response,

  and please forgive me for bombarding you with questions again. In this case, since we are dealing with icons, the <picture> tag or even the <figure> tag would not be appropriate, correct? Should I settle for a <div>? Or is there a specific container element that is more suitable for wrapping these non-descriptive, purely decorative elements?

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted over 1 year ago

  @davidochoadev

  Ask as many question you have. That’s why I’m here for.

  The icons don’t need to be wrapped by anything; img on its own is enough.

  The only time you’ll use the picture element is when you re using different sized images during different breakpoints. As for the figure, only if there is a figcaption.

  0