First milestone- Tribute page project

Hello guys and gals!
At last, finished my first project. it took me LOTS of time to accomplish and to get it the way I want.
Why this color palette and the way it looks? Wanted to make it look like late 90’s when we had only dial up modem and Netscape. Once saw a fan site with this color pallet and really liked it.

what was done:

  1. Tests- passed 10 out of 10.
  2. HTML+ CSS validation (validator.w3.org)- passed with no errors
  3. Just in case- format/ analyze in codepen.io- passed with no errors

I tend to believe , nevertheless I have some spaghetti hiding over there and there are ways to make it look nicer.
So I’m presenting you my FIRST project for positive\negative insights, tell me where I’m wrong, because everything works. Scourge me :rofl: :rofl:

Your page looks good @Eldorado82. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Don’t use <br> to force spacing or line breaks. That’s what CSS is for.
  • Users are not seeing the page the way you want them to. Most won’t have ‘Mulish’ loaded on their computer and you neither link to it or import it.
    • You also specify a font-weight so don’t forget to embed that weight you’re looking for too.

I don’t normally comment on someone’s design but;

  • That’s a lot of text. On a desktop it stretches from one end to the other. It would be easier to read if;
    • There was padding on each side so the text doesn’t butt up against the sides
    • You left justify the text rather than center it. When reading the eye wants to start at the left side and with centering it has to jump to continue reading.
  • Dark blue on black doesn’t offer enough contrast. Some with poor eyesight will not be able to read that very well.
  • Did you try using an ordered list for the discography? You wouldn’t have to put in numbers manually. It’d be easier to maintain if you wanted to edit it later. It would give you the spacing rather than you using <br> elements.

HI @Roma!

Thanks for in-depth review!!!
I’ll fix those issues ASAP, and after all the checks ill re-post again.

hi @Roma

Done my best (hopefully) to work on your insights, so its now tribute page V2

Looks good @Eldorado82. Run it through the W3C validator again. (Ignore the first warning and first two error messages.) There are a few things to clean up. For instance;

  • This <h1 id="title">The Prodigy tribute page<h1> doesn’t have a proper closing tag.

  • This </> appears two times in your document. I’m not sure why. The second one is maybe there to close the section element. So use it as such.

  • Side note, if you wish to import the font, don’t use the style element in HTML. Place the import as the first line in the CSS section.