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
Donna Shackleford
432 PointsWhen I reload my workspace and look at it, it doesn't look like it should.
I added my link to my html but it is still showing the bullets and it is also not showing my pictures. I can pull the pictures up on the side bar. What have I done wrong?
Donna Shackleford
432 PointsThanks Ted Sumner. Thats what I thought too but 1. I didn't know how to post it and 2. I thought the code will be improperly done too but the more I think about it the layout looks like it could be I don't have enough memory or space on my computer (I am lacking in both) so I will post the code to eliminate that.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Donna Shackleford | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Donna Shackleford</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portolio</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/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>Playing wiht blending modes in Photoshop.</p>
</a>
</li><li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li><li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li><li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twiter.com/donnashack"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/Donna Gill Shackleford"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2015 Donna Shackleford.</p>
</footer>
</body>
</html>
and this is what it looks like:
Donna Shackleford
Designer
Portolio About Contact
Experimentation with color and texture.
Playing wiht blending modes in Photoshop.
Trying to create an 80's style of glows.
Drips created using Photoshop brushes.
creating shapes using repetition.
Twitter Logo Facebook Logo © 2015 Donna Shackleford.
No pictures and no logos!
Ted Sumner
Courses Plus Student 17,967 Pointsfirst, if your computer has the memory to display the web sites, then it should be able to process the files. I doubt very much if it is a memory problem.
For the code quote,double space under your text and use three back ticks (upper left side of keyboard) followed by the language you are using with no space. Then insert your quote on the next line. On the line after your quote, put three more back ticks. Use a different set of back ticks for each language you quote. In your case, you should have one with ```css and one with ```html.
10 Answers
Ted Sumner
Courses Plus Student 17,967 PointsI just went back and looked at the course again. Did you remember to save your changes? Also, here is my final CSS and HTML from doing the course. I think this is after several more videos, so it will likely look different than yours.
/*****************************************
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%;
}
h3 {
margin: 0 0 1em 0;
}
/*****************************************
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;
}
/*****************************************
NAV
******************************************/
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;
}
/*****************************************
PAGE: ABOUT
******************************************/
.profile-photo {
clear: both;
display: block;
max-width: 150px;
margin: 0px auto 30px;
border-radius: 100%;
}
/*****************************************
PAGE CONTACT
******************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
/*****************************************
COLORS
******************************************/
/* Site body */
body {
background-color: #fff;
color: #999;
}
/* Green Header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* Nav background on mobile */
nav {
background: #599a68;
}
/* Logo text */
h1, h2 {
color: #fff;
}
/* link color */
a {
color: #6ab47b
}
/* nav links color*/
nav a, nav a:visited {
color: #fff;
}
/* selected nav link color */
nav a.selected, nav a:hover {
color: #32673f;
}
and HTML, but I think it is supplied
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ted Sumner | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ted Sumner</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>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://biblewordstudy.net"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/ted.sumner.1"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
<p>© 2014 Ted Sumner.</p>
</footer>
</div>
</body>
</html>
Donna Shackleford
432 PointsThanks Ted for the code. I looked at your html and mine and I can't see any difference so I deleted mine and reentered your line.
<ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> Just to see if it would change on my preview and it did not....sigh... What I am seeing is a blue square with a ? mark inside. any ideas?
Ted Sumner
Courses Plus Student 17,967 PointsThat sounds like a broken image link. Does your workspace have an img folder? if so, is there a file in it called number-01.jpg?
There is a way to post the fork with your code and file structure. I just will not be able to preview it. I have not done it in a while, so you will have to figure it out. It is an icon or button on the upper right of the workspace if I recall correctly.
Donna Shackleford
432 PointsYes it has an img folder and it does have the file named number-01.jpg in it.
I can look at the image when selected from image folder but it does not appear in preview.
Ted Sumner
Courses Plus Student 17,967 PointsI need to see the fork. You should be able to post a link so I can actually see the file structure.
Donna Shackleford
432 PointsI think this is what you want..
Ted Sumner
Courses Plus Student 17,967 PointsThere are three icons on the upper right of the workspace just above the window where you enter the code. The one in the middle says fork workspace. Push that button and it will create a duplicate of your workspace. Copy that url from the browser and post it here. It should look like this:
https://teamtreehouse.com/workspaces/7195342
That link should let me see your workspace, but I don't think I can preview it.
Donna Shackleford
432 PointsWhen I press the folk workplace it just creates a new work place but when I press the left icon it does a snapshot and this is what it shows.
Ted Sumner
Courses Plus Student 17,967 PointsWhat happens when you click on the link I sent you?
Donna Shackleford
432 PointsSorry Ted I had to go to work. I am now at my computer again... I pressed the one you sent me and it said Bummer that one no longer exist. Did you try the one I sent you?
Ted Sumner
Courses Plus Student 17,967 PointsNo problem. Try this:
Donna Shackleford
432 PointsStill says "Bummer that page does not exist"
Ted Sumner
Courses Plus Student 17,967 PointsOk. I guess that function is a Git function for me only.
Donna Shackleford
432 PointsI think I am going to start over and do it one lesson at a time and find out where I went wrong.
Thanks for the help.
Happy coding
Donna Shackleford
432 PointsLong habits are going to have to be relearned ... sigh ... i get so excited when I finally do accomplish it. I have the bug bad.
I will remember to watch case usage and also when I have something that is wrong I will check above and below to see if I have other things wrong.
Thank you so much for the help. I got so wrapped up in trying to find the problem that I didn't realize I was going to be late. I left rather abruptly. I will be traveling back home tomorrow.
Donna Shackleford
432 PointsLong habits are going to have to be relearned ... sigh ... i get so excited when I finally do accomplish it. I have the bug bad.
I will remember to watch case usage and also when I have something that is wrong I will check above and below to see if I have other things wrong.
Thank you so much for the help. I got so wrapped up in trying to find the problem that I didn't realize I was going to be late. I left rather abruptly. I will be traveling back home tomorrow.
Ted Sumner
Courses Plus Student 17,967 PointsAlso, it is better to post the code and not delete because there is often a syntax error that you can learn from when we look at your code.
Ted Sumner
Courses Plus Student 17,967 PointsWhen you open your main.css file in the css folder, is there anything in it?
Ted Sumner
Courses Plus Student 17,967 PointsI never saw the answer if you had any CSS. I didn't see any in your snapshot.
Donna Shackleford
432 PointsSorry Yes I do have a Main.css page and a normal.css page
Ted Sumner
Courses Plus Student 17,967 PointsI figured out how to preview it. Let me look at it for a few minutes.
Ted Sumner
Courses Plus Student 17,967 PointsI figured out how to preview it. Let me look at it for a few minutes.
Ted Sumner
Courses Plus Student 17,967 PointsI found the problem. The file folders are in all caps and the html is not. I fixed it.
The issue with the bullet points is because there is no css to remove them. You need this:
ul li {
list-style-type: none;
}
Donna Shackleford
432 Pointsthank you so much. I guess typing class is not benefiting me at all right now
Ted Sumner
Courses Plus Student 17,967 PointsRemember that these languages are case sensitive. As long as you match the case, you are generally okay. I should have seen it earlier.
Ted Sumner
Courses Plus Student 17,967 PointsWhen nothing works with an item, it is usually because of the path or file name. When some works and some doesn't it is because of the code usually. Also, when you get errors, look at the referenced line, but also look above for a missing semicolon.
Ted Sumner
Courses Plus Student 17,967 PointsYou can also use
list-style: none;
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsYou have to post your code for a real answer, both the HTML and CSS. There is a link to the Markdown Cheatsheet on this page. Please review that on how to format your quote so that it displays properly and is easy to read.
I have commonly found that there is an improper link to the css, the css is implemented, there is a syntax error in the css, or there is a problem in the html with the class or id. The only way to really answer your question is to look at code.