Build a Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

I am almost at the end of this exercise and I want to style up my document before I get the confetti. However, the document is not responding to my CSS styling. For instance, I’ve tried to center both the body element and the main element by setting the left-right margin to auto but get no response. I DO get response when I style the headers, though. I’m not sure what I have wrong but it’s probably obvious.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Technical Documentation Page</title>
    <link href="styles.css" rel="stylesheet">
  </head>

  <body>
    <main id="main-doc">
      <nav id="navbar">
        <header>JS Documentation</header>
        <a class="nav-link" href="#Introduction">Introduction</a>
        <a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
        <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
        <a class="nav-link" href="#Hello_world">Hello world</a>
        <a class="nav-link" href="#Variables">Variables</a>
      </nav>
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
        <p>This sentence has a code element: <code></code> inline with it.</p>
        <p>This paragragh contains text pertaining to the introduction.</p>
        <ul>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section class="main-section" id="What_you_should_already_know">
        <header>What you should already know</header>
        <p>This sentence has a code element: <code></code> inline with it.</p>
        <p>This paragragh contains text pertaining to the background info.</p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section class="main-section" id="JavaScript_and_Java">
        <header>JavaScript and Java</header>
        <p>This sentence has a code element: <code></code> inline with it.</p>
        <p>This paragragh contains text pertaining to JavaScript and Java.</p>
      </section>
      <section class="main-section" id="Hello_world">
        <header>Hello world</header>
        <p>This sentence has a code element: <code></code> inline with it.</p>
        <p>This paragragh contains text pertaining to creating a webpage.</p>
      </section>
      <section class="main-section" id="Variables">
        <header>Variables</header>
        <p>This sentence has a code element: <code></code> inline with it.</p>
        <p>This paragragh contains text pertaining to the variables.</p>
      </section>
    </main>
  
  </body>
</html>

/* file: styles.css */
header {
  font-size: 30px;
  font-family: sans-serif;
}
p {
  font-family: sans-serif;
}

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/18.5 Safari/605.1.15

Challenge Information:

Build a Technical Documentation Page - Build a Technical Documentation Page
https://www.freecodecamp.org/learn/full-stack-developer/lab-technical-documentation-page/build-a-technical-documentation-page

2

it is actually responding so there is no error in terms of your stylesheet link

you can test for eg by doing something like

* {
border: 1px solid red;
}

which will put a red border around everything

What was the code you tried that didn’t work? We need to see it.

3

Yes, that worked! Thank you so much. I think the reason that I couldn’t center the content via margin auto is because the body was already taking up the entire width on the viewport. Technically, it was already centered.

4

By the way, what does eg stand for? Ha.

5

“E.g.” stands for the Latin phrase “exempli gratia”, which translates to “for example” in English.

6

Thanks again!

I did already know that. I just thought that it might have had a different meaning as it pertained to writing code.