Modify 404 page

[jromest]

Hi, I created a logo for the 404 page. I hope the logo clearly expressed what is it trying to say. 😁

Btw, thank you freeCodeCamp for providing free learning resources.

[Bouncey]

Hi @jromest, thanks for the PR! It helps the QA process for visual changes if you add a screenshot of the changes, especially when using SVG. My SVG game isn't quite high enough to parse raw SVG in my head just yet.

I like the idea. @QuincyLarson thoughts?

[jromest]

Hi @Bouncey, thank you for providing the screenshot.

[QuincyLarson]

@jromest Instead of having something sad we should do something funny. Here's a good list of funny 404 pages: https://www.creativebloq.com/web-design/best-404-pages-812505

I like the Space Invaders one. Maybe we could do something like that - a game that's pretty compact that people could play.

Alternatively, we could say something like "404 - We couldn't find what you were looking for, but here's a quote from a great programmer" then randomly show one of the quotes on this list: https://gist.github.com/QuincyLarson/0d57b3883b2e80b5543d6fe73f36b8da (we would want these in an array - we wouldn't want to rely on an API call for something as simple as this).

[raisedadead]

@jromest how is this going? Here is something that you we would like to have actually:

We have an array of quotes already on the main repo, we can copy that list here.

See:
https://github.com/freeCodeCamp/freeCodeCamp/blob/bc0e213529366ae158b223150b531cdd39b9103e/common/app/utils/words.json#L144-L757

And then we should just remove the fire logo, its okay to rather have a camper bot imagery as SVG or something rather. We would not like to mutate the camp fire logo.

The best thing would be to have a simple h1 text of

"404 - We couldn't find what you were looking for, but here is a quote:"

followed by a quote from that array that I listed.

[jromest]

Hi @QuincyLarson, a game would be an excellent idea for a 404 page, but I don't think I can do it. The existing text is from the default 404 page of gatsby. Anyway, I can do the alternative, displaying a random quote.

Hi @raisedadead, it seems that the two set of quotes given are not the same, would you like to merge them and put them to a different file?

I made a mockup design for this if you don't want the campfire logo in the 404, we can replace it with camper bot avatar. Also, I added buttons. What do you think guys?

[raisedadead]

This looks good to me.

[Bouncey]

@jromest yes, please merge them together, there might be duplicates though.

I like the way you are going with the mock up, but the idea is to steer everyone to the curriculum, so just the first button should be OK, but with the text View the Curriculum please.

[jromest]

I didn't know about freeCodeCamp design guidelines before I made my first PR I know I made a mistake on Logo Misuse, my apologies.

I merged the two set of quotes in one json file and removed the duplicates.

Here's the screenshot of the new 404 page:

[raisedadead]

✨ ✨ LGTM. ✨ ✨

Thanks @jromest !!

Happy Contributing!

[jromest]

Thank you for accepting my PR @raisedadead @Bouncey @QuincyLarson.

It was my first contribution to a large open source repo, hoping to contribute more. 🎉

[wadleo]

Great work @jromest

[QuincyLarson]

@jromest Awesome work on the new 404 screen! Thanks again for your open source contribution!