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 Styling Web Pages and Navigation Style the Portfolio

Posted by Junghwan Park
Junghwan Park
1,319 Points

My preview does not match the code in my workspace.

I wrote all the codes that I was supposed to write however, When I click the preview button to see my page, it does not match with what I wrote in the workspace.

3 Answers

Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points

Hey buddy try this:

Download the fonts you want (Here is Changa One)

Then in your CSS add this (Presuming you have out the fonts in a fonts folder the same height as your CSS folder

@font-face {
    font-family: 'ChangaOne';
    src: url('../fonts/ChangaOne-webfont.eot');
    src: url('../fonts/ChangaOne-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ChangaOne-webfont.woff2') format('woff2'),
         url('../fonts/ChangaOne-webfont.woff') format('woff'),
         url('../fonts/ChangaOne-webfont.ttf') format('truetype'),
         url('../fonts/ChangaOne-webfont.svg#../fonts//__ChangaOne') format('svg');
    font-weight: normal;
    font-style: normal;

Hopefully this works let me know!

-Shaun

Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points

Could you please attach some screenshots :-)

Junghwan Park
Junghwan Park
1,319 Points

Hi Shaun,

Below are the codes that I wrote for the lecture. Somehow from the moment that I added 'Changa One' link from the Google Font, my preview page does not reflect changes I have made in my CSS. I also made changes in my CSS file like the ones below, to have two column mobile pages, however my preview does not reflect these changes. I am pretty sure that I made some syntax error but I just can't find it and I would greatly appreciate if you could help me out.

Thank you for your kindness!

  • JP

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

gallery {

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

gallery li {

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>John Park | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://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>John Park</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 glow</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://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href+"http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2014 John Park</p> </footer> </div> </body>

</html>

Cecilia Falchi
Cecilia Falchi
686 Points
Cecilia Falchi
Cecilia Falchi
686 Points

Maybe you have to change the id in "gallery" (without the capital letter) so it will match your CSS.