###I can’t get through this test - “Your #navbar should always be on the left edge of the window.”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Certification Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header><h3>MENU</h3></header>
<a href="#STACK" class="nav-link">STACK</a>
<a href="#MongoDB" class="nav-link">MongoDB</a>
<a href="#Express" class="nav-link">Express</a>
<a href="#React" class="nav-link">React</a>
<a href="#Node" class="nav-link">Node</a>
</nav>
<main id="main-doc">
<section class="main-section" id="STACK">
<header id="MERN"><h1>STACK</h1></header>
<img src="MERN.webp" alt="MERN image">
<caption>STACK.img</caption>
<h2><p>MERN stack is one of the most popular language-set or a an option to become a Full Stack Developer.</p></h2>
<h3><p>MERN stands for following : </p></h3>
<ul>
<li>MERN</li>
<li>M for MongoDB</li>
<li>E for Express</li>
<li>R for React</li>
<li>N for Node JS</li>
</ul>
</section>
<section class="main-section" id="MongoDB">
<header class="database"><h4>MongoDB</h4></header>
<p>MongoDB is built on a scale-out architecture that has become popular with developers of all kinds for developing scalable applications with evolving data schemas.
As a document database, MongoDB makes it easy for developers to store structured or unstructured data.
It uses a JSON-like format to store documents.</p>
<p>
MongoDB is a NoSQL distributed database program.
Because data doesn't need to fit within the confines of a strict relationship, MongoDB can operate as a general data store.
This database provides several advantages.
In this type of database, data is stored in MongoDB and maps to a flexible schema.
</p>
</header>
</section>
<section class="main-section" id="Express">
<header class="Express"><h4>Express</h4></header>
<p>
Express is a node js web application framework that provides broad features for building web and mobile applications.
It is used to build a single page, multipage, and hybrid web application.
It's a layer built on the top of the Node js that helps manage servers and routes.
</p>
<p>
Express is a node js web application framework that provides broad features for building web and mobile applications.
It is used to build a single page, multipage, and hybrid web application.
It's a layer built on the top of the Node js that helps manage servers and routes.
</p>
</header>
</section>
<section class="main-section" id="React">
<header class="database"><h4>React</h4></header>
<p>
React is a free and open-source front-end JavaScript library for building user interfaces based on components.
It is maintained by Meta and a community of individual developers and companies.
React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js.
</p>
<p>
One of the primary reasons for React's popularity is its ease of use.
React uses a component-based architecture, which makes it easy to break down complex user interfaces into smaller, reusable parts.
</p>
</header>
</section>
<section class="main-section" id="Node">
<header class="database"><h4>Node</h4></header>
<p>
Node.js is a cross-platform, open-source server environment that can run on Windows, Linux, Unix, macOS, and more.
Node.js is a back-end JavaScript runtime environment, runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser.
</p>
<p>
Developers use Node. js to create server-side web applications, and it is perfect for data-intensive applications since it uses an asynchronous, event-driven model.
Now that we know what is Node, let's look at why it is so prevalent in web development.
</p>
<code>
</code>
<code></code>
<code></code>
<code></code>
<code></code>
</section>
</Ol>
</main>
</body>
</html>
CSS
html {
box-sizing: border-box;
}
body{
margin:40px 50px;
}
@media (max-width : 500px){
main{
max-width: 500px;
}
}
nav{
position: fixed;
display: flex;
flex-direction:column;
gap: 80px;
}
img{
width:350px;
height:200px;
}
.main-section{
margin:100px 30px;
margin-left: 200px;
}
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
