How to switch images based on the device size

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Hey, fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

  • Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like 1.5 for flexibility. Avoid using fixed units like px or %, as they don't adapt well to changes in font size or layout.

  • Setting the width and height for an <img> helps the page load faster and prevents content from jumping around as the image loads. This is good for performance and improves user experience. However, if your image needs to keep a consistent shape (aspect ratio) across different screen sizes, it's better to use the CSS aspect-ratio property instead.

  • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

  • This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="description goes here" />

  You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

  Marked as helpful

  0

  ---

  

  Ayako•100

  @Ayako-YokoePosted 2 months ago

  @Stroudy Thank you so much for your feedback! I've made changes to my code, and I'll definitely keep this in mind for future projects. I really appreciate your help.

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Hey @Ayako-Yokoe, No problem at all, I hope it was helpful, Someone exposed this stuff to me and it is to good not to pass on to others, I got one more for you,

  • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

  Marked as helpful

  0

  

  Ayako•100

  @Ayako-YokoePosted about 2 months ago

  @Stroudy I appreciate your tips! I wasn’t familiar with BEM before, but I’m glad to learn about it.

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Hey @Ayako-Yokoe, You got this bro!

  0