Looking for advice for my tribute page

Looking for advice for my tribute page
0

#1

Hey, this is my first project on FCC i would love any kind of feedback or ideas on my tribute page.


thanks in advance


#2

Hello @kempy,

My recommendation is always check the markup before save changes, in codepenyou can use Analyze HTML.

The W3C Markup Validation Service can catch more error,
but it can’t be used inside codepen, this is the url:

https://validator.w3.org/

HTML

  • error

No space between attributes.

line 6

    <img id="image"src="https://static1.squarespace.com/static/57f514c56b8f5b0e6b2093d9/57f7034cd2b8573e8813f36c/5a0f9fd1e4966b5d53240f87/1510973529543/4.jpg?format=1500w"alt"pic from google">

  • error

Quote “”" in attribute name. Probable cause: Matching quote missing somewhere earlier.

line 6

1500w"alt"pic from google">

  • error

Quote “”" in attribute name. Probable cause: Matching quote missing somewhere earlier.

line 6

alt"pic from google">

  • info

Attribute “alt"pic” is not serializable as XML 1.0.

line 6

    <img id="image"src="https://static1.squarespace.com/static/57f514c56b8f5b0e6b2093d9/57f7034cd2b8573e8813f36c/5a0f9fd1e4966b5d53240f87/1510973529543/4.jpg?format=1500w"alt"pic from google">

  • info

Attribute “google”" is not serializable as XML 1.0.

line 6

    <img id="image"src="https://static1.squarespace.com/static/57f514c56b8f5b0e6b2093d9/57f7034cd2b8573e8813f36c/5a0f9fd1e4966b5d53240f87/1510973529543/4.jpg?format=1500w"alt"pic from google">

  • error

Attribute “alt"pic” not allowed on element “img” at this point.

line 6

    <img id="image"src="https://static1.squarespace.com/static/57f514c56b8f5b0e6b2093d9/57f7034cd2b8573e8813f36c/5a0f9fd1e4966b5d53240f87/1510973529543/4.jpg?format=1500w"alt"pic from google">

  • error

An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

line 6

    <img id="image"src="https://static1.squarespace.com/static/57f514c56b8f5b0e6b2093d9/57f7034cd2b8573e8813f36c/5a0f9fd1e4966b5d53240f87/1510973529543/4.jpg?format=1500w"alt"pic from google">

  • error

No space between attributes.

line 14

<p><<a id="ufc-link"href="https://en.wikipedia.org/wiki/Ultimate_Fighting_Championship" target="_blank"> 

  • error

Quote “”" in attribute name. Probable cause: Matching quote missing somewhere earlier.

line 14

/wiki/Fear_Factor"target"_blank">

  • error

Quote “”" in attribute name. Probable cause: Matching quote missing somewhere earlier.

line 6

"target"_blank">Fear Factor</

  • info

Attribute “target”_blank"" is not serializable as XML 1.0.

line 6

 <a id="ff-link"href="https://en.wikipedia.org/wiki/Fear_Factor"target"_blank">


cheers and happy codding :slight_smile:

Note:
Tools used:
[w3c markdown checker web service] (https://github.com/validator/validator/wiki/Service-»-Input-»-POST-body)


#3

I may sound dumb,but i cant find the analyzers in codepen and the validator loads for 5 minutes and shows me 504 gateway timeout. From what i understand my code is missing spaces?


#4

Hi @Kempy,

Don’t worry, learn how to use the tools is part of the craft :slight_smile:

  • codepen:

  • W3C: validate by input:

https://validator.w3.org/#validate_by_input

  • W3C validate by file:

https://validator.w3.org/#validate_by_upload




From what i understand my code is missing spaces?

MDN documentation:

MDN example:

<a href="https://developer.mozilla.org/en-US/" target="_blank">

line 14 from your project:

/wiki/Fear_Factor"target"_blank">

Difference:

  • spaces

  • the equals sign ( = )

Cheers and happy coding :slight_smile:


#5

Holly cow(i dont know if i am allowed to swear on this site :D) I was very busy these past few days and only now had the time to check out these tools.Thank you very much for taking the time to screenshot how to use them.


#6

you are welcome :slight_smile:

Cheers and happy coding.