Tribute to Quincy Larson

Tribute to Quincy Larson
0

I haven’t fully grasped the information given to me in the curriculum so I’ve restarted freecodecamp after I’ve just graduated at age fourteen. I now have a lot more time on the computer now that I’m done with my school (not including college).
I created this tribute page, thanking Quincy Larson for his awesome website where I have obtained almost all of my coding skills:

I tried to make the design like that of the curriculum and also tried to keep it simple.
Any and all feedback is appreciated.

Thanks.

9 Likes

First of all, I would like to say is what you have done is a lovely gesture, especially today it is Thanksgiving Day (if I am correct?)

So I have check out your page and I will be giving you my feedback based on design. I will be checking out your code in due course.

I can say that you have done a good job to acheive your aim to create branding identity similar to FCC, especially implementing the font choice and colour scheme.

I like how you have done the parallax scrolling, using the right choice of image to work with the text in front. The text and the image work really nicely together.

Unfortunately, there is some room for some improvement (but not majorly).

I would suggest looking more into working with ‘whitespace’ and balance how much it is used. Also, text readability is another factor to look into as well. I will point out a few elements to give you an idea of what I mean.

The link ‘Updates on Freecodecamp’ is too close to the border of the section. It is best to add padding between the text and the edge of the section.

This goes the same for the heading ‘The great things he did’

Also, the buttons at the bottom work well in desktop screen, but in the mobile screen, the last button text is wider than the button itself.

With text readability, this goes more into the length of the text line. So, in the parallax scrolling section, the length of the text is long and that can cause the user to lose focus on reading the rest. I would suggest adding the left and right padding. By the way, that is in the desktop screen.

This is a contrast to the bullet point list on the mobile screen, the text line length is too short, which can be uncomfortable to read since the user has to constantly move their eyes in short period of time. In this case, decreasing the padding would be a solution.

I hope this will help you and give you some ideas about it.

Until then, Happy Thanksgiving! :slight_smile: :poultry_leg:

3 Likes

Thanks! I will try to improve what you requested. Thanks for inspiring me with the parallax scrolling in your tribute page. I was wondering how to do it without copying any of your code and I got it after a long time.

1 Like

That is really kind of you! It is nice to hear that the feature on my page has given you inspiration. But, what I am gladder to hear is that you have gone and successfully managed to build your parallax scrolling and actually learn how to implement it.

Well done and keep it up. :slight_smile:

@ConnerOw1115 I think that starting the curriculum over is a good idea. It is good to review what you have already learned. I am thinking that it will be easier the second time around.

Nice page! I just have a few suggestions for improvements you could make.

  • Consider making the background image grey-scale so that it will match the foreground OR you can go the other way and increase the brightness of the background image colors.
  • The foreground div could be centered.
  • In mobile view the padding of the list items is a bit too much in my opinion. You could decrease the amount of padding so that the list items fill up more space.

Hi Conner, this looks awesome. I feel honored to be the subject of your thoughtful tribute.

Great use of parallax scrolling. I also like how you incorporated some of the styles from freeCodeCamp itself into your tribute page.

3 Likes

That’s true about some of the stuff looking weird in phone view. I’ve been trying to fix that.
I’m not really sure about making the background image greyscale. I think that adding a little bit of color to the page would be better than a page of just black, white, and grey (I actually don’t know how to make it greyscale). I’ll try to work on the padding.
Thanks for the feedback.

About filling up the whitespace… I’ve been wondering about what to fill it up with. I can’t really seem to get an inspiration on what I should put to fill it up.

You don’t fill anything in. :slight_smile:

That is the whole point (and the beauty) of whitespace. It is about making elements and contents breathable from each other (but not too spaced out either).

Believe it or not, it is very common that people (especially web developers) does not know about whitespace. That is because it like how we see colours - we know what colour a can of Cola is, but we are subconscious by how that colour is playing with our mind and emotion.

Whitespace is like that, without realising we see whitespace practically everywhere.

So, how can you become ‘conscious’ in that matter? Well, I do plan to write an article on Whitespace as part of the Web Design series, but that will be a while.

So for the time being, I have found this article, which I hope that it will give you some ideas for now.

If you are up for a challenge to test your knowledge and see if understand Whitespace. I have added one section of my tribute page and to start you off, I have mark one use of whitespace. You can have a go and mark areas that you think contain whitespace.

Or, you can choose any other website if you prefer to. Regardless if you do this or not, my advice is once you have learned about it, next time you visit a website, read a book, magazine, newspaper, see a poster, think about how they have applied whitespace in their layout.

I hope this will help you out! :slight_smile:

Oh. I thought you said to fill up the page a little more.

I apologised if I wasn’t clear enough about whitespace in the first post and I hope the last post was more clearer but in a way…

Technically, it is to fill up the page, only it is to fill up the page with whitespace or in an understandable way - “empty” space. Don’t forget, this includes to decrease the space in some areas like the list on the mobile screen, the horizontal padding is too big and causes the text length to be short. But, just so you now know that big padding area is considered whitespace.

I should have been clearer in my first post about that, so again I apologised! :grimacing:

1 Like

We’re people. We make mistakes. It’s fine.

1 Like