Tell us what’s happening:
ive tried to match the main section with the id but its still not working
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<title>Technical Documentation Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-doc">
<div class="left">
<nav id="navbar">
<header class="center">
<h1>HTML Documentation</h1>
</header>
<ul>
<li class="border-top"><a class="nav-link" href="#introduction">Introduction</a></li>
<li class="border"><a class="nav-link" href="#getting_started">Getting Started</a></li>
<li class="border"><a class="nav-link" href="#html_and_css">HTML & CSS</a></li>
<li class="border"><a class="nav-link" href="#html_basics">HTML Basics</a></li>
<li class="border"><a class="nav-link" href="#html_paragraphs">HTML Paragraphs</a></li>
<li class="border"><a class="nav-link" href="#html_headings">HTML Headings</a></li>
</ul>
</nav>
</div>
<div class="right">
<section id="introduction" class='main-section'>
<header>
<h2>Introduction</h2>
</header>
<p>Welcome to the HTML basics web page, where you can easily learn the fundamentals of HTML and how it works with CSS to style your page.</p>
<ul>
<li>Are you frustrated with copying and pasting HTML code from others without truly understanding it?</li>
</ul>
</section>
<section id="getting_started" class="main-section">
<header>
<h2>Getting Started</h2>
</header>
<p>HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web.</p>
<p>HTML is a markup language, not a programming language, meaning it annotates text to define how it is structured and displayed by web browsers. It forms the building blocks of all websites and is complemented by CSS for style and JavaScript for interactivity.</p>
</section>
<section id="html_and_css" class="main-section">
<header>
<h2>HTML & CSS</h2>
</header>
<p>HTML and CSS are two languages that work together to create everything you see when you look at something on the internet. HTML is the raw data that a webpage is built from, while CSS adds style to those elements.</p>
<p>HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it visually appealing!</p>
<p>HTML Example:</p>
<div class="codebox small">
<pre><code><p>I am using HTML</p></code></pre>
</div>
<p>CSS Example:</p>
<div class="codebox small">
<pre><code>p { color: blue; }</code></pre>
</div>
<p>This will turn the text of the <code><p></code> element blue.</p>
</section>
<section id="html_basics" class="main-section">
<header>
<h2>HTML Basics</h2>
</header>
<p>Open and closing tags:</p>
<ul>
<li>HTML tags should surround an element to define its purpose.</li>
</ul>
<p>For example:</p>
<div class="codebox small">
<pre><code><p>This is a paragraph</p></code></pre>
</div>
</section>
<section id="html_paragraphs" class="main-section">
<header>
<h2>HTML Paragraphs</h2>
</header>
<p>As mentioned before, this element comes underneath a header element.</p>
<p>For example:</p>
<div class="codebox small">
<pre><code><p>This is my first paragraph</p></code></pre>
</div>
<p>This will output: This is my first paragraph.</p>
</section>
<section id="html_headings" class="main-section">
<header>
<h2>HTML Headings</h2>
</header>
<p>Heading elements are usually used for the title of the page as well as for sections on the page.</p>
<p>For example:</p>
<div class="codebox small">
<pre><code><h1>This is my first heading</h1></code></pre>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</section>
</div>
</main>
</body>
</html>
<!-- file: index.html --> <!DOCTYPE html>
<html lang="en">
<head>
<title>Technical Documentation Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-doc">
<div class="left">
<nav id="navbar">
<header class="center">
<h1>HTML Documentation</h1>
</header>
<ul>
<li class="border-top"><a class="nav-link" href="#introduction">Introduction</a></li>
<li class="border"><a class="nav-link" href="#getting_started">Getting Started</a></li>
<li class="border"><a class="nav-link" href="#html_and_css">HTML & CSS</a></li>
<li class="border"><a class="nav-link" href="#html_basics">HTML Basics</a></li>
<li class="border"><a class="nav-link" href="#html_paragraphs">HTML Paragraphs</a></li>
<li class="border"><a class="nav-link" href="#html_headings">HTML Headings</a></li>
</ul>
</nav>
</div>
<div class="right">
<section id="introduction" class='main-section'>
<header>
<h2>Introduction</h2>
</header>
<p>Welcome to the HTML basics web page, where you can easily learn the fundamentals of HTML and how it works with CSS to style your page.</p>
<ul>
<li>Are you frustrated with copying and pasting HTML code from others without truly understanding it?</li>
</ul>
</section>
<section id="getting_started" class="main-section">
<header>
<h2>Getting Started</h2>
</header>
<p>HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web.</p>
<p>HTML is a markup language, not a programming language, meaning it annotates text to define how it is structured and displayed by web browsers. It forms the building blocks of all websites and is complemented by CSS for style and JavaScript for interactivity.</p>
</section>
<section id="html_and_css" class="main-section">
<header>
<h2>HTML & CSS</h2>
</header>
<p>HTML and CSS are two languages that work together to create everything you see when you look at something on the internet. HTML is the raw data that a webpage is built from, while CSS adds style to those elements.</p>
<p>HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it visually appealing!</p>
<p>HTML Example:</p>
<div class="codebox small">
<pre><code><p>I am using HTML</p></code></pre>
</div>
<p>CSS Example:</p>
<div class="codebox small">
<pre><code>p { color: blue; }</code></pre>
</div>
<p>This will turn the text of the <code><p></code> element blue.</p>
</section>
<section id="html_basics" class="main-section">
<header>
<h2>HTML Basics</h2>
</header>
<p>Open and closing tags:</p>
<ul>
<li>HTML tags should surround an element to define its purpose.</li>
</ul>
<p>For example:</p>
<div class="codebox small">
<pre><code><p>This is a paragraph</p></code></pre>
</div>
</section>
<section id="html_paragraphs" class="main-section">
<header>
<h2>HTML Paragraphs</h2>
</header>
<p>As mentioned before, this element comes underneath a header element.</p>
<p>For example:</p>
<div class="codebox small">
<pre><code><p>This is my first paragraph</p></code></pre>
</div>
<p>This will output: This is my first paragraph.</p>
</section>
<section id="html_headings" class="main-section">
<header>
<h2>HTML Headings</h2>
</header>
<p>Heading elements are usually used for the title of the page as well as for sections on the page.</p>
<p>For example:</p>
<div class="codebox small">
<pre><code><h1>This is my first heading</h1></code></pre>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</section>
</div>
</main>
</body>
</html>
/* 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/135.0.0.0 Safari/537.36 Edg/135.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page