3-Column Preview Card Component

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Brian, It looks great!... Here are some suggestions:

  • Instead round each corner and create media queries to change it based on the screen size, Give the parent these classes rounded, overflow-hidden

  <main class="container rounded overflow-hidden" id="container">
     //...
  </main>
  

  • Using more than one <h1> is allowed by the HTML specification, but is not considered a best practice. Using only one <h1> is beneficial for screenreader users.

  ---> Multiple <h1> elements on one page

  Hope this help!... Keep coding👍

  Marked as helpful

  1

  ---

  

  Brian Schooler•440

  @superschoolerPosted over 2 years ago

  @Bayoumi-dev ahhh, so hidden overflow is the missing piece for me. Thanks!!

  0
• 

  Okafor Raphael•240

  @OkaforRaphPosted over 2 years ago

  Hey Brian, congratulations on completing the challenge! You did a great job 😉. Nice use of bootstrap by the way.

  Let me give you some little tips for optimizing your code:

  a) to make it look as close to the design as possible add "border-radius: .5rem and overflow: hidden" to container class.

  b) instead of using px use relative units of measurement like rem .

  Hope this help! Happy coding 😁

  0