Testing tribute page want your suggestions

Hi,

Congratulations on completing your first project! There’s a lot that you’ve done right but there are also a few things I would change :
“Tribute to life of Flemming.” Maybe you meant to delete this bit? The font-size is smaller than everything else, and it’s not wrapped inside a heading. What is doing there? This bit of text is placed straight in the main tag. Why not turn this into a title or a least a paragrah? Underneath you place an <h1> with his name in it. It would delete either the first line or the title in the <h1> element, what you keep put that inside an <h1> element

<h1> A tribute to the life of Alexander Fleming</h1>  
 Or
<h1> Alexander Fleming</h1>

Not both.

I would not use an article element. An article element is for a part of the text that can be read separately from the rest. It still makes sense if you only read that and not the rest. But there is no rest. What is in the article is all there is. So, don’t do that.

I would certainly not put a a section element inside it. If the article contained several components and you would use more than one section that could work but you are using a list (and that is a good idea). So you don’t multiple sections.

The single section element without the article is ok and you’ve used a heading inside that section element which is what you should do (I read that on MDN). So that is very good.

The footer is alright too.

The font-sizes of your webpage are very big. Really very big. I think they can be a bit smaller. The text of the list is pushed against the edge of the list and that’s not so nice to look at. I would add some padding to the section or some margin to the ul element. Something like that.

I would also work on the colors. You have added a shadow so that’s good.

I would leave the page for now, do something else and later, you will have learned more and when you look at it in the future you can apply all the new knowledge to this page and slowly it will grow, like you will.

Greets,
Karin

Greets,
Karin

Thanks for suggestions

Your page looks good @Qasim. Something to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
      • You can also ignore the warning about missing a header if you choose.
    • There are a couple of HTML coding errors you should be aware of and address.