Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Michael Garcia
Michael Garcia
260 Points

How to Fix </ul> </body> </html> In Red?

https://w.trhou.se/emlhz6bzz6, I'm following along and can't seem to fix this code issue.

3 Answers

Indiya Gooch
Indiya Gooch
12,075 Points
Indiya Gooch
Indiya Gooch
12,075 Points

It just looks like your missing a opening tag, and a few closing tags! Otherwise looking good so far!

First, near 

<main class="flex">
      <div class="card">
        <h2 class="card-title">Background</h2>

you are missing a opening ul tag, as you have a closing tag but no opening before starting your list. Secondly, just before the closing body tag (after the closing footer tag) you are missing a few closing tags: 

</main>
      </div>
        </div>
      </main>

A great trick with Treehouse, is that if you think you maybe missing a closing tag (hence the red highlight) but are not sure what tag you're missing you can just type "</" before the red highlighted tag and Treehouse will automatically add the missing tag for you. You can continue to type this until it no longer auto adds tags.

Hope this helped!

Michael Garcia
Michael Garcia
260 Points
Michael Garcia
Michael Garcia
260 Points

Where does the opening tag go?

Carrie MacDonald
Carrie MacDonald
16,157 Points
Carrie MacDonald
Carrie MacDonald
16,157 Points

Hi Michael,

It looks like the missing opening <ul> tag should go here:

<h2 class="card-title">Background</h2>
         <!-- opening <ul> tag goes here -->
              <li>I'm an aspiring web developer.
Carrie MacDonald
Carrie MacDonald
16,157 Points
Carrie MacDonald
Carrie MacDonald
16,157 Points

I also went through a did a general HTML clean-up. Posting it here in case it's helpful:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Michael Garcia Profile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:image" content="https://unsplash.com/photos/pgSkeh0yl8o/">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav class="main-nav">
      <ul class="nav">
        <li class="name">Michael Garcia</li>
        <li><a href="#">Home</a></li>
        <li><a href="resume.html">Experience</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <header>
      <img src="images/me.png" alt="Drawing of Michael Garcia" class="profile-image">
      <h1 class="tag name">Michael Garcia</h1>
      <p class="tag location">My hometown is Newport News, Virginia.</p>
    </header>
    <main class="flex">
      <div class="card">
        <h2 class="card-title">Background</h2>
          <ul>
            <li>I'm an aspiring web developer. I am looking for a career change in the technology industry. I'm learning through Team Treehouse to get started. Freecodecamp, Udemy and other free sources to gain a skill and become a Software Engineer.</li>
            <li>I’ve been a working professional all my life with the willingness to learn and always interested in expanding my skills.</li>
            <li>I'm learning web development on my own time to eventually be a skill. Attending a boot camp with Nucamp in a month while doing Treehouse to learn the fundamentals.</li>
            <li>Fourth list item.</li>
        </ul>
        <h3>A New Subsection</h3>
      </div>
      <div class="card">
        <h2 class="card-title">Goals</h2>
        <p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
        <ul class="skills">
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>Ruby</li>
          <li>Rails</li>
        </ul>
        <p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>
      </div>
    </main>
    <footer>
      <ul>
        <li><a href="http://twitter.com/Garcia804VA" target="_blank" class="social twitter">Twitter</a></li>
        <li><a href="https://www.linkedin.com/in/michael--garcia/" class="social linkedin">https://www.linkedin.com/in/michael--garcia/</a></li>
        <li><a href="#" class="social github">Github</a></li>
      </ul>
      <p class="copyright">Copyright 2021, Michael Garcia</p>
    </footer>
  </body>
</html>

Edits I made

General HTML

  • indentation and spacing
  • used the semantic <nav> element instead of a <div> for the main nav
  • made sure each: <div class="card"> had a closing </div> tag
  • made sure the list items (<li> elements) were wrapped by <ul></ul> tags
  • put a closing </main> tag after the second card </div>
  • in the footer, copied the LinkedIn URL into the href="" (replacing the # placeholder)
  • removed the link href with a path that's a combination of an image URL and what looks like a Google Font Family import (Roboto): <link href=https://unsplash.com/photos/pgSkeh0yl8o/css?family/Muli%7CRoboto:400,300,500,700,900 rel="stylesheet">

Roboto font <head> import

  • looked through your styles.css file and saw that you want to use the Roboto font family
  • went to Google's Roboto font family selection page (https://fonts.google.com/specimenTab?standard-styles) and selected the styles: Light 300, Regular 400, Medium 500, Bold 700, and Black 900
  • in that page's "Selected Family" sidebar (toggled open by an icon in the upper-right corner of the screen), I scrolled down to: "Use on the web", with the "link" option selected, I copied this code to place into the <head> of your HTML <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">

Open Graph Image Setting

  • guessed that you might have wanted to use the Unsplash image for your page's "open graph" site preview image (the image that shows when you share a link to your site)
  • used this meta data HTML to set the image: <meta property="og:image" content="https://unsplash.com/photos/pgSkeh0yl8o/">