Mobile first page using flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. The layout in general looks really great and it is responsive as well which is nice.

  Some suggestions on the site would be:

  • Since you are treating the image as an interactive component, make sure that an interactive element is present as well on this one. It could either be button or a tag for this. Think about on what will happen if the image is clicked, will it preview the image on a modal for example? If yes, use button. But if it would take the user to a page to see the nft information, then use a tag. I haven't tackled this one yet so I can't provide a reference. But for this, I would use button and my markup would look something like this:

  <div class="image__holder">
    <img src="" alt=""> # the nft image
    <button class="image__toggle">
      <span class="visually-hidden">Preview equilibrium on large size</span>
    </button>
  </div>
  

  My button will be position: absolute and will be relative to the .image__holder. It will be set to using like inset: 0 0 0 0 so that it will take full height and width. The overlay will just be set to my button::after.

  button:hover::after {
   show overlay
  }
  

  • You could use the nft name as the alt for the image since the nft name is already present so why not use it if it is distinct.
  • The h1 is being treated as interactive as well. Use an a tag as the h1 inner element:

  h1
    > a href="" { nft name in here }
  

  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.
  • Using an image-path as the content property value just simulates an img using the same path but with "NO" alt. Meaning it is bad. Instead, use the image path as background for the pseudo-selector and not used in the content props.
  • Person's image should be using the person's name as the alt value like alt="Jules Wyvern". Components like this where a person's information is presented, make sure to use their name as the person's img alt value.

  Aside from those, great job again on this one.

  0