My tribute page to Sofia Vergara

please please be my harshest critic.

I think you can do it better, the chronology doesn’t looks good, you can spend a little more of time checking other project to get inspiration.

You are right and I appreciate your feedback. I have checked other tribute projects before but I could not understand those codes since I have no knowledge of html and css prior and I just follow FCC lessons.

It is ok but as you progress, feel free to return and improve it.

Thanks for comment. I will improve it.:fist:

1 Like

In terms of the UI/UX, it’s not great that as the user scrolls down, the chronology list scrolls up and hides Vergara’s face. It’d be better if that image wasn’t fixed in place and scrolled with the rest of the page.

In terms of your code, there are several issues:

  1. You don’t really need to use the <head> tag on CodePen, but if you’re going to put it on there anyway, then you should also use the <meta> tag to define a charset of UTF-8 like this:

<meta charset="UTF-8">

  1. You have HTML tags in places where they shouldn’t be. The <div> tag with a class of “fixed-bg” should be placed within the <body>, not outside of it. Actually, all of your visible HTML elements should be placed within the <body>, as you have other tags that are placed outside of it at the bottom of the page as well.

  2. Both the <p> tag and the <ul> tag are block-level elements, and you shouldn’t nest one inside the other, as that’s not how they should be placed. They should always follow each other sequentially, like this:

<p>Some text</p> <!-- Or delete this tag if you don't need a line of text -->
<ul>
<!-- your list -->
</ul>
  1. Your use of the <strong> tag is incorrect as it should be used to indicate a strong meaning and not as a visual effect, and if your intent is solely visual (which it is, in this case), you should use CSS. Likewise, your use of the <em> tag is also incorrect as it should be used to emphasize the meaning of a word. More info on the strong and em tags: <strong>: The Strong Importance element - HTML: HyperText Markup Language | MDN | <em>: The Emphasis element - HTML: HyperText Markup Language | MDN

  2. The HTML <blockquote> tag would be more appropriate for the quote than the <q> tag, as the <q> tag should be generally used for inline quotes instead.

  3. You should avoid using the <br> tag as spacing between elements. It’s a better idea to use CSS to control spacing between elements (using either margin or padding).

  4. The “target” attribute in your link to Vergara’s Wikipedia page should have a value of “_blank”, and not “-blank”, to make the link open in a new window. Right now that functionality is broken because your value is incorrect.

1 Like

Thanks a billion for your feedback. God I learned so much from your comment. I Definitely need to work on much more.:wink:

Noneone says: This is easy, you can doit better for sure, take your time, and came back when you feel proud…

I know it is not Easy. I wish you could take a look at my codes…