[MUSIC]

Hi everyone, Guil here.

It's time for practice.

Practice helps make what you learn stick and helps make you a faster and

better developer.

In this workshop you are going to sharpen your HTML skills

by practicing writing file paths for images and links.

This exercise is a follow-up to our videos on working with images, text and links.

So if you haven't watched those yet,

I suggest that you watch them before trying this challenge.

I've posted a link to the content in the teacher's notes with this video.

To get started, go ahead and launch the workspace with this video.

The workspace contains files to a simple website

about dog stories called The Dog Paw Blog.

When you preview index.html in the browser,

you should see a super simple navigation, followed by headings and paragraph text.

Notice the broken images in the header and in each of the stories.

Also, each story's read more link does not link to a story page, as it should.

You've learned that you link to other pages and

reference resources of your site, like images,

by providing a file path that instructs one file where another one is.

So in this workshop, you're going to write file paths that point to

each of the images and links on the site.

Now the comments you'll see in each html file are ignored by the browser.

So what's written a comment does not appear in your web page.

In this case,

the comment contains instructions about the file paths you need to write.

Remember, a file path describes the location of a file

in a website's folder structure.

So pay close attention to where each file is located in the project.

For example, all images are inside the images folder, the featured story

files are in the posts folder and the about file is in the pages folder.

You'll need to use relative URLs in your file paths.

So these are URLs that depend on or

that are relative to where an HTML file lives in the project structure.

All right, so first, in the file index.html,

you'll need to set the paths in the navigation links to point to the homepage,

index.html and the about page.

Then you're going to display all the images using relative paths

that point to the image to display.

For example, you'll need to set the src attribute of the header image

to point to header-img.jpg, which is located in the images folder.

And you'll do the same for the next image, beagle.jpg.

But this one's a little bit different,

because the image file is located in a subfolder that's within the images folder.

Next here in this first article, the read more link

should point to and navigate a user to beagle.html.

Keep in mind that the file is located inside the post folder.

And you're going to complete similar tasks for all the remaining steps.

You'll display the images and the golden retriever and husky stories.

And point their read more links to the appropriate pages.

Next, over in pages about that html,

you'll again point the navigation links to their respective files.

But this time you're going to be linking to index.html from

within the pages folder.

So you'll need to adjust the link's path to indicate where

index.html is in relation to about.html.

And to display the image, you'll also need to include a path that

indicates where header-img.jpg is, in relation to about.html.

That's it for the about page.

So finally, in the post folder,

you'll find three html files, beagle, golden and husky.html.

In each file, you'll need to link the pages to the navigation and

display the image associated with each post.

Once again, each URL path should indicate where the file you're pointing to

is in relation to a file that's inside the posts folder.

The goal is to get your HTML pages to link together and

display the images like this when you're done.

So good luck, have fun and in the next video, I'll walk you through my solution.