Tribute Page Feedback and Error Checking

Code Feedback
1

Hello, just finished my tribute page and ran it through W3. Still has some errors and would love some feedback on what the errors mean, Im a bit confused. Any feedback would be greatly appreciated.

1 Like
2

Welcome to the forums @Maide. Your page looks good.

The first two errors (expected DOCTYPE and head missing child element of title) you can ignore. Codepen provides the boilerplate for you and those are included.
Have you researched to find out what the other errors mean? The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer.
for instance,

  1. duplicate id - an id must be unique within the document (this was taught in the lessons)
  2. <figcaption="img-caption"> - figcaption is an HTML element, did you mean to have “img-caption” set to an attribute?
  • Part of my feedback would be to run your HTML code through the W3C validator. You’ve done that. Now correct those issues. Hope I’ve given you a start.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “fan site” is not accessible

I’m not the best at styling and don’t often comment on it but

  • text stretching from one side of the screen to the other is hard on the eyes, especially on large screens. It’s better to have a container with less width
  • also, the eye when reading goes from left to right. It’s tiring when the text is in the middle rather than the expected left edge
3

Thank you! I’ll review the lessons for a refresher and improve the css portion.

5

Hi,
I’ve gone ahead and fixed / modified the code. The only error I get is that figcaption is not allowed as a child element of div. Here is the section of the code:

  1. <figure> ↩
  2. <div id="img-div"> ↩
  3. <img id="image" src="https://ent.trekcore.com/gallery/albums/publicity/archer/cast_archer_s2_02.jpg" alt="Captain Jonathan Archer looking solem, straight at the camera" class="center"> ↩
  4. <figcaption id="img-caption"> ↩
  5. Captain Jonathan Archer in uniform looking serious but friendly and captain like. ↩
  6. </figcaption> ↩
  7. </div> ↩
  8. </figure> ↩

I know it would be as simple as moving the figcaption outside the div but why cant it be part of the div?

6

Not be snarky, but because we say so. Or more accurately, because that is part of the HTML standard. Quoting from the MDN docs:

The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element.

Right there it’s telling you that its parent must be figure. Then later:

Permitted parents : A <figure> element; the <figcaption> element must be its first or last child.

So, I guess the real answer is, because that’s what the people that designed HTML decided. It does kind of make sense though - it is attached to that figure, it is a caption of that figure… Why would we put it somewhere else, if for no other reason just to make it easy to tell to which figure it belongs.

2 Likes
7

You asked me to take a look at your page…

All in all, it looks good. I see that you fixed some of the earlier comments - good.

I agree with the comments on the text width - like I said 50-75 chars is a good limit and you’re well beyond that. There’s a reason why newspapers don’t run their text lines from edge to edge but instead break them up into columns.

Also, at least the first image took a long time to load. In the real world, you’d probably work that photo down to something with a smaller file size. But there isn’t much you can do about in this case because we’re on codepen.

Just as a visual thing, I would probably round the corners a bit on the images and the “frames”. Even just a few pixels can make a big different, subconsciously. I just don’t like sharp corners.

But still, it looks good. Have fun on the Survey Form.

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.