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 How to Make a Website HTML First Build Structure

Stephen Benson
Stephen Benson
366 Points
Posted by Stephen Benson
Stephen Benson
366 Points

Whenever I use the <!DOCTYPE html> tag it does not appear to be recognized in workspaces. The text isn't highlighting.

In later lessons, it appears not much is being recognized including my hyperlinks and images. Could this be the source of my problems?

9 Answers

Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points
Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points

I don't know what's going on, but for some reason I can't shape the profile picture in my Contact section for my website in my workspace. Here's the code I'm using:

.profile-pic { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

ALSO

For some reason, some of my main page pic.'s have bullet-points next to them, while others don't - I don't understand that, either...

Steven Minor
Steven Minor
4,015 Points
Steven Minor
Steven Minor
4,015 Points

Can you also post the bit of code from your HTML file as well, the part that has the class profile-pic in it would be great.

Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points
Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points

I don't know if this is what you mean, but here is my coding from my about/profile page:

<img src="img/341.jpg" alt="Photograph of A.B.W." class="Profile Photo">

Steven Minor
Steven Minor
4,015 Points
Steven Minor
Steven Minor
4,015 Points

You have the class as "Profile Photo" try changing the part that says class="Profile Photo" to class="profile-pic"

Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points
Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points

Hey, that worked - Thanks - Can you help me with my other problem though - The issue with the bullet-points? - Here's the code I'm working with:

#gallery { margin: 0; padding: 0; list-style: none; }

#gallery li { float: left; width: 45%; margin: 2.5%; background-color: #5b5b5b; color: #bdc3c7; }

#gallery li a p { margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

Steven Minor
Steven Minor
4,015 Points
Steven Minor
Steven Minor
4,015 Points

It would be best to post your own topic

Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points
Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points

Alright - I'll try that - Thank you...

Stephen Benson
Stephen Benson
366 Points
Stephen Benson
Stephen Benson
366 Points

Hey thanks! I didn't even think that browser could be the issue, but since I switched from Firefox to Chrome I haven't had any problems.

Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points
Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points

Glad it worked out for ya... cool/P :)

Stephen Benson
Stephen Benson
366 Points
Stephen Benson
Stephen Benson
366 Points

Thanks for the reply. Here is my code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Stephen Benson| Propagandist</title> </head> <body> <header> <a href="index.html"> <h1>Stephen Benson</h1> <h2>Propagandist</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <p>Gallery will go here.</p> </section> <footer> <p>© 2014 Stephen Benson.</p> </footer> </body> </html>

Stephen Benson
Stephen Benson
366 Points
Stephen Benson
Stephen Benson
366 Points

Ehh that didn't work out....what is the best way to show your code to everyone else in these forums?

Steven Minor
Steven Minor
4,015 Points
Steven Minor
Steven Minor
4,015 Points

Use the markdown

Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

Stephen Benson
Stephen Benson
366 Points
Stephen Benson
Stephen Benson
366 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Stephen Benson| Propagandist</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Stephen Benson</h1>
        <h2>Propagandist</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <p>Gallery will go here.</p>
    </section>
    <footer>
      <p>&copy; 2014 Stephen Benson.</p>
    </footer>
  </body>
</html>
Stephen Benson
Stephen Benson
366 Points
Stephen Benson
Stephen Benson
366 Points

When I run my code, the links that are labelled portfolio, about, and contact do not appear. Furthermore, the first link that encompasses <h1> and <h2> isn't working. I know there has to be something wrong but it appears to be mostly correct.

Steven Minor
Steven Minor
4,015 Points
Steven Minor
Steven Minor
4,015 Points

When I copy that into a workspace it is displaying just fine. You can see it here. http://web-8gnt6ow8o0.treehouse-app.com/

Can you post the link to your live version?

Stephen Benson
Stephen Benson
366 Points
Stephen Benson
Stephen Benson
366 Points

That's what I get when I click preview. Not sure what could be going wrong

Steven Minor
Steven Minor
4,015 Points
Steven Minor
Steven Minor
4,015 Points

It looks fine, I see all the links. I'm not sure why you aren't. Perhaps try another browser?