Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
I’m stuck. I failed the tests:

  • Your #navbar should have exactly one header element within it.
  • You should have at least one a element with a class of nav-link.
  • All of your .nav-link elements should be anchor (a) elements.
  • The header element in the #navbar should come before any link (a) elements also in the #navbar.
  • Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Technical Documentation Page</title>
</head>

<body>
  <header id="main-header">
    <nav id="navbar">
      <h1>Express JS Getting Started Guide</h1>
      <ul>
        <li class="nav-link"><a href="#installing">Installing</a></li>
        <li class="nav-link"><a href="#hello_world">Hello World
</a></li>
        <li class="nav-link"><a href="#express_generator">Express Generator
</a></li>
        <li class="nav-link"><a href="#basic_routing">Basic Routing
</a></li>
        <li class="nav-link"><a href="#static_files">Static Files
</a></li>
      </ul>
    </nav>
  </header>
  <main id="main-doc">
    <section class="main-section" id="installing">
      <header>Installing</header>
      <article class="main-article">
        <p>Assuming you’ve already installed Node.js, create a directory to hold your application, and make that your working directory.</p>
        <p>$ mkdir myapp</p>
        <p>$ cd myapp</p>
        <p>Use the npm init command to create a package.json file for your application. For more information on how package.json works, see Specifics of npm’s package.json handling.</p>
        <p>$ npm init</p>
        <p>This command prompts you for a number of things, such as the name and version of your application. For now, you can simply hit RETURN to accept the defaults for most of them, with the following exception:</p>
        <p>entry point: (index.js)</p>
        <p>Enter app.js, or whatever you want the name of the main file to be. If you want it to be index.js, hit RETURN to accept the suggested default file name.</p>
        <p>Now install Express in the myapp directory and save it in the dependencies list. For example:</p>
        <p>$ npm install express --save</p>
        <p>To install Express temporarily and not add it to the dependencies list:</p>
        <p>$ npm install express --no-save</p>
      </article>
    </section>

    <section class="main-section" id="hello_world">
      <header>Hello World</header>
      <article class="main-article">
        <code>const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))</code>
        <p>This app starts a server and listens on port 3000 for connections. The app responds with “Hello World!” for requests to the root URL (/) or route. For every other path, it will respond with a 404 Not Found.</p>
        <p>The example above is actually a working server: Go ahead and click on the URL shown. You’ll get a response, with real-time logs on the page, and any changes you make will be reflected in real time. This is powered by RunKit, which provides an interactive JavaScript playground connected to a complete Node environment that runs in your web browser. Below are instructions for running the same app on your local machine.</p>
        <h2>Running Locally</h2>
        <p>First create a directory named myapp, change to it and run npm init. Then install express as a dependency, as per the installation guide.</p>
        <p>In the myapp directory, create a file named app.js and copy in the code from the example above.</p>
        <p>Run the app with the following command:</p>
        <p>$ node app.js</p>
        <p>Then, load http://localhost:3000/ in a browser to see the output.</p>
      </article>
    </section>

    <section class="main-section" id="express_generator">
      <header>Express Generator</header>
      <article class="main-article">
        <p>Use the application generator tool, express-generator, to quickly create an application skeleton.</p>
        <p>You can run the application generator with the npx command (available in Node.js 8.2.0).</p>
        <p>$ npx express-generator</p>
        <p>For earlier Node versions, install the application generator as a global npm package and then launch it.</p>
        <p>$ npm install -g express-generator
           $ express</p>
        <p>Display the command options with the -h option:</p>
        <p>$ express -h

  Usage: express [options] [dir]

  Options:

    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
        --no-view       generate without view engine
    -v, --view 
 add view  support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css   add stylesheet  support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory
</p>
<p>For example, the following creates an Express app named myapp. The app will be created in a folder named myapp in the current working directory and the view engine will be set to Pug:</p>
<p>$ express --view=pug myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.pug
   create : myapp/views/layout.pug
   create : myapp/views/error.pug
   create : myapp/bin
   create : myapp/bin/www</p>
   <p>Then install dependencies:</p>
   <p>$ cd myapp
$ npm install</p>
    <p>On MacOS or Linux, run the app with this command:</p>
    <p>$ DEBUG=myapp:* npm start</p>
    <p>On Windows, use this command:</p>
    <p>> set DEBUG=myapp:* & npm start</p>
    <p>Then load http://localhost:3000/ in your browser to access the app.

The generated app has the following directory structure:</p>
    <p>.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

7 directories, 9 files</p>

      </article>
    </section>

    <section class="main-section" id="basic_routing">
      <header>Basic Routing</header>
      <article class="main-article">
        <p>Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, and so on).</p>
        <p>Each route can have one or more handler functions, which are executed when the route is matched.</p>
        <p>Route definition takes the following structure:</p>
        <p>app.METHOD(PATH, HANDLER)</p>
        <p>Where:</p>
        <ol>
          <li>app is an instance of express.</li>
          <li>METHOD is an HTTP request method, in lowercase.</li>
          <li>PATH is a path on the server.</li>
          <li>HANDLER is the function executed when the route is matched.</li>
          <li>Etc.</li>
        </ol>
        <p>The following examples illustrate defining simple routes.</p>
        <p>Respond with Hello World! on the homepage:</p>
        <code>app.get('/', function (req, res) {
  res.send('Hello World!')
})</code>
        <p>Respond to POST request on the root route (/), the application’s home page:</p>
        <code>app.post('/', function (req, res) {
  res.send('Got a POST request')
})</code>
        <p>Respond to a PUT request to the /user route:</p>
        <code>app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user')
})</code>
        <p>Respond to a DELETE request to the /user route:</p>
        <p>app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user')
})</p>

      </article>
    </section>

    <section class="main-section" id="static_files">
      <header>Static Files</header>
      <article class="main-article">
        <p>To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.</p>
        <p>The function signature is:</p>
        <code>express.static(root, [options])
</code>
        <p>The root argument specifies the root directory from which to serve static assets. For more information on the options argument, see express.static.</p>
        <p>For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:</p>
        <code>app.use(express.static('public'))</code>
        <p>Now, you can load the files that are in the public directory:</p>
        <p>http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html</p>
        <p>To use multiple static assets directories, call the express.static middleware function multiple times:</p>
        <code>app.use(express.static('public'))
app.use(express.static('files'))</code>
        <p>Express looks up the files in the order in which you set the static directories with the express.static middleware function.</p>
        <p>To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:</p>
        <code>app.use('/static', express.static('public'))</code>
        <p>Now, you can load the files that are in the public directory from the /static path prefix.</p>
        <p>http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html</p>
    <p>However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve:</p>
    <code>app.use('/static', express.static(path.join(__dirname, 'public')))
</code>
</article>
    </section>
  </main>
</body>

</html>
/* css reset */
* {
  margin: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
  background-color: #f1f1f1;
}

#main-header {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 280px;
  max-width: 300px;
}

#navbar {
  height: 100%;
  border-right: solid 2.5px #333;
}

#navbar>h1 {
  font-size: 1.6rem;
  text-align: center;
  padding: 1rem 0;
}

#navbar ul {
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 90%;
  list-style: none;
}

#navbar ul li {
  border: solid 1.3px #333;
}

#main-header #navbar ul li a {
  display: block;
  text-align: left;
  padding: .8rem 1rem .8rem 2rem;
  cursor: pointer;
  color: #222;
  text-decoration: none;
}


/* main section */
#main-doc {
  position: absolute;
  margin-left: 320px;
  padding: 2rem 1rem;
}

#main-doc .main-section header {
  font-size: 2rem;
  padding: 1rem 0;
}

#main-doc .main-section .main-article {
  padding-left: 1.5rem;
  margin-bottom: .5rem;
  color: #222;
}

#main-doc .main-section .main-article p {
  margin-bottom: 1rem;
}

#main-doc .main-section .main-article ul {
  margin: 1.3rem 0 0 1.2rem;
}

#main-doc .main-section .main-article ul li {
  margin-bottom: 1rem;
}

#main-doc .main-section .main-article code {
  display: block;
  padding: 1.5rem;
  text-align: left;
  background-color: #ddd;
  border-radius: 7px;
  margin-bottom: 1rem;
}

#main-doc .main-section:last-child .main-article ul {
  margin: .5rem 0 1.5rem 3rem;
  padding: 0;
}

#creator {
  text-align: left;
  padding: 2rem 0 0;
}

/* mobile-devices */
@media (max-width: 600px) {
  #main-header {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    max-width: 95%;
    max-height: 400px;
  }

  #navbar {
    width: 100%;
    margin: 0;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    padding: 2rem 1rem;
    margin-top: 410px;
  }

}

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 Edg/107.0.1418.56

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

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.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

This one wants you to make the anchor elements have the class nav-link (you have made the list item elements into nav-links instead so correct that first)

Second thing you will need to correct is the ids and the href values that link to the main section elements.

Instead of this #installing you should write #Installing and then also change the id here

To match and use Installing (capitals to match the capitals used in the header text)

Make all the ids match exactly even to the use of capital letters.

I edited it and all the tests pass but the first three items of the menu don’t go to the section when I click them. I don’t know why they don’t. The last two do. Here is my updated code:
‘’’

Technical Documentation Page Express JS Getting Started Guide
Installing Hello World Express Generator Basic Routing Static files Installing

Assuming you’ve already installed Node.js, create a directory to hold your application, and make that your working directory.

$ mkdir myapp

$ cd myapp

Use the npm init command to create a package.json file for your application. For more information on how package.json works, see Specifics of npm’s package.json handling.

$ npm init

This command prompts you for a number of things, such as the name and version of your application. For now, you can simply hit RETURN to accept the defaults for most of them, with the following exception:

entry point: (index.js)

Enter app.js, or whatever you want the name of the main file to be. If you want it to be index.js, hit RETURN to accept the suggested default file name.

Now install Express in the myapp directory and save it in the dependencies list. For example:

$ npm install express --save

To install Express temporarily and not add it to the dependencies list:

$ npm install express --no-save

<section class="main-section" id="Hello_World">
  <header>Hello World</header>
  <article class="main-article">
    <code>const express = require('express')

const app = express()
const port = 3000

app.get(‘/’, (req, res) => res.send(‘Hello World!’))

app.listen(port, () => console.log(Example app listening at http://localhost:${port}))

This app starts a server and listens on port 3000 for connections. The app responds with “Hello World!” for requests to the root URL (/) or route. For every other path, it will respond with a 404 Not Found.


The example above is actually a working server: Go ahead and click on the URL shown. You’ll get a response, with real-time logs on the page, and any changes you make will be reflected in real time. This is powered by RunKit, which provides an interactive JavaScript playground connected to a complete Node environment that runs in your web browser. Below are instructions for running the same app on your local machine.


Running Locally


First create a directory named myapp, change to it and run npm init. Then install express as a dependency, as per the installation guide.


In the myapp directory, create a file named app.js and copy in the code from the example above.


Run the app with the following command:


$ node app.js


Then, load http://localhost:3000/ in a browser to see the output.



<section class="main-section" id="Express_Generator">
  <header>Express Generator</header>
  <article class="main-article">
    <p>Use the application generator tool, express-generator, to quickly create an application skeleton.</p>
    <p>You can run the application generator with the npx command (available in Node.js 8.2.0).</p>
    <p>$ npx express-generator</p>
    <p>For earlier Node versions, install the application generator as a global npm package and then launch it.</p>
    <p>$ npm install -g express-generator
       $ express</p>
    <p>Display the command options with the -h option:</p>
    <p>$ express -h

Usage: express [options] [dir]

Options:

-h, --help          output usage information
    --version       output the version number
-e, --ejs           add ejs engine support
    --hbs           add handlebars engine support
    --pug           add pug engine support
-H, --hogan         add hogan.js engine support
    --no-view       generate without view engine
-v, --view 

add view support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
-c, --css add stylesheet support (less|stylus|compass|sass) (defaults to plain css)
–git add .gitignore
-f, --force force on non-empty directory

For example, the following creates an Express app named myapp. The app will be created in a folder named myapp in the current working directory and the view engine will be set to Pug:

$ express --view=pug myapp

create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug
create : myapp/bin
create : myapp/bin/www

Then install dependencies:

$ cd myapp $ npm install

On MacOS or Linux, run the app with this command:

$ DEBUG=myapp:* npm start

On Windows, use this command:

> set DEBUG=myapp:* & npm start

Then load http://localhost:3000/ in your browser to access the app.

The generated app has the following directory structure:


.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug

7 directories, 9 files

  </article>
</section>

<section class="main-section" id="Basic_Routing">
  <header>Basic Routing</header>
  <article class="main-article">
    <p>Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, and so on).</p>
    <p>Each route can have one or more handler functions, which are executed when the route is matched.</p>
    <p>Route definition takes the following structure:</p>
    <p>app.METHOD(PATH, HANDLER)</p>
    <p>Where:</p>
    <ol>
      <li>app is an instance of express.</li>
      <li>METHOD is an HTTP request method, in lowercase.</li>
      <li>PATH is a path on the server.</li>
      <li>HANDLER is the function executed when the route is matched.</li>
      <li>Etc.</li>
    </ol>
    <p>The following examples illustrate defining simple routes.</p>
    <p>Respond with Hello World! on the homepage:</p>
    <code>app.get('/', function (req, res) {

res.send(‘Hello World!’)
})

Respond to POST request on the root route (/), the application’s home page:


app.post(‘/’, function (req, res) {
res.send(‘Got a POST request’)
})

Respond to a PUT request to the /user route:


app.put(‘/user’, function (req, res) {
res.send(‘Got a PUT request at /user’)
})

Respond to a DELETE request to the /user route:


app.delete(‘/user’, function (req, res) {
res.send(‘Got a DELETE request at /user’)
})

  </article>
</section>

<section class="main-section" id="Static_Files">
  <header>Static Files</header>
  <article class="main-article">
    <p>To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.</p>
    <p>The function signature is:</p>
    <code>express.static(root, [options])

The root argument specifies the root directory from which to serve static assets. For more information on the options argument, see express.static.

For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:

app.use(express.static('public'))

Now, you can load the files that are in the public directory:

http://localhost:3000/images/kitten.jpg http://localhost:3000/css/style.css http://localhost:3000/js/app.js http://localhost:3000/images/bg.png http://localhost:3000/hello.html

To use multiple static assets directories, call the express.static middleware function multiple times:

app.use(express.static('public')) app.use(express.static('files'))

Express looks up the files in the order in which you set the static directories with the express.static middleware function.

To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:

app.use('/static', express.static('public'))

Now, you can load the files that are in the public directory from the /static path prefix.

http://localhost:3000/static/images/kitten.jpg http://localhost:3000/static/css/style.css http://localhost:3000/static/js/app.js http://localhost:3000/static/images/bg.png http://localhost:3000/static/hello.html

However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve:

app.use('/static', express.static(path.join(__dirname, 'public')))

/* css reset */

  • {
    margin: 0;
    }

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.5;
background-color: #f1f1f1;
}

#main-header {
position: fixed;
top: 0;
left: 0;
height: 100%;
min-width: 280px;
max-width: 300px;
}

#navbar {
height: 100%;
border-right: solid 2.5px #333;
}

#navbar>h1 {
font-size: 1.6rem;
text-align: center;
padding: 1rem 0;
}

#navbar ul {
padding: 0;
overflow-y: auto;
overflow-x: hidden;
height: 90%;
list-style: none;
}

#navbar ul li {
border: solid 1.3px #333;
}

#main-header #navbar ul li a {
display: block;
text-align: left;
padding: .8rem 1rem .8rem 2rem;
cursor: pointer;
color: #222;
text-decoration: none;
}

/* main section */
#main-doc {
position: absolute;
margin-left: 320px;
padding: 2rem 1rem;
}

#main-doc .main-section header {
font-size: 2rem;
padding: 1rem 0;
}

#main-doc .main-section .main-article {
padding-left: 1.5rem;
margin-bottom: .5rem;
color: #222;
}

#main-doc .main-section .main-article p {
margin-bottom: 1rem;
}

#main-doc .main-section .main-article ul {
margin: 1.3rem 0 0 1.2rem;
}

#main-doc .main-section .main-article ul li {
margin-bottom: 1rem;
}

#main-doc .main-section .main-article code {
display: block;
padding: 1.5rem;
text-align: left;
background-color: #ddd;
border-radius: 7px;
margin-bottom: 1rem;
}

#main-doc .main-section:last-child .main-article ul {
margin: .5rem 0 1.5rem 3rem;
padding: 0;
}

#creator {
text-align: left;
padding: 2rem 0 0;
}

/* mobile-devices */
@media (max-width: 600px) {
#main-header {
position: absolute;
top: 0;
width: 100%;
margin: 0;
max-width: 95%;
max-height: 400px;
}

#navbar {
width: 100%;
margin: 0;
}

#main-doc {
position: relative;
margin-left: 0px;
padding: 2rem 1rem;
margin-top: 410px;
}

}
‘’’

Please read the post I made about how to post code on the forum otherwise no one can read your code except the moderators.

https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/574005/2?u=hbar1st

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Technical Documentation Page</title>
</head>

<body>
    <nav id="navbar">
      <header id="main-header">Express JS Getting Started Guide</header>
            </br>
      <a class="nav-link" href="#Installing">Installing</a>
  <a class="nav-link" href="#Hello_World">Hello World</a>
  <a class="nav-link" href="#Express_Generator">Express Generator</a>
  <a class="nav-link" href="#Basic_Routing">Basic Routing</a>
  <a class="nav-link" href="#Static_Files">Static files</a>
  
</nav>
    
  <main id="main-doc">
    <section class="main-section" id="Installing">
      <header>Installing</header>
      <article class="main-article">
        <p>Assuming you’ve already installed Node.js, create a directory to hold your application, and make that your working directory.</p>
        <p>$ mkdir myapp</p>
        <p>$ cd myapp</p>
        <p>Use the npm init command to create a package.json file for your application. For more information on how package.json works, see Specifics of npm’s package.json handling.</p>
        <p>$ npm init</p>
        <p>This command prompts you for a number of things, such as the name and version of your application. For now, you can simply hit RETURN to accept the defaults for most of them, with the following exception:</p>
        <p>entry point: (index.js)</p>
        <p>Enter app.js, or whatever you want the name of the main file to be. If you want it to be index.js, hit RETURN to accept the suggested default file name.</p>
        <p>Now install Express in the myapp directory and save it in the dependencies list. For example:</p>
        <p>$ npm install express --save</p>
        <p>To install Express temporarily and not add it to the dependencies list:</p>
        <p>$ npm install express --no-save</p>
      </article>
    </section>

    <section class="main-section" id="Hello_World">
      <header>Hello World</header>
      <article class="main-article">
        <code>const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))</code>
        <p>This app starts a server and listens on port 3000 for connections. The app responds with “Hello World!” for requests to the root URL (/) or route. For every other path, it will respond with a 404 Not Found.</p>
        <p>The example above is actually a working server: Go ahead and click on the URL shown. You’ll get a response, with real-time logs on the page, and any changes you make will be reflected in real time. This is powered by RunKit, which provides an interactive JavaScript playground connected to a complete Node environment that runs in your web browser. Below are instructions for running the same app on your local machine.</p>
        <h2>Running Locally</h2>
        <p>First create a directory named myapp, change to it and run npm init. Then install express as a dependency, as per the installation guide.</p>
        <p>In the myapp directory, create a file named app.js and copy in the code from the example above.</p>
        <p>Run the app with the following command:</p>
        <p>$ node app.js</p>
        <p>Then, load http://localhost:3000/ in a browser to see the output.</p>
      </article>
    </section>

    <section class="main-section" id="Express_Generator">
      <header>Express Generator</header>
      <article class="main-article">
        <p>Use the application generator tool, express-generator, to quickly create an application skeleton.</p>
        <p>You can run the application generator with the npx command (available in Node.js 8.2.0).</p>
        <p>$ npx express-generator</p>
        <p>For earlier Node versions, install the application generator as a global npm package and then launch it.</p>
        <p>$ npm install -g express-generator
           $ express</p>
        <p>Display the command options with the -h option:</p>
        <p>$ express -h

  Usage: express [options] [dir]

  Options:

    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
        --no-view       generate without view engine
    -v, --view 
 add view  support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css   add stylesheet  support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory
</p>
<p>For example, the following creates an Express app named myapp. The app will be created in a folder named myapp in the current working directory and the view engine will be set to Pug:</p>
<p>$ express --view=pug myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.pug
   create : myapp/views/layout.pug
   create : myapp/views/error.pug
   create : myapp/bin
   create : myapp/bin/www</p>
   <p>Then install dependencies:</p>
   <p>$ cd myapp
$ npm install</p>
    <p>On MacOS or Linux, run the app with this command:</p>
    <p>$ DEBUG=myapp:* npm start</p>
    <p>On Windows, use this command:</p>
    <p>> set DEBUG=myapp:* & npm start</p>
    <p>Then load http://localhost:3000/ in your browser to access the app.

The generated app has the following directory structure:</p>
    <p>.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

7 directories, 9 files</p>

      </article>
    </section>

    <section class="main-section" id="Basic_Routing">
      <header>Basic Routing</header>
      <article class="main-article">
        <p>Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, and so on).</p>
        <p>Each route can have one or more handler functions, which are executed when the route is matched.</p>
        <p>Route definition takes the following structure:</p>
        <p>app.METHOD(PATH, HANDLER)</p>
        <p>Where:</p>
        <ol>
          <li>app is an instance of express.</li>
          <li>METHOD is an HTTP request method, in lowercase.</li>
          <li>PATH is a path on the server.</li>
          <li>HANDLER is the function executed when the route is matched.</li>
          <li>Etc.</li>
        </ol>
        <p>The following examples illustrate defining simple routes.</p>
        <p>Respond with Hello World! on the homepage:</p>
        <code>app.get('/', function (req, res) {
  res.send('Hello World!')
})</code>
        <p>Respond to POST request on the root route (/), the application’s home page:</p>
        <code>app.post('/', function (req, res) {
  res.send('Got a POST request')
})</code>
        <p>Respond to a PUT request to the /user route:</p>
        <code>app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user')
})</code>
        <p>Respond to a DELETE request to the /user route:</p>
        <p>app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user')
})</p>

      </article>
    </section>

    <section class="main-section" id="Static_Files">
      <header>Static Files</header>
      <article class="main-article">
        <p>To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.</p>
        <p>The function signature is:</p>
        <code>express.static(root, [options])
</code>
        <p>The root argument specifies the root directory from which to serve static assets. For more information on the options argument, see express.static.</p>
        <p>For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:</p>
        <code>app.use(express.static('public'))</code>
        <p>Now, you can load the files that are in the public directory:</p>
        <p>http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html</p>
        <p>To use multiple static assets directories, call the express.static middleware function multiple times:</p>
        <code>app.use(express.static('public'))
app.use(express.static('files'))</code>
        <p>Express looks up the files in the order in which you set the static directories with the express.static middleware function.</p>
        <p>To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:</p>
        <code>app.use('/static', express.static('public'))</code>
        <p>Now, you can load the files that are in the public directory from the /static path prefix.</p>
        <p>http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html</p>
    <p>However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve:</p>
    <code>app.use('/static', express.static(path.join(__dirname, 'public')))
</code>
</article>
    </section>
  </main>
</body>

</html>
/* css reset */
* {
  margin: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
  background-color: #f1f1f1;
}

#main-header {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 280px;
  max-width: 300px;
}

#navbar {
  height: 100%;
  border-right: solid 2.5px #333;
}

#navbar>h1 {
  font-size: 1.6rem;
  text-align: center;
  padding: 1rem 0;
}

#navbar ul {
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 90%;
  list-style: none;
}

#navbar ul li {
  border: solid 1.3px #333;
}

#main-header #navbar ul li a {
  display: block;
  text-align: left;
  padding: .8rem 1rem .8rem 2rem;
  cursor: pointer;
  color: #222;
  text-decoration: none;
}


/* main section */
#main-doc {
  position: absolute;
  margin-left: 320px;
  padding: 2rem 1rem;
}

#main-doc .main-section header {
  font-size: 2rem;
  padding: 1rem 0;
}

#main-doc .main-section .main-article {
  padding-left: 1.5rem;
  margin-bottom: .5rem;
  color: #222;
}

#main-doc .main-section .main-article p {
  margin-bottom: 1rem;
}

#main-doc .main-section .main-article ul {
  margin: 1.3rem 0 0 1.2rem;
}

#main-doc .main-section .main-article ul li {
  margin-bottom: 1rem;
}

#main-doc .main-section .main-article code {
  display: block;
  padding: 1.5rem;
  text-align: left;
  background-color: #ddd;
  border-radius: 7px;
  margin-bottom: 1rem;
}

#main-doc .main-section:last-child .main-article ul {
  margin: .5rem 0 1.5rem 3rem;
  padding: 0;
}

#creator {
  text-align: left;
  padding: 2rem 0 0;
}

/* mobile-devices */
@media (max-width: 600px) {
  #main-header {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    max-width: 95%;
    max-height: 400px;
  }

  #navbar {
    width: 100%;
    margin: 0;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    padding: 2rem 1rem;
    margin-top: 410px;
  }

}

this is invalid html
I think you meant <br>

Ok. I fixed that. Why don’t the first three sections of the menu work when I click on them? The code passes the tests though.

i’m not able to test your code because when I copy it I just get malformed results in the preview page.
To me the href looks fine but maybe something else is going on.
Can you copy your code into a codepen?
Maybe show us a screenshot of what it should look like because for me, it just looks wrong when I try it.

Technical Documentation Page (codepen.io)

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.