Product presentation, complete with an animated "Buy" button

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HEADINGS ⚠️:

  • This solution has generated accessibility error report due to skipping heading levels which warn us as "Heading levels should only increase by one"

  ---

  • We want to avoid skipping heading levels, make sure to start with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that our document has a clear and consistent hierarchy. Read more 📚

  ---

  • Because skipping heading levels is a poor practice from the perspective of information design, whether we are talking about web pages, books, journal articles, or about anything else. You can not only confuse screen readers but all readers when you don't follow a consistent, logical pattern with your heading structure.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Bartosz Obliński•40

  @DJSO4Posted over 1 year ago

  @0xAbdulKhalid

  Thank you for your comment! I really appreciate that! I have a question - So I can't "jump" between H1 and H5? Is it a good solution to use paragraph instead of h5 And style in CSS?

  0

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @DJSO4 you should not use headers for their sizes but for their semantic reasons, font-size/style should not be mistaken for header/title. You can control their style in CSS instead.

  1

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @DJSO4 Yeah sure, Instead of h5 you can use p.

  1
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hi there,

  1 ) Remove height-width declarations from wrapper including margins: .wraper { margin-top: 50%; margin-bottom: 50%; width: 650px; height: 500px;}

  instead use max-width: .wraper { height: 100%; max-width: 600px; (in rem) }

  • then make the body have min-height: 100vh, so it covers entire screen. Otherwise it'll be same height as its content, so the align-items: center; won't work as there is no space to center.

  body { min-height: 100vh; }

  • You then need further tweaks for the image etc.

  2 ) For mobile/tablet you should use media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  Hope you find this feedback helpful!

  Marked as helpful

  1

  ---

  

  Bartosz Obliński•40

  @DJSO4Posted over 1 year ago

  @visualdenniss

  Thx! I will definitely read it! And thank you for your help. I've already corrected the code and it looks a lot better lol. Question - when to use px and when rem?

  0

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @DJSO4 Happy to hear!

  Almost never px, only maybe for small icons etc. Always use rem or em. Here is a great resource on YT for clarifying all the differences between rem/em: https://www.youtube.com/watch?v=dHbYcAncAgQ

  Marked as helpful

  1
• 

  Abdulrahman Muhammad•200

  @0abdulrahmanPosted over 1 year ago

  1. To center an element in the page there's more than one method, common methods are:

  • Using flexbox: display: flex; justify-content: center; align-items: center;
  • Using margin: margin: 0 auto; transform: translate(-50%, -50%);

  2. You can customize the design on mobile devices using the @media queries by setting a max (or min) width to apply certain styles within this width. Try Googling "CSS Media Queries".

  Marked as helpful

  1

  ---

  

  Bartosz Obliński•40

  @DJSO4Posted over 1 year ago

  @7saru

  Thank you for your comment! It will only get better with each project!

  0