HTML, Css

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @piyawat5 ,

  I have some suggestions regarding your solution:

  • To tackle the accessibility issues, - Page should contain a level-one heading . In this challenge , you can use <h1> to wrap Equilibrium #3429. OR 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;            
  }
  

  • Anything with a hover style in design means it's interactive. you need to add an interactive element<a> around the image Equilibrium #3429 and Jules Wyvern .

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock ).

  • The avatar 's alt shouldn't be avatar. It's meaningless , you can set Jules Wyvern to it.

  • Read more how to write an alt text

  • the link should be wrapping the main image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • You can use an unordered list<ul> to wrap class="container" and in each <li>, there would be <img > and<p> .

  • No need for <hr> , you can use border-top: to the class="bottom-container".

  • Don't use <span> or <div > to wrap meaningful content .

  <p class=""> Creation of <a href="" class="name">Jules Wyvern</a></p>

  • width: 330px;an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

  • You should 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.

  • Never use px for font size.

  Overall, your solution is good, Hopefully this feedback helps.

  Marked as helpful

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Congratulation to complete the challenge ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

  transform : scale(0.8); this property decrease the size of card. 😉

  large size for increase the number of scale & small size for decrease the number of scale

  I hope you find this helpful

  Marked as helpful

  0
• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Great work with this one. Regarding the solution you submitted, I think you should also take notes of the following…

  • Add cursor:pointer; for the hover state of the design
  • Remove bottom: 0; in the pseudo element of the hover state on hover-animation::after
  • Add border: 1px solid white; and border-radius: 50%; in the .img-avatar rule set
  • Alternative is to use a tag to act as a link with hover state for the fonts
  • Adjust the margin in hr into margin: 1rem 0;

  Above all, The design looks good. Keep it up!

  Marked as helpful

  0