Help With final test on tech Doc

Code Feedback
1

Hi guys. Been struggling on this last test for a good while now.

Can’t seem to figure out at all on how to make my nav-bar pass the test, even though it’s on the left side and scrolls with the page.

Cheers for the help

https://codepen.io/DoomDave/pen/mdEqxpb?editors=1100

2

Hey @Doomdave
You nav should not scroll with the page content.

Are competing with the project?

1 Like
3

Hi @Doomdave.
I’m sure you’re familiar with the box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click. Temporarily add the following at the top of your CSS;

* {
  border: 1px solid red;
}

And look at your nav. There are links that do not show.

Also, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags).

  • You have elements out of place. The body element contains everything the browser displays. The head element has a different function and would not encompass the body.
  • review this for an understanding of the HTML boilerplate tags.

On a side note, do not use <br> to force line breaks or spacing. That’s what CSS is for.

1 Like
4

@Doomdave, I see you’re trying. Here’s a couple of hints;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • This <!DOCTYPE_html> is not correct HTML. To tell a browser what follows is HTML5 it’s <!DOCTYPE html>. But codepen doesn’t need it so don’t include it.
  • I’ve commented out some things in your nav settings. Try it and see if it’s more what you’re trying to accomplish;
/*Container used to edit  layout*/
.flex-container{
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap-reverse; */
  background-color: lightgray;
  position: fixed;
  height: 20%; /* Full height */
  /* margin-right: 500px; */
}

You’ll have to adjust the width of your body (.main-doc) to adjust for the width of the nav on the left.
Also, try using relative units (em / rem) for your font sizes. It helps with responsiveness if you don’t have hardcoded pixel values.

1 Like
5

Hey @Roma, thank you for checking up on me :grin: haha I’m trying a few things you have advised and it is starting to click. I tend to just struggle with knowing what to type and where :sweat_smile:

Ran it through the W3C Validator and will make my way through the errors. Any reason why the CodePen analyser doesn’t show these same errors?

In what situations would you use em/rem?

I will try these lines that you’ve suggested and see how I get on. Thanks a lot!

6

I would probably suggest setting the left margin on the .main-doc to the same as the width of the nav. Also, if you set the links to be block-level elements you don’t need the flexbox container.

Example 
<nav id="navbar" class="navbar">
  <header>How To Play D&D</header>
  <a href="#What_Is_Dungeons_&_Dragons?" class="nav-link">What Is Dungeons & Dragons?</a>
  <a href="#Why_Play_DnD?" class="nav-link">Why Play DnD?</a>
  <a href="#The_Basic_Requirements" class="nav-link">The Basic Requirements</a>
  <a href="#What_Is_A_DM?" class="nav-link">What Is A DM?</a>
  <a href="#How_To_Start_Writing_A_Campaign" class="nav-link">How To Start Writing A Campaign</a>
  <a href="#Types_Of_Books" class="nav-link">Types Of Books</a>
  <a href="#Helpful_Links" class="nav-link">Helpful Links</a>
</nav>

* {
  box-sizing: border-box;
}

.navbar a {
  display: block;
}

.navbar {
  background-color: lightgray;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 280px;
  padding: 10px;
}

.main-doc {
  margin-left: 280px;
}

You can read more about using the different units for font-size here.

There is also a handy clamp() function you can check out for dynamic font sizes

1 Like
7

Looks like @lasjorg responded to most of your questions. They’re a lot better than me so you go some good advice.
I’m still around if you have further questions.

I don’t know what analyzer codepen uses but I’ve noticed it misses quite a few so I’d advise to keep the W3C validator in your toolbox.

1 Like
8

Thank you for the tips Lasjorg. the test is now passing which is fantastic! Although, the main content is being hidden underneath the navbar still. Would I need to change the margin of the main doc itself?

Thank you again for the help. Such a great community :smiling_face_with_three_hearts:

1 Like
9

You have an extra px on the margin.

.main-doc{
  margin-left: 280pxpx;
}
1 Like
10

blimey, can’t believe that :sweat: cheers for pointing that out. Thank you!

1 Like
11

Typos and little syntax error are the kryptonite of all developers. You’ll get used to it, it happens all the time.

Happy coding!

1 Like