1
00:00:01,660 --> 00:00:05,520
You're not always going to work on
projects using the Workspaces Editor.

2
00:00:05,520 --> 00:00:08,400
You'll often work on websites
locally on your own computer

3
00:00:08,400 --> 00:00:12,630
using a text editor like Atom,
Sublime Text, or Visual Studio Code.

4
00:00:12,630 --> 00:00:15,580
So in this video, I'll teach you how
to download your project files from

5
00:00:15,580 --> 00:00:17,580
Workspaces to your local drive.

6
00:00:17,580 --> 00:00:19,970
And how to open and preview the files.

7
00:00:19,970 --> 00:00:23,370
First in your workspace menu, select file,

8
00:00:23,370 --> 00:00:27,488
download workspace then
open your downloads folder.

9
00:00:27,488 --> 00:00:32,670
Drag the project.zip file to
your desktop and open it.

10
00:00:36,190 --> 00:00:40,720
Workspaces keeps all related files
in a single folder named Project.

11
00:00:40,720 --> 00:00:44,000
That mirrors the structure
of the site in Workspaces.

12
00:00:44,000 --> 00:00:46,610
The Project folder can live
anywhere on your computer.

13
00:00:46,610 --> 00:00:49,760
But it's best to keep it in a place
where you can easily access it,

14
00:00:49,760 --> 00:00:52,160
like your desktop or home directory.

15
00:00:52,160 --> 00:00:55,110
You can view an html page in
the browser from your local

16
00:00:55,110 --> 00:00:57,740
project folders several different ways.

17
00:00:57,740 --> 00:01:01,880
Double clicking an html file will open
the file in your default browser.

18
00:01:02,980 --> 00:01:07,644
Also, over in your browser menu,
I'm on Chrome, go to file,

19
00:01:07,644 --> 00:01:10,990
open file, and
select the html file to open.

20
00:01:15,090 --> 00:01:19,817
Or in most browsers, like Chrome and
Firefox, you can simply select and

21
00:01:19,817 --> 00:01:23,940
drag a HTML file into the browser
window and it will open a page.

22
00:01:24,950 --> 00:01:28,320
Now that the project is running
locally on my computer.

23
00:01:28,320 --> 00:01:32,460
I'm noticing a few problems with how
my links and images are working.

24
00:01:32,460 --> 00:01:34,960
For example, clicking to an article.

25
00:01:34,960 --> 00:01:39,690
Then clicking a navigation link
returns an index of page that lists

26
00:01:39,690 --> 00:01:41,470
a bunch of directories.

27
00:01:41,470 --> 00:01:43,770
Instead of taking me to the homepage.

28
00:01:43,770 --> 00:01:46,480
And the image no longer
appears in the article.

29
00:01:46,480 --> 00:01:49,864
Well this is happening
because we used root

30
00:01:49,864 --> 00:01:53,630
relative paths in our
links in article images.

31
00:01:53,630 --> 00:01:56,324
Remember, the forward slash in

32
00:01:56,324 --> 00:02:01,950
root relative paths always refer
to the root folder of the site.

33
00:02:01,950 --> 00:02:04,510
So only web servers understand
root relative paths.

34
00:02:04,510 --> 00:02:08,571
So unless you're building your project on
a web server running on your computer.

35
00:02:08,571 --> 00:02:12,536
Root relative paths will not work as
expected because your computer will

36
00:02:12,536 --> 00:02:14,150
not understand them.

37
00:02:14,150 --> 00:02:19,970
Instead, the links navigate me to the root
of file system, which is not what I want.

38
00:02:21,010 --> 00:02:26,620
So the solution here is to change the nav
links back to document relative links,

39
00:02:26,620 --> 00:02:28,080
listing the path to the file.

40
00:02:29,250 --> 00:02:31,840
I'm using Atom as my text editor.

41
00:02:31,840 --> 00:02:37,483
In Atom and in most text editors, you
open your project files by clicking File,

42
00:02:37,483 --> 00:02:40,951
Open, selecting the folder
you want to work on.

43
00:02:40,951 --> 00:02:44,007
In our case it's project
then clicking open, and

44
00:02:44,007 --> 00:02:47,760
this brings up the project
in my text editor.

45
00:02:47,760 --> 00:02:52,640
So now I can change the nav
links in article.html

46
00:02:52,640 --> 00:02:56,490
from root relative links
to relative links.

47
00:02:56,490 --> 00:03:02,620
So I'll add two sets of ../
to move up two directories,

48
00:03:02,620 --> 00:03:05,751
and for the home link
I specify index.html.

49
00:03:05,751 --> 00:03:08,249
Let's go ahead and copy this path and

50
00:03:08,249 --> 00:03:13,690
paste it in front of the hash symbol for
about, articles and contact.

51
00:03:13,690 --> 00:03:15,930
And let's not forget to
adjust the image path.

52
00:03:21,750 --> 00:03:25,765
Going back to the browser and
refreshing the page, displays my image.

53
00:03:25,765 --> 00:03:29,730
And if I click about articles and contact,

54
00:03:29,730 --> 00:03:35,050
it takes me back to the index.html file
to these specific sections in the page.

55
00:03:35,050 --> 00:03:35,550
Perfect.

56
00:03:37,150 --> 00:03:43,620
Root relative links can also display a not
found error page when linking to a file.

57
00:03:43,620 --> 00:03:51,661
So for example, in index.html, including
a forward slash before the articles path

58
00:03:55,041 --> 00:04:01,381
navigates me to a 'your file was not
found' page instead of the article page.

59
00:04:01,381 --> 00:04:04,880
Now looking at the URL in the address bar,

60
00:04:04,880 --> 00:04:06,430
notice how the browser is looking for

61
00:04:06,430 --> 00:04:10,980
an articles, folder and
file at the root of the file system.

62
00:04:10,980 --> 00:04:13,151
Instead of the project
folder on the desktop.