Product Preview Card

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted about 1 year ago

  Congratulations on finishing the project. It looks great and is responsive. You nailed it!

  I do have a suggestion concerning future projects. I notice that you dumped all the images (including the design jpgs) into the root folder, along with the style guide, readme, readme-template, as well as the index and css. A well organized project folder makes the project easier to review and update, and organizing your small projects will allow you scale your work when the projects become larger and more complex. So, I'm suggesting a "design" folder for the challenge raw materials and an "image" folder for the images you use in the project.

  I have learned the best way to tackle a challenge is to delete the readme file, rename the readme-template to readme, and edit the renamed file so that we can follow your process. The readme file shows up on the front page when you submit your project, so that is why deleting the placeholder readme and renaming the readme-template is so helpful.

  Again, your project looks awesome! Keep on coding.

  Marked as helpful

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 🏷️:

  • Wrap the page's whole main content in the <main> tag.

  • You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. You can read more about this here 📘.

  • You could use the <del> tag to indicate the price that was before the discount.

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

  • Not all images should have alt text. The cart-icon is a decorative image, it does not add any information to the page. You should use an empty alt attribute instead of a descriptive one. You can read more about this here 📘.

    If you want to learn more about the alt attribute, you can read this article. 📘.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  Youssef Nachat•140

  @yousefnachatPosted about 1 year ago

  @MelvinAguilar Thank you for all the information

  0

  

  lisztomania23•170

  @lisztomania23Posted about 1 year ago

  @yousefnachat have you implemented all also, organize files in your repo. I'll review later and make a pull request if you'd like.

  0