My first project - Tribute Page - looking for feedback

Code Feedback
1

Hi everyone,

I’m fairly new to coding (started about a month ago with going through FCC courses) with zero prior experience. I figured I should finally stop neglegting technologies and rather embrace them and learn how to work with them.

This is my first completed FCC project:

https://codepen.io/tomhermanovsky/pen/MWaOZvX?editors=1100

It’s just short and simple - nothing too fancy, - but I suppose we all have to start somewhere?

I’m keen to learn more and improve, as this is a great challenge for me and I love figuring out how everything works and how to put bits and pieces together to make the code work. I’ll be gratefull for any comment or feedback from you guys.

Cheers

PS: I’m not overly confident when it comes to making images and other content responsive and maybe generally using different units (%, px, rem, em etc.) when coding. As I’ve never really encountered them before, still ocasionally strugling to get my head around it. If you have any tips/advice/tricks to get hang of this, fire away!

2

Hi @tomhermanovsky,

Your tribute page is pretty good considering you a beginner.

Some suggestions from me,

  1. When you share the codepen link replace the pen to full. i.e. https://codepen.io/tomhermanovsky/full/MWaOZvX Now the reviewer can directly land to the full screen view of your page.
  2. Your background color is not applied to the whole page, there is a slight white background. To fix this apply the background css property to body tag.

Cheers…!! keep building…!! Welcome to the dev community :slight_smile:

Regards,
Nitin Sahu.
sudonitin.netlify.com/

3

Hi @tomhermanovsky,

Congratulations on taking the first steps to learn to code!

I would like to share with you some ideas you can implement in that Pen :slight_smile:

  1. You may want to get rid of the white spacing surrounding your background color.
body {
  margin: 0;
}

Will do just that.

  1. If you wish that the image doesn’t get cut off and responds responsively on screen resize, you can delete the media query and do this instead.
#img-div {
  width: 100%;
  text-align: center;
}

img {
  width: 100%;
  max-width: 811px;
}

This way, you’re telling the image container to get as wide as the viewport, and to also center all text elements inside it. CSS applies text-align: center; to images too.

Then, you tell the image that it should get as wide as its container, but only to a maximum width of 811px. So, the image will be 811px, but if you’re seeing it from a smaller device, it will perfectly fit the viewport, making it responsive.

Hope this helps!

4

Hi @globefire,

thanks for your comment, much appreciated. Sorted the body margin and I’ll share the link to the full view next time, thanks for the tip!

Cheers!

5

Hi @lerida !

Thanks for your feedback and your advice!

I’ve sorted the body tag, but got stuck sith the image. The change you recommended visibly seems to be working, but it no longer pass the FCC test for responsiveness. The text-align: center doesn’t seem to be working for me for some reason, so I used margins on both sides and it passed. I’ll definitely take a better look at it to try to understand what’s happening there.

I really appreciated your comment and your help!

Cheers!

6

Welcome to the forums @tomhermanovsky. Your page looks good. Some things to revisit;

7

Hi @Roma,

Thanks for your feedback, it’s been heplful for me to revisit some of the lessons and I made adjustments to the image and link as well.

Appreciate your comment!

Cheers