Stan Lee's Tribute Page Feedback

Code Feedback
1

Hello fellow campers, I design a Stan Lee’s Tribute Page as my first Responsive Web Design Project. Hope that you like it and i’ll aprecciate to read and discuss any the observations that you will might have.

Note: In the iconic stories section i wish that i could put a border to the images, but when i put it in the #img-div, i don’t know what happen but the border gets out of the image (this happens only on phone screen sizes). And if i put the border on the img element, the test script tells me that the images are not centered.

2

Hello @Stepmix!

The Observations:
  1. You shouldn’t use duplicate ID’s on your all of your images and your image captions; #image #image-div #image-caption.
  2. Try to add identifying headings h2 - h6 to all of your sections.
  3. Use other fonts instead of the default sans-serif font to improve the website visually.
  4. Change the footer color to red instead of black.
  5. Increase the font-weight a little on the footer and the “The Man” text.
  6. And last but no least center the <figcaption> of stan lee’s picture and increase its size.

Tip: If you code any type of website, make sure to check for any errors, by using this website W3C Validator.

@Stepmix Can you please explain in detail your image border problem? So I can see what I can do to help :wink:.

I hope this helped :smiley:.

3

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

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
      • remember, an id must be unique within the document
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Review the lesson about giving meaningful text to links.
4

Thanks for the advice!!! I already did solve the problems of W3C and added a few little tweaks that you told me (like the footer color, font sizes and so).

For the font size on the footer I used this reference: “ How to Properly Copyright a Website - Legal & HTML Requirements”, it says that is a good practice using the “small” element to this type of footer.

And finally used the “Open sans” font for the title, which is an alternative font of the marvel logo typography; and for the text, I used “Roboto, Trebuchet MS, Helvetica, Arial, sans-serif” which is the font family that Marvel uses on their website.

1 Like
5

Now, I added the border in the “img-div” so you can see the problem:

In a the desktop resolution the border looks good:

image
image429×612 140 KB

But in a phone resolution the border gets out of the image:

image
image341×521 96.9 KB

Note: When i try to solve the problem putting the border in the “img” element, the problem fixes but the test script tells me that the image is not centered.

1 Like
6

Hello @Roma!!

I think I fix all the issues that you mentioned before.

Really appreciate the time you give to the advice/observations.

7

Hello @Stepmix! Don’t worry, there is a simple solution to this :smiley:!

The Problem

But in a phone resolution the border gets out of the image:

image
image341×521 96.9 KB

Explanation & Solution
  • To fix this, you have to add specificity to your .img-div class which means you have to tell the browser where to specifically style that element (your <img> tag only), now what you did is that you used only the .img-div class, this only means that everything inside the figure’s children (elements that are inside the <figure> tag) will be affected in some way (depends on the properties).

In general, instead of doing this:

.img-div {
    margin-bottom: 10px;
    max-width: 350px;
    max-height: 500px;
    border: 10px solid rgba(32, 32, 32, 0.5);
}

Do this:

figure.img-div img {
    margin-bottom: 10px;
    max-width: 350px;
    max-height: 500px;
    border: 10px solid rgba(32, 32, 32, 0.5);
}
  • Now you’ve told the browser: Inside my <figure> tag with the class of .img-div, add a border only on my <img> tag, now if you decrease the width of the tribute page, your border won’t overflow. Also decrease the margin bottom to 10px as shown in the code to remove additional space.

And last but not least your figcaptions will be centered between your images, to fix that do this:

figcaption#the-avengers-caption, 
#xmen-caption, 
#fantastic-four-caption, 
#daredevil-caption, 
#spiderman-caption 
{
    position: relative;
    top: -1.5%;
}
  • Now the position: relative; will keep the <figcaption> in its document flow, which gives you the ability to move it wherever you want by using offsets (top, right, bottom, left) and won’t affect other elements when moved.

I hope this helped :smiley:!

1 Like
8

You’re welcome @Stepmix! As you can see you Tribute Page has improved a lot :wink:. Now to spice it up even more :fire:, you can:

  1. Add links (a link to an iconic story that is relative to that superhero) to your images in the “Most Iconic Stories” section, then add a simple animation.
    Example: when on :hover the image will scale in size and a box-shadow will appear with a slight fade.

  2. Remove the text-decoration in “Wikipedia Entry” by setting it to none; and add a hover animation.
    Example: when on :hover the color of the text will become darker or you can remove the underline on the text but on hover add an animation where that underline appears. Hint for the 2nd Ex: use the pseudo element ::after.

  3. Increase the contrast of the border on your superhero images.

Note:

  1. On your font-family the “Trebuchet MS” font needs to be in quotes because:

Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, like you did with "Open Sans" font.

  1. In the “Most Iconic Stories” section, your image classes when you’ve named them you’ve put dashes between them but in the xmen_img you’ve used an underscore.

  2. Make sure to host your images on Github instead of copying the image address on a google image because the provider of that image can delete it.

If you have any questions, make sure to comment so I can reply!
I hope this helped :smiley:.

1 Like