NFT preview #1

Community feedback

• 

  Chermann KING•450

  @Chermann-KING

  Posted about 2 years ago

  Hi @sebytreza! ✋

  HTML code :

  • You have used ids for several elements. If these elements are not supposed to be unique on the page, it would be better to use classes instead. Ids are generally used for unique elements, while classes are used for elements that can be repeated.

  Code CSS :

  • It is recommended to separate the CSS styles from the HTML file. You already have a style.css file, but there are also inline styles in the HTML file. Move the inline styles into the style.css file to keep a clear separation between the structure (HTML) and the presentation (CSS).

  • You could use more descriptive and consistent class names, using a naming convention such as BEM (Block, Element, Modifier) to make the code easier to understand and maintain. For example, instead of using identifier names like "eth" and "delay", use class names like "card__price" and "card__time-left" or other more descriptive names.

  • Try to avoid using fixed widths and heights for elements, especially when dealing with containers. Fixed dimensions can cause layout problems on different screens and resolutions. Instead, use relative widths and heights (%, vw, vh) or flexible units (rem, em) for better scalability.

  • In CSS, identifier selectors (#id) have a higher specificity than class selectors (.class). Since you have used identifiers for some elements, this can cause problems if you want to apply additional styles using classes. It is better to replace identifiers with classes to avoid specificity problems and to make the code easier to maintain.

  • The #overlay:hover img selector can be replaced by a class to be more consistent with other selectors. For example, .overlay:hover .overlay__img.

  • Use CSS variables to store colors, fonts and other recurring values. This makes maintenance easier and allows you to quickly change the themes or colors of the site.

  👇Here are some additional suggestions for improving your code and further optimization:

  1 Units used:

  • For margins, spacing, and font sizes, it is recommended to use relative units such as rem or em. This allows for better accessibility and more consistent scaling on different devices and screen sizes.
  • For widths and heights, it is best to use percentages (%), viewport units (vw, vh, vmin, vmax), or flexible units (fr for CSS grids) for a more adaptive layout.

  2 Structure of HTML elements :

  • Use semantic HTML elements to describe the content in a more meaningful way. For example, instead of using a <div> to encompass the content of the map, you can use an <article> tag.
  • You can also use <header>, <footer>, and <section> tags to organize content more semantically.
  • For images, always add an alt attribute to describe the image. This improves accessibility and helps screen readers understand the content of the image.

  3 Accessibility:

  • You can improve the accessibility of your site by adding Accessible Rich Internet Applications (ARIA) attributes to elements. For example, add aria-label or aria-labelledby to buttons and links to provide additional information to users who use screen readers.
  • Make sure there is sufficient color contrast between the text and the background for readability. You can use online tools such as the WCAG Color Contrast to check if colors meet accessibility standards.

  4 Image Optimization:

  • Optimize images to reduce file size and improve load times. Use online image optimization tools such as TinyPNG or ImageOptim to compress images without quality loss.
  • Use the <picture> tag with srcset and sizes attributes to provide images suitable for different resolutions and pixel densities. This improves performance and user experience on high pixel density devices.

  I hope it will be useful for you for the future. Courage and good code 😉

  00