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>
I really didn’t want to bother with image editing, it’s not new territory for me so not really necessary for learning.
