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

Posted by Matthew Dash
Matthew Dash
3,957 Points

Why my links and images are now not working on browser after transferring files to Atom.

Hi, my links and images are not working after opening up Atom and downloading workspaces. They worked previously on workspaces, and despite making the amendments to the links described in the video neither the links nor the images are working in the browser. Any help would be appreciated. Please see me code below.

<!DOCTYPE html>
<html>
  <head>
    <title>Experience VR</title>
  </head>

  <body>
    <div>
      <header>
        <h1>Experience VR &amp; More</h1>
        <p>A <em>simple</em> blog about Virtual Reality Experiences.</p>

        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#articles">Articles</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </header>

      <div>
        <img src="img/featured.jpg" alt="child wearing VR headset">
        <p><strong>Virtual Reality</strong> is becoming well known as a form of entertainment, but it's also finding its way into fields like education, industrial design, healthcare and so much more!</p>
        <a href="https://teamtreehouse.com/vr" target="_blank">Start Your VR Journey</a>
      </div>

      <main>
        <section id="about">
          <h2>About this Site</h2>
          <p>Lorem ipsum dolor sit amet, 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-space.jpg" alt="user experiencing space in VR">
            <figcaption>
              Virtual Reality users can experience being in far away places
            </figcaption>
          </figure>  
        </section>

        <section id="articles">
          <h2>Latest VR Articles</h2>

          <article>
            <header>
              <h3>How Schools use Virtual Reality to improve Education.</h3>
              <p>By: Karen Burton</p>
            </header>  
            <p>Lorem ipsum dolor sit amet, dictas quodsi sit at, vel at oporteat quaerendum. In vitae gloriatur sit, mel ad impetus insolens, ad singulis salutatus cotidieque ius. Duo ea dolor consulatu, te facete nostrum pertinax usu. Mei ea audire scribentur, velit omnes accusata his at. Ne alii porro labore sea.</p>
            <a href="articles/2018/article.html#vr-article">Read More</a>
            <footer>Published: May 18 2018</footer>
          </article>

          <article>
            <header>
              <h3>The advantages of VR Simulation</h3>
              <p>By: Amelie Dash</p>
            </header>  
            <p>Lorem ipsum dolor sit amet, dictas quodsi sit at, vel at oporteat quaerendum. In vitae gloriatur sit, mel ad impetus insolens, ad singulis salutatus cotidieque ius. Duo ea dolor consulatu, te facete nostrum pertinax usu. Mei ea audire scribentur, velit omnes accusata his at. Ne alii porro labore sea.</p>
            <a href="articles/2018/article.html#vr-article">Read More</a>
            <footer>Published: June 10 2018</footer>
          </article>  
        </section>
        <section id="contact">
          <h2>Contact</h2>
          <p><strong>Email:</strong><a href="mailto:coolvrexperience@gmail.com?subject=Hi%20There!">coolvrexperience@gmail.com</a></p>
          <p><strong>Phone:</strong>01646 693046</p>
          <p><strong>Address:</strong></p>
          <address>
            72 Priory Road<br>
            Milford Haven<br>
            Pembrokeshire<br>
            SA73 2DZ<br>
          </address>
        </section>  
      </main>

      <aside>
        <h3>Top VR Resources</h3>
        <ol>
          <li><a href="https://www.vrs.org.uk/virtual-reality-education/" target="_blank">Learn to create educational experiences in VR</a></li>
          <li><a href="https://www.engadget.com/2018/01/10/vr-ar-future-of-entertainment/" target="_blank">Virtual Reality in Entertainment</a></li>
          <li><a href="https://www.dezeen.com/2016/05/25/virtual-reality-designing-architects-vrtisan-unreal-engine-htc-vive/" target="_blank">Interact with buildings and products in VR</a></li>
          <li><a href="https://futurism.com/videos/future-social-media-virtual-reality/" 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." 
          <footer>
          - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971" target="_blank">Mark Zuckerberg</a></cite>
          </footer>  
        </blockquote>
      </aside>  


      <footer>
        <p><small>&copy;2018 Experience VR, The Blog</small></p>
      </footer>
    </div>
  </body>


</html>

<!DOCTYPE html>
<html>
  <head>
    <title>VR Article</title>
  </head>

  <body>
    <div>
      <header>
        <h1>Experience VR</h1>
        <p>A simple blog about Virtual Reality Experiences.</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#articles">Articles</a></li>
            <li><a href="../../index.html#contact">Contact</a></li>
          </ul>
        </nav>
      </header>

      <article id="vr-article">
        <header>
          <h2>VR Article</h2>
          <p>By: Karen Burton</p>
          <p>Published: May 18 2018</p>
        </header> 

        <img src="../../img/vr-user.jpg" alt="VR User">

        <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 VR article...</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>
      </article>

      <aside>
        <h3>More Articles 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="#">Build User Interfaces in VR</a></li>
        </ul>
      </aside>

      <footer>
        <p>&copy;2018 Experience VR, The Blog</p>

      </footer>
    </div>  
  </body>


</html>

1 Answer

Jan Oberreiter
Jan Oberreiter
78,020 Points
Jan Oberreiter
Jan Oberreiter
78,020 Points

after the amendments you made, for the images, you are not referencing your home directory anymore ... you type: ../../img/vr-user.jpg ... instead of: ../img/vr-user.jpg and the links, it's the same there or you are referencing no link to go to at all, just the # symbol, nothing else, no URL or anything it could reference to ... hope this helps ...