Tribute Page - all feedback appreciated

Hi folks,

Just started here on FCC and I finished my first little project today! Please take a look at my tribute page on the band Coldplay.

I have a little experience in web design, but most of it was ad-hoc and without any structure. In order for me to improve, I would love to hear your thoughts on:

  • The end result
  • My adherence to best standards (both for CSS/HTML and general coding). In particular, any superflous or overcomplicated code that stands out to you.

Please be as anal as you can, I don’t mind! :wink:

Thanks,

Vivovix

1 Like

You really just recently started? You have some good things going on here, I like that you took care of the little details that many would have skipped. And you’re already using flex, which is great, you can also add CSS Grid to your arsenal if it’s not there (will be useful in future projects).

I’d probably go easier with the box-shadow though, maybe lower the Y offset from 5 to 1 or 2.

As for writing better code, here is an example:

h1 {
    font-family: Roboto Black, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 3em;
}

h2 {
    font-family: Roboto Black, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 1.5em;
    text-align: center;
}

This could’ve been also written like this:

h1, h2 {
    font-family: Roboto Black, Arial, sans-serif;
    text-transform: uppercase
}

h1 {
    font-size: 3em
}

h2 {
    font-size: 1.5em
}

Point: Try to not repeat yourself too much, look for opportunities to achieve the same thing with simpler code.

Also, you don’t need to specify font-size: 1em on your body element. Em (and rem) is a size used relatively to the current/root font-size. In your example, you pretty much said: “Hey body, check what’s your current font-size and… keep it” :stuck_out_tongue:

1 Like

Thanks for the feedback!

I did do some “webdevelopment” prior to FCC. But that was before flex, grid and all those other techniques even existed, I think (2006-2008?). Pretty much just randomly copied stuff from all over the web, even though I suspect nothing has changed in that regard, lol.

The tips about condensing the code is exactly what I’m looking for, thanks. Good eye. The amount of shadow is subjective obviously, but I can see why less=more.

Your comment about body {font-size: 1em} took me on an hour long journey of learning about different ways to size fonts… which is awesome :slight_smile:

I think it looks good. Maybe the audio should go in a more conspicuous place. Being placed at the bottom left I thought it was a random image at first. :wink:

1 Like

Hi Pulamusic,

Thanks for the feedback! I added the audio as a fun extra, so I didn’t spend a lot of time on it, but you’re right - it is rather inconspicuous.