Build Your First Website (And Thwack Zombies with HTML and CSS)

1. Introduction - What We'll Build: Hello. My name is John Ray. I'm going to help you build your first website and Flax ombies with HTML and CSS. In this course, we're going to be building a simple two page website based upon an essay that doctor Alexander Boople wrote. We'll build this index study Shamel page here, which has the full essay. And then we'll also build a bio page, which includes some of his favorite things for some reason and a picture of the esteem doctor Boople. All right. Let's get into it. 2. Manipulating Undead Files: Before we talk about how to build a website, when you need to start talking about files. Say hello to Zombie Bob. Now, Bob as a zombie, knows a few things. He knows that brains are good. He knows that he happens to have all his limbs. He knows that he's an individual piece of the apocalypse. He knows what zombie nest he's in, and other zombies in his nest like Sally, Jamal, and Carlos. Here is a file. Now a file has similar knowledge. File Bob happens to know that he has all his data. He happens to know that he's an individual self contained piece of data or information. He knows what folder he's in. He knows other files in this folder like Sally dot MP three, Jamal dot CSS, and Carlos dot JS. Now, Bob is in his nest and he knows all the zombies in it. Similarly, File Bob can see all of the different files that are in the same folder as he is. A file is a unit of data and a computer designated by a file name and file extension. Folders are like a bucket that you can put files and other folders into, and websites are pretty often made up of multiple files and folders. Typical HML file might have many files associated with it, including CSS, JavaScript, images, video, audio, and more. These files might not be in the same folder as the HTML file. Sometimes nests have sub nests and sometimes folders have subfolders. However, when you have a subfolder or a sub nest, Zombie Bob nor File Bob can actually see what's in those sub portions. They can only know what's in there if they're told. And we can tell them what's in there via a path. The path is basically how to get from one file to another or from one zombie to another in different folders. Paths can go into a subfolder, up into a parental or ancestral folder, or both. There's a few different characters we use in paths. First is the period, which means the current directory. Wherever the file is that we are going from, two dots means the parent directory, meaning we're going up a level. And Slash separates folders or says look into the next folder. Once we tell Zombie Bob where Evite is and the sub neest, then he can see her. With File Bob, once we give it a path here, period slash sub folder, slash et gif, then it can find Event gif and use it in his website. Slash is the folder as a whole. In Slash, we have a number of files. Within Slash, we still have Zombie, which is another folder that has files in it. We have apocalypse, which is another folder that has a few files in it. Resistance, which is a subfolder of apocalypse, which is a subfolder of the root. And we have LeRoy, which is a subfolder of resistance, which is a subfolder of apocalypse, et cetera. How do we get from slash? We're going to be in this directory to, in this case, about dot HTM. Because we're in the same slash folder, you can just write about dot HTML. It does not need to look into anything. You could also write dot slash A dot HTML. Which would just make sure that we're in the current directory and then about that HTML, but the dot slash is assumed, so it's not required. Games HTML. Games HTML is right here. Same sort of thing. Games HTML or do Games HTML. Now, Bob dot HTML. Bob dot HTML is actually in the Zombie folder. We can do Zombie Bob dot HTML. Or we could also do dot slash Zombie slash Bob dot HTML. Now, from now on, I'm not going to include the dot slash, that's just assumed. All right. Fred dot HTML. Fred dot HTML is right here. So we're going to go apocalypse. Slash HT M. Next we're going to Juan, which is in resistance. So we'll go apocalypse. Slash resistance. Slash an.tm. For number six, we're going to do Index DHTL in the slash Leroy. So that's going to be apocalypse. Slash resistance. Slash Leroy. And slash. Now, Index dot HTML is the default file. If a web page is just looking for something Index IHL is usually given. However, it's also good to include the file name. So you could just go apocalypse slash resistance slash Leroy, but you could also do slash Index dot HTML to make sure that it gets to the right place. All right. Lastly, we're going to go from one dot HTML, which is right here to zombie dot HTML, which is right here. Do this, we need to go up folder, so we'll go dot.in a slash. So if we are in one, we go up a level, we're now in apocalypse. We need to go up one more level. Dot dot slash. This is saying go up one level, then go up another level, and then we need zombie dot HTML, and that is the path. 3. Using Code Editors to Stop the Apocalypse: The important thing to discuss is code editors. In this course, I will be using VS code, and you're welcome to use that, but you might want to use something else. Plain text editors. On windows, you have notepad, which is a standard work course, you can definitely create HTML and CSS in notepad. That's not a problem. On MAC, there's text edit, you need to make sure it's in plain text mode. If it's enrich text mode, it won't save the file properly and won't work the same way because it'll save a whole bunch of other information involved. So make sure it's plain text mode. Now, both of these editors will work fine, but they're not recommended. The reason is is because there are some better options. One thing that a lot of these options that I'm going to go through do is that the color code, the code. And this means that things of certain types, your HTML elements, your CSS selectors are all going to have different colors. The benefit of that is that if something's supposed to be a selector, but it's the wrong color, you can realize that that's an error, and that you've mistyped something or something's not going quite right, so it can really help you spot errors. A couple of options that are free or NoPED plus plus. This is windows only, but works well. There's brackets, which should work for any platform. VS code, again, that's the one that I'm using within this course, but it's not required for you to use it. Any of these will work fine. But all three of these are free. There's also supply and texts that a lot of people really like, though there is a cost for that one. Really, any other coding tool that supports HML and CSS would be fine. Any of those will work as you code along at home. 4. HTML Basics: It going to talk about what HTML is and how it works. What is HTML? It stands for hypertext markup language. It is the structure or skeleton of a web page. It's a way to mark up the contents of a web page. There are four parts to an HTML element. First, we have the opening tag, then attributes, content, and the closing tag. Opening tags, start with a less than sign or a left angle bracket. Then they are followed by the name of the tag, P for paragraph, for instance. There are many different tags, and then I'll close with a greater than sign or a right angle bracket. For instance, we have an opening P tag. We have an opening B tag for bold, which we'll talk about a little bit later, and opening DIV tag, which we'll also talk about a little bit later. But those are some examples of opening tags. Next, we have some attributes. A attribute is one or more name and value pairs applied to an HTML element. And attributes typically do one of three things. They're going to identify an element. We'll use this a lot with CSS, where we're pulling something out of the page, and then we'll modify it. Attributes will modify an element's behavior, such as change the color, change the font, a whole bunch of different things, or they will set external content. This happens with images, links to a different file or a different page, and Attributes are going to appear between the opening tag and the greater than sign or the right angle bracket. And some examples would be setting a class, which is an identifying attribute of date ars on the P or an ID of zombie warning, another identifying attribute on the dI element or di tag. Next, we have content, it's typically text or other HML elements. It's going to appear between the opening and closing tags or inside the element. Some elements have limits on the kinds of elements they can contain, and some elements can only appear inside certain other elements. Some examples might be this paragraph tastes like brains, or there appears to be a zombie crawling appear. We have the closing tag, which is going to mirror the opening tag except it's going to include a slash after the les an sign. To mirror our opening tags from before, we have a slash P, slash B, or slash div. Not all HML elements require a closing tag. These are called void or self closing tags. Typically, if an attribute contains the content such as with image elements or the element doesn't have content like line breaks, they don't have a closing tag. We have here an opening P tag with zombies have, and then we have an opening eye tag, no, closing eye tag, family, closing P tag, and then we have secondly another opening P zombies. Then we have an opening eye tag, do have a opening B hoard, closing B, closing e, closing P. This is what we call nesting. If you open an element at HTML, you need to close it before you close its parent element or the element above it. We look at this in color. We have, for instance, here, we have this one is entirely encapsulated within the P, is said to be a child of the P element. Then we have here the B is fully enclosed by the i, and the I is fully enclosed by the P. B is said to be a child of I, I is said to be a child of P, and B is said to be a grandchild of P. You can also do it the other way and say that P is a parent of I, I is a parent of B, and P is a grandparent of B. Now, this is a standard HTML page. The smallest amount of code you can have starts with a doc type, which is not technically HTML, but it is there in order to tell the browser what this document is. Then we have our opening HTML element. This just defines where the HTML is. The head is going to be information about the page, and then body is everything that's going to display on the page. Let's actually take a look at that and do some live coding. 5. HTML Live Coding - Home Page: We have just the tags you saw earlier, the elements. We have our opening doc type, which is telling the browser that this is an HTML page. We have an HTML element. I've added a ang attribute here to show that it's in English. This can be helpful for lots of things, but browsers, screen readers, search engines helps them know what language it's in so that they can more easily prepare translations and things like that or know what to translate from. We also have a head element, which is going to be information about the page. We don't have any of that yet, but we'll be editing that later. We have a body element. Which is going to show everything on the page. Now, I have this set up so that when I save something here, it will then show up here. If I, for instance, add Just a hello world. Helps if you spell it right. Hello world, and I save it. It then appears over here. The P element appears over here. The next thing we're going to do is add what's called an H one or a heading level one. This is the top level heading, you have also H one, H two, H three, h4h5 and H six, heading level one being the top level, and then typically you would then break out your content with subheadings and stuff with H two, then H three, and so on and so forth. Let me say this and we'll see what it looks like. So a heading is by default much larger than normal text, and also bold. So help it stand out as a heading. Headings are actually block level elements, where they create space above and below themselves. The next thing we're going to look at is actually a span element, which is technically an inline element. I'm going to use it to just display the byline for our doctor Buble, who wrote the essay that we're working on. Or the esa page that we're working on. It technically is an inline element meaning that it would not create space above and below itself, but because this H one is above it, the H one is going to create space, and then the next thing we're going to use is also going to be a block level element. But if I hit save, it's going to show there there is doctor Poples name. Next thing we're going to add is some text. Actually have that here at content text. Close that drawer, and here we have a whole bunch of texts that we can use. I'm going to copy this text here. This is all paragraphs. This is for the index page. Some of this will be used for the about or bio page. I'm going to paste that content indirectly. If I hit save, you can see that it all looks like it's one giant paragraph. There's no continuity of paragraphs here. It doesn't necessarily respect the spacing of our paragraphs. In order to do that, we need to add p elements around our paragraphs. If I hit save on that, you can see that our first paragraph takes shape. Don't worry about this spacing here. It's just because of the editor. Next, I'm going to add some more paragraphs. As you can see, that we'll continue to add paragraphs. Again, don't worry about this spacing. It's weird, and as you can see, it does not show up here. And now I'm going to zoom through adding the rest of the paragraphs. Yeah. All right, and we're back. Okay. The next thing we're going to do is we're going to go through and find where I have labeled some things that should be bolded. Anything that has these asterisks by it, I'm going to replace with a bold tag. There are actually two bold tags or two tags that will create bold. One is the B tag, which we've seen a little bit al going to add here around the. If I say that, you can see that this is now bolded. The other tag is the strong tag, and that stands for strong emphasis. The reason there two is because initially, it's actually strong and not string. Let me fix that there. Initially, when the language was created, the Bol tag B was all we had. And there was some concern that that was not giving enough information about the content. It was not being semantic enough. And so they added the Strom tag in order to make that a bit more specific and a bit more to make it a bit more semantic. However, Strom has a lot more letters to type, and so developers didn't really end up using stro more often. And so the Bol tag lived on. Now with HMO five, both are acceptable, so you can use whichever one you want. Now we're going to look at the I and M elements, where I've made these underscores, we're going to add italics, I for italics. Like the bold, there are two elements for italics. One is, which here just looks like this, which we already saw a little bit earlier. If I say that, you can see that it then makes italic. Similarly to bold and strong, B and Strong, they wanted the element to be more semantic, or wanted a more semantic version of the element, and so they added the EM for emphasis. But again, either one is acceptable, use whichever one makes the most sense to you. If I say that again here, this is also italicized. All right. Now that we've got our content on our page, let's add some navigation. Right below the body tag here, right below the opening body tag, I'm going to add And so this is the start of it. We have an A element, which originally stands for anchor, but it's our link tag. Whatever we link to is going to be in this ARF attribute. And then the link text is going to be this text here. So I'm going to just link it to Index DHTO, which is this same file. I'm going to hit save, and then you can see there's a link here. If I clicked on it, it just will open up the same index HTL. We don't need to worry about that right now. But we're going to end up having two pages in this site. So I'm going to add a link to that right now, even though we haven't created that page yet, it's going to be doctor Gopals bio bio dot HTML. And then I'm going to bio. Save that. Now we have two elements up there, two A elements up there. Typically, navigation is put in an unordered list because they are related elements, so that's more the semantic way to associate them. And we're also going to use a structural tag called NAV for navigation. So I'm going to add NAV here first. Which is a structural element. So we won't actually make any changes. So if I save it, it's not going to make any changes on the front end right now, but we're going to use it a lot later for CSS and also making sure that there's proper structure within the page. Now I'm going to add that unordered list. So an unordered list starts with UL. And then each item is going to have an LI item for list item. And then we're going to close the UL. Once I save it. Then you can see that it is now in an unordered list or bulleted list. We're going to play around with this a little bit more later when we get to CSS, but now it is properly structured. Now, with here, we have our NAB structure in here, but there's more structure to a page than that. There are several different structural elements. For instance, we have header, which can go around the header. Now, let me also emphasize that header head and headings are very different. So a header here is to show the top of the page, whereas head is information about the page. Headings are also content that will show on the page, so it goes in the header. Next, we have main, which is the main content of the page, which in this case is doctor Buble's essay. I'm going to close the main down here. I'm also going to add a footer element with some content in it. Paste that in over here. So we have a foo. We have an HR. HR stands for horizontal rule. It is a void tag, so it does not need a closing tag. It's just going to draw a line across the page. Then we have a p element here, P tag with some information. And then closing P, closing footer. I'm going to save that so we can see it in action here, and here we have all of our content. You'll notice here that this has dropped the space. This less than is in red. That's because while the browser is figuring it out, it's not quite realizing that it's not code. It's still not sure what it is. Be less than sin typically will start code. It will be something that should not be displayed on the front end. The browser figures it out, understands what we want here, but really the best thing to do is going to be to set it to ampersand LT semicolon, and that stands for LT is less than. Ampersand LT. Cticon is going to show us the same left angle bracket. If I hit save. Notice that there was no change there, and that's because it is the same symbol. We can also Oops. Set the greater than symbol. Here, I'm going to add a space, which will be the greater San than sign. And because Ampersand now designates a special character or designates that we're going to be displaying a semble special character. Ampersand that we want to display should now be set to ampersand AMP, semic save. None of those should change. It does not honor the space there. But we can do more than just these symbols. We can also do the copyright symbol. And the copyright symbol is Ampersand Copy. ALS, and you can see that it is now the copyright symbol. These are what's called HTML entities, and they allow us to write characters that are not on our keyboards onto the page. Now that we've got our content and our main structure in place for our Index dot HTML, we're now going to save it and create our second page, our bio HTL. 6. HTML Live Coding - Bio Page: The easiest way to create bio Dot HTL is rather than starting from scratch. We can take Index dot HTL and save it as Bio Dot HTML so that we can get a head start with a structure and that sort of thing. I'm going to go to File Save As, and change it to bio DH TML. I save. Now we have Biodi TML, but you'll notice we also down here have index dot HTML. These are now two copies of each other. I'm also going to open up content dot text, so we still have access to that as well. All right. Now, bio, we know for sure that this content is not correct. So let's go ahead and delete this content here. If we save it now, it's not going to update here, but that's because we're still looking at index at HTL over here. I should be able to click on the bio, and here we are with the bio dot HTML. I'm going to grab the H one content and place that here. Next, I'm going to I'm going to hit save and we can see that that is the correct or that is the content, and now we can more easily tell a part two pages. Now I'm going to take the content from here. I'm going to copy it. Not index bio. I'm going to paste it in. Again, we're going to have some work cut out for us. I'm going to start adding P tags. Now we have several different headings here. I'm going to add H two tags a his favorite things, and I'm going to add a span around this little note here so that we can style it separately. Now I'm going to put a UL or unordered list his favorite things. LI LI around each item. And close the UL. This two is going to be an H two. Now these are going to be an ordered list. A ordered list is just an OL versus a UL. I'm going to add LI, use the same LI element around we had a closing, and now it's all there. Let me hit save and we'll see the new content up here. We have our paragraph. We have an H two, we have our span. We have an unordered list. We have another H two, we have our ordered list, and then, of course, we have the footer and HR, et cetera. Now, as you may have noticed, as I was working, there are also some places to add italic and bold. Let's go through and do that now. All right. We've made our changes to our italics and our bold. Now we're going to add a trademark sign after this because doctor Bob chose to trade mark it. And that is Ampersand trade, and there it appears right there. The last thing we're going to do with HTML is we're going to add an image. So I'm going to go back up here and right inside this P element. I'm going to add image elements. Now an image is actually a self closing or void tag. So go image, and then it uses what's called an SRC for source to find the image. And that is the PNG. I'm going to hit save, and you can see there he is in all his glory. Another thing we want to add to images is what's called alternate text. And that is a way for search engines and screen readers to be able to access the content of the image. I'm going to grab that from over here. Use an attribute. Uses an l attribute. I have that content. I swears, let me grab it. All right. And there it appears. Hit save. Notice there's no change on the image because the attribute does not so I will only show two screen readers and engines who are reading the code or any other program that's reading the code. Now we've got our HTL in place. Let's look at CSS. 7. CSS Basics: CSS stands for cascading style sheets. If HTML is the skeleton, then CSS is the flesh and clothes. It lets you set colors, fonts, and all kinds of different things. The cascade of CSS. Styles don't affect just a single element. They cascade through the document from parent to child. For instance, if you set a text color on the body element, it will cascade down through all child elements. There are three parts to a CSS rule. First is the selector, next is the property, and then the value. The part in the curly brackets is typically called the declaration block, and the whole thing as a whole is called the rule. The selector is going to select which elements to apply the properties to. It can be an element, like P, di, or main are all elements that we just looked at, and you can select all of those elements within a page using the element selector. They can be a class, which uses the HTMLs class attribute, name it whatever you want, so class equals zombies, undead, politician, et cetera. You also have an ID, which is a value of HTML's ID attribute, and for that, you're going to use a hashtag. For classes, you're going to use a period to designate that it's a class. For IDs, you're going to use a hash tag to designate that it's an ID, and you can also use a combination. For instance, this selects any P element that is within another element with an ID of apocalypse, does not have to be a direct child, it could be a grandchild, much further descendant, et cetera. This will select any div that is an element with a class of zombie, and this will select any element with a class of politician that's inside a div. Property. This is the aspect that you want to change. And there are many examples, but things like color, background color, font style, font family, many, many, many more. And then the value. Values are what you're changing the property to from its default value or another value that you said earlier. Type of data allowed depends on the property. Some properties only take specific keywords, and some properties only take numbers or numbers with specific units. Some take both. Now let's look at some CSS. 8. CSS Live Coding - Adding Style: So we're going to take our HTML pages here, and I'm going to go back to our index so we can see it working from here. And I need to add a style element to our loops. I'm still in the bio there. Let me go back here. Index. I'm going to add a style element. And in this style element, I can put our CSS. The first thing I'm going to do is I'm going to select all H one tags, and I'm going to change their color to an orange red. Orange red. There are many different ways to set up color. Orange red is a keyword that happens to work for color. I'm going to save that, and now our H one is orange red. We also want to make our H one a bit larger in size. I'm going to set the font size font size. So how big it is to 50 pixels? The default is 16, so setting a font size of 50 pixels is going to make it much bigger. As you can see there. The next thing I want to do is to modify this byline. I'm going to set it a span. I'm going to set a font style, which changes italics to italic and give it a color gray. If I say that, you can see that it deemphasize it a bit and italicized it. So I want to get rid of these bullets there up here. The way to do that is to flect the UL and set the style type or the list style type to none. Save. Now they're gone. The only problem is we have a UL on our bio that it's going to remove that too. The way to get around that, the way to only change it on this UL and not on other ULs is to localize it or set a descendant selector. So NAV UL. Any UL within a NAV are the only ones that are going to be affected. The next thing we want to do is instead of having these like this, we want to display them inline so that they will be one after the other. So I'm going to change in this case, again, I don't want to affect all LIs. I just want to affect the LIs within a NAF, and I'm going to set display inline. And then I want to add a little bit of padding so that they will have a little bit of space between each other. It's going to add ten pixels of padding. This just adds spacing around them. Now, you can see that there's a big gap here, which isn't quite will be one. All elements have some default padding and margin. So this UL by default has a bunch of padding and margin because it has those bullets. So I'm going to set its padding to zero, and it's margin to zero. It save, and now it is all the way over there. It's still a little bit of ways, and that's because of its ten pixel padding all around it. Ten pixels all around. Now, one other thing I'd like to do is that instead of having the navigation here, I want to fly it over here. So you can easily do that with setting text align right, it will right align the text. If I save, it flies over here because it's now aligned right instead of aligned left like it is by default. Now, this is a little bit too close to the top, so I want to add some spacing above here. I also want to add some spacing between these two. I'm going to take just the Nave I'm not changing the elements within it. I'm going to say margin top 100 pixels. I save. There we go, and then margin bottom. 50 pixels, and I hit save, and now there's some more space between those two. Now, I like this orange red, so I want to expand its use. I'm going to make these two links that orange as well. So I'm going to say N A I only want to select the A elements. I want to do color orange red, same color as before. Save. Now they're orange red. And now that they're a different color, it's much more clear that they might be a link. So I'm going to remove that underline text decoration. No. Save, and now there is no line under there. And another thing we want to do is we want to mark which page we're on. Easiest way to do that is to add a class to the page that we're on. Currently, this is indexed dH TL, I'm going to add a class to L here. Class equals Current page. Now, if I save it, which I'm going to do right now, nothing changes because we haven't written any styles to edit that. But before we go any further, and so I don't forget, I'm going to copy it, and I'm going to paste it over and here, but put it on the bio link, since that is the link that is the current page here. Save that just so we don't forget it. All right. Now, I'm going to write a style for that. Because it's a class, I'm going to choose a current page. S. Then I'm going to set border bottom, because I only want it to be on the bottom. Then I'm going to set orange red. Then borders actually take three different values. I'm going to set solid, and then the width is two pixels. Solid is the style. You can have dot or a bunch of other things, but I'm setting the color, the style, and the width. I save. Now it highlights which page we're on. All right. Well, let's look more towards the footer. This footer is nice. I like the line here, but I think it would be neater if we could also make it that color, that orange red color, some footer HR, I'm going to set border top this time because that's what handles the border for HRs or what handles the color of an HR, I'm going to set it two pixels again, solid, and the color orange red. As you can see, the exact order doesn't matter because it's pretty clear which things these are. I'm going to hit save, and here we have an orange red. Now, another thing that would be cool is to not have it extend the whole way, but maybe percentage of the way because if we make this bigger or smaller, We don't necessarily want it to be 100%. If I set it to a specific value, it might be too big at some times and too small at others. I'm going to set a width of 60%. And what this means is it's going to be 60% of the width of its parent. Now, let's do a little bit more work with the footer. I want to do text align center, so that the text is centered. And then I also want to add some space here so that it's clear where it begins and ends. I save. Let me scroll down a littleit. Now you can see it's now centered, looks a bit nicer. There's some space here to differentiate them. So that is good. Another thing that happens is that if we go all the way out, it just continues to scale as wide as possible, which probably isn't what we want. Usually, it's much harder to read a line that goes all the way across the page. So we're going to set a x size. So I'm going to set Nav. You can do multiple things, multiple selectors in one statement if you do a comma between them. Here I'm setting all of those Nav main header and footer. I'm going to set them a max width 1,000 pixels, and a margin of auto in order to make sure that it is centered when it is saved. He save. I then open it, and now it is centered. One thing that we lost here is that when I set margin auto on the Nav, it got rid of that extra margin that we added above and below it. And also got rid of it on the footers, and now that's right close to it. So there's an easy way to fix this. What I'm going to do is instead of putting it on each of those elements, I'm going to create a div, give it a class of wrapper. And I'm going to wrap it around all of the elements. All right. Now, say that didn't end up doing anything because I haven't changed the CSS yet. So instead of this selecting all those things, I'm now going to select just wrapper. I'm going to hit save. Now, the NAV has its margin back, the footer has its margin back, and if I open it, only goes to 100 pixels. If we go to bio, we'll notice that it has none of these features on it anymore. There's a simple way to do that. You can click or copy this entire style. And then I'm going to paste it in here. I'm going to hit save, and now we have that same styling available to us. We've got the footer here, we got the title, all those things. If we go too large. Oh, if we go too large, it doesn't stop it. The reason is is because we did not add the wrapper. So let's add the wrapper div here. Scroll to the bottom. It save. Now if we go too far, it still prevents it from going too wide. Now we're back in place here. Okay. There's a couple more things we want to do to this. I mean, this image is nice. We like the picture of doctor B, but it just doesn't feel quite right where it is, doesn't really text flow around it. We can do what's called a float. So do image And then I'm going to float. What floating does is it pulls the element out of the normal flow and sends it over to the right, or you can also send it to the left, and then allows content to flow around it. So I'm going to hit and save, and now you can see that the content is now flowing around it. That is better. This image is still pretty big. We still have stuff pretty close to it. What I'm going to do is make some more changes here. Let's set a margin left margin left of five pixels, and a margin bottom. Of five pixels as well. Save. That helped us a little bit. We got a little bit of space there. Then I also want to change its width worth 300 pixels, and let's change its height. I save, That's squished it a bit. And that's because we didn't keep the aspect ratio. We forced it to a square when it's not. So let me just delete that, I save, and now it automatically looks much better. The other thing you could do is set your height to auto, and then it would ensure that whatever you set here, it would definitely stay the appropriate aspect ratio. 9. Catch You Later, Zombigator: For taking this course? If you loved it, please leave a review. It really helps get the word out. And you can also check out my other courses on Skillshare. If you have want more content, I still have more at und dot Institute, where there are books, games, resources, and even some curriculum. Thanks. Have a great day.