Tell us what’s happening:
I think there is an error in the requirement-checking software:
// running tests
5. The first child of each .main-section should be a header element.
6. None of your header elements should be empty.
13. Your #navbar should have exactly one header element within it.
18. The header element in the #navbar should come before any link (a) elements also in the #navbar.
// tests completed
I’ve covered all of this however i still cant continue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Media query for responsive design */
@media (max-width: 600px) {
#navbar {
width: 100%; /* Make navbar full width on small screens */
}
}
</style>
</head>
<body>
<nav id="navbar">
<h1>Technical Documentation</h1>
<!-- Header element should be first -->
<ul>
<li><a href="#HTML_Basics" class="nav-link">HTML Basics</a></li>
<li><a href="#CSS_Fundamentals" class="nav-link">CSS Fundamentals</a></li>
<li><a href="#JavaScript_Introduction" class="nav-link">JavaScript Introduction</a></li>
<li><a href="#Responsive_Design" class="nav-link">Responsive Design</a></li>
<li><a href="#APIs" class="nav-link">APIs</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="HTML_Basics">
<h1>HTML Basics</h1>
<!-- First child is a header -->
<p>HTML stands for HyperText Markup Language.</p>
<p>It is the standard markup language for creating web pages.</p>
<p>HTML elements are the building blocks of HTML pages.</p>
<p>HTML elements are represented by tags.</p>
<p>For example, the <code><p></code> tag defines a paragraph.</p>
<p>Here is a code example: <code>console.log('Hello, World!');</code></p> <!-- Existing code element -->
<p>Another example of an HTML element: <code><div>This is a div</div></code></p> <!-- Added code element -->
<ul>
<li>HTML is easy to learn.</li>
<li>HTML is a markup language.</li>
<li>HTML is used to structure content.</li>
</ul>
</section>
<section class="main-section" id="CSS_Fundamentals">
<h1>CSS Fundamentals</h1>
<!-- First child is a header -->
<p>CSS stands for Cascading Style Sheets.</p>
<p>CSS describes how HTML elements are to be displayed on screen.</p>
<p>CSS can control the layout of multiple web pages all at once.</p>
<p>CSS is easy to learn and understand.</p>
<p>For example, you can change the color of text using CSS.</p>
<p>Here is a code example: <code>body { background-color: blue; }</code></p> <!-- Existing code element -->
<p>Another CSS example: <code>h1 { font-size: 2em; }</code></p> <!-- Added code element -->
<ul>
<li>CSS is used for styling web pages.</li>
<li>CSS can be applied inline, internally, or externally.</li>
<li>CSS supports responsive design.</li>
</ul>
</section>
<section class="main-section" id="JavaScript_Introduction">
<h1>JavaScript Introduction</h1>
<!-- First child is a header -->
<p>JavaScript is a programming language that allows you to implement complex features on web pages.</p>
<p>JavaScript is an essential part of web applications.</p>
<p>JavaScript can update and change both HTML and CSS.</p>
<p>JavaScript can calculate, manipulate, and validate data.</p>
<p>For example, you can use JavaScript to create interactive elements.</p>
<p>Here is a code example: <code>function greet() { return 'Hello!'; }</code></p> <!-- Existing code element -->
<p>Another JavaScript example: <code>let x = 10;</code></p> <!-- Added code element -->
<ul>
<li>JavaScript is versatile and powerful.</li>
<li>JavaScript can be used on both the client-side and server-side.</li>
<li>JavaScript supports event-driven programming.</li>
</ul>
</section>
<section class="main-section" id="Responsive_Design">
<h1>Responsive Design</h1>
<!-- First child is a header -->
<p>Responsive design is an approach to web design that makes web pages render well on a variety of devices.</p>
<p>Responsive design uses fluid grids, flexible images, and media queries.</p>
<p>Media queries allow you to apply different styles based on device characteristics.</p>
<p>Responsive design improves user experience on mobile devices.</p>
<p>For example, you can use CSS to adjust layouts for different screen sizes.</p>
<ul>
<li>Responsive design is essential for modern web development.</li>
<li>Responsive design enhances accessibility.</li>
<li>Responsive design can improve SEO.</li>
</ul>
</section>
<section class="main-section" id="APIs">
<h1>APIs</h1>
<!-- First child is a header -->
<p>API stands for Application Programming Interface.</p>
<p>APIs allow different software applications to communicate with each other.</p>
<p>APIs can be used to access web services and data.</p>
<p>APIs are essential for building modern web applications.</p>
<p>For example, you can use APIs to fetch data from a server.</p>
<ul>
<li>APIs can be RESTful or SOAP-based.</li>
<li>APIs can return data in various formats, such as JSON or XML.</li>
<li>APIs enable integration between different systems.</li>
</ul>
</section>
</main>
</body>
</html>
Your code so far
<!-- file: index.html -->
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
