Need feedback on my tribute page. Please be honest

I need feedback on my tribute page. I am open to any suggestions that will help me to improve my project. This is my first week learning web development so I am an absolute beginner. Thanks for your input and help. You can find my project here.

1 Like

Man, I really like it–The yellow on black really works for me, for sure. I think it’s quite good! I wonder if you could play around more with the formatting of the paragraph and the videos just to see what other things you could do with them. Great picture of the band! Creative!

Here is amazing list of things to make a site more awesome - one of them is not to use black:

Never use true black (#000000). Pure black doesn’t exist so it looks out-of-place online. Black, in reality, is always a dark shade of another color.

For me a white font on a black background is very hard on the eyes, I can’t look at your page for more than a couple of seconds (but I’m in my thirties and my eyesight is shit).

Also as @jthiels said, you should work on your layout (google css grids or bootstrap).

Hi @johnwm211 , thanks for posting your work!

I like the simple format and the lo-fi look. Very appropriate for the material. The main concern I have is with the main body text. It’s difficult to read, for two reasons:

  1. On a desktop browser, the lines are very long. Try playing around with either [max-width] (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width), or using [multiple columns for text] (https://css-tricks.com/guide-responsive-friendly-css-columns/). Also, consider adding some paragraph breaks.

  2. White text on a black background is harder to read. There are a couple of ways to fix this:

  3. Reduce the contrast. As @jenovs suggested, avoid using pure colours (either black or white). Try instead a very dark grey and a very light grey.

  4. Space the text out by increasing both [letter-spacing] (https://css-tricks.com/almanac/properties/l/letter-spacing/) and [line-height] (https://css-tricks.com/almanac/properties/l/line-height/). This is commonly done in print material (look out for it next time you see light text on a dark background). Also, try reducing the [font-weight] (https://css-tricks.com/almanac/properties/f/font-weight/) of the text.

For example, try these CSS properties and see how they work for you:

letter-spacing: 1px; line-height: 1.5; color: #ddd; font-weight: 200; background-color: #111;

One more thing: avoid using ‘click here’ links (see Hirsch Fishman’s article for [four good reasons why] (https://www.wordpress-web-designer-raleigh.com/writing-content/4-reasons-to-avoid-using-click-here-in-link-text/)).

Great job @johnwm211!

One thing you could touch up is the content at the bottom of your page. Since you’re using bootstrap, this could be a simple fix:

  • For the sample songs, expanding the column size per div to 4 instead of 3 should evenly space out the divs in that row. If you wanna get super fancy with it, try using some flexbox styles.
  • For the footer note, adding a text-center class should do the trick.