Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video introduces the challenge relating to File Paths that you'll be working to complete.
Resources
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
[MUSIC]
0:00
Hi everyone, Guil here.
0:09
It's time for practice.
0:10
Practice helps make what you learn
stick and helps make you a faster and
0:11
better developer.
0:15
In this workshop you are going
to sharpen your HTML skills
0:16
by practicing writing file paths for
images and links.
0:19
This exercise is a follow-up to our videos
on working with images, text and links.
0:22
So if you haven't watched those yet,
0:26
I suggest that you watch them
before trying this challenge.
0:27
I've posted a link to the content in
the teacher's notes with this video.
0:30
To get started, go ahead and
launch the workspace with this video.
0:33
The workspace contains
files to a simple website
0:36
about dog stories called The Dog Paw Blog.
0:39
When you preview
index.html in the browser,
0:43
you should see a super simple navigation,
followed by headings and paragraph text.
0:45
Notice the broken images in the header and
in each of the stories.
0:51
Also, each story's read more link does
not link to a story page, as it should.
0:55
You've learned that you
link to other pages and
1:01
reference resources of your site,
like images,
1:04
by providing a file path that instructs
one file where another one is.
1:07
So in this workshop, you're going
to write file paths that point to
1:12
each of the images and links on the site.
1:15
Now the comments you'll see in each
HTML file are ignored by the browser.
1:18
So what's written a comment does
not appear in your web page.
1:23
In this case,
1:27
the comment contains instructions about
the file paths you need to write.
1:28
Remember, a file path describes
the location of a file
1:32
in a website's folder structure.
1:36
So pay close attention to where each
file is located in the project.
1:38
For example, all images are inside
the images folder, the featured story
1:42
files are in the posts folder and
the about file is in the pages folder.
1:47
You'll need to use relative
URLs in your file paths.
1:54
So these are URLs that depend on or
1:57
that are relative to where an HTML
file lives in the project structure.
1:59
All right, so first,
in the file index.html,
2:04
you'll need to set the paths in the
navigation links to point to the homepage,
2:09
index.html and the about page.
2:14
Then you're going to display all
the images using relative paths
2:18
that point to the image to display.
2:22
For example, you'll need to set
the src attribute of the header image
2:24
to point to header-img.jpg,
which is located in the images folder.
2:29
And you'll do the same for
the next image, beagle.jpg.
2:38
But this one's a little bit different,
2:42
because the image file is located in a
subfolder that's within the images folder.
2:45
Next here in this first article,
the read more link
2:55
should point to and
navigate a user to beagle.html.
3:00
Keep in mind that the file is
located inside the post folder.
3:05
And you're going to complete similar
tasks for all the remaining steps.
3:11
You'll display the images and
the golden retriever and husky stories,
3:15
and point their read more links
to the appropriate pages.
3:21
Next, over in pages/about.html,
3:31
you'll again point the navigation
links to their respective files,
3:35
but this time you're going to
be linking to index.html from
3:40
within the pages folder.
3:44
So you'll need to adjust
the link's path to indicate where
3:46
index.html is in relation to about.html.
3:50
And to display the image,
you'll also need to include a path that
3:55
indicates where header-img.jpg is,
in relation to about.html.
4:00
That's it for the about page.
4:12
So finally, in the posts folder,
4:14
you'll find three HTML files,
beagle, golden and husky.html.
4:17
In each file, you'll need to link
the pages to the navigation and
4:23
display the image
associated with each post.
4:28
Once again, each URL path should indicate
where the file you're pointing to
4:32
is in relation to a file that's
inside the posts folder.
4:36
The goal is to get your HTML
pages to link together and
4:42
display the images like
this when you're done.
4:46
So good luck, have fun and in the next
video, I'll walk you through my solution.
4:49
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