The first element within each .main-section should be a header element, which contains text that describes the topic of that section.

HTML-CSS
1

My header tag under each section with the class of main-section doesn’t pass…I don’t know what’s wrong…pls help me out

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8"></meta>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
   <title>Technical Documentation Page</title>
   <link rel="stylesheet" href="styles.css"></link>
</head>
<body>
 <main id="main-doc">
   <nav id="navbar">
     <header>PROGRAMMING USING 
       <a class="nav-link" href="#HTML_Properties">HTML Properties<a/>, 
       <a class="nav-link" href="#CSS_Properties">CSS Properties</a>, 
       <a class="nav-link" href="#JAVASCRIPT_Properties">JAVASCRIPT Properties</a>, 
       <a class="nav-link" href="#BOOTSTRAP_Properties">BOOTSTRAP Properties</a> AND 
       <a class="nav-link" href="#FIGMA_Properties">FIGMA Properties</a>
       </header>
       </nav>
 
<section class="main-section" id="HTML_Properties"><header>HTML Properties</header>  
       <article class="paragraph" ><p><i><a href="#HTML_Properties">HTML</a></i> stands for <strong>Hyper Text Markup Language</strong>, it is the standard markup language for creating Web pages and it describes the structure of a Web page.</p>
       <code></code>
       <p><i>HTML</i> consists of a series of elements which tells the browser how to display the content, these elements label pieces of content such as: <br>"this is a heading", "this is a paragraph", "this is a link", etc. e.g.</p>
       <ul>
         <li>HTML paragraph property</li>
       </ul>
       </article>
</section>
 
<section class="main-section" id="CSS_Properties"><header>CSS Properties</header>
       <article class="paragraph" ><p><i><a href="#CSS_Properties">CSS<a/></i> is the language we use to style an HTML document. It describes how HTML elements should be displayed.</p>
       <code></code>
       <p><i>CSS</i> stands for <strong>Casscading Style Sheet</strong> CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files. e.g.</p>
       <ul>
         <li>CSS height/width property</li>
       </ul>
       </article>
</section>
     
<section class="main-section" id="JAVASCRIPT_Properties"><header>JAVASCRIPT Properties</header>
       <article class="paragraph"><p><i><a href="#JAVASCRIPT_Properties" >JavaScript</a></i> is the world's most popular programming language.It is the programming language of the Web.</p>
       <code></code>
       <p>JavaScript is easy to learn. e.g</p>
       <ul>
         <li>getElementById() property</li>
       </ul>
       </article>
</section>
     
<section class="main-section" id="BOOTSTRAP_Properties"><header>BOOTSTRAP Properties</header>
       <article class="paragraph"><p><i><a href="#BOOTSTRAP_Properties">Bootstrap 5</a></i> is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites.</p>
       <code></code>
       <p>Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs.</p>
       <ul>
         <li>BS5 Grid</li>
       </ul>
       </article>
</section>
    
<section class="main-section" id="FIGMA_Properties"><header>FIGMA Properties</header>
       <article class="paragraph"><p><i><a href="#FIGMA_Properties">Figma</a></i> is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows.</p>
       <code></code>
       <p>The Figma mobile app for Android and iOS allow viewing and interacting with Figma prototypes in real-time mobile devices</p>
       <ul>
         <li>Variant Property</li>
       </ul>
       </article>
</section>
       
     </main>
   </body>
   </html>

/* file: styles.css */
@media (max-width: 1196) {
 #navbar{
   float: left;
 }
}
.main-section:first-child{
 color: yellow;
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Linux; Android 8.1.0; Infinix X650) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Mobile Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

Hey Calista, welcome to the forum.

Please tell us, what issue you are having in Tell us what’s happening: section.

3

My header tag under the class of main section is marked wrong…and I don’t know what’s wrong

4

I think you may have found a bug, if I am not misunderstanding something.

<a href="#CSS_Properties">CSS<a/>

In #CSS_Properties section, the a anchor position is misread, which lead to your code not passing.

Deleting it made the test pass, but you need to account for adding it somewhere else for you to pass the project.

Edit: you don’t have to account for adding it, I deleted <code> while testing.
Deleting the said line will make your code pass

5

Thank you …it worked!

6

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