Mozilla splash page / assessment help wanted

Hello :slight_smile:

I’m just working on my splash page. https://github.com/chunhsianglan/Mozilla-Splash-page.git
For some reasons, the images aren’t showing. It would be great if someone can have a look on it. Many thanks!!

Hsiang

Hi @ChunHsiang and welcome to the community :wave:

As a reference here is a working <img> tag.

<img srcset="firefox-logo120.png 120w,
             firefox-logo400.png 400w"
     sizes="(max-width: 500px) 120px,
            400px"
     src="firefox-logo400.png" alt="Download Firefox">

Can you spot the two mistakes?

On a general note: It’s cool you that you are using GitHub to host your code. :+1: You could activate GitHub Pages for your repository so we could see your “splash page” running: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

Have a nice day, :slightly_smiling_face:
Michael

Hi @mikoMK
Thank you for your comments. I’ve changed the code based on your suggestions but two of my images still are not showing. Couldn’t figure out why.

Would you be able to see my GitHub page? I’ve changed the settings.

Thank you!
Hsiang

1 Like

Hello @ChunHsiang

Thanks for the GitHub Pages!
These images that are not showing are missing their file extensions in the srcset attribute. For example

srcset="firefox_logo-only_RGB_big 400w, 
        firefox_logo-only_RGB_small1 120w"

should be

srcset="firefox_logo-only_RGB_big.png 400w, 
        firefox_logo-only_RGB_small1.png 120w"

Additionally the pixel values in the sizes attributes need to be switch. Small images on small screens and big images on big screens:

<!-- wrong -->
sizes="(max-width: 500px) 400px, 120px"

<!-- correct -->
sizes="(max-width: 500px) 120px, 400px"

When you make these changes don’t forget to push them to GitHub, so we can see the updated page.

I hope this gets you further in this exercise. Feel free to ask more questions :slightly_smiling_face:

Cheers,
Michael

Hi @mikoMK

Thanks for so much. The images are showing now! :slight_smile:

Kind regards,
Hsiang

1 Like

Cool!
I’m glad you could work it out :blush: