Landing page help - Pickles

I’m new at coding and trying to complete the landing page project in the Responsive Web Design series. I’m trying to display an image using this code:

<img id="header-img" src="https://ibb.co/K0ZW1vM"
               alt="Marc's Dill Pickles">

But the image doesn’t display, per below:

Marc's Dill Pickles

However, if I copy the source link to another browser window, I get this:

Can somebody explain to me what’s going on here?

Thank you!

Go to this page. On it is an image. Right click the image and select to open the image in a new tab. When you do, you’ll see the image and the URL of the image. Not the page that contains an image. The URL of the image is what you want.

I hope that’s clear.

Perfect! Thanks for the help!

Can somebody explain to me what the below is asking? An example of what that code might look like. Thank you.

Within the #header element I can see a nav element with a corresponding id="nav-bar" .

Based on what you gave us above, you should have a <nav> element with id ‘nav-bar’ nested inside an element with id ‘header’.

Here is the freeCodeCamp challenge where this was introduced:

Hi,

I keep failing user story #13 (The navbar should always be at the top of the viewport.) but I believe I’ve accomplished that. Any insight would be great! Thank you.

https://codepen.io/MacroFrito/pen/VwaBpPe

Hey there,

the test says:

#header or one of its children should be at the top of the viewport

If I understand this correctly, this means your header should be at the top of the top border. Your header doesn’t do this (red arrow shows the gap):
Screenshot_2020-09-22_09-38-03

You already added position: fixed to container. This attribute also needs a relation to WHERE it should be fixed. You can read about position on MDN

Hey Mike! Thanks for the help. You were right.

I was able to get the test to pass.

https://codepen.io/MacroFrito/pen/VwaBpPe

However, can you help me understand the following:

  • The header is now fixed justified top left and I’d rather it be centered horizontally. I can’t seem to figure it out.

  • My video is covered by the header. I can’t seem to push the video below the header so it can be seen once the page is scrolled to the top.

If you have any advice, that would be great! Thanks again.

Elements naturally start on the left side.
Your "container" takes the width of its content:

Now you have to think about your desired result:

  • do you want to center only the green header with white space left and right?
  • do you want to have the green header span the whole width?

Any general idea what you could do to solve it?
What did you try so far to fix it?

  • do you want to center only the green header with white space left and right?
  • do you want to have the green header span the whole width?

I’d like to center only the green header with white space left and right.

Any general idea what you could do to solve it?
What did you try so far to fix it?

The only thing I’ve tried is to place a bunch of
at the top of the page but that seems like a lot of markup. I was wondering if there’s another element that would be more efficient. If you’d rather just give me a hint that would be great! Thanks.

Within the #header element

Does this mean inputting code in HTML or CSS? Thank you.

Can you provide more context?
usually, when you use the # before something tells HTML that there is an id that you can retrieve and look for.
Now, this id can be somewhere within the HTML file or it might be an id within the CSSS file. If you provide some code it would be easier to tell which one is true.

if it says element, it’s probably something inside the element with that id

1 Like

Thanks for responding. Here’s my code so far:

https://codepen.io/MacroFrito/pen/poyqrgg

Here’s the user story:

Within the #header element I can see a nav element with a corresponding id="nav-bar" .

I’m just not clear if I need to put the element in html or in css?

Ah, okay I think I see your point. In this kind of cases, it’s almost always the HTML.
The reason is HTML is the one in charge of actually showing the nav and display and structure of elements.
CSS is basically saying what kind of styles you would have for a single or group of elements. You can and you will have nested selectors in CSS but it’s only if that nested selector/element is already in the HTML.

In this particular example it’s the same case. Since we want to have an element inside another one (nav inside header) it’ll be an HTML change.

Let me know if you had further questions and Good Luck! :call_me_hand:

Gotcha! Thanks for your help!

Its telling me:

The .nav-link with href="#our-story" is not linked to a corresponding element on the page : expected null to not equal null
AssertionError: The .nav-link with href="#our-story" is not linked to a corresponding element on the page : expected null to not equal null

But when I click on “Our Story” it does take me to that section of the webpage. I don’t understand.

Because in here:

        <li><a class="nav-link" href="#our-story">Our Story</a></li>

that href is telling it to go to an element with the id of “our-story” and it can’t find one.

Thanks, Kevin.

So, I used the following YouTube video for instructions:

I’m pretty much copying from the video but its not working. What gives?

Thanks again!