1 00:00:00,368 --> 00:00:03,309 Hi there, were you able to write most or all of the file paths for 2 00:00:03,309 --> 00:00:04,485 this practice session? 3 00:00:04,485 --> 00:00:06,261 If not, that's okay. You can watch my solution, 4 00:00:06,261 --> 00:00:10,030 compare it to what you wrote, and then try to recreate it yourself. 5 00:00:10,030 --> 00:00:12,090 The goal was to display the images and 6 00:00:12,090 --> 00:00:15,028 link the HTML files together using relative paths. 7 00:00:15,028 --> 00:00:16,330 Now I'll show you my solution, 8 00:00:16,330 --> 00:00:19,090 you can also reference my code when you download the project files. 9 00:00:20,130 --> 00:00:21,954 First up, in the file index.html, I set the home link and 10 00:00:21,954 --> 00:00:23,268 the navigation to point to index.html. 11 00:00:23,268 --> 00:00:28,636 Now, about that HTML is inside 12 00:00:28,636 --> 00:00:33,120 a folder called pages. 13 00:00:33,120 --> 00:00:37,436 So to link to the About page, I set the path to pages/about.html. 14 00:00:37,436 --> 00:00:42,061 And I set relative URL paths to display the dog images too. 15 00:00:42,061 --> 00:00:46,990 For example, the header image should point to the file header-img.jpg, 16 00:00:46,990 --> 00:00:49,541 which is located in the images folder. 17 00:00:49,541 --> 00:00:53,773 So I set the path to images/header-img.jpg. 18 00:00:53,773 --> 00:00:54,799 Now the images and 19 00:00:54,799 --> 00:00:58,905 the featured stories are a little bit different because the image files 20 00:00:58,905 --> 00:01:03,509 are located in a sub-folder that's within the images folder named featured. 21 00:01:03,509 --> 00:01:11,415 So I had to include featured in the file path with images/featured/beagle.jpg, 22 00:01:11,415 --> 00:01:15,662 images/featured/golden.jpg and so on. 23 00:01:15,662 --> 00:01:20,814 Over in the browser, you can see that all the images display correctly, good. 24 00:01:20,814 --> 00:01:25,094 Next, the articles read more links should click over to their 25 00:01:25,094 --> 00:01:28,644 respective file located inside the posts folder. 26 00:01:28,644 --> 00:01:34,933 So the path to each file should include post/ followed by the file name. 27 00:01:34,933 --> 00:01:38,599 In this case, posts/beagle.html, 28 00:01:38,599 --> 00:01:43,494 posts/golden.html, and posts/husky.html. 29 00:01:43,494 --> 00:01:46,382 And now you can click over to each link from the home page. 30 00:01:54,635 --> 00:01:57,421 That's it for index.html. 31 00:01:57,421 --> 00:01:59,207 Over in about.html, 32 00:01:59,207 --> 00:02:03,907 I pointed the navigation links to their respective files. 33 00:02:03,907 --> 00:02:10,522 This time, since about.html is inside a folder, I had to adjust the home links 34 00:02:10,522 --> 00:02:16,164 path to indicate where index.html is in relation to about.html. 35 00:02:16,164 --> 00:02:20,357 Remember, to link to a file that's inside a parent or 36 00:02:20,357 --> 00:02:26,615 root folder from within a child folder, you need to include ../ in the path. 37 00:02:26,615 --> 00:02:30,937 So I set the path to ../index.html. 38 00:02:30,937 --> 00:02:35,871 This instructs the browser to move out of the current directory, 39 00:02:35,871 --> 00:02:39,470 which is pages, then reference index.html. 40 00:02:39,470 --> 00:02:43,559 And now I can click over to the home page from the About page. 41 00:02:46,311 --> 00:02:51,156 And I used a similar path to display the header image with 42 00:02:51,156 --> 00:02:54,490 ../images/header-img.jpg. 43 00:02:54,490 --> 00:02:59,955 This instructs the browser to go one directory back from the current one, 44 00:02:59,955 --> 00:03:05,878 then move inside the images directory and display the file header-img.jpg. 45 00:03:05,878 --> 00:03:08,007 All right, that's it for the About page. 46 00:03:08,007 --> 00:03:11,379 So finally inside the posts folder, 47 00:03:11,379 --> 00:03:16,175 I linked the home and about pages to the navigation. 48 00:03:16,175 --> 00:03:20,104 For the home link, I used a path that instructs the browser to 49 00:03:20,104 --> 00:03:24,434 move out of the current directory, then reference index.html. 50 00:03:24,434 --> 00:03:28,417 Again, about.html is within a folder names pages. 51 00:03:28,417 --> 00:03:32,977 So I had to go backward one directory then inside the pages 52 00:03:32,977 --> 00:03:36,114 directory to reference about.html. 53 00:03:36,114 --> 00:03:40,361 And to displace the image associated with the post, 54 00:03:40,361 --> 00:03:46,250 I used that URL path ../images/featured followed by the file name, 55 00:03:46,250 --> 00:03:48,677 in this case, beagle.jpg. 56 00:03:48,677 --> 00:03:53,777 So again, we're moving one directory backward, then going inside the images 57 00:03:53,777 --> 00:03:58,357 folder and going inside the featured folder to point to the image file. 58 00:03:58,357 --> 00:04:03,103 And I use the same approach in all three post files for the navigation and images. 59 00:04:03,103 --> 00:04:08,111 So over in the browser, I can click to a story and see that everything works. 60 00:04:17,248 --> 00:04:21,362 Hopefully you were able to complete this HTML practice session successfully. 61 00:04:21,362 --> 00:04:24,801 If not, try starting over and writing the paths again without looking at my version. 62 00:04:27,377 --> 00:04:30,827 I do have one more challenge for you, and it's a good one. 63 00:04:30,827 --> 00:04:34,922 You've learned that in web design and front-end web development, CSS or 64 00:04:34,922 --> 00:04:38,237 cascading style sheets provides the presentation layer and 65 00:04:38,237 --> 00:04:40,524 describes the visual style of webpages. 66 00:04:40,524 --> 00:04:41,709 So in the project, 67 00:04:41,709 --> 00:04:46,679 you'll find a folder named css which contains a style sheet named style.css. 68 00:04:46,679 --> 00:04:50,322 Now, you don't need to worry about any of the code written in this file, 69 00:04:50,322 --> 00:04:53,086 just know that it applies styling to parts of the page. 70 00:04:53,086 --> 00:04:57,892 And you'll get to see those styles by linking this style sheet to each HTML 71 00:04:57,892 --> 00:05:02,325 file using the link element and URL path that points to style.css. 72 00:05:02,325 --> 00:05:06,869 In fact, I'll get you started by adding the link element 73 00:05:06,869 --> 00:05:09,527 inside the head of index.html. 74 00:05:09,527 --> 00:05:15,167 HTML uses the link tag to link to external resources, most commonly style sheets. 75 00:05:15,167 --> 00:05:20,247 Then I'll add the rel attribute to indicate that the resource is a style 76 00:05:20,247 --> 00:05:25,600 sheet, and the href attribute provides the path to the style sheet. 77 00:05:25,600 --> 00:05:27,463 I'll leave the value blank, and 78 00:05:27,463 --> 00:05:30,529 now it's up to you to link each page to the style sheet. 79 00:05:30,529 --> 00:05:32,690 And if you've linked everything up correctly, 80 00:05:32,690 --> 00:05:34,174 your site should look like this. 81 00:05:34,174 --> 00:05:37,433 In the next video, I'll show you my solution.