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
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 PointsHaving 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
- 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>
- 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
2,639 PointsSo 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
8,142 PointsHey 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
8,142 PointsHey 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.
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 PointsI 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
8,142 PointsYeshaya, 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
8,142 PointsHey 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?
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 PointsI 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
2,639 PointsHey 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.
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 PointsI don't know why it's not showing the beginning I don' know what to do
Benjamin Payne
8,142 PointsHey Yeshaya, I haven't forgotten about ya, I'll look at this tonight when I get home from the office.
Best, Ben
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 PointsThank you all
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 Pointsthank you
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 PointsHi 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