NFT Preview Challenge

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello @mnizhadali-afg, I was about to check your code, I found it was the Qr code challenge repo !!

  01

  Marked as helpful
• 

  Billy Hick•330

  @TheArkhamKnight781526

  Posted over 3 years ago

  If you use put the price and the days in one div, you can use this snippet:

  #container {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  

  00

  Marked as helpful
• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  CSS:

  • To make the card perfectly in the middle of the page, you can use flexbox andmin-height:100vh; to the <main> .

  • You can add hover effects on the image and Equilibrium #3429 and Jules Wyvern .

  • You should use em and rem units .Both em andremare flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Using px will not allow the users to control the size of the page based on their needs.

  • It's good practice to use a css reset at the start of css every time.

  • Instead of setting width, consider using max-width. That will let the component grow up to a point and be limited.

  Hopefully this feedback helps .

  10
• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  hello @mnizhadali-afg,

  I have some suggestions :

  • All page content should be contained by landmarks. You can wrap the body content by <main> tag.READ MORE ABOUT LANDMARKS

  • Page should contain a level-one heading . So ensure that the page contains only one < h1> element. 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;            
  }
  

  This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers.

  • Equilibrium #3429 is a heading <h2>.

  • Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image and Equilibrium #3429 , Jules Wyvern.(in this challenge is an anchor tag <a>).

  • Images must have alternate text.

  • 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. And alt in the avatar img shouldn't be empty .read more about alt text for informative and decorative images

  • The eye image doesn't really need to be in the html, you could do it with css.

  • You can use unordered list<ul> to wrap class="ether" and in each list item would have <img > and <p>.

  • You shouldn't have used <hr/> , you can use border-top property for the class="bottom" .

  • You can use<footer >for <div class="attribution"> . Footer goes outside of <main>` .

  Hopefully this feedback helps.

  01
• 

  Kamasah-Dickson•5,570

  @Kamasah-Dickson

  Posted over 3 years ago

  You have to learn CSS flexbox and CSS Grid you won't regret getting those two stuffs..I believe you can do this :)

  00