A Tribute Page - feedback

Code Feedback
1

Hi!

I have been building a tribute page about week and I would like to hear your opinion about it. Texts aren’t final yet and I will most likely rewrite everything later.

So I would like to hear what do you think about the layout of the site and do you notice any big problems that need fixing. As you know, you will become blind to your own mistakes easily.

here is link to the project: https://projects.jessekorhonen.fi/fcc/tribute-page/

Source code can be found in GitHub: https://github.com/JKorhonen/fcc/tree/tribute-page/tribute-page

2

Very good work dude, well done.

Colour scheme and design looks really rich, very good.

The layout for desktop looks superb, but for mobile?! no it’s seems it’s scaling! check:

image
image323×907 109 KB

I’m not sure, but seems the flex layouting, and applying some percent of space for image and some for text scale the content somehow.

First, add following tag to your header tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I recommend you, you may never override default global font-size(which is 1em, browser decides itself based on user screen size, an other user confs), especially with absolute values(as you did). Removing the font-size won’t break your layout, let user have its font-size specified.
And if you like to go with more globally large font size, use em(not pixel), example 1.3 means 30% more than default size.

for mobile: I just removed the flex layouting form, and let the image goes above (or below) the text, now the text is much better in size. Also removed default font-size you specified(in pixel) and used 1.3em.
This is also better to bring more line-height for mobile view as I applied 2.5em. Same changes the pixel unit sized padding values with relative em for p tag, check:

image
image419×907 178 KB

You may apply the same thing about the Life of ada section which is great for desktop, but not for mobile.
For mobile: my suggestion is you remove the center vertical line(elements borders), and place each entry next to each other row by row. something like this:

image
image417×907 25.4 KB

you also set images alt tag, same applied caption for it, really good! pro.

Keep going on great work dude, happy programming

2 Likes
3

So hilarious that we both picked Ada Lovelace! This tribute though is very neat and organized. Mine is quite different! :grin: https://codepen.io/hbar1st/pen/KeWPeB

4

You should fix the mobile view. Design is good but mobile version needs to be improved.

5

Hi!

Thanks everyone for pointing out my shortcomings :slight_smile:

@NULL_dev
Thanks for great review. I did fix problems that you pointed out and I think I still need to figure out how to represent time-line in low resolution screens better way. Not sure if I will keep this minimalistic version or build it more graphical way (like adding time-line to right side of the screen so I could use same visual element’s than in desktop version).

@hbar1st
Your version looks pretty personal and I like it :slight_smile:

I was thinking between different historical figures from computer science’s history and I did pick up Ada because she isn’t so famous but still important person for computer science’s history. Also I did want to point out that computers science’s history isn’t just full of men’s achievements :slight_smile:

1 Like
6

Yes I see! Well one suggestion could you do about the timeline for mobile is placing the timeline bar at the left, and let rows(event entries) go for right side. better say, it’s just like the desktop, instead everything is at the right side of the bar, and bar is at the left side.

You may go for a try.

Keep goin on great work, happy programming