Please feedback my Tribute Page-project

Hey everyone. This is my first project: https://codepen.io/lElfenLiedl/full/gOYjoJg
Please have a look and tell me what can i do better.

Also i have two questions:

  1. I wanted to adjust opasity only for black background color and leave all the text and images without any opacity. Do you know how to do that?
  2. I just started and don’t know how to change space between 3 images with heroes. Could you give me a tip how to do that?

Thanks!

Hi! Good job considering it’s your first project, your page looks neat on desktop width :slight_smile: However, you might want to make it more responsive. For instance, your main element has width: 1000px; which looks OK on full size, but when you shrink it down to mobile view, it goes out the window and you have to scroll to the right (not a good user experience), so the best practice is to try to use relative units whenever you can (like percentages for example).

One more tip: if you click on the arrow in the upper right corner of the HTML panel in CodePen and choose ‘Analyze HTML’ option, it’ll show you a couple of errors that you have in your code, so try to tidy it up a bit :slight_smile:

As for your questions:

  1. You can change the color opacity by using rgba values. Semi-transparent black could be something like rgba(0, 0, 0, 0.5). I think you might find this page useful if you want to know more about colors.
  2. Changing the space between images could either be done by setting their margin or turning their container into a flexbox or a grid and then adjusting the positioning and spacing of the elements in it.

I hope this helps and good luck with the other projects! :smiley:

1 Like

Thank you! It helped

1 Like

Kristina, i reworked it as you said. Could you take a look? Does it look better now? What else should i change?

It looks much better on smaller screens now, congrats on making it a bit more responsive :smiley: If you know how to work with media queries, you could maybe make these text boxes a bit wider from, say, 450px and smaller, because the text goes out when you go below 400px. Make sure your page looks good on up to 320px screen width. But hey, so far so good, just keep it up :slight_smile:

1 Like