Technical Documentation Page - Build a Technical Documentation Page

Can someone help me please? I keep getting the error " * You should have a nav element with an id of navbar.

Failed: Your #navbar should have exactly one header element within it."

I’ve checked over and over again and have no idea as of whats wrong?

    <!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8"></meta>
  <meta name="viewport" content="width=device-width, initial-scale=1.0></meta>
  <title> CSS </title>
    </head>
    <body>
      <nav id="navbar">
        <header>CSS</header>
        <ul>
        <li><a class="nav-link" href="#CSS">CSS</a></li>
        <li><a class="nav-link" href="#selector">Selector</a></li>
        <li><a class="nav-link" href="#declaration_block">Declaration block</a></li>
        <li><a class="nav-link" href="#Length_units">Lenght units</a></li>
        <li><a class="nav-link" href="#Sources">Sources</a></li>
        <li><a class="nav-link" href="#specificity">Specificity</a></li>
        </ul></nav>
      <main id="main-doc">
        <section class="main-section" id="CSS"><header>CSS</header>
        <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML) CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
        <p>CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.</p>
<p>
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.</p>
        </section>
        <section class="main-section" id="selector"><header>Selector</header>
        <p> "CSS class" redirects here. For non-CSS use of element classes in HTML, see class attribute (HTML).
In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself.

Selectors may apply to the following:
<ul>
  <li>all elements of a specific type, e.g. the second-level headers h2</li>
  <li>elements specified by attribute, in particular: <code>.class</code> and <code>#id</code>.
  <li>elements depending on how they are placed relative to others in the document tree.</li></ul>
  <p>Classes and IDs are case-sensitive, start with letters, and can include alphanumeric characters, hyphens, and underscores. A class may apply to any number of instances of any element. An ID may only be applied to a single element.

Pseudo-classes are used in CSS selectors to permit formatting based on information that is not contained in the document tree. One example of a widely used pseudo-class is <code>:hover</code>, which identifies content only when the user "points to" the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in <code>a:hover</code> or <code>#elementid:hover</code>. A pseudo-class classifies document elements, such as <code>:link</code> or <code>:visited</code>, whereas a pseudo-element makes a selection that may consist of partial elements, such as <code>::first-line</code> or <code>::first-letter.</code> Note the double-colon notation for pseudo-elements versus single-colon notation for pseudo-class.
 </p></section><section class="main-section" id="declaration_block"><header>Declaration block</header>
 <p>A declaration block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration. An optional semi-colon after the last (or single) declaration may be used.
</p><p>
Properties are specified in the CSS standard. Each property has a set of possible values. Some properties can affect any type of element, and others apply only to particular groups of elements.</p>
<p>
Values may be keywords, such as "center" or "inherit", or numerical values, such as 200px (200 pixels), 50vw (50 percent of the viewport width) or 80% (80 percent of the parent element's width). Color values can be specified with keywords (e.g. "red"), hexadecimal values (e.g. #FF0000, also abbreviated as #F00), RGB values on a 0 to 255 scale (e.g. rgb(255, 0, 0)), RGBA values that specify both color and alpha transparency (e.g. rgba(255, 0, 0, 0.8)), or HSL or HSLA values (e.g. hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%))</p></section><section class="main-section" id="Length_units"><header>Length units
</header>
<p>Non-zero numeric values representing linear measures must include a length unit, which is either an alphabetic code or abbreviation, as in 200px or 50vw; or a percentage sign, as in 80%. Some units – cm (centimetre); in (inch); mm (millimetre); pc (pica); and pt (point) – are absolute, which means that the rendered dimension does not depend upon the structure of the page; others – em (em); ex (ex) and px (pixel)[clarification needed] – are relative, which means that factors such as the font size of a parent element can affect the rendered measurement. These eight units were a feature of CSS 1 and retained in all subsequent revisions. The proposed CSS Values and Units Module Level 3 will, if adopted as a W3C Recommendation, provide seven further length units: ch; Q; rem; vh; vmax; vmin; and vw.</p></section><section class="main-section" id="Sources"><header>Sources</header>
<p>CSS information can be provided from various sources. These sources can be the web browser, the user, and the author. The information from the author can be further classified into inline, media type, importance, selector specificity, rule order, inheritance, and property definition. CSS style information can be in a separate document, or it can be embedded into an HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so authors can tailor the presentation appropriately for each medium.

The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. The process is called cascading.
</p><p>
One of the goals of CSS is to allow users greater control over presentation. Someone who finds red italic headings difficult to read may apply a different style sheet. Depending on the browser and the website, a user may choose from various style sheets provided by the designers, or may remove all added styles, and view the site using the browser's default styling, or may override just the red italic heading style without altering other attributes. Browser extensions like Stylish and Stylus have been created to facilitate the management of such user style sheets.</p></section><section class="main-section" id="specificity"><header>Specificity</header>
<p>Specificity refers to the relative weights of various rules.[16] It determines which styles apply to an element when more than one rule could apply. Based on the specification, a simple selector (e.g. H1) has a specificity of 1, class selectors have a specificity of 1,0, and ID selectors have a specificity of 1,0,0. Because the specificity values do not carry over as in the decimal system, commas are used to separate the "digits" (a CSS rule having 11 elements and 11 classes would have a specificity of 11,11, not 121). For example:
  <ul>
    <li><b>selector</b>: <code>h1{color: white;}</code> <br>
    <b>specificity:</b> <code>0, 0, 0, 1
</code>
<li><b>selector:</b><code>p em {color: green;}</code><br><b>specificity:</b><code>0, 0, 0, 2</code>
</p></section>
        </main>
      </body>
  </html>
     

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/110.0

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Make sure you don’t have another element using the id of navbar. It would help if you posted all of your HTML in here so we could check it for you.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

I will try to select all of it now and edit my main post, it said it would be too long when I first did this, but let me try again.

thank you so much for replying, I just put all of it in the original post.

Look closely at what you pasted in above. Do you see how some of the tags don’t look the same as the others. Most tags are in bold but some of them near the top are not. That’s telling you that you have a mistake in your HTML. Now it’s your job to find it :slightly_smiling_face:

HA! Thank you so much, I didn’t know about that. Found it already :slight_smile:

SOOOO, That fixed a bunch of errors, but now its showing this: Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

But they have! And it works. I tested and when I click on them it goes to where I want them to go

Welcome to the “fun” part of programming: Finding your own bugs. Read the test carefully:

“Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).”

This is telling you that the text of one of the links in the nav does not match its associated text in the heading of the section. And this test is correct. I found it within 30 seconds. But I don’t want to spoil the fun for you.

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