NFT CARDS STORE PAGE

Community feedback

• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted 2 months ago

  Hello benssssss!

  Congratulations on completing the challenge. You did awesome! Your HTML structure is well-organized and demonstrates a solid understanding of semantic elements. However, here are some recommendations and comments in terms of web development best practices:

  1. Accessibility: Alt text for images: The <img> tags have empty alt attributes. To improve accessibility, include meaningful alt text that describes the images. For example:

  <img src="src/hiei-asstes-prontos/hiei-xrp-icon.png" alt="XRP icon"> <img src="src/hiei-asstes-prontos/hiei-clock.png" alt="Countdown clock icon">

  Headings: The use of headings is good, but ensure that you use them semantically and in a hierarchical manner. Each card has an <h1> tag, but generally, there should only be one <h1> per page. Consider using <h2> for the NFT names and <h3> for descriptions. The general structure should look like:

  <h2 class="h1-do-hiei">Hiei #5040</h2> <h3 class="h2-do-hiei">Summoner of The Dragon of The Darkness Flame</h3>

  2. SEO Optimization: Meta description: Consider adding a meta description for search engine optimization:

  <meta name="description" content="NFT Card Shop featuring unique characters such as Hiei, Yoko Kurama, and Botan. Explore exclusive NFTs with XRP pricing and countdown timers.">

  Title optimization: The title is good, but could be more descriptive:

  <title>NFT Card Shop - Unique Digital Collectibles</title>

  3. CSS Organization: CSS Linking: You're linking both reset.css and style.css. Ensure that reset.css comes before style.css to avoid overwriting styles. This order is correct in your code. Consider BEM for class naming: Your class names, like hiei-geral, kurama-card, and dados-compra-hiei, could be more descriptive using a naming convention like BEM (Block Element Modifier). This will make your CSS more modular and scalable: Example:

  .card--hiei { } .card__price--hiei { }

  4. HTML Semantics: Semantic structure: Consider wrapping each card in a <section> or <article> tag for better semantic meaning. This tells the browser that each block of content is its own distinct section:

  <section class="card card--hiei"> <!-- content --> </section> Using <figure> for images: Since your images represent specific content (NFT card images), wrapping them in a <figure> tag can improve semantics: <figure class="hiei-foto"> <img src="src/hiei-asstes-prontos/hiei-xrp-icon.png" alt="Hiei Image"> </figure>

  5. Image Optimization: Lazy loading: Consider adding lazy loading to your images to improve the performance of your website:

  <img src="src/hiei-asstes-prontos/hiei-xrp-icon.png" alt="XRP Icon" loading="lazy">

  File paths: Your image paths seem unnecessarily long (e.g., src/hiei-asstes-prontos/hiei-clock.png). Consider organizing them into folders more effectively and using relative paths. Also, double-check that the paths to all assets are correct to prevent broken images.

  6. Performance Optimization: Preloading fonts: You’re loading Google Fonts, which is great. Consider using rel="preload" for performance enhancement:

  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" as="style"> Combine CSS files: If reset.css and style.css are small, consider combining them to reduce HTTP requests.

  7. Maintainability: Componentization: If you are working on a larger project, consider moving this structure to a component-based framework like React, Vue, or Angular. This would help you reuse card components effectively across different pages.

  8. General HTML Cleanup: Use of whitespace and indentation: Your code is well-indented and structured, which makes it easy to read. Keep this up across larger projects. By making these improvements, your NFT Card Shop page will be more accessible, optimized for performance, and easier to maintain over time. Keep up the great work!

  Marked as helpful

  1

  ---

  

  benssssss•80

  @benssssssPosted 2 months ago

  @Aggressive-Mohammed Hi i modify the code, did change the classes, and erase a lot unnecessary code, put alternative "alt" text, and <pictures> between <images>, changed h1 to h2 and h3 too, it get lot better following your comment, thank you very much for the help, if would you want check it again, is on github

  0