Tribute Page: Spirited Away

Code Feedback
1

Please check out my Tribute page and let me know what i should work on.

Thank You!

2 Likes
2

Pretty cool! I would,

give 0 to paddings and margins, your background leaks to the left.
give some padding to your timeline section.
Find out More link should be smaller.

Well done :slight_smile:

2 Likes
3

Thank You! that was something that I was trying to figure out but slightly gave up on to finish the project, I appreciate the help.

4

Hello @taty2010,

HTML

  • error

Element “title” must not be empty.

From line 6 to line 6:

  <title></title>
  • error

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

From line 14 to line 14:

	<link href="https://fonts.googleapis.com/css?family=Carter+One|Patrick+Hand" 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).

  • error

No space between attributes.

From line 75 to line 75:

<img class="chihiro"src= "https:/ /www.dropbox.com/s/qp0m5i6x397k5v4/1495065388121_248719_cops_6.jpg?raw=1" alt="spirited Away">
  • error

Stray start tag “script”. ( tag is outside </body>)

From line 80 to line 80:

</body>
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
  • info

This document appears to be written in English. Consider adding “lang=“en”” (or variant) to the “html” start tag.


cheers and happy codding :slight_smile:

Note:
Tools used:
[w3c markdown checker web service] (Service » Input » POST body · validator/validator Wiki · GitHub)

Video:

1 Like
5

It seems you are scaling your fonts the wrong way. Taking your h3 font size that normally is set to font-size: 1.5vw; it jumps right to font-size: 2.8vw; when your media query rule activates.

Maybe reading this article on scaling typography will help you in making a better decision.

Otherwise, really nice page. Happy coding.

1 Like
6

Thank you for pointing that out, the article is really helpful.