Tribute Page Project (Code review and/or suggestions are much appreciated!)

Hi, I just finished my first project and Id love to know if I structured everything well and what not. Any recommendations or criticisms are much appreciated. I want to learn as much as I can. Thank you for reading!

1 Like

So it would be better to add space between the dates and their paragraphs. Your paragraphs are not wrapped in paragraph tags so there is no space between each paragraph. Try something like this for your paragraphs. This will keep everything the way you have it, but add that space


 <p> <li><strong>1914</strong> - Born in Cresco, Iowa.</li> </p>

1 Like

Thank you, so are you saying I should just be adding paragraph tags to each of my list elements? I just want to make sure I am understanding you correctly. If that is the case, the hierarchy would be my unordered list containing a bunch of p elements and then the p elements enclose a list element. Is this what you think I should do?

So for every li that you have add a <p>before your li and then </p> after your closing li tag.

It should look exactly like the first example I gave, but do that for every li

1 Like

Got it, sounds good. Thank you for the recommendation. If you don’t mind me asking, what is the purpose of doing this? (i just want to expand my understanding)

Heres is a good definition of the paragraph tag (p)

“ The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines”

In general, you want to put your text in paragraph tags. In your code, right now there is no space between your paragraphs. They just come one after the other. When you put your text in a paragraph tag (p) it will add that space to separate your paragraphs . When you add it to your code, you will see the difference and what it does

An additional reasoning “ Browsers automatically add a single blank line before and after each <p> element.”

Oh yea, got it. The thing is everything is wrapped in its on list element within an unordered list, which separates each body of text on the DOM. So every “paragraph” is “spaced out” or separated by being its own element and having its own bullet point. The format I used was this:

<ul>
     <li>example 1</li>
     <li>example 2</li>
     <li>example 3</li>
</ul>

^ My question to you is really, does this not satisfy the form? Considering everything is separated and if you were to even inspect element, you can see each li tag that houses the text, is its own mutable element.

The html code above would produce this:

  • example 1
  • example 2
  • example 3

There is no “space”. Your list is seperated into each list item, but there is no space between them. Here is what it looks like right now

Everything runs together. There is no space between each list item. Here is what it looks like when you add the paragraph tags

Got it! Ok, now I understand. Thank you for taking the time to explain. I didn’t understand the intention before.

No worries, I admit I can be better when trying to explain but I am glad you understand it.

1 Like

p is not allowed as a child element of ul
Try running the code that you’re suggesting through a validator to see what I mean.

One would use CSS to increase the spacing between list items.

1 Like

@brianschnee, it’s hard to give much feedback on this. The code looks too much like the sample project.

Do not try and replicate the sample projects. They show one way the project can be completed. The instructions say to make your “functionally similar” and “give it your own personal style”.
There are some things in the sample that need to be corrected but I won’t comment on them here.

Also, keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
The test script, with all tests passing, should be included when you submit your projects.

1 Like

Alright thank you, I had actually posted a separate forum post about how I should be approaching projects. For future projects Im going to add my flare, I had initially thought the goal was to recreate what the samples had looked like. I’ll add the cdn link to each project. Thank you for the help and I had figured out how I should be styling the li elements, in regards to your other comment. I really appreciate the help.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.