"Mozilla splash page" assessment

@chrisdavidmills ok i understood you, i hope now all right.
https://github.com/krasnovdanial/Site-ForFirefox.git
file:///C:/Site-ForFirefox/index%20(2).html

Open link nothing.404:smiley:This is not the web page you are looking for.

i dont understand you

The link you sent led to a 404 not found error. Was that the right link?

2 Likes

@chrisdavidmills Yep, I’m sorry. This is a new URL-adress.


And just copy and paste the second link into the browser.

The HTML looks OK, but it is quote hard for me to test this; can you activate github pages on your project (https://guides.github.com/features/pages/) and then give me the live link?

@chrisdavidmills i did it in Glitch.
https://dusty-mortarboard.glitch.me

@chrisdavidmills Will your site, in particular, the Mozilla resource, help in learning? Can I become a programmer? Or do I need to use other resources in addition to this? Thanks.

We cover all the basics you need to know about vanilla HTML, CSS, and JavaScript, and also provide inrtroductions to other important topics you need to know about, like accessibility, testing, server-side languages. But you’ll need to keep practising, build more complex features, keep gaining more confidence. You’ll never stop learning :wink:

One area that we don’t cover much at all is modern tooling, e.g. JavaScript frameworks like React. I am currently working on fixing this, but this is an area you’ll need to know about if you want to be a professional web developer.

@chrisdavidmills Thank you very much, my teacher. I will try more and more, with your help I will definitely become a good developer. Your resources are very important to me since I am self-taught. But in the future I’ll back it all up with a diploma.

Hi,I’ve finished “Mozilla Splash page” assessment ,everything fine,but it seems that there is a little problem in Mozilla responsive design mode.When I manually introduce width, everything works fine, but when I choose a phone model the problem occurs(sorry for my bad English)!
problem|690x387

@flavius.brandeu ah, so you are saying that it should be loading the 120px images, but it is still loading the 400px images?

Have you tried actually resizing the browser window to a narrow width and trying it? If I remember correctly, responsive design mode is not a good tool to test srcset/sizes, as Firefox still loads the image based on the browser’s actual viewport size, and not the RDM emulated size.

If this doesn’t give you an answer, then we’ll think about other ideas :wink:

For this situation,it worked just fine by manually typing the size in the responsive design mode,but thanks for the tip,I will consider it for the future challenges

Hello, I’ve just finished the assessment “Mozilla splash page”. Everything works except for the end part with Red panda.
Is there anything wrong with my code? When I resize my browser the image is shurk down and doesn’t zoom in on the panda how it should be.
The code can be found here : https://github.com/Andreea1696/Mozilla-splash-page
I would be grateful if anyone could help me.

@andreeapetrescu16 Looking at your code, and the firefox devtools, it is working correctly — if I look at the network monitor, it tells me that the …landscape image is loaded when the viewport is wide, and the …portrait image is loaded when the viewport is narrow.

I think the problem here is that both images are landscape images; it is just that the one called …portrait is much smaller.

So I have to create a landscape image (for wide viewport) and a portrait one (for max-width:600px) ?

Yes — the picture element is literally choosing between different pictures to show depending on the result of media query. It doesn’t show a cropped version of the same image.

Ok. Thank you for helping me!

I use translator.
Hello. This is my work.


Please check the view in GitHub Pages.

Question:
For four images using <img srcset, sizes>, you can use I don’t know how to make sure it’s switched correctly to match. I’m using Chrome, using the DevTools responsive feature to 450px. After setting it up, I switched to the network tab and used cmd+R to reload the page. The red panda is now a 600 size image, but the four images remain at 400 size!

1 Like

Greetings from Colombia, i hope Mozilla`s people check my practice, thanks!
sorry for my english :wink: