Any feedback for my first tribute page

Hello everyone!

This is my first project https://codepen.io/jccnnn/full/jOWQBxN. I feel like my CSS is messy. Is it?

Any feedback would be highly appreciated. Thanks.

4 Likes

Hi @Jccnnn,

Nice looking website :slight_smile: ! Well done.

You could definitely find ways to make your CSS smaller, by playing around with the inheritance of certain attributes, grouping things together, and the specificity of your selectors.

However, that being said, CSS always looks messy to me :stuck_out_tongue_closed_eyes: !

Yesterday I was watching this talk by Matthew Griffith about designing a better CSS that integrates with the Elm programming language, and he mentioned that Amazon ships with 220,000 CSS style rules (not declarations, but whole rules!).

That’s insane.

So, my view is this:

  • Try to make the CSS as concise as possible by looking for opportunities to use
    inheritance, reuse declarations, group things together, etc.
  • Know that the CSS code will probably still look messy after :stuck_out_tongue_closed_eyes: .

That’s my philosophy.

Have a good weekend!

2 Likes

Noted your advice, man. Also, thanks for sharing that vid, will watch that if I have free time, looks interesting.

Have a good weekend, too!

Hey there,

awesome work,
I like your site!

My ideas:

1 Like

Great job! :clap:

I loved the combination of collors you used! And the animation at the title also!

in my opinion, I would just add this atributs to your #image to always make it in the height of the users page.

  max-height: 70vh;
  max-width: 100%;

And remember:

“The value of the max-width property overrides the width property.”
https://www.w3schools.com/cssref/pr_dim_max-width.asp

1 Like

@julio-pinheiroo Hi, I tried to use vh for max-height property, but the #image looks stretched on my pc screen (Will fix it with media queries).

With regard to the colors, I used imagecolorpicker.com to get the main-image colors :slightly_smiling_face:

1 Like

Nice page the https://imagecolorpicker.com/

Thank you for the tip! :grin:

1 Like