Preview
Video Player
00:00
00:00
Introducing the Practice
4:53This video introduces the challenge relating to File Paths that you'll be working to complete.
[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