Tribute Page to Ayrton Senna

Hello everybody,

I’ve just completed my first ever project and would love to have some feedback on it.
Thank you!

Here’s the link

Hello,

The first things I noticed were the font colors yellow and green contrasting, maybe use softer shades, it is a bit hard on the eyes. Also your first image is large, I would make both images the same size.

There is one instance of his name being in all caps. It looks like it was copied and formatted improperly.

I also think you are using too many font type changes. One or two is ok, but more than that looks like you are trying too hard.

I don’t mean to be harsh, I am just very direct and blunt.

I do like how the underlining breaks for letters that drop down, that is a cool visual .

Your project looks well thought out, that just needs some cosmetic adjustments in my opinion.

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • click here” is not accessible

I don’t often comment on styling because I’m not the best but;

  • yellow on a white background does not offer enough contrast. Not everyone will be able to see it. Try using a contrast checker
  • The Lobster font does not lend itself to reading long lines of text. It’s difficult to read.

Hi Medearave,

Thank you for you quick reply and suggestins, I’ll try to make the changes accordingly.

But when I resized the images I no longer pass the test for the 2 items.

(User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

User Story #9: The img element should be centered within its parent element.)

It is confusing me…

Hello Roma,

thank you for your suggestions and time. There are definitely many things to consider in creating a web page. I’m still overwhelmed with all the details, but will master it with time hopefully. :smiley:

1 Like

I just looked at the code, try adding

class = center to the image.

I had the same issue myself, and got help here as well in the forum.

Edit your CSS for the other issue. right now you have the size set to 100%

Here is the error message:
\Try using the “max-width” style property : expected ‘none’ to not equal ‘none’\

Try using max-width instead of just width, it said it should equal none, but it does not.
Learning how to read the error messages can be complicated (and please someone correct me if I am giving incorrect information on what this means) , but it can help you narrow down where your problem is. Sometimes it will say , for example, that you are to have 5

tags. It will say expected 5, but equal to 3, and that just means you need to add to more

tags.

I am flattered you took my advice, I am new to helping on the forum, and hope this helps. I think in the beginning, everyone has a issue reading the error messages when you are new.

I also hope my information is accurate, and apologize if it is not, and ask if it is not, that someone please let us all of us reading this know.

Amanda

Hi, I liked your work, but the color yellow with white can confuse people who have vision problems. Careful with that. This is my personal portfolio and there is the link for the tribute page, I also have errors but I share it with you: https://codepen.io/juangpereira_/full/MWJmByd
(maybe I don’t have the best English, I’m Argentine)

Hi Amanda,

thank you for trying to help with those error messages, they are really hard to understand. I managed to resolve one of the problems but I cannot center the image element doesn’t matter what I do, I’ve tried many solutions…it just doesn’t work.

Perhaps I need some break to reshuffle my mind. :wink:

Nives

Hi Juan,

thank you for your advice and for sharing your portfolio with me. It is completely different level, looks great to me. I especially like your Tribute page, the colors and the layout.

Hasta luego!

1 Like

Thanks, I am glad you liked it
Hasta luego!

Hello,

I added the class before the alt info, and took off the left margin in your CSS and it passed the test. The site is using the CSS command over the HTML. You cannot tell the image how far from the side to be and use the center class command.

You should be good to go now!

Best wishes and warmest regards,

Amanda

Hi Amanda,

Yeaaah, your solution worked :smiley: Fixing that code really gave me some hard time.

Thank you sooo much for your help and time. :))

Many warm regards,
Nives

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