Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
am trying to get my main-section’d id’s to match the header but every time I use the right text it still says its wrong , I’ve added underscores to the spaces in the header text but that still doesn’t work. Can someone please explain what am doing wrong.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
  <html lang="en">
    </html>
   <meta charset="UTF-8"><meta name="viewport" content="width=device-width>"
   <link rel="stylesheet" href="./styles.css">
   
    <main id="main-doc">
    <section class="main-section" id="The_basics_of_html_and_css">
      <header><h1>The basics of html and css</h1></header>
      <nav id="navbar"><header>html</header>
      <a class="nav-link"text="html"href="https://www.impressivewebs.com/css-terms-definitions/">Css terminology</a></nav>
      <p>HTML is a markup language, not a programming language. It is used to structure content on a web page, but it does not have the ability to perform complex calculations or make decisions like programming languages can.</p>
       <code>FACTS:CSS, which stands for Cascading Style Sheets, was first introduced in 1996 as a way to separate the presentation of a webpage from its content. It was created by Håkon Wium Lie and Bert Bos at the European Organization for Nuclear Research (CERN) in Switzerland.</code>
       <p> CSS, or Cascading Style Sheets, is a language used to describe the visual style and layout of HTML and XML documents </p>
       <li>CSS FACT </li>
       </section>
     <section class="main-section" id="CSS">
       <header>CSS</header>
       <nav id="navbar"><a class="nav-link"text="CSS" href="https://www.tldevtech.com/interesting-facts-about-html/">HTML terminology</a>  <p>Selectors: Selectors are used to target HTML elements and apply styles to them. There are different types of selectors, such as element selectors, class selectors, and ID selectors.</p> <p>HTML consists of a series of elements, which are enclosed in angle brackets (< >) and can have attributes that provide additional information about the element.</p><code>FACT:HTML is often used in conjunction with other web technologies such as CSS (Cascading Style Sheets) and JavaScript to create more dynamic and interactive web pages. </code> <li>CSS FACT</li></section>
      <section class="main-section" id="CSS"> 
        <header>CSS</header>
        <nav id="navbar"><a class="nav-link" text="CSS"></a>
        <p>Properties: Properties define the style of an HTML element. For example, the "color" property can be used to set the text color, and the "font-size" property can be used to set the font size. </p> <p>HTML documents are structured using a specific syntax, which includes opening and closing tags, as well as the content that goes between them.</p><code></code><li>CSS FACT</li> </section>
       <section class="main-section" id="CSS">
         <header>CSS</header>
         <nav id="navbar"><a class="nav-link" text="CSS"></a>
         <p>Values: Values are assigned to properties to specify the specific style to be applied. For example, the "color" property can have a value of "red" to set the text color to red.</p><p>HTML documents typically have a head section and a body section. The head section contains information about the document, such as the title and any metadata, while the body section contains the actual content that will be displayed on the page.
</p><code></code>  <li>CSS FACT</li></section>
        <section class="main-section" id="CSS">
         <header>CSS</header> 
         <nav id="navbar"><a class="nav-link" text="CSS"></a>
          <p>CSS Box Model: The CSS box model defines how HTML elements are displayed and how their content, padding, borders, and margins are organized.</p> <p>HTML documents can be created and edited using a simple text editor, but there are also many specialized HTML editors and integrated development environments (IDEs) available that provide more advanced features and functionality.</p><code></code><li>By Razzibabe</li></section>
        </main>

/* file: styles.css */
navbar
{
text-align: left;
}

@media (max-width: 600px) {
body {
background-color: lightblue;
}
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Hi, this happened to me as well. Another member then kindly explained that apparently, some browser extensions interfere with the tests and can lead to false errors. You could therefore try in another browser. Alternatively, copy your entire code, paste it somewhere else, disable extensions that might interfere, reset the test, paste back in and try again.
If you still get an error, you could try pasting your code in a tool like codepen, which might help you debugging.
Are you able to pass then?

1 Like
3

Hi!

Firstly, you should not have multiple nav elements. You should only have one nav element.
Your nav links should have text inside the anchor elements, it should not be an attribute/value.
This W3schools page may help you understand how navbars can be strutured. Note you do not have to use ul/li elements and anchor elements will work fine.

<a class="nav-link" text="CSS"></a>

Secondly, the html element should enclose everything but the doctype declaration and you should have a head and body element.

<html lang="en">
    </html>

This is also not the correct way to target an id in a css file. I suggest looking this up on w3schools or going back to one of the earlier lessons.

navbar
{
text-align: left;
}
1 Like
4

am I meant to get rid of the (text=“CSS”) ? I read the article on css and I still don’t understand.

5

Okay so if you check this list of existing html attributes, text is not one of them. This code doesn’t do anything as the text attribute doesn’t exist.

You don’t need a text attribute as it doesn’t do anything basically.

1 Like
6

Also you should only use each id once in a html document.

  <section class="main-section" id="CSS">
       <header>CSS</header>
       <nav id="navbar"><a class="nav-link"text="CSS" href="https://www.tldevtech.com/interesting-facts-about-html/">HTML terminology</a>  <p>Selectors: Selectors are used to target HTML elements and apply styles to them. There are different types of selectors, such as element selectors, class selectors, and ID selectors.</p> <p>HTML consists of a series of elements, which are enclosed in angle brackets (< >) and can have attributes that provide additional information about the element.</p><code>FACT:HTML is often used in conjunction with other web technologies such as CSS (Cascading Style Sheets) and JavaScript to create more dynamic and interactive web pages. </code> <li>CSS FACT</li></section>
      <section class="main-section" id="CSS">

This lesson instruction:

Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it.

Means you should have section elements that each have a different id that matches with the text of its individual header. i.e.

<section id='css' class='main-section'>
  <header>
    <h2>css</h2>
  </header>
</section>
<section id='html' class='main-section'>
  <header>
    <h2>html</h2>
  </header>
</section>
1 Like