I solved a challenge that was 'Intermediate' but was struggling. So I wanted to go down a level and practice on the basics with more confidence and assurance. It was so much fun!
Hi HaYeong,
I love the way you organize your files!
I did notice while looking through your code that you have a tendency to use <div> a lot. Learning semantic HTML could provide a lot of readability and even cut down on some unnecessary styling sometimes.
For example, for the original price of the item ($169.99), the <del> tag automatically puts a line-through text decoration style and the tag itself tells the browser that the data in that tag is "removed."
Another example would be for the headings of this component. By using H1-H6 tags you can avoid using font-weight and tell the browser what the main content is. In your code you used <p> tags for product and category.
Lastly, for your button you didn't use the <button> tag. Using the <button> tag makes sense because it is an element that is meant to be interacted with. Of course the user knows that, but the browser won't know that.
Good work on completing this challenge :)
Mason Dunn
Do you have any questions about best practices?
Hi,
Your Github link appears to be broken. I'd be more than happy to take a look at your code once it gets fixed.
How do you add the border to a picture?
Hi Ricardo,
One way you could add a rounded border to your image is by using the border-radius css property and apply it to only the sides you need rounded. A simpler solution would be to add an overflow: hidden property to your container. This will hide anything that does not fit inside your card.
Good work, Mason
