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

CSS How to Make a Website CSS: Cascading Style Sheets What is CSS?

When 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?

You 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.

Thanks 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!

first, 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

I 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>&copy; 2014 Ted Sumner.</p>
      </footer>
    </div>
  </body>
</html>

Thanks 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?

That 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.

Yes 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.

I need to see the fork. You should be able to post a link so I can actually see the file structure.

I think this is what you want..

http://port-80-dka5an5nvj.treehouse-app.com

There 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.

When 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.

http://w.trhou.se/34962u2w5k

What happens when you click on the link I sent you?

Sorry 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?

Still says "Bummer that page does not exist"

Ok. I guess that function is a Git function for me only.

I 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

Long 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.

Long 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.

Also, 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.

When you open your main.css file in the css folder, is there anything in it?

I never saw the answer if you had any CSS. I didn't see any in your snapshot.

Sorry Yes I do have a Main.css page and a normal.css page

I figured out how to preview it. Let me look at it for a few minutes.

I figured out how to preview it. Let me look at it for a few minutes.

I found the problem. The file folders are in all caps and the html is not. I fixed it.

https://w.trhou.se/lqve0nkimh

The issue with the bullet points is because there is no css to remove them. You need this:

ul li {
    list-style-type: none;
}

thank you so much. I guess typing class is not benefiting me at all right now

Remember that these languages are case sensitive. As long as you match the case, you are generally okay. I should have seen it earlier.

When 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.

You can also use

list-style: none;