Michael Jordan Tribute Page - My first project

Hi guys,

I just finished my first project, the tribute page challenge. Any feedback on it is much appreciated! :smiley:

Here’s the link: https://codepen.io/JJ_JJ_001/pen/WNozvyZ

Thank you,

7 Likes

Hi @jiga.ion.adrian !

I think your page looks good.

You have this error in your html.

    <img id="image" alt="Michael Jordan celebrating" class="center" src="https://wallpapertag.com/wallpaper/full/f/f/6/45181-michael-jordan-wallpaper-1920x1080-photos.jpg" ></img>

Img tags are self closing. There is no end tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

3 Likes

Hi @jwilkins.oboe,

Thank you for pointing the error out! I didn’t even realize I had it. HTML tags usually require the end tag so I must’ve put it there at the very beginning.

I’m glad you like the page! It took me about 4-5 hours to do it.

4 Likes

Hi @jiga.ion.adrian . Congrats on passing all the tests for your Tribute Page. I noticed two ways that your project can be improved. First, to make your quote easier to read, I would change it’s font-size to something smaller like “1.1rem”. We never want text spanning from one side of the page all the way to the other side. Secondly, to make your unordered list more readable and nice, I would keep the bullets on it and put it in a div with a class, then select the div class and give it a margin: 0 auto; and change the div’s width to something like 60%. This will center it on your page by using the shorthand margin property with 0 margin on top and bottom, and auto for left and right. Your also going to want to delete “text-align: center;” from your unordered list. I would also change the font size to be bigger with a more pleasant font-family throughout your page. I like the font properties you have for your title and quote. Perhaps the whole page should be consistent with the same font-family throughout. Please adjust the settings that I recommended to you as you see fit.

2 Likes

Your page looks good @jiga.ion.adrian. Something to revisit;

3 Likes

Thank you very much for the info, @Problem-solver! I will try out your suggestion later today, after I get out of work.

2 Likes

@Roma, if I get right what you are saying: my text for the links are too long? Or is it something else that you are suggesting?

2 Likes

Perhaps @Roma means that you should add a focus and hover state to your links. Also, include descriptive text in your link that makes it more clickable. For example, including “Check out his” in your first link, and including “view his” in your second link. All my advice in this post is to make your page more accessible mainly for disabled folks who are using screen readers.

1 Like

@jiga.ion.adrian Your tribute page is good :+1:

Here are some few tips to make it better:

  1. Try using different fonts you can find various fonts from fonts.google.com

  2. And make your image bit smaller

Here,is my tribute page https://codepen.io/NikhilManda/full/ExgepVV

you can see how I made my page and imported fonts form google fonts

2 Likes

A big congratulations to you. I just completed mine today.

1 Like

If you read the provided links you’ll understand more.

Someone using a screen reader will only hear “nba legend profile” and “wikipedia entry” and neither of them will make any sense.

2 Likes

it is very good , as someone who is just finish my first hero page all i can advise is keep your css lines in order it is not good to write some paragraphs and after that title or heading, you know what i mean.
you will have big problems later because order is very important.
this is my
https://codepen.io/dane0230/pen/QWdLdmK
keep it with good work

@kent05, If you’re having an issue please open your own topic so it doesn’t interfere/clash with the OP’s topic.

Ok I’ll do that thank you.

Yes, just click New topic button above and just describe your issue.

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