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

Katie OK
Katie OK
1,946 Points
Posted by Katie OK
Katie OK
1,946 Points

Website does not link "normalize.css"

My website is not linking normlize.css nor is it reflecting main.css Below is my code. Is there anything I am not doing right? -_-;;;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Katie OK | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Katie OK</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> <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 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> <p1>Gallery will go here.</p1> </section> <footer> <a href="http://twitter.com/okdong"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/Dy Chocopie"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Katie OK.</p>
</footer> </body> </html>

6 Answers

Victor Ruiz
Victor Ruiz
16,570 Points

Is your css folder which contains main.css and normalize.css, within the same folder where your index.html is located?

Victor Ruiz
Victor Ruiz
16,570 Points

Try to make sure all your files are within a main folder. A folder named "Portfolio" inside this have the html pages. You would also need the css folder that contains the main.css and normalize.css. With these changes you should be golden of don't forget to close your tags.

Katie OK
Katie OK
1,946 Points
Katie OK
Katie OK
1,946 Points

Hi,

I have a CSS folder on top, and a img folder below, and a separate (not a folder) index.html

I'm frustrated... code seem to be right but does not reflect it when refreshed on website.

When I initially download normalize.css on desktop, is it suppose to go inside img folder? Right now, I have the two folders separately located in my download folder in desktop.

Zoltán Holik
Zoltán Holik
3,401 Points
Zoltán Holik
Zoltán Holik
3,401 Points

You have already tried to clear the browser cache? Or just simply just open an incognito browser tab (ctrl+shift+n) in chrome.

Zoltán Holik
Zoltán Holik
3,401 Points
Zoltán Holik
Zoltán Holik
3,401 Points

Your HTML file is not valid. There is no html tag, no head tag and no body tag...

Try to use this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Katie OK | Designer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
     <!-- your code here --->
    </body>
</html>
Gregory Radek
Gregory Radek
869 Points
Gregory Radek
Gregory Radek
869 Points

It may be how you have copy and pasted your code into the question but you seem to be missing the html tag, head tag and the body tag. Always make sure that you wrap everything in the html tag, the top links and meta tags in the head tag, and the main display code in the body tag.

Also make sure both stylesheets are in your css folder. It may seem obvious but we've all made the same mistakes at some point.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Katie OK | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<header>
  <a href="index.html">
    <h1>Katie OK</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> 
<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 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>
  <p1>Gallery will go here.</p1>
</section>
<footer>
  <a href="http://twitter.com/okdong"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
  <a href="http://facebook.com/Dy Chocopie"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
  <p>&copy; 2015 Katie OK.</p>      
</footer>
</body>
</html>
Katie OK
Katie OK
1,946 Points
Katie OK
Katie OK
1,946 Points

Hi, thanks for your help but I do have the html code but still normalize.css does not reflect on the website. What should I do.. ?

This is my current code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Katie OK | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> ...... <skip> </body> </html>

Gregory Radek
Gregory Radek
869 Points
Gregory Radek
Gregory Radek
869 Points

could you send us a screenshot of the code and folder structure in workspaces? Your links seem fine so I'm guessing its something outside of the code.

Katie OK
Katie OK
1,946 Points
Katie OK
Katie OK
1,946 Points

For some reason, when I copy and paste the code here, it doesn't seem to paste everything in full and misses out some lines such as html tag. But, I do have the entire html tag, and everything in place.

I would like to send you a screenshot of the code, but how.. do I do that :( I am not able to paste picture here..

Many thanks for your help!

Victor Ruiz
Victor Ruiz
16,570 Points

Look at the bottom of the input field it shows you how to add your code without missing any of the code. "Markdown Cheatsheet"

Pete Cass
Pete Cass
16,656 Points
Pete Cass
Pete Cass
16,656 Points

"When I initially download normalize.css on desktop, is it suppose to go inside img folder? Right now, I have the two folders separately located in my download folder in desktop."

normalize.css and main.css need to be in your css folder. An easy think to do sometimes is to go to the css folder click create new file and paste your code into the new file. That's if you're having trouble moving the css file into the css folder.

Katie OK
Katie OK
1,946 Points
Katie OK
Katie OK
1,946 Points

Thanks everyone! I figured it out!