Omelette Recipe Page using HTML and CSS

Community feedback

• 

  P

  Freddy Santana•190

  @CreixzPosted 9 months ago

  Hello my friend, congratulations for finish this challenge, let me show you some details that can help you to improve your code.

  • It's better to use good classnames that can make your code more understandable, I use BEM like this:

  <section classname= 'card'>
      <article classname='card__title'>
          <p class='card__title-description'>Your text here.</p>
      </article>
  </section>
  

  • Use margin-left=auto and margin-right=auto to center your card.
  • It's better to use rem instead of % or pixels.
  • Use max-width instead of width, it will look better.

  0
• 

  Hadisuhail188•60

  @Hadisuhail188Posted 9 months ago

  The best way to distinguish between mobile and desktop width sizes involves using media queries in your CSS.

  eg: @media only screen and (min-width: 768px) { /* Desktop-specific styles */ .container { width: 80%; margin: 0 auto; padding: 20px; } }

  the min-width 768 is just an example so you might have to make some changes.

  0