First attempt 3 column preview card component

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted over 1 year ago

  Hi

  As promised in slack…

  1. You need a modern css reset right at the start (look up Andy bells one)
  2. You shouldn’t be using any heights or widths anywhere at all
  3. Font size must never ever be in px. Use rem
  4. line height mustn’t use different units on different elements. Usually it’s unitless like 1.5
  5. Use consistent units for things like margin
  6. Initial font declarations should be on body not a wildcard (bad for performance otherwise)
  7. Change height 100vh on body to Min height 100vh, then on the next like min-height 100dvh (a newer unit)
  8. Media queries should be declared in rem or em. And only start the desktop media query when there is room for the new layout (400px is still too narrow I think)
  9. This would be way easier to read if css was in a separate file

  In HTML

  • don’t use h1s for the heading. You should only have 1 h1 per webpage and this is a single component challenge not a full webpage. You can presume it would sit lower down a page
  • learn more should be an anchor element not a button. Look up the difference between them
  • you must add empty alt attributes to those icons so the browser knows they are decorative images
  • don’t capitalise in html. Do that with css. Some screenreaders can read out letter by letter instead of whole words when text is capitalised in the html like that

  Marked as helpful

  1