Critique my project: Skyrim Quote Generator

This is my first React Project! It’s my first attempt at making a decent useful app. And it’s dedicated to all of you Skyrim fans.

https://codepen.io/Nerdifico/pen/pogVNxz

I’d really appreciate you to critique, roast or suggest improvements to my project. Learning to code can sometimes be a lonely journey!

3 Likes

Hi nerdifico.

After a while the background goes white (see screenshot), then it goes back to normal, then back to white etc… This is in Safari (so may be different in other browsers).

I also found the background distracting while I was trying to read the title, especially because the words were over the border between two images. In general, I don’t think having more than one image viewable at once looks good.

I’m also getting the “page using significant energy” warning after a while.

Will

1 Like

Thanks for the feedback! I have finally decided to make a single static background because so much change would be an unnecessary distraction for the user. Plus, I fixed some bugs related to the background image size.
Current version of the project:
https://codepen.io/Nerdifico/pen/pogVNxz?editors=0110

Yes, better. Now I’m actually reading the quotes.

The static background tiles on large screens. :slight_smile:

I guess instead you could have the one background image, and a static colour beyond that (where the tiled images would be).

Or possibly set it to fill the screen. :slight_smile:

Then you might get pixellation at larger screen sizes.

Hi nhcarrigan & WillWhite!

I am coding with a laptop and I couldn’t see that issue, so I feel really grateful for your feedback. Now I understand the importance of optimizing my site for different devices. I have tried to fix it, let’s see how it goes:

https://codepen.io/Nerdifico/pen/pogVNxz?editors=1100

Now there is only one image that fits the screen vertically (and no more repeating tiles) and, if you have a very wide screen, you can see a black background.

1 Like

Nice work! I should mention it also looks great on mobile. :slightly_smiling_face:

Thanks nhcarrigan! Luckily I have a smartphone and I can test the projects there.

BTW is there a way to see how the website looks on larger screens if I am working on a small laptop?

This is giving me a lot of Nostalgia! Can’t beat the classic guard quotes!
Nice work!

1 Like

I used to be an adventurer like you, so I can totally relate!

1 Like