Preview
Video Player
00:00
00:00
One Solution
5:42This video covers one solution to the "Practice File Paths" challenge.
Hi there, were you able to write most or
all of the file paths for
0:00
this practice session?
0:03
If not, that's okay.
You can watch my solution,
0:04
compare it to what you wrote, and
then try to recreate it yourself.
0:06
The goal was to display the images and
0:10
link the HTML files together
using relative paths.
0:12
Now I'll show you my solution,
0:15
you can also reference my code when
you download the project files.
0:16
First up, in the file index.html,
I set the home link and
0:20
the navigation to point to index.html.
0:24
Now, about.html is inside
0:27
a folder called pages.
0:30
So to link to the About page,
I set the path to pages/about.html.
0:33
And I set relative URL paths
to display the dog images too.
0:37
For example, the header image should
point to the file header-img.jpg,
0:42
which is located in the images folder.
0:46
So I set the path to
images/header-img.jpg.
0:49
Now the images and
0:53
the featured stories are a little bit
different because the image files
0:54
are located in a sub-folder that's
within the images folder named featured.
0:58
So I had to include featured in the file
path with images/featured/beagle.jpg,
1:03
images/featured/golden.jpg and so on.
1:11
Over in the browser, you can see that
all the images display correctly, good.
1:15
Next, the articles' read more
links should click over to their
1:20
respective file located
inside the posts folder.
1:25
So the path to each file should include
post/ followed by the file name.
1:28
In this case, posts/beagle.html,
1:34
posts/golden.html, and posts/husky.html.
1:38
And now you can click over to
each link from the home page.
1:43
That's it for index.html.
1:54
Over in about.html,
1:57
I pointed the navigation links
to their respective files.
1:59
This time, since about.html is inside
a folder, I had to adjust the home link's
2:03
path to indicate where index.html
is in relation to about.html.
2:10
Remember, to link to a file
that's inside a parent or
2:16
root folder from within a child folder,
you need to include ../ in the path.
2:20
So I set the path to ../index.html.
2:26
This instructs the browser to move
out of the current directory,
2:30
which is pages, then reference index.html.
2:35
And now I can click over to
the home page from the About page.
2:39
And I used a similar path to
display the header image with
2:46
../images/header-img.jpg.
2:51
This instructs the browser to go one
directory back from the current one,
2:54
then move inside the images directory and
display the file header-img.jpg.
2:59
All right, that's it for the About page.
3:05
So finally inside the posts folder,
3:08
I linked the home and
about pages to the navigation.
3:11
For the home link, I used a path
that instructs the browser to
3:16
move out of the current directory,
then reference index.html.
3:20
Again, about.html is within
a folder names pages.
3:24
So I had to go backward one
directory then inside the pages
3:28
directory to reference about.html.
3:32
And to displace the image
associated with the post,
3:36
I used that URL path ../images/featured
followed by the file name,
3:40
in this case, beagle.jpg.
3:46
So again, we're moving one directory
backward, then going inside the images
3:48
folder and going inside the featured
folder to point to the image file.
3:53
And I use the same approach in all three
post files for the navigation and images.
3:58
So over in the browser, I can click to
a story and see that everything works.
4:03
Hopefully you were able to complete
this HTML practice session successfully.
4:17
If not, try starting over and writing the
paths again without looking at my version.
4:21
I do have one more challenge for
you, and it's a good one.
4:27
You've learned that in web design and
front-end web development, CSS or
4:30
cascading style sheets provides
the presentation layer and
4:34
describes the visual style of webpages.
4:38
So in the project,
4:40
you'll find a folder named css which
contains a style sheet named style.css.
4:41
Now, you don't need to worry about
any of the code written in this file,
4:46
just know that it applies
styling to parts of the page.
4:50
And you'll get to see those styles by
linking this style sheet to each HTML
4:53
file using the link element and
URL path that points to style.css.
4:57
In fact, I'll get you started
by adding the link element
5:02
inside the head of index.html.
5:06
HTML uses the link tag to link to external
resources, most commonly style sheets.
5:09
Then I'll add the rel attribute to
indicate that the resource is a style
5:15
sheet, and the href attribute
provides the path to the style sheet.
5:20
I'll leave the value blank, and
5:25
now it's up to you to link
each page to the style sheet.
5:27
And if you've linked
everything up correctly,
5:30
your site should look like this.
5:32
In the next video,
I'll show you my solution.
5:34