Help with errors please

Code Feedback
1

https://codepen.io/meowww/pen/vYZNNjR

2

Read the failing test messages. They are trying to tell you what the problem is. You’re first failing test says:

Within the "img-div" element, I should see either a
  <figcaption> or <div> element with a corresponding
  id="img-caption" that contains textual content describing
  the image shown in "img-div".

expected null to not equal null AssertionError: 
  expected null to not equal null

That is telling you what the problem is. Here is the relevant code.

  <div id="img-div">
    <img id="image" src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTY2MzU3OTcxMTUwODQxNTM1/steve-jobs--david-paul-morrisbloomberg-via-getty-images.jpg" alt="Steve Jobs smiling at the camera" ;>
  </div>

It is saying that inside that div, there should be a figcaption or div with an id of img-caption. I don’t see one.

Does that make sense?

1 Like
3

Yes…I haven’t begun to tackle those two yet. I was getting some red highlighting on my ~</main> and </div> tags that I was worried about.

4

I also tried to add a background color to the body element in my page…that didn’t work either.

5

Read the errors. If you don’t understand something, ask a specific question.

6

Kevin,
I attempted to fix one of the errors…the one where the image needs to be responsive to the size of the parent element.

" 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the “max-width” style property"

So I just added the max-width property in CSS but it didn’t fix this error code for some reason. Thanks!

7

You have some basic formatting errors. I would want to handle them first.

On each of the panes in codepen, in the upper right there is a pulldown menu. Select it and try “Analyze HTML” and “Analyze CSS”. That will show you some of the errors. After that, do a format on each - your CSS code is very messy. Messy code is hard to debug.

Another problem that I see is that you are selecting that image three different ways:

img {
  max-width: 100%;
  height: auto;
}

#image {
  position: relative;
  left: 639px;
  width: 290px;
  box-shadow: 0 20px 30px rgba(100, 98, 0);
}

// ...

.silver-color {
  background-color: silver;
}

There may be situations where that is necessary, but this is such a simple app that that is overkill and I think it is confusing the issue. I don’t think you could be trying to center using the left property. You should either use some kind of margin or some flexbox or other alignment attribute.

Clean up your code, remove all the errors. I don’t mean the project errors, I mean the HTML and CSS errors. Get those squared away and then simplify down to one selector. Ditch the position and left attributes. Set a width that grows with the screen, as a percentage. Then set a max-width that is a hard coded value.

8

Do you see a problem with my <figcaption>?

9

A very important skill for a web developer is attention to tiny details.

Reread the error:

Within the “img-div” element, I should see either a or

element with a corresponding id=“img-caption” that contains textual content describing the image shown in “img-div”.

Reread the user story to which this refers:

User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div .

This is your code:

<figcaption id="image-caption"> Photo: David Paul Morris/Bloomberg via Getty Images</figcaption>

Are you sure that id is right?

They’re trying to tell you what the problem is.

10

Also, with that caption, I would suggest getting out of adding extra spaces in, like the one in the caption before “Photo”. I know it looks cleaner in the code, but that space will show up on the screen. It may look fine in a lot of cases, but it could also lead to formatting issues that can be a real pain to diagnose.

11

Thank you for pointing it out!

12

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