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 Build a Simple Website Text Editors and HTML Images and Lists

Switch back to the browser?

This is just a very easy thing that I seem to have missed. Kind of like when you have been talking to someone at a party all night, but you never got their name? Too late to ask!!

When creating code in a text editor such as Sublime 2 (what I am using) how do I do what Nick so often says "Switch back to the browser" How do I preview my code in the browser?

Thanks everyone. Im in business. But what if I have numerous docs, such as this one, saved on my computer?

  • they can't all be the same name?

What am I missing?

Hey Laura. Good question. Generally, you'll keep projects which reside inside of their own folder—allowing you to have an index file for each of them.

Matt West
Matt West
14,545 Points

Hey Laura,

Any files ending in .html can be opened in your web browser. It's considered best practice not to use spaces in filenames when it comes to creating new pages.

For example, you could have an About page in a file called about.html and a Contact page in contact.html.

If you need to have two files with the same name, they will need to be saved in different folders. Here's an example of what a typical website structure could look like. Indents represent the nesting of files with folders.

/myprojectfolder
    index.html
    about.html
    contact.html
    /subfolder
        index.html
        projects.html

7 Answers

Erik McClintock
Erik McClintock
45,783 Points

Laura,

To view the code you've been building in-browser, you simply need to open the index.html file in your browser of choice!

You can either:

a) right-click on your index.html file (or whichever file you want to view) and choose to 'Open With...' and then choose a browser

b) from an already opened browser, do Ctrl+O (or Cmd+O on a Mac, I'd expect) to bring up the Open File explorer window, and then navigate to and select the file that you want your browser to open

Then, of course, as you make changes to your files' code and save the changes, you'll want to refresh your browser (Ctrl+F5 to refresh it entirely) to view the changes.

Hope this helps!

Erik

Thank you! What I missed, was that saving the document as "index.html" was important. I saved it as a name "How to Build a Simple Website A" and the document was always grayed out and not clickable. Once I changed it to "index.html" everything came alive and I was in business.

Hi Laura, to preview your code in the browser (using Chrome), you can right-clickView Page Source, or with Chrome DevTools by Cmd + Shift + C (Mac), or Ctrl + Shift + C (Windows).

If you're asking how to preview the rendered HTML document, simply drag index.html into a browser tab. :smiley:

Toggling Between Applications for Faster Workflow

You simply need to open your .html file with your web browser, Chrome, Firefox, Safari, as you want :)

Too late, Erik said everything you need to know !

Matt West
Matt West
14,545 Points

Hey Laura!

Find where you saved the index.html file on your computer and then double click the file to open it up in your web browser.
Whenever Nick says to switch back to the browser, just make sure you refresh the page in your browser to get the latest changes.

Hope this helps :)

Thank you everyone! Just realized I saved the file as a ".doc" and that was why it wouldn't open in the browser. Doh! I'm in the process of creating my very first ever website from scratch, since my Microsoft FrontPage class! I remember when Office 2000 felt very futuristic. :))

Thank you for the detailed answers.

Hello again! Since you guys were so helpful, maybe you can answer this one too? My images aren't appearing. Just get the blue question marks. I have been over my code and compared it to Nick's. Saved the images as JPEGs in the same directory as the index file, but they aren't appearing. I have alternate text in the markup and that doesn't appear either - just the blue question marks so I know I am doing something wrong.

<!DOCTYPE HTML>
<html>
<Head> 
<meta http-equiv="Content Type" content="text/html; charset=utf-8"/>
<title>Smells Like Bakin"</title>
</head>
<h1> Laura's First Website From Scratch </h1>
<body>
<img src="stoplight.jpg" alt="This is Alternate text for Stoplight">
<ul class="nav">
<li> <a href="#"> About </a> </li>
<li> <a href="#"> Contact </a> </li>
<li> <a href="#"> Directions </a> </li>
<li class="last"> <a href="#"> Pricing </a> </li>
</ul>
<div id="intro">
<h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that create ironically delicious desserts!</h1>
<p><a href="#" class="btn">Browse Our Cupcakes</a></p>
</div>
<img src="Shark22.jpg" alt="This is Alternate text for Shark22">
<div id="featured-cupcake">
<h2>Cupcake of the Week</h2>
<p> Our featured cupcake this week is the <a href="#"> Avocado Chocolate Cupcake <a/> Its strange combination of flavors will taste awful.</p>
</div>
</body>
</html>```

Laura, if you could zip the project and upload it to Dropbox, or some place similar, I could take a look for you. Also, it looks like your image: Shark22.jpg is capitalized. Make sure the image names and capitalization is exact.

Hi Dustin, I can't remember my dropbox password. Can I email it to you? Its literally three small files.