Hello Everyone!
Please have a look at my tribute page and any feedback you may have for improvements will be greatly appreciated.
Thank you so much! 
Hey, I think you have some issues with responsiveness. The “Maya’s Life” content seems to move as I widen/narrow my browser. If I start super wide the content is offset to the right a little. Then as I start to narrow from the right side the content moves left and eventually starts getting cut-off on the left side (and there is no horizontal scroll bar so I can’t get it back). Eventually I reach the 500px break point and the content comes back but it is still cut-off a little on the left.
A few suggestions:
- Definitely do not use
float: righton the #life-maya div. If your intent for doing this was to center the content then there is a much better way to do that:
https://css-tricks.com/centering-css-complete-guide/ - Don’t set the width on the #life-maya div in ‘px’, use ‘em’ instead. 460px may seem like enough but if I have the text size manually increased by 200% then only 3-5 words are able to fit on each line. Using ‘em’ allows the width to grow appropriately as the text size increases. But really, there is no reason to put a width on that div at all. You can put a max-width on it though (which I would recommend). For example, if you never want it to get wider than the image at the top then you could use
max-width: 1000px;In this case 1000px is enough horizontal space for even large text sizes. - I think the h3 heading should be an h2. And the h4 heading is not actually a heading so it should be changed to a
<p>. - In that last sentence, the text that is a link needs to stand out someway from the rest of the text (e.g. make it underlined or a different color). Also, the link text is not quite descriptive enough, it just say “Wikipedia entry”. You want the link text to include Maya Angelou’s name. Rewrite that sentence to something like “Check out Maya Angelou’s Wikipedia entry to read more about her extraordinary life.” and ‘Maya Angelou’s Wikipedia entry’ would be the link text.
- The green header text color is not quite dark enough to technically be accessible. You can check color contrast accessibility at
https://webaim.org/resources/contrastchecker/ - Consider using
<figure>and<figcaption>for the images.
Welcome to the forums @sasa1. Something else to revisit;
- Keep the test script when forking the pen (
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).- Your page passes 8/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
- The test script should be included, with all tests passing, when you submit your projects.