Four Card Feature Section

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To properly center your content to your page, you will want to add the following to your body element (this method uses CSS Grid):

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  More Info:📚

  Centering in CSS

  • The “Reliable, efficient delivery Powered by Technology” is one single heading so the entire thing should be wrapped in a single h1 heading along with a span element.

  • There needs to be header and main element in your HTML code to make semantically corrected and accessible.

  • Your use of heading is incorrect. You can only use the h1 heading once. You are using it for multiple headings.

  • Avoid using inline CSS. It makes you code difficult to maintain and organize.

  • The “icons” serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • There are more things that needs fixing, these are just a few of them.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0
• 

  Pranshu Sahu•770

  @Pranshu-SahuPosted about 2 years ago

  Hello 👋 my friend @cychan00 your solution looks pixel perfect

  Great solution

  If you don't mind I want to know how much time ⌚ you take to complete each project.

  The only thing I would recommend you consider using more accessible HTML tags instead of just only div for an instance you can use main tag to wrap four cards and header tag to wrap the top headings.

  Hope you find it helpful.

  0