Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card

Youssef Nachatβ€’ 140

@yousefnachat

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello

I recently completed my project titled "Product Preview Card using Flexbox" and would greatly appreciate your feedback. Your insights and suggestions can help me improve this project further and future projects.

Community feedback

P
beowulf1958β€’ 1,170

@beowulf1958

Posted

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

@MelvinAguilar

Posted

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

@yousefnachat

Posted

@MelvinAguilar Thank you for all the information

0
lisztomania23β€’ 170

@lisztomania23

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord