Hello @maria_ringes
you doing great well done just tiny typo
<picture>
<source media="(max-width:600px)" srcset="red-panda600.jpg">
<source media="(min-width:601px)" srcset="red-panda1200.jpg">
<img src="../MDN/red-panda1200.jpeg" alt="Red Panda">
.. will make you go to the parent of the current directory then MDN will go to the folder MDN
which is not exist in your github it called mozilla-splash-page
</picture>
to test the page with different screen size you have 2 option
-
resize your browser window and notice the image change you could also right click the image then open in new window and check the url of the opened page and you could notice which image it loaded
-
uses responsive mode in your browser in firefox from the menu
tool -> Browser tool -> responsive design mode
in chrome from the developer tool window choose toggle device toolbar it next to the element tab
if you talk about issue in chrome that it does not load the small img using the img and srcset then that expected
if you load the site in big screen then it load the bigger image then when you resize it to small one it does not load the small image it just resize the image
it do that to save the bandwidth need to load the other image from the server
as mentioned by the big boss chrisdavidmills
hope that help and have a nice day