Responsive product preview page with HTML, CSS using Bootstrap & Flex
Design comparison
Solution retrospective
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!
- It helped me review on CSS Flex.
- I was going to give up on aligning the price tags to the center (the base of $169.99 was aligned with the base with $149.99) but I solved it by using flex align items.
Community feedback
- @mason-dunnPosted about 2 years ago
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
Marked as helpful1@hypyeonPosted about 2 years ago@mason-dunn Thank you so much for taking your time and reviewing my codes! I really appreciate your feedback. I'm on my way to fix those as advised! :)
0 - @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
-
This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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