Responsive product preview page using with flexbox

Community feedback

• 

  samantha-lind•160

  @samantha-lindPosted about 2 years ago

  Hi!

  I have three small suggestions for you :)

  1. You can use "text-transform: uppercase" on your .perfume class to display it in uppercase like in the design. A simple bit of code, but one I've used a lot!

  2. You can make your code read a little more clearly by using more semantic elements. For example, instead of using "div class=main", you can use the <main> tags. Similarly, you can swap out the "div class=attribution" for the <footer> tag. The MDN documents (https://developer.mozilla.org/en-US/docs/Glossary/Semantics) explain semantic HTML much better than I can and have helped me quite a bit.

  3. You should only have one h1 element on the page - this helps the browser understand what the main point of focus is. Instead of using <h1 class="price">, you could make this a span element instead.

  I really liked your classnames btw, they were all really easy to understand and identify!

  I hope this is helpful :)

  1

  ---

  

  Tony Stark Jr.•70

  @Tony-Stark-JrPosted about 2 years ago

  @samantha-lind Thank you for advice. I really use your suggestions in my next project. Please give me suggestions next time also.

  0
• 

  Amulya Prakash•800

  @amulyalovescodingPosted about 2 years ago

  Hi, @Tony-Stark-Jr

  Congratulations on finishing this project.

  I really liked the result of your project, but I have some tips that I also got from someone that I like to share:

  Accessibility

  1- Every page should have one main landmark <main>. So replace the div that wraps the whole content with <main> to improve the accessibility. click here

  2- All page content should be contained by landmarks, you can understand better by clicking here: click here

  0

  ---

  

  Tony Stark Jr.•70

  @Tony-Stark-JrPosted about 2 years ago

  @amulyalovescoding Thanks, I definitely used in my next project.

  1