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
CJ Ruacho
1,321 Pointsthe imgs wont show up and when i click the artical option on top it says page not found im so lost
(this is my artical.html) <!DOCTYPE html> <html> <head> <title>VR Artical</title> </head>
<body> <header> <h1> Experience VR Artical </h1> <p> A simple blog about virtual reality experience</p> <nav> <ul> <li><a href="../../index.html"> Home </a></li> <li><a href="../../index.html#about"> About</a></li> <li><a href="../../index.html#artical"> Artical</a></li> <li><a href="../../index.html#contact"> Contact</a></li> </ul> </nav> </header> <img src="../../img/vr-user.jpg" alt="user trying a VR headset">
<artical id="vr-article">
<header>
<h2>VR Artical</h2>
<p>By: Allison Ruacho-Beach</p>
<p>Published may 24th, 2018</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus urna lacus, ut lacinia elit pretium a. Praesent rutrum ac ipsum vitae rhoncus. Nam non molestie purus.</p>
<aside>
<q> This is a pull quote from the artical..</q>
</aside>
<p>Nunc imperdiet, dui in varius eleifend, magna enim imperdiet felis, at ultricies magna metus vitae ante. Nulla in porttitor nibh. Mauris non libero in massa porta varius non sed magna. Donec ac mauris mattis, viverra turpis ac, dictum arcu.</p> <p>Vivamus molestie laoreet viverra. Ut ac fringilla ex. Donec at nisl semper, commodo mi maximus, fermentum nisi. Duis bibendum gravida ante sit amet consectetur. Curabitur ac est id justo euismod porta quis ac arcu.</p>
</artical>
<aside>
<h3>More Articals about vr</h3>
<ul>
<li><a href="#">Make a VR Game</a></li>
<li><a href="#">Learn VR in Unity</a></li>
<li><a href="#">Builed user interfaces in VR</a></li>
</ul>
</aside>
<footer>
<p>©2017 Experience VR, The Blog</p>
</footer>
</body>
</html>
(this is my index.html) <!DOCTYPE html> <html> <head> <title>Experience VR</title> </head>
<body>
<div>
<header>
<h1> Experience VR </h1>
<p> A <em>simple</em> blog about virtual reality experience</p>
<nav>
<ul>
<li><a href="#Home"> Home </a></li>
<li><a href="#about"> About</a></li>
<li><a href="#articals"> Artical</a></li>
<li><a href="#contact"> Contact</a></li>
</ul>
</nav>
</header>
<div>
<!-- comments: Start of wrpper div (ctrl & / )--> <img src="img/featured.jpg" alt="virtual reality user experience"> <p><strong>Virtual Reallity</strong> is becoming well known as a form of entertainment, but it's also finding its way into fields like education, indusustrial design,healthcare and so much more</p> <a href="https://teamtreehouse.com/retiring-gamedev-vr" target="_blank">Start your VR journey</a> </div>
<main>
<section id="about">
<h2>About this site</h2>
<p><span>Lorem ipsum dolor sit amet</span> consectetur adipiscing elit. Suspendisse vehicula metus in bibendum laoreet. Aenean libero est, egestas eu eros pretium, sodales iaculis est.</p>
<figure>
<img src="img/vr-user.jpg" alt="Enjoying VR">
<figcaption>
New VR New Shirt
</figcaption>
<img src="img/vr-space.jpg" alt" USer experiencing space in VR">
<figcaption>
You can explore and feel like you are right in the middle of the action.
</figcaption>
</figure>
</section>
<section id="article">
<h2>Latest VR Articles</h2>
<article>
<header>
<h3>How schools use Virtual Reality to improve education </h3>
<p> By: Cj Ruacho-Beach</p>
</header>
<p>How Schools Use Virtual Reality to Improve Education
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices euismod turpis eget porta. Etiam nulla massa, pretium et massa nec, ornare dignissim nisi</p>
<a href="articals/2019/artical.html#vr-artical" target="_blank">Read more</a>
<footer> Published: june 1th, 2019</footer>
</article>
<article>
<header>
<h3>The Advantages of VR simulation</h3>
<p> By: Cj Ruacho-Beach</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices euismod turpis eget porta. Etiam nulla massa, pretium et massa nec, ornare dignissim nis</p>
<a href="articals/2019/artical.html#vr-artical">Read more</a>
<footer> Published: june 10th, 2019</footer>
</article>
</section>
<section id="contact">
<h2>Contact</h2>
<p><strong>Email</strong> us at <a href="mailto:coolvrexperince@gmail.com?subject=Hello There!!">coolvrexperince@gmail.com</a></p>
<p><strong>Phone:</strong>623.418.1111</p>
<p><strong>Address: taco st</strong></p>
<address>
Experience VR<br>
2019 virtrual way<br>
Seattle,WA 98119
</address>
</section>
</main>
<aside>
<h3> Top VR Resources</h3>
<ol> <Li><a href="https://www.google.com/search?q=colorado+boulder&oq=colorado+bol&aqs=chrome.2.69i57j0l5.7781j0j7&sourceid=chrome&ie=UTF-8"target="_blank">Learn to create educational experiences in VR</a> </Li> <Li><a href="https://www.google.com/search?q=colorado+boulder&oq=colorado+bol&aqs=chrome.2.69i57j0l5.7781j0j7&sourceid=chrome&ie=UTF-8"target="_blank">Virtual Reality in Entertainment</a> </Li> <Li><a href="https://www.google.com/search?q=colorado+boulder&oq=colorado+bol&aqs=chrome.2.69i57j0l5.7781j0j7&sourceid=chrome&ie=UTF-8"target="_blank">Interact with buildings and products in VR</a></Li> <li><a href="https://www.google.com/search?q=colorado+boulder&oq=colorado+bol&aqs=chrome.2.69i57j0l5.7781j0j7&sourceid=chrome&ie=UTF-8"target="_blank">Use VR for teleconferencing and social media</a></li> </ol> <hr> <blockquote> "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming." - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971" target="_blank">Mark Zuckerberg</a></cite> </blockquote> </aside> <hr> <footer> <p><small>©2017 Experience VR, The Blog</small></p> </footer> </div> </body> </html>
2 Answers
Kelly Mulry
Front End Web Development Techdegree Student 8,094 PointsHi there!
The first mistake I see is a misspelling in the navigation, which I think is what is creating your "page not found" problem.
You wrote:
<li><a href="#articals"> Artical</a></li>
It should be:
<li><a href="#articles"> Articles</a></li>
You will want to go through your HTML and correct the spelling mistake. I notice the misspelling of "article" multiple times (as articals). That should fix your problem with any broken links.
I noticed in your VR-Space image, the alt text is missing the equals sign right before it:
You wrote:
<img src="img/vr-space.jpg" alt" USer experiencing space in VR">
It should be:
<img src="img/vr-space.jpg" alt="User experiencing space in VR">
I don't think this is affecting your images though.
I don't see anything wrong with the linking of your images. Unless the images are in the article.html itself, which then requires / to be put before img/photoname.jpg. (/ brings you back to the root folder, the main folder that your index.html is in, as well as the images folder). Same thing goes for the navigation in articles.html. Place / in front of all the links!
I hope this helps.
Tariku Kebede
9,706 Points<artical id="vr-article"> ======>wrong. change artical to article.
<article id="vr-article">=======>right
<section id="article">===> the id name is article, so the href below also has to be article, but you wrote articals.
<li><a href="#articals"> Artical</a></li>===> wrong.
<li><a href="#article"> Artical</a></li>===> right.
<img src="img/vr-user.jpg" alt="Enjoying VR">===> wrong.
<img src="./img/vr-user.jpg" alt="Enjoying VR">===> right.======> ./ means in the current folder, ../ means out of the
current folder.
<img src="img/vr-space.jpg" alt" USer experiencing space in VR">====wrong
<img src="./img/vr-space.jpg" alt" USer experiencing space in VR">====>right