Recipe page using HTML and CSS

Community feedback

• 

  Marzuk Sanni•1,360

  @ZukizukPosted 10 months ago

  Hello there

  Your solution looks nice

  I have few suggestion that i think might interest you.

  You can make it responsive by using media queries like you did but use this instead

  @media only screen and (max-width: 480px) {
      /* Media query styles */
  }
  

  The max-device-width targets the device's screen width, and it might not work as expected for all devices. Instead, use max-width to target the width of the viewport.

  Better still you can start by doing the mobile design first and using media queries for the desktop(mobile first approach) which is also a good practice in writing you styles.

  @media  (min-width: 64rem) {
      /* Desktop styles */
  }
  

  Also put this

      *{
          margin: 0;
          padding: 0;
      }
  

  at the very top of your css not in the media queries. You need it in both mobile and desktop version.

  Again, consider using semantic html like <main></main> for the div with the class main.

  Marked as helpful

  0

  ---

  

  Tolulope Oluwabukunmi•240

  @TheTreeveloperPosted 10 months ago

  Oh wow, I didn't think I could even start with the mobile version first and make it responsive for desktops. Thank you so much for your helpful comment. I also hope I setup my GitHub well enough.

  Thank you very much, I recently learnt about semantics and will sure start putting them to use. @Zukizuk

  0

  

  Marzuk Sanni•1,360

  @ZukizukPosted 10 months ago

  @ioddgamers Using mobile first approach is kind of a norm in web development. Most people do that, me included. If you check the README.md file we are provided with. You will see mobile-first workflow under the #Built with section.

  It has some advantages to it too, example Since mobile phone is not performant as desktop or laptop, writing mobile styles first and putting the desktop styles in the media queries makes the browser skip the desktop styles when it reaches the media query thus improving performance.

  Marked as helpful

  0

  

  Tolulope Oluwabukunmi•240

  @TheTreeveloperPosted 10 months ago

  Thank you so much, I still have so much to learn and you have taught me something in a short time. I will be taking this approach in my future projects for sure now. :)@Zukizuk

  0