eye balled the design using HTML, CSS NFT card Challenge - beginner

Community feedback

• 

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  In the future, to avoid accessibility and HTML issues, do the following:

  • wrap everything in your body in a <main>
  • start ur headings with H1, and move up by one level each time
  • style your imgs in css, instead of in your HTML

  :) Let me know if you have any questions!

  Marked as helpful

  1
• 

  Andrew Southern•390

  @whoamihealayPosted almost 3 years ago

  Hi, here are a few best pratices to improve.

  Heading: one h1 per page, a h2 per section and h3, h4 and h5 for sub-sections. Id: For selectors & Javascript actions (Document.getElementbyId etc), for style use class instead.

  Divs are mostly for styling purposes, if possible use section, article etc.

  Avoid using multiplie css techniques, ie inline style and css file. For small projects put everything in a single organized and commented file. It will help for bigger projects as they almost always use a css pre-processor ( Sass, Stylus, less, Tailwind or emotion).

  As for css organisation, for small component you can go top to bottom but for bigger projects try grouping by type (ie buttons, titles...) is prefered.

  And for a bonus tip, dive deep into accesibility ! It's extremely important ! Kevin Powell on youtube has some very good videos on the subject.

  Marked as helpful

  0

  ---

  

  Daniel•100

  @danM51Posted almost 3 years ago

  @whoamihealay this is so helpful, I'll keep these practices in mind for my next projects!

  0
• 

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  You can put a hover on the image with adding an image wrapper, something like:

  <div class="card-img-wrapper">
      <img src="image/image-equilibrium.jpg" alt="" width="300px">
  </div>
  

  .card-img-wrapper {
      position relative;
  }
  
  .card-img-wrapper::before {
      content: '';
      background: url('image/icon-view.svg') center no-repeat hsla(178, 100%, 50%, 0.5);
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0.3s, opacity 0.3s;
  }
  
  .card-img-wrapper:hover::before {
      visibility: visible;
      opacity: 1;
  }
  

  Here's a similar example: NFT preview card

  Otherwise, your's looks spot on 👌

  Marked as helpful

  0