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
Laura Hill
13,674 PointsSwitch 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?
Dustin Matlock
33,856 PointsHey 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
14,545 PointsHey 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
45,783 PointsLaura,
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
Laura Hill
13,674 PointsThank 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.
Dustin Matlock
33,856 PointsHi Laura, to preview your code in the browser (using Chrome), you can right-click ⇒ View 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.
Toggling Between Applications for Faster Workflow
Unsubscribed User
6,144 PointsYou simply need to open your .html file with your web browser, Chrome, Firefox, Safari, as you want :)
Unsubscribed User
6,144 PointsToo late, Erik said everything you need to know !
Matt West
14,545 PointsHey 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 :)
Laura Hill
13,674 PointsThank 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.
Laura Hill
13,674 PointsHello 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.
Laura Hill
13,674 Points<!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>```
Dustin Matlock
33,856 PointsLaura, 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.
Laura Hill
13,674 PointsHi Dustin, I can't remember my dropbox password. Can I email it to you? Its literally three small files.
Laura Hill
13,674 PointsLaura Hill
13,674 PointsThanks everyone. Im in business. But what if I have numerous docs, such as this one, saved on my computer?
What am I missing?