Responsive Product preview card built with HTML and CSS

Community feedback

• 

  P

  Bassel || باسل•180

  @BasselfathyPosted 6 days ago

  Hi Tawfiq👋 Good job for completing this challenge!

  I have some tips hope they will help you improve your code.

  For HTML part

  • The <link rel="preconnect"> tags for Google Fonts are duplicated unnecessarily, instead; you can use multiple google fonts with one link like this

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]
  &family=Fraunces:opsz,[email protected],100..900&display=swap" rel="stylesheet">
  

  • <h1> tags should only be used once.
  • Text by default wraps if there is no space to stretch in the container, so using <br> is not necessary at all.

  For CSS part

  • Using a css-reset would be great strater for your projects, This will make your CSS predictable and reduce the need to override default browser styles repeatedly.
  • For responsive layouts, never use fixed pixels to center the elements. for example_ To center your card inside the main container, instead of using fixed margins; you can try this..

  main {
   height: 100vh;
   display: grid;
   place-items: center;
  }
  

  I recommend you to take a look at Kevin Powell course mentioned at the first article in this chapter, would be great help to understand how responsive layouts work.

  Marked as helpful

  1

  ---

  

  Taofeek Kassim•80

  @TaophyccPosted 6 days ago

  @Basselfathy thank you Bassel 🫡

  1

  

  P

  Bassel || باسل•180

  @BasselfathyPosted 6 days ago

  @Taophycc you are welcome 🤝🏻

  0