In this video, undertake an exercise for embedding web resources such as images and CSS files using relative paths.
- [Instructor] Building websites often involves linking different files together, such as embedding an image in the html, or referencing a css file. When linking to files within the same project, use a relative path. The path is determined by where a file is located within the directory. So in this example, the index file is in the same folder as the css and image files. So, from index.html, the file path can map directly to the corresponding file names. If the file you're linking to is contained within a folder, like in our project files, the folder name must also be included in the file path. So, folder name, forward slash, then file name. Let's go back to our project files and update the image thumbnails using a relative file path. I'm currently using my own images which is saved inside of the Images folder. You can see them here in the sidebar. I've already updated the source value with the path from index.html to my Image files which is the Images folder, forward slash, file name and the file extension. I've also updated the alt attribute as well to provide a description for screen readers and make the images accessible. Once your file path is updated to point to the correct image file, open it in your browser. If you can't see your images, double check the source value. It should match the name of your folder and the exact name of your image file including the file extension. By default, images are displayed in the same dimensions as the file size which is currently 600 pixels wide. If you're using a high pixel density display, the images will appear a little bit blurry. So, let's go ahead and create a css file to resize the images. So back in the editor, I'm going to go File, New, and create a css file. It can be named anything, but some common conventions are simply styles, or global, or the project name, like portfolio. I'm going to call mine styles. Don't forget to add the css file extension, and I'm going to save it to my CSS folder. And there it is. Back in the html file, let's add a link tag in the head section. It can go anywhere in the head section, but I like to put mine just before the closing tag. In Atom and many other editors, there is this autocomplete feature for writing html. Type in the element you want to add, in this case it's link, but without the angled brackets, and press tab. The editor completes the tag, and all I have to do is update the href value to point to our css file which is css/, I named mine styles, so I'm going to update this and save it. You may have noticed that I deleted this forward slash that was automatically added in with the autocomplete feature. We need to remove that because we're using a relative path. We'll talk more about absolute paths in the next lesson. When starting a new project, I like to do a small css test just to make sure the files are linked together properly. Usually, I'll make a change that's hard to miss, like changing the background color, but since we just talked about resizing images for retina and non-retina displays, let's add that style in. I'll be going over the syntax for writing css in an upcoming lesson, but for now, let's add this snippet to your css file. img to select the images, opening and closing curly brackets, tab in once, just for readability, width: 300 pixels, and save your file. Don't forget to end the declaration with a semicolon. Now, let's check our changes. Refresh the browser. And this is why I like to do a short test with my files. I didn't see the image update, so I'm going to double check my href value. Here I have it listed as styles with an s, and here I've saved it just style. So, I'm going to go ahead and rename this file to styles.css. Now, let's go back to the webpage. There we go. So, if you're using a retina display, the images should appear less blurry now. If you're not using a retina display, the images should look the same but reduced down to 300 pixels wide. If you don't see this change, just like I did the first time I checked, double check your syntax, make sure your file names are the same, and make sure you've saved your files. Once you do see the changes, then you're all good and ready to move on to the next lesson.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts