Assessment Needed For "Mozilla Splash Page"

MDN Learn
#1

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!

#2

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.

#3

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

1 Like
#4

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!

#5

If you have never used Git and/or GitHub, the other possibilities I listed are surely easier to use.
That being said learning a version control system (Git is the most used one) and learning how code hosters work (GitHub is the biggest) is an important part of becoming a developer. GitHub has some great introduction courses:


If you’re interested I recommend having a look at their First Day on GitHub and First Week on GitHub learning paths.

To answer your question: You would synchronize your local code with your GitHub repo and activate “GitHub Pages” to see the code live in action. See for example this post of another learner: Assessment wanted for 'Structuring planet data' task

Have a nice day,
Michael

1 Like
#6

Thanks for the information. I will, definitely, start going through those courses, so I can use GitHub to host the code for the various assessments for MDN. I know I have to start learning GitHub and I appreciate how you’ve me pointed me in that direction. Thanks, again!

1 Like
#7

Glad to hear that :slightly_smiling_face:

Theses courses are pretty fun to work through. You will create repos and a bot guides you and interacts with you.

2 Likes
#8

Thanks for the recommendation!

2 Likes