HTML + CSS - HOW TO BUILD A WEBSITE

1. Introduction: everybody, Thank you so much for clicking on this course. My name is Verity and I'm a front end developer from Sydney, Australia. Now, I'm here today to teach you the fundamentals of HTML and CSS on. In order to do that, we're going to work together on building a portfolio style web site which you can customize to your only to own skills and of course, your own style. Now, you don't need any prior experience to be able to take this course. We're going to start from square one and we're gonna work together and build up all skill slowly. By the end of this course, you will have built an Internet ready website, which is pretty cool right now in order to get the most out of this, cause I would really encourage you to create a project underneath this video in the project section where you can track your progress throughout the class, you can chat to other students, you can see what everybody has been working on. And of course, if you get stuck, you can ask any questions down in the community section and I will try and help you as much as I can and hopefully you classmates will try and help you as well. So if you're ready to dive into this project, let's get started on our first lesson. 2. Lesson 1: Getting Started: if you guys welcome to Lesson one know what we're going to be doing in this first lesson is we're going to get you all set up with your course files. Go to download a text editor. We're going to have a look through the folder structure on just generally trapped through everything that we're going to be covering in this course. So we're going to the very first thing that we're going to do is click on the your project tap below this video, and you should see attached files and a little Zip folder saying class project dot zip. Just download that folder and extract it to your computer. I've already done so social open that now. So once you open that file, you should see three sub files designs, working files and finish project. If we cook into the design file, you will see that I've provided you with to PNG's one for desktop one from Mobile. And those are the designs of what we're going to be building in this course. But we'll have a look at that in a browser in a moment. So if we go back up a level, we've got working files which is literally how working vials. This is where we're gonna be doing all about work throughout course on a finished project which will cook into now you can see I've got index dot html and an assets folder where we're going to store our CSS on all about images. If you double click on your index dot html file, it will open in a browser, as you can see here. So we've got a nice little navigation space for a logo. Some nice links. We've got ahead of image with a little bit of introductory text so you can introduce yourself. We've got a section down here for portfolio items. Thes obviously have pictures or food at the moment, but you can change them to being whatever you want. And if we hover over these images will see that we've got a nice little CSS effect showing the name of the portfolio item on a little brief description as well about what it is. And if we scroll down, we've got an about me section with my face on on the right. Just a little bit of space for a description about who you are and what you do and then at the bottom. We've got a contact section which also has the heading and description, but also all of your social media icons that you can link up to your own personal accounts . So that's what we're going to be building. I think it looks pretty nice on. By the end of this course, this will be a an Internet ready website. So before we can start any work on our website, the first thing that we're going to need is a text editor, which is what you used to write the code for your website. So I've used quite a few in my time and quite honestly, at the beginner level, it doesn't really make any real difference which one you choose? A few of the ones that I've used before They are adam dot io. I've got sublime. Tex on the one that I'm using at the moment is visual studio code. But honestly, it doesn't really matter. So just pick whichever one you like. I think today we're going to be using at him so you can just click on the download and follow the instructions on Adam. Uh, get that open. I've already got it installed on my computer, so I'm just going to open that up now I'm going to open our project files, then These are our working files. So you want you want the Working files folder? So you click open, you can see all index and our assets. I'm going to click index file. And there you go. This is where we're going to be working on our project so you can see that I've already set up the hay html file for you. The basic structure. So we've got doc type html at the top, which is a necessity for all hedge de amount file so that the browser knows what type of file your opening. When you load it on in your browser, we've got a hey html tag which wraps the entirety of the content in your HTML file again, that needs to be. That's the The browser knows what you're giving it. We've got the head on the body. Now. The head is where you put all of the information about your web page that you don't necessarily want to be loaded into your browser. So this is where you say link your CSS files, your javascript file so that the browsing knows where to find them. This is where you would put information on Facebook, sharing any metadata, the title of your Web page and things like that. There's a whole bunch of things that you could put in there, but we'll cover that later, so don't stress too much about it now and then the body. This is where you write everything that you want to be visible on your Web page. So to demonstrate first off what the body actually does, we're going to start with creating a hello world Web page, which is a tradition in Web development. Whenever you start a new project, you create a hello world Web page to make sure that all of your files and everything are working as you expect that they're going to. So first thing we're going to do is we're going to talk. Hey, H one, I hate one tag. Now that just means heading one and then inside the heading, we're going to write Hello, world little exclamation mark and save that file. Now, if we go into chrome on way, open our file so I will go into my cost projects the working files and my index file. There you go. You can see Hello. Well, just printed to the browser. So we know that our index file is working, But we want to also set up our CSS file so that we can learn CSS in this course. So in your assets folder, if you go back into at him and have a look at the Assets folder and we've got the Styles folder, which is where the CSS gets stored and in that folder I've got main dot CSS CSS is where we're going to store all of our files And as you can store all of us styles Sorry. And as you can see, I've written that hate One should have the color purple, But at the moment, the heading isn't purple, so it's not working. So what we're going to need to do to get that style to affect our index file is in our head of the document. We need to actually link the CSS file. So here I've just copied in. We've got a link tag with RTL, which ends for relationship or relation, which is so that's the type of what is the file It's a style sheet. Hey, Treff means the location so we can see if we go into the left hand side here, we can see that index file sits on the same level as the assets folder. So what we're telling it here is that from Index, we want you to go into the Assets folder, see their assets folder. Then we want you to go into the Styles folder. Then we want you to go into main dot CSS. So if we just save that file and then we go into our Web page and we reload, you can see that it's purple. There you go. You just put your first Web page. Now, in the second lesson, we're going to stop building on navigation for our website, so let's get going. 3. Lesson 2 - Part 1: Navigation: So before we go any further, we should probably talk about what hitched email and CSS actually is right. It's kind of important to this course. So hey, HTML stands while hypertext markup language where a CSS stands for cascading style sheets. Now you can think of HTML and CSS in terms of building a house so hasty ml is the structure of the house. It's the wolves. It's the roof. It's the floor. It's what sections A little rooms out where a CSS is, how you decorate the house, how you make it home. It's the color that you paint the walls. It's the furnishings that you choose. Choose in your laundry. It's whether you want the photograph on the wall to be on the left on the right. Now the important thing to remember for cascading style sheets or CSS is that the importance of the styles that you write become greater and greater and greater as they cascade down the style sheet. So whatever you right at the bottom is going to potentially override what you've written up the top. If you're using the same select up, don't worry too much about that Now. We're going to cover that in the next lesson. So the first part of our page that we're going to be building is the navigation on. To do that, we're going to need to start by writing ALH html markup that's going to define the layout and the content for our page. Now, if we look at the layout in our finished project here, you can break down the design into a sort of grid. You can see that we've got the outer container that creates the shape of the navigation. We've got an inner container that is creating the maximum with that are contact content can expand to We've got a little container for our logo and a container for our navigation items. Now each of these sections are going to be wrapped in tags called dibs on will give them class names so that we can select them in CSS when we're styling them later. Let's go to our HTML file and first off we're going to delete are hello world because we don't need that anymore. We're going to start by writing out. I hate to your mouth, so I'll write our first div with the Kloss navigation. This is going to be the container for our entire navigation. Now, you can either write it like this as a div or because it is going to be a navigation. There is a special tag called the naff tag. Thought you could do it either way. Now it's just better for accessibility. And then inside that we're going to have a container. Kloss, who will have the container that's going to limit the width off the content that's inside the navigation. And then one more layer down will have a Kloss with knaves Loga Uh, Dave on on the same level within the same container. We're going to have a class for our never a class and a did for our navigation items. This is where we're going to put all of our links to different sections in our but folio. So we're just right in here just for now so that we've got something in there, will write logo and will right now items I like to do this just so that I can see on the page where everything is. We'll go into our working files and refresh and there you go. So to get our logo to show up. I've actually got it set as an image file, so we'll write an image tag with a source on an alternative after you. This alternative attribute basically just describes what the image is. So if it doesn't load, the user knows what's supposed to be there. So I'll just right profile image in that on. Our source tells that browser where to find the image. So in this case, we're in the index file. We wanted to go into the Assets folder into the Images folder and then down to Verity logo dot p and G. So I'll write that as assets images and then verity logo dot PNG. And then, well, just check that that has loaded see this white space. The logo itself is whites were not going to be able to see it for the moment. But the fact that it's not showing the alternative tag means that it has loaded the image on. Then, in our navigation items section, we're going to write our items in a list, and in this case we're going to use an a nordeste, which means it will just show bullet points instead of numbers. If you wanted to show numbers you can write. Oh, l which means ordered list. But we're going to use an on ordered list in this case. So each of our list items is going to bay one of our one about links to a point on the page . So let's makes three of those one Teoh three and inside were going to have an a tag, which is how you create a link. We'll just put a pound in that for now. So in a tag allows you to link any text within your hatched amount. So our first link will be top portfolio section copy. This second link is going to be to our about section, and the third Link is going to bait to our contact section. Okay, so now we were fresh. We can see this white space where the images we've got each of our links, but it doesn't quite look the way we want. So now we're going to style up rht amount. So to do that, we're going to go into our assets folder styles and then main CSS will get rid of our hate one purple because we don't need that anymore. And well, right. Navigation because remember, our top container has the class navigation, and we'll set the background to for if five date 75 Now this is what you call a hex value. So if we save that out fresh, there you go. Now you can see our image. But you see how there's this strange little white space around the navigation, which we haven't. We haven't asked for the browser to do that. And what that is is a default style that the browser is applying to our Web page, and every browser will apply these defaults slightly differently. So I've included in your files for you normalize dot CSS. I'm not gonna go into a lot of detail about what this is at the moment, just because of time. But essentially, what this does is reset all of your default browses styles. So if we just link that in our main file above the main dot CSS file and refresh the page that you go that goes away, it's important that it comes first because anything that's in your main CSS file will override normalize dot CSS because it's a cascading style sheets. So the further down you go, the higher of importance. The style rules are so now that we've got that, what we want to do now is to get this logo styled up and floated to the left side. And we want our links displaying in line and floated to the right so we'll start without logo, since that's first so we can target our logo by using its claws. We've got the cloths, knave, Loga. So we're going to our CSS well right now. If logo. Let's give it a width of 180 pixels, cause it's a little bit bigot the moment I'm going to put a border around it, just so that you can see where everything ends. And we'll do that for our navigation as well. So let's do border one pixel solid read. We'll save that and just have a quick look. Oh, see the images sticking out of the container. That's why border is always good, so you can see where everything ends. So the reason why that's happening is because the never logo is the container. But the image itself is bigger than the container, so it's spilling out the side. So to fix that, we'll do another layer down and well right now. Logo image talking. That's how you target an element by just writing image will say div o l. I. So to target the image we're going to write with 100% and with 100% in this case means 100% of the width off its parent. So because we said that the parents should be 180 pixels, that means that the knave logo could be no more than 180 pixels will save that and check it again. And they go, that looks much nicer. 4. Lesson 2 - Part 2: Navigation: Let's have a look at these links. We want them to sit in line instead of one underneath the other. So cloths that we've got from nab items. There you go. And then we've got our u L L I. So we'll go into a CSS on We will style don't have items for the Kloss. We'll put a border one pixel solid white on there again so that we can see where it is. But for our have items, let's stop by making them display in line blocks. So we want to go down to the UN ordered list and the list item when we want each list item to display itself in line with the others. So in line block, they go there old in line. Now let's see. This container is taking up the entire width off the screen, which we don't want. And the reason that that is happening is because it is a display block item. So we'll go back up to now items, which is the container, and we'll add display in line block to this is well, they go now. See this little space in here that it's creating to the left of the text that is to do with padding so patting You see that green space Then padding is the I'll show you in the if we open up the developer tools or to show you that from start Sophie, click right, click, inspect and we go into we click this little harbour thing when we click on our item that we want to look at, which is out on ordered lists, you can see this is the HTML that we wrote just before we opened up. You can see your list items and now if we go over here to styles and scroll down, you can see the green section is what we call patting and patting means space within a container. So we don't want that space in the container. We actually want that to be zero like that. So if we go into all ah CSS on the knave items never items on ordered list element and we write padding zero that will go away or it stay gone. They go now. We want these links away over here sitting on the right. So if we go back into our CSS and we target the knave items, we can. What we can do is we can write, float right, and that will send it over to the right. So let's have a look. Float right There you go. It is on the right, but see how now it's kind of sitting outside the container now. This is because when you used float, it takes that hate Shia male out of the normal order. So now it's sitting funny, so the way that we're going to fix this is by putting a float left on the logo. You have logo float left. But what this will then do see now that's sitting even even though you bought the container with the background has actually collapsed because it's changed the order of the HTML. So there's nothing sitting inside anymore. So fix for that is to go to the container off those two elements on. We're going to write overflow water, which is essentially telling the container to contain everything, even if it overflows the height. So we'll click, refresh, and they go that contained again. So let's get rid of the borders because we don't need those anymore. We're going to put a little bit of spacing in between Allah now items and also get rid of this blue and underlined. So now items L. I We want some spacing on the outside. We don't want padding. We want spacing. We want margin on the outside, off the list items, so we're going to write zero on the top. Five on the right is zero on the bottom five on the left. That's what that shorthand means. No more. Swap AIBA and see it's created this space. And if I go and if I go into one of our items up here and click on it on the list item See , we can see the margin five on either side. Nothing on the top in the bottom. No, now, for the color you have to target specifically the a tag that we have inside the list item. So we'll go knave. Eisen's U L L I. A color f f f f f f, which means white, and we want to the text decoration to be none. We don't want that underline there, so let's refresh. They go lovely now. I think when you hover, we're going to want a bit of a color on it. So let's do the same rule again. But this time we want to use a pseudo class called Ha va, and we're going to change the color to, Let's just say for now, orange. This is another way that you can define colors in CSS by just writing the name. So click save fresh and hover and you get orange. Now, notice how the logo on and the links are going away out to the edge of the page, whereas in our final project they kind of sit inwards a little bit. So to fix that, we're going to target our container, which we have wrapping around all of our content. I'm going to write that up. Very tall as a general, general style. These are all navigation styles. When you wrap something in this slush and star, it will comment it out so it won't actually affect the styles of your website. So for container, we're going to write Max wit 1200 pixels and a margin off, zero on the top and bottom and auto on the left and right, which means split it equally on left and right, so it will sit in the center. Save that and refresh announced sits in the center. So now we just want to kind of clean it up a bit. This is looking pretty good. We'll get rid of this. Borda will change our front to a Sand Sarah fund because it's got these little bits of decoration at the moment on the front, and we're going to add a bit of padding to the top of this image so that it sits further down. So go back into a CSS Onda. We will get rid of the border. Let's write up in our general. We want everything. That's what this little Asterix means everything to have the form family groups font family off San Serif on. Then we want to add some padding toe our logo. So let's find out Logo here is so we want Salem petting off, say, 10 pixels, but only on the top. So this is another way that you can write padding top and then we'll refresh that, and that looks pretty good but still are finished. Project is slightly wider, so to our container, the navigation container we'll add some padding off 10 pixels on the top, bottom left and right. So everywhere has 10 pixels on will save that. Go back to our working file and refresh. And there you go. Okay. On navigation is looking really good. Let's keep working on a head up. 5. Lesson 3: Header: Okay, so on navigation is looking good. So now let's move on to styling up and riding the html for the header, which is going to be this part here with the nice big feature image and a little bit of an introduction about who we are now, just like before, we're gonna break it up into a kind of grid, like, uh, breakdown. So you can think of it as so you've got this external container here where this background image is being applied and then we've got an internal contain a for our introduction and then the little arrow that just sits below that. So let's have a look at how we would write the hate email for that. I have written it in for you just for the sick of time. So we'll go through something very similar to the head out. We've got the exterior up to the navigation. Sorry, we've got the exterior div, which we've given the cloths head on. Then we've got the internal container to stop the content from spreading out too far and then within the container. We've got, uh, did for our head of text with our little text inside of it and then below that on the same level. We've got our arrow. So if we say that out, I will go into our working files just to check. There it is. So let's stop styling this up now. The first thing that we're going to want to do is set the background for the with the head of section, so we'll just say background and give it the path for where out image is going to pay. So in this case, we are going from the CSS file and into the image images folder. So CSS if you have a look here, CSS sits inside the Styles folder, so we actually want to jump up onto the same level off of styles and images folder and then jump back down again. So to go back a level is what this little dot dot here does. So jump out of that folder and then back into images to find work space. Got J peg. So I'll just apply a couple more styles. So we've got the background size cover so that it always covers the width and the height off the header. We've got position center so that the image is always centered on. We're setting the height in this case to be 80 vieux port height, so 80% off the height of the view port or whatever you're using to see your website. It's going to have 80% off that height. So we'll save that and have a quick look they regard. We can see our image on its sitting at about 80% off the height off the screen. So the next we want to style up this little container where we're going to have our head of text. So then we're going to do Hedda. And then Target had a text but sits inside the head on Andi. I'm just going to do a background with an RGB A value. So that is another way that you can define a color in CSS. And then the 111 indicates that this should be black, and then the North 0.8 on the end is the a value which dictates what the opacity level should be. So no 0.8 80% uh, capacity, we've got the color of the text, said Toe White on. We're gonna make this little section a block level elements so that we can set a maximum height and a maximum wit to stop it from expanding too much with the content. We've got margin, zero auto so that it sits in the center and then a little bit of patting so that there's some space around the text and the text doesn't go right up to the edge off the container. So I'll save that on fresh they go. That's looking quite a bit like our design. So now, in order to get it sitting vertically sent out, we've got to use a property called Position Now. Position is a little bit complicated, so I am going to provide you with a link to this MDM page here, which gives you a good explanation off the position. Property. Now this developer dot Mozilla dot org's MDM What Web docks. This has got everything you would need to know about Haiti amount and CSS on it so you can just use the search bar to search for whatever property you need. So in this case, we're using the position property, and you can see here this is giving you examples of what each one does so in this example we're going to be using absolute and relative so as an explanation. If I click on this, you can see that if I change this to zero, it goes back up. So this is positioning this yellow box relative to its container, which is the little daughter box here. So if I no matter what, I changed this to its doing it relative to that box. Whereas this example Here it's see how the blue box has moved from here over to overlap where that yellow box previously waas. That's because absolute has taken this box out of the normal flow of hey html and it is positioning it in relation to this container, which would be like the body of our web page. So if I say top zero, it will go right up to the top. So how does that apply to Allah Little container here? We want this to sit in the center, but we don't want it to fly all the way up to the navigation. So it's a little trick that you can do So we're going to use position, absolute to center it, which you would do by just like this, having the position absolute property, which I'll just comment this out. Well, these out for a second and will say that to show you that position absolute throws it all the way up here, takes it out of the normal flow, which we don't want now Way that we can fix that is by going upper level into the head and actually setting the head as a position relative. And that will stop it's child from going outside off the head of container. So there you go. Now, to make it sit vertically center as well as horizontally center. We're going to make the position on the bottom left, right and talk all zero so that it's pulling it in all directions. So if I say that it gets pulled in all directions and ends up sitting in the center of the page just like we want. So that looks pretty good, except I spelt developer wrong, so well, fix that devel developer. Okay, so now we want to take care off our arrow. So the first thing we're going to do is going to images and get arrow door spg I have provided for you, which you can just highlight and copy into your index file. An SPG is a file format for four images, so we'll just copy that in Andi. We'll save that and test whether it's gone in there. It iss look looking lovely now to get it sitting in the center, we're going to style. I had, uh oops, let's say head on and then had, uh, Avera, which we've got headed Arrow. And then we'll save that and will say Position absolute bottom. Let's say 40 pixels from the bottom. So this is going to get it sitting at the bottom of the container on then to get it sitting in the center. We're actually going Teoh, go back up to our head. A container on. We're going to set text align center. This is a hack that you could use on images within containers that you go and now sitting in the center and then you go the top part of our Web pages already done. Now, I would love to see your work in progress in the project section below this video, so make sure that you create a project and send those seats screenshots of what you've done so far. I would love to see you customize it. Made with your own logo. Your own introduction text your own head of image, whatever you like is head on down to the projects. And actually, you keep it updated throughout. This course is that everybody can see what you're working on. And, of course that you have any questions. Make sure you reach out to the community. 6. Lesson 4: Portfolio: Ah, header Navigation are looking so great. Now let's move on to the portfolio section of our website. This is where we're going to show off the work that we've done that could be Web development projects. It could be your photography. It could be cooking classes. Whatever you want. You could make it your own. Let's take a look at our finish project first off so we can see what we're going to be working towards. This is the section we're working on now. We're going to have our four little tiles for each of our project with a harvest eight with a description about what up is what the business is and what we did towards the project. Now, if we think about it in terms of the grid again, we're going to have our external rapper our container, to stop it getting so wide on. Then we're also going to have a sub container that's going to break it up into 50% width for each of the tiles. But as you can see, the tile itself was not 50% wide, so we're also going to have a another little Dave inside of that container to set the fixed width on, so we'll go through the HTML now. So let's go into our HTML file. Ondas usual. We've got a rapper and I'll container and then I'm just going to create a sub container, cold item container, shorthand container, right, active and inside this container. I'm just going to write autumn for now and will create four of those so that we can see how it's going to be laid out. So we'll go into a CSS and let's set Let's Go Portfolio. Let's give portfolio a some padding so that we've got a bit of space from the headers. Let's say 40 pixel stopping bottom zero on the side cause we've got our container to do that and then another level down portfolio item container. So let's say let's say, padding 40 pixels on this one as well. But then we're going to set the width as being 49.7% and you'll see why I've done this in a moment, because when you have display in line block items sitting next to each other, they don't actually sit 50 50. There's a little bit of space in between now. Just set a border on it for now so that we can see the edges. So let's have a look in our working files. Didn't work because I spelt put folly I wrong. Good on May Port Folio Close this up and have another look. Here we go. So that you can see this is our grid. How are we going to have our items set up? I think I'll actually change this to a margin so that we have space on the outside instead of the inside. There you go. There's a bit of space. So But as I said are ill portfolio item isn't actually 50% wit. It's gonna fixed width and height. If we go down another level to portfolio Isom Container and then let's say portfolio auction will create the stiff. Now you say that inside of our item container Div Dave class portfolio item on will stick. I'll text inside of that and then we'll set our with 2 450 pixels and all height to 450 pixels. And let's set a background as well so that it we can see where it's going to end. I'm going to use, uh on a p I from on splash dot com. On splash is a website where you can get really high quality images that you can use on your website for free. I'll leave a link to the website in the description. Let's just say that and have a look. Beautiful. Okay, so let's set some styles. Brought backgrounds that it sits being cup of size and in the center. Then we also want this portfolio item to sit in the center of our container. So, let's say, background background size cover background position center. Well, I can't type today you go, and we also want our fixed width and height portfolio items in the center. So we'll say zero also you go, that looks better. So let's now start styling our description. All portfolio Adam description. So we want to first right up somehow html for this. So let's start with diff with the class. But fully I description. And then inside of that, we're going to have some text which is wrapped in on a tag so that I'd uses can click through to the projects you say. And then I'm just gonna use paragraph tags to say what the name of the project is on and a little bit of a description about the work that we did on the project. So this project is called Harries Pizza on for this project. We did the Web design on and development, so I'm just gonna copy in the other three just for time. There we go. So we've got Joe's Bakery, Pam's florist, on Olivia's photography. It's Just check that that's all going through. Yep, cool. That looks good. So now we want to put a black background and style this text. So let's say Folio, one of these days, I'll spell it right, but failure item contain on, Let's say, portfolio description. So you're going to set the background with RGB a again on. We're going to set it to be black with 80% capacity. We want the color off the link. We have to go one more layer down to the length. We want the color to be what Onda we wanted to have, let's say, padding off 20 pixels on top and bottom and 10 pixels on the left and the right. Actually, let's do it the other way Around 10 pixels. Stilton bottom 20 pixels left and right, it's refresh go. So we just want to get rid of the underlying quickly. What's get rid of the Underline Ex decoration? None. Okay, so now we want to create hover effects. So we want this description to be all the way down here sitting below Al Container. So we're going to use position Absolute for that, just like we did before. We're going to need to put position relative on the item container. So let's write that up here. Position relatives so that all but fully item our description portfolio description isn't going to spill out and go all the way up to the top of page. Let's say bottom. We actually wanted to sit below the bottom off the container. So let's say minus 130 just to see cool. That's a little bit too far down, So we'll say 110 and will set the width to 100% so it stays cool. Whip looks so width has gone out too far. And the reason is because I put position relative up here on item container by accident, which it should have actually being on the portfolio items. So 100% for the portfolio description is actually being set to 50% of the page. That will move it down a level. We'll put it down here. And that should fix our problem. Yeah. Good. Okay, so now let's do the harvest. Eight. So what we want to achieve is when we hover on the portfolio item, the portfolio descriptions should move up an interview. So let's say go down here and we'll right. Portfolio description, huh? So on hover apply this style to put fuller description. So to get it to move up the page, we're going to use a puppet. He called ah, trend transform, which has lots of different values, including rotate scale, perspective. We're going to use translate, translate moves, moves your element around an X and a y axis. So in this case, we're going to go up and down the Y axis, and we wanted to move minus minus 110 pixels. I think should be good. So what set? Let's refresh so on harbor. Okay, Maybe not hopes. Done it again for their aisam. More fresh, he goes, So that jumps up in interview now. We don't actually want to be visible when it's not being hovered over. So on portfolio item up here, we're going to write Overflow Hidden, which means anything out that's spilling outside of that container is going to be hidden fresh. There you go. It's gone and it appears beautiful. Now it's a little bit guilty turning on and off like this. So let's put a transition on it so that Ah, hover effect is a little bit smoother. Ups will say transition. I wanted to apply to translate. I wanted to take no 0.4 seconds to complete, and we're going to use and ease effect I'm going to. This is going to occur when it comes into view, but we also wanted to occur when it goes out of you. So let's put it up on the normal portfolio description as well. What's fresh actually want this to be transformed because that's the name Transform. See, development is bull about making mistakes and problem solving. Okay, so that's applying on the way out. No, on the way in. And that's because we haven't gotten n and transform. Here we go. That's looking much better. Okay, so let's take border off of our containers We don't need that anymore, and we want to set it up so that we can have a different image for each tile for each of our projects. So let's go and find that border. There it is. We'll get rid of that. And here on portfolio items where we're setting the background, we're going to write some specific causes, but each about businesses. So first, let's go into HTML and will actually set these classes on the portfolio item. Def. Let's say pizza. Harry's Bakery for Boots Bakery for Jurors Bakery, uh, florists, Pam's florist on And, of course, photo. Will Olivia's photography. I'm just going to copy in these classes just for speed sake. Now you'll notice on the foliar item level. There's no space in between how specific clauses. And that's because we don't want this. We don't want to go down another level. We want to stay on portfolio items, but we only want to select the portfolio item that has this specific Kloss. So let's say that and let's check. It's worked OK. It worked the three out of four, so that's probably yet another type of may. So looks bakery is on the wrong level. That's why we've got a double whammy where we've missing a space. So that was targeting the wrong thing. They go, that's all. Bakery image. Now, this is as much as it's frustrating. This is Web development. Most of your issues are going to come from. Most of your issues are going to come from silly typos and silly mistakes. So just make sure that you go through with a fine tooth comb before you give up and say, Oh, this is all too hard because, like we've seen today, I'm just having one of those days where I just can't spell anything at the cost is right. And sometimes you will just have days like that, just like May. What happens to the best of us? Okay, so that that is looking pretty good. I think we are pretty much done. You may be thinking, What about Mobile House is gonna work on a mobile or a tablet device? Don't stress too much. We're going to have a dedicated lesson towards the end of this course where we're going to come in media queries and mission outside responsive. I just don't want to overwhelm you with too many different pieces of information early on in this course. But, I mean, we're halfway done. We've only got out that section Contact section left to go. So let's keep on moving forward. And, of course, make sure you ask any questions down below. 7. Lesson 5: About: we also close to finishing a project Super good job. If you are still here working along with me, the last couple of sections really should be a braised with all of your new hash email and CSS skills that you're getting throughout this course. But of course, if you're stuck, make sure you reach out to the community and update your project. Show us what you've been working on. So for the about section, this is where we're going to tell all story a little bit and show who we all. So we've got a two column layout going on without image on the left and some text on the right. And so, you know, hit Shia Mel, we're going to start off with ah, standard Rapa Kloss with the reparative with the about Kloss, our container to keep everything contained. And then we're going to create two gives to separate all columns. So the 1st 1 is going to be called profile image container. That's where our little image of our faces are going to go, Andi. Then underneath that, we're going to have a did for the profile text container. You did so in Ah, image container We're going to include an image tag just like we have previously with an old tag saying that this is ah, profile image. Yeah, and then the source. Because we're in the in the index file, just like before. We're going to go images on. Then if we cook into images, we can see that we've got profile. P and J absolutely replaced this with a picture of your own face. Uh, I'm gonna say that on in our text container we're going to write heading to with the title of the section. But of course, you can put whatever you lacking here and then I'm going to have a little bit off Laura MSM , which I will copy, and now So that's just going to fill the space for us for the moment. So let's have a look on a working files. Refresh the page. The regard as our about section on image isn't quite loading, and probably so let's have a look of what's going on here. So where in the index file we want to go into images and then I've got profile, not PNG. Let's have a look up, but our logo Is it the same uh, assets. I forgot to go into the assets folder. See, I've been doing this for a long time, and I still make these six. Okay, That should fix it. Let's have a look. Fresh is the face. Okay, so first thing we're gonna do is we're going to separate our content out into the two columns, so we'll go into a CSS file and we will target image container on the text container. So let's go. I've just created a section for our about styles. Let's go about I'm gonna sticks and patting in there. So we go spacing from ah, lost section andi Also a background color, which is going to be a hex value again. You go. And then let's target profile image container. We want the width of this to bay. That's a 30% wanted to bay display in line block. I'm just gonna put a border around it so that we can see where it ends for the minute. Just like always on. And remember that often our image will stick out of the side of the container if we don't actually, uh, restricted. So I'm gonna create across profile image, which we're gonna use on our image tax all just that in here for vile image hoops we go save on. I'm gonna make the the maximum with off this image as being it's a 250 pixels. But if the screen is less than George and 50 pixels will want it to fill up the space to, let's say, 100% Okay, let's have a look. Now course. We also want to target the text column. So let's say purple text container. We want that to take up the rest of the space. So let's make this 39% actually so that it's almost 60 40. Remembering that display in line Block needs a little bit of extra space in between the two containers, and we're going to make both of these in line block elements in line block on that one. Stick a border on this one so we can see it. Okay, let's have a look at how that looks cool. That's looking pretty good. Okay, now, this images kind of blocking the text for some reason. Quick fix for that is to go into our text container, and we're just going to apply float right, which is going to take it out of the usual order and it will shove it right up to the top that you go now, in our finished projects, this image is round and it's sitting more towards the right. So to achieve that, we're going to go to a profile image class and we're gonna write Border Radius. We're gonna give that a value of 50% on in the container of the image. We're going to use all text alone, right? It also works on images. They go now, images sitting on the right. I think how power golf tag looks a little bit too wide, though I'm a little bit too close to the image. So I'm gonna put a maximum whip on the paragraph, and I'm also going to put a bit of padding on this side. So let's say, uh, heading, heading left the 40 pixels on the container, then inside the container. Sir. 12 file. Oops, Gro File text container. The P tag, I'm going to say, and maximum width off 500 pixels brush that looks better. Okay, let's get rid of those borders and then think will be done. Save it'll out. Let's just quickly compare it to our finished project looking pretty bang on 2 May. So let's move on to ah lost section, which is the contact section, and we have so close to being done, Let's keep going. 8. Lesson 6: Contact : we are on the lost section. Heck, yeah. Now this section I mean, look at it. Compared to everything else that you've built so far, this is gonna be a brace. So let's just get straight into it. So we're gonna start off with. Ah, usual. We're gonna put a heading to in that so that you can put a greeting, put whatever you want. I'm just going to stick contact in there a little bit of paragraph so that we can say Okay , Ho, come and talk to May. I'm just gonna shove some Laura ipsum in the who, and under that, we're gonna have a deer to contain all of our social icons. Now, I'm gonna cheat a little bit here, and I'm gonna get you to go into the finished project files. We're going to go into our finished project and click on index, and we're gonna scroll our way down to social icons. These are full of the SPG es that you're going to be using for your social icons, and they're just wrapped in a link that have your social handles. So you can replace these with your own links. So let's just go down and copy. I'll put some links in with your project of where you can find social icons and just general spg es that you can use in your projects because you've got to be really careful with copyright. You don't want to end up getting in trouble for using social icons that you're not allowed to. So I've got my if for social icons. We've got a link with a link to, uh, profile. We've got a class for social icon on target with an under school blank. Now, this is just gonna mean when you click on your link, it's gonna open in a new tab instead of the top that you're in. Let's say that go into a working file and refresh as our contact looking pretty good. We pretty much just want to get this old centered. We want toe, reduce the width a little bit on, have a mess around with these icons, see if we can get rid of this little black line here. Okay, so let's go to our CSS create a new section contacts on. We'll start with adding some petting as ways to separate it from the above will say, 80 pixels zero Just like before. There's no background or anything on this. So let's go down into Well, let's apply. Actually, you know that, but supply text align appear takes lang cente. We actually want to be able to reduce the width off this. So I'm actually gonna add in here to wrap our text. I'm actually gonna add another. I'm actually gonna add another div with the class contact text container eliminate Looks. There you go. Just close that off and copy bottom down to here, guys. What is with my spelling today? Can you see the mistake? Checked? What? What is wrong with me? Okay, so using contact text container, we're going to, um, reduce the maximum wind. So let's car that in here tactics container will say a maximum width off 700 pixels. We're going to say Ma jin, So you know also said that it sits in the center, so let's have a quick look at how that's looking. All right, That looks pretty good. Right? So let's have a look at what is causing these little lines. Let's go into our Dev tools gonna click upto spg. Do you see what it is? What we've been doing without a tags all the way through text decoration? None. Because we've got a tag wrapping around rs PGS. So if we apply that to all of the eight tags within, uh, social I con contain us say, Hey, we're gonna say text decoration none that should go away and we go beautiful. Let's put a bit of spacing, though, in between these SPJ because I look in a little bit snug the moment. So to do that, I'm gonna do social icons. But I'm just gonna target the social, this singular social icon, and I'm gonna put a margin off. It's a 10 pixels on either side. Sorry. Let's do zero on the top of bottom 10 pixels on. You decide and will refresh. Here we go. Let's compare it. Teoh finished project. Think maybe we need a bit of spacing on the top of the social icons, but that's it. So let's go. Social icons. Let's put a bit of whoops. It's put a bit of, um, AJ in, Let's say 20 pixels of margin on the top of bottom and save that out, I think a bit more. Let's say 40 20 is better. Yes, Cool. Guys, Look, we made a website. How good does that feel? Yeah, 9. Lesson 7 - Part 1: Making our site responsive: now the last thing the very last thing that we're going to deal on this website is lead about media queries and how to make your site responsive on looking good on. All different kinds of devices were also going to do just a little bit of code cleanup to make sure that the next time you come and work on this website or another development, constant works on this website. It's looking good. It's clean. It's easy to understand. So let's first have a look in the crime developer tools on We're going Teoh. Use the dragging motion, which you can access by setting your talking as being either on the left or the right on. You'll see that if you scroll left or right that you'll get a little bit of a pixel, a little box saying the pixel ratio off your website. Now a media query is a way that you can tell the browser which styles you want loaded at which break point? Ah, break point being a word quite literally, to describe where you're designed breaks. So if I reduce ah, break point down to what would be around about a tablet size, you can see that I'll put Folio section. The design breaks because our images have a fixed width and heights off 450 pixels, but that is greater than the width of our device. So they're beginning to overlap. So this is a perfect place where we would create a break point or in media query to describe to the browser that we don't to describe to the browser that we don't want it to sit like this. We actually want to apply some different styles. Now. I'm sure you're aware that that these days the majority of users are accessing Ah, the Internet via mobile devices. So we need to make sure that our styles are being written in a mobile first way. So the way that we're going to do this is we've already got all of our styles that we've written, and we've actually built this at a desktop size. So we're going to assume that all of these styles work on mobile, and if they don't, we're going to make adjustments so that they work on Mobile first and then at the very bottom of the section we're going to create and media query for screen on and let's say minimum with off 768 pixels, which would be approximately an iPad in portrait mode on. So anything that we don't want to happen on my ball, we're going to put down here. So let's say for an example, that we want the background to state it as it is on mobile. So we wanted to be purple, but we actually want the navigation background to be yellow. So let's go back into working files and refresh, and you see that the navigation turns yellow because outside is has got a wit Gracia than all break point. But if we go down on to what we would call the mobile website or a smaller device, it's it goes back to being purple, so we don't actually want the navigation to be yellow, so we'll get rid of that. But we do want to make some changes. So let's go down to what would be a pretty standard, my ball kind of size, Let's say 375 pixels. You can see that the logo on the navigation items don't fit all on the same line. So if we select our logo in our developer tools. So on navigation logo, we can have a play around and see what we can do to this logo. Maybe make it small out. Let's see if that helps see it starts to hook in to the next line. So I think 1 50 looks pretty good on May be will increase the padding as well so that it sits on the same level as the navigation items. So let's copy these styles over, and we're going to shoot go up to a navigation logo. Our rule on these are what we want for the desktop. So we're going to paste on lowball styles in, and we're actually going to cut out the desktop styles and put them in a news now logo class down here. So this will get applied on everything bigger than a 768 pixel wide device. So let's refresh, and that should stay the same. But when we go up, up, up, up, up, all the way to 700 on 68 did you see? It gets bigger and smaller around that break point Now, I spotted before a little bit of an issue with this era I think the overall design of the head of works fine on my ball, but this arrows not actually sitting perfectly center. So we're going to go back into all arrow. Kloss. Andi, remember, I I set text align center to on the image to, or it's on the head of container, but it affect the image. But that obviously isn't working. So let's save and get rid of text the line center. And we're actually going to use the A 50% left rule to send it into the center. But that will actually push it a little bit too far. So we're actually going toe. Also use a negative margin on the left off 25 pixels to bring it back into the center. So let's check that. That looks much better right in the center. Okay. Now are portfolio item. I mean, it doesn't look so bad at the moment, does it? But if we actually go into our deaf tools here, you can see the item container is still gotta wit off almost 50% but our image is spilling out of it. So lid are images spilling out of it, which we obviously don't want But we also don't want to contain the image on Give it a let's, say, a width off 100% because then it becomes really small on a on a mobile device. So what we're actually going to do is we're going Teoh, make each of the item containers have a width of 100% on a mobile device. So let's go down into our portfolio section. Andi, we've got with 49.7% across old browses at the moment, but we're actually going to cut that out and put width 100%. So on all of us small devices, it will be 100%. And then at the bottom, we're going to create a media query full screen and men with oh, suits men with off 768 pixels. We're going to plug our rule. What was our class name, portfolio item container, ison container. And we'll put our lodge browses size with them, so let's have a look at how that's looking. So item container is wide enough now, but if we go down to our three 3 75 break points, it actually the image is still far too big, so we're actually going to have to reduce the image maximum with and hot as well. So this height and width is gonna need to come down. So let's say let's find the class that we have our height and width set on. We've got fully item Ausubel coffee this and we'll go back down. And so our current width and height is for 50 as remembers. So 50 pixels put height for 50 pixels. But on all of us small devices, let's make it 250. Okay, you go. That looks much better. Certify, raise my break point all the way up to where it snaps into the bigger version. So I think we actually want you see how, at this point here it's still overlapping. So let's actually split it up because we want to snap into being 100% with a bit sooner. But we actually want it to reduce in height and width a bit later, because at the moment at this break point, this looks really small. So let's have a look at our break point. So I think, for the height and the width, we actually wanted to break at around 950 pixels so much higher. But I'm actually going to take the width and the height out of this media query, and I'm going to create a new one lower down. So at a low, uh, width. So I will say and men wits 550 pixels. And I put that in there and let's see if that helps. So from 550 pixels, we want the size to change. And then we're going to keep moving up, moving up, moving up. And then it's going to snap into 50% whip at 950 pixels. So where are we now? We are around 650 so let's fresh so we can see that our image is a good wit up until 5 50 which I think looks pretty good. Now let's check where our grid snaps into being two columns, so let's keep going Amega. It snaps into being two columns 10. Lesson 7 - Part 2: Making our site responsive: Now, the last thing that I want to do on portfolio is actually all the way back down at Mobile. Can you see how ah little hover effect is kind of poking out the bottom? So I'm just going to change the on the same one as all hi and all with. I'm going to just adjust this bottom so that it sits a little bit lower. So let's get let's copy of the rule. Let's make it sit 115 pixels instead of 110. And then inside of this media query, we'll put the death stop back to what it wa so bottom minus 110 pixels. So 115 doesn't look quite slow enough. And how about 100? Let's say 1 25 just to be safe. This will make it up here 1 25 Okay, so now that looks pretty good. So let's go down to about section and you can see this is just a mess. This is not good. So we want to set 100% wits on both of our columns, and we want to get everything nice and scented. So let's do that. Now let's go down into the about section and we've got our UIT being set on profile image container and also the text container. So let's create another media queries at media screen and men with, let's say, 768 pixels it's on. We're going to put our class in there. I will say 100% now because we want the image container and also the text content out to both. Be 100%. You can actually change them like this by putting a coma and then putting the other cloths on the next line. And if you save that out groups course, that didn't work because this is the desktop styles. So let's have this rule up here. We'll write it diff. Okay, so up here, we don't want to have them change, so we'll just do 100% 100%. And then, in our immediate query, instead of chaining them, we will actually separate them out again because we want them to be different. So let's say 39% wit that this one on and 100% wit for that one. It's fresh. Cool. Now, remember, this is looking a bit weird because our image is is got text, align right and this is floated. That's why it's sticking out of our container. So let's change that. So we want on my bowel. We want text the line center. Raw image on desktop. We wanted to stay text align right on and for our text container. We don't want it to be floated on my ball, but we do want it floated on yesto. So let's say float right and we've also got this maximum width here. I don't want this to occur on my ball, so we'll actually just completely cut it out of my ball and we'll put it into a desktop section. So let's have a look that looks better. Let's make all text sent it. So let's say we wanted to stay text line right on desktop as it is now off sort of left as it is now. And of course, the having left needs to stay that So let's say 40 pixels as it is. But we're going to reduce that down on beer gardens, say text the line sent up from my bile. Let's have a look that looks better so what happens when we go up. Up, up. Well, And we snapped. That's looking pretty good. Ah, but remember, we got to a point where we set a maximum width on our paragraph. Ah, but now this is snapped, and it's not floating anymore, so we haven't done something, right? So all I'm a full. I've written 100% here when it should be 60. I'm sure you guys saw that, and I didn't Good job screaming at your computers. Okay, cool. That looks much, much better. So let's check it snaps and it looks good, okay? And I'll contact. I mean, I'll contact is a pretty simple layout. So on our website is now responsive. Now, of course, there are plenty of other ways to use media queries. You can do things like set a maximum wit. You could make style specifically for when a user wants to print your website. So I will, of course, leave a link for you to the mdn documentation for media queries on there's quite a lot there. You can have a read through in your own time. And as you're building your own projects, of course, if you think of a use case. Have a read through these documents and see if you can figure out what it is that you need . It's the very last final touch that I want to do for our website is to link up all sections . So we've got our little navigation here, but at the moment, if you click on them, they don't go anywhere. So we're just going to use I DS to link them up to the rest of the page. So I'll go into our index file and we have here Ah, list items for the portfolio about in contact. So I'm going to makes the path where this is where you would normally put a link. But if you want an internal link, you can use a pound and then what will be the i D. So for our portfolio section. If I scroll down two portfolio and I put on the portfolio rapper I D equals portfolio. Then when I saved that Andi refresh my page. If I click on portfolio, if I click on portfolio, it will jump down to our portfolio section, so I'll do that for the rest of them. Now, throughout this course, we've been using classes in our CSS to select which elements we want to absorb my doing. That doesn't need to go there now. Throughout this course, we've been using clauses only two do all selection off which elements we want to be styling . You can actually use I DS as well. There are a bunch of different ways to select, uh, pieces of hedged GMO, so I'll just put all our bodies in for a moment, and I'll show you a little bit just quickly about how ideas can work for you in CSS as well . So let's say contact. We'll go back up to a navigation and we'll add our I DS in here. Contact. Cool. We've already done portfolio, so let's check about yet that works. Andi. Contact. Perfect. It just scrolls right down to the bottom of the page. Now let's just have a very quick look at I DS. Now you remember within CSS. We know this that it's a cascading style sheets, so basically the order of styles is very important, so everything that is lower down on the style sheet is going to be given a greater amount of importance. Now let's have a look at our about section so that I can demonstrate to you how classes and I DS differ in terms of importance. So we've got our about class here and with setting our background to that sort of beige color. Now, if I was to target about again and I was to give it the background blue, obviously, because it's lower down, it's going to change the background to be blue. If we were fresh, you can see that it's blue. However, if I was to make this here on I d. Even though blue is lower down in the CSS style sheet and I D is given a greater level of importance than a cloth, so you'll see if I save it out and refresh, it goes back to being page Now. I would recommend that you use classes as much as possible throughout your style sheets, because if you stop throwing I DS in the it's really just gonna confuse you. When you have problems with your code, you're not going to be able to tell what has greater or lesser value. And if you want to learn more about selectors again, just check out the mdn documentation and you'll find plenty on there. So if we have a look at this page here, we can see we've got the type selector, which is what we've been using for our elements. So, like our images, you've got classes which we've been using I ds ah, universal selector, which is the Asterix, which we used for our overall styles. And then you can even get down to attributes. Electors, Combinator, his siblings, all kinds of things. This is a This is a whole class in and of itself. So we won't go into this today. But absolutely. If you want to learn more, this is a great resource. 11. We did it!: I went done. Thank you so much for taking the schools with me. You guys, I heard people had a great time and you've learned a bunch of new skills. Make sure you update your projects below so that I can see what you've been working on and how you make it your own. I'm gonna be making many more classes on Scotia, so please make sure you follow me so that you'll get a notification when I launch my new classes on. Of course, if you like to connect with me on social media, I'll late olders lengths. Fuller. Thank you so much for joining. May have a brilliant day, no.