Assessment Needed For "Mozilla Splash Page"

Hello, all.

The reason for the post is because I want an assessment for “Mozilla Splash Page”.

Here is the assessment page.

Here is my CodePen

I’m having some problems with the pictures. For some reason, I can’t figure out how to make links to them in Visual Studio Code. I made another post in the MDN Learn Area about the problems I was having at this link.

Any help would be appreciated. Thanks, in advance.

Thanks to MDN for making all this educational content free!

I didn’t notice this when I first put up the post.

The “index.html” file works on my browser. So, I guess that means the code works, locally?

But, for some reason, it doesn’t work on Codepen. I don’t know how to explain that.

Hi @pgmorales76

As far as I can see your code is correct. Congratulations! :clap:

It’s fine how you used relative links in HTML. You should do the same for the background image in CSS. The reason CodePen doesn’t display the images is that it doesn’t know about your local images. CodePen looks in it’s own “images” folder (which doesn’t exist) and can’t show anything.
Some possible solutions to make it work online:

  • Use https://glitch.com/. A code hoster that allows file upload.
  • Use GitHub to host your code.
  • Upload your images to an online image hoster. And use those URLs.
  • Use the image URLs from the MDN GitHub as src attribute. (Not applicable for this exercise since you have to edit the original images.)

I hope htat helps. :slightly_smiling_face:
Michael

Thank you for your help!

When you say, “Use GitHub to host your code”, does that mean create a repository, and place the code in the editor? Then what do you do? I’m not familiar with how to use GitHub, yet.

Thanks, again, for your help. Be well!