Creating HTML Files, Linking Between Pages, and Adding Your Own Images

hey welcome back to the bootcamp series thanks for tuning in for part four uh now up until this point everything we've done has been within the context of codepen in case you couldn't tell i'm a big fan of codepen however eventually we do need to get out of codepen and learn how to actually create our own files let's jump into the action and i can explain why that's the case so codepen is great but it does have limitations so if i start to create a new pen and imagine i have a headline my cool page and then below that i want to link to my about us page so i have an a element that says learn more about us and then for the href value here you would point towards another web page file however within the context of codepen you and i are not controlling our files so there's really no way for us to link to a separate page and linking to other pages is a big part of the heart and soul of the web so this is one big limitation with codepen also remember if we want to add a photograph there's no way in the free version of codepen to upload our own photographs or images instead we would have to click on assets and then photos and we would have to use one of these example placeholder images that's already online now that's okay for practicing but in the real world we want to be able to use our own photographs our own custom files okay and then finally perhaps the biggest limitation with codepen is that when we create something that we really like and we want to share with the world well we probably want our own domain right like our own.com and also we wouldn't want any of this part of the user interface of codepen we would just want the entire page to be our actual web page so for all of these reasons that i just discussed this is why we need to learn how to get out of codepen and start creating our own website files on our own computer this way we are in complete control and then when we're ready to go live or publish our website up onto the web it will be a piece of cake okay but the first step before we even worry about going live is just learning how to create files in the first place and when it comes to creating our own website files it all begins with having a text editing program on our computer now there are tons of different free text editors in the world but the industry standard by far is one called visual studio code it's completely free to use i don't believe the entire application is open source but the core of it that it's built upon is open source and it runs on windows mac and linux now again there are tons of other text editing programs that you can choose from and if you're more experienced with computers that's fine but if you're a bit of a beginner or if you're not very familiar with programming and coding in general i really recommend visual studio code the reason is because in future chapters in this bootcamp series when we get into programming and servers so on and so forth we're going to need to work with the command line and visual studio code has a built-in or integrated command line that's always just automagically pointing towards your current project now again if you're already pretty familiar with computers and you consider yourself more of a power user that's not a big deal however in general for most of us i strongly strongly recommend making visual studio code your text editor so right now go ahead and visit this website you can either google for visual studio code or the website domain is just code.visual and you can go ahead and pause this youtube video while you download and install this program the installation process should be fairly simple any and all of the default options are okay so just download the file open it install it and then come back and resume this video once you've opened the program welcome back at this point i'll assume that you've installed and opened vs code it should look something like this so how do we get started well we could create a new file but i would say 9 times out of 10 or 95 times out of a hundred instead of working with one individual file you'll probably want to work with an entire folder right sort of each project is its own folder so right now i want you to do this with me either on your desktop or in your documents folder or just anywhere on your computer that you can easily find again i want you to create a new folder so for example on my desktop i'm going to choose new folder and you could name the folder anything you like but why don't we name it my website okay now the idea is we want to open this folder as a whole with vs code now there are several different ways of doing that so back in the vs code program you could use the file open menu to open a folder or and this should work on windows mac and linux you can click and then drag and drop your new folder that you just created on top of a vs code window so for example if i click to drag this and then i drag it on top of the main vs code area right here perfect so now this area right here that's currently empty this will show me all of the files in this folder that i'm working with so do this with me in this empty area on the left hand side here we can right click and choose new file or you could also use this icon or button right here to create a new file in our folder either way then it's going to ask you to give a name for this file let's name it index dot html and this is a web page file now different pages will have different beginning parts of the name but all of them will end with dot html okay now with this file selected then over in this area we have an empty canvas where we can begin coding so right here i can type h1 and then hit tab just like in codepen and i'll say welcome and then right below that i'll hit p tab again the same tab triggers this code pen and say this is my amazing page okay now let's save this file and then i'll show you how to view it in your web browser so on windows you can just press control and s on your keyboard on mac it's command s or you could use the file save option up top okay but with this saved now let's try to open this in a browser so go ahead and find the folder that you just created okay here's our index.html file and now i just want you to drag and drop this file onto whatever web browser you're using so in my case here's google chrome we were just looking at the visual studio website a moment ago so if i just drag and drop this file on top of the web browser window awesome there we see our heading level one and a standard paragraph so at this point we already have our html code up and running so now this is just like codepen everything we've learned in the last three lessons about html can be applied here with that in mind our next logical question is probably well how do we add css well before we get to that first let me show you how to customize your visual studio code editor a bit so for example i think this code is a bit too small to easily read so to begin customizing your settings on windows you can press ctrl and comma on mac it's command and comma or up in the top menu you should be able to find either preferences or settings but basically we're just looking to get to this settings screen so just a few options from the top right about here we see editor font size so i'm just going to bump that up to maybe 17. and now back in this tab where we're working on index.html you can see we can actually read this now quite easily cool let me go ahead and close this settings tab for now and at this point let's learn how to add css to our page so first to be honest i oversimplified things when i let us just begin typing html content here so go ahead and delete everything in our html file so we have a completely clean and empty slate once again okay now at this point i want you to type in d o c so doc and then hit tab that's a useful snippet that vs code has for us we just type doc hit tab and then it gives us this sort of overall big picture skeleton of an html page now we never saw any of this code in codepen and that's because codepen sort of took care of this for us essentially this is information about our web page as a whole and then our actual content that visitors visually see that goes in here in the body area that's why in the previous lesson i pointed out that you can target the entire page by targeting body so for example in this head section where we see title this is what you see in the browser tab so if we change this from document to my page and then save this file and then in your web browser hit the reload or refresh icon well the page is empty but notice there is the title for this tab or this page my page so the idea is that this contains information about the page and then body contains the actual raw content so in the body area right here this is where we could have a heading level one and say welcome and then a paragraph the sky is blue if i save that and then refresh cool so now that we have this sort of overall skeleton set up now i can show you how we add css so in this head section maybe right below this title line so right here i'm going to drop down and then if you type link so link and then hit tab on your keyboard it'll automatically expand to this and this is how you link or attach or load a css or style sheet file so now in the href we just point towards a file now we haven't created a css file yet but you can imagine in just a moment we will so in the href value let's name it maybe style.css you can name the file anything it just needs to end with dot css okay so i'm going to save this and now over here in the sort of file or folder explorer area let's just create a new file in our project folder so right click new file let's name it that matching name style dot css okay and then in this new file maybe i'll target the heading level one curly brackets and say color red semicolon give that a save back in the browser you can refresh perfect now that we've successfully added css let's change gears and next let's learn how to link to a new separate page so maybe right about here what if we said read more about us or learn more about us and it was a link to the about us page well let's set that up so right below this paragraph we can just have an a element so you can just hit a and then tab now for the href value inside these quotes you just point towards another html file so we can just say about html in between the opening and closing a tags right here this is the actual text that you will click on so let's say learn more about us hit save now we just need to go create a new html file in our project folder with that matching name so over here we can say new file we need to give it that exact name of about html okay so that's a new empty file now in order to save a bunch of typing i would just go into index.html select everything so ctrl a or command a copy that into your clipboard back in the new file just paste it in and then just make a few changes so for the headline we could say the about page for this paragraph you can say our company has been around for a long time and then let's maybe change this link to take the visitors back to the home page so just change the href value to be index.html and then change the text you click on to say back to home page let's give that a save back in the browser if you reload your home page we see that link if i click on it awesome it takes me to the new page and then i should be able to click this to go back to the home page perfect okay so that's how you link to pages within your own project or your own domain but how would you link to another completely separate website so for example what if i wanted to have a link down here to my youtube page right which lives on a completely different domain or dot com well if i go to that totally different website that i want to link to and just select the entire url copy that into my clipboard back in vs code maybe on my home page down here i'll have a new paragraph with a link that says my youtube page and then for the href value if you just paste in your clipboard because it starts with https or http right and then call in slash your web browser knows that that should look out on a different website whereas if you don't have that your web browser is going to try to look locally or within the current domain that you're already on okay so if i save that and then refresh my home page i should be able to click on my youtube page yep and it works perfectly now sometimes you might want to open the link in a new tab so it doesn't actually navigate away from your page now doing this is actually a little bit controversial from an accessibility perspective there are people who say that you shouldn't assume that someone wants to open a page in a new tab but it's sort of an industry standard so i do want to show you how to do it essentially on that link you can just say so right after the opening tag or right after the href essentially you just give it a new attribute of target so you say target equals quotes and then let's say underscore blank give that a save if i refresh my home page now when i click on the youtube page it opens it in a brand new tab cool at this point let's change gears so now that we've added css and now that we know how to create multiple pages and link between them i think the next logical step is to learn how to add our own custom images or photographs to the page so the first step that i really can't help you with is just getting the photos either from your camera or your phone onto your computer okay but assuming you have a few photos you want to use the next step is to move them into our project folder so here on my computer's downloads folder i've downloaded a few images from the unsplash website if you don't have any photos from your camera or phone that you want to use you can use these unsplash photos as an example as well you just search for what you want and then click download but anyways once you have a few photos we just want to move them into our project folder so within our project folder right we named it my website you could just move the images directly in here but to stay organized you could create a subfolder and name it images or you could name it anything that just a name that makes sense now inside that images folder i'm going to drag and drop right or just move the files over okay now check this out back in vs code on my home page what if at the bottom of my page so after all of my other content before the closing body tag what if i wanted to add a photo down here well you would just say img and then hit tab that automatically expands into this code and now in the src or source attribute inside these quotes you just point towards one of your image files so we can look inside the images folder if you created a subfolder to stay organized so the folder name and then slash and then it would just be the file name so maybe i want to use my red dash panda file so just the file name most likely ends in jpeg let's give it an alt value of a red panda hit save now back in the browser on my page if i reload well we see good news and bad news so the good news is that we do see the image here the bad news is that it's such a large photograph that it doesn't work at all on my web page now let's go ahead and fix this from two different perspectives so perspective number one is we can use css to make the image be a flexible size but then even once we do that so perspective number two we do want to make sure that we resize the image so that we're not needlessly sending a large photograph to the visitors of our website what i'm getting at is modern cameras and phones they take photographs that are maybe five or six or seven thousand pixels wide whereas our web page is probably only ever going to need to display the photo at maybe a maximum of 1900 pixels wide so we don't want to send over huge files that not only are going to take a long time to appear but we're also needlessly wasting the data plan of our visitors okay but let's take things one step at a time before we worry about actually resizing the photographs so they're a smaller file size let's first just learn how to display them in a flexible manner with css so back in our text editor let's jump into our style.css file and usually what i do is just target the image so img that will select any and all images curly brackets and then i just say width colon 100 semicolon hit save now if i reload cool so that's going to resize the image to take up 100 percent of the available width this is a very flexible solution because you can see right now it's taking up 100 of the page however if i had a 400 pixel wide div in the image lived in that div well it would automatically resize to take up only 100 percent of that available space so in our previous lesson when we learned a little bit about flexbox and especially css grid and you might have multiple divs where each div is a column or an item you could just place an image in one of those divs and if you give it a width of 100 percent it's automatically going to squish down to fit that container or column now obviously you could also give your image a very specific width of 350 px and that works it's just that in a world with so many different device sizes right tiny phones big phones tablets laptops desktops i find that this approach doesn't usually work so i'm a much bigger fan of the 100 approach so for example with that in mind let me show you how i would set up maybe a three column grid of photographs right so what if i wanted all three of my photos to sit side by side well first let me show you the simple but not perfectly aligned way then after that i'll show you the perfectly aligned grid way of doing things so the super simplified way if we go into our index.html would just be to add my other two images so img this one is living in the images folder and it's named dog.jpg a corgi dog another image lives in that folder it's named cat.jpeg okay if i save that now obviously they're just going to sit one on top of each other because they're taking up a hundred percent of the width however the simple way although the alignment's not going to be perfect is you could just say each one should have a width of 30 percent and it's that simple because an image is an inline element instead of a block level element we don't need to do anything fancy or advanced in order to get them to sit side by side however the alignment and spacing using this approach is not perfect so the little gap in between each of the photos that is going to be the same size as a space in between two words and that's not a very precise unit of measurement also because we have no way of knowing that exact space between the photos we can't just give each photo a width of 33.33 percent to take up the full width notice that causes the third image to drop down to a new line because we're taking up more than a hundred percent of the available space right because we couldn't take into account the little random gap in between the photos so that's the simple approach and in some cases this simple approach can work just fine right you could set the width back to maybe 31 and that will safely be less than the total 100 percent and it works great however let me show you what i would do in situations where you want pixel perfect alignment and pixel perfect sizing so here's what i would do i would set their width back to 100 percent and then in the html i would wrap them so i'm just going to cut all three of them into my clipboard because i want them back in just a moment but i would wrap them in overall div so div tab and i'll give this div a class of photos then inside the div i'll paste back in my clipboard let me save that okay now in my style sheet i'll target that div that has a class of photos so dot photos i would say display grid i would say grid template dash columns 1fr 1fr 1fr semicolon and then if i want a little bit of spacing in between them i would just say grid column gap 20px go ahead and save that back in the browser refresh perfect so now they're taking up absolutely 100 of the available space with a pixel perfect 20 pixel gap in between and i will point out that you likely would not want to target every image globally on your page with this type of selector instead you'd probably want to say dot photos space image right so if i save and refresh it works just the same only now if you did have images somewhere else on your page and you didn't want them to be flexible like this well you could have the best of both worlds okay and i do want to point out that you don't need to have the images be the direct children of the flexbox or grid parent element so instead if you think back to our previous lesson where we had the nine cool features where each one was sort of a column and each one was a div you could absolutely use that exact same setup and have an image live inside one of those divs and as long as you're telling those images to have a width of 100 they will automatically squish down and be flexible to fit within their nearest container or their nearest parent cool at this point now that we've displayed our images in a flexible fashion now let's actually worry about the file size of our images because we want them to load quickly for our visitors and we don't want to needlessly waste the data plan or bandwidth of our visitors so for example we don't need to send a visitor a photo of a cat that's over 6 000 pixels wide if we know that we're only going to display it about this size because the smaller the image the smaller the file size meaning the faster it will load now in order to actually resize your image files you will need a piece of software if you have photoshop that's great although you definitely do not need photoshop there's a free program called that you could use to resize your image files or you don't need to download a program at all for example you could just visit this pixlr.com website and then try either their pixlr x or pixlr e i won't walk through it step by step but if you want to do a little bit of homework you can definitely use these to resize an image file and then the final option that i'll mention is something called figma figma is my recommendation for resizing your images not because it's necessarily the best tool for the job but because we're going to want to use figma anyways later on when we learn a little bit about vector illustration now figma is completely free to use you don't even need to enter a credit card or any sort of payment info if you want to try figma right now you can pause this video lesson okay and then once you actually have your figma account you can resume the video but here i am in a brand new empty figma document and i can just use this tool to create a frame so i can just drag and drop it and now i use this to create the size of the image i want so if you just create any size whatsoever then you can click on it and then over here you can control the width and height with numbers instead of having to click and drag so maybe i'll set the width to 800 pixels and i'll set the height to 500 okay so now that i know that that's going to be the exact size of the frame 800 by 500 i can just drop in a photo so if i just drag and drop my cat picture that's i think over 5000 pixels wide i can just drop it on top of figma there it is now in the layer column over here if i drag it onto frame one that restrains the photo to fit inside the frame so then if i click on the cat layer again i can just hold the shift key and then re-drag that cat photo so this not only lets me resize it exactly how i want but it also lets me essentially crop it exactly how i want and i know it's going to be that perfect 800 by 500. so now i want to actually export that so i can just click on frame over in the layer column and then down at the bottom of this right hand column i can click on export i want to export it as a jpeg okay and then just click export frame it's going to try to save the file i'll name it cat dash small it's going to save that into my downloads folder here it is now this new file is 400 kilobytes instead of the original cat file that was two and a half megabytes so i'm just going to drag that into my images folder and then back in vs code instead of cat.jpg i'll just use the new file cat dash small.jpg and now if i reload my web page well 800 pixels is more than enough for this image to look sharp when we're displaying it at this size now you can see the image is a bit shorter than the others so you would want to go in and crop your other images to use that exact same aspect ratio so i just randomly chose 800 by 500 but you get the idea if you want them to match you will want to crop them all the same finally if you want to learn even more about serving up perfectly optimized files for different device sizes you'll want to do a bit of independent research on a topic called responsive images and actually it's not just the physical size of the device screen it's also its pixel density ratio right because you could have two phones that are the same size physically but one screen crams way more pixels into it meaning in order for your images to look perfectly razor sharp you would need to send over a slightly larger image now getting into pixel density ratios and device sizes and responsive images is a tangent that i want you to research on your own if you're interested but keep in mind i don't want you to wander off on too many tangents throughout this boot camp series in fact in two videos from now i'm going to give you a strategy for taking notes and how to manage these different topics that you might want to research but at the same time you also don't want to get distracted with tangents so for now let's not worry about the science of serving up the perfectly sized image for the current user and device for now good enough can be good enough as long as you're not sending over some crazy six thousand pixel wide image that's multiple megabytes right as long as you've resized the image to a somewhat reasonable size well for now that's good enough let's talk about where we go from here so i'm going to give you a bit of homework for the first time in this series you don't need to spend a ton of time maybe just one evening but i want you to create a small website with information or content that you're comfortable sharing with the world so it could be about your pets it could be a few of your favorite recipes or just your interests in general or doesn't have to be about you it could be about anything i want you to create a website with at least two pages right i want there to be a link that visitors can click to jump back and forth between the pages also i want you to use css and everything we learned in the last two videos to make your pages actually look good and don't forget to add a few of your own images to the pages okay now let's assume you've completed your small website and you're ready to share it with the world well at the moment the files only live on your personal computer so if you look up in the address bar when you're viewing your pages in your browser it's just referring to your specific computer meaning you're the only person in the world that can view it however in our very next lesson we're going to learn how to take all of your project files right your html your css files your images and we're going to learn how to push them up onto the web and you'll have an address that you can share with your friends family colleagues in the entire world anyways i'm really looking forward to the next video and i hope you've been enjoying this bootcamp series so far take care and i'll see you in the next [Music] one you

Channel: LearnWebCode

Views: 12,187

Rating: 4.9540229 out of 5

Keywords:

Id: kuxRMgBXHO0

Length: 32min 8sec (1928 seconds)

Published: Wed Aug 19 2020