HTML HTML Basics Structuring Your Content Structuring Content Challenge

Susma Gurung
Susma Gurung
Front End Web Development Techdegree Student 421 Points

I do not understand how I can implement the elements on the introductory content. Help pls

I am struggling to complete this task as I can not see how I can implement all the three elements on the introductory content.

index.html
<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <h1>
      <ul>
        <title><li>My Portfolio</li></title>
      </ul>
    </h1>
  </head>
  <body>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>            
    </ul>
    <h1>My Web Design &amp; Development Portfolio!</h1> 
    <p>A site featuring my latest work.</p>

    <h2>Welcome</h2> 
    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
    <ul>
      <li><a href="#">Recent project #1</a></li>
      <li><a href="#">Recent project #2</a></li>
      <li><a href="#">Recent project #3</a></li>     
    </ul>

    <p>&copy; 2017 My Portfolio</p>
    <p>Follow me on <a href="#">Twitter</a>, <a href="#">Instagram</a> and <a href="#">Dribbble</a></p>
  </body>
</html>

2 Answers

Jamie Reardon
Jamie Reardon
Front End Web Development Techdegree Student 8,415 Points

Hi, place the elements inside a header element like so:

<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Portfolio</title>
  </head>
  <body>
    <header>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>            
      </ul>
      <h1>My Web Design &amp; Development Portfolio!</h1> 
      <p>A site featuring my latest work. 
      </p>
    </header>

    <h2>Welcome</h2> 
    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
    <ul>
      <li><a href="#">Recent project #1</a></li>
      <li><a href="#">Recent project #2</a></li>
      <li><a href="#">Recent project #3</a></li>     
    </ul>

    <p>&copy; 2017 My Portfolio</p>
    <p>Follow me on <a href="#">Twitter</a>, <a href="#">Instagram</a> and <a href="#">Dribbble</a></p>
  </body>
</html>

The header element is considered use for the introductory content of your page, as it holds a title for the page, possibly some extra information about it like a slogan, and a navigation menu.

Also, in your code I noticed you had some body elements like ul and li tags in your head section of the document, please don't do this as the head section is used for background purposes only and is not visible to users. The body element is where you will hold the content of your site which will be visible to everyone. Therefore, that is where you should use those tags.