Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice File Paths!
You have completed Practice File Paths!
Preview
This video covers one solution to the "Practice File Paths" challenge.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up