FCC Project Tribute Page - Review please

I Built This
1

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

1 Like
2

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
3

Thank you. Iā€™ll fix that now

4

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
5

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
6

Thank you . Iā€™ve made the edits. The link very helpful

1 Like
7

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:

8

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
9

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

1 Like
10

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