Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Hello, I am trying to do the certification project. I have typed all the requirements in the main project but when I type in the .css folder none of text is altered therefore I cant make any adjustments, or create the media query required to pass the exam. Any assistance would be appreciated.
Your code so far

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.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<link rel="stylesheet href="styles.css">
<head>
  <Title>Introduction to HTML</title>
</head>
<body>
  <nav id="navbar"><header>Beginning with HTML</header>
   <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li><a class="nav-link" href="#Scope">Scope</a></li>
    <li><a class="nav-link" href="#Beginning_declaring">Beginning_declaring</a></li>
    <li><a class="nav-link" href="#Main_Body">Main_Body</a></li>
    <li><a class="nav-link" href="#CSS">CSS</a></li>
   </ul>
    </nav>
    
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header id="Introduction">Introduction</header>
     <p>In this documentation we will introduce you to HTML and how to start writing a document.
     </p>
  </section>
  <section class="main-section" id="Scope">
    <header id="Scope">Scope</header>
     <p>The purpose of this document is to help new users easily navigate the optimal way to create an html document.
     </p>
  </section>
  <section class="main-section" id="Beginning_declaring">
    <header id="Beginning_declaring">Beginning_declaring</header>
     <p> 
      <li>We begin our html project by always typing <code>!DOCTYPE html</code> within brackets without closing tags</li>
      <li>We use the <code>html</code> command within brackets ("<>") and closing brackets("/>") for the whole document(DOCTYPE excluded) using a <code>lang</code> declaration for the language with which the project is written.</li>
      <li>We create a <code>meta charset=" "</code> element without closing brackets to declare the charset that will be used in the project.</li>
      <li>We create a <code>link rel="stylesheet" href="styles.css"</code> to shape our project.</li>
      <li>Our project should have <code>header, main, title, body</code> sections.</li>
    </p>
  </section>
  <section class="main-section" id="Main_Body">
    <header id="Main_body">Main_Body</header>
  <p> Within our main body we use various elements i.e: <code>div, p, li, a</code> which we use to create our project's structure.
  <p><li>The HTML division tag, called "div" for short, is a special element that lets you group similar sets of content together on a web page. You can use it as a generic container for associating similar content.</li>
  </p><li>The <b><code>p</code></b> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.</li>
  </p>
  <p>
    <li>The <b><code>a</code></b> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
  </section>
 <section class="main-section" id="CSS">
    <header id="CSS">CSS</header>
      <p> The styles.css file which we created in the beginning of our project helps with the format of our whole project. In it, we can target various areas of our project using the appropriate commands, as follows:
        <li>If we want to target all elements within our project we can use the universal selector which is <code> * {}</code>. This command will target all elements within the project.
          <li>Elements: are targeted simply by typing their name e.g: <code>section {}</code></li>
      <li>class: are targeted by typing <code>.classname {}</code>. If the class we want to target is within a specific element then we can target that class as follows:<code> elementname.classname {}</code> </li>
          <li>id: are targeted by typing <code>#idname {}</code>.</li>
          <li>pseudoelement selectors. These are used to change specific parts of an element. For pseudoelements we use the <code>::</code>.<li>class: are targeted by typing <code>.classname {}</code>. If the class we want to target is within a specific element then we can target that class as follows:<code> elementname.classname {}</code> </li>
          <li>id: are targeted by typing <code>#idname {}</code>.</li>
          <li>pseudoclass selectors. A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.</li>
          <li>pseudoclass selectors. A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.</li>     
      </p>  
</section>
</main>
</body>
</html>  

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Hello!
It appears that the " that should be around the stylesheet is missing the last one.

1 Like

This is truly embarassing. This was the answer. Thank you so much. My brain is fried.

I am glad you were able to solve the problem.
We all miss things sometimes. That is what makes being part of such a great community a blessing. We all reach out to help one another. Happy coding! :smile:

1 Like

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