Technical Documentation Project Challenge

1

For this one, do I just make a technical documentation for whatever language or technology I want, or does it have to be on JavaScript? And if it has to be on JavaScript, is it okay to just do what the example project shown on for it does? Right now I’m just doing what they did in the example project.

2

You can pick whatever language you want.

It doesn’t really even have to be about a coding language, although the requirement to use the code element does lend itself more to that. But it is possible to have other technical information in pre/code elements, like math formulas, specifications like dimensions, etc.

3

I have the markup for the completed. But the CSS for trying to complete user story #14 is giving me trouble. I have this CSS:

#navbar {
  position: fixed;
  left: 0;
  top: 0;
  grid-area: "nav";
}

#navbar > li {
  list-style-type: none;
}

main {
  grid-area: "main";
}

body {
  display: grid;
  grid-template-areas: 
    "nav main main";
  grid-template-columns: repeat(3, 1fr);
}

Here’s the Pen itself: https://codepen.io/DragonOsman/pen/mdePNLW . How do I fix this? And what am I doing wrong when trying to set the list-style-type for the li elements to none?

Before, I tried to set the navbar element’s float property to left and clear it (I tried setting clear: left in the #navbar:after pseudo-element with a content property of "" and display: block, but that didn’t work either).

After getting this to work I’m going to use a media query for small screens and set the layout to a single column where the navbar appears above the main content. Or at least that’s the plan.

4

There is no user story 14. You are failing #Content test 4 and #Layout test 2.

For test 4 you need to have if...else_statement for the href and id and not if_..._else_statement.

The list-style styles should go on the <ul> element not the <li>.

Not sure what you are asking for with the nav? But you may have fixed it after posting.

5

@lasjorg I’m talking about this:

User Story #14: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.

User Story 14. Is there a way to do this with grid?

6

you should add the test suite to your pen (as required, but also to actually see which tests you are passing and which you aren’t)

7

First, please add the test script to the page. Use the Settings > JS section > paste in the test script URL in one of the boxes at the bottom.

https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

But I get it now, your talking about the requirements from the challenge page and not the test script. Just to be clear, User Story #14 is #Layout test 1 in the test script.

You are already passing that, it will (should) only pass above some screen width (886px I believe).

8

I’ll put in the test script. Should it go in one of the ones for resources?

9

Yes.
https://blog.codepen.io/documentation/using-javascript-libraries/

10

I need help with getting the nav element to appear above everything else on smaller screens. Right now I have this:

@media screen and (max-width: 500px) {
  #navbar {
    position: fixed;
    top: 0;
    height: 250px;
    width: 100%;
  }
  
  #navbar ul {
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  #main-doc {
    margin-top: 260px;
  }
}

Here’s my Pen: https://codepen.io/DragonOsman/pen/mdePNLW

The nav element appears on top on cell phone screen width now but there’s still a problem: The text in the main element appears squeezed way left with a lot of room to the left and in the code the code is coming out of the right of the background in some instances.

11

I had to take a peak at the example project’s code, but now I’ve got it. I’ve submitted that and moved on to the portfolio web page challenge.