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
Lucas Johnson
2,761 PointsWhen I preview my page, I get a page with a few indexes. I can't see where I might have gone wrong with my code either.
I have looked and looked at my code and I don't see an in issue. I have cleared my cache too and I still don't understand why my preview isn't working. Does anyone have a thought?
10 Answers
Lucas Johnson
2,761 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lucas Johnson | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<style>
footer {
color: orange;
background-color: white;
}
</style>
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Lucas Johnson</h1>
<h2>Designer</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>
<div id="wrapper">
<section>
<ul>
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://www.twtitter.com/nofuckingidea"><img src="img/twitter-wrap.png" alt"twitter logo"></a>
<a href="http://www.facebook.com/isnotasgoodasitscrackeduptobe"><img src="img/facebook-wrap.png" alt"facebook logo"></a>
<p>© 2014 Lucas Johnson.</p>
</footer>
</div>
</body>
</html>
Lucas Johnson
2,761 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lucas Johnson | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<style>
footer {
color: orange;
background-color: white;
}
</style>
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Lucas Johnson</h1>
<h2>Designer</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>
<div id="wrapper">
<section>
<ul>
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://www.twtitter.com/nofuckingidea"><img src="img/twitter-wrap.png" alt"twitter logo"></a>
<a href="http://www.facebook.com/isnotasgoodasitscrackeduptobe"><img src="img/facebook-wrap.png" alt"facebook logo"></a>
<p>© 2014 Lucas Johnson.</p>
</footer>
</div>
</body>
</html>
Lucas Johnson
2,761 PointsI dont know why the page cuts off the code ending </html>. Sorry for posting twice. Thought t might have been a glitch.
Andrew Corcoran
20,552 PointsHey Lucas,
The HTML provided is previewing fine for me. Can you attach a link to a screenshot of what you're seeing? Also, please walk us through how you are previewing.
Lucas Johnson
2,761 PointsI'm just previewing the site by clicking the preview option (the eyeball) on the workspace, as it says to do in the videos. The fonts have never changed, the background hasn't changed either. Sometimes when I preview, the images don't load either. How does one go about attaching a link of a screenshot ?
Andrew Corcoran
20,552 PointsHi Lucas,
If I preview just the code you provided, it looks like this: http://corc.im/uploads/lj_screencap.png
A few things to note. Within your HTML there are various references to other files, including two CSS files and a handful of images. You'll want to make sure that these folders and files exist in the same workspace as your HTML file. Assuming these files do exist, your file/folder structure should look like this: http://corc.im/uploads/lj_filetree.png
If the references within your HTML file are pointing to non-existent files, then your preview will look like my first link above (http://corc.im/uploads/lj_screencap.png).
Here are some examples of the references to other files in your HTML:
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<img src="img/numbers-01.jpg" alt"">
<img src="img/numbers-02.jpg" alt"">
<img src="img/numbers-06.jpg" alt"">
<img src="img/numbers-09.jpg" alt"">
<img src="img/numbers-12.jpg" alt"">
Lucas Johnson
2,761 PointsMy workspace does not look like that, but I thought the twitter, facebook and all the other files that are not the numbers are suppose to be in the workspace folder too. Am I incorrect?
Also, if the link provided for a fictional twitter account or a fictional facebook account is used in the HTML, will it also cause the same issue?
Andrew Corcoran
20,552 PointsSorry I missed the Twitter and Facebook image files, you are correct that those should be there as well in order for everything to appear properly.
If the links are not real they will still appear on the preview, but will not work properly when clicked.
Lucas Johnson
2,761 Pointshttp://port-80-r5yfa6g86u.treehouse-app.com/
My website looks like that above. I apologize but I'm just really confused. Do you or anyone happen to know what I have to fix exactly bc I don't think the links I have posted are dead. I will reattach my html and my css. I just don't know what I am doing wrong. Please help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lucas Johnson | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Lucas Johnson</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt"">
<p> Experimentation with color and texture</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/cthulu_jo"><img src="img/twitter-wrap.png" alt"twitter logo" class="social-icon"></a>
<a href="http://www.facebook.com/isnotasgoodasitscrackeduptobe"><img src="img/facebook-wrap.png" alt"facebook logo" class="social-icon"></a>
<p>© 2014 Lucas Johnson.</p>
</footer>
</div>
</body>
</html>
Lucas Johnson
2,761 PointsAnd here is my css:
/********************************* GENERAL *********************************/
body { font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
/********************************* HEADING *********************************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-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; }
/********************************* Navigation *********************************/ nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display:inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/********************************* Footer *********************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/********************************* 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%; font-size: 0.75em; color: #bdc3c7; }
/********************************* COLORS *********************************/
/* SITE BODY */ body { background-color: #fff; color: #999; }
/* green header*/ header { background: #6ab47b; border-color: #599a68; } /nav background on mobile devices/ nav { background: #599a68; }
/logo text/ h1, h2 { color: #fff; }
/links/ a{ color: #6ab47b; }
/nav link/ nav a, nav a:visited { color:#fff; }
/selected nav link/ nav a.selected, nav a:hover { color: #32673f; }
myackley35
34,574 Pointsmyackley35
34,574 PointsHi Lucas,
Can you provide your code?