Make Tribute Page more Professional Looking?

Code Feedback
1

Hi everyone! I am looking to get some feedback on the Tribute Page project. Here’s a link: https://codepen.io/springstep/pen/XWmzPXP

How can I improve it so that it looks more professional?

2

I think giving the text a solid background color would make it look a bit better even if it has some transparency.

1 Like
3

You did a great job here.
What you can do is wrap the <p> tag inside a wrapper <div> and add a left and right margin to make the text wrap into the middle and makes it look nice

1 Like
4

Hi, I added left and right margin as well as wrap the

tag in a

. What do you think of it now?

https://codepen.io/springstep/pen/XWmzPXP

5

Hi, I changed the background to a picture. What do you think of it? https://codepen.io/springstep/pen/XWmzPXP

6

Looking pretty good.

1 Like
7

hey @SpringStep, your tribute page project looks amazing!

here are some tips / feedback for your consideration:

  1. The contrast between each element is too low
    * a good test would be to screenshot the whole page (get a plugin for that), and look at it from afar.
    * in good design, you should be able to tell what is what even when minimized
    * as for more practical tips, I think that you should bold the headers, and apply the background affect you did w the paragraph to the entire background

  2. Regarding spacing and the size of each element, I like spacing my elements in increments of 8 (16, 24, 32) consistently between elements, and having font-sizes along with that same scheme

1 Like
8

Welcome back @SpringStep. Your page looks good. Some things to revisit;

  • Your page passes xx/xx user stories.
    • The test script should be included, with all tests passing, when you submit your projects.
    • Click on the red button to see which test is failing and why. It’s a very easy fix.
  • Black text on an almost black background is not accessible. I only stumbled upon your two links because I knew they were there from looking at you code.
    • What happens with a device that doesn’t use a mouse and therefore cannot hover?
1 Like