Tribute Page 1st Attempt - Please review

Code Feedback
1

This is my first attempt at a tribute page. Feedback … please…anyone.

2

Nice job getting all the tests to pass! You have a good start.

First you should make the image responsive, so that it resizes if the device’s screen is too small for it.

For the design, I think the colors are a bit strange. The blue title doesn’t seem to match the rest of the page. The linear gradient background behind the timeline is a nice touch, but again the colors don’t match I think. A light background color or texture for the whole page would look nice, instead of the white. There is too much contrast between the white background and the linear gradient background.

Try picking colors that go nicely with the colors of the image. It is very monochromatic, so try a color that compliments that beige color.

3

That is solid advice and I would suggest that you use:

https://color.adobe.com/create

For colours! Cheers

4

It looks good – it really is the little details that would improve it :wink: That “oh, default link color blue” title is sort of distracting… I’d probably want a background color that’s not glaring white, too. Still, it’s solid and awesome.

5

Thank you for the advice. I will work on improving the page

1 Like
6

Hello ChrisM,

First of all. You DID pass all the tests. Congratulations! That being said.

I am telling you this as a constructive critique not just flaming you. These are by my opinios mistakes that you did creating this Tribute page:

  • Your body has a unnecesary tag main see here --> <body id="main">
  • Your css has also empty tag --> #main {}
  • The ‘align’ attribute is no longer valid on the <div> element and should not be used.
  • You have not provided logical mark up for the web page. I would strongly you recommend to read Applied Accessibility Challenges. This is one of the best things that freecodecamp has for the begginers.
  • Althou it is a simple website, it would be a good practise to have css varibles with fallback css option.
  • You have not provided the the <!DOCTYPE> and <head> tags for the site. Read this: Define the Head and Body of an HTML if you want to remedy the issue at freecodecamp .
  • Last <div> shot not defined as that, since it is clearly a footer. This should be remedied --> Read: Screen Reader Navigation Easier with the footer

These were just a few things that I have noticted when I have glanced throught your code.
Best regards