Responsive Product preview page using HTML CSS(Flex)

Community feedback

• 

  romila•3,570

  @romila2003Posted over 2 years ago

  Hi Rohit,

  Congratulations 🎉 on completing your second challenge, it was a great attempt but there are a number of issues I want to address:

  1. When looking at your code and design, I noticed you took a desktop-first approach instead of the mobile-first approach. As a result, when adjusting the screen size to mobile and tablet, the card looks kind of awkward. To solve this, it is ideal to take the mobile-first approach so that it would be easier to change the elements and texts as you increase the screen size. There are many articles that explain the benefits in more detail. If you are unsure about this concept, you should research more about media queries and mobile-first approach.
  2. It is best practice to wrap your main content within the main tag as it is semantically correct.
  3. You should give your button a type e.g. <button type="submit"></button>

  Regarding some minor issues about the design: 4. The word 'perfume' should have a wider space for the letter-spacing property e.g. letter-spacing: 5px; 5. The padding around the big title, seems very large in comparison to the design. 6. The space between the price and the button is also very large.

  Overall, great attempt and wish you success with your future projects so keep coding 👍.

  Marked as helpful

  0

  ---

  

  Rohit Deshpande•870

  @rohitd99Posted over 2 years ago

  @romila2003 Thank you for your feedback , I will look into the mobile-first approach and also the other minor issues . Really appreciate you taking the time to go through the code.

  1

  

  Rohit Deshpande•870

  @rohitd99Posted over 2 years ago

  @romila2003 Hi there I've added some media queries to make it look better.

  Also instead of the main tag I added the role="main" since adding the main tag broke it for some reason also cleared some other accessibility issues with ARIA. Looking forward for your suggestions, thank you.

  1