Preview Files in a Browser1:57 with Treasure Porth
Open your project in a browser to preview it or view any changes.
If you've used Treehouse's workspaces, you've probably used the preview button 0:00 which opens your index.html page in another tab of your web browser. 0:05 Workspaces actually runs a web server as well, so 0:09 that the page acts just like when you put up on the web. 0:13 However, when you have your files on your own computer, 0:16 you won't be viewing them through a web server, unless you've set one up. 0:19 However, you can preview a webpage by opening the index.html file in a browser. 0:23 Here in VS Code I have some code for a webpage. 0:28 To open it in a browser, I can use my computer's file explorer to find the file 0:31 on my computer and double click it. 0:36 Your computer should know to open an html file in a browser by default. 0:38 That works, 0:43 but VS Code offers an easy way to find the file on my computer and open it. 0:44 I could always right click on the file name and choose Reveal in Finder, and 0:49 then double click the file I want to open in my browser. 0:53 But I can also right click on the file and choose Copy Path. 0:57 Then I can open a browser like Chrome or Firefox. 1:02 Let's close all this really quick. 1:05 And I can use Command or Ctrl+V to copy the path into my browser. 1:08 And when I press Enter, the browser displays my project. 1:14 To make a change to my file and preview those changes, 1:18 I can go back to Visual Studio Code, make a change. 1:22 Save, then go back to my browser and refresh, and there are my changes. 1:32 You now know enough about text editors to start coding way on your own projects. 1:38 But there are many more cool things a text editor can do 1:43 to help you be more organized and productive. 1:46 Some features come automatically with your text editor, and 1:48 some features are extras that you'll need to install. 1:51 We'll learn more about both in the upcoming videos. 1:54
You need to sign up for Treehouse in order to download course files.Sign up