Social Profile links using HTML and CSS

Community feedback

• 

  P

  Levi•230

  @law973Posted 2 months ago

  Hey!

  I appreciate the use of transitions on the buttons, as it looks nice and I haven't seen that too often. Using anchor elements instead of buttons might be a more fitting choice, but in any case the card is pretty good.

  Also, I had someone give me a tip about accessibility that seems relevant here. Those links in the attribution div open new windows when they're clicked on, which means they could be confusing for those using assistive technology. In cases like that, text (such as "(Opens in a new tab)") can be placed in a span inside of the anchor element, the span can be given a class (like "sr-only"), and some code like this can be placed in your CSS:

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

  It won't affect the design visually, and it would help some users. (I got the code above from here.)

  One more thing: with this particular challenge, the background color makes the links in the attribution div hard to see. If you ever want to find out if certain text and background colors have enough contrast, try out a tool like the Contrast Checker.

  Happy coding!

  0