Transcripts
1. Why You Should Take This Class: Hey, it's Rich here. I remember designing my first website. It was fun and awesome but trying to code it was a nightmare. I didn't understand how to get things right. One of them, I didn't know why everything started at the top left. I didn't know when to use float or position. I didn't understand depth. I didn't know why some elements are wider than I set them to be and I certainly didn't know how to get my content in the middle of the screen. In short, It wasn't at all like Photoshop. The thing is, that was in 2007 and although web design apps are awesome, what you design and then still never the final website. The final website is the one you can browse. It's the one in front of your customer and the skill of knowing how to describe a design to a browser using HTML and CSS is becoming a fundamental and often required skill. HTML and CSS are a descriptive design language pair that can be learned just like you learn how to use Sketch or Photoshop. So, after this class you'll understand the HTML Box Model, floats, display types, positioning and depth. You'll know when to let the browser lay things up, which it does a really good job at, and when you should take control. You'll understand more of how the browser works and how it differs from design apps. When you're designing, knowing these things will allow you to make informed design decisions and when you're writing the HTML and CSS, it makes everything easier to understand. So,in a nutshell, this class will cover five different types of positioning, depth management, common display types, padding, margins, borders, translate X and Y, HTML and CSS terminology and lots of examples. We'll end it by creating a web page using what we've learnt about during the class. So, if that sounds fun, then follow along.
2. HTML Box Theory: Let's cover what I like to call HTML Box Theory. It's useful to do this so that you understand how HTML works. In most design apps like Photoshop, Sketch and Illustrator, a layer will visually appear at a higher depth to another if it is higher up in the layer panel. This also applies to groups and sub layers. In HTML, it's slightly different. When an HTML elements, which is kind of like a layer, is higher in the HTML document than another one, it appears before subsequent elements on the page. If it comes first in the document, it comes first visually, it's higher up. The code correlates with what we see. In HTML, elements are like boxes and are stacked by default from the top of the document towards the bottom. An HTML element is characterised by an opening tag and a closing tag. When you add another element, it's like adding another box on top of all the others. Now, you can put elements inside of other elements and this is exactly the same as putting a box within a box. In HTML you can put as many boxes inside boxes as you like and the same rule applies inside a box. By default these boxes are stacked from the top to the bottom. What's amazing about HTML boxes is that they expand to contain all that you put inside them. By default, there are no set dimensions. Most types of HTML boxes that get placed inside of other boxes expand their width to fill the available space. We'll cover a few exceptions later on though. What's awesome about this is that as humans, we don't have to write any code to manage the X and Y positions of any of these boxes. The browser does this all for us. The boxes stack neatly and expand when they need to. There are exceptions of course, and then there's us making our own exceptions because we want our size to look a certain way. We can set all kinds of properties and have super fine control over how our web pages look and operate. It's super fun and it's rewarding and it's also a little bit daunting at the same time. This class progresses from the default way HTML boxes work to getting boxes to do all kinds of things like levitating, sticking and changing depth. We start taking control from the browser where it benefits us.
3. HTML & CSS Terminology: So, I don't usually like using official web terminology. It sounds geeky, it sounds weird, and it often leads people scratching their heads. But I think for this class and for your benefits, to get on the same page would be really helpful. In HTML, you have a bunch of tag sets that make up your documents. Each tag set has a name, an opening tag, a closing tag, and maybe some content. A tag can also have attributes that consist of an attribute property name and value. An attribute name followed by an equal sign with information in single or double quotes is what makes up that attribute. Attributes give the browser extra information about the tag set like, how to style it, where the browser should go next, and where the source of an image is, et cetera. Some tag sets, they don't need a closing tag, so you can write just one special tag like this. In CSS, you can style an HTML element or multiple HTML elements with a ruleset. But how do we refer to all of these parts in a ruleset? First off, we have our selector, which tells the ruleset what elements to style. This can include clauses, IDs, tags, pseudo clauses, multiple selected, nested children, and more. Then, comes the declaration block, everything inside the curly braces. This is where we write the rules to style our selected elements. Each rule that we write is called a declaration, and it's made up of a property name and a property value. They're separated by a colon and end with a semicolon, and all of these is called a ruleset. So, I hope that helps for this class and for future information that you consume.
4. Box-model & Box-sizing: What I've often done in the past is set an element to 100 percent width, and then give another border and some padding, and then it's extended beyond the bounds of the documents. Super frustrating. So, understanding how the box model works is super important. You can avoid frustration and endless stupid hacks. You can add margin, padding and borders to most elements. These three things make up the box model and affect the width and the height of an element. Margin is the breathing space. The element gives itself from other elements. It's like it's personal space. Border is then the outer layer, which you can style. It's like the first layer of clothing. Then there's padding, which is the breathing space the element gives between its border and its content. So, by default, if you set an element's width to 400 pixels and then add some padding and a border, the actual width of the element increases beyond 400 pixels because the width you're setting is the width of the inner-content. The same applies to height. However, if you change your box-sizing value to border-box, the width you set will be applied at the border-level and not at the inner-content-level. The default value for box-sizing is content-box. But, I rarely like using border-box for box-sizing. So, here's a live example on CodePen. We have this box one, it has a width of 400 pixels, padding of 50 pixels, and it has a solid black border that is 20 pixels in width. So, when we inspect this box, right-click, inspect, we can see that as we hover over this box, it has a width of 540 pixels. Why? It's doesn't have a width of 540 pixels? Well, if we draw down here, we can see that the h2, which is part of the content, has a width of 400 pixels. That's what this line does over here. It sets the inner width to 400 pixels, and then adds the padding, which would be padding left of 50 pixels and padding right of 50 pixels, that adds 100 pixels to the existing 400 pixels. Then it adds a further border left of 20 pixels and border right of 20 pixels, which gives you a grand total of 540 pixels. So, good to know. You can work with this and many have over the last couple of years. But, we have this great new way of working with the box model, and it's called box-sizing: border-box. Amazing. If you wanted to know how I just did that, you can type in bz and press tab, and with something called Emmet, which is available in all kinds of code editors. It just expands it. You can type content-box, if you prefer things the old way and you want to be explicit, but for me, I just like using box-sizing: border-box most of the time. This is really easy for me. I set the width and then I say I want 50 pixels padding and I want a border of 20 pixels and it works everything out for me. Thank you very much.
5. Margin, Padding & Border: The margin, padding, and border declarations all have four sides of the box which you can set. You can set margin-top or padding-left or border-bottom. For example, if you wanted to set all four sides, you could do it with four separate declarations. But, you can also use shorthand declarations. By using margin, you can set all four sides at once. You can set the horizontal and vertical values, or you can set all four sides to unique values. The order for the shortcut is top, right, bottom, left. If it's just one value, it applies them to all sides. If there are two values, it applies the first value to the top and bottom and a second value to the right and left. If there are three values, it applies the first value to top, the second value two right and left, and the third value to bottom. The same rules apply to padding. The types of values you can use for margin and padding are typical CSS length values: pixels, percentages, em, rem or em and rem, et cetera. The border shorthand declaration is slightly different as the border-bottom or border-top declaration is also a shortcut. So, when you're using border-bottom, for example, you can set the border width, the border color, and the border style all at the same time. So, when you use the border declaration, you can only set for all four sides. But you can set the color, the width, and the style of all four sides at the same time. On most elements, the width is usually 100 percent, and the height is usually high enough for its contents to fit into. However, this 100 percent width is not set. It just fills up the available width. So, it's quite easy to set margins, paddings, and borders and let the element fill up the space by default. Complexity is introduced when an element doesn't do this by default. Elements like inputs are prime examples. It's example time again. So, we have this box. Inside the box, we have this h2. Now, this h2 is pretty special. It has a background color. So, if we have to just remove that, you'll see that the background color of the box comes through. So now, let's add some paddings, some margins, and let's play around with the shorthand for margins, paddings, borders. So, first, let's add some padding. We can add 20 pixels of padding. Yes, that looks great. Now, we can see the blue coming through. Cool. Let's add margin next. Let's add 40 pixels of margin. Fantastic. Now, if we start changing the padding, we can change this to 30 pixels. Let's change it to 70 pixels. We can start to see what's happening here. That's really great. What happens if we change this one to 50 pixels. Pretty cool. So, you can see how we can use shorthand and that's much better than going padding-top 20 pixels and padding-right of 40 pixels and padding-bottom of 100 pixels and padding-left 30 pixels. That took a really long time, but you can also see that you just want to specify one padding like padding-right, you can write it out. Sometimes when you're writing old-school HTML, especially for HTML newsletters, this syntax is necessary. So, it's good to know. Some margin can pretty much do the same thing. Now, let's try border. So, border, let's go for 10 pixels black. This doesn't really matter which way you put it. We can say solid. That's pretty cool. We can go for dashed. Also, pretty cool. You'll see that if I remove that black and put him over here, doesn't make a difference. I can change this to red, I can change into yellow or anything else that I really want to change them too. So, that's pretty cool, and then we can also say border-top, we can change the border-top to, let's say, 20 pixels solid black. So, you can see how this is taking place. It's really cool and what we can't even do here is even get more specific. So, border is a shortcut, border-top is a shortcut. But now we can say border-top-width, and we can say something like 30 pixels. We can say border-top-color, and we can say red. So, that's the difference between shortcuts and really longhand syntax, it's really good to know both. So, the second example here is how to do negative margining. Well, we've got this h2 and he's called the negative h2. Right now, he doesn't look too negative, he doesn't have any negativity about him. We'll take this out. So, we just go something like margin, or perhaps we can just press tab when we have m for margin. Fantastic. Then, we can set a negative 20 pixels. Wow, look at that. What happens if we go negative 120 pixels? Here we go, 0,0,0. So now, it's literally just at the top that it's a negative amount. Well, we could also do the bottom, but that really wouldn't help. What about the left? So, let's go negative 120 pixels there, and what if I've got a padding of 50 pixels. So, if we just set that to a negative 50, it should align right to the left-hand side. Pretty cool. If we go a further negative 100, it should align all the way to the left. That's a pretty easy way to do negative margining. Voila. The negative h2. This is our third example. I wish somebody had told me this way sooner in my frontend development career. It frustrated me no end. The question that I wanted answered and I had to work out by myself was, how do I get something center aligned horizontally? I want this big blue block to be in the middle of the page. How do I get them in the middle? It's really simple actually. Check this. You just go m for margin, press tab, and then you go '0 auto.' Boom. It's in the middle. What this is saying is that, for the margins left and right, it's auto. So, the browser just works it out for you. Fantastic. You've got a width of 400 pixels, we can change that to 600 pixels. Boom. Does the same thing, even if we take the width that. Still pretty sweet. Undo, look at that. If you wanted to write it manually, you can do it like this. So, ml for margin-left, auto and mr, also auto, then we can take out that. Does the same thing. Sweet. Now, let me tell you about collapsing margins. So, what we have here is a bunch of p's, they've all got a class of box and each box has a number, and those numbers correlate with a background color. Fantastic. Now, each box also has a padding of 10 pixels and a margin-top and bottom of 30 pixels. But, if you have to look at these boxes closely, you may think that's not 30 pixels on the bottom. So, if we inspect this, we'll see that that orange area above box two, that's about 30 pixels. Cool. But, surely there should be another 30 pixels from the margin-bottom from box one. So, if we hover over box one, we'll see that sure, it has a margin-bottom, but it's overlapping. So, what the heck is going on here. Well, one of the margins is collapsing and it's the smaller of the two margins. It just disappears which is cool sometimes, but if you don't expect it and you don't know what's going on, it's frustrating. So, just be aware of that.
6. Display Types, Default Styling & Overriding: Every tag has a default display type. Most tags have a default of display: block. Other common values are inline and inline-block. There are also super awesome display types like flex and grid, but I'm leading those out of these classes. They're a little bit more complex. Other display type values you may come across are table, list-item, run-in, table-cell. There are a bunch more too. The good thing is that any element can get the default display styling overridden, just like any other property. So, let me tell you about the differences between display: block inline, and inline-block, and block elements like a div, a p tag, or one that you've set a display: block declaration on. We'll start on a new line and fill up all of the available horizontal space it's given. The height will be enough to fit its contents into. It's a pretty magical box. Even if you set a width and a height, the element will start on a new line. An inline elements, like an a tag, a span, an em tag, or one that you've set a display inline declaration on, works almost the same as a piece of text. They'll take up as little space as they can and sit next to other inline and inline-block elements. Inline elements are meant for text and data primarily. You should not nest a block element inside an inline elements. Also, inline elements will not start on a new line. When setting margins and paddings on inline elements, vertical changes will not be seen. However, horizontal ones will be. If you add a border, you can see what's really going on. It's pretty amazing. An inline-block element, much like inputs, selects, or one that you've set a display inline-block declaration on, has the best of both block and inline worlds. It can sit next to inline and inline-block elements. When you set margins, paddings, and borders on it, it'll take up both horizontal and vertical space. This display type should usually be used with text and data elements too. As an extra bonus, if you ever want to simply hide something, use display: none. What's going on here? It looks like an absolute mess. Well, it is a mess. There are a bunch of inline elements, there is this block elements, and then there's this input, which is an inline-block element just chilling in the middle of nowhere. So, what is the point of this? I'm just going to show you how to override the default display types. So, the first thing that I'm going to do is show you how to change the div display type. So, let's go to d tab. I'm going to change is to inline-block. Just like that, it loses its ability to expand the full width. It doesn't start on a new line. If we change inline-block to inline, nothing much changes there. So, that's pretty cool. Now, what happens if we go for our em? We change this to display: block. Just like that, it takes up the full width. They start a new lines. Fantastic. It's really easy. Check this out. If we change this to display: none, the ems are gone. Let's just undo that, change it back to block, and then the final thing is this input the type of text. Let's change this guy to display: block. You can see it starts on a new line, but it doesn't take up the full width. What's up with that? Not quite sure. So, let's go with w and expand that. Let's set to 100 percent width. There we go. But we know that this can be a problem when deciding to add padding. So, let's add some padding. Top and bottom padding, 10 pixels. Left and right padding, let's go for 40 pixels. But now it kind of goes off the edge of the page, which is not what we want to do. So, how do we change this? We go for the bz, which is box-sizing, and we set our box-sizing to border-box. Just like that, it's fixed things. We can add a margin. So, top and bottom, let's go for 20 pixels. Left and right, let's go for zero. There we go. Our input, which had a display type of inline-block, now has a display of block and is working perfectly. So, there we go. That's how you override your display types. It's really easy.
7. Floating: The next topic we're going to cover is floating, which is pretty awesome but it can get pretty tricky if you start using it for the wrong things. What it's really good at being used for is getting text to wrap around an element. If you have a parent div elements, with a p element inside, add another element like a div or an image to the parent element and give it a width and height. Next, give it a float left declaration. You can choose between a float value of left, right, or none. We can add another element and float it right. You'll see how the textures flows around it. We can then give these floating elements some margin so the text isn't super close to it. What floating means is that an element breaks out of the normal flow and leaves the rest as is, or inline elements will wrap around it. I don't suggest using mixtures of inline and block elements when it comes to floating. A floating element will float left or right if there is space to do so. Otherwise, it will go on to a new line. Sometimes, you want an element to be a floating element, but you want it to start after another floating elements, or you want a regular element to display after a floating element that precedes it. The best way to do this is to use a clear declaration. You can set which side it should clear, left, right, both, or none, and it will be displayed after the last element that had a clear left or right declaration, or it will come after all preceding floating elements. But watch out. Because a floating element breaks out of the normal flow, if a parent element only contains floating elements, it cannot calculate its height correctly. So, it will often appear as if there is no parent elements. There are some hacks and fixes for this but beware. It's example time. Okay. So, what do we have here? Well, we've got this div tag and inside this div tag, we've got another div tag with the class of image one, and then we've got an image tag with the class of image two, and it's got a source, which points to this little guy here. We then got a p tag with a bunch of text inside of it. What we want it to do is we want it to float these two characters inside of the text. So, let's go to our CSS. We'll go to image one first, which is the div and we go fl for float, press Tab to expand that, default to floating left, which is fantastic. We could also float it right, which would be great. So, maybe let's try that. Then image two, we'll go for floats, which we can talk about if you want, and we can say float left, and you'll see that all the texts just wraps around it and looks really nice. If we make this a little bit smaller, you'll see that, because there's not enough space, it'll just go and start after something else that was floating before it. So, that's really easy, that's great. You can also put some margins on this guy. So, we want margin left, margin bottom. So, zero, zero, 20 pixels and 20 pixels. That's great. Then our image two, pretty much inverse of that. Just remember to put a semicolon after float left there, and we'll go zero, and then we want 20 pixels on the right, 20 pixels at the bottom, and zero on the left. So, that looks great. What's really important to realize here is that this works because these two images are at the top of this div, they come before the p tag. So, if I have to cut them and put them below the p tag inside this div, well, it wouldn't really work because they're not floating anywhere just yet. They're floating after this p. So, if we were to copy this p tag here, there we go. It'll start floating just where that p tag is. So, pretty important to know if you want stuff to float, put it above the stuff that you want it to float in and amongst. Okay. So, we know how to float things, but how do we go against the grain now? How do we make things not float? How do we make things float after other elements that floats? Well, check this out. Let's just copy these two to the top again. So, now, I've got some images at the top, some images at the bottom. Now, we go to our CSS. Now remember, image two, that's the one that came second actually. So, there's image one, there is image two. What happens if we wanted to flip both of these on the left? We don't want them to be next to each other, that just looks weird. So, what we can do here is we can say, float right, like we had, or we could say something like clear left. This way, it goes to the next line. Now, we're like, what is going on here? We've got things happening all over the show. Well, again, on image one, we can say, clear left, and now, it goes to the new lines. So, you're not ever going to have two images or two things floating next to each other on the left-hand side. So, that's really helpful. Now, we can have a bunch of text and it's going to wrap around all of these images. We can put the same amount of margining on both of these, and there we go. It looks really nice. It wraps around these images really, really nicely. The other thing that we can do is we can just set float to none. Something like that. But if you want text to wrap around it, well, let's just leave that out. Now, again, if things are floating right, you can also do things like clear both, which, in this case, will have the same effect. But perhaps, we have rights and left and, now we just want to say actually just clear both sides of these. Just in case, we change the floating to the right hand side. So, if we didn't have any clears here, that's what would happen. So, just take this out here again. If we change this image two to clear right, or clear both, it will then start on a new line, and then, this one's floating right. So, we want to say clear right, or clear both. Okay. It goes on to a new line. So that's fantastic. That's how we do clearing. It really helps sometimes. Then, again, this p tag, if we don't want him to be involved with these clear elements, we'll check this out. We'd just go clear both, and, voila, it goes to the bottom. It doesn't want anything to do with these clear elements. Pretty easy, right? So, we have these three images, this guy, and two of these blue guys, and we want to float them next to each other. Sometimes that's quite useful, and you'll see in the next example why this can be especially useful. So, what happens here? We go float left, which is great, and then, we go float left, which is great. But then, where does our background go? Where does our parent div go? It's just disappears. Where is it? Well, because it's floating, parent goes. Well, I don't really know how high it should be. This is a problem. So, I mentioned a couple of fixes that you can do. The first one that we can do to go to our parents and we just go overflow and we go hidden, which is great. Except, if you then change your image one, if you start to translate them. So, transform and translate Y, let's say, and you go to something like 50 pixels. It chops it off, and when we go to something like maybe 100 pixels. Man, that's just not going to cut it. So, if you see over here, we'll just remove this again. You can see his legs, and if we put that back, you can't see his legs. So, what we do here is we go dot parents, we'll now put an after pseudo-class. We'll then set its contents to nothing. We'll then set its display type to table and we'll say, clear both. Now, that should do the trick, and this really called the Clearfix. We can remove our overflow hidden, and just like that, things are working again. Pretty sweet. Now, if you want to make this work in all of the browsers, there are many different ways of doing this thing called a Clearfix, but for modern browsers, this is all you going to do. Just on the parent div, or the parent element, you just set a pseudo-class of after, set its content to nothing, display type table, just pretty weird, and then you're going to clear both. Fantastic. So, what is this example about? Well, I'm actually going to make some columns inside of a parent div or a row div. So, the first thing I'm going to do is, I'm going to put these 1, 2, 3 columns inside of a row div. Let's cut that's, let's just indent our code. We're going to create a row class like so, and then my col, I'm going to float left like so, and that's actually looks quite a lot like a menu structure or a navbar structure. Bear that in mind. Then, what I want to do is, I want to put a bit of margin in between here. So, margin-left, I want to say 20 pixels. Cool. That looks really good. Then, let's go to my row. I want to set a background color. That's cool. I'll just say red for now. What's going on? Well, because they're floating, we now need a Clearfix. So, let's go dot row and let's go after pseudo-class. Okay. We'll then going to say content is nothing. We're going to set the display type two table, and then we're going to tell it to clear both. Okay. So, there we go. We now have a background, we now have some heights, and our row. But, what I want to do now is, I want to remove this margin on the left of the col one. So, what I can do is I can say dot col first-child, this is another pseudo-class, and I can say margin-left, nothing. There we go. So, I've just got a margin-left between col two and col one and between col three and col two. Now, what I can do is I can set the width of these two. Let say 100 pixels. Fantastic. But, remember that we haven't set our box-sizing yet. So, box-sizing border-box. We'll just make these slightly smaller, or we'll just make them 100 pixels in width. So, we can now set our row width. So, it'd be 100 pixels,100 pixels,100 pixels, plus 20, plus 20, which will give us 340. So, width of 340 pixels. Perfect. Then, we can say margin, we can say zero and auto. It central lined it for us. Fantastic. Now, we can copy our row. There we go. Perhaps, our row, we may want to just put a bit of margin top or margin bottom on. So, let's go for 20 pixels there. Fantastic. We can remove our background color, and there we go. We have this fairly table-like structure except it's not a table, it's made out of divs that are floating. Fantastic.
8. Transform & Translate: You can use the transform declaration for all kinds of things: rotations, scale, 3D stuff, and simple moving of elements. We're not going to cover much of what the transform declaration can do except for the translateX and translateY values. The transform declaration is a little bit weird as the value is part declaration and part value itself. We add brackets to the end of the translateY or translateX value and insert a measurement value. It's really easy to use, and it's almost like relative positioning, which we'll cover soon. The thing when using translate is that the element moves either on the horizontal or vertical axis without affecting any other elements. It's almost as if the other elements still think it's where it is, but it's actually moving about. It's very sneaky. Already, let's do this example. So, what we're going to do is we're going to do some "tf" for transform, expand that and go to "translateX," and then in brackets, we can put something like 30 pixels. It goes to the right-hand side if we go negative 30 pixels. There we go. We can also do something like 90 percent. All the way to the right, 100 percent, even more, all the way to the right. So, this is pretty cool. What we can do now is we could, you may think, go "transform," and "translateY," and then put it negative 40 pixels. But, what happens here? Well, what happens here is that this transform declaration overwrites this one. So, how do we actually write translateY and translateX together? Or we can just take this line here. I'm going to copy it, paste it over here, and there we go. So, we can change this back to like 50 pixels maybe. Then, you can have translateX and translateY in the same line. You could also do some more transforming. So, let's go for a scale of 1.5. There we go. Pretty cool, right? If you wanted to make this a lot shorter, we could just go "translate()" and put two values in here, X value, so 30 pixels. 50 pixels. There we go. So, translating with transform is really easy to translate the X and Y position and none of the other elements are affected. Fantastic!
9. Position Terminology: So far, we've learned a few ways to lay things out with HTML and CSS. Well, now, I'm going to be covering positioning, which, in my opinion, is super important and the crux of this class. So, I'd like to explain some terminology that I like to use. I've included it in a cheatsheet download, too, which you can refer to as you go. For an element that has a declaration comprised of a position property and a static value, I would call it a statically positioned element or a static element. For an element that has a position value of relative, I would call it either a relatively positioned element or a relative element. I would call an element that has a position value of absolute, an absolutely positioned element or an absolute element. For an element that has a position value of fixed, I would just call it a fixed element. Finally, I would then call an element with a position value of sticky, a sticky element.
10. Static Positioning: By default, an element's position is static. So there's no need to set it yourself unless you want to override a previously set value. Static elements that appear first in HTML should appear first in the browser. Much like a stack of boxes would visually. Especially, if all the elements are also static. The browser dynamically positions static elements after the previous static or relative element. It also calculates the width and height. The width is usually 100 percent and the height is usually high enough for its contents to fit into. You can set the width and height manually too if you want. Static elements are super handy and remove most of the hard work which we're used to in most of the design apps we use. With static elements, the top, bottom, left, and right declarations, as well as the z-index or z-index declarations, do not work. You can still offset this position using margins and a transform and a translate declaration if you want. If you use margin-left and margin-right, it will calculate the new width for you. Whereas using transform and translate will not change the width. Static elements are great for pieces of text, images, quotes, lists, and tables. Basically, anything that can have a variable length.
11. Relative Positioning: Relative of elements are almost exactly the same as static elements, except for some added benefits. When you position elements relatively, you're basically saying, "If we position you, it will be relative to where you are," which makes absolutely no sense, but hear me out. So, with a relative element, the top, bottom, left, and right declarations are now available. You also see in Chrome, that these position values are visible in the box model diagram. What this means, is that we can move in elements around from the top, bottom, left, and right if we want. It's almost like transform and translate. If you want it to be 10 pixels from the bottom, select that. If you want 10 pixels from the right, select that. When you position a relative element with one of these declarations, it won't automatically adjust the width or height. The types of values that you can use for top, bottom, left, and right declaration are typical CSS length values, pixels, percentages, EM, REM, et cetera. Okay. It's example time again. So, what we are going to do here, is get into some relative positioning. So, on box three, we can go pause R. If we just go pause and press tab, its relative to, but we could go pause R for position relative. Fantastic, then we can set a left value, maybe you can go for 20 pixels and it moves it up by 20 pixels. You'll see that the width doesn't change. We can change this to a negative value two. We can also change the right values where you can say 20 pixels. But this is kind of weird because this is kind of what the left is really doing. So, let's go for 50 pixels. It still doesn't do anything and that's because you've got a left and a right value. So, let's just take that out. There we go, right. We'll work now. So, either go for left or right, you can also go negative 50 pixels right, which is kind of the same as doing a left of 50 pixels. We can then see the top of 30 pixels and you can see that this is a lot like transform and translate. We can also set a bottom of pixels or negative 30 pixels. Pretty easy. It's really, really handy. You'll also see that it doesn't affect any of the other elements as well. Fantastic.
12. Absolute Positioning: Absolute elements are where things get super interesting. The way it works is similar to most design apps and gives humans a lot of control and power much like Spiderman. When we position an element absolutely we're basically asking you to step out of the normal document flow, any other content around it will be positioned as if the absolute element wasn't there at all. You'll see it's width and height will shrink so that it contains its contents. We now have control over its width, height and where this element is positioned in the document. It's all up to us. If we had to do this with every single element, we may be here for days. That's why static and relative positioning is so amazing most of the time. An absolute element is positioned relative to its first non static and sister elements. This may not be its direct parents. It will travel up the document tree until it finds an element that is not statically positioned. So, the first element that has a position value of absolute, relative, fixed or sticky will become its position parents. If there are no non-static elements in the elements ancestry, it will select the browser window as its position parents. This means that the absolute element goes where the parent goes and can be affected by its parent's width and height values. We can now use the top, bottom, left, and right declarations to position an absolute element relative to its position parent. So if we set the top value to 20 pixels, it will position itself 20 pixels from the top of the parent. If there isn't a width and height set or if they are set to auto, we can use the top, bottom, left, and right declarations to dynamically set the width and height. Like always be 10 pixels from the top and always be 10 pixels from the bottom. Okay so, first example is this child 12, this going absolute guy that's got a bit of white text. So, the first thing we do is we go pos A, position absolute, press tab to expand and you'll see automatically it goes out of the documented flow. It's almost as if it's siblings just go, "Now, you're not part of the family anymore. We don't even see you." And you'll see that it looks like it's just hovering above its siblings. Okay, so now it's just chilling because we haven't set a top value, a left, a right, a bottom value. So let's start with the top value. Let's go zero pixels for now and you'll see that it goes to the top of the parent box, and the parent box has a position of relative. Now, it chooses this element and we can see over here this child 12 is now choosing this parent box to be its position parent. It's not choosing this child five because this child five has a static position. So. If we have to change our child's five position to relative, you'll see that now child 12 is going to the top or sticking to the top of child five. Pretty impressive. So, if we have to take this out again, you'll see that it pops all the way to the parent box. And if we have to take up the position of the parent box, it goes all the way to the top of the document which is pretty cool. And now if we set a left position here, like so. It's literally at the top of the document and that's how it chooses its position parent. Okay, so what I want to do here is I want to make child five an absolute element, too. So pos A, it becomes an absolute element and now it may look like some crazy stuff is going on. Let's quickly have a look at the HTML and you'll see that child 12, which is over here, is inside of this child five element, which is over here, and we've just set that child five elements to position absolute. So, if we change the child five top value to zero, it'll kind of show us where the position parent is which looks to be the document window. So if we scroll up here and we set the parent box to position relative, okay there we go. So, child five is now positioning itself according to the parent box and then child 12 is positioning itself according to child five. Well it can get a little bit complicated, I know. Bear with me. So on our child five, we're now going to set the width temporarily to 100 percent. Okay, that gives us a little bit more breathing space. It doesn't look so complicated now. Okay. So, what I'm going to do here is, I'm going to set the bottom to zero, too, and what this does is it says I'm going to be positioned zero pixels from the bottom. So, if we had to take out this position relative on the parent box, now that's really cool. It's now positioning itself relative to the document window, and instead of width 100 percent, we can change this to right, zero, and left, zero. And let's just take out the width and just like that there should be no space around it. Fantastic. We can also set these to 30 pixels and that doesn't look so right, 30 pixels, and this kind of acts like a margining. So top, right, bottom, left this is really cool. So, we can set width and height without actually using width and height declarations. We're using top, bottom, right, left and I've just shown you how to position an element inside of an absolute element. So now, when we go to our absolute child and say bottom zero pixels, fantastic. The next thing I'm going to do is show you how to negatively position an absolute element. This is quite useful for close buttons and things like that. So we've got this child 12, this glorious child 12, you've been a fantastic example, thank you so much. So, let's go change this from bottom to top again and we can set this to negative 30 pixels, maybe let's go negative 50 pixels and left negative 50 pixels, there we go. And if we had to set this width to something like 30 pixels, there we go and the heights of 30 pixels, too, that would be great and overflow of hidden. There you kind of get the. "Hey, this is a close button kind of example." So there we go. It's really really useful. One thing you must be aware of though, is if you've got an overflow hidden on the position parents, it's gone. You can't see it anymore. So just be aware of that. So, now we get to some little bit more advanced stuff. We've got a simpler example though, we've just got this one box, it's box one with a couple of box two children inside and now what I'm going to do is I'm going to show you how to use a pseudo class in conjunction with absolute positioning. So, you go.box-1 and a pseudo class of after, and then inside this we can normally just go content and to show you what this does you can say, "Hello there!" And just like that there's some content in the HTML, but we can't select it and that's what's really cool about this content declaration inside the after or inside the before pseudo class. It's really cool. So let's go back to after and now what we can do here is we can say pos A for position absolutes, okay. And perhaps we can give it a background color, so background color, let's choose one of these, let's go for this blue color, and then perhaps we can say left, zero; right, zero and what's happening here, well the position parents isn't actually our box one. So, let's say position relative and there we go. We can say it's bottom, zero. Fantastic. Now, where this is quite useful is, you can start setting borders like this. So, if we had to take out our content we've basically brought a border here. Okay, there's none right now but let's go for a height of four pixels and there's our border. And if we have to set our bottom to minus four pixels and what about our right, minus four pixels, left minus 4 pixels. We've now got this blue border. We can also set its opacity 2.5 and now we have this kind of greeny border. Really interesting it's now mixing with our background color. Really cool. So there you can see that we're using absolute positioning with an after pseudo class. Really, really cool.
13. Depth & Z-Index: Now, that we've covered absolute elements. We can start covering depth which can get a bit confusing. So, listen up! Any non-static element is assigned a depth by the browser automatically. If you don't do anything about it, the lower down in the document tree and elements, the higher its depth value will be. Basically, it will have a higher altitude. Remember that HTML is the opposite of design app layers. It's an upside-down box world. So, because our absolute element is not levitating, you may think it should levitate above all but it doesn't necessarily. If there are non-static elements below it in the HTML tree, these elements will have a higher depth value than the absolute elements and may appear above the absolute element. If you have two or more absolute elements levitating at around the same position on a page, you'll see that the one which is lower down the HTML tree has a higher altitude and appears to be on top. But we can manually change any non-static elements depth. We do this by giving the element a zed index value or a Z-index value. Z-index is the human-assigned depth value of an element. As soon as we given a value of one or higher, it will be at a higher altitude compared to the other elements in its box. If all non-static elements in a box are given the same zed index or Z-index, the depth will again be determined by the position in the HTML tree. Z-indexing is not only for absolute elements though. Any non-static elements can have a Z-index value. Setting a Z-index is pretty magical. But, you have to take on the responsibility of depth management which the browser normally does really well at. When you use Z-indexing you use integer values just 1, 2, 5, 10 etc. You don't use pixels or any other measurement values. A very important thing to remember is that if you're using the Z-index, most of the time an elements altitude will be capped by the altitude of its parent. So, if there are two absolute elements and they overlap and there was a child absolute element in the lower of these two elements, the maximum altitude will be that of its position parents, even though you said a crazy high Z-index value. The Z-index value determines its depth in the realm of the position parent box, not the entire document unless it's parent is the document window. This even applies for fixed elements which we'll get onto next.
14. Fixed Positioning: A fixed element is exactly the same as an absolute element. Except that we position it, it will always be relative to the browser window. This is pretty powerful, and it's often used with things like fixed navigation bars, menus and popups. Okay. So we have our boxes again. Fantastic. What I'm going to be showing you now is how to work with fixed positioning and absolute positioning. There are tons of examples that we could go through. But I think one that works really well is showing you how to create a popup. So let's do our html. Let's go for a div for the class of popup, and inside the popup, we're going to have a div for the class of blanket, and our blanket is going to be this rectangle that spans the entire width and height of the window. It's going to be black and semi transparent. We then got our content div, and inside this content div, perhaps we can have some content and then we also want a closed button. So let's go for a button class of clothes. I'm going to put some closed text in there. Fantastic. Now, let's do our CSS. The first thing I want to do is go for my popup. I want to change this to position of fixed and then let's set our top to zero and let's set our bottom to zero. Left, hey Elizabeth, to zero too, and our right to zero. Fantastic. That's all we really need to do for the popup. We then got our blanket inside the popup. All righty. This is pretty much going to be exactly the same as our popup except it's going to be absolute. Let's go. I'm actually spell that all out. Absolute. Fantastic. For this one, I'm going to set a background color and we're going to use RGBA, which is red, green, blue, alpha channel and say 0, 0, 0 and 0.7. So this is black with a 0.7 Opacity which is fantastic. We then going to say.popup.content. Now, the content is going to have a position of absolutes. So we could copy this or we could just write some of it ourselves. Since we got pos absolute, and we're going to set the background color to white. That's great. Then, let's set a width of 400 pixels and a height of 300 pixels. Fantastic. Now, I want to get this in the middle of my browser window. How do I do that? Well, we could do it with Flex but this class is not about Flex. So let's rule that out as a possibility. Check this out. I'm going to say top, I'm going to give it a value of 50%. Now this would make it start halfway down. It's not in the middle really. But if we set margin top and we gave it a negative value, and because we know the height, we can say negative 150 pixels which is half of the height. It means that it's always in the center. We can now do the same for our left. Let's set that to 50%, and then we say margin left minus 200 pixels because we know the width. What's really cool about this is that if we have to change our popup which is not fixed, we can set top, let's say 100 pixels. You'll see that our popup content stays in the middle. Even if we change this to 200, it's always going to be in the middle which is correct and amazing. So there we go. We've got some content. We've got our blanket. Now, let's style the closed button. So blanket.close. Okay. The first thing I want to do is take off that default styling. So I'm going to say border none, and then, I'm going to say background color and we can steal a color from up here. There we go. Instead of saying blanket, I'm going to say popup. There we go. Much better. I'm going to set its color to white and give it some padding. Let's say 10 pixels. Give it a font size of 30 pixels. Okay. Font-weight- Let's go for bold. Let's change the font size to 20 pixels. Fantastic. Then, we can say position absolute, and we can say top. Let's go for minus 20 pixels. So it's going to set slightly outside the content of, and then we can say, right. It's supposed to go minus 30 pixels or so, and there we go. We've got a close button. Perhaps we can say cursor, pointer. There we go. Fantastic. Perhaps we can also just change our content to a box sizing. Put a box and we can put some padding inside of it. Let's say 20 pixels. Voila, we have this perfect little popup. Now, you probably wouldn't have a close piece of text in your close button. You'd probably have an X or something like that. But for an example, this works perfectly.
15. The Calc Function: After a student posed a really good question, I thought it would be a good idea to add this video on the calc function to the class. We can use the CSS calc function to get the browser to calculate numbers for us lazy humans. For example, we can calculate measurement values really, really easily. What's super cool about the calc function is that we can combine different types of values like pixels and percentages in the same sum. We can use the add, subtract, divide, and multiply operators as well as being able to use brackets to tell the browser which parts of the sum to calculate first. It's best practice to surround each part of the sum with some whites pace. So, before and after each operator, add a space. Now we've seen this picture before. It's all popup. Fantastic. But now I'm going to show you a little bit about the calc function. So, for example, we've got this width, the 400 pixels, let's use the calc function to do some calculations. So, we can say 200 pixels plus 200 pixels which would equal 400 pixels, right? We can say something like 600 pixels minus 200 pixels would give us 400 pixels again. We can change this all over the show and the browser just calculates it for us. Fantastic. Now, we can also do things like percentage based, so plus lets say 20 percent, lets go for 300. Fantastic. Then if we had to make this small or bigger, you can see that the width actually changes, really cool, right? We could also add a couple more in here, so maybe like minus let's say 150 pixels. Okay, let's add something like 50 percent, really cool. We can also do something like 100 pixels multiplied by four, which would be 400 pixels or two, which would be be 200 pixels. You can see where I'm going here. We can also do brackets, so we can say bracket there, bracket there so it's multiplying by two, but if we go to plus five, it goes to 700 pixels. If we didn't have those brackets in there, it would go 100 pixels multiplied by two plus five, in that order. So, when we put the brackets in, then it does the brackets first, so it does these ones first and then it calculates 100 pixels multiplied by this value, which would be seven. Okay, so we've played around a bit which is great but now how is this actually useful? Well, so we want to go for a width of a percentage value. So, say something like 80 percent and then you want to go for a margin-left, lets go for minus 40 percent. That makes sense, lets try for the top now. So, let's go for a value of 80 percent again and then margin- top, lets go for minus 40 percent. This doesn't work, why doesn't it work? Well, it doesn't work because the margin-top percentage value doesn't work it out on its parent's height, It works it out on its parent's width, kind of crazy. So, how do we fix this? Well, I'm just going to comment this out like so and then I'm going to use the calc function of over here. So, calc and I going to say 50 percent minus 40 percent, like so and you see that this doesn't quite work and that's because we don't have an extra space between the minus and the 40 percent. There we go, that should solve all problems and now we've used calc and we're using percentage based values inside of our popup. That means when we grow this, our popup also grows. Fantastic.
16. Sticky Positioning: What's stinky positioning does is it allows an element to stick somewhere when it reaches a certain position. It's automagically alternates between relative and fixed positioning for you as well as adding extra space to make up for where it was positioned in the documents. But the thing is that sticky positioning is fanning you and it doesn't work in all browsers, it may need a browser prefix or some Javascript help. For more information on which browser supports it and which ones don't, check out caniuse.com. Using sticky positioning is a really nice technique to subtly and progressively enhance your websites. Meaning if it isn't supported, it's not that noticeable but if it is supported, it adds to the experience. To get sticky positioning to work, you'll need to set a position at which sticks. Try a top or bottom value and remember, you'll still have to manage the depth. Okay, let's do some sticky positioning. We've got all of our boxes here again. There's a lot of them. What we're going to be doing is replicating like an address brickfield. As you scroll up, then something sticks to the top. I'm going to be working with box two, primarily. So, what we need to do is we need to give it a position of sticky. Sticky, fantastic and then we need a set up position at which it should stick. So, we're going to say, top. Let's go for zero. As we scroll, you'll see that, hey, it sticks when it gets to zero pixels from the top. What happens here? You'll see that this one has a higher depth and so it cross over the top and then it covers it. When this one goes over the top, it covers it, pretty cool. So, what's really going on here. Let's set this at 60 pixels on the top. Scroll to the top again and let's scroll. Now it's at 60 pixels, great and then-. See what happens there, it just like pretty much picks it up. Really cool, right? What happens if we have to set the opacity to 0.5 and then we can see what's going on. So, box 2a, goes here, but it stays there, you see it doesn't go back because it's at the top, it's not moving. It's just that box 2b is now on top of it. Pretty cool, right? So, let's take the opacity away. Then, you'll see that, hey, it works out that there should be this big gap left over they, browser is pretty intelligence. Before those position sticky came out, you'd have to do this with JavaScripts, it was a little bit tricky. Now, you may still have to do that if you want to target older browsers. So, that's really easy to do, right? Let's check out the bottom. Bottom 60 pixels, what's happening here? Well, the best way to check out what's happening here is if we have to go all the way to the bottom and we scroll up. As it gets to 60 pixels from the bottom, it sticks. As 2e gets 60 pixels from the bottom, it sticks. But the thing is that box 2f has a higher depth than box 2e and that's why it doesn't really work out that well. So, we could actually do some manual depth management here. So, let's scroll down to the bottom here, box 2e. Let's set a style here. We could do something like, z-index; 2. How about that? It didn't really like that, did it? Okay, scroll all the way down. Okay. Therefore, box 2e is above box 2f. So, sometimes it's really good to do some manual depth management and that is sticky positioning. There's a lot of other uses for it but that's a really handy example.
17. Putting It All Together: In the next few videos, I'm going to take you through making a website using the various kinds of layout techniques we've learned about in the previous videos. You can follow along, and then make your own web page using what you've learned in the class.
18. Project: The Setup: To bring everything together that we've learned in the last couple of videos, I'm going to take you through building an example sites. It's simple, it's bold, it's big and it's colorful. It also has these really cool little characters and it's going to be a great example of how to implement a couple of these Web layout techniques that we've learned about. So, where do you start? Well, for me I'm going to start from sketch, sometimes you can start from Photoshop or Illustrator, some other design app, sometimes all you could have is a Scribbled on a napkin, sometimes you've got some Mockups, sometimes you've got some Wireframes, sometimes you just start straight in the browser. It's really up to you and whether you're more of a designer, a developer or a unicorn, like me. So I can go from design to development really easily, and I can often finish a lot of my designs in the browser and I use the browser as a design tool. So, what do we have here? Well, I've got this banner and inside this banner I've got some information, I've got a call to action button, I've got a couple of these characters which can be absolutely positioned. I then got this NAV bar which is a sticky NAV and you actually see how big this is if I just zoom in to 100%, it's pretty big. Well, yeah. Okay. Then I've got a bit more information. I've got a Sign me up button. Then I go to a story and things that the gang finds really important. Okay. Then got a nice little gang picture at the bottom with a really, really simple footer. That's great. If someone clicks on sign me up or sign me up on the right here, it'll open up this little pop up. So that's really simple. What I've done in the meantime is I've exported all the assets that I need inside an image folder. I've got character one, character two, character three and I quote this close button. All this extra on the close button, I've also got the gang picture, I've got this hand image, I've got this weird file, don't know what that is and then the gang logo. These could all be SPGs because their vector inside of sketch but for the sake of this class there all just images, I've exported them at a retina display level, so that means they are two times the size as they are inside of sketch. Now, let's open up our WWW folder. We can open that in sublime. I'm going to use sublime, you could use code pen, you can use whatever code editor or IDE that you like. So the first thing I'm going to do is, I'm going to create a new file and I'm going to save this. So Command S as index.html, and this just means that the browser looks for this index.html file, when it finds it, it opens it up first. Fantastic. And then with Emmetts, I've got a whole class on this. You can expand this exclamation mark by pressing tab or control E and it puts all this lovely code in for you. Then I will say the gang. The next thing I'm going to do is I'm going to put in some CSS and I'm going to say style.CSS. Fantastic. I'm going to save this. I'm then going to create a new file, going to a save this as style.CSS. Cool. Then just to double check that everything's working, I want to set a background color on my body so BGC tab. This is Emmett again. I'm going to say, Yellow. Save that. Let's go back to a finder try an index to html to Chrome and it's yellow. Okay. So that's good news. Let's go back to Sublime Text. Let's close our style.CSS file. The last thing that we need to do to get everything set up and ready for us to code is, we need to commit our project and our code base to a repository. I really like using git and git hub and I really like using git hub desktop. It means I don't have to know anything about git really, it means I can use an app to do things rather than the terminal and let's open that up. It's cool, github desktop. Okay. Fantastic. Now, if we going to our finder, we have as WWW. But we just drag into Github desktop. Says, "This directory does not appear to be a good repository, would you like to create repository here instead?" "Yes please." And we can call it, the gang. And the description, we can say the gang's Web sites and then we can say initialise this repository with the real me. And you can say create repository. Now we have this repository on our local computer. What's next is we go and publish the repository to Github.com. And this is really cool because it means that if our computer crashes, something bad happens, we have our code online in the Cloud, on the internet, on Github.com. It also means that with Github pages we can publish our websites under a Github URL for free. It's pretty cool. I'm trying to use the same name here, I'm not going to keep my code private and then I'm going to say, publish repository. And this literally sends it to the Internet. Fantastic. I can then go to Google Chrome, I can go to Github.com/mrra, it's my username. Can go to repositories and gang is there. Now index.html is here and our style.css is here. Fantastic.
19. Project: The HTML: What we're going to do in this video is, we're going to build the general structure of our site. I'll be referring to sketch quite often just to see all the different elements that I need to put into my HTML. And then I'm going to code it up inside of sublime text. So, what do we have? Well, we've got this big like hero banner type thing. We've got this nav bar. We've got this more info, little section here. We've got these little separators and then we've got the story section. Now the separator, an image and a footer. So let's start getting into HTML. Okay, so inside our body, perhaps here we can say.herobanner, something like that. That's great. Let's go to sketch and we can see we've got a nav bar. So we can say nav, okay. Then we've got more info sections, so.moreinfo. Okay, what's next? We've got a separator so perhaps you can say,.sep for separator. Okay. And then we've got our story section so.story. There we go. And beneath our story we've got another separator, so.sep. And beneath that we've got an image so let's go IMG. And here we can say image and then we can say gang.PNG. Okay, and for this, check this out. It is 1426 by 796 but we know that's not really the case. So, if we go back to sketch and just have a look at this image in 735 by 399. So I'm going to copy that and remember 399. Okay, so with the 735 and an Alt we can say the gang. And then we've got our footer. Fantastic. And then we've also got our pop up. So let's do a.popup and inside here we can say, blankets. And we've already done this in this class so this shouldn't be anything too new. We then got contents, and inside our content, we you can have a button.close. All righty. Now we can start filling in all of the in-between parts. Let's go back here. Okay, so inside our hero banner, we've got one, two, three, four kind of elements and we've got a couple of these characters. So what's happening here is that this element is about 960 pixels wide which is kind of a standard size. I want some margining on the left and some margining on the right. I always wanted to be in the center, but I want the text to be left aligned. So 960 width is the width but I want this to be all inside a container. And you'll see further down though that this is also 960 width and so is this. So we can actually make a class of this 960 width. So inside our hero banner we can say something like.wrapper and then we can do what would this be. This is a fun size of 20 pixels so we can perhaps say an H3 or an H4 and just copy this, paste it. Tap tap kabum is an A tag so I'm going to go to Control W to wrap it with Emmett and then type in my URL. Okay. And then after the H4 we've got the H1 which we can copy. So H1, space that. And here we can change this to an amp. Okay. Now we can put a line break over there. Put a line break here. Can actually put slashes there if you want to. The silliest most awesome gang in the world. That's an H1. Then we've got this which could be an H2 maybe or it could be just a P. Who knows? So perhaps we can even make it an H3. Put a line break and there, convert this to an actual ampersand. So you've got H1, H3. Then we need this CTA so let's go for a button and call it a CTA. But there's also another CTA down here, which one's going to be the alternative? Well, there's also another CTA on our pop-up, I want in. So perhaps this one can be the alternative. So I'm going to say, CTA and just say, Alt for alternative. And we can say, read more. Okay. So that looks pretty good, I think. And then inside of this hero banner, we can put these characters. So, at the bottom here, inside of hero banner we can say.character1, expand that, we just copy and paste this twice. Character 2, character 3. And these don't have to be images, they can just be divs. We can set their background just makes things a little bit easier. I have used a different method down here with this image just because we can be different. I'm going to press save, let's just go to chrome here and refresh. Okay, starting to take shape. Yeah, it looks good. So if we go back to sublime text inside of our nav we have- so we have the logo and we have a couple of these links on the right. So let's go for a.logo and perhaps we can just put a hash there for now. That could take us back to the top of the page. Here we can say, the gang. And then with CSS we can actually set up background image on that. And then once we've got the logo sorted out, we now need to create these links which we could actually do really easily just using some floating. So we don't really have to use a list but I like to use a list when it comes to navigation items. So in an un-ordered list and inside there can be list items and then inside there can be links. We've got three of them. So with Emmett we just do that. I'm just going to put hashes here for now and then we've got sign up the story and more info. Let's go sign up and we'll float this right perhaps. Sign up, the story spot right there we go, and more info, and so spot right. So that's the navigation, we've got the gang, we've got you a URL in there. Fantastic. Then our more info, I'm going to save this, go back to sketch. We've got a 50 pixel size heading which is pretty much the same as just H1. So we turn really one two H1s on page, I'm going to make this an H2 and say, join our fan club. So I'm going to just copy and paste that. Okay. And then I'm going to copy and paste all of this and put this into a P tag. Okay. I'm going to just remove the extra space there and have a party. We want to do something different with this. So, yep it includes the actual full stop or the period. So let's just wrap that with a class of highlight. Is that how you spell highlight? I think so. And it's going to be span of a class of highlight. Okay, so we've got our H2, we've got a P, and then below the P we're going to have this CTA button. So button.cta and the content of the button is going to be sign me up. Let's expand that. Okay that's looking good. Let's go to chrome. Refresher. Okay, Sign up the story more info. Why isn't all of this in their separate items? Let's go back and check. Okay. So we've actually got three As inside of one list item. No good. So here we can just paste one, paste the other. Okay, let's save that and go back tot to chrome, refresh. There we go. And this is really important because this is almost how your browser sees it without the CSS. And if you can make really good sense of your web page, if there's no CSS it's generally a good web page. So, here it is. It looks pretty good, we just don't see our friendly faces over here. But that's okay. Join our club. Sign me up. Nothing is happening with these. That's great. Let's go back to sketch to see what we can do next. Okay. Then we've got the separator, which you've already done. And then we've got this section. Let's have a look at this. This is size 40. So perhaps it's an H2 or an H3. We made this one an H3 I think. So we made it an H4 and that was size 20. This is size 40, okay and this is size 50. Lots of fun sizes to remember. Okay. So inside the story let's say we have an H3 here and we can just copy and paste this and put another line break here. Okay. After this we can have a P tag which is great. Let's just copy all of this and paste it and I'm just going to close this P tag and then open another one here. Okay. Then the last one, just write out manually. These shapes were, there we go, very sad, so let's do that and just close that P again. Then, there we go. So, if we have go back to Chrome and refresh, that looks pretty good. We then have this list of things we find important. How is this going to look? Well, this can float left. So, perhaps we can put this over here and say, div.list of nb or perhaps you can just say nb-list. Fantastic. Perhaps we can change it from a div to a ul. Yeah, let's do that. Then inside here we've got a couple of list items. So, we've got Rock and roll so I'm just going to go Rock 'n Roll. Perhaps there's an apostrophe there. I'm not sure. We then got Laughter. We then got Square Offs. I'm not going to be able to spell that, Circuitous Routes, Trigonometry, Rad hats, I mean, Being Silly. There we go. Then with sublime I just select that. I go to selection, then I go split into lines or command shift L, and then I press command and left O, type Alt LI, and then end off with an LI. Press escape. There we go. In sketch, we've got this Laughter one, which is pretty special. So, what are we going to do here? Well, perhaps we can make this element special and this element special. So, in here we can go LI, and there's going to be nothing in here, so I'm going to say, and non-breaking space and non nbsp, non-breaking space. So, that's basically HTML terms for space that shouldn't be collapsed. Then, we've got this Laughter one, which perhaps we can say, "Class of special for now" or maybe dragging. How about that? Okay, that looks pretty good. How are we going to tell them what colors these are? So, let's go for a class of blue, and let's just copy and paste this. Rock 'n Roll, this one. The non-breaking space will be gray. Laughter, I think that was yellow. Square Offs are red. Circuitous Routes are pink. Trigonometry is, what is that? Salmon. Then blue and then yellow again. Fantastic. So, let's save that. Let's go back to sketch, then go to separator, then inside our footer, we have Made by Rich from Tap Tap Kaboom again. I'm just going to go to the top here and copy this A tag, I'm lazy. Pretty good, pretty sweet. I think that's all we need from an HTML point of view. Let's go back to crime. Let's refresh here. Yeah, that looks great. What is this thing? I don't know what this thing is. So, let's right click, inspect it. There's a button, all right. It's a button close. Cool, that's great. Perhaps for now we can just put close in there so that we know what it is. Then inside of our pop up, we can actually put some contents. So, this is 50 pixels. It's pretty much the same as this one. To join our club was an h2. So, let's put our h2 in here. Fill in your details, and there we've got a form. So, let's go for form, action for now, let's just leave that out. We can have a label. The label can be your first name. Then underneath the label, we can have an input, the type of text, and a placeholder with, what should a placeholder name be? Perhaps we can just say, awesome face. Yeah, that's good. We can give it a value of Shirley. This is just so that we can style it really easily. Then, next, pretty much copy and paste all of these. But before that perhaps we can just wrap the label and the input in a div like so. So, it's actually a form item. Then we can float these next to each other. Just copy this and paste this. So, your first name, your last name, and it's circle face. We can just remove the values from these inputs. Your favorite color. You can paste there. Your favorite food. Can paste there. Apple pie, that is some of my favorite food. Also, there's apple pie. This one is pink instead of awesome face. Your favorite color, pink. Your favorite food, apple pie. That all looks really good. Then we have another button. So, we can say, button.cta and the content can be: I want In, and expand that. Fantastic. Now, I'm going to go to Google Chrome and refresh. There we go. That is it. Then we can actually just remove these fors. They're not really necessary in this example. Okay, save. The last thing I want to do is when I press a certain button, like if I go to read more, I want it to jump to different places on the page. Can I do this with a button? Not quite sure, so let's check it out. If we go up to more info here and we give this an id of more info, and we change this to href. Not sure if you can put this on a button. More info, refresher, nah. So, let's change this from a button to an A refresher. Click Read More. Whoah! Where did that take us? I should have put a hashtag there. Refresh, read more. There we go. So, it jumps to the More Info part. That's fantastic. So, I'm just going to search for button. This is okay, the Sign Me Up part, that's great. The story, we can say, story, and then here we can say Id of story. Sign up, that's okay, and show them same, More Info. So, if we refresh here and this is our menu, Sign Up will just take us to the top. It'll actually open up the pop-up. The story will take us to the story, which is this part over here. Then More Info will take us to Join Our Fan Club. Fantastic. Then the final thing that we need to do is we need to commit our code. So, let's go to, get to desktop, failed to fetch, okay. Then we've changed this index.html file. So, we can just say, wrote spelled correctly, wrote html for website. Commit to master. Fantastic. We're going to say Push to origin, to send it to github.com, which is always a great idea. There we go. So, we've set up our html. Now, we just need to style our site, which is going to be fun, it's going to be when things get a little bit tricky. So, done the html, that's super cool.
20. Project: The Hero Banner CSS: Now, we get to do some CSS. So, let's start at the top with our hero banner. First thing I need to do is get this font. So, what font is this? It is Open Sans. So, in Google, we go for Open Sans Google fonts. Let's click on that one, and then it loads for little bit. One family selected. Let's customize it. There's quite a bit here, some regular I want and extra bold and bold. That's great, let's embed it. But I want to import it, so let's go for an import like so. Copy that. I'm going to go to Sublime Text and then open up my style that's CSS, and I'm just going to paste it there. For my body background color of yellow, I can remove that. Let's save that. Go back to Chrome refresher. Then what do we need to do here? Copy that, paste. Fantastic, we are in business. Now, a few things I need to do first. This body and HTML, I'm just going to set a padding of zero margin of zero. Save that, refresh, cool. That works out really nicely, and then let's go back to sketch. I even got this big, blue, background and what I intended here is to make it 100% height of the Browser. So, what I like to do is, inside my HTML, I like to just copy the hero banner and then insert some comments, I like to paste that instead of having to refer to it all the time. So, you can go.hero-banner, and then get a.wrapper which I can refer to a bit later, then I've got an h4 which is fairly default, I then got an h1. Then I've got an a with cta. So, I can go, a.cta, and a.cta.alt. We also may have some buttons that are like this. So, you can say, button.cta, and we can say button.cta.alt. We then got character one, two, and three, which is great. Character1, character2, character3, and that is out hero banner pretty much in a nutshell. We now need to style it. So, hero banner, let's go for the background color, what background color is it? It's this one, so let's copy that. Then we are going to say, height of 100vh, which is the viewport height and let's save this. Let's go and see what this looks like. That looks really good. So, what's next now? Let's go and do our wrapper. So, this had a width of 960 pixels and we can set a margin of zero and auto, and then for our hero banner we can set a padding for the moment of zero on top and bottom, perhaps like 20 pixels on left and right. Fantastic. That's looking good. Now, let's go for our h4. What is this h4? Bold and size of 20 and it's white. So, let's go font weights. It's probably bold already and font size is 20 pixels. Then because it's in the hero banner, I'm going to say,.hero-banner.h4 and I'm going to make it white. Let's check that out. It's not a.h4 it's just an h4. There we go. Then let's say this same thing.hero-banner h4 a, can also have a color of white. That looks really nice and then lets go for our h1 now. Font weights can be super bold, so maybe let's go for 800 and sketch what size was this, 50. So, font size 50 pixels. Let's save that. Let's go have a look. Boom. That looks good. Then we can do the same thing for this, except it's an h1. So, let's just change it to h1, color white, refresh. Yeah, that looks good. Then, what is the margin from this text to this text? It says 14 pixels and it's 20 pixels below. So, what we can do here is we can say, the hero h4, and h4 a, we can set that to margin, zero. Then the h1, we can set its margin top two 14 pixels left and right, zero, then 20 pixels at the bottom. There we go. Then, let's go back to sketch. What is this now? It's 30 pixels, and this is the h3. Is it the h3? It's the h3, we didn't do any h3s here, so let's go for h3. Say font-weight; bold, font-size; 30 pixels. Then the same thing here. We'll just color it white. Now we can set the margin to zero too. Cool, fantastic. So, this is the h1, not the h3. Hey, that's looking pretty good. Now, I'll read more button. It's a CTA. Let's have a look at this guy. So, it's a font-size of 30 pixels. It's bold, so font-size 30 pixels, font-weight is bold. The normal one has a color of white and a background of that lovely blue. So, let's pop it in there. I'm going to say display and I'm going to say, block, or maybe I can say inline-block actually, inline-block. I'm also going to give it a border. This one has a border of 10 pixels. It's got a 15% opacity. So, we are going to say border; 10 pixels solid rgba, 0, 0, 0, and 0.15, which is pretty subtle. Let's just have a look at what this looks like. Cool, that looks great. This one, let's see how much space it has. About 20 pixels at the top and bottom, and 30 pixels on the left and right. So, let's give it some padding, so 20 pixels and 30 pixels. Let's see what that looks like. Hey, that's looking good, and then we can give it some rounded corners. So, border radius, which is not border-right. The border-radius, what is that sketch? Here it's 10 pixels. Let's see what that looks like. Yeah, that's pretty good. We can say text-decoration; none. So, it gets rid of the underline. Yeah, that looks good. What else is there to do on this guy? We need to do the alternative now. So, let's go for the alternative, and now just going to override some of the default styles that we've already written. So, background color, let's go for this yellow. Let's copy that, let's put that in there. Then the border color. What is the border color? I think it's the same, actually this one might be black, and this one might be blue. Yep, that's the case. So, this border, let's change this to over here. Let's set this color to be over here. Let's go if rgb. RGB zero, 127, 255. So, zero and 255, I'll remember. Zero and 255. Okay. So, it has come back here. Refresh. Interesting. Now, the border on the outside and sketch is not really working with the border on the inside in the browser. How are we going to fix that? So, perhaps you've got it wrong. Perhaps it's not a border, perhaps it's outline. So, I'm going to do a quick outline CSS search, since I don't use outline that much. Let's go for outline on Indian and this is what I do when I'm stuck. I just Google stuff. Outline solid, outline dashed. It looks fairly similar to border. Cool, let's use it. So, instead of border, lets go for outline and outline colour. Okay, let save that. Let's go back to Chrome. Yeah. That looks pretty good. It just doesn't have any nice rounded corners. For the radius, now I want to go outline, radius, how do I do this? Okay. Is there any way of getting rounded corners? What about box-shadow? There we go. Let's try that. Box shadow. So, box-shadow x y and blue let's go for two pixels, lets go for rgba, Let's copy this paste this here, just override that for our alternative button, refresh. That looks pretty good and check at that button, pretty good too. So, there we go. That's how you do a bit of googling, a bit stalk overflowing. You don't need to know everything. Not without alternative button we also need to just change the color. Pretty sure it's black. But, lets just make sure, Okay, one, one, one, cool. We can just leave it at that, but let's just put all the ones in there, to be doubly safe. Yeah, it's starting to look really good here. I need some margining between the read more button, just not black and just refresh and this heading. So, in sketch what is it? 47, it's probably about 37 so, we can make it like 35 or something. So, let's go for our hero-banner, h3 was it? We can set the margin bottom to 35 pixels. Let's refresh here. Okay. It looks really nice. Fantastic. Now inside my hero I'm going to put a bit of top padding. So, let's go to hero-banner. I'm going to go for, let say 50 pixels top and bottom. I'm also going to change this to box- sizing, border-box. Thanks very much, sublime or that, I just want one for now, box- sizing, border-box, refresh. Yeah. That's looks pretty good. Yeah that works. Fantastic, let's go back. Read more. There we go. Okay, so, it's coming along nicely. Now, we need to add some characters. Let's do this. So, in sketch character this guy. Well, who was he? Well, let's go check out images and his character one. So, character one is the pink guy and he has a width of 363 and 344 is his height. So, character one, width and his height, I forgot it, 344, 344 pixels. Character two is the hat guy. So, lets go to the hat guy and 309 by 371. It was 371 pixels, right? I think so. Then character three is 297 by 286, how about that? Fantastic. Then we can just say "position absolute", and we can say, something like top and we give it a value 10 pixels and right, a value of 10 pixels and can just copy and paste this for now. Then from the right hand side, this one has a rotate. So, let's just take the rotate off for now and you'll see that it's 89 pixels from the right hand side. So, let's go for 89 character 309 and this guy is 277. We can probably change these values. Then from the top, this guy is 117, this guy is 213 and then character three, this guy from the bottom is 74. Let's see what this looks like, so refresh. There is nothing here. What is going on? So, I don't know what's going on so, I'm going to inspect. Let's see if there's any characters sitting around here. They're here, but they don't have any background images. Pretty rookie error. So, bg lets go for url and in here, we can go to image and character one. We can set the repeat to, no-repeat and say it's going to start at zero pixels x and zero pixel y. We can say background size, we do that again, I just want background size, because they are 100 percent or we could say something like cover or contain. But, I'm just going to go for 100 percent. We can we copy that, go to character two, change that to character two, and then change that to character three. Save that, go back to chrome and refresh, and there are our characters. You'll see that when I inspect and I move my browser around. Because this guy is from the bottom, he's going to change a little bit, which is perfectly cool. What I don't want is, I don't want this guy to be cruising off the edge of the page. So, to get back to sublime text and let's go to our hero-banner and we can say position relative, that all of those absolute elements choose a hero-banner as their position parents. Then we can say "overflow: hidden". Refresh here. It looks pretty good. Or we can do here, just to make sure that the read more button doesn't get chopped off, is we can put a min-height. My hero- banner. So, let's refresh here. There we go. That looks pretty cool. If we have to resize this, you'll see that all of these guys move along with us. We can use percentages so, perhaps we can use a percentage value for this character one. So, from the right hand side maybe we go 10 percent. Let's save and refresh. Now you see that he moves at a slightly different speed if we start resizing our browser. That's totally cool. So, these are our characters, and now we need to just rotate this guy. So, let's go have a look at him. He had a 15 degree rotation I think. So, let's go and put that on. So, it's transform and it's rotates. So, we're going to go rotate 15 degrees. Refresh. There we go. I want to change this top value a little bit, maybe let's change this top value to 10 percent too. Refresh. There we go. Not quite like the design, but hey, it looks really good. So, this is our hero-banner which is what this video was about. The next video we'll get on to doing the more information section, to join our fan club section, It's been really good. We've seen how a lot of this has worked. In the next video will be getting onto the nav bar and the read more section. It's looking really good so far. Then the final thing that we need to do is, we need to commit to it. So, let's go to get a desktop, style the CSS changed and we go hero banner styling and commit to master, and then push to origin. Hang on, and there we go. It is online. We can happily let's our computer crash. So, onto now styling and read more styling in the next video.
21. Project: Sticky Nav & The Read More Section: So, next up is the navbar and the join our fan club or more info section here. So, let's do the nav bar first. The first thing that I want to do, is I want to check out my logo. I know that it's 600 by 80, yes. That probably means it's 300 by 40. It's about 300 by 40. Okay. Let's go to Sublime Text and myindex.html. I've got my nav bar over here, we can copy that and just put it in some comments over here. We can take out this hero-banner HTML, and let's put nav and how big is our nav? Let's go back to sketch. It's 100 high. So, height of 100 pixels, fantastic, and its got a background color of white, and its also got a drop shadow or a box shadow and remember its x, so nothing and y. What is it? So, 5y. So, five pixels and then eight pixel blur, and then what is the color? It's black and it's got a 20 percent opacity. So, we can go to our RGBA, zero, zero, zero, zero and a 0.2 opacity. Fantastic. Let's see what this looks like. Just go to Google Chrome. Refresh. Yeah, that looked pretty good. Looks like there's a slight shadow above it. That's okay for now, and then we get to do a logo. So, we've got nav.logo, you can put an a there but if we ever changed it from an a, just a class of logo would be great, and we can say, display and I'm going to say display block, and I'm going to set the width to, I can't remember now. None. Okay. This was 300. So, 300 and a height of 40 pixels. Fantastic. Let's say position absolute. There we go, and then its got a top value of, and what we could do, is we could just set the top value to 30, or we could just make it in the middle of a whole time. So, because we know the heights is 40, we can actually say 50%, and then we say margin top. We can give this a negative 20 pixel value. Okay, that is perfect. Then we can set a left of say 30 pixels too. We could also set that as zero pixels and then set the margin left of 30 pixels. Whatever you want to do really, so to save that and then let's add our image. So, bg is to the url, it's inside of image, and its a logo. Poom, we are going to do the same thing here. So, no repeat zero, zero. Then we say background size is 100 percent. It's really good to put your browser prefixes like Webkit or Mozilla, whatever if you're going to be targeting older browsers. But for this, not really needed anymore. So, we've got a background size that looks fantastic. Let's see what this looks like. There's nothing. It's gone. Why is this? It's because our nav, check where it is. It's because our nav doesn't have a position or a relative or absolute. So, we're actually going to make it sticky. So, lets make it sticky, and then let's just see what happens here. The Gang. Yeah, that looks pretty good. Let's just inspect this. Doesn't look like quite in the middle, does it? Looks like it's a bit of padding or something going on here, but it looks about right for now. Okay. The next thing I want to do, is I want to go to my navs unordered list, and here, we can just set the padding to 0, the margin to zero. We can also go to the nav uli, and we can set here the margin to zero, the padding to zero. Let's see what this does. Okay. Much better, and then we can say, okay, the li in this display u as a block, and lets float u right. Yeah. That's great. Fantastic. So, we have got the gang on top of the gang. What do we do about that? Well, we can just set an overflow of hidden, and them can do a text indent of minus 999 pixels, or something like that, and it's gone. Then, we need to sort these guys out, what font size is this? Thirty pixels, and it's uppercase. Okay. Let's go for the nav ul. I've got a, so the a inside of the list item, inside of the unordered list, inside of the nav elements, and we can say, display block. Yeah, that should be good. So, we can say height is going for 100 percent, and we say box sizing is border box, then we can say font size, 30 pixels, and text- transform uppercase, font weight bold, fantastic. Let's refresh. Okay. Then we can also say, color #111111. Okay, and text decoration and save. Refresh. We get these guys in the middle, they've got a font size of 30 pixels, the nav is 100 pixels in height. That means that 70 divided by two, 35 pixels top and bottom padding or margining, I'm here for padding. So, let's go for padding, and 35 pixels. Cool, and then perhaps just 10 pixels on the left and right. Save.So we refresh here. Doesn't look quite right. Someone inspect this guy, not speech, inspect. He's not doing so well there. So, I'm saying height is 100 percent with a padding of 35 and 10. So, what happens if we start to decrease this. Once more. So, 30 plus 30 plus 30. Don't worry what that is. But, hey you've got that 30 pixels looks right now. Fantastic, refresh. Maybe it's because of little line height. So, to change this in line height, line height to 30 pixels, and then we change this. Then we can probably change this back to 35 pixels. Yeah. So, let's do that. Just got a line heights. Thirty pixels and change this to 35 pixels. Refresh, done. That looks really good and then, on ul we can put some margining on the right hand side maybe. So, let's go zero, let's go 20 pixels, zero zero, refresh. More info. The story. Sign up. Man, this isn't good. Now, let's get my nav bar to do some sticking, So, nav, nav, here we go. Let's set the top to zero. Save that. Let's refresh and it sticks. Yeah, look at that. The gang has a nav bar that's sticky. That's really cool. I like it. So, next up is our more info section. That is a bit of a problem, just going to hide it. So, what do we do here? Well, let's go and copy our more info section. Let's go to our style here. We can just replace this and let's go for.moreinfo. I don't think I put a wrapper in here actually. I'll show you why the wrapper is so cool. So, we've got a more info, we've got an h2. Don't know if we have to do anything for the h2. We've got a P tag. I can actually just style the P tag. Then we've got a button. Which is a CTA, so it doesn't look like we have to do that much. Okay, let's try this. So, when you style our Ps and our Ps are 30. Are they 30? Yeah. So P, let's go for a font weight of bold, let's go for a fun size of 30 pixels and then let's go down here and let's see what is the the line height, 41? I want to see, I'm imagining between each P tag is, so for now I'm just going to set this as 30 pixels zero. We can change it a bit later if we need to. Then I'll move it a little bit higher to where all the other default typography is. Okay, so we can save that. Let's check it out. Let's see what it looks like. Yeah, that looks pretty good. Join our fan club. That looks really small. This looks really big, I'm not sure it's that big. So, our P is fun size 30 pixels and then we set this as an h2. We don't actually have any h2 styling yet so, let's do some h2 styling and the h2 styling is extra bold 50 so, it's pretty much the same as our h1. It's just not an h1. Okay, let's go back to Chrome, refresh. Yeah, that looks pretty good. Then we can write some overwrites now. So, let's go to the bottom again. More info.more-info h2. Or maybe we can even just go and say, more info text-align: center. Let's save that, refresh. Almost did the trick, it's just all the way to the edge of the screen, almost. So, I want to wrap it with a wrapper that we already have up here. So, you've got this class of wrapper that wraps the content and the hero banner. So, I'm going to do the same thing inside of our more info div.wrapper, cool, cool. Then just indent our code. Let's save that. Just like that, everything tidies up, really nice. So, I can see, more info, wow, it hides the more info. How do we get around this? It's a really good question, actually. I'll show you how in a second. But, for now this is looking, yeah, it's looking really, really good. Just to explain that wrapper a little bit more, I'm going to search for wrapper. If we have to put a background color of yellow on this you can see that, it's in the middle. Same as this one. It's also in the middle. Cool. So, we just take that off. Now, the problem of clicking more info and jumping all the way down here is problematic. How are we going to fix this? Well, one thing we could try is actually changing the more info ID from join our fan club to something else. So, let's give that a go. So, we've got this idea of more info, perhaps what we can do is we could put it on the nav. Let's try that. So, let's refresh here, more info. There we go. That was pretty good. Now, if I go to the story, or if I go to more info that doesn't quite work. So, instead of changing it there, perhaps we can just put a sneaky little something over here. Perhaps like a br with an id of more info, let's see if this works. Okay. What happens if it's just a div, like that. Let's refresh, more info. There we go, that works. The story, more info sign up. Cool, will read more. There we go, sorted. So, we've done our nav bar, we've done our read more section and we've done our hero bit. What's left to do for this video is just to commit. So, let's go to get GitHub desktop and we've changed index.html and style.css. So, we can say we've done "Nav styling and read more." Then in the description we can also say, "Also did some HTML changes. " Boom. Commit to master, Push to origin, sends it to the internet, fantastic. But, we just didn't do one thing. What we have forgotten is, when you go to sketch this a party has this great pink border thing around it. How do we do that? Okay, so just go to sublime text, remember in style we've got this little bit of HTML here, I've got the span class highlight, which is great. So, let's go for highlight, we'll say, background color, we'll go to sketch to see what color this is. Okay, it's that one. Let's put it in there, and then we'll say, color and it's some kind of red color. Okay. Fantastic. Then we can say a padding of, maybe it's like 10 pixels. Let's see how that goes. Then a display of inline-block. Let's refresh here. That looks pretty good. Pretty close, actually. Let's undo, maybe not so high, so we can go something like five pixels, 10 pixels. Okay. Yeah, that looks pretty good. Then we can't even do a line height of, what was the line height here? 50. So, I'm going to do 50 pixels. Yeah, that looks pretty good. I think. There is still a bit of a weird spacing here. So, maybe we change this to inline. Let's see what happens. Yeah, inline works much better than inline block. Fantastic. Then let's just double check our margins 18 and 40. That doesn't quite look right. So let's do more info h2 margin bottom, let's go for 18 pixels. Then we can also do, no, maybe we just do the P, and say, margin top, and then margin bottom can be 40 pixels or 35 pixels. Let's check that out. Refresh. Cool, that looks really good. Then join our fan club to the top there, 50 pixels? Not sure if that's the case, so let's just double check this. Okay. More info, not so much I don't think. Nav is here, and then it's down to more info. So, what we can do here is, this guy, we can probably say, margin and we can say, 50 pixels, zero. Okay, that looks good. So, let's go for more info p, change that to more info h2 margin top 50 pixels and then the rest can be zero. Okay. Let's have a look. Okay. So, the highlight just needs to be quite bold and we can do that here and we can say, font weights 800. Refresh, done. Okay, now we can commit again. So, let's just go and say, "Tightened up the read more section." Commit and then push it to origin again. Done. For real, this time.
22. Project: The Story Section: So next, on our list of things to do, is the story section. So let's get into it. What I'm going to do first is this list section. It's 470 pixels wide which is great, and each of these are 70 pixels high and they have 20 pixels between each one. The font, bold and 40 pixels, 20 pixels to the left and to the right, I would imagine. Okay, so just double-checking that 70 pixels high and then I have copied the 470 pixels wide. Okay. So, I'm just going to paste that there and I'm going to go and get the separator in all of this stuff, I'm going to paste it over here. Fantastic. We can do the separator first, I guess. We will leave it there for now. Then we'll say our nb-list, okay, that has a width of 470 pixels. Okay, then the nb-list li. What is this? So, it has a height of 70 pixels. Cool. I think it has a border radius of 10 or 4. Border radius of 10 pixels. Let's see. Yeah, 10 pixels and remember, it has a font size of 40. So, font size of 40 pixels. Most of the time, it's white in color. So, color white. And then what we can do here to is set our font weights of bold. Okay. We can also set its display type, so display block. Fantastic. And then for each color, there will be different background colors. So I think there's red so, bgc. I'm looking for my red color and then there's blue, grey, yellow, pink and salmon. Okay, so let's go for blue, let's go for grey, let's go for yellow and pink and salmon. Okay, so red, let's get this one, copy the color. Fantastic, let's go blue, copy the color. Okay, the grey one, it's kind of weird. So, it has an opacity of 10%. So, what we can do here is go rgba. I'm trying to use 0,0,0 and set it to 0.1. That should be Okay. Then the yellow, what color is this? Just paste that, pink. Alrighty. And then I use salmon. Okay. Now, any of these got black, just yellow. Okay. So it has a background color of yellow, then it also has a text color of ones. Okay. Fantastic. Let's have a quick look at what this looks like, refresh. Hey, that looks pretty good, I must say. We've also got a padding on here of 20 pixels. So, let's put a padding in here of 20 pixels and let's set the box sizing to border box. Thank you very much. Okay. And refresh, nothing much changed because we don't have a background color on that. Let's copy this background color, bgc. Fantastic. Refresh, that looks good. And then what we can do is that we can set our margin bottom here, margin bottom to 20 pixels. Fantastic and then perhaps on the list, the padding can be 20 pixels all around except for the bottom and we'll rely on the last tile to give that illusion of the added padding at the bottom. Yep, that looks good. And then what we can do here is we can just put a little bit of padding, so padding of 20 pixels on the left. Perhaps we can do like five pixels on the top and bottom. Let's see what that looks like. It has changed to box-sizing, box-sizing, border-box. Okay. Let's inspect this and see what's going on. Okay. So, we're going to change this. So, this was actually meant to be five pixels and perhaps this is 20 pixels. Yeah, that looks good. Six pixels and 20 pixels. Fantastic, yeah. Inside the html now, we can also do some more wrapping. So, let's put this in a dot wrapper and this will center-line everything. Okay. Boom!. And then what we want to do with our nb-list is we want to float it. So, float left, save that, refresh. It looks pretty good, right?. And then we want to give it a margin, let's say, zero on top, 20 pixels in the rights and 20 pixels below, nothing on left, refresh. That looks great. Now, what about this left and below? What is this left and below? It's an h3. What is our default styling for an h3? Over at the top, 30 pixels. Well, is it 30 pixels?, 40 pixels. What about the other h3? I think this one wasn't h3, was it?, Okay. So, what we can do here is we can just overwrite some styles, we're going to set the font size to 40 pixels just for our nb-list. Well, just for our story anyway. So, inside dot story, we put an h3 and we want to say the font size is 30 pixels, no, the font size is 40 pixels. Yeah, there we go. That looks pretty good. Let's close this. That looks fantastic. Fantastic. Now, all we can do is we can do the separators. So, let's see what these are, 10 height, 470 width. Looks like about 60 or 70 margin-top, margin-bottom. So, 470 width and a height of 10 pixels, background color, let's go for ones. Okay, and then put a margin of, what was it, 60 pixels or 70 pixels and then autos that we can send to Lynette. Okay. Look at that. And the other one at the bottom should have worked too. Fantastic. Okay. Now, we've got this image, so, let's give it a clause, say, gang image, img. That's great. Save that. Okay. Gang image, we can say display as block and we're going to set the margin to zero and auto. Save that, refresh, that's now in the middle. Okay, this is going well. And then perhaps we're going to say, footer. What are we going to do with the footer? We say, text align center. Okay, perhaps in the footer too we can add a wrapper. So, dot wrapper and this just means that it's going to be center aligned. What's happening there? Let's check that out. So, the wrapper is not center aligned. That's okay. So, if we just save this, text-align center. Let's see if that changes anything. Yes, it does. Inside our footer, what is the font size here? The font size is 20 pixels, all bold, but looks like there is an opacity of 40 percent. So, we're going to say color, rgba. Let's go for black, and let's got for 0.4, for 40 percent. Then font size, let's go for 20 pixels, and then, quite a bit of space. So, maybe 80 pixels to the top, 45 to the bottom. So, we're going to say margin, 85 pixels, 0, and 45 pixels to the bottom. Save that. Let's refresh. Yeah, it's not bold though, so font-weight let's go for a bold. Yeah, that looks great. Then, perhaps we can also say, footer a, and let's make it the same color. Pretty sweet. That's almost our page done. We now need to work with this laughter one. So, how are we going to do this? Well, I think that it could work as an absolute position one. It could also work as a transform. Although transform and relative, they don't come out of the document flow. So, I'm going to change my nb-list to position relative. Then what we can do is, what is this one called? Dragging. So, we've got a special.nb-list li.dragging, and we can set this to position absolute, and we say top, we can say 30 pixels for now. Say, let's go left of 30 pixels too. Let's see what happens here. There we go, and perhaps we can just, for now, I'll just say zero, zero, and give it a width of a 100 percent. Almost. So, let's say 20 pixels, 20 pixels, and then right 20 pixels too. Yeah, let's see what that does. Almost right. Then our width, we can just take that out I reckon. Fantastic. Now, with our transform, we can rotate it a bit. So, rotate, how much is this rotated? That's a good question. Let's go check it out, and it's rotated six degrees. So, six degrees, and it's got a drop shadow, so box shadow, and what do we have here? Well, we've got 2 and 14, and it's at 50 percent opacity. So, 0, 2, 14 pixels, and RGBA, 0, 0, 0, 0.3. Let's see what that looks like. Looks pretty good. So, now from the top, we can say, I don't know, 70 pixels? Yeah, that looks pretty good. Now, we can just use the browser to do the rest here. So, from the left one, two, three, four, five, from the right, minus one, two, three, four, five. Yeah, that looks good. So, left of 70, right of minus 30. So, we've got that going. Now, we just need to get that hand in there. How are we going to do this? Well, we could put an extra element in there or we could try using the off to pseudo-class. Let's try that. So, let's put this like so, and let's go after. We'll set the content to nothing, and then we'll say, display; block, and then we'll say position; absolute, and then perhaps we give it a width, and we give it a height, and we go to sketch to find out what those are; 54 by 50. Let's try that. Fifty-four pixels, 60 pixels. Fantastic, and then background, let's go for url, inside of image and hand. Where's hand? There we go, then we can go for 'no-repeat 0 0' and then on background size, again, it's going to be 100 percent. Let's save that's, and let's give it a top value of zero, just for now. Well, maybe we can just set the bottom value. Okay, and then we can say left, let's go for 60 percent, and pretty close, pretty close. So, let's have a look at this guy after pseudo-class. Here it is. Let's change the bottom to minus 30 pixels. Yeah, that looks pretty good. Yeah. Bottom of minus 30 pixels. Okey-dokey. So, we have things we find important on the left and below our story. Does that look right? It's extra Bold. So, let's go to nb-list, story. Here we go. So, font-weight 800. Save that. So, laughter is obviously more important than anything else for these guys especially. We've got a bit of floating and text wrapping going on, but whoa, what is happening here? Our nav is meant to be on top. So, let's go back to our nav. Let's give it a z-index of 1. Let's refresh her, and that sorted it out. Fantastic. The other thing I noticed was when I clicked the sign up button, it's got this weird blue border on it. That's weird, I don't want that. I think it's something to do with accessibility, but right now, I don't like it, and also there's no cursor on this button. So, let's change that. So, on the cta's, we can just go, border; none, and we'll say cursor, and we change this to pointer. So refresh this. There is now, still a border. Maybe it's not a border, maybe it's an outline. How about an outline; none? Refresh. Yeah. There we go, but I also want to say a border of none. Looks like there's a little border there too. Refresh. There we go. Fantastic. I can also put a hover class on it or an active class. So, let's do that. Active. We'll just change opacity, it's really easy, to something like 0.7. Yeah, that looks good. Fantastic. This is our site that's looking really good at the moment. We've literally just got the popup to do. So, what I'm going to do now is, I'm just going to hide the popup for now. So, what is our popup called? Here it is, and we can just say something like, that popup, and say display; none. Fantastic. Save this. Refresh. Here we go. This is our site that's visible. In the next video, I'll go and click sign up, and it'll show me my popup, or I click sign up here, and it'll show me my popup. Before we do that, let's commit our code. So, what we've done here, we've done the story section footer styling. Also added some HTML, and changed a few other bits of CSS. So, we commit to master, and we push to origin, send it up to github.com. Fantastic. There we go. I'll see you in the next video.
23. Project: The Popup: So, the only thing left for us to do is our popup. Pretty exciting, right? So, let's get into it. Inside of Sublime Text, the first thing that I want to do is just comment this out, because I don't want to display none right now, but I do want to display none in a little while. So, what is this and how are we going to do this? So, the first thing that I'd like to do is put a blanket in and this blanket, let's see, it's got a 70 percent opacity and it's black. So, we're going to go.popup.blanket. Spelling it right always helps and we'll set a background color of rgba (0,0,0,.7). That's great. We'll set it's positions to absolute and we'll say top zero, bottom zero, right zero, and left zero. That should do the trick. Popup itself can be fixed, so we'll go posf and yeah, pretty much the same thing here. Fantastic. We've got the content, so if we just copy this, and it's pasted over here. There we've got the contents, so.popup.content. Okay, what are we going to do with this guy? Well, let's check him out. So, he is 961 pixels wide. It's probably meant to be 960. So, let's go for width of 960 pixels. I'm going to set a box-sizing of border-box, fantastic. Then, it looks like it's got about 40 pixels and 30 pixels at the top to do with padding, so let's go for padding of 30 pixels and 40 pixels. We'll see how that works out. We've then got this guy which is also an H3, I think, an H2. H2, same as Join Our Fanclub. So, we've got this. We want to set our background color to white. I'm going to say text align center. Let's see what this looks like. So refresh. Okay, it's looking fairly good. The z-index is below the navbar. I want it to be above. So, let's change the popup's z-index to two. Pretty easy, refresh, there we go. Still kind of weird, right? So, the content, it doesn't have a position of absolute. So, let's change that position of absolute. We know its width is 960. What is half of 960? I have no idea, 480. So, let's go for a module left of 480 pixels or negative 480 pixels. We're then going to set this left value to 50 percent. Let's save that and check it out. Yeah, fantastic. Then how high should it be? Well, I guess we can really work it out here. We can see that this whole thing is about 540 pixels. So, let's change it to height of 540 pixels. Again, we'll set it to top value to 50 percent, and 540 divide by two is 270. So, we go margin top negative 270 pixels. Let's check that out, fantastic. Looks fairly good for now. Let's adjust our close button. That's exciting. Popup.close. Does it have a close clause in it? I think it does. Yeah, okay. So, let's check out and sketch how big this is, 80 by 80. So, let's set a width of 80 pixels, a height of 80 pixels. I want to have a background color of, there we go. Then we want a background or we want this to be a URL and image and close. We can actually put this color over here. We can say, no repeats. I can say center, fantastic. Then we can probably set its background size to something like 100 percent, but it could be 80 percent or 70 percent, not quite sure right now. We'll check it out and then top, we'll set at minus 40 pixels and right, we'll set at minus 40 pixels. Let's save that. There it is, says Close. We want a border radius. Oh, man. I never get this one right. Border radius of, let's just say 50 percent. Yeah, that looks pretty good. Let's say, border of none and outline none. Yeah, that's looks great. Perhaps our background size can be 50 percent. Let's see what happens then. Yeah, 50 percent looks great. We can set a capacity overflow of hidden. Then, we're going to say text indent minus 999 pixels, and that will indent our close text to nowhere. There we go. We haven't set a position of absolutes, and that's why the top value is not working. So, let's go position absolute, refresh, amazing. To now, our cursor, let's go for cursor pointer, and there we go. Now, what we need to do is we need to work on these elements here. So, we've just got these items, so we can a have popup the item and inside the item, perhaps we can float them. So, we can just float them left. Yeah, let's try that, so float left. Okay, what is the width going to be? Good question. Width is going to be, let's say 415 pixels. Yeah, let's try that, then on margin left, well let's see, what is the margin left, 40 pixels. Okay, let's see how this goes. What happens? Wow, what is going on here? Not really what I want. So, popup item perhaps, well, that is actually a div, the label, and input maybe not. So, let's change this Item.label and input with a type of text. I'm going to say display block on both of them. Let's see if this changes anything at all. No, it doesn't change anything at all. So, let's see what's happening here. Okay so they're not floating to well, the button is also not really enjoying this, it looks like he's in in line elements. So we have to say display block. Hey he's still chilling. I guess all of these will be floating on the left. Problematic. So what can we do here? Let's see if changing, what, there we go, that helps a lot. So, with the 400 pixels, works really well, for now. Perhaps we can set the background color to yellow to figure out what's going on. Okay, so looks like there's just a lot of space on the left hand side here. So what we can do is insert our index file, we can put these two rows, right here. And then let's just indent it here. Okay, then we can actually float the items in the rows and then the rows will just start one after another. Okay, so what we've got here, we've got a pop up. pop up into a row and this is going to be a display block and it's height, it's going to be 111. So, height of maybe let's just go a 110 pixels. Okay, or maybe we don't even need a height. Maybe it can just be like a clear fix, so maybe what we can do here is just go, pop up to a row and after we can say content is nothing. We can then say, display table and then we can say clear path. There we go. Okay, so now we've got these items floating in the rows. We can change this back to 415 pixels and then we can say that any item that is also a first child does have no such thing as a module left. Here we go, and let's see this. There we go, works a bit better. Then I've got my label displaying as a block, but I've got a little class name there instead of an actual tag name. So let's save that, refresh. Much better. And then inside of each item I can say, takes the line left, or it just takes the line last, takes the line left. There we go. Refresh. Amazing. Things are looking much better. And what is the font size here? 20 pixels and 30 pixels. So, let's go for font size, 20 pixels and was it bold? Yeah bold and bold. Sweet. Okay, so the font size is 20 pixels and font weight is bold. And the same for the text, 30 pixels and font weight bold. Yeah, that looks really good. It was a bit of a margin there so maybe something like 10 pixels, margin bottom 10 pixels. Yeah, super great. We can probably take out this yellow now, so yeah. Thanks. Looks quite a bit better now. Okay, now if we have to go back to sketch, these things are quite big borders. So 111 is the color and thickness of 4. So, let's go for type of text. Let's go for a border, and it's a 4 pixel solid and it's 111. Okay, that looks pretty good but now what is the height? Height is 70 pixels. So, let's go for a height of 70 pixels, let's go for a box sizing up for a box and then refresh. It looks pretty good. Something doesn't look quite right. Perhaps it's the rows, the content, there is a padding of 30 at the top and 40 on the left. These ones look a little bit short. So, perhaps what we can do is we can set these inputs your width should be 100 percent, and then you're padding or your margining padding 15 at the top and 20 on the left and right. So, let's go for padding. So, 15 and 20 pixels and let's see what this looks like. Hey, that looks a lot better. Fantastic. And I can't really scroll anywhere now. It's a bit of a budget thing, but if I close this. There we go. I can see what's happening. So, maybe I want to decrease the height a little bit on this pop up. So, let's go to the pop up content here, change this to 500. Then I'm going to change my margin top to 250, so just refresh this. Yeah, that looks pretty good. And then my pop up, I'm going to change my H to say the margin is 0 0 and maybe if we can go 20 pixels at the bottom, let's see what this looks like. Maybe we can do 10 pixels at the top. Yeah, that looks pretty good. And then I also want my pop up. CTA. I want to give that some margin top, let's go for 50 pixels. Maybe even less, 40 pixels. Super! Fill in your details, I want in Boom! Okay. That changes a bunch of stuff. So, now what we can do is we can actually start doing a little bit of JavaScript. Now, remember this is not a JavaScript class, so I'm going to do some quick and dirty JavaScript but bear with me. All I need to do here is in our index, everything that opens or closes the pop up needs to have some kind of function on it. Okay, so let's go and search for everything that has a hash. There we go, logo, that's okay, sign up.There we go. So here what we can do is we can perhaps say something like JavaScript. Logo. Yeah, that's okay. Sign up. Here we go. So, here what we can do is, we can perhaps say something like JavaScript, and we can just put in nothing. I think that works. Hey, maybe it's just JavaScript like that. Like that? I don't know. Then we can say, onclick, and here we say, showPopup. There we go. Let's just copy all of this again. Let's search for sign up. Okay. There we go. Onclick, showPopup. Okay. I think that needs some inverted commas. Okay. So, there is just two Sign up buttons. Okay. Now what we're going to do is to create a new JavaScript file. So, New File, let's save it as script.js. Okay. Inside our index.html, what we're going to do is we're going to add the script at the bottom. So, script and source is script.js, and say type. I think it's a text JavaScript. There we go. Script, we're just going to say console.log, hey there. Now, we're just going to do this so that we know that the JavaScript is working. Let's refresh. I'm going to just share my console. Hey there! So, it's working. Fantastic. Now what we can do is go back to style. We are going to go to popup, and we're going to comment this back in. We're then going to add a class to our popup to say popup.show, and we will say, display block. Okay. So, that's pretty cool. So, when we refresh here, no popup. So, now what we can do is, inside of our index.html, our popup, just give it an ID of popup, and this is how we're going to reference it in JavaScript with an ID. So, inside our scripts, we can actually write some code, but I'm going to do it in the browser first. So, I'm going to say, document.getElementByID, and then I'm going to say, get it by popup. Press Enter. There's nothing there. So, let's just refresh. I'm going to press up arrow, do it again, and we have our popup. So, I'm going to write some code. I'm going to say var. Maybe I can make this a bit bigger for you. Var popup equals, and if I could just copy this, okay. So, that's what the popup equals. I'm then going to say popup.ClassList.add, and then I'm going to say show. Just like that, hey, our popups arrived. Then, what I can say again is, I can say remove show, and that will remove my popup. Pretty easy, right? So, let's copy this. Let's go to our script. Now we can write a script that says something like show popup. There we go. So, we can say function showPopup, and we can write this. Before that, we can say var popup equals, and let's get back to Chrome, and let's press the up arrow here just to see what we write the first time. There we go. Let's copy that and paste it. So, we're going to remove that. In this case, we're going to add it. Then we can copy this, and you can say hidePopup. Okay. Lets save this and then onclick, we can actually copy all of that. Then search for our Close button and do the exact same thing here. Onclick, showPopup. Okay. So, let's close this. Let's refresh. Read More. Sign Me Up! There we go. Our popup is working. Let's close this. That doesn't work. Why doesn't that work? Good question. So, let's go back to our script. It still says add. So, let's say remove. What this is doing is basically, it's adding and removing just this like piece of code and CSS. It's taking away the show. So, therefore, it default to display none. When it adds a class of show, it then goes and says, "Hey, display this element to the display of block." Okay. Refresh. Sign Me Up! Close. Still nothing. So, is there any errors? What's going on here? Well, let's just inspect this element. Let's see. That is actually the right thing. It still says showPopup. So, let's go back to here, and let's say hidePopup. HidePopup. ShowPopup. Okay. Refresh. Close. Sign Me Up! I Want In! Fantastic. Close. Sign Me Up! Close. Huh! Sign up. Close. Really cool, right? Now we have a fixed element. We have a sticky element. We have all kinds of web loud stuff going on in this web page. We've pretty much completed our example. Let's just do one final commit. We can say, "Owned it! Done! Mostly done." So, there's still a lot of things that go into making a website amazing. There are probably a few thing that you're like, "Why didn't you do that?" Well, we could be here for days making the perfect website, but I hope you've learned a lot in the process. One thing I do want to do, is just take out this console log. Okay. Commit to monster. Push to GitHub. Boom! Done.
24. Share It With Others: So, now that you've created a web page or website using what we've learned in the class, why not share it? Either upload it to your own website, use Surge or Github pages. Using version control with Github or Bitbucket is also a great idea. Not only do you get to keep versions of your project at different stages, but it's also a great backup tool. So, now that you've created your website, it's a masterpiece, you want to share it. If you don't want to pay for your own website and hosting, if you just want to get it out into the wild, into the world, and you've been using Github and perhaps Github desktop, there is good news, you can just publish it for free online with Github pages. So, what you do is tap on this master branch and you say gh-pages, create a new branch, create that branch with gh-pages and then you can switch between your master branch and your gh-pages branch and then you go, boom, publish branch, and it goes pushing to Origin, fantastic, and you go to Google Chrome and in a new tab, you can use your username, your Github username, so mrra.github.io/the-gang and there it is. It's online for all the world to see. Pretty killer, pretty sweet and, haha, our pop-up works. Yay, yay for Github pages. One of the easiest ways to get your sites anything online, especially, if you haven't used Github, is to use something called Surge. I'm not going to tell you everything about it. It's pretty amazing. So, what I'd like to do is, I'd like to create a new file. I'm going to save it as something like http and then I'm going to say the-gang.surge.sh. I'm going to save this as CNAME and you'll see why in just a second. I'm going to go back to finder, drag my www folder into terminal and then I'm just going to go Search and just like that, I press, Okay. If you haven't signed in already, it'll take you through a bunch of steps, check out search.sh and then it goes, baam. Project is published and running at the-gang.surge.sh and we can go over here and boom, it's online. The-gang.surge.sh, super, super simple. So, yeah. Check out surge.sh.
25. The End: Okay. I've had fun teaching this HTML and CSS layout class. I hope you've learned a lot and had some fun. You should now be better able to take over the world and build awesome websites. You can see more of my classes and join the fan club at taptapkaboom.com. So, bye for now, and I'll see you soon with more classes. If you liked the class, give it a thumbs up and write a nice review. It really means a lot to me.
Rich From TapTapKaboom, Multi-hyphenate Artist
