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 Project

@noonecaresman023

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


Did I need to create media queries for other viewport breakpoints? What did I specifically miss in my project? What advice can you give to me to improve my HTML/CSS? Was my use of divs excessive? What could I have done differently to further improve readability of my HTML/CSS?

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello Jerome Dela Cruz, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

Nice solution and nice code! I can see that you paid a lot of attention to your code/design. If you don’t mind I’ve some tips for you:

When you’re use the folder locally with a live silver there’s no need to indicate the folder because the system is able to find it alone, but in a live repository/site you ever need to indicate the exact folder path to have the image loaded. To indicate the folder path you can use dot slash ./ and if is inside a sub-folder use dot dot slash ../ If the image is the same folder of the html without folder just add normal path.

The correct import for the image:

<img class="img-mobile" alt="image for mobile" src="./image-product-mobile.jpg">

✌️ I hope this helps you and happy coding!

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