Hi! Good job considering it’s your first project, your page looks neat on desktop width 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
As for your questions:
- 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.
- 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!