Tribute Page & A couple of questions

Project Feedback
#1

Hello everyone :wave:

I just finished the Tribute Page and feedback is definitely welcome!

https://codepen.io/designbk/pen/LYbOQpV

Some of the items in my list are more than one line and I’ve been trying to increase the vertical spacing only between the bullet points/rows. However, everything I’ve tried increases the vertical spacing throughout the entire list.

Also, can those using Firefox see the background image?

If anyone has workaround for these issues, I’d greatly appreciate it! Thanks!

#2

Hey, just looked at it. I am on Firefox and I don’t see a background image.
As for the spacing I believe it looks good as is. But if you wanted to adjust it you could possibly wrap those lines in a <span> tag and apply some extra margin or padding. There could be potential problems with that method when the user adjusts the viewport, which the line length would change.

Otherwise good work!

#3

Thank you and thanks for the suggestion! I’ll look into trying the span method.

#4

Nice tribute page @dbk. Maya Angelou would be pleased.
There’s a horizontal scroll bar at the bottom of your page making it seem unresponsive. Maybe you may want to look at that. Adjusting your width property or setting the overflow should address that.

#5

Thanks for the feedback!
I made some edits and got rid of that horizontal scroll bar.

1 Like
#6

You can change the distance of the bullet points by giving a margin-bottom to your <li> elements.

#7

Welcome to the forums @dbk. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address. (The figcaptionelement is not used correctly. It’s an easy fix)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “Maya Angelou” is not accessible

I wasn’t able to see the background image in FF at first. When I changed the protocol in the background image link to https then the background image appeared.

#8

bro…how to submit this… I had passed all test cases…but still it’s showing submit your work
What is the solution for this??

#9

@aslam-hussain-shaik, you should create your own topic rather than coming into someone’s topic that is different than yours.

#10

Thanks! I’ll look into it.

#11

Thank you! I’ll be sure to make those edits!