Responsive Product Preview Card Component using flexbox and CSS

Community feedback

• 

  Alamin•1,980

  @CodeWithAlamin

  Posted over 2 years ago

  Hi Brian Carlo Birondo👋 Great job on completing this challenge! 🥳

  I would like to share a few suggestions on this solution if you don't mind.

  • One thing that could be improved is the use of CSS variables. Instead of hardcoding colors throughout the stylesheet, you could define them as variables at the beginning of the stylesheet and then use the variables consistently throughout the stylesheet. For example, instead of using hsla(212, 21%, 14%, 0.5) for the product and product-desc styles, you could define a variable called --very-dark-blue at the beginning of the stylesheet and use var(--very-dark-blue) for the product and product-desc styles. This would make it easier to maintain and update the color scheme of the website.

  • Another improvement that could be made is the use of semantic HTML elements. Currently, the product name and description are both styled as <p> elements, which is semantically correct for text content. However, the title of the product is styled as a <h1> element, which is generally reserved for the main heading of a page. Instead of using a <h1> element, it might be more semantically appropriate to use a <h2> or <h3> element for the product title. This would give more context to the structure of the page and make it easier for screen readers and other assistive technologies to interpret the content.

  • One final suggestion for improvement is the use of responsive design techniques. Currently, the page has a fixed width of var(--container-width), which is set to 80rem. This means that the page will always take up the same amount of space on the screen, regardless of the size of the viewport. Instead of using a fixed width, it would be more user-friendly to use a responsive layout that adjusts to the size of the viewport. This could be achieved using CSS grid or flexbox layouts, as well as media queries that adjust the layout and styles for different screen sizes. This would allow the page to be easily viewed on a wide range of devices, from desktop computers to smartphones.

  Overall, this is a very well done solution to the challenge. Great job!

  I hope this feedback was helpful. 😊 Keep up the good work!👍

  02

  Marked as helpful
• 

  Paweł Pohl•390

  @Pawel1894

  Posted over 2 years ago

  Hey! Great job finishing this challenge.

  Here is some feedback from me

  • It is important for search engines to keep correct html syntax. You should put your section inside <main></main> tags and footer inside <footer></footer> tags

  • To get image looking simillar to frontend mentor design i would recommend you changing it to background-image instead of <picture>. Then instead of using flex just use grid and make it 2 columns od desktop resolutions, it will automatically adjust image size to height of content on the right side.

  • Give it lower max-width so it won't be that big, and work a bit on font-sizes and bigger spaces between elements.

  If you need some help you can always dm me on discord Paaaweł#7660 or lookup my solution for this project I think it is very close to design.

  01

  Marked as helpful