Tell us what’s happening:
I’m stuck. I failed the tests:
- Your
#navbar
should have exactly oneheader
element within it. - You should have at least one
a
element with a class ofnav-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 anhref
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 asection
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: