Responsive Deign using HTML and CSS

Community feedback

• 

  Valeriia•200

  @Magic1vy

  Posted about 2 years ago

  Hello, @mannyAndem! 👋

  You did an amazing job in this challenge!

  Here are some tips that you can find helpful for improving your code:

  1.In your "gallery-section", you can use the <picture> tag to provide different images for different device widths instead of using 2 separate <img> tags. You can learn more about this tag here 📗

  2.To speed up website loading times, it's better to import Google Fonts in the HTML file rather than in CSS. You can read more about this in this article 📙

  3.Use shorthand properties in your CSS background, like this:

  .photography {
    background: url("images/mobile/image-photography.jpg") no-repeat / cover center;
  }
  

  instead of:

  .photography {
    background: url("images/mobile/image-photography.jpg") 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  

  The /cover value sets the background-size to "cover" and the other properties are self-explanatory.

  4.When changing the background image in media queries, use only background-image instead of background to avoid applying other properties in the background shorthand by default. You can learn more about shorthand properties in CSS from this article on MDN Web Docs 📘

  I hope you find this helpful! Happy coding!

  00