Tell us what’s happening:
You should have the same number of .nav-link and .main-section elements… can someone pls, help me on this statement.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="styles.css"></link>
</head>
<body>
<main id="main-doc">
<nav id="navbar">
<header>PROGRAMMING USING
<a class="nav-link" href="#HTML_Properties">HTML Properties<a/>,
<a class="nav-link" href="#CSS_Properties">CSS Properties</a>,
<a class="nav-link" href="#JAVASCRIPT_Properties">JAVASCRIPT Properties</a>,
<a class="nav-link" href="#BOOTSTRAP_Properties">BOOTSTRAP Properties</a> AND
<a class="nav-link" href="#FIGMA_Properties">FIGMA Properties</a>
</header>
</nav>
<section class="main-section" id="html_properties"><header>HTML Properties</header>
<article class="paragraph" ><p>stands for <strong>Hyper Text Markup Language</strong>, it is the standard markup language for creating Web pages and it describes the structure of a Web page.</p>
<code></code>
<p><i>HTML</i> consists of a series of elements which tells the browser how to display the content, these elements label pieces of content such as: <br>"this is a heading", "this is a paragraph", "this is a link", etc. e.g.</p>
<ul>
<li>HTML paragraph property</li>
</ul>
</article>
<nav id="navbar"><a class="nav-link" href="#html_properties" target="_blank">HTML Properties</a></nav>
</section>
<section class="main-section" id="CSS_Properties"><header>CSS Properties</header>
<article class="paragraph" ><p</i> is the language we use to style an HTML document. It describes how HTML elements should be displayed.</p>
<code></code>
<p><i>CSS</i> stands for <strong>Casscading Style Sheet</strong> CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files. e.g.</p>
<ul>
<li>CSS height/width property</li>
</ul>
</article>
<nav id="navbar"><a class="nav-link" href="#CSS_Properties" target="_blank">CSS Properties</a></nav>
</section>
<section class="main-section" id="JAVASCRIPT_Properties"><header>JAVASCRIPT Properties</header>
<article class="paragraph"><p></i> is the world's most popular programming language.It is the programming language of the Web.</p>
<code></code>
<p>JavaScript is easy to learn. e.g</p>
<ul>
<li>getElementById() property</li>
</ul>
</article>
<nav id="navbar"><a class="nav-link" href="#JAVASCRIPT_Propertie" target="_blank">JAVASCRIPT Properties</a></nav>
</section>
<section class="main-section" id="BOOTSTRAP_Properties"><header>BOOTSTRAP Properties</header>
<article class="paragraph"><p><i></i> is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites.</p>
<code></code>
<p>Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs.</p>
<ul>
<li>BS5 Grid</li>
</ul>
</article>
<nav id="navbar"><a class="nav-link" href="#BOOTSTRAP_Properties" target="_blank">Bootstrap 5</a></nav>
</section>
<section class="main-section" id="FIGMA_Properties"><header>FIGMA Properties</header>
<article class="paragraph"><p><i>></i> is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows.</p>
<code></code>
<p>The Figma mobile app for Android and iOS allow viewing and interacting with Figma prototypes in real-time mobile devices</p>
<ul>
<li>Variant Property</li>
</ul>
</article>
<nav id="navbar"><a class="nav-link" href="#FIGMA_Properties" target="_blank">FIGMA Properties</a></nav>
</section>
</main>
</body>
</html>
Your code so far
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="styles.css"></link>
</head>
<body>
<main id="main-doc">
<nav id="navbar">
<header>PROGRAMMING USING
<a class="nav-link" href="#HTML_Properties">HTML Properties<a/>,
<a class="nav-link" href="#CSS_Properties">CSS Properties</a>,
<a class="nav-link" href="#JAVASCRIPT_Properties">JAVASCRIPT Properties</a>,
<a class="nav-link" href="#BOOTSTRAP_Properties">BOOTSTRAP Properties</a> AND
<a class="nav-link" href="#FIGMA_Properties">FIGMA Properties</a>
</header>
</nav>
<section class="main-section" id="html_properties"><header>HTML Properties</header>
<article class="paragraph" ><p>stands for <strong>Hyper Text Markup Language</strong>, it is the standard markup language for creating Web pages and it describes the structure of a Web page.</p>
<code></code>
<p><i>HTML</i> consists of a series of elements which tells the browser how to display the content, these elements label pieces of content such as: <br>"this is a heading", "this is a paragraph", "this is a link", etc. e.g.</p>
<ul>
<li>HTML paragraph property</li>
</ul>
</article>
<nav id="navbar"><a class="nav-link" href="#html_properties" target="_blank">HTML Properties</a></nav>
</section>
<section class="main-section" id="CSS_Properties"><header>CSS Properties</header>
<article class="paragraph" ><p</i> is the language we use to style an HTML document. It describes how HTML elements should be displayed.</p>
<code></code>
<p><i>CSS</i> stands for <strong>Casscading Style Sheet</strong> CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files. e.g.</p>
<ul>
<li>CSS height/width property</li>
</ul>
</article>
<nav id="navbar"><a class="nav-link" href="#CSS_Properties" target="_blank">CSS Properties</a></nav>
</section>
<section class="main-section" id="JAVASCRIPT_Properties"><header>JAVASCRIPT Properties</header>
<article class="paragraph"><p></i> is the world's most popular programming language.It is the programming language of the Web.</p>
<code></code>
<p>JavaScript is easy to learn. e.g</p>
<ul>
<li>getElementById() property</li>
</ul>
</article>
<nav id="navbar"><a class="nav-link" href="#JAVASCRIPT_Propertie" target="_blank">JAVASCRIPT Properties</a></nav>
</section>
<section class="main-section" id="BOOTSTRAP_Properties"><header>BOOTSTRAP Properties</header>
<article class="paragraph"><p><i></i> is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites.</p>
<code></code>
<p>Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs.</p>
<ul>
<li>BS5 Grid</li>
</ul>
</article>
<nav id="navbar"><a class="nav-link" href="#BOOTSTRAP_Properties" target="_blank">Bootstrap 5</a></nav>
</section>
<section class="main-section" id="FIGMA_Properties"><header>FIGMA Properties</header>
<article class="paragraph"><p><i>></i> is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows.</p>
<code></code>
<p>The Figma mobile app for Android and iOS allow viewing and interacting with Figma prototypes in real-time mobile devices</p>
<ul>
<li>Variant Property</li>
</ul>
</article>
<nav id="navbar"><a class="nav-link" href="#FIGMA_Properties" target="_blank">FIGMA Properties</a></nav>
</section>
</main>
</body>
</html>
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
