"Mozilla splash page" assessment

MDN Learn
#267

Hello guys, pls check my homework, thx

#268

Hi @herculesovich888 :wave:

Congratulations! Your code works correctly. :medal_sports:
Here are some comments:

  • Sometimes, you used the <picture> element in the “further info” section. Generally, we use <img> with srcset (like you did with the “dinosaur head”) when we just have different sizes of the same image.
  • You could simplify your <picture> elements by having only one image in the <source> element and using the fallback <img> when the condition doesn’t apply. For example:
  <picture>
    <source media="(max-width: 600px)" srcset="red-panda-portrait-small.jpg">
    <img src="red-panda-landscape.jpg" alt="a red panda">
  </picture>

I hope that helps. Feel free to ask questions.
If you like to post more tasks it would be good to always start a new topic. That makes it easier for us to not miss it. Thanks! :blush:

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
#269

your answer important for me, thx

2 Likes
#270

Assessment wanted for Mozilla splash page

Hello!
Please check my assignment
I think responsive images are not working correctly.

A link to the task

#271

@Viktoriya duprya den

you doing great well done

by the way it would be better in future to create new post

and have a nice day :slight_smile:

2 Likes
#272

Hello everyone! :blush:

Check my work please. :hugs:

Work on Github
Github Pages

Thank you and have a nice day! :pray:

#273

Hello @trueAliser

you doing great well done
it’s better in your future post to create your own post and put link to the task and link to your code on it

and have a nice day :slight_smile:

3 Likes
#274

Hello my friends!

Please check my work.

Work on Github

#275

Hello @sjmcsy

you doing great well done and have a nice day :slight_smile:

#276

Thank you so much!
and have a nice day! :blush:

#277

you very welcome and thanks a lot :slight_smile:

#278

<nevermind, it works now>

Hello.

I have this same exact problem on firefox as well: it doesn’t load the smaller version of the images at lower screen widths. However panda image works as expected. My page is at https://robgitnyc.github.io/responsiveImagesMDN/

Here is my code:

<div class="further-info">
    <!-- insert images with srcsets and sizes -->
    <a href="https://www.mozilla.org/en-US/firefox/new/">
      <img srcset="./mozilla-dinosaur-head-400w.png 400w,
                  ./mozilla-dinosaur-head-120w.png 120w"
            sizes="(max-width: 500px) 120px, 400px"
            src="./mozilla-dinosaur-head-400w.png"
            alt="blabla">
    </a>
    <a href="https://www.mozilla.org/">
      <img src="./mdn.svg">
    </a>
    <a href="https://addons.mozilla.org/">

      <img srcset="./firefox-addons-120w.jpg 120w,
                    ./firefox-addons-400w.jpg 400w"
            sizes="(max-width: 500px) 120px, 400px"
            src="./firefox-addons-400w.jpg"
            alt="mozilla addons">
    </a>
    <a href="https://developer.mozilla.org/en-US/">
      <img srcset="./firefox_logo-only_RGB-400w.png 400w,
                    ./firefox_logo-only_RGB-120w.png 120w"
            sizes="(max-width: 500px) 120px, 400px">
    </a>
    <div class="clearfix"></div>
  </div>
#279

Please check my work, thank you!

https://roberthuang1024.github.io/practise/mozilla-splash-page/index.html

#280

Amazing work, @Robert_Huang :+1:

All your code is correct, except one small thing:
The small dinosaur head image has “jpg” as the file format in HTML, but the image is a “png”. That causes it to not be displayed on small screens.

For future exercises: Could you please also link to your source on GitHub? Thank you! :slightly_smiling_face:

Michael

#281

Thank you very much for your kind and comprehensive comments, I would try the future exercises later.

1 Like
#282

Hi, I just finished the assessment. Can you please check it out? Thank You!

#283

Great work @motyya

I just have two small remarks:

  • You should make sure that the numbers in srcset and sizes match (120 vs. 100).
  • The second <source> in <picture> isn’t necessary. When no conditions match the browser will automatically use the fallback <img>. Therefore you could just use red-panda1200.jpg in the <img> tag.

General note:
When using GitHub a great way to show the running code is by activating GitHub Pages for your repo. This will publish everything under a specific GitHub domain. You can then post both GitHub links (code and published page) when solving a new task.
https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

See you,
Michael

#284

Hello friends!
Please review my code
Task result Page about Mozilla

Code

#285

hello my dear! in order to shouw a path to your image you should show path as /images/picture_name

#286

Hi @Yuliia and welcome to the community :wave:

Amazing work on this exercise. :medal_sports:

I have only two small simplifications:

  • For the SVG image you can just use the <img> element. <picture> doesn’t add anything useful in this case.
  • For the red panda you can omit the second <source> element. The browser will use the fallback <img> when the first condition doesn’t match.

I hope that helps. Feel free to ask question. :slightly_smiling_face:

Happy New Year,
Michael