3-column preview card component Using HTML & CSS Only

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  Nice work Fadi. Look into htm5 semantic elements like main, header , footer etc. Changing the div with a class of card into a main element will help you clear the accessibility issues raised in the report.

  Marked as helpful

  2

  ---

  

  Fadi•145

  @nofear1985Posted over 3 years ago

  @ChamuMutezva Done bro.

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Fadi!

  You can just delete index1.html file, since it's just for development purposes only.

  More feedback:

  • Only use one h1 on every .html page, it's a best practices 👍. You can other heading tags like h2 - h3 as much as you want.
  • You have to avoid using !important flag, since it will create a big problem even on small project. The strategy to avoid using it, is to just select the element directly.

  /* 👍 */
  .element {
    /* Some styles... */
  }
  
  .inner-element {
    /* Some styles... */
  }
  
  /* Don't do this */
  main .element {
    /* Some styles... */
  }
  
  main .element .inner-element {
    /* Some styles... */
  }
  

  • On my phone this solution looks good 👍.

  That's it! Hopefully this is helpful!

  Marked as helpful

  0

  ---

  

  Fadi•145

  @nofear1985Posted over 3 years ago

  @vanzasetia Done bro.

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @nofear1985 Good job! 👍

  I have some more feedback for you. You should use anchor tag for every learn more, since in reality it will redirect the user to another page.

  Also I found an issue that when the buttons get hover, the text is also disappear.

  Use rem unit for everything, rather than px. It will make the user can control the size based on their setting.

  That's it! Hopefully you this new issue that I found.

  0

  

  Fadi•145

  @nofear1985Posted over 3 years ago

  @vanzasetia Done bro.

  0