Feedback Request for Tribute Page: David Attenborough

Hello everyone, I’ve just finished working on my tribute page to David Attenborough and would really appreciate any feedback anyone could give.

I’m particularly interested in what works well (from other people’s perspective/fresh eyes) and what could potentially be improved.

Being quite new to coding, I can’t help but wonder how efficient my code is, especially the CSS and if whether I could have achieved the same results using less code. If anyone sees any opportunities here, I’d really appreciated if they could point out and explain where I could have done better. Thanks.

1 Like

Do you have a link for your tribute page?

1 Like

Oops… forgot about that detail. Thanks. Here is the link:

1 Like

Hello @JamesDrysdale,

HTML

  • error

Bad value “https://fonts.googleapis.com/css?family=Abril+Fatface|Kumar+One+Outline” for attribute “href” on element “link”: Illegal character in query: “|” is not allowed.

From line 4 to line 4:

  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Kumar+One+Outline" rel="stylesheet">

From Stackoverflow:

The offending character here is “|” U+007C VERTICAL LINE, used by Google as a separator between font names; that’s a poor choice by them, since “|” is a reserved character, both by the “URL Living Standard” (which is what the HTML5 CR cites) and by the Internet-standard STD 66 (RFC 3986).


  • info

Element name “div=“container”” cannot be represented as XML 1.0.

From line 31 to line 31:

    <div="container">
  • error

Unclosed element “div=“container””.

From line 33 to line 33:

   <div="container">
     
  • error

Element “div=“container”” not allowed as child of element “main” in this context. (Suppressing further errors from this subtree.)

From line 31 to line 31:

    <div="container">
  • error (this is a side effect of the error in line 31)

Stray end tag “div”.

From line 53 to line 53:

    </div>
  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

From line 81 to line 81:

    <section id="gallery">
     

  • error

Stray end tag “div?”.

From line 137 to line 137:

  </div?
  • error (side effect of error in line 137)

End tag “main” seen, but there were open elements.

From line 139 to line 139:

  </main>


cheers and happy codding :slight_smile:

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

Video:

1 Like

Thank you so much for the detailed reply and the links to resources. I had no idea about all those hiccups so I’m really grateful you could help. That’s quite an eye opener. I’ll get to work on those points you’ve identified and try the markup validation in future to help me smooth out issues.

If anyone has anything else to feedback, please keep the comments coming. :slight_smile:

1 Like

You are welcome :slight_smile:

Cheers and happy coding.