One Solution5:42 with Guil Hernandez
This video covers one solution to the file paths challenge.
Hi there, were you able to write most or all of the file paths for 0:00 this practice session? 0:03 If not, that's okay. You can watch my solution, 0:04 compare it to what you wrote, and then try to recreate it yourself. 0:06 The goal was to display the images and 0:10 link the HTML files together using relative paths. 0:12 Now I'll show you my solution, 0:15 you can also reference my code when you download the project files. 0:16 First up, in the file index.html, I set the home link and 0:20 the navigation to point to index.html. 0:21 Now, about that HTML is inside 0:23 a folder called pages. 0:28 So to link to the About page, I set the path to pages/about.html. 0:33 And I set relative URL paths to display the dog images too. 0:37 For example, the header image should point to the file header-img.jpg, 0:42 which is located in the images folder. 0:46 So I set the path to images/header-img.jpg. 0:49 Now the images and 0:53 the featured stories are a little bit different because the image files 0:54 are located in a sub-folder that's within the images folder named featured. 0:58 So I had to include featured in the file path with images/featured/beagle.jpg, 1:03 images/featured/golden.jpg and so on. 1:11 Over in the browser, you can see that all the images display correctly, good. 1:15 Next, the articles read more links should click over to their 1:20 respective file located inside the posts folder. 1:25 So the path to each file should include post/ followed by the file name. 1:28 In this case, posts/beagle.html, 1:34 posts/golden.html, and posts/husky.html. 1:38 And now you can click over to each link from the home page. 1:43 That's it for index.html. 1:54 Over in about.html, 1:57 I pointed the navigation links to their respective files. 1:59 This time, since about.html is inside a folder, I had to adjust the home links 2:03 path to indicate where index.html is in relation to about.html. 2:10 Remember, to link to a file that's inside a parent or 2:16 root folder from within a child folder, you need to include ../ in the path. 2:20 So I set the path to ../index.html. 2:26 This instructs the browser to move out of the current directory, 2:30 which is pages, then reference index.html. 2:35 And now I can click over to the home page from the About page. 2:39 And I used a similar path to display the header image with 2:46 ../images/header-img.jpg. 2:51 This instructs the browser to go one directory back from the current one, 2:54 then move inside the images directory and display the file header-img.jpg. 2:59 All right, that's it for the About page. 3:05 So finally inside the posts folder, 3:08 I linked the home and about pages to the navigation. 3:11 For the home link, I used a path that instructs the browser to 3:16 move out of the current directory, then reference index.html. 3:20 Again, about.html is within a folder names pages. 3:24 So I had to go backward one directory then inside the pages 3:28 directory to reference about.html. 3:32 And to displace the image associated with the post, 3:36 I used that URL path ../images/featured followed by the file name, 3:40 in this case, beagle.jpg. 3:46 So again, we're moving one directory backward, then going inside the images 3:48 folder and going inside the featured folder to point to the image file. 3:53 And I use the same approach in all three post files for the navigation and images. 3:58 So over in the browser, I can click to a story and see that everything works. 4:03 Hopefully you were able to complete this HTML practice session successfully. 4:17 If not, try starting over and writing the paths again without looking at my version. 4:21 I do have one more challenge for you, and it's a good one. 4:27 You've learned that in web design and front-end web development, CSS or 4:30 cascading style sheets provides the presentation layer and 4:34 describes the visual style of webpages. 4:38 So in the project, 4:40 you'll find a folder named css which contains a style sheet named style.css. 4:41 Now, you don't need to worry about any of the code written in this file, 4:46 just know that it applies styling to parts of the page. 4:50 And you'll get to see those styles by linking this style sheet to each HTML 4:53 file using the link element and URL path that points to style.css. 4:57 In fact, I'll get you started by adding the link element 5:02 inside the head of index.html. 5:06 HTML uses the link tag to link to external resources, most commonly style sheets. 5:09 Then I'll add the rel attribute to indicate that the resource is a style 5:15 sheet, and the href attribute provides the path to the style sheet. 5:20 I'll leave the value blank, and 5:25 now it's up to you to link each page to the style sheet. 5:27 And if you've linked everything up correctly, 5:30 your site should look like this. 5:32 In the next video, I'll show you my solution. 5:34
You need to sign up for Treehouse in order to download course files.Sign up