Working on a Website Project Locally4:22 with Guil Hernandez
You'll often work on websites locally on your own computer, using a text editor. In this video, you'll download the project files from Workspaces to your local drive, then open and preview the files.
You're not always going to work on projects using the Workspaces Editor. 0:01 You'll often work on websites locally on your own computer 0:05 using a text editor like Atom, Sublime Text, or Visual Studio Code. 0:08 So in this video, I'll teach you how to download your project files from 0:12 Workspaces to your local drive. 0:15 And how to open and preview the files. 0:17 First in your workspace menu, select file, 0:19 download workspace then open your downloads folder. 0:23 Drag the project.zip file to your desktop and open it. 0:27 Workspaces keeps all related files in a single folder named Project. 0:36 That mirrors the structure of the site in Workspaces. 0:40 The Project folder can live anywhere on your computer. 0:44 But it's best to keep it in a place where you can easily access it, 0:46 like your desktop or home directory. 0:49 You can view an html page in the browser from your local 0:52 project folders several different ways. 0:55 Double clicking an html file will open the file in your default browser. 0:57 Also, over in your browser menu, I'm on Chrome, go to file, 1:02 open file, and select the html file to open. 1:07 Or in most browsers, like Chrome and Firefox, you can simply select and 1:15 drag a HTML file into the browser window and it will open a page. 1:19 Now that the project is running locally on my computer. 1:24 I'm noticing a few problems with how my links and images are working. 1:28 For example, clicking to an article. 1:32 Then clicking a navigation link returns an index of page that lists 1:34 a bunch of directories. 1:39 Instead of taking me to the homepage. 1:41 And the image no longer appears in the article. 1:43 Well this is happening because we used root 1:46 relative paths in our links in article images. 1:49 Remember, the fourth slash and 1:53 write broad of paths always refer to the root folder of the site. 1:56 So only web servers understand root relic of paths. 2:01 So unless you're building your project on a web server running on your computer. 2:04 Root relative paths will not work as expected because your computer will 2:08 not understand them. 2:12 Instead, the links navigate me to the root of file system, which is not what I want. 2:14 So the solution here is to change the nav links back to document relative links, 2:21 listing the path to the file. 2:26 I'm using Atom as my text editor. 2:29 In Atom and in most text editors, you open your project files by clicking File, 2:31 Open, selecting the folder you want to work on. 2:37 In our case it's project then clicking open, and 2:40 this brings up the project in my text editor. 2:44 So now I can change the nav links in article.html 2:47 from root relative links to relative links. 2:52 So i'll add two sets of ../ to move up to directories. 2:56 And from the home link I specify index.html. 3:02 Let's go ahead and copy this path and 3:05 paste it in front of the hash symbol for about articles and contact. 3:08 And let's not forget to adjust the image path. 3:13 Going back to the browser and refreshing the page, displays my image. 3:21 And if I click about articles and contact, 3:25 it takes me back to the index.html file to these specific sections in the page. 3:29 Perfect. 3:35 Root relative links can also display a not found error page when linking to a file. 3:37 So for example in index.html including a forward slash before the articles path. 3:43 Navigates me to a your file was not found page instead of the article page. 3:55 Now looking at the URL in the address bar. 4:01 Notice how the browser is looking for 4:04 an articles, folder and file at the root of the file system. 4:06 Instead of the project folder on the desktop. 4:10
You need to sign up for Treehouse in order to download course files.Sign up