Tell us what’s happening:
The first child of each .main-section should be a header element.
Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s.
Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).
i am stuck in this three tests already done what can i do
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HTML Document</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<nav id="navbar">
<header>HTML Documentaion</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#What's_in_the_head?">What's in the head?<a>
<a class="nav-link" href="#Creating_hyperlinks">Creating hyperlinks</a>
<a class="nav-link" href="#Html_Table">Html Table</a>
<a class="nav-link" href="#Reference">Reference</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>At its heart, HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.</p>
<p>HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The <code>enclosing tags</code> can make content into a hyperlink to connect to another page, italicize words, and so on.</p>
<ul>
<h4>The anatomy of our element is:</h3>
<li><b>The opening tag:</b> This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. This <code>opening tag</code> marks where the element begins or starts to take effect. In this example, it precedes the start of the paragraph text.</li>
<li><b>The content:</b> This is the content of the element. In this example, it is the paragraph text.</li>
<li><b>The closing tag:</b> This is the same as the opening tag, except that it includes a forward slash before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can produce peculiar results.</li>
<p><b>Nesting Elements:</b>Elements can be placed within other elements. This is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word very in a <code>strong</code> element, which means that the word is to have strong(er) text formatting:
html
Copy to Clipboard
<p>My cat is <strong>very</strong> grumpy.</p>
There is a right and wrong way to do nesting. In the example above, we opened the p element first, then opened the strong element. For proper nesting, we should close the <code>strong</code> element first, before closing the p.</p>
</ul>
</section>
<section class="main-section" id="What's_in_the_head?">
<header>What's in the head?</header>
<p>The HTML head is the contents of the <head> element. Unlike the contents of the <body> element (which are displayed on the page when loaded in a browser), the <code>head's</code> content is not displayed on the page. Instead, the head's job is to contain metadata about the document.</p>
<ul>
<li><b>Adding a Title:</b>We've already seen the title element in action this can be used to add a title to the document. This however can get confused with the h1 element, which is used to add a top level heading to your body content this is also sometimes referred to as the page title. But they are different things!
<ul>
<li>The h1 element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.)</li>
<li>The title element is metadata that represents the title of the overall HTML document (not the document's content.)</li>
</ul>
</li>
<li><b>Metadata:the meta element:</b>Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the meta element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of meta elements that can be included in your page's head, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.</li>
<li><b>Adding an author and description:</b>Many <meta> elements include name and content attributes:
<ul>
<li>name specifies the type of meta element it is; what type of information it contains.</li>
<li>content specifies the actual meta content.</li>
</ul>
Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page
</li>
</ul>
</section>
<section class="main-section" id="Creating_hyperlinks">
<header>Creating hyperlinks</header>
<p>Hyperlinks are one of the most exciting innovations the Web has to offer. They've been a feature of the Web since the beginning, and are what makes the Web a web. Hyperlinks allow us to link documents to other documents or resources, link to specific parts of documents, or make apps available at a web address. Almost any web content can be converted to a link so that when clicked or otherwise activated the web browser goes to another web address <code>(URL)</code>
</p>
<ul>
<h3>Anatomy of link</h3>
<li>A basic link is created by wrapping the text or other content inside an <code>a</code> element and using the href attribute, also known as a Hypertext Reference, or target, that contains the web address.</li>
<li><b>Block level link:</b>As mentioned before, almost any content can be made into a link, even block-level elements. If you want to make a heading element a link then wrap it in an anchor <code>(a)</code> element </li>
<li><b>Image Link:</b>If you have an image you want to make into a link, use the <a> element to wrap the image file referenced with the <img> element. </li>
</ul>
</section>
<section class="main-section" id="Html_Table">
<header>Html Table</header>
<p>A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.</p>
<p>A table is a structured set of data made up of rows and columns (tabular data). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.</p>
<p><b>Table Styling:</b>You can also have a look at the live example on GitHub! One thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the GitHub version has more significant CSS applied.</p>
<p><b>Adding a Caption to your Table:</b>You can give your table a caption by putting it inside a <caption> element and nesting that inside the <table> element. You should put it just below the opening <table> tag.</p>
<p><b>Adding Structure with thead, tbody, tfoot:</b>As your tables get a bit more complex in structure, it is useful to give them more structural definition. One clear way to do this is by using <thead>, <tbody>, and <tfoot>, which allow you to mark up a header, body, and footer section for the table.</p>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<ul>
<li> All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide"
target="_blank">MDN</a></li>
</ul>
</section>
</main>
</body>
</html>
#navbar
{
position: fixed;
left:0;
padding:20px;
}
#navbar header{
font-size:1.25em;
margin-bottom: 7px;
}
#navbar a{
display: block;
margin-bottom: 12px;
text-decoration:none;
}
#main-doc{
margin-left: 200px;
}
@media (max-width: 600px) {
.main-section{
font-size: .8em;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page