HTML & CSS Tutorial - Ways to code images...and how to do it well

Key Takeaways

hey there we are on the home stretch of how to build a website from the very beginning we've gotten a long ways and we're going to get a lot of the wrap-up work done in this video now if you've missed any of the videos before I'm going to put a link in the description to the whole playlist so in this video we're dealing with images and I've specifically left images and content out because so much of web development has already happened it happens in the layout all of web development or all of HTML and CSS development should I say is layout and then content that goes in those layout blocks so we've done the layout we've done a lot of the hard work already and it might not look like much but we've gotten a lot of the website done already so there's two ways we're going to add images into this to really take it a long way and make it look like a complete website so the two ways you add images is by simply adding an IMG tag which instead of adding an H1 with text will add an image with a picture in it um the IMG tag is used when you want to add an image that's actually considered a part of content so instead of inserting text I would insert an image that is considered a piece of the article so to speak uh the other main way that you actually use way more often is using CSS to add a background image to things so in this case uh for this header which is this black box here I'd use CSS to make a background image on that whole header it's not considered a part of the content it's a part of the design which is why you use it a whole lot more because web pages uh in terms of images are way more design than content so those are the two ways we're going to get into and this video might be a little bit longer because there's a lot of dialogue there's a lot more that I want to describe as I'm going uh to teach you how to use images appropriately in your web pages so stay tuned there's a lot of great information in this one uh but first we need some images to do that I looked up Artis and bakery and lo and behold there's one in Edwardsville Illinois um so we're going to snatch some images for this to use on our website which is not legal to do uh but for practicing and developing at home it's a great idea basically just right click on any image save image as so find any images you like right click on an image save image as so I've saved some images here let's go close that out um and free promo for you Artis and bakery um and so I've got an images folder now that's important to know where you put those images just like referencing CSS you've got to reference the images where they are so Images slash and then here's all my images I got a logo which is a PNG pgs are great because they can be transparent as you can see the background is showing through and then I've got a hero I'm going to use this for the banner here then I've got good coffee and Breads and I'm going to use those in these blocks here and I think I'm going to turn them into circles so there's my images let me go close that folder view out and the RADS um and so let's go ahe and get started let's start up here with the header I'm going to make a menu add a logo here in the middle then I'm going to make a background image up here this is going to be using our first method which is CSS for background images so the first thing I'm going to do here is I'm going to write in the middle put the logo I'm going to add an Li with an a tag um and I'm also going to make this an a tag because I want when you click on the logo for it to go to the homepage that's kind of a normal thing to do uh you want that logo to always take you home and I'm going to add a title here I'm going to say Artis Bakery logo uh so there we go that is now going to add a link up there um which needs to be a logo and I intentionally added this text here because it's a good idea again to always make it semantic It should read like what it actually is and the reason that's important is because there's a lot of people out there that are visually impaired visually disabled and they're going to use screen readers to visit your website and they can fully browse the internet with a screen reader as long as the web developers do it semantically correct uh nobody wants to be that jerk that builds a business a building that doesn't have a wheelchair ramp right and you don't want to be the jerk that builds a website that people can't view with a screen reader when they're visually disabled or impaired uh because you just didn't take the time to add in a couple little V little text elements so as you can see just by reading this it doesn't matter how it looks I know that this is the logo and it's going to take me to the homepage so now I can go over to CSS and actually turn this into a pretty logo uh first of all I'm going to add a class logo so header class logo can now be targeted there's the logo and there's the a tag inside of the logo Li and let me give this thing a background color of red I always like to give it a background color when I'm working with something just so I can see what that box is doing I'm going to give it a width of three 300 and this will do nothing because it's display inline by default I need to change this to display inline block and now boom 300 wide and then I can also give it a height here let's go like 80 pixels uh and now that that's going I can get rid of this text a little trick that you can use to get rid of text is called text indent and then since it's display block I can tell the text to just kind of go way far left so I'm going to go negative 9999 pixels and that's going boom way off the screen to where no one will ever see it uh what's great about this is again it's semantically correct you can read that it's a link and you can read that the link text says Artisan Bakery logo but you're never going to see it so now that that's there I can add a background image now before I add a background image let me describe a little bit more of what this background property does this is actually Shand uh if you'll remember margin is shorthand for uh margin top margin right margin bottom margin left you can actually add a bunch of things in there uh background is the same way it's background color uh background image uh repeat it just keeps going so if you're going to do anything more than color or image uh then I like to use the actual broken out ones background color red and that's going to do the exact same thing just like you can break out margin right margin top you can break out background and there are a lot of options you can see if I just do that there's a lot of options here that I can use for background so let's go background image and let's go URL which means we're going to pull in an image and then I open and close the parenthesis now in quotes in here I just go pick my image images logo.png and boom I got my logo in there awesome and I also got rid of the background color now you can notice that this logo is a lot bigger than I actually want it to display this is the first important thing about images on the web make your images double the size and then shrink them down to the size you want inside the browser this is simply because not all devices have the same pixel resolution I don't know if you follow the tech specs on new iPhones and stuff like that but they're always trying to cram as many more pixels onto the screen as possible to make it as smooth and as detailed as it can possibly be so when the web started out monitors used to be 72 pixels per inch and now they're up in the hundreds 140 1880s I forget what the latest ones are cuz I don't really care that much um but if you display something that's 300 pixels at 72 pixels per inch on a latest greatest iPhone it's going to look fuzzy and blurry cuz that iPhone is going to have to kind of size that image up so how you get around this is you make the image twice as large as you want and then size it back down that way it looks crisp and clear on the latest greatest iPhone the latest greatest MacBook screen and it also looks crisp and clear on an older 72 pixel perin monitor so to do this we simply say background size 300 pixels and that's going to automatically apply to the width the height will be taken care of automatically great uh and then if I also were to bump this height up to 90 you'd see we got a little problem here it's automatically looping that logo let me make it 190 you see that logo is just going to Loop and loop and loop so we want to do background repeat none or no repeat no dash repeat you would think it'd be none but it's no dash repeat uh so there we go now it doesn't loop at all and I can change this height to go back to 80 pixels which is pretty much where I want it to be one more thing that I want to do is I want to actually tell this thing I want to hack the way that this thing displays and I want to make it display up a little bit so this Arrow will line up with all my text links so the way that I can do that is I can go to top and I can say hey your top actually needs to start at -40 pixels uh but when I save it nothing happens so if I want that display to actually go up from the top I have a little trick that I have to do I have to go position relative and that's going to say hey now I can kind of adjust my box relative to the guys that I'm sitting in line with so if I give it a position relative now I can move the top and say hey my top actually starts 40 pixels above everybody else's without position relative you're going to be frustrated because top will never work position relative is just this little hack this little thing with CSS you have to know if you ever want to manually adjust where the Box begins uh so 40 pixels looks like a little too much let's try 30 pixels boom looking excellent okay there we have our logo you can see that as we size left and right that all looks good I do want to make this centered though so on the header I'm going to make it text align Center so now at this point it should always be nice and centered on our page yay no matter what device loads this up whether it's a big screen whether it's a small screen about the only thing that probably looks bad is a Mobile screen yeah mobile looks stupid you always have to take some steps to make sure mobile looks good um and we will get to those in the next video but for now that is looking nice okay moving on we've got our header going it's looking nice let's go and add a background image to really wrap up this header um I like for my headers to be the tall ones that have that hero image type of thing so instead of 100 pixel height let's make it a 400 pixel height let me also alphabetize this didn't quite alphabetize that correctly H I J K L M N O P there you go and that's good let's get rid of this home H1 and just add a nice big hero image in there and so the hero image is going to be done exactly the same way background image and I'm going to leave that background color because as the website loads up if you happen to be on a slower internet connection I like seeing that black box to say hey this is kind of a section so that way you kind of get a sense of the layout while it's loading background image URL let's go images hero oh nice it's already selected hero. JPEG and boom we've got our hero image again it's a lot bigger than we want it to be uh so let's go to background size and instead of a pixel I'm going to say 100% I always want it to be 100% of the width so now that as the devices are grown let's say you view it on a tablet horizontally or view it on a huge screen it's always going to fill out 100% uh that works although default the background position is going to be the top you notice that we always are seeing the top as the screen gets really really big so instead I'm actually going to say background position center and now it'll always stay centered as you get on a really big screen you get this nice little oatmeal loafy thing so that's always going to look good again on mobile it's probably not going to look right yep on mobile you can see it's repeating repeating repeating that's because this really shouldn't be 400 pixels tall on mobile again we'll deal with it in the next video when we deal with responsive design so boom there's our header that's how you do background images in CSS uh really you just want to make sure those images are always a lot big and then you scale them back down so next up we're going to go and add actual IMG tags down here because these are kind of a part of the content they're part of the article so let's go over to the HTML we have a section class equals features and then we have three divs in here so I'm going to change these let's get rid of them to insert an image you just do an IMG tag and there's really really easy to work with uh you just add a source images SL breeds and boom boom it's inserted these are 400x 400 I cropped them down in Photoshop you can use your favorite image editor to do that um they're 400 by 400 because I want them to show as 200 by 200 amazing fresh baked bread uh you're going to add an ALT tag for two reasons whenever you add an image one it allows screen readers to kind of get a description to the visually impaired of what that image is showing and two it also allows Google and search engines to properly index your page um if your page has a lot of images like a good website should um there's not a lot of words for Google to pick up on so this basically provides words to the image uh so your website will be easier to show up on search engines we'll have an easier time showing up on search engines now in this case we're going to add a caption as well and you can add a caption two ways you could add an H4 or a P tag or something and say fresh baked bread um and that's going to show up there and then we can use CSS to move it around but whenever you have an image and a caption that goes with it the more technically correct way to do it is to add a figure tag which is an HTML 5 uh semantic tag it's just like section or header or nav it doesn't do anything it basically acts like a div uh but it basically tells us more semantically what's going on a figure tag expects two things to be inside of it an IMG tag and also ah what's going on and also a fig caption a fig caption tag right there the Fig caption is basically our caption so let's cut this out paste it in there and we're done you can see that also kind of lays out more like div's layout so there's our first one let's copy and paste and copy and paste so this will be coffee we'll just call it fresh baked coffee just be lazy for now and then we'll call this I don't know it's not Gourmet Coffee these days right cuz that's like what they marketed to our parents uh what is it like Artisan coffee now everything's Artisan um home it's not brw roasted Home roasted coffee right that's what everybody does they roasted inhouse so we got our home roasted coffee boom Oh that's lovely and then we also have Goods um Market Market Goods HomeGoods sure whatever and goods mark Market man I don't even know what you say with this Market sure that's going to work we got our Goods Market so now with a couple CSS rules here we can make this look really nice let's go over to our style CSS you can see it's doing all sorts of crazy stuff um and the reason it's doing that is because there's basically no Styles attached to it so this section will make that features I think I called it features yeah class equals features that's this whole section here uh features has padding it has display Flex it has a flex Direction and background of white good good good that's what we want it has a color of gray that's why this is getting a color of gray and instead of all divs we want features figure those will get a width of 100 pixels a background of blue uh we don't really want that anymore let's get rid of the background blue and the margin Auto which makes them automatically lay out nicely now we're getting some overflow here because this has a width of 100 pixels and we're putting 400 pixel images into it so they're just kind of bleeding over into their neighbors um so now what we can do is actually add some style to those images fig features figure IM IMG let's give them a width of let's go 200 pixels I think 100's going to be too small so 200 pixels boom looking nice laying out nicely and I also want them to be circles and a fun little trick you can do to make them circles is give them a border radius if you give them a border radius of 10 pixels they have rounded Corners see that nice little rounded corners but if you give them a border radius of 50% well that's basically what it takes to make it a circle the radius goes 50% and then 50% and Tada so now they're lovely little circles uh let's make the figures have a text line of Center sorry I kind of stumbled and stammered there a little bit um and as I'm throwing these things out there you might not know all these CSS properties right so I might use things like text align or text indent um and you don't have to freak out like you're not some real developer when you see a CSS property you've never seen before um there's tons of CSS properties out there some that you hardly ever use and most of them that are your bread and butter you use them all day every day you can see even as I'm building out this website I keep coming back to the same things over and over again width and margin and background and color and padding that's most of what you use and every so often you run across a CSS property and you're like what the heck is this and then you Google it and you find out what it is that doesn't you're not a developer often times if you haven't used a certain property for 6 months or a year you're going to forget about it anyway so um Googling and learning and forgetting and remembering that's just a part of being a web developer so don't be intimidated as I'm throwing out these properties like text and Dent that you might not have seen before it doesn't mean you're an idiot well you may be an idiot I just don't I don't know that for sure so um moving on uh let's make a little bit of design here to make this look prettier I'm going to give it a little bit of a shadow just a really subtle Shadow and also a border that's kind of a nice way to make images that are circles look good uh the way you do a shadow is box Shadow and box Shadow takes four properties it takes the color let's just say black for now and then it takes the offset of horizontal let's say 10 pixels horizontally 10 pixels vertically that might be vertical and horizontal I always forget which order and then how wide that shadow is a 10 pixel Shadow so you can see that offset at 10 pixels offset at 10 pixels and then it's 10 pixels worth of blow blur well we don't actually want that offset let's just go zero and zero and so now it stays right behind it and it's just got that lovely little 10 pixels of blur I'm going to change that color to gray change that color to gray it's a very subtle Shadow now but just enough to give it a little pop that we want uh one thing that bad designers do is they almost always way over blow stuff 50 pixels and black they almost always make stuff look just ridiculous um so to be a good designer it's all about subtle subtle little things uh let's also give it just a border of one pixel solid white so that way we're going to have this tiny little white border that goes on with that tiny little gray Shadow behind it I don't know it just has a little subtle look to it you can tweak on this stuff forever and come up with really really cool looks but that's good enough for now I think the last thing I'm going to do is I'm going to make that figure caption have a little bit of text to it um which I can actually just apply these rules straight to the figure uh let's see let's do a text transform of uppercase so it's all uppercase Tada it's better to do this in CSS than to actually do it in the HTML because you're not shouting at people right you're not going fresh baked bread yeah you're actually saying fresh baked bread uh you just want it to design wise have caps so that's the way to do that and wow I think we're looking pretty darn good here I don't really like that gray color I think that should be something else but I'm going to leave it for now that could be tweaked on let's just kind of give this footer a little something and we are done we kind of have a design here so obviously if I was laying out the rest of this web page I'd have two or three sections maybe one with our specials one to you know sign up for our email list stuff like that but it's all the exact same thing you're adding content you're adding images nothing too crazy uh so let's just say I don't know one 2 3 Main Street and then what are we Edwardsville Illinois let's go and add a little dot by hitting option eight that's kind of the way you add one of those little bullet characters 555 5555555 and US me.com there's our footer and let's go maybe add some style to the footer as well let's give it some color of gray and text align of Center and I don't know that padding is a little bit let's make it 20 pixels indeed Tada and I'll also make this font size just a little bit smaller uh 10 pixels a little too small 12 pixels there we go so we basically got our website done you can see man it's looking like a good website if we add more content then this would actually be all the way down at the bottom when you scroll down because there would be content pushing it down uh but that's pretty much it so a little bit of clean up we can do here um let's go ahead this should be navul right we never want to Target all uls and Lis across our whole page that'll just be frustrating so let's go ahead copy these move these up to where the header rules are that's always a good idea you want to keep your stuff together I'm going to add a comment by hitting command and forward slash that's kind of a little hot key to add a comment um anything beside in between these uh pieces of code here will not be CSS it's just comments that we can make so I can say header uh then I can go down here that's all our header rules nice features this is going to help us just as we're kind of scrolling through those comments have that green color on purpose so now as you're kind of looking it's a lot easier to scroll through and see where your CSS rules are man that's about it this website came together how much time do we spend on this like maybe an hour Max and we kind of have a whole complete look assuming that someone already took pictures for us and had a logo for us um web development is not impossible it's bunch of little skill sets so uh that covers it for now in the next video we're going to handle responsive design we're going to make this look better on mobile devices uh we did a really good job with our content to where it looks good on all the other devices it's just not going to look so good on mobile so we'll handle that that's called responsive design we'll catch you on the next video