<main>
<article>
<!-- insert iframe from youtube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/ojcNcvb1olg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 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="fflogo120.png 120w, fflogo400.png 400w"
sizes="(max-width: 480px) 120px, 400px"
src="fflogo400.png" alt="Firefox download-logo"></a>
<a href="https://www.mozilla.org/">
<img srcset="mdino120.png 120w, mdino400.png 400w"
sizes="(max-width: 480px) 120px, 400px"
src="mdino400.png" alt="Mozilla home page"></a>
<a href="https://addons.mozilla.org/">
<img srcset="ffaddons120.jpg 120w, ffaddons400.jpg 400w"
sizes="(max-width: 480px) 120px, 400px"
src="ffaddons400.jpg" alt="Firefox add-ons"></a>
<a href="https://developer.mozilla.org/en-US/">
<img src="mozilla.svg" alt="Resources for developers"></a>
<div class="clearfix"></div>
</div>
<div class="red-panda">
<!-- insert picture element -->
<picture>
<source media="(min-width: 600px)" srcset="red-panda1200.jpg">
<img src="red-panda1200.jpg" alt="A red panda on a tree">
</picture>
</div>
</main>
I had a look, and this looks mostly good. I had two observations:
You set your youtube iframe to different dimensions than my version, so the video takes up more of the first row in the widescreen layout. This isn’t a big deal however, more of a minor stylistic difference that isn’t really wrong.
Your <picture> element wasn’t quite right — you need to reference the portrait image in the <source> element so that it displays at small screen widths, and the landscape image is displayed at wider widths. Ours looks like this:
Hi, I challenged “Mozilla Splash Page”.
Please rate it!
<header>
<h1>Mozilla</h1>
<!-- insert <img> element, link to the small
version of the Firefox logo -->
<img src="firefox_logo-only_RGB_120.png" alt="header logo">
</header>
<main>
<article>
<!-- insert iframe from youtube -->
<iframe width="400" height="225" src="https://www.youtube.com/embed/ojcNcvb1olg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 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="firefox_logo-only_RGB_120.png 120w,
firefox_logo-only_RGB_400.png 400w"
sizes="(max-width: 480px) 120px,
400px"
src="firefox_logo-only_RGB_400.png"
alt="firefox-link-logo"
>
</a>
<a href="https://www.mozilla.org/">
<img
srcset="mozilla-dinosaur-head_120.png 120w,
mozilla-dinosaur-head_400.png 400w"
sizes="(max-width: 480px) 120px,
400px"
src="mozilla-dinosaur-head_400.png"
alt="mozilla-link-logo"
>
</a>
<a href="https://addons.mozilla.org/">
<img
srcset="firefox-addons_120.jpg 120w,
firefox-addons_400.jpg 400w"
sizes="(max-width: 480px) 120px,
400px"
src="firefox-addons_400.jpg"
alt="firefox-addons-link-logo"
>
</a>
<a href="https://developer.mozilla.org/en-US/">
<img src="mdn.svg" alt="mdn-link-logo" width="400px">
</a>
<div class="clearfix"></div>
</div>
<div class="red-panda">
<!-- insert picture element -->
<picture>
<source media="(max-width: 600px)" srcset="red-panda_600.jpg">
<source media="(min-width: 601px)" srcset="red-panda.jpg">
<img src="red-panda.jpg" alt="red-panda">
</picture>
</div>
</main>
Hi there @amaryllis, thanks for sending in your code!
I have had a look, and this looks pretty much all correct; well done on some good work!
The only comment I’d offer is that on the <picture> element you’ve got two <source> elements, one for the smaller image and one for the landscape image. You only need one really, as the default src image will load in cases where the media query test in the <source> element doesn’t pass.
@jlbuckner this is a good question. You are right that it doesn’t make any difference — srcset and sizes are used by browsers that support them as hints to help choose a suitable image to display. Browsers that don’t support them will ignore them, and fallback to using the default src value.
I’d say it probably makes sense to put src last, as a reminder that it is the default value, used if the stuff that comes before it is not supported and is therefore ignored.
Hi all, this is my take on the “Mozilla splash page” assessment.
I had a lot of troubles mostly on seeing which image was uploaded first. I am using Google Chrome as my default browser. The following ‘firefox’ logo and ‘mozilla’ logo keeps downloading the bigger image when I resized my window to a mobile device and refreshed the page.
I’ve tried disabling the cache in the Network panel (in the developer’s tool) which to no avail. I end up installing Google Chrome Canary browser and testing on it too. Not much difference. I tried checking it out on other browsers. On Firefox I don’t know how to check what’s uploaded (I think my Network panel has a different setting it just notice upload from the Internet and nothing from local files). I can’t say much about Internet Explorer or Edge, because it’s whole different developer’s tool in my eyes.
Any feedback on my assessment or method on how to go about checking which file source was uploaded first would be nice!
<!DOCTYPE html>
<html lang="en">
<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;
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>
</head>
<body>
<header>
<h1>Mozilla</h1>
<!-- insert <img> element, link to the small
version of the Firefox logo -->
<img src="firefox_logo-only_RGB-120w.png" alt="firefox logo">
</header>
<main>
<article>
<!-- insert iframe from youtube -->
<iframe width="400" height="315" src="https://www.youtube.com/embed/ojcNcvb1olg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 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="firefox_logo-only_RGB-120w.png 120w,
firefox_logo-only_RGB-400w.png 400w"
sizes="(max-width: 480px) 120px,
400px"
src="firefox_logo-only_RGB-120w.png"
alt="firefox logo">
<!-- <picture>
<source srcset="firefox_logo-only_RGB-120w.png 120w"
sizes="(max-width: 480px) 120px"
type="image/png">
<source srcset="firefox_logo-only_RGB-400w.png 400w"
sizes="(min-width: 481px) 400px"
type="image/png">
<img src="firefox_logo-only_RGB-120w.png" alt="firefox logo">
</picture> -->
</a>
<a href="https://www.mozilla.org/">
<img
srcset="mozilla-dinosaur-head-120w.png 120w,
mozilla-dinosaur-head-400w.png 400w"
sizes="(max-width: 480px) 120px,
400px"
src="mozilla-dinosaur-head-120w.png"
alt="a red dinosaur head">
</a>
<a href="https://addons.mozilla.org/">
<img
srcset="firefox-addons-120w.jpg 120w,
originals/firefox-addons.jpg 400w"
sizes="(max-width: 480px) 120px,
400px"
src="originals/firefox-addons.jpg"
alt="an image of the firefox logo on puzzle pieces">
</a>
<a href="https://developer.mozilla.org/en-US/">
<img
src="originals/mdn.svg"
alt="a red donosaur head">
</a>
<div class="clearfix"></div>
</div>
<div class="red-panda">
<!-- insert picture element -->
<picture>
<source media="(max-width: 600px)" srcset="red-panda-600w.jpg" type="image/jpeg">
<img src="red-panda-1200w.jpg" alt="a red panda">
</picture>
</div>
</main>
</body>
</html>
Hello again @chrisdavidmills, I appreciate that you have been taking a look at my work here on MDN. I have this one ready now, if you could please provide any suggestions. As a note, I downloaded the resized images from the Github instead of resizing them myself I really didn’t want to bother with image editing, it’s not new territory for me so not really necessary for learning.
This one is also really well done — you are smashing these
The only difference I noticed between my original code and yours is that you’ve got a different height set on the iframe that embeds the youtube video. But this might be just what youtube gave you; it is about 3 years since I first wrote these, so their defaults could well have changed in this time.
No worries about the image resizing — you are right, it is the code that is important here!
@krasnovdanial your code here looks like it is going in the direct direction, but you need to upload all your images to the Glitch project’s assets folder, then update all the paths to your images to point to them. I can’t really see if this is correct if the images are not loading into the page.
I really didn’t want to bother with image editing, it’s not new territory for me so not really necessary for learning.
