Responsive 3 column preview card using CSS, HTML and flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello CarlEdem97 ,

  You have done really nice work , Well done ! I have few suggestions :

  • Replace<div class="attribution">by a < footer >.

  • For any decorative images, each img tag should have empty ``alt="" andaria-hidden="true" ` attributes to make all web assistive technologies such as screen reader ignore those images.

  • You can add a <h1> with class="sr-only"(Hidden visually, but present for assistive tech).

  .sr-only {
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important;  /* 2 */
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;            /* 3 */
  }
  

  To read more

  • You can replace the <h1 > by <h2>.

  • It's better to use remand em , don’t use px for width, height, font-size, line-height, margin ….

  • border-radius and overflow hidden to the container that wraps all the cards so you don't have to set it to individual corners.

  I recommend not:

  • capitalise in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalised text as they will often read them letter by letter thinking they are acronyms .

  • use nesting css selectors. Really important to keep css specificity as low/flat as possible. Try to put classes directly on anything you want to style.

  I really this feedback helps , happy and keep coding

  1
• 

  Edem•50

  @CarlEdem97Posted almost 3 years ago

  Thanks for the feedback, i'll incorporate your suggestions

  0