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 Responsive Web Design and Testing Build a Three Column Layout

Zakher Masri
Zakher Masri
4,415 Points

Switching from any page back to the portfolio's page

Everything is smooth in terms of the transitions between pages. The only problem I'm facing is that when I switch from any page back to the portfolio I get a message saying "500 internal server error". The class "selected" is sat for each page in its' html file.

Wayne Priestley
Wayne Priestley
19,579 Points

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code

what happens if you're on the portfolio page and you click the portfolio link?

Can you post the nav section for one of the other pages that you're having trouble with navigating back to the portfolio?

Are you doing this in workspaces?

Zakher Masri
Zakher Masri
4,415 Points

When I click on the portfolio page while I'm in the portfolio page I get a message that says "500 Internal Server Error, nginx/1.4.6 (Ubuntu)"

That happens whether I'm on the portfolio page or any other page in the site. So the only way I can see the portfolio page is by lunching the view with port 80 from the workspace. And yes I'm using Treehouse workspaces.

This is the nav section from contact.html

 <nav>
          <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html" class="selected">Contact</a></li>
            <li><a href="blog.html">Blog</a></li>
          </ul>
        </nav>

4 Answers

Zakher Masri
Zakher Masri
4,415 Points

The problem was fixed, I copied all the code inside index.html and deleted the file. After that, I created a new file with the same name and then pasted the code. Seems redundant but it worked.

Glad you got it figured out. It's weird that you had to do that. Maybe you had it capitalized at one point and it was cached.

Hi Zakher,

Do you by chance have your index file named "Index.html" with a uppercase 'i'? I did some testing in workspaces and found I could get that error if I renamed it that way.

Although when I launch the preview I don't immediately get the portfolio page because of this. I see a directory of the files and I have to click on "Index.html" first. Then any click on a link with "index.html" (lowercase) will produce the 500 error.

You don't mention having to do that though so maybe it's not your problem.

When you launch the preview you immediately see the portfolio page?

Zakher Masri
Zakher Masri
4,415 Points

That is exactly what is happening to me. When I lunch the preview I don't see the portfolio page, I see the directory of files instead. And I have to click on index.html to go to the portfolio page. And I get the same error if I click on a link that directs to index.html. The files is named in lower case but I can't recall if I capitalized the first letter by mistake and then fixed it back.

So it's ok now then?

Zakher Masri
Zakher Masri
4,415 Points

I still encounter the same problem if I lunch a preview from the workspace. But I don't think it's a major problem because it didn't happen when I used Dreamweaver to preview it. Which hopefully means the problem would vanish once I import the directory into WordPress I suppose.

Hi Zakher.

Please could you post your code for me to take a look at?

Thanks.

Zakher Masri
Zakher Masri
4,415 Points

What would be the best method to share the code with you? I tried pasting it here plainly and it showed the visual result instead of the rough code.

Refer to the markdown cheatsheet below the message box and there is a section in there about how to properly format your code for the forum.

-Luke

Zakher Masri
Zakher Masri
4,415 Points
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Zakher</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One' 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>Zakher Masri</h1>
        <h2>Student</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>
          <li><a href="blog.html">Blog</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/2-3-3-01.jpg">
              <img src="img/2-3-3-01.jpg" alt="logo">
              <p>One of the design mockups</p>
            </a>
          </li>
          <li>
            <a href="img/3-2-02-01.jpg">
              <img src="img/3-2-02-01.jpg" alt="logo">
              <p>2nd design</p>
            </a>
          </li>
          <li>
            <a href="img/4-1-01.jpg">
              <img src="img/4-1-01.jpg" alt="logo">
              <p>third design</p>
            </a>
          </li> 
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/zakher_m"><img src="img/twitter-logo.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://facebook.com/zakher.masri"><img src="img/facebook-logo.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Zakher Masri</p>
      </footer>
     </div>
  </body>
</html>
Zakher Masri
Zakher Masri
4,415 Points

I didn't encounter the problem when I used Dreamweaver CC to view the html files. I'm using Chrome.