Basic NFT Preview Site using HTML5, CSS and JS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @d4wk0m ,

  I have some suggestions regarding your solution :

  • It's better to have the styling in a separate file.

  • you need to add an interactive element around the image. Anything with a hover style in a design means it's interactive.

  • Section is not meant to be used anytime . section is for a bigger chunk of content often titled by <h2>.

  • 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 as in alt="Icon clock" alt="Icon View" , alt="Ethereum"

  • the eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

  • you can use an unordered list <ul> for id="tabela"> and in list item <li> there would be <img> and <p>.

  I would do for the avatar's part:

         <div class="paragraph2 ">
                      <img src="./images/image-avatar.png " class="author" alt="Avatar">
                      <p > Creation of <a href="#">Jules Wyvern</a></p>
              </div>
  

  • Read up on how and when to write alt text on images and how to make accessible. They'll either need aria-hidden if meaningless or labelling appropriately if meaningful.

  • never style on IDS. That's not what they're for.

  • You should use em and rem units .Both em and rem are flexible, scalable units.

  • Never have font size in px. Using px won't allow the user to control the font size based on their needs.

  Hopefully this feedback helps.

  Marked as helpful

  1
• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Awesome work with this one. Viewing at your solution, I would recommend the following for you...

  • Wrap the whole content content with specific tag like main for readability
  • The script code shouldn't be at the center of the whole content, rather add it in the bottom.
  • Change the width in the content into width: 320px; and remove width in the container
  • Adjust the padding in .nft rule set with padding: 1.4rem;
  • Make the width in #myImg 100%

  Overall, you did good in implementing the design. Hope this helps and Keep it going!

  P.S. Consider making another file called CSS for the style properties for future projects.

  Marked as helpful

  1