Hello,
I need an assessment for the Mozilla splash Page.
here is the link:
Hello,
I need an assessment for the Mozilla splash Page.
here is the link:
Hi @Idris and welcome to community
I moved your post to the MDNLearn category, since that’s the place where the volunteer are who do the assessments.
Have a nice day,
Michael
PS: Your email address is visible in your post. I think it somehow ended up in the optional “name” field of your profile. I recommend removing it.
Hi again, @Idris
I finally had time to look at your exercise. Well done!
Here are some comments:
srcset
attribute is correct, but you additionally need to use the sizes
attribute to define when to load the different images. This is how the first image tag should look:<!-- Change the URLs to your sources -->
<img srcset="firefox-logo120.png 120w,
firefox-logo400.png 400w"
sizes="(max-width: 500px) 120px,
400px"
src="firefox-logo400.png"
alt="Download Firefox">
<picture>
we would use <source>
tags for the different sizes and one <img>
as fallback for older browsers. This would look something like this:<!-- Change the URLs to your sources -->
<picture>
<source media="(max-width: 600px)" srcset="red-panda-portrait-small.jpg">
<img src="red-panda-landscape.jpg" alt="a red panda">
</picture>
To test your code you can open the network tab in the DevTools and then resize the browser window to see if the alternative images get loaded.
I hope that helps. Feel free to ask questions if something isn’t clear.
Have a nice day,
Michael
Thanks a lot @mikoMK. It’s working now.