Assessment wanted for MSP

Hello,

I need an assessment for the Mozilla splash Page.

here is the link:

Hi @Idris and welcome to community :wave:

I moved your post to the MDNLearn category, since that’s the place where the volunteer are who do the assessments. :slightly_smiling_face:

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.

2 Likes

Hi again, @Idris

I finally had time to look at your exercise. Well done! :tada:

Here are some comments:

  • iframe: Correct :white_check_mark:
  • “further info” images: You’re 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">
    
  • Red panda: With <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

1 Like

Thanks a lot @mikoMK. It’s working now.

1 Like