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 Creating HTML Content Build the Footer

Bee Priola
Bee Priola
3,922 Points
Posted by Bee Priola
Bee Priola
3,922 Points

#html my page won't show the result of the webpage

I'm trying to create a new workplace but web page doesn't show the result in a preview. How do I fix this problem? thank you

<!DOCTYPE html> <html>

<head> <meta charset = "UTF-8">

<title>Bee Priola | Web designer/Chef</title>

</head>

<body> <header> <a href= "index.html"> <h1>Bee Priola</h1> <h2>Web Designer/Chef</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>
  <ul>
    <li>
      <a href = "img/img_2779.jpg">
        <img src ="img/img_2779.jpg" alt="">
        <p>Organic Raw Recipes.</p>
      </a>
    </li>
    <li><a href = "img/img_1401.jpg">
        <img src ="img/img_1401.jpg" alt="">
        <p>Warm Fresh Bread Recipes.</p>
      </a>
    </li>
    <li><a href = "img/img_0860.jpg">
        <img src ="img/img_0860.jpg" alt="">
       <p>Homemade Dessert Recipes.</p>
      </a>
    </li>
    <li><a href = "img/img_3118.jpg">
        <img src ="img/img_3118.jpg" alt="">
       <p>Main Course.</p>
      </a>
    </li>
    <li><a href = "img/img_0017.jpg">
        <img src ="img/img_0017.jpg" alt="">
       <p>Asian Cuisine Recipes.</p>
      </a>
    </li>

  </ul>
</section>

</body>

<footer> <a href = "http://twitter.com/saszybee"><img src= "img/twitter-wrap.png" alt= "Twitter logo"></a> <a href = "http://facebook.com/phannawadeepriola"><img src= "img/facebook-wrap.png" alt= "Facebook logo"></a> <p>© 2017 Bee Priola.</p> </footer>

</html>

4 Answers

Kirill Kayashov
Kirill Kayashov
7,497 Points
Kirill Kayashov
Kirill Kayashov
7,497 Points

Hi Bee! Looks like you put footer element outside of the body tag. All user-visible content should be inside the body . your piece code:

</body>

<footer> <a href = ...

what should be: 

..."Facebook logo"></a> <p>© 2017 Bee Priola.</p>
    </footer>
</body>
</html>

P.S. Sorry for my poor english.

Bee Priola
Bee Priola
3,922 Points
Bee Priola
Bee Priola
3,922 Points

thank you for your replied, after I added footer inside </body> and </html> , it still doesn't work.

Kirill Kayashov
Kirill Kayashov
7,497 Points
Kirill Kayashov
Kirill Kayashov
7,497 Points
  1. first, make sure you placed all this code inside file index.html
  2. make sure you save your index.html after all changes, and this not have orange circle in the tab title here my screenshoot

i paste all your code in my workplace in new index.html file save it and push preview button, here is my result

P.S. if this does not help, make sure your code not contain any syntax error in online cheker

Bee Priola
Bee Priola
3,922 Points
Bee Priola
Bee Priola
3,922 Points

/************************************************************************************************* GENERAL *************************************************************************************************/

body{ font-family: 'Questrial', sans-serif; }

wrapper {

max-width: 940px; margin:0 auto; padding: 0 5%;

}

a { text-decoration: none;

}

/************************************************************************************************* HEADING *************************************************************************************************/

logo {

text-align: center; margin: 0%;

}

h1 { font-family: 'Rokkitt', serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em;

}

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; text-align: center;

}

img {max-width: 100%;}

/************************************************************************************************* NAVIGATION *************************************************************************************************/

nav{ text-align: center; padding: 10px 0; margin: 20px 0 0; }

/************************************************************************************************* FOOTER *************************************************************************************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

/************************************************************************************************* PAGE : PORTFOLIO *************************************************************************************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li{

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7;

}

gallery li a p {

margin: 0;
padding: 5%;
color: #bdc3c7;
font-size: 0.75em;

}

/************************************************************************************************* COLOR *************************************************************************************************/

/site body/

body { background-color: #fff; color: #999;

}

/Green Header/ header { border-color: #599a86; background-color: #6bab47;

}

/logo text/ h1,h2 { color: #fff;

}

/links/ a { color: #6ab47b;

}

/nav backgornd mobile/

nav { background-color: #599a68;

}

/** nav link**/

nav a, nav a:visited { color: #fff; }

/selected nav link/ nav a.selected, nav a:hover { color: #32673f; }

Kirill Kayashov
Kirill Kayashov
7,497 Points
Kirill Kayashov
Kirill Kayashov
7,497 Points

Oh, now i see better. You missed asteriks in css comment. your code:

/site body/

what how could be 

/*site body*/

and Green Header and /links/ and so on. All css comment start with /* and cancel by */ symbols. I advice you check your html and css like all new coders in online checker html check and css check