Tribute Page for Bob Marley

Tribute Page for Bob Marley
0.0 0

#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


#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:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

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:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

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:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

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.

http://w3c.github.io/html/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements

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:


#3

Hello @erretres

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:


#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!

#5

I would suggest adding the following CSS, so the list looks does not look like it currently does on a wider screen (see bottom). This will center the list.

ul {
  padding: 0 25%;
}

After adding the CSS I mentioned above, it will look like the following on a wider screen.


#6

You’re welcome :smiley:

Cheers and happy coding :slightly_smiling_face:


#7

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


#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:


#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:


#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: