3-Column Preview Card Component

Community feedback

• 

  Agnar•220

  @agnar-nomadPosted about 2 years ago

  Hi,

  congrats on the challenge completion.

  • I wonder why you did not use the proper fonts, even though you imported them.
  • Your class names should be more descriptive, tied to the element they represent.
  • Fixed lengths in px are the enemy of responsive design. Consider using relative units on element widths and heights.
  • You should always start headlines with an h1 element, not h2, so that it semantically makes sense and increases accessibility.
  • You are repeating yourself when setting up button properties - a LOT
  • You are repeating yourself a LOT in the media queries too, I suggest to look into how media queries only change certain aspects of the base code, otherwise they also read the base code.

  Marked as helpful

  0

  ---

  

  Ngbea Gloria James•30

  @NgbeaGloriaJamesPosted about 2 years ago

  @agnar-nomad thank you for your feedback. I have a few questions, about the fonts I thought me pasting it in my html head would do the magic. How should I have used it? I will really appreciate your response

  0

  

  Agnar•220

  @agnar-nomadPosted about 2 years ago

  @NgbeaGloriaJames certainly

  when you import your fonts in the html, that's only the instructions on how to write those symbols, however the browser will still use a default font (usually a variant of sans or Times), unless you declare otherwise

  you must declare them in your CSS, for example:

  body {
  font-family: "Lexend Deca", sans-serif;
  font-weight: 400;
  }
  h2 {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  }
  

  this way the browser will use Lexend Deca in the body if there are no issues, but if there are any issues with the font import, the browser will use sans-serif as a backup font (also known as a 'fallback' font) The same applies to the second font in <h2> headings

  Marked as helpful

  0

  

  Ngbea Gloria James•30

  @NgbeaGloriaJamesPosted about 2 years ago

  @agnar-nomad Thank you so much this was really helpful.

  0