3-column preview card component challenge hub using Sass/scss

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hello Hugo, great job! Congratulations on completing the challenge.

  Add same border in button to the normal state, so that it doesn't jump when hovering over it :)

  Tip of graphic design: With font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading) ... for the designer it's a really awful font!

  • I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.

  Overall you did well! Hope this help ;) Keep it up and happy coding!

  Marked as helpful

  1

  ---

  

  Hugo Padilla•210

  @HugoPadillaPosted almost 3 years ago

  @denielden Thank you very much. I really appreciate it. I will put these recommendations into action!

  1
• 

  namasSinjali•190

  @namasSinjaliPosted almost 3 years ago

  Good job.👍

  I'd like to point out one thing though: the card's height changes when the mouse pointer hovers over a button. It doesn't feel good and also causes performance issues as the whole card needs to rerender.

  Suggested solution

  Define the button's border with color transparent and make it visible on hover.

  .button {
      ...
      border: 2px solid transparent;
  }
  .button:hover {
      border-color: white;
  }
  

  2

  ---

  

  Hugo Padilla•210

  @HugoPadillaPosted almost 3 years ago

  @namasSinjali Thanks for your comment. I will try to test it!

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @HugoPadilla ,

  I have some suggestions regarding your solution:

  • There should be two landmark components as children of the body element - a main (which will be the component ) , a footer landmark for the( attribution).

  • For any decorative images, each img tag should have emptyalt=""and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.

  • swap the buttons for anchor tags. Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button., though, so it's a good idea to make a habit of specifying the type

  • 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;
  	-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;            
  }
  

  • The links learn more moves up on the hover , it's not normal , you can solve it by setting border: 2px solid transparent ; and the hover will border: 2px solid #f2f2f2;(Add transition : ; and better not to use px for the boder-width )

  • I recommend to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

  Overall , your solution is good . Hopefully this feedback helps

  1

  ---

  

  Hugo Padilla•210

  @HugoPadillaPosted almost 3 years ago

  @PhoenixDev22 Thank you very much for your comment. I appreciate all the details. I will certainly try to put them into practice.

  1