Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Having some problems with my first website

I just created my first HTML and CSS website but I'm having some small issues and I would appreciate some help

  1. When I verified the HTML on a validator I got 1 error and a warning the error said: Error: Bad value http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800 for attribute href on element link: Illegal character in query: not a URL code point. From line 7, column 5; to line 7, column 142 css">↩ <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>↩ < Syntax of URL: Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.

The warning said: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section> I don't understand because my section is for a picture gallery and I don't need a heading

my HTML is here:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Yeshaya Coffman | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://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"> <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>Yeshaya Coffman</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 texture and color</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="https://www.facebook.com/profile.php?id=100009203640846"> <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"> </a> <p>© 2015 Yeshaya Coffman.</p> </footer> </div> </body>

</html>

  1. On my cellphone when I click one of the nav li's it changes color also when I'm on the page of that nav li also the li color is darker the problem is when I click on a nav li and then I go back to the last page using the browser the nav li of the previous page stays dark along with the one of the current page

if somebody could help me I would appreciated very much thank you

9 Answers

Andria Barratt
Andria Barratt
2,639 Points

So for your second issue with the links, I'm not sure how to answer. But the W3C validation problem is simpler. The Google Fonts URL they generate for you to include in your HTML contains the pipe character (|) which does not validate. It needs to be replaced with its NFC character which is %7C.

So change

<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

to

<link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

and it should validate.

Source: stackoverflow

Benjamin Payne
Benjamin Payne
8,142 Points

Hey Yeshaya, You should include a html tag and closing tag (see code below). Also can you include your css files in the post?

Thanks! Ben

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  // your code here
</body>
</html>
Benjamin Payne
Benjamin Payne
8,142 Points

Hey Yeshaya,

I am looking at this and it seems to be working ok. Just make sure that on each page the selected class is different in the nav section. e.g. for each page that page in the nav section should have that class.

For the home / portfolio Page

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

For the about page

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

For the contact page

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

Let me know if that works for you.

I have it like that also the problem is when I go back with the browser the link li of the last page stays with the selected class

Benjamin Payne
Benjamin Payne
8,142 Points

Yeshaya, That's really strange. I'll take a look again here in a little bit. I'll get back to you asap.

Best, Ben

Benjamin Payne
Benjamin Payne
8,142 Points

Hey Yeshaya,

Are you hosting this on a local webserver? NGINX, Apache Node.js or something like that? What is the URL when accessing the three different pages?

I have it included I don´t know why it's not showing here it is again:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Yeshaya Coffman | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://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"> <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>Yeshaya Coffman</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 texture and color</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="https://www.facebook.com/profile.php?id=100009203640846"> <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"> </a> <p>© 2015 Yeshaya Coffman.</p> </footer> </div> </body>

</html>

Css:

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

/***************************************** 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: 20px; height:20px; margin: 0 5px; }

/***************************************** PAGE POFRTFOLIO ******************************************/

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

/***************************************** ABOUT ******************************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100% }

/***************************************** CONTACT ******************************************/

.contact-info { list-style: none; margin: 0; padding: 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: white; color: #999; }

/* green header */ header { background: #6ab47b; border-color: #599a68 }

/* nav background on mobile devices */ nav { background: #599a68; }

/******TEXT******/

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

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

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

this is only the main page of the website

Andria Barratt
Andria Barratt
2,639 Points

Hey Yeshaya Coffman I had some issues with the Markdown in the forums at first too. Make sure you are using the BACKTICK symbol (in the upper left side of your keyboard, same key as ~) NOT the single apostrophe symbol (same key as "). That should solve your problems posting your code here.

I don't know why it's not showing the beginning I don' know what to do

Benjamin Payne
Benjamin Payne
8,142 Points

Hey Yeshaya, I haven't forgotten about ya, I'll look at this tonight when I get home from the office.

Best, Ben

Thank you all

thank you

Hi ben

I just use onkelos.com And on kelps.com/about.html And the same thing for the contact page I don't even know what Apache and nginx are and the server is directadmin