3-column preview card component

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 9 months ago

  Hi

  There are some adjustments needed to the html in this

  1. You can import all the fonts in one go. You definitely should not be repeating the reconnect links.
  2. Content should always be contained within landmarks. This needs a main.
  3. Don't add extra divs for no reason! Keep the html as simple as you can. This only needs a div for the component, 3 divs for the cards/columns, and inside each an img, heading, paragraph and link.
  4. You must learn how and when to write alt text on images. There is a good post in the resources channel on discord about how to write good alt text. These icons are decorative so alt should be empty in my opinion.
  5. Learn more CTAs would navigate on click so must be anchor links not buttons.

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted 9 months ago

  With the css

  • always use a modern css reset at the start of the styles in every project. Andy Bell has a good one you can look up and use.
  • the body doesn't need height and width 100%. Just a min height in viewport units to cen it in the viewport. Make sure the is min height and not height! Never limit the height of elements that contain text, including the body.
  • the component max width must be in rem not px
  • do not set width or height on anything except images
  • why em and not rem or px for the card padding? That seems a strange choice.
  • font size should be in rem, never em. You are asking for bugs if you set font size in em because em compounds. You can lose all control that way.
  • font size must never be in px
  • use padding on the button link styles not height or width.
  • media queries must be defined in rem or em not px so that layout works for all users, including those who have different text sizes. Also 1440px would be far too late to change from mobile to desktop layout. Read this post about media queries

  Once the above is all fixed (html and css) there may be some more recommended tweaks to styles.

  0