Please provide feedback on my tribute page

Hi,

This is my first substantive web page design project. While the tests all pass, and the page looks alright to me, I would appreciate any constructive feedback and insights.

I have a feeling that embedding lists (my <ul> and <li> tags) inside of paragraph <p> tags is not quite right, although the content appears to render okay.

I also wonder if there is a better way to visually style element placement (photo, caption, spacing between image and main text, etc.) besides the manual CSS “tweaks” I make to padding and margins.

Link to my Pen:

Thanks,

Andy

I think, it looks good - the golden color in the picture is in harmony with the slightly yellow background of the figure. But I would give the headings more space to breath. I would create a div or a header around h1 und h2 and give them some padding / margin.

1 Like

Welcome to the forums @amrlearn. Your page looks good.

You’re right. It isn’t quite right. You can review the HTML specs to see why. (Scroll down and look for “the p element” if the link doesn’t take you there.)
The short answer is that the p elements end tag can be omitted if followed by a block level element.

Running your HTML code through the W3C validator will show a stray closing p tag because of this.

1 Like

Thank you, Marcella, for taking the time to review my page and provide constructive feedback. I added a header as you suggested, and put some more space around the heading, and between the h1 and h2. I also italicized the h2 and changed the font style to normal, so it is set off a little from the styling of the main h1 title.

1 Like

Hi Roma, thank you for your feedback and confirmation of my concerns about the HTML. I will review the items you mentioned. I already moved the list elements outside of the p elements (easy enough to do that much!), and will review (and bookmark) the HTML specs and W3C validator pages.

I am happy to hear, that my feedback was useful for you! I think, the header looks much better now. The whole page feels balanced now. Keep up the good work and see you at the next project!

Really? I think I made the same mistake in my tribute page. It pays off to browse other peoples projects.

I started to suspect the problem with embedding ul and li in my p element when the CodePen editor started showing signs of odd indenting… either something wonky in the editor, or something wrong with my HTML. Looks like it was the latter.

1 Like