3-column preview card component using only html css !!!

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  When going to small screen size the cards are pushed to the left side. Make it a good habit of using css reset. Below you can see a simple css reset.

  Change the width and height of the container to auto to fix the issue with the cards being pushed to the left side.

  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .container {
      width: auto;
      height: auto;
      display: flex;
  }
  

  Marked as helpful

  0

  ---

  

  ahmed elsayed•90

  @ahmed9143Posted about 1 year ago

  @hitmorecode thanks bro for these great tips

  0
• 

  Mayank Arora•430

  @mayankdrvrPosted about 1 year ago

  Congratulations Ahmad for completing this challenge. I have a few observations that might be helpful-

  1. Change background color of the page from white to Very Light Gray as given in style-guide.md starter files.
  2. Corners of card borders have to be rounded using border-radius css property.
  3. "Learn More" button has to change color to respective card color on hovering the cursor. Also, check the button font style.
  4. Recheck the font color of the text inside the card. Heading and paragraph text should be aligned with the same vertical margin in the card. Heading text of card does not have to change color on hovering over it.
  5. Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility.
  6. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
  7. html file should have a <h1> tag for better web accessibility and better Search Engine Optimization(SEO) and page ranking.

  Awesome solution and keep it up.

  Marked as helpful

  0

  ---

  

  ahmed elsayed•90

  @ahmed9143Posted about 1 year ago

  thanks for these great tips , I'll apply it ,have a nice bro@mayankdrvr

  1