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!

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 Jack Bridger
Jack Bridger
163 Points

Cannot preview work

Hi,

I saved my Sublime Text file in Documents and tried to open it into Google Chrome like on the video but the page was blank. I can't work out why it doesn't appear like in the video.

Below is my code.

Thanks, Jack

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type"-content="text/html; charset=utf-8"/>
<title> Jack Bridger </title>
<link rel ="stylesheet" href="css/normalize.css" type="text/css" media="screen">
</head>
<body>
    <img src = "http://qph.is.quoracdn.net/main-thumb-4649923-200-59xusVZHWVOnaheN3H8gaGgzg3WUn7kp.jpeg" alt="Jack Bridger">
    <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Location</a></li>
        <li class="last"><a href="#">Contact me</a></li>
    </ul>
    <div id ="intro">
        <h1>I am a 21 year old Student/aspiring Entrepreneur<h1>
            <p><a href="#" class="btn">Check out my projects</a></p>
    </div>

    <img src="http://user.photos.s3.amazonaws.com/user_43368.jpg" alt ="Jack Bridger">

    <div id= "Yappie">
        <h2>Yappie</h2>
        <p>Yappie is a new social network launching in <a href ="#">August</a></p>
        <img src ="http://www.justgiving.com/Utils/imaging.ashx?width=200&height=200&square=200&imageType=frpphoto&img=12011%2F25a82b52-f151-45aa-b4fe-991b2eb23bce.jpg" alt = "Jack Bridger"
    </div>

    <div id="LSE Entrepreneurs">
        <h2>LSE Entrepreneurs</h2>
        <p>Next year I will be President of <a href ="www.lse-entrepreneurs.org">LSE Entrepreneurs Society</a></p>
        <img src ="http://i.telegraph.co.uk/multimedia/archive/02520/LSE-Sparks_2520237b.jpg">
    </div>

    <h2>Other projects</h2>
    <p>I am also working on this personal blog. Everything on here was coded by me so it is not the best site. If you find any errors please email j.bridger@lse.ac.uk and I will try to fix them.</p>
    <p><a href ="#" class = "btn-small">Read More</a></p>

    <h2>Contact me</h2>

    <div id="contact">
        <p>Call me: <span>07414981140</span><br>
        Email me:<a href="#">j.bridger@lse.ac.uk</a></p>
    </div>

    <p>Follow my updates on Twitter/Facebook</p>
    <a href ="www.facebook.com/whatsyappening"><img src="http://yappie.com/images/icon-fb.png" alt = Facebook></a>
    <a href ="www.twitter.com/whatsyappening"><img src="http://yappie.com/images/icon-twitter.png" alt = Twitter></a>

    <div id="copyright">
        <p>&copy; 2013 Jack Bridger. All rights reserved.</p>
    </div>


</body>
</html>

4 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Your doctype is incomplete (as previously mentioned by paul murphy ), which is probably the reason the page didn't render at all.

There are a few other issues with it:

  • You didn't correctly close your h1 tag
  • You forgot to the closing > on your img tag
  • Have you unescaped ampersands, replace any instances of & with &amp; in your URLs
  • You have an id attribute with a space in it

Check out the W3C's HTML5 validator if you need help finding these issues in your code

Jonathan Rawlins
Jonathan Rawlins
13,998 Points

James, can you correct this please as it was Paul Murphy that first pointed out the Doctype issue. Many thanks

Jack Bridger
Jack Bridger
163 Points

THANK YOU SO MUCH GUYS

It rendered - feels so awesome to see something work for the first time!

Thank you again!!!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Jonathan Rawlins -

can you correct this please as it was Paul Murphy that first pointed out the Doctype issue.

Fixed

Jonathan Rawlins
Jonathan Rawlins
13,998 Points

Thanks James, credit where credit is due Paul posted it first :)

Paul Murphy
Paul Murphy
6,162 Points
Paul Murphy
Paul Murphy
6,162 Points

Couple of things i've noticed straight away Jack in your document deceleration you need to put <!DOCTYPE html> You also need a title tag and a nav element for your links. Hope this helps

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

you need to put <!DOCTYPE html>

Good catch

You also need a title tag and a nav element for your links.

He has a title tag and an ul tag is perfectly acceptable way to list links for navigation

Jonathan Rawlins
Jonathan Rawlins
13,998 Points

Looks like some of the code wasn't showing previously. Obvious now that the doctype was wrong. Agree on the use of ul elements being an acceptable way of doing the navigation.

Paul Murphy
Paul Murphy
6,162 Points
Paul Murphy
Paul Murphy
6,162 Points

Ah the title tag was not appearing when I wrote my initial reply..... I doff my cap to the more experienced on the navigation elements..

Jack Bridger
Jack Bridger
163 Points

Thanks guys,some of the code automatically changed to categories (it wasn't as it appears on sublime text) wasn't sure how to stop this happening! And thanks, do I need to change the navigation?

Jack Bridger
Jack Bridger
163 Points
Jack Bridger
Jack Bridger
163 Points

For some reason it has just pasted in the categories and missed out the whole top section of code

Jonathan Rawlins
Jonathan Rawlins
13,998 Points
Jonathan Rawlins
Jonathan Rawlins
13,998 Points

Sounds stupid but did you saved it as a .html file? Or do you have a web server setup (mamp, wamp or others) on your local machine?

Jack Bridger
Jack Bridger
163 Points

I saved it as index.html

Jack Bridger
Jack Bridger
163 Points

And thank you :)

Jonathan Rawlins
Jonathan Rawlins
13,998 Points

You are welcome, as it's an easy mistake you made (glad you didn't make it). I made the same mistake many years ago when I was starting out. Easily done :)

Jonathan Rawlins
Jonathan Rawlins
13,998 Points

mistake you made = mistake to make (typo heaven today)