Tribute Page for Bob Marley

Code Feedback
1

Hi freeCodeCamp,

I am new here and new to coding too. I just completed my first Basic Front End Developer Project on freeCodeCamp - Tribute Page. I would love to get some feedback if you have a chance.

Thanks! :smiley:

Matt

1 Like
2

Hello @MattDolan,

HTML

  • error

End tag “br”.

From line 6 line 6:

<h5 style="color:#9BE564" class="text-center">February 6, 1945 - May 11, 1981</h5><br></br>

MDN documentation:
<br>: The Line Break element - HTML: HyperText Markup Language | MDN

Tag omission:
Must have a start tag, and must not have an end tag. In XHTML documents, write this element as
<br />.

  • Do not use <br> to increase a gap:
<h5 style="color:#9BE564" class="text-center">February 6, 1945 - May 11, 1981</h5><br></br>

MDN documentation:
<br>: The Line Break element - HTML: HyperText Markup Language | MDN

Do not use <br> to increase the gap between lines of text; use the CSS margin property
or the <p> element.

----
  • error

Duplicate attribute “class”.

From line 8 to line 8:

<img width="256" class="thick-black-border" class= "img-responsive"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Bob-Marley.jpg/256px-Bob-Marley.jp\
g" alt="Bob-Marley">
----
  • error

End tag “br”.

From line 31 to line 31:

</p>
<br></br>
----
  • Do not use lower levels to decrease heading font size:
<h1 style="color:#CD533B" class="text-center">Bob Marley</h1>
        <h4 style="color:#D7F75B" class="text-center italic">love the life you live. live the
life you love.</h4>

MDN documentation:
<h1>–<h6>: The HTML Section Heading elements - HTML: HyperText Markup Language | MDN

Do not use lower levels to decrease heading font size: use the CSS font-size property
instead.Avoid skipping heading levels: always start from <h1>, next use <h2> and
so on.

HTML Standard

h2–h6 elements must not be used to markup subheadings, subtitles, alternative titles and
taglines unless intended to be the heading for a new section or subsection. Instead use the
markup patterns in the §4.13 Common idioms without dedicated elements section of the
specification.

Common Idioms

https://www.w3.org/TR/html5/common-idioms-without-dedicated-elements.html#common-idioms-without-d\
edicated-elements

----

CSS

  • error

Unkwon word ( the problem is the first “;” )

from line 3 to line 3:

body {
...
  padding; 20px;
...
}
----

cheers and happy codding :slight_smile:

Note:

1 Like
3

Hello @Diego_Perez

Thank you for taking the time to review my code and providing such great detail! The CodePen analyzer didn’t provide these results, so thank you for sharing the validator you used. I will take a look at my errors and correct them. Thanks again! :slight_smile:

1 Like
4

Good job on your 1st project!

Stylistically, I’d add a little more contrast between the text and the background. It can be a bit hard to read. I think you did a great job with space by centering most of the content. I think you should style the

    a bit to make it centered and pop out a bit more. Cheers!
1 Like
6

You’re welcome :smiley:

Cheers and happy coding :slightly_smiling_face:

1 Like
7

More descriptive links are better for accessibility.
“Wikipedia Entry” could be more specific.

1 Like
9

Thanks randelldawson for your suggestion! I made the change to my tribute page. Thanks again. :slight_smile:

10

Thanks JohnnyBizzel for checking out my tribute page! I made the change you suggested. Thanks again :slight_smile:

1 Like
11

I have corrected all the errors and check checked html and the CSS with the W3 Validator. No errors found now! :slight_smile:

Thanks again for showing me my error and the validator! :slight_smile:

1 Like
12

Thank you for your feedback and suggestions! I am researching how I can improve on the readability of my text and will update you on my progress. Thanks again! :slight_smile: