ExpressJS - Documentation Page

Code Feedback
1

Hi guys,

I built my version of the Express (Node ‘library’) documentation page. I have been using Express and Node to build back end applications (REST API), then I decided to do this project based on the Express docs.

After it passed FFC unit tests, I have changed the name of some elements to what would make more sense for this specific website.

I added a responsive hamburger menu for small screens.

Please let me know your feedback or suggestions for improvement.

Thanks, guys :smiley:

URL:

https://camillacabto.github.io/ExpressDocumentationPage/

2

Great looking page, I like it.

I would probably move the breakpoints up a bit so the menu doesn’t get as narrow as it does now.

I might also suggest using transform: translateX for the mobile menu transition instead of width. It would also be nice if it closed when clicking a link and clicking outside the menu (i.e. on the page).

Great job, keep it up.

As an aside: The version of the project you submit should keep passing the tests and should have the test script on the page. You can always have two versions of the project.

1 Like
3

Your doc looks good @camillacab. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 9/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.
    • Nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks.
      Or skip the pre element and do the following in CSS;
code {
  white-space: pre-line;
}
1 Like
5

Thanks for the suggestions @lasjorg!!

Will try to implement them all.

Take care

6

the link you submitted should keep passing the tests, did you made the changes in a fork?

2 Likes
8

Hi @ILM,

I didn’t know I had to post the version passing the tests. I have made changes after passing the tests to make it look like more how I like( my style).

Sorry

9

here you can ask review of what you want, but the link you submitted for the project should keep being a project that passes the tests - the projects links will appear in you cert

if you want to make changes that break the tests I suggest you fork it and play with the fork

10

Yep, I have saved the passing version in another branch in the same repository.

11

make sure that at the link ypu have submitted there is the version that passes the tests