I have done a tribute page and please give me a feed back on it,so i can improve it

I have done a tribute page and please give me a feed back on it,so i can improve it
0

#1
  1. It is a Tribute page
    https://codepen.io/pash007/full/WaoMJm/

#2

Hey @PrashantSury,

A very good try.

However, i would recommend aligning headings to lists and footer in the center.

Good work though.
All the best :+1:


#3

Its nice but look at this example:


See how i put all my content on one div and then put that over a background color (in your case, use that pastern as the background.)


Notes:

Please hit the reply button or i do not get notified.

List of helpful websites for web design (and inspiration) --> https://codepen.io/Mike-was-here123/post/check-out-these-sites


#4

Hey nice page the background is really cool, the only thing I would say is to add a footer and you have a typo with the end when you add the more information link. Good work though looks great.


#5
  1. The id=“title” div should really be an h1

  2. Use margin and padding to space things, do not use empty p elements for spacing.

  3. Speaking of spacing, give your elements more vertical room to breathe.


#6

Thank you for your suggestion and i have made some changes please it once.


#7

Looks good.
One more thing i would recommend is using h1 or h2 for headings of unordered lists which have text “EARLY LIFE”, “UPBRIGNING” AND “REST OF LIFE”.
Also align these headings in center.

All the best.


#8

Thank you ,I have made changes as you mention,please check it once.


#9

Thanks to all who suggest me.


#10

Color that #tribute-info white (background color)

using media query’s --> https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/create-a-media-query/

check when the max-width is 730 pixels and make the width of #tribute-info 95%


#11

Ohh, you have done very well.
Just one final change would be to give your #tribute-info max-width property instead of width.

It will make your page go well on mobile devices.

It is great to see that you are willing to learn.

All the best.


#12

so basically:

max-width: 700px;
width: 100%;

He will also need to remove that 10px padding on smaller screens (media query’s)


#13

I guess I should have looked at the source and not just the DOM, I see what is going on now. Your p elements are being rejected as parents for the ul’s, and end up as empty elements in the DOM.

Technically I think it is because the permitted content of the p element is phrasing content.


#14

Actually I don’t get what you are trying to say.Please, can you elaborate to make me understand?


#15

Sure I can try.

  1. You can’t use the p element as a container for the UL element, the UL element is a block-level element and it is not permitted as content inside the p element.

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

  1. As you can tell by the screenshot, on the left I have selected the p element in the HTML box, on the right you can see how the browser is actually rendering the page (i.e. how the DOM looks). The empty p element you see highlighted in blue on the right is the p element selected in the HTML box.

  1. I believe what we are seeing is the result of the p element automatically closing as the browser encounters (parses) the UL block-level element, and so you end up with an empty p element.

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.

  1. In short, this is not valid HTML (Error: No p element in scope but a p end tag seen.):
<p>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</p>

This would be valid:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

#16

Make the height of your #tribute-info relative, because on smaller screens the content moves outside of it.


#17

Thank you very much ,now i understand. Now i will make changes in a code.