Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

I don’t understand how to code the page into the two individual sections, with the slider bar (or how to add the slider) on the left and the tabs opening up on the right when the buttons have been clicked. Any advice is appreciated.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<main id="main-doc">
  <title>JS Technical Documentation</title>
  <meta charset="utf-8">
  <meta class="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">

  <section class="main-section-header" id="js_documentation"><header id="title">JS Documentation</header></section>

  <section class="main-section" id="introduction">
<header><p><code>Introduction</code></p></header></section>

  <section class="main-section" id="what_you_should_already_know">
  <header><p><code>What You Should Already Know</code><p></header></section>

  <section class="main-section" id="javascript_and_java">
<header><p><code>Javascript and Java</<code></p></header></section>

  <section class="main-section" id="hello_world"> <header><p><code>Hello World</code></p></header></section>

 <section class="main-section" id="variables"><header><p><code>Variables<code></p></header></section>
  
 <section class="main-section" id="variable_scope"><header><p><code>Variable Scope</code></p></header></section>

 <section class="main-section" id="global_variables"><header><p><code>Global Variables</code></p></header></section>

<section class="main-section" id="constants"><header><p><code>Constants</code></p></header></section>

 <section class="main-section" id="data_types"><header><p><code>Data Types</code></p></header></section>

 <section class="main-section" id="if..._else_statement"><header><p><code>If... Else Statement</code></p></header></section>

 <section class="main-section" id="while_statement"><header><p><code>while Statement</code></p></header></section>

 <section class="main-section" id="function_declarations"><header><p><code>Function Declarations</code></p></header></section>

 <section class="main-section" id="Reference"><header><p><code>Reference</code></p></header></section>

</section>
</main>
</html>

/* file: styles.css */
code {position: inline;
width: 35%;
height: 100%;
}

section{background-color: white

}
.main-section {padding: 10px;
padding-bottom: 30px;
padding-top: 30px;
width: 30%;border-top: 1px solid;

text-align: center;
}
.main-section-header {padding: 10px;
padding-bottom: 30px;
padding-top: 30px;
width: 30%;
text-align: center;
}


  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

image
image1366×768 152 KB

As shown i have managed to build the navbar with links to new pages, but i feel like i’v gone wrong in the way iv gone about it since there is an error “you should only have exactly one header element within the nav bar”. and im not sure how i go about spliting up the page to have the navbar on the left and the pages open up to the right. could really use some advice on when im going wrong here.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<main id="main-doc">
  <title>JS Technical Documentation</title>
  <meta charset="utf-8">
  <meta class="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">

  <nav id="navbar">
    <header id="title"><section class="main-section-header" id="js_documentation">JS Documentation</section></header>
   
  <a class="nav-link" href="introduction"><section class="main-section" id="introduction">
<header><p><code>Introduction</code></p></header>
  </section></a>
    
  

  <a class="nav-link" href="what you should know"><section class="main-section" id="what_you_should_already_know"> <header><p><code>What You Should Already Know</code><p></header>
  </section></a>

  <a class="nav-link" href="javascript and java"><section class="main-section" id="javascript_and_java"><header><p><code>Javascript and Java</<code></p></header>
  </section></a>

  <a class="nav-link" href="hello world"><section class="main-section" id="hello_world">
<header><p><code>Hello World</code></p></header>
  </section>

 <a class="nav-link" href="variables"><section class="main-section" id="variables">
<header><p><code>Variables<code></p></header>
 </section></a>
  
 <a class="nav-link" href="variable scope"><section class="main-section" id="variable_scope">
<header><p><code>Variable Scope</code></p></header>
 </section></a>

 <a class="nav-link" href="global variables"><section class="main-section" id="global_variables">
<header><p><code>Global Variables</code></p></header>
 </section></a>

 <a class="nav-link" href="constants"><section class="main-section" id="constants">
<header><p><code>Constants</code></p></header>
 </section></a>

 <a class="nav-link" href="data types"><section class="main-section" id="data_types">
<header><p><code>Data Types</code></p></header>
 </section></a>

 <a class="nav-link" href="if...else statements"><section class="main-section" id="if..._else_statement">
<header><p><code>If... Else Statement</code></p></header>
 </section></a>

 <a class="nav-link" href="while statement"><section class="main-section" id="while_statement">
<header><p><code>while Statement</code></p></header>
 </section></a>

 <a class="nav-link" href="function declarations"><section class="main-section" id="function_declarations">
<header><p><code>Function Declarations</code></p></header>
 </section></a>

 <a class="nav-link" href="reference"><section class="main-section" id="Reference">
<header><p><code>Reference</code></p></header>
 </section></a>
</nav>
</section>
</main>
</html>

/* file: styles.css */
code {position: inline;
width: 35%;
height: 100%;
}

section{background-color: white

}
.main-section {padding: 10px;
padding-bottom: 30px;
padding-top: 30px;
width: 30%;border-top: 1px solid;

text-align: center;
}
.main-section-header {padding: 10px;
padding-bottom: 30px;
padding-top: 30px;
width: 30%;
text-align: center;
}


  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

4

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