3 column preview card component

Community feedback

• 

  Mark Lawson•90

  @walkonmars36Posted over 1 year ago

  Hi.

  Well done for completing the challenge. You might want to read up on the use of heading tags. You're using multiple <h1>'s here which should really be <h2>'s. MDN docs points out that though it is allowed in HTML standards to use multiple <h1>'s on a page, these mustn't be nested. Overall it's considered good practice to only use one, for the main page heading.

  Have a look at the MDN page for section headings

  This page also gives a good account from an SEO perspective - SEO Sherpa

  All the best

  0

  ---

  

  Brijeshkumar Patel•200

  @brijeshkumar001Posted over 1 year ago

  @walkonmars36 Thank you for your feedback and suggestion! I appreciate the resources you shared and will make sure to review them thoroughly to ensure that I am using the correct heading tags in the future.

  I understand the importance of using proper heading tags not only for SEO purposes but also for accessibility and readability.

  Thank you again for taking the time to provide your feedback, and please feel free to let me know if there is anything else I can improve upon.

  0

  

  Mark Lawson•90

  @walkonmars36Posted over 1 year ago

  @brijeshkumar001 You're welcome, I'd be grateful if you could mark my feedback as helpful 🙂

  0
• 

  Stephen Yu•150

  @StephenYu2018Posted over 1 year ago

  Before I answer your question, I want to point out that the hover states that was in the implementation are not quite correct. According to what's displayed in /design/active-states.jpg, the button should have a white border and text against a background with its card theme color.

  There's not really much I can suggest to reduce code duplication.

  You could try to use JS to extract the card creation semantics & styling into a function, then call that function 3 times, each time passing in different background colors and text content. However, that tends be more difficult to organize in vanilla JS since it takes an imperative approach (how to make these elements, style them, and assemble them together?) as opposed to the declarative approach HTML5 provides (what elements should I use under this existing element, and what CSS styling should I give it?). You could instead use a JS frontend framework/library like React, Angular or Vue, that harness the power of JS while keeping the declarative approach to building UIs. Though that may be overkill for a project of this small magnitude.

  One thing you can do is to use CSS variables in your stylesheet. For example, you can declare the variables to store color values in the root and give it names:

  :root {
    --bright-orange: hsl(31, 77%, 52%);
    --dark-cyan: hsl(184, 100%, 22%);
    --very-dark-cyan: hsl(179, 100%, 13%);
    --transparent-white: hsla(0, 0%, 100%, 0.75);
    --very-light-gray: hsl(0, 0%, 95%);
  }
  ...
  

  And then you can use them throughout your stylesheet:

  ...
  body{
    ...
    background-color: var(--transparent-white);
  }
  ...
  main h1{
      ...
      color: var(--very-light-gray);
      ...
  }
  ...
  main p{
      ...
      color: var(--transparent-white);
      ...
  }
  ...
  .sedan{
    background-color: var(--bright-orange);
  }
  .sedan button{
    color: var(--bright-orange);
  }
  .suv{
    background-color: var(--dark-cyan);
  }
  .suv button{
    color: var(--dark-cyan);
  }
  .luxury{
      background-color: var(--very-dark-cyan);
  }
  .luxury button{
      color: var(--very-dark-cyan);
  }
  ...
  

  The benefit is that if any color value needs to be changed with the intention of changing all instances it's used at to correspond with the style guide, all the color values will be kept in one place, making it easier to find and to correct all its instances. This isn't just exclusive to CSS color values. CSS variables can also store CSS size measurements.

  0

  ---

  

  Brijeshkumar Patel•200

  @brijeshkumar001Posted over 1 year ago

  @StephenYu2018 Thank you again for taking the time to provide your feedback, and please feel free to let me know if there is anything else I can improve upon.

  1