- Linking to Sections of a Web Page 5:38
- Root-relative Paths 2:54
- Links and Paths Challenge 3 objectives
- Link to Email 2:31
- HTML Entities and Reserved Characters 4:36
- Email Links and Entities Challenge 2 objectives
- Adding Developer Notes with HTML Comments 2:04
- Working on a Website Project Locally 4:22
- Next Steps 3:20
- Going Further with HTML Review 6 questions
Preview
Video Player
00:00
00:00
Working on a Website Project Locally
4:22You'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 forward slash in
1:53
root relative paths always refer
to the root folder of the site.
1:56
So only web servers understand
root relative 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 two directories,
2:56
and for 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