Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

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

Your code so far

<!-- 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;
        }
	

/* 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:

2 
<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.

3

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