Tribute Page - My first ever project

Hello,
This is my first ever project and my first time coding. Could you please give me some feedback? Thanks in advance.
https://codepen.io/gezo1993/pen/mYOjXJ

1 Like

Hello Gizo and welcome to the community!

It’s a really good first web page. What I personally don’t like is that it is black and white (but maybe is a Michael Jackson’s reference haha).

Keep up the good work!

1 Like

Thanks LoneWanderer for the feedback… Any suggestions on increasing the image size without affecting it’s responsiveness?

It is nice, here are some things I can suggest.

First, the gray main bends in with the white background. try changing the background color or swapping the colors.

Try using box-shadow: 2px 2px 5px black; on your main container. It will add a nice divide

Center the bolded Wikipedia text at the bottom.

Add a border-radius: 20px; to your main.

You could maybe make the image a little bigger.

You need to change the right and left margins on smaller screens to make it responsive. Try using Media Quieres for this. Here is what it looks like now:

You also need to remove the #tribute-info padding on smaller screens too because situations like this happen (green space is the padding):


Notes

Please hit the reply button or I do not get notified.

Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites

1 Like

First, don’t remove your text padding. Keep it like it was before, but change it on smaller screens using media queries

–> https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Try using percentages. Your #img-div is already 100% of the width (excluding padding), so you just need to increase the image size itself.

I can do:

img {
  height: 100%;
  width: auto;
}

Or

img {
  height: auto;
  width: 100%;
}

Here is how I applied this to change your image size:

Try picking a higher quality image. You can use Google’s Advance Image Search to make this easier.

1 Like

Thank you very much for the feedback you have rendered me…

I have worked on the color, added the box-shadow you suggested to the main container.

Also added the border-radius to the main and I have made the image bigger. Am yet to work on changing the left and right margin of the image to make it responsive.

I will also change the right and left padding for the#tribute-info to make it responsive on small screens.

I will notify you once am done with media queries.

Thanks once again.

2 Likes