Feedback please on my Tribute Page :)

Code Feedback
1

Please provide any feedback on my Tribute page, thank you!

1 Like
2

HI @tyui78 !

Congrats on finishing the tribute page!

A few comments regarding the code.

In codepen, you don’t need to include the html tags because that is already built into codepen. I think better tag to use here would be the main tags.

<html id="main">

Be careful here, because img tags are self closing and don’t have end tags.

  <img id="image" src="https://i.guim.co.uk/img/media/5dab212de07d8009dd06560efeb1ac87b114e23d/0_640_4183_2510/master/4183.jpg?width=620&quality=85&auto=format&fit=max&s=ef368022a290bc1e98b98fcb06218be8"
         alt="decorative image"
       </img>

For your html, I would suggest formatting your code using codepen’s built in tool.

Screen Shot 2022-03-19 at 5.57.53 PM
Screen Shot 2022-03-19 at 5.57.53 PM720×598 25.7 KB

Hope that helps!

3

Thanks for the feedback!

I have enacted the tips you have provided.

How come when I change my HTML tags to main tags, there is now a white box around the page?

4

Initially you wrote this.

<html id="main">

Which meant the entire background for the document was orange

#main {
  text-align: center;
  background-color: orange;
}

If you still want to use main tags and have the background be orange, you can apply that to the body selector like this.

<main id="main">

body{
    background-color: orange;
}

But something I missed the first time looking at your project is this part for smaller screens

Screen Shot 2022-03-20 at 11.16.23 AM
Screen Shot 2022-03-20 at 11.16.23 AM400×846 176 KB

Right now you have the image set to a max width of 500 px

#image{
  max-width: 500px;

That is going to be an issue for screens small than 500px.
You will need to adjust that so your image looks good on all screen sizes.

Hope that helps!

5

Thanks!!
I have updated the main tags as well have updated the image to be max-width: 100% so it looks good even on small screens.

6

Good Job fixing the Dimensions at the smaller screen widths.

My suggestions to You on this project will be pretty similar to the Queer Eye Survey.

FIRST: I think you should chose a color palette that works well with the image:

Screenshot 2022-03-19 3.58.52 PM
Screenshot 2022-03-19 3.58.52 PM707×473 174 KB

SECOND: I think you should consider adding padding to your text, and changing the numbers to remove the unnecessary Zeros.

Screenshot 2022-03-19 3.40.46 PM
Screenshot 2022-03-19 3.40.46 PM821×483 42.5 KB

PADDING ADDED:

dl {
  background-color: #192327;
  max-width: 1000px;
  margin: 0 auto;
  border: 0px solid #192327;
  padding: 2% 4% 0 0;
  text-align: center;
  width: 80%;
}
7

Thanks Alless!

I have enacted your feedback.

8

Good color Choice. A Very Dinosaur-ish Color palette. : )

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.