"Mozilla splash page" assessment

sjmcsy · May 6, 2022, 3:30am

Hello my friends!

Please check my work.

Work on Github

justsomeone · May 7, 2022, 8:45am

Hello @sjmcsy

you doing great well done and have a nice day

sjmcsy · May 7, 2022, 1:57pm

Thank you so much!
and have a nice day!

justsomeone · May 7, 2022, 2:19pm

you very welcome and thanks a lot

robmdnnyc · May 7, 2022, 10:19pm

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

Robert_Huang · July 6, 2022, 2:04am

Please check my work, thank you!

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

mikoMK · July 8, 2022, 8:18am

Amazing work, @Robert_Huang

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!

Michael

Robert_Huang · July 9, 2022, 1:45am

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

motyya · December 13, 2022, 6:24pm

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

mikoMK · December 18, 2022, 7:40am

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

Yuliia · December 29, 2022, 11:43am

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

Code

PolarBearBad · December 30, 2022, 9:18am

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

mikoMK · January 3, 2023, 1:48pm

Hi @Yuliia and welcome to the community

Amazing work on this exercise.

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.

Happy New Year,
Michael

Yuliia · January 4, 2023, 9:53am

Good day. Thanks for checking the code! I will consider the advice.
Happy New Year,
Yuliia

fenosoaliva_ratovoson · January 12, 2023, 12:18pm

bonjour! je souhaite être évaluer sur “page de démarrage de Mozilla” s’il vous plait merci beaucoup

Mozilla splash page /* header and body setup */

  html {
    font-family: 'Open Sans', sans-serif;
    background: url(pattern.png);
  }

  body {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: white;
    position: relative;
  }

  /* Header styling */

  header {
    height: 150px;
  }

  header img {
    width: 100px;
    position: absolute;
    right: 32.5px;
    top: 32.5px;
  }

  h1 {
    font-size: 50px;
    line-height: 140px;
    margin: 0 0 0 32.5px;
  }

  /* main section and video styling */

  main {
    background: #ccc;
  }

  article {
    padding: 20px;
  }

  h2 {
    margin-top: 0;
  }

  p {
    line-height: 2;
  }

  iframe {
    float: left;
    margin: 0 20px 20px 0;
    max-width: 100%;
  }

  /* further info links */

  .further-info {
    clear: left;
    padding: 40px 0;
    background: #c13832;
    box-shadow: inset 0 3px 2px rgba(0,0,0,0.5),
                inset 0 -3px 2px rgba(0,0,0,0.5);
  }

  .further-info a {
    width: 25%;
    display: block;
    float: left;
  }

  .further-info img {
    max-width: 100%;
  }

  .clearfix {
    clear: both;
  }

  /* Red panda image */

  .red-panda img {
    display: block;
    max-width: 100%;
  }
</style>

Mozilla

<main>
  <article>
    <!-- insert iframe from youtube -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ojcNcvb1olg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    <h2>Rocking the free web</h2>

    <p>Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>

    <p>Click on the images below to find more information about the cool stuff Mozilla does. <a href="https://www.flickr.com/photos/mathiasappel/21675551065/">Red panda picture</a> by Mathias Appel.</p>
  </article>

  <div class="further-info">
    <!-- insert images with srcsets and sizes -->
    <a href="https://www.mozilla.org/en-US/firefox/new/">
      <img srcset="firefoxlogoonly120png 120png,
      firefoxlogoonly400png 400png" sizes="(max width: 480px) 120px, 400px" src="img/firefoxlogoonlyRGB.png" alt="un renard orange sur une boule bleu">
    </a>
    <a href="https://www.mozilla.org/">
      <img srcset="mozilladinosaurhead120png 120png,
      mozilladinosaurhead400png 400png" sizes="(max width:480px) 120px, 400px" src="img/mozilladinosaurhead.png" alt="un tete de dinosaur">
    </a>
    <a href="https://addons.mozilla.org/">
      <img srcset="firefoxaddons120jpg 120jpg,
      firefoxaddons400jpg 400jpg" sizes="(max width:480px) 120px, 400px" src="img/firefoxaddons.jpg">
    </a>
    <a href="https://developer.mozilla.org/en-US/">
      <img srcset="mdn.svg 120px" sizes="(max-width: 480px) 120px, 400px" src="img/mdn.svg" >
    </a>
    <div class="clearfix"></div>
  </div>

  <div class="red-panda">
    <!-- insert picture element -->
    <picture>
      <source media="(min-width: 1200jpg)" srcset="redpanda1200.jpg">
      <source media="(max-width: 600jpg)" srcset="redpanda600.jpg">
      <img src="img/redpanda.jpg" alt="un panda roux">
    </picture>
  </div>

</main>

mikoMK · January 23, 2023, 6:55am

Hi @fenosoaliva_ratovoson

Nice work! Here are a few comments:

Inside srcset the pixel values need to have a “w” at the end not the file extension. For example srcset="firefox-logo120.png 120w, firefox-logo400.png 400w" .
The SVG can be a “normal” <img>. srcset and sizes aren’t needed since it’s a vector graphic that scales automatically. (One of the great advantages of SVG.)
In the <picture> if the big image and the fallback image are the same, you could leave out the <source> with the big image since the browser will automatically use the fallback image.

I hope that helps,
Michael

fenosoaliva_ratovoson · January 23, 2023, 7:21am

bonjour @mikoMK! merci ca aide beaucoup surtout que je n’ai pas totalement saisi le svg

Valchonok_virginia_wolfi · May 30, 2023, 2:46pm

Hello!
For some reason always 400px images are loaded, no matter browser or window size.
Please tell me the reason
https://virginia-wolfi.github.io/

github.com

virginia-wolfi/virginia-wolfi.github.io/blob/main/index.html

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Mozilla splash page</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <style>
    /* header and body setup */

    html {
      font-family: 'Open Sans', sans-serif;
      background: url(pattern.png);
    }

    body {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;

This file has been truncated. show original

justsomeone · June 17, 2023, 8:27am

Hello @Valchonok_virginia_wolfi

i guess you use chrome or any chromioum based browser if that the case then check this comment

read the chrome part of the comment

and you can use firefox to make sure that chrome is the cause of it

hope it help and have a nice day

BISCVITE30 · July 9, 2023, 6:57pm

Hello, I just completed the “Mozilla splash page” assessment and would appreciate a marking guide. I hope for your any feedback. Thanks! My code on https://github.com/BISCVITE30/test-from-MDN--second-section-