Introducing the Practice

[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 that html, 3:31 you'll again point the navigation links to their respective files. 3:34 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 post 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