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 Sharing a Website Upload the Website

hello I am having a heck of a time uploading my site, I did what nick said witch is find I hit refresh and nothing happ

im using namecheaps hosting, its says im active my credentials went through ok im not sure whats going on, i did notice that the files are all jumbled so im not sure if I accedently deleted something please help

12 Answers

Kez Khou
Kez Khou
3,903 Points

Ok Nelson Fortes please review and compare the code I'm posting below with your original HTML and CSS, also, the reason I duplicated the "brayden3.jpg" because there was no content for the "Brayden(2).jpg" that you have hotlinked on your site. There are still errors in your CSS, hopefully the code editor you use will find them for you, if not let me know.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Nelson Fortes | Web Desinger</title>
    <link rel="stylesheet" href="css/main.css">
 </head>
<body>
<div id="wrapper"><!---BEGIN WRAPPER--------------------------------------------------------------------------------------> 
<header>
    <a href="index.html"><h1>Nelson Fortes</h1><h2>Web 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 id="gallery">
            <li><a href="img/me4.jpg"><img src="img/me1.jpg" alt=""><p>Nelson Fortes</p></a></li>
            <li><a href="img/me3.jpg"><img src="img/me3.jpg" alt=""><p>Nelson Fortes</p></a></li>
            <li><a href="img/me1.jpg"><img src="img/me4.jpg" alt=""><p>Me again</p></a></li>
            <li><a href="img/brayden.jpg"><img src="img/brayden.jpg" alt=""><p>Brayden Fortes</p></a></li>
            <li><a href="img/brayden3.jpg"><img src="img/brayden3.jpg" alt=""><p>Brayden</p></a></li>
            <li><a href="img/brayden3.jpg"><img src="img/brayden3.jpg" alt=""><p>Brayden</p></a></li>
        </ul>
    </section>
        <footer>
            <a href="http://facebook.com/nelson.fortes"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
            <a href="http://twitter.com/nfortes81"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
            <p>&copy; 2014 Nelson Fortes.</p>
        </footer>
</div><!---END WRAPPER------------------------------------------------------------------------------------------------------>
</body>
</html>
/****************
General
****************/

body {
  font-family: 'Lato', sans-serif;
}


a {
  text-decoration: none;
}

img {
  max-width: 100%;

}


h3 {
  margin: 0 0 1em 0;
}

/*///Kez incleded WRAPPER DIV////////////////////////*/
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}


/****************
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: 'Lato', 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: 40px;
    height: 40px;
    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

}

.profile-photo {
  padding-top: 10%;
  padding-bottom: 10%;
  clear: both;
  display: block;
  max-width: 250px;
  margin: 0 auto 30px;
  border-radius: 75%;
}

/****************
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 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;
}


/*links*/
a {
  color: #6ab47b;
}

/* logo text */
h1,h2 {
  color: #fff;
}


/* nav link*/
nav a, nav a: visited {
  color:white;
}
/*selected nav link*/
nav a.selected, nav a:hover {
  color:#32673f
}

/*site body*/
body {
  background-color: #fff;
  color: #999;
}

wow thanks a lot man i check out that code editor site it seems different but cool, i enjoy this stuff but I can see how it can get super frustrating to find bugs and stuff, im sure it comes with practice and time have you every had a website that had no bugs lol. anyway thanks for your help my dude.

Kevin Korte
Kevin Korte
28,149 Points

Are you using an FTP client to upload your site to namecheap?

Kevin Korte
Kevin Korte
28,149 Points

I'm not sure what file Nick said to delete. Where at in the video is that?

I was just curious as what what your HTML structure looked like, cause in the browser there is no reference to a CSS file, and your website isn't trying to load a CSS file.

yes im using cyber duck its really weird cause my html is comming through but my css is not

my site is nelsonfortes.com check it out its all like garbled

Kevin Korte
Kevin Korte
28,149 Points

what does your html look like on the file itself?

im not sure what you mean bro, its weird cause that file that nick told us to delete every now and then keeps comming up so i Delete it

Stephen Bone
Stephen Bone
12,359 Points

Hi Nelson

I just wonder if the issue isn't with the files not uploading but with the CSS not applying correctly as I can see that a main.css file is there and some styles are being applied.

Just to throw it out there at the top of your main.css you've got the spelling mistake, below:

body {
  font-family:ffont-family: 'Lato', sans-serif;
}

/* which just should be */

body {
  font-family: 'Lato', sans-serif;
}

And then you have CSS styles for elements with an ID of gallery and a class of profile-photo but I can't see anywhere in your html assigning those values to any elements.

So for example looking at Nicks video the unordered list under the section element should have the ID gallery assigned to it. Something like below:

<section>
   <ul id="gallery">
      <li>
         <a href="img/numbers-01.jpg"

And presumably there are other ID's and Classes that should be assigned somewhere in the html.

Hope it helps!

its there like a master file for this project that I could look at just to review the code guys or if someone is willing to check out my code that would be cool im not sure what to do. I appreciate everyones help btw.

when i tested the files too there were a butt load of errors i noticed

Kez Khou
Kez Khou
3,903 Points

Hello Nelson Fortes , I'm reviewing your source HTML and CSS files now, I will upload a copy of all of your sites assets to my own server to see what's going on.

thanks a bunch bro

Kez Khou
Kez Khou
3,903 Points

Ok, so I haven't even had to skim completely through your code, but I've found multiple errors. I'm fixing your code, you can view my changes at http://kezkhou.com/nelsonfortes.html. Nelson are you using a code editor or just a plain text editor? If you're not using a code editor a great free editor thats conveniently has mobile apps and a built in browser chrome app is codeanywhere , even the free version has everything you need. The main drawback of the free version is you can only be connected to one webserver at a time.