Rate my first tribute page

Code Feedback
1

This is my first ever project and I was hoping if I could get some responds on it.I didnt put much effort into making it pretty but I just want someone to see if its proper and to give me constructive criticism.
Here is the link: https://codepen.io/joskicaleksa/pen/jQzJRZ

2 Likes
2

Hi :slight_smile:

Thats’ a nice beginning!
You can use margin:0 auto; insted of margin-left:550px; on #tribute-info
This will allow the block to be centered!

You should also use the validation script provided to verify that it matches what is expected (Currently your code gets an 8/10).
Do not hesitate to ask questions if needed!

3

Thanks for reviewing,appreciate it :smile:

4

I like it! My rating is 7.5/10 good work! Job :clap:

5

@joskicaleksa, couple remarks from my side:

  1. Remove background - it looks better and cleaner on white
  2. header should be a container for the title wrapped in h1 and image (w/ caption)
  3. Caption shall never be h1, use p or google <figure> ... <figcaption>
  4. Wrap text in <div id="tribute-info"> and wrap each paragraph in it’s own p tag and remove all those br tags.
  5. As @mangasource suggested use margin:0 auto;
  6. Use blockquote tag for quotes and give it width, so it consistent with #tribute-info
6

Increase the contrast ratio of the text, as it’s difficult to read. Consider using a background gradient instead of a background image. It can achieve a similar effect.

7

＼(⌒▽⌒)
I am joining @mangasource and @snigo on the things that need changes although, I really like the vibes of it: the choice of font, background, color makes it …I don’t know It recalls the style of the photo!

8

Thank you all for reviewing and commenting,starting to like this community really well