Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

First Time Mobile First

NBD 240

@bdal90

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Dear All,

Here is my next challenge which was probably my fastest one ever AND my very first mobile first approach which, I must admit, was an excellent idea as it made the project much easier to be responsive! Any suggestions maybe?

Cheers to you all,

Dalma

Community feedback

@matiasluduena23

Posted

Hi Dalma! Nice Work Just one good practice that might help you with future projects.

  • Use the picture tag to make your images responsive. Here documentation

Something like this:

<picture>
  <source srcset="images/image-header-desktop.jpg" media="(min-width: 700px)" />
  <img src="images/image-header-mobile.jpg" alt="my-image" />
</picture>

Where the browser choose the image depending of the viewport width of the device setting in the media query in the source.

Hope this help you!

Good code!

Matias

Marked as helpful

0

NBD 240

@bdal90

Posted

Hi Matias,

Wow, thanks! This is very useful! Thank you for sharing it with me.

Best wishes,

Dalma

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord