Tribute page on Alexander Flemming
Need some suggestions

Hi @Qasim, your tribute page looks good. Just a couple of things;

  • good job on using codepen the way it was intended. But you don’t need to include the <body> </body> tags. codepen assumes them for you too.
  • in the tribute info section you have each bullet point centered. It’s hard to read because the eye expects to read left to right and when reading the eye wants to go to the left justified side of the page, not somewhere in the center.
  • I normally don’t comment on someone’s design because that part is personal but if I could make a suggestion it’d be to utilize the line-height property in CSS. Not much but it would make reading a little easier.
  • Review the lesson about giving meaningful text to links
    • I realize English may not be your first language. Don’t use slang. By that I mean don’t say ‘wanna’, say ‘want to’.
    • In that same spirit, the better link would be “read more about Alexander Flemming’s life”

your page looks nice, you used strong colors and made them look good :clap:
I agree with @Roma, so easy to write :stuck_out_tongue_winking_eye:

Now sth from me:
You could fix spacing in HTML using that option:

I hope it helps
I think it’s common to use indentation equal to two spaces between embed element and it’s parent in HTML and CSS code, that button does exactly that

When picking a color scheme it is important to consider the subject matter. When you have an image on the page that also needs to be taken into consideration. On the other hand, having an image gives you some colors to pick from. I would suggest using a color picker on the image and see if you can find some colors that match the subject and goes well together. I think the green from the cans and the dark gray from the suit might go nice together, the green also matches the war time theme.

To increase legibility we can do a few things. Limiting the line length will make the text easier to read on larger screens. You can use max-width and margin: auto to limit the width of an element and center it. Next we need to give the <li>s some vertical space, I’d suggest giving them something like 40px bottom margin. I’d also suggest using a line-hight of 1.4 and maybe trying text-align: justify on the ul.

Here is a quick example, I have added a few comments. You can fork it (press the Fork button) if you want a copy for reference. I can delete my pen when you are done with it.

Keep up the good work, happy coding.

1 Like