FCC Project Tribute Page - Review please

I have completed my tribute page. Please take a look and tell me what you think

1 Like

The project is great… However, work on the CSS of the image for a mobile viewport. Change the width to 100% and height auto for a responsive image… Otherwise great work and thank you

1 Like

Thank you. I’ll fix that now

Hey @Psypher, love the page! Couple of little comments on it… for consistency, I’d remove the period from the last entry on your ‘list’ .

Secondly, I think using <strong> and <b> have the same visual effect. The difference is that <strong> is “bold with added importance” and usually more normally used for text with added literary emphasis, whereas <b> is used to make thinks like punctuation or words with no extra emphasis appear “bolder”, Make sense?

So, I’d change the <strong> tags that make the quotation marks bolder to <b> tags.

On a side note, the same is true with <i> and <em> (Italic text and Emphasized text), with both displaying the same but <em> has extra literary emphasis.

See this page for further explanation. https://www.w3schools.com/HTML/html_formatting.asp

3 Likes

Generally, I like your tribute page a lot! It’s responsive and looks good on narrow screen, you captioned your image properly, it’s short but informative. :slight_smile: So well done!!

Adding to the <b> / <strong> suggestion, I think it’s a little redundant to use the strong tag within a <h4> as <h4> already defines it as an important title. To bold it, you could use CSS. :slight_smile:

Your <a> is not closed:

<a href="https://en.wikipedia.org/wiki/Dante_Alighieri" target="_blank"><b>this</b><a>

And while it is correct to replace the copyright symbol (I tend to forget about these things, so again, well done!), there’s also a small typo, it should be, I believe: &copy;

And a pointer that’s purely aesthetic… I personally love the font you used for the title (I’ve used this one too), but since it’s directly based on Art Nouveau (19.-20. century), if you wanted to be accurate, I’d go with some “older” font or perhaphs handwritten one. :slight_smile: But there’s nothing wrong with your selection so it’s just a matter of preference.

2 Likes

Thank you . I’ve made the edits. The link very helpful

1 Like

It took me ages to find that font, but handwritten you say. I’ll have a go at those. I have made the edits

Thank you :slight_smile:

Look at the handwritten font on my Tribute page, if you want an example of a handwritten font. https://codepen.io/Jerami/pen/NoKGdN

If you look at my page with a small screen, it will switch to courier font for legibility.

1 Like

How did you do that? Did you use a media query?

1 Like

Yep. A simple media query. Which you can see for yourself if you look at the code. I’ve quoted here for convenience…

@media only screen and (max-width: 500px) {
  #image {
    width: 60%;
  }
  blockquote {
    font-family: "courier";
    font-size: 70%;
    margin: .5em
  }
}

…which translates to, " if the media screen is 500px or below, switch the image to 60%. In the blockquote, change font to courier, shrink font to 70%, and change margins."

2 Likes