My first project on FCC (Tribute Page)

Code Feedback
1

Hey! I’ve just made my first webpage in the form of the tribute page.
If anyone has any feedback, it would be greatly appreciated.
I’m quite happy with the results and I’m looking forward to hear your opinions and ways a noobie could improve the project.

1 Like
2

Looks Good
Congrats on your first page :+1:
You are not passing one test which requires your image to be responsive and relative to the width of the image division
right now your code is distorting the image making it wider than it is tall.
rather than limiting the width of the image to 80% add padding to the image-division container
its a rather large image perhaps link to a smaller size
another option would be to use the background-image attribute in CSS but that won’t pass this test.

img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: auto;
max-width: 100%;
}
#img-div{
padding: 0 10%;

}

the other issue I see is that you have your main section with a fixed padding which makes things wonky on mobile. add some media queries to adapt that to mobile screens.

image
image351×923 84.4 KB

1 Like
3

Hi, well done on the first project and I like your page :smile:
My tip is about using codepen for these projects. Everything that would normally go in the head section doesn’t actually go in to HTML editor when you use codepen. Instead go to Settings > HTML > and you will see Stuff for head. You don’t need to declare body tags either, think of the HTML editor as being the body of your document. Hope that made sense.
About your tribute, only critique on the look is that the blue colour used on the link website is so similar to the background blue I find it hard to read.
Good job :+1:

1 Like
4

thanks for the feedback, that’s really useful, will start working on making it more responsive

5

thanks so much, will do my future projects directly in codepen, and will change the link color!

6

Wonderfully done!!
Project overall is great
There are few things that you must note for future:

  1. Try to make font more readable. Internet is available to all kinds of people
  2. The links should be visible enough so that the user can simply spot them from the corner of their eyes. The last link provided seems to be hidden as the link color and background are both identical. Try using contrasting colors.

Remove those citation marks in square brackets it breaks flow.

1 Like
7

Thanks so much! Working on it right now!

8

I’ve adjusted the image to make it responsive as you said and I’ve found a workaround with the main part in css to make it respond better to smaller screens.
I didn’t want to use the media query yet because I don’t fully understand it yet. I think the solution at the moment, I specified the #tribute-info to 50% width, centered it with margin-auto and also specified a min width of 250 px to make sure it doesn’t shrink too much. What do you think?
Thanks again for the helpful advice!

9

Changed the color of the link! Thanks again for the advice!

10

that works looks better on smaller view ports now

1 Like