My Portfolio project - One last problem - Asking for feedback also!

Code Feedback
1

https://codepen.io/jordancrowl/pen/LYRXNzv?editors=1100

Hi friends. I think I’m nearly finished with my portfolio project. For some reason one test is not passing even though it seems to pass functionally. The nav bar stays fixed at the top of the viewport both on mobile and on desktop. Why is the test not passing?

Annnnd a navbar media query question: What is a good method to make things look tidy up there in mobile? I’ve tried modifying flex to have the words evenly-spaced across the top, but nothing happens with the queries I put in. I’d also like to know how to implement the “three-line box” nav symbol. Any suggestions on that?

Finally, if you don’t mind reviewing my portfolio I appreciate any feedback you have. I’m not 100% finished yet, but I feel like I’m close.

Thanks!

2

hey @jojo4545

This is the error you are getting Navbar's parent should be body and it should be at the top of the viewport : expected 17 to be close to 0 +/- 15, and by the looks of it you have header wrapped around the id="navbar" so the test will fail.

1 Like
3

As to the failing test, the error tells you what the problem is:

  1. 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 16.988636016845703 to be close to 0 +/- 15 AssertionError: Navbar’s parent should be body and it should be at the top of the viewport : expected 16.988636016845703 to be close to 0 +/- 15

But your navbar’s parent isn’t body, it’s header.

2 Likes
4

Taking a quick look over the code…

Was this intended for something?

  <footer>
  </footer>

And you should only have one h1 on a page, the header for the page. There should be a hierarchy.

I might consider adding:

html {
  scroll-behavior: smooth;
}

but that’s subjective.

But still, good work, have fun on the next one.

1 Like
5

Thank you! Yes I’m intending to put a footer in there. Thank you for your suggestions and help!

6

@jojo4545 hey instead of doing this all through your css

@media (max-width: 600px) {
  #projects-header{
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 2.5rem;
  }
}

just make one media query at the bottom off your css and add them all to it like this

@media (max-width: 600px) {
  #projects-header{
    font-size: 2rem;
  }
   .logo {
    height: 4.5rem;
    margin: auto 1rem;
  }
   .projects-grid {
    grid-template-columns: 40% 40%;
    grid-template-rows: 30%;
    grid-column-gap: 2%;
    grid-row-gap: 20%;
  }
}
1 Like
7

@jojo4545 this should help your nav mobile problem

@media (max-width: 600px) {
  #navbar {
    justify-content: center;
    height: auto;
    padding: 10px;
  }
  .nav-list li {
    display: block;
    text-align: center;
  }
  .nav-links {
    padding: 5px;
  }
}

and this is a hamburger menu i think your on about?

You can get a hamburger from most icon sites and to to get it to work you give it a display: none: then have your nav-links disapear at 600px by giving there container a display: none; and then giving the hamburger a display: block;

you can use font awesome by adding this cdn to your head tag or the top of your codepen in your case.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

and this in your html

<i class="fas fa-bars"></i>

1 Like
8

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