3 column preview card component using HTML and CSS

Community feedback

• 

  CyrusKabir•1,885

  @CyrusKabirPosted about 3 years ago

  hello my dear friend ♥♥ you did good and clean in your second project and here some advie :

  • try add some line heigth to your cards text
  • comment different section of your css code i mean if you have some css reset part added between two comment like this (for example : /* css reset */) you can have some advantages with this

  Marked as helpful

  0

  ---

  

  Tabassum Fatima•215

  @tab21Posted about 3 years ago

  @CyrusKabir i was really feeling something isn't right thanks "try add some line height to your cards text" for this , will add for sure and I will try to add comments in my next codes

  1
• 

  Muhammad Shajjar•1,100

  @muhammadshajjarPosted about 3 years ago

  Hey, Awesome work on this one, as this was your second challenge, you did great in it . There are more challenges are waiting for you, go and solve them for more learning. some suggestion that would help you

  • It looks more attractive if you properly center your cards.
  • Try to add max-width to a body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports, it is first stepped to responsiveness in my opinion.
  • For Learn More they are links so should be in a . Buttons are more likely to act as control some thing.
  • To overcome your accessibility issue you would need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:


  <main>
  <div class”container”> 
  </div>
  </main>
  

  Work on a class naming convention and if possible have a look at BEM naming convention css tricks and kevin Powell on youtube leads you to the best

  Marked as helpful

  0

  ---

  

  Tabassum Fatima•215

  @tab21Posted about 3 years ago

  @muhammadshajjar thank you for the time and the explanation you gave I will definitely work on it. I didn't knew main and all can also be tags.

  0