Three Column Preview - Responsive

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, BryanCarlos! 👋

  I recommend adjusting the size of the cards. Based on the design comparison, the cards are bigger compared to the design. Try to make the site looks as close as possible to the design.

  Replace all the <h1> with <h2>. There should not be more than one h1 on a page. Many <h1> elements mean many titles which can confuse the users, especially the screen reader users.

  The buttons do not need to be wrapped by a <div>. You should remove them.

  The "Learn more" buttons should not be <button> elements. If you think that the users will get navigated to another page when they click one of those buttons, then you should use <a> elements instead.

  Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS

  I hope this helps. Happy coding! 😄

  Marked as helpful

  0
• 

  Francisco Carrillo•5,540

  @frank-itachiPosted over 1 year ago

  Hello there 👋. You did a good job!

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • Wrap the page's whole main content in the <main> tag.
  • If your code has different sections that have a specific purpose like articles , sections or footer, it’s a good practice to enclose those parts with HTML5 semantic tags. For example, you could wrap the <div class="attribution">' inside the <footer>` tag.

  CSS🎨:

  • Avoid using absolute length units px, especially for font-size and width properties, because they are not relative to anything else so that means they will always be the same size. Instead, you can use relative lengths like em or rem. The benefit of that last one is element which has that unit will scale relatively to everything else within the page, e.g., the parent container. You can dig up about it here
  • You can also use the text-transform: uppercase; property to make the sedans word e.g. appear in upper case even though you typed it lower cause in the HTML file.

  I hope you find it useful! 😁😁 Above all, the solution you submitted is great👌!

  Happy <coding /> 😎!

  Marked as helpful

  0