Portfolio Page - 11/12 passed (navbar on top)

JavaScript
1

Hi,
can you help me figure out why my portfolio page doesn’t let me pass

" 3. The navbar should always be at the top of the viewport.

Navbar’s parent should be body and it should be at the top of the viewport : expected 33.1944465637207 to be close to 0 +/- 15 AssertionError: Navbar’s parent should be body and it should be at the top of the viewport : expected 33.1944465637207 to be close to 0 +/- 15"

?? Here’s my codepen https://codepen.io/bartosz-spychaa/pen/gOXgyjx

2

Hey.
I had a look at your project.
So, here’s what you did in your CSS:

nav {
  position: fixed;
  display: flex;
  width: 100%;
  justify-content: flex;
  background: black;
  z-index: 1;
}

You gave nav a position: fixed, but you didn’t specify any top, left, right or bottom, so the nav doesn’t know where to go. (hint: you don’t need to specify all of them, 2-3 are enough).
Also, fix this justify-content: flex;

Another thing, don’t use <html>, <head> and tags that go inside <head> on codepen. All your code goes inside the <body> by default.

Also, using grid or flexbox on <section id="projects> would make your life way easier than using position: absolute on your images.

Hope this helps.
Cheers.

3

Thank you very much. I understand everything besides

Also, fix this justify-content: flex;

Do you mean there’s lacking something after the “flex”?

4

justify-content can’t have a value of ‘flex’, so that rule does nothing, basically.
You can see all the values justify-content can have right here: MDN: justify-content

One more thing.

ul {
  display: flex;
  flex-direction: row;
  padding-left: 700px;
  list-style-type: none;
  font-size: 20px; 
}

Never do this padding-left: 700px;. There are better ways to position child elements inside parent elements. Flexbox is one of them. It also makes your elements more responsive, so you hit two targets with one stone.

Hope this helps.

1 Like
5

It looks like you’ve incorporated the suggestions and all of your tests are passing. Very nice work!

For what it’s worth, I noticed you set the top and left properties to 1px. Often people will set top, left, and right to 0 to get something to hug the edges of the window. Of course, that might not be what you wanted here, but thought it might be useful.

Either way, nice work on the Portfolio Page!

1 Like
6

Thank you! Last thing I’v expected to hear about my portfolio page is “nice work” haha. I’ll keep grinding.

7

Honestly, it looks a lot better than mine did ¯_(ツ)_/¯

But, yeah, keep grinding! This stuff isn’t easy but it’s worth doing.

1 Like
8

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