TributePage - Alan Turing

Hello, people, I finished my first project, it’s a tribute to a person I really like and admire - Alan Turing .
Until now, I was doing exercises only with JS, on its own, HTML and CSS were neglected.
Thats why my CSS is so messy, and I guess there are many unnecessary lines.
Thank you for sharing your time, any feedback will be much appreciated.

Looks great! And responsive too!

My only feedback is that the text seems to take priority over over the image at some points (i set my codepen to side-by-side to drag resize)

Great job!

Thank you for the feedback. I changed the line-height of .fig in css now. Hope this was the key (but I’m not sure :roll_eyes: )
Have a nice one!


Your tribute is good. The basic structure is sound (ie the movement from trib photo to timeline to footer).

Here are some things to consider in your coding

  1. The use of the strong tag isn’t making the text bold. I can only guess the font used doesn’t have a bold version available so you might go to Google Fonts and find one that does have a bold version and link it to your page.
  2. In using the tags, you do not put any styling with them. By adding styling to the id, you can simplify your code. In your html you have the required id of img-div but then have a class img-div; just assign the styling to the id and eliminate the css class completely.
  3. You can create a single class with repeated styling and then have various classes or id’s that are specific to an element. This can be font-family, color and such with an id with font-weight and font-size. This will tighten the code as well as simplify it.

Design consideration.

This is an area of wed design that most interests me. Although I’m far from being an expert here, I hope this helps. Take what you like or ignore this section completely since it has nothing to do with passing the project.

  1. Your main div container is too large and can be made smaller to allow for better and more comfortable reading.
  2. The orange background color along with the red highlights could be changed to a more pleasant color.
  3. Source Code Pro font could be replaced with another more modern one.
  4. Your page is text heavy. If I remember correctly, FCC goes over this in some of the lessons. The more text, the harder it is on the eye.
  5. I would only include the most important highlights in Alan’s life. The large block of text which works on the written page doesn’t work on the screen.

Keep coding.

Hi, wesmarsh, thank you for the detailed feedback!
Regarding the code:

1.This font has a bold version, and as far as I can see, the text in the strong tag is bold (not a lot, but still it is different from the other text) .
2.My mentor adviced me to not make a habit from using id-s for styling and rather use classes. In this project, the id-s are required for the tests.
3. Yes, that would be more clever.

Regarding the design:

  1. Agree
  2. I realize that if I like any color, it doesn’t mean that it’s suitable for the project.
  3. Same as the color.
  4. Totally agree. I wanted to put in my text ALL the information I found:smile:

Can you advice me on choosing nice colors and fonts (who would be liked by many people)? I mean some resource on color schemes?