# Technical Documentation Page - Build a Technical Documentation Page

**URL:** <https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/599441>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [March 20, 2023, 3:33am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/599441 "2023-03-20T03:33:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ishapkohale](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ishapkohale/32/301702_2.png) [@ishapkohale](https://forum.freecodecamp.org/u/ishapkohale)\
**Post date:** [March 20, 2023, 3:33am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/599441/1 "2023-03-20T03:33:41Z")

</div>

**Tell us what’s happening:**  
Describe your issue in detail here.

**Your code so far**

```html
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
	<title>Technical Documentation</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<nav id="navbar">
		<header>Technical Documentation</header>
		<a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
		<a class="nav-link" href="#Variables">Variables</a>
		<a class="nav-link" href="#Operators">Operators</a>
		<a class="nav-link" href="#Functions">Functions</a>
		<a class="nav-link" href="#Objects">Objects</a>
	</nav>
	<main id="main-doc">
		<section class="main-section" id="JavaScript_and_Java">
			<header>JavaScript and Java</header>
			<p>JavaScript and Java are completely different languages, both in concept and design.</p>
			<p>...</p>
			<code>JavaScript syntax:</code>
			<pre><code>function sayHello(name) {
  console.log("Hello, " + name);
}</code></pre>
			<ul>
				<li>JavaScript is interpreted</li>
				<li>...</li>
			</ul>
		</section>
		<section class="main-section" id="Variables">
			<header>Variables</header>
			<p>In JavaScript, variables are containers for storing data values.</p>
			<p>...</p>
			<code>Declaring Variables:</code>
			<pre><code>var x = 5;
var y = 6;
var z = x + y;</code></pre>
			<ul>
				<li>JavaScript variables are case sensitive.</li>
				<li>...</li>
			</ul>
		</section>
		<section class="main-section" id="Operators">
			<header>Operators</header>
			<p>JavaScript has the following types of operators:</p>
			<ul>
				<li>...</li>
			</ul>
			<p>...</p>
			<code>Comparison Operators:</code>
			<pre><code>var x = 5;
var y = 6;
console.log(x == y);</code></pre>
		</section>
		<section class="main-section" id="Functions">
			<header>Functions</header>
			<p>A function is a block of code designed to perform a particular task.</p>
			<p>...</p>
			<code>Function Declaration:</code>
			<pre><code>function myFunction(p1, p2) {
  return p1 * p2;
}</code></pre>
			<ul>
				<li>...</li>
			</ul>
		</section>
		<section class="main-section" id="Objects">
			<header>Objects</header>
			<p>An object is a collection of properties, and a property is an association between a name (or key) and a value.</p>
			<p>...</p>
			<code>Creating Objects:</code>
			<pre><code>var person = {
  firstName: "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};</code></pre>
			<ul>
  @media(max-width: 767px) {
        body {
          font-size: 14px;
          line-height: 1.3;
        }
	

```

```css
/* file: styles.css */

```

**Your browser information:**

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

**Challenge:** Technical Documentation Page - Build a Technical Documentation Page

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [March 20, 2023, 3:37am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/599441/2 "2023-03-20T03:37:06Z")

</div>

```auto
<link rel="stylesheet" type="text/css" href="style.css">

```

It’s `styles.css`. And then you need to add a media query in the stylesheet.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [September 18, 2023, 3:37pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/599441/3 "2023-09-18T15:37:56Z")

</div>

Closed on September 18, 2023, 3:37pm UTC

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