Technical Documentation Page Project with testable user stories - Guinea Pigs needed 🐹

As you may have heard, @no-stack-dub-sack and @Weezlo have been hard at work building projects with testable user stories. We are looking for a few volunteers to attempt to build these based on their automated tests.

This is a brand-new project that should be a ton of fun to build: a drum kit! Note that the test suite may not yet work in browsers other than Chrome.

The goal is for campers to be able to build these projects step by step following user stories. This will make the projects less intimidating and more fun. Oh, and don’t worry - we’ll still have plenty of optional projects where we don’t provide you with any tests. And if you’ve previously built these projects, you don’t need to build them again.

If you’re interested in attempting this, please reply to the thread and let us know you’ve started it. The more people who want to build this, the better, as we can start gathering feedback.

Thanks, and happy coding!

Here is the blank pen for campers to fork:

Here is the example project with passing tests:

User Stories


  1. I can see an <article> element with a corresponding id="main-doc", which contains the page’s main content (technical documentation).
  2. Within the #main-doc <article> element, I can see several <section> elements, each with a class of "main-section". There should be a minimum of 5.
  3. The first element within each .main-section should be a <header> element which contains text that describes the topic of that section.
  4. Each <section> element with the class of "main-section" should also have an id that corresponds with the text of each <header> contained within it. Any spaces should be replaced with underscores (e.g. The <section> that contains the header “Javascript and Java” should have a corresponding id="Javascript_and_Java").
  5. The .main-section elements should contain at least 10 <p> elements total (not each).
  6. The .main-section elements should contain at least 5 <code> elements total (not each).
  7. The .main-section elements should contain at least 5 <li> items total (not each).
  8. I can see a <nav> element with a corresponding id="navbar".
  9. The first element within the navbar should be a <header> which contains text that describes the topic of the technical documentation.
  10. Additionally, the navbar should contain link, <a>, elements with the class of "nav-link". There should be one for every element with the class "main-section".
  11. Each element with the class of "nav-link" should contain text that corresponds to the <header> text within each <section> (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world").
  12. When I click on a navbar element, the page should navigate to the corresponding section of the #main-doc element (e.g. If I click on a .nav-link element that contains the text "Hello world", the page navigates to a <section> element that has that id and contains the corresponding <header>.

Note: Unless the material you are using is original, please credit the source somewhere on your page and provide a link to the original documentation.


  1. 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.
  2. My Technical Documentation page should use at least one media query.
1 Like

I followed the user stories and I built the skeleton. Hope it is good! :slight_smile:
Check out the repo:

Let me know if this is what you wanted :smiley:

@Flopet17 - check out the “pen to fork” link above… if you copy your HTML & CSS into that pen and run the tests, you will see if the tests have passed. These will ideally be built in CodePen, but if they are developed locally, you can always include the dependencies that are found in the codepen project in script tags to run the tests that way. Let me know if you have any other questions!

EDIT: it looks like if you bring everything into codepen and run the tests (read the comment in the JS editor) - you will have passed every test but 1 - it should give you a helpful error as to why that test is failing

Thank you.

I’ve forked that codepen:
It gives an error where it says that it doesn’t scroll… but it does :slight_smile:
Something might be wrong with the testing?

@Flopet17 so the issue is that you are using smoothSrcroll to achieve the scrolling - this project is designed to be a part of the HTML and CSS section and the tests anticipate the user stories being solved without any JS - however, the assertion error is hopefully clear enough to point campers to the problem should something similar arise. This is the error that’s being thrown by the failing test:
AssertionError: Every .nav-link should have an href value that links it to its corresponding .main-section (e.g. href="#Introduction"). Check that these .main-section ids have corresponding href values : Topic_1,Topic_2,Topic_3,Topic_4,Topic_5 : expected 5 to equal 0

So this tells us we need to solve it with HTML rather than JS… if you were to forgo smoothscroll for the sake of the tests, the tests would pass. Of course, should you decide to make your own version of this project, smooth scroll would be an excellent addition!

I removed the JS now, and I have another issue… It says I’m not using Media Queries… Why?

@Flopet17 That is a good question - and precisely the reason we’re releasing these here before unleashing them on the masses. These are exactly the kind of kinks we’re trying to work out! Let me take a look at your pen and see… when I first copied your code into the blank pen (minus the JS) it worked for me, so I’ll have to diagnose the issue…

EDIT: I’m not getting the same issue - all tests are passing for me. Did you figure out what the issue was? If so, please share here. If you haven’t changed anything - what browser are you using?

1 Like

I’m using Firefox… On Chrome works well…
Forgot I need to use Chrome :smile: My bad…

Here’s my codepen:
It passes all the tests although my navbar is not on the left.

If you resize the window to have a vertical scroll bar (so that clicking the last link will hide the navbar), the test will fail :unamused:

@jenovs possibly we updated this test - seems to be failing for me now :slight_smile:, also the version you are pulling in currently is updated but not in a good way, see the OP for new links which have a better UI for the tests (and you no longer need to include a variable for the tests to run)

Thanks for your feedback so far, everyone!

I’m thrilled to announce that our testable challenges now feature a link you can click to report a bug or submit feedback.

I’m closing this topic. We can continue discussing specific issues as they come up over on the testable-projects-fcc repo. Happy coding and QA’ing! :slight_smile: