# Technical Documentation Page - Build a Technical Documentation Page **URL:** \ **Category:** Curriculum Help\ **Tags:** html, css\ **Created:** [November 9, 2022, 3:45pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095 "2022-11-09T15:45:30Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![sagittar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sagittar/32/239750_2.png) [@sagittar](https://forum.freecodecamp.org/u/sagittar)\ **Post date:** [November 9, 2022, 3:45pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/1 "2022-11-09T15:45:30Z")
**Tell us what’s happening:** I am not sure what is to be done with the “navbar” elements, the instructions require me to. and what do i need to do to properly link the sections of the page to the element. i have tried but i seem to have got it wrong. please help. i also am stuck with the styling through CSS. i barely wrote a styling there. **Your code so far** ```html JS Documentation
Introduction

  • What you should already know

  • JavaScript and Java

    Hello world

    function greetMe(yourName) { alert("Hello " + yourName); } greetMe("World");

    Variables

    Declaring variables

    ``` ```css /* file: styles.css */ @media (max-width: 600px) { * { width:300px } } ``` **Your browser information:** User Agent is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36` **Challenge:** Technical Documentation Page - Build a Technical Documentation Page **Link to the challenge:** > **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page)** > > Learn to Code — For Free ---
    **Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\ **Post date:** [November 9, 2022, 4:00pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/2 "2022-11-09T16:00:14Z")
    > [@sagittar](#): > > ` Introduction` you have one link here but to make it work you need the # in front of the word Introduction in the href `href="#Introduction"` and it must match exactly the id of another element in your page. (so somewhere below this point there should be an element of class type “main-section” whose `id="Introduction"`. You should create a nav link for each main-section on your page) As for the styling, that is up to you to decide. (you should think about what you would like to see and if you can’t make it happen, then look up css properties as required) ---
    **Author:** ![sagittar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sagittar/32/239750_2.png) [@sagittar](https://forum.freecodecamp.org/u/sagittar)\ **Post date:** [November 9, 2022, 4:32pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/3 "2022-11-09T16:32:16Z")
    Thanks for the suggestion. could you please see the below code and advise how i should address the instruction (" Your `#navbar` should have exactly one `header` element within it.") i ended up with error on? i used the # reference in this code. ```auto
    Hello world

    function greetMe(yourName) { alert("Hello " + yourName); } greetMe("World");

    ``` ---
    **Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\ **Post date:** [November 9, 2022, 4:33pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/4 "2022-11-09T16:33:01Z")
    I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read. You can also use the “preformatted text” tool in the editor (``) to add backticks around text. ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif) See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard. **Note:** Backticks (`) are not single quotes ('). ---
    **Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\ **Post date:** [November 9, 2022, 4:36pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/5 "2022-11-09T16:36:10Z")
    > [@sagittar](#): > > ```auto >
    >
    Hello world >
    > > > ``` i think you need to understand what a navbar is. The navbar is the _menu_ or the navigation menu. It is the thing you see in most websites at the top of the page and lets you view the contents of the page. For eg. the fCC forum here has a navbar at the top which has the link to “Visit the Curriculum” and some other stuff like your profile image, search icon etc. Therefore, the navbar should not be inside the section it is linking to. It should be _above_ it. Re-organize the code so that the nav element is above the main part of the page. ---
    **Author:** ![sagittar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sagittar/32/239750_2.png) [@sagittar](https://forum.freecodecamp.org/u/sagittar)\ **Post date:** [November 9, 2022, 4:38pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/6 "2022-11-09T16:38:34Z")
    Understood, thanks! i will try this ---
    **Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\ **Post date:** [November 9, 2022, 4:40pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/7 "2022-11-09T16:40:35Z")
    just so I am not giving incomplete info: the navbar can also be below the main part of your page too. It just depends on the layout and what you are trying to achieve. ---
    **Author:** ![sagittar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sagittar/32/239750_2.png) [@sagittar](https://forum.freecodecamp.org/u/sagittar)\ **Post date:** [November 9, 2022, 5:09pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/8 "2022-11-09T17:09:53Z")
    Its taking time for me…appreciate any and all support. my code still doesn’t seem to pass all the requirements of this project test. newbie feels :I …is answer code available someplace so I could check what exactly my code is missing? the order of nesting. my new code or “i think it is code” is- ```auto
    Introduction

  • ``` ---
    **Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\ **Post date:** [November 9, 2022, 5:12pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/9 "2022-11-09T17:12:30Z")
    There is no solution code as this project is part of the certification. Do you mind posting everything and not just part of the code? ---
    **Author:** ![sagittar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sagittar/32/239750_2.png) [@sagittar](https://forum.freecodecamp.org/u/sagittar)\ **Post date:** [November 9, 2022, 5:14pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/10 "2022-11-09T17:14:27Z")
    oh. here it is. i re-organised the code as follows- ```auto JS Documentation
    Introduction

  • What you should already know

  • JavaScript and Java

    Hello world

    function greetMe(yourName) { alert("Hello " + yourName); } greetMe("World");

    Variables

    Declaring variables

    ``` ---
    **Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\ **Post date:** [November 9, 2022, 5:18pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/11 "2022-11-09T17:18:19Z")
    it seems the code has a few issues right now that should be fixed. (duplicate navbar id for one) Paste the code into this online html validator and read through the list of errors shown. Try to fix as many as possible. You can let us know if you are struggling to fix an error that is being reported to you. > **[The W3C Markup Validation Service](https://validator.w3.org/#validate_by_input)** > > W3C's easy-to-use > markup validation service, based on SGML and XML parsers. ---
    **Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\ **Post date:** [May 11, 2023, 5:18am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/570095/12 "2023-05-11T05:18:44Z")
    Closed on May 11, 2023, 5:18am UTC This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.