 Welcome to my course. Before we dive into our first lecture, I want to talk about the editor I'm going to use, Microsoft Visual Studio Code. The editor is available for Windows and Mac OS, and I'm going to use it the whole course. The following me during the lectures, it is important to memorize some shortcuts. Let me now open for the first time Visual Studio Code, and show you the interface we'll use, and what commands you should know in order to follow the lectures. So this is the surface of Visual Studio Code. When you open the first time, you will have this welcome page. You can just close this, we don't need this one. Now, you see already you have here, show all commands, and this is actually an important thing. If you hit now this commands, like Shift, Command, and P. In Windows, it should be Shift, SDRG, and P. And now, you see here all the available commands. Let's see if you open here, like help, markdown, your window, for example, and preferences. This here is something, shortcuts for add on I installed. You won't have that one here, of course. Then you have some other stuff, you select new, next, and click open, and so on. Clear the terminal commands, of course, too, because it has actually an integrated terminal. I'm going to show you how to open that then. And also some view, some other stuff. Okay, we won't need anything, like everything here, we just need some specific commands, or you don't even need them, some of them really, some of them you can just use by clicking or whatever. So, first of all, let's open a new folder. This is the first thing we do. We open a folder, we give it a project folder, something like that. I have now here a project folder already prepared, so I'm going to open this. And there are already a lot of folders, because actually I recorded this video after I recorded all the other videos, but don't worry, I mean, this is just folders here under some folders where our projects are later, will be. So, if you want to create a new folder, for example, in each lesson, I will work in a specific folder. In the next lesson, or the first lesson will be, for example, CC sees as box model, and what is that box model? So, this folder will be that one, and here you have some subfolders. What is the box model will be the index here? It will be within that, and the second one, the content of the box will be in this folder, and so on. So, you just create a new folder, which you do by clicking on this icon here. Now it creates, of course, a folder within the box model folder, just break it up. If you want to create a folder in the root dictionary, you just click here, and then you create a folder, and then you give the folder name, okay, hit enter, and then the folder is created. If you want to delete this, right-click, and click on delete, click to trash. So, this is actually how it works. This is how you create a new file, so if you want to create a file in a new folder, you just give it a name, and don't forget to add the ending. If you, for example, create an index.html, then also add the ending.html, otherwise it won't work. All right, so, I'm going to delete this here. All right, okay. This is actually how it works. Now I'm going to show you some specific commands I'm going to use on an example file, so I just create here a new file quickly. Example, let's call it HTML because with the ending, actually, it recognizes some stuff because Visual Studio Code has already a plug in installed. It's called Emmet, and you can do something really cool here. If we create some HTML structures and elements, we don't have to type everything out. What we actually do is writing the keyword like the HTML tag. You know, the HTML document actually starts with that. I mean, actually it starts with the type information, but in this, during this course, I will just start everything with the HTML tag. We don't use anything else, it's just examples. So, I have now HTML, and then I hit Enter. And this is all you have to do. You can actually build a whole structure just with Emmet and keywords. Just go back, return my action with command and set. And now what I'm doing is HTML. Then you use this here, create a then sign, and because actually you nest something in this HTML structure, and what we are going to nest in the HTML structure is definitely a head tag because this is the basic structure of HTML and a body tag. And then we hit this and see, we have already the basic structure of our HTML document. So, let's just sort this a little bit. And yeah, this is how you do it. Now we, for example, add here. This will always be just a base structure, by the way. The title, the meta tag, and a style tag. I will use during the course just in line CSS, I won't use any external CSS file because this is just easier. It is not that much, CSS actually, you will write here. So, enter, give it a title. Yeah, the meta and also the jar set I'm going to use, UTF, eight during the course, and then some styles and so on here. And then you, for example, you can also make kind of mathematical commands here. You can use multiply plus and so on. So, I mean, you saw that already, if I create something like, I want to create a diff tag and a p tag and h1 tag. Then I'm going to do this like this. But you also can use something like, I want to create unordered list. You know, with meta unordered list, there's usually a list element nested. I want five list elements. So, I just write, actually, list times five. So, li times five, which will create five list elements. And now I want to nest an anchor tag, for example. And then you have already the structure of unordered list for invocation or something else. Now, let's delete this. And something else I'm going to do often probably is something like that. They are like, actually create this again, like it's like five, and then hey, I will do something like this. For example, when if something is wrong placed here in the wrong position, I'm going to select this line by clicking command and I. This is the first line, the second line, this line. And if I want to move this whole block away, I just click alt and then the error for error keys. You see, I can just move it where I want. This case, of course, is right, so we just leave it here. So, this is how, actually, what I will mostly use here, something else I'm going to use, jumping, of course, to the end of the line. You just do it by command and error keys. So, back and forth on the end of the line and on the beginning of the line. Or if you just make big jumps, you just click alt and then the error keys, you see, makes big jumps. So, you don't have to put every single step here. And something else I'm going to use is multi-line selection. This you can do, for example, by clicking alt command and then arrow key down. So, now I selected all these lines here. And now we can add something. Yeah, you see like that. This is pretty handy, for example. So, this is actually all I'm going to use mostly. The rest is not that important. You can, of course, look up if there's something else which is kind of interesting for you. So, remember always shift command and p to see all your commands and what you can do for shortcuts. And menu specific is pretty similar actually to macOS. So, you won't be that much different. So, I hope to see you in the next episode where I talk a little bit about the operating system on other specific elements I'm going to use because I'm going to use macOS during the course. But it shouldn't be a problem for Windows users as well. So, I'm going to see you in the next episode. Now we talk about specific things I'm going to use and there's no difference between on the versions I'm using on macOS only because I'm going to use the browser Safari to open our files. But it is actually the same on Windows. You're just going to use the Google Chrome browser. And I wanted to show you the terminal at the beginning because in the previous episode I said I will show you there's integrated terminal. So, here you see the shortcut or you just click on actually view and integrated terminal. And then there's this terminal. So, here's the terminal. You can list your file, like your folder content and you can also create your folder and so on. Yeah, and so on. But we are not going to use actually the terminal because we are not going to code in JavaScript. We only make CSS here so it's not really necessary at all. What is actually kind of important is that I'm going to show you how to open your file, your HTML file and you're going to do that by clicking on the HTML file. Right click, copy the path or using this shortcut here. And then you are going to use the browser, open the browser and you're going to copy this in and then just hit enter and the file opens in your browser as HTML file, of course. I have kind of a little problem always. You see here, this doesn't work really. And I always have to add this file, double point, slash, slash, slash, and then you add actually the path. Otherwise it won't work. But as I meant before, if you open Chrome browser, it's the same procedure. So you open the Chrome browser, paste in your address and hit enter and it automatically opens actually the file. So you see there is no real difference between Windows and MacOS I'm going to use. It's both the same. The only thing is the commands and the shortcuts. But as I said in the previous episode, you just click shift, command and P and you see all the commands. I hope that will help you. If there's any questions open, please don't hesitate to message me or create a question in Udemy. So someone else will help you. If you ask me personally, I will try always to answer in time. So that means within a day. It will be not always possible because I work full time next to that here. So, but most of the time I will answer within a day. And I hope you will have no fun. We will create now or step now into our first section and our first code we will write. First of all, welcome to my course. And we'll start now with the CSS box model. Before we start right away writing some code, we wanna clear what is the CSS box model and what do we define as box? Well, if we create an HTML element, the browser draws a box around the content, add it in our HTML elements. Let me show you that. If I'm going to create here some basic tags like a P tag with some learn Ipsum, fill text, or a h1 tag with some nonsense tags, and then additional let's create another list and some list elements and open this now browser. Then we have all these elements here and each element appears on one line. They stack on top of each other. Well, these are all boxes. So the browser draws a box around this element, for example, the browser also draws a box around this h1 tag here or this unordered list. If we now just do simply add a border to all these elements. So first of all, let's add a border to the P tag, to the h1 tag, and to the unordered list. Let's make one pixels. I'll add in, let's get the fire brick and then reload the browser. Then we see the boxes. Now, additionally with the box, there are four separate edges. There are the content edge, the border edge, the padding edge, and the margin edge. Is there no Cs as property applied to our html element, then all the edges of the html elements will be the same. But our browser automatically adds some styling, such as margin or padding. We can see that in our browser here. This space between the very top of our window here, our document and the very left of our document and our html elements, this is some margin defined by the browser. If I'm going to reset this now by selecting the body and setting the margin to zero and reload our browser, then either the disappears the space and our html elements right away are on the document borders here. If our box doesn't have any width or height set, then the box is set just around the content. We can change the width and height to a specific value or even a minimum or maximum width or height. So let me add width and height to our p element. Here our paragraph, say width 400 pixels, and let's open this in the browser. Now you see our element has a width of 400 pixels, so it doesn't have the whole width anymore of our browser. It still is a block level element though, so it still takes up the whole width of the document, but we will come to that later. Now, I talked about these four separate edges, the content edge, the border edge, the padding edge and the margin edge. We'll start now with the padding edge and if you want to add space between the content edge and the padding edge, you just set simply the padding property. If not specified, the padding will be added on the top, right, bottom and left. This affects the actual size of the element. I'm going to show you that by adding a padding to our paragraph. I'm adding a padding of 25 pixels. I'm going to reload this in the browser. And you see, there is now 25 pixel space between our content edge and our padding edge. This padding size is of course added to our content width to the whole width of our box. So if we have now 400 pixels with our paragraph of our box, we have now to add on each side left and right 25 pixels. So the total width of our element is now 450 pixels. If you want to get rid of this behavior, we can use box sizing and then border box as value. I'm going to reload now the browser. And you see, it disappears. So it actually shrinks the content because it takes now the padding from inside without giving the A and JL element additional width. You can set the padding separately for each side by writing it like this here, padding. Now you give it the top size, the right, the bottom and the left. So let's do this by giving padding 50 pixels from the top. From the right, we want 20 pixels. From the bottom, I'm adding just 5 pixels. And from the left, we say 100 pixels. And I'm going to delete this here. Open this in the browser and reload. Now you see that applied to our HTML element. So we have different paddings now from the left to top, the bottom and the right. To set all sides with the same padding size, you just use the simple short form like we used before. Just one value. Now all the same padding sizes are added to the left, right and top and bottom. And if you don't want to add padding adjust sizes to the actual size of the element, then you can avoid that by setting box sizing to border box. And you can set additionally a border. We talked about that just so I also mentioned the border edge. And the border edge is between the padding edge and the margin edge. The border edge works simply the same way. You set the border like we did here actually. And it gets added to the actual element. But because we have box sizing it doesn't add. So if you just do that now for our h1 element, give it a border of 10 pixels solid green and reload our browser. Then it will be added to the actual width. If we set a width of course. So let's add a width to 100 pixels. Now our element doesn't have the width of 200 pixels. It has the width of 220 pixels because we have to add again the border to the left side and the border to the right side. And if you want the total height you have to add it to the top and bottom as well if you set a height. You can set the border to any size and color you want. You have the following options as border style. You can add the border style separately by saying border style. Or you just simply use the form I already used the whole time here. First the width, then the border style, then the color. We have the option dotted. Let's open this. And you see we have a dotted border. You also can say you want a double and you have now a double border. Or you can add a dashed border. You'll see how that looks now. And now you can also add an inset border. This is how that looks and how it's set. And this is what that looks like. Margin on the other hand will be set on the outer edge of our box. So it pushes our box away from other content. For margin are the same rules as for padding. You can set each side individually and you can write it in the same form. Let's do that with our UL element. Writing a margin. Again top we want let's say 200 pixels. Then from the right I want 50 pixels. From the bottom I want 5 pixels. From the left I want let's say 300 pixels. Some we won't see because we actually don't have an element on the bottom. And now just reload and you see it pushes our element away from the left and the top. From the bottom not really because there's no element where we can push from. If we apply the same to our paragraph. We can use again the short version like just for all sides let's make margin 25 pixels and reload. Then it gives 25 pixels from top and left. And if that would be element to the right then two and from the bottom two. But what you can actually do with margin is comparing to padding. You can give it a negative value to move the box relative to its position. So you can set for example our h1 margin. Let's use the left minus 20 pixels. And you see it kind of moves the box to the left and a part of that disappears. This is of course all the other version how you can write it. You don't have to write it in the longhand version with margin. You can use margin left, top, bottom and right to get the same effect. Welcome to our second episode and our second lesson. In the previous lesson we talked about the box model and what the box model actually is. And now we will come to the actual box content and how it will affect our box. To start we will create a paragraph and give the paragraph some fill text. Then I'm going to style that paragraph and give it a border so we see the box. And I give it a border of gray. Then I'm going to load this in our browser. And you see our box here. To change the content within the box you can for example change the style of the text or font. We can change for example the font size. So let's change the font size to 24 pixels. Loving the browser again. And you see it affects our box. Our box gets bigger because the content gets bigger. Also we can change the font family to sense serve for example. You see it changes our text. And in specific cases it changes our box of course too. Because different fonts use different sizes and settings. And also we can change the font weight. That's set to bold. You see that it affected totally our box. And that it grow a little bit more. Now we can change also the font style. For example to inherit initial, italic, normal and so on. I will set it to italic. And you see our font is now italic style. When we use font indent then I think I wrote something around here one second. Italic text indent was not font indent. Then you can actually give the first line of text a little bit space. So that's 12 pixels. Now you see it pushes the first word to the side and the rest. And we even can now change the letter spacing. Or the word spacing. Let's just change the word spacing. There's a space between the words obviously. So let's say 10 pixels. So we'll look in our pre-word. But also letter spacing can add 6 or 5 pixels. Just to demonstrate you. Now we can add our box a background if you want to. A background color. So let's add a golden background color. Now you see our box has a golden background color. If you want to we can add even a background image. By background image. Or just background would do it too. Now just open placeholder.com. We will use that more in future lessons. So I'm just going to copy this here. And paste this. And then I set our background size to cover. It has the background. We don't see it because it's stretched and fits to the rest. So I'm just going to give our box a width and height. Let's give a width 250 pixels. And a height 250 pixels. And I'm going to change the size of our placeholder image to 250. Times 250. Now notice. Now we see our background. The picture is perfectly fitting. But our text floats of course out because we have too much text. We can set of course the height or what it do. But let's not use that much text here. It's also like this. And reload. And you see we have your background image and we have our text. Now what we also can do is we can add a box shadow property. The box shadow property can actually add something outside of the box. With the box shadow property you have a little bit to experiment actually. You see we have now your box shadow. Let's make it not extremely black. Let's make it slightly gray. And you see we have our shadow. Our box. Now you also could do rounded corners by adding the border radius property. And set it to 100%. We'll make it a circle. Let's see. Now later we will talk about images. Because images are of some specific rules. Because they behave as an inline element. If you don't know what it means now don't worry. We will discuss that later in the lesson. Let's have now a look at the display property. All of our HTML elements do have a display property setting. Most of them are block level elements. That means they take the full width of the available space. So no other content will be next to them. I'll be sure you that by creating some of these block level elements or just creating some text. And there are block level elements as we will see. Such as a diff container. So what else? A paragraph. A headline. And an unordered list. For example. I create all of them and give each one some content. Laura Ipsum as full text. Maybe here a little bit more. It doesn't do it. Now it does. Okay then here some art text. And here we give some links. And list elements. I mean I will add number one. Let's just do it like this. Number. Now I'm going to set two and three and four. Open this now browser. And now we have here our HTML elements. Each one of them is a block level element. So they take full width of the available space. In this case 100% of the document. So they float underneath each other. I'm adding now again. Everywhere at border on each one of these elements. So I'm going to say diff p h1 and unordered list. We'll have a border. One pixel solid red. Open the browser and reload. Then you see each one of them as box. And every single element is a block level element. Because it takes the full width. Now if you add padding for example. To one of these elements. So this element. Then their padding. Also the margin or a border. Will add to the size of the block level element. So the size of the padding. The margin and the border will be added. To the size of the box. If I give now the box a size. Let's say 400 pixels here. And also a height maybe of 300 pixels. This will be our diff box here. I give it a different border color. Maybe I'll make it green. So you just see the difference. And now I'm going to add padding. Let's make 20 pixels to all of the sides. You see it grows. It's not 400 pixels anymore. Now we have to add the 20 pixels to the right side. And to the left side. To our width. That means the actual size is now 440 pixels. And the height is the same. The actual height is now 340 pixels. And if you want to avoid this kind of behavior. You can change the display property. We will come under that. There is the next one we will talk about. Is the inline value of the display property. And this will make our box to an inline element. That means that the box is inline with the other content. So if you add padding, margin or border to the element. It will be added relative to the normal position of the box. So let me do that. Let me display inline here. You see how that affects our box. And actually how our editor, our code, our visual studio code. Underlines with this green line here. Our property is width and height. Because they are actually unnecessary now here. So let me just delete them. Now if you add padding to this element. I said it will add relative to the normal position of the box. So just delete now the padding. So you see the difference. So you see it will take no space. And now I am going to add it again. 10 pixels this time maybe. And reload. You see how that affects the box. Now you can use the inline block display property to the element. If you want it to behave like a block level element. And still remain inline. So you can add padding, margin and border normally to it. Let me do that by inline block. You see it normally affects the box as like as a block. Just it's now an inline block so it doesn't take full width. And if you set the property to inline element. I said you can add the margin border normally to it. But you can add more values to the display property. One of the values is actually flex. Which I will discuss separately with you. Also you could add table or table cell to your display property for vertical alignment of your content. Welcome to the next lesson. In this lesson we will talk about images. Because images are inline elements I will talk about this separately now in this episode. So why are images actually inline elements? Well think about emotions, smileys and so forth. They are commonly used within text messages. And they appear in one line with the text. So they all inline. If you add a border to an image. So if you nest the image within another element. You may notice there will be some space between the bottom of the image and the bottom of the parent. Let me show you that in CodePen. Because it actually doesn't work in my regular browser. So I'm going to create a drift tag. And nest within an image tag. And I give the image a source of this URL here. Which is just a placeholder image. Now we will see this here. And now I'm going to add to the image. To the diff, excuse me, some border. One pixel solid red. And now you will notice the space between the bottom of the image and the bottom of the div. So why is that? This is because the image is sitting on the baseline of the text line. And it's not something like padding or margin, predefined by the browser or something like that. So if I just now use a normalized file. Which resets the browser settings. It will still appear. And this is something you can fix. Of course. And you fixed it. If you just simply set actually the display property of the image to block. So don't just say image, block. And it disappears. So the image becomes a block level element. In that way we can use padding, margin and so forth with our element. We will talk now about positioning. If you don't set any value to the position property of our HTML elements. Then all the boxes are shown one after the other. With the position property we can manipulate that behavior. By default it is static. That means it will be placed by the normal flow of the content. Let's just make that a little bit visual. And I show you that by creating a birth tag. And I'm going to create three of them. But let's give them all kind of class. Let's say box. And each box will have a border. Five pixels, solid, red. We'll have a background color of green. And this should be actually all. Now let's open this in our browser. Copy the pattern. And we see this actually, but of course you don't see anything with our margin. So let's add a margin of 12 pixels. Now we see it. Let's give each box a height, 50 pixels. So we will see this box. And you see we give none of the boxes any positioning value. So if you want to manipulate this behavior. We can set for example the positioning property to relative. So I'm going to select the first box. I'm going to use here nth child. This is a sudo selector. We will discuss later. Now I'm going to add the positioning attribute. I'm going to set it to relative. Let's open the browser. Nothing will change so far. But we actually can now do something. We can use the properties left and top and bottom and right. So let's just say now we will go from the top 20% open the browser and reload. And you see our box is now placed 20% from the top. Also we can use here a set index which will give our HTML elements additional access. The set access means three-dimensional so we can actually have layers. But for now let's just use the positioning. So if we use the relative position we can use the top right bottom and left property to set the position. Often the relative position is used by a parent element to position the child elements. I will show you that after we talked about the value absolute. And we're going to do this now. I'm going to reset this here. I leave that to relative. And I'm going to select the last box, free. And I'm going to set the position to absolute. Now the box actually floats completely out of the location. And it will be taken out of the normal location and it will be positioned by its parent. If the parent is not set to anything or is set to anything but static, then that HTML element will position by the HTML document. That may sound a little bit confusing. Let me just show you that. So this element here, our box, doesn't have any parent which is set to relative or absolute as well. So it will actually now be positioned relative to the HTML document. So if I'm going to say now here 50% and top 50%. Then it will be assigned here in the center. Well, it will squeeze together because the content and the 50% on the left. So let me just do it like this. Actually, the content floats out. Let's give it just a little bit of content. And I didn't set any width. I just forgot. So let's give it a width of 300 pixels. So you see, we can position now this element. We can, for example, say 50% on the left again. Now it's not positioned in the center directly as you would assume actually. Because you say, well, I'm positioned at the left 50%, on top 50%, shouldn't it be directly in the center of our screen? No, it is actually not like that. Because the document or the element will be drawn from this point on, this point here, the upper left corner of this box. This is the center. From this point on, it draws our box. So we actually have to reset the half of this box and also the half of the height to get the absolute position of the center. So we can do that actually. We can do that by using transform. And then we say translate. And here we just use minus 50, minus 50 to do exactly that what I just showed you. And now it's perfectly positioned in the center of our screen. Now I told you that if the parent of something absolute positioned will be anything but static, then it will be positioned within the boundaries of the parent. So I'm going to show you that by creating a new box. Give it again, box, of course, the class. And within the box, I'm going to nest another box. This looks not like this here, but I will actually delete now all the starlings here. So everything will be in the same flow. This looks not like this. First of all, I will select the last box. This will be number four. And I will give it a width of 500 pixels and a height of 500 pixels like this. And I will set the position relative. Nothing happens yet. But now I'm going to select the nested box. I'll give it actually a different class here. Let's go to the next box. So nest box. And I'm going to give it width and height as well. Give it a width of 100 pixels and a height of 100 pixels. And just a background color of, let's say, yellow. Here it is. And now I'm going to change the position to absolute. If I reload now, nothing happens because it automatically sets left and top to zero. But if I'm going now to say here, right, zero, top, zero, our element will float to the right, zero and top, zero position of the parent because the parent is relative. The same will happen now if I'm just going to say that the parent is absolute. Nothing changes. Of course the position of the parent changes a little bit because the position is absolute now. But the child element still assigns or is positioned within the boundaries of the parent. If I do now delete this and put this back to relative, I will now actually delete this here from the parent and put here back to position. And I will reload now. Then you see the box is again positioned on the right, zero and top, zero position of the HDL document. And now there is another position value we can give. The last one is called fixed and works exactly the same as the position absolute. With one exception that the position is set relative from the viewport and it's fixed there. So you see we can scroll here. If we are now going to add another box, or just let's take your second box because we didn't use it yet. So the second one. I'm going to add here position fixed and say left 50%, top 50%. And I'm going to add here again transform, translate minus 50%, minus 50%, because remember this is how we center absolute elements. Now we have the element here, but I'm going to add actually a width here. 250 pixels and height, 250 pixels. And now we have here the element and if I scroll, there isn't much content of course, so I don't scroll that much. But you see it's fixed in the screen. It moves when I scroll with me, it's so fixed to the viewport. Let's just give it a little bit more content now. Just add here another boxes. And then I reload, follow the motor scroll and you see it's totally fixed. And you can just scroll with it. This is how you create kind of parallax effects and so on. One essential thing in your page will be of course links. You always want to refer to your external page, or you want to even refer to your internal page. So whenever you do that, you use an anchor tag or anchor element. You're already pretty sure you know how you look at it, it looks like A, and it has usually an href attribute. And this href attribute, we can target now different things. Whether it's an external link as I said, so I'm going to add this for example. So for example let's say I'm going to add Google. And this will be my external link now. So I'm going to click on Google. It doesn't redirect me because it's actually adding this Google page in the end of the domain of CodePen. But it would of course redirect us. I can show you that in another example then when I use Visual Studio Code. Anyways, you can use here also an internal page. So you can refer to an internal link or to some anchor point. So you would do the same actually. But if you want to refer to an anchor point, you're going to do the following thing. You have now this A here. Or let's create quickly actually our little navigation again. So you just repeat this thing. Another list. You can't do anything. What is happening? Another list. It doesn't let me do the creator of them. Let's really do it quickly. I have no idea what it is. What is happening here? Just a little, whatever a little bit. Okay, we have now another list. We have allies. And we have working allies or an anchor tag. And let's say you just make four elements here. Of course it's still going to work. So let's make four elements and let's give it an anchor here, anchor here, anchor here, anchor here. This is our navigation, right? And then we create again like this placeholder pages. Let's create how many elements we have for. Let's make four. So we're going to start to create a placeholder. So with percent and hide one thousand pixels. Some background, background, placeholder. Again, the same thing. And child. And this time we stop to second one, of course, because I don't have this as our first one. So the background color green. Then I'm going to add placeholder, child three dot four background. Let's say red. And the last one. Placeholder child five. Perfect. Well, now we want to refer to these elements. So we have to give actually each of these placeholder elements another attribute that this has another attribute to retrieve the ID. And we say here this is our about page for example. This is our product page. This is our reward today, well. This is our blog. Have something like contact. Now each one has every element has here some kind of ID, right? Let's make quickly at least normalize here that the noise movement doesn't take the bubble. All right. And now we have here our wrangling. So I want to refer you to the about page. And here I want to link to the product page. Here I'm going to link to the blog. And here I'm going to contact. And of course we can quickly stop the whole thing. Let's make it like that. Well, let's say. Well, the display inline block. All right. It's okay for now. Let's give quickly some padding, pixels. Remember why it doesn't work. It's an inline element. So we have to say display block. Awesome. All right. Imagine notice anyways by also by the way that you have a much more clickable area if you add display block in the padding. And now I'm going to refer to the links or to this IDs here. So all I'm going to do is add the ID. So that ID, of course. I'm going to add about ID. The product. Here was the block, right? And here the contact. So if I'm going to click now on one of these elements, it shows me the page, right? Contact is our last one. The block one is the red one. And so on. So you may have noticed this on this typical one page. Scroll websites where you just scroll down actually the whole time. And then you have some icon or some button where it brings you up again. And this actually works the same except there is some JavaScript of course for smooth scrolling and stuff. It scrolls much smoother than if you're going to button and automatically rolls up to the top. And this is how you refer to internal IDs and pages like IDs like anchors. And what you also can do actually with the anchor tab is to refer to a file you want to download. To show you that and to show you how to open external pages and how to modify a little bit how you open them with the target attribute I'm going to open now the visual studio code. Should be open now here. This is our visual studio code. Normal HTML file. I have used some example DMG file it doesn't matter what it is. And first thing I'm going to add a normal anchor tag and refer to external page Google.com because it didn't work the previous time. I'm going to save this and I'm going to copy the path I'm going to paste it here and open it and you see here's our link. I click on it, it adds that path to our file you see here. So what we can do here actually we can modify the anchor tag by setting a target and let me do everything correctly using HTTP and I'm going to say in the target link we'll now see what that does it's reloading and it opens Google and it opens Google on a new page in a new tab so not at the same page so we have always to go back so if the standard behavior would be it opens in the same tab which is called self actually so that does the same thing like the standard behavior, the default behavior so I'm going to do this again here it opens Google on the same page and don't forget to add HTTP so it won't just add this thing in your local path and this is how you do that now but let's see what else we can do now and we can refer to a file so all we have to do is copying here the path or writing here the path to our file in this case our test dmg I want the download and it is already in our root path so I'm just going to add this here and say here download me save that reload and click this and you see you can download it I'm not going to do this now because it doesn't make sense but you could do it like this so you refer for example on your page on a specific path or folder or something and here you can download down your files or here visitors can download files congratulations you made it so far now we will talk about lists and we start off with the ordered list and it isn't what it actually is that's it's ordered list so it's a numeric list or like yeah a numeric list usually but of course you can change some behavior of that list and you can do some interesting stuff with that let's create an ordered list now ordered list you create with the keyword ol and you give within the ol some child elements these are li's and I give now six li's and I just give it some names or something let's make some cities room let's go and you see already the default behavior of an ordered list it's a numeric list from one to whatever how many elements do we have and this is how it shows that but you can change actually some behavior the way how it will count your stuff or how it will show that list so you can add some attributes first of all you can add something like called reversed to your order list so let's just do that reversed and you see it reversed the order of our list here so it starts now from six and counts down also what we can do is setting actually a start value let's say start and we give it a value 10 so it starts counting from 10 that's pretty simple actually so there's nothing more actually to explain about what else you can do is changing the type well this means how it does it count or list our elements we can also make it alphabetically so we give them a and what it does it says now a b c t e f and counts it like this we can make a capitalized uppercase letter and it counts still just with uppercase letters and what we also can do is adding a i and now you see it's listing in roman numerals you can make this too so let's say this we have uppercase uppercase letter roman numerals that's pretty cool and default of course it's number of course you can still give it as an attribute and it normally counts off your list and of course you can also nest that means if you want to make an order list then we just do that let's create another order list and another six elements and this select elements you have what about something else or let's actually do that a little bit different let's add this order list in another i element and let's say ll and li let's make just four and you see now it looks like this let's see now we have put here something like Berlin again and now I kind of here I don't know cities in Germany for example Stuttgart Tristan so you see this is all pretty simple and now we can give it for a different time let's make this now alphabetically and this is all about you can say about the order list actually so if you need it just yeah choose which type you want and then quite like this more interesting will be now the unordered list what we will talk about in the next lesson and we will do during this whole lecture section and project we will already start creating our first sticky navigation which is pretty cool because we already use positioning and we already used like yeah all kind of what we learned before all the stuff we learned before we finally gonna use and I hope you like that finally now we speak about the unordered list because the unordered list is so pretty interesting because we are creating navigations out of it usually and let's start right away I'm gonna create an unordered list with UL and give it again chart elements, LIs and let's say 4 and this is our unordered list yeah let's get some names for example like this and we have now here our unordered list we can add again some attribute called type and change this little icon here our list icon and we can edit we can change it to a square for example so we have now a little square you can see that and also we can say disk and yeah of course circle and what we can do now is actually we can nest elements as well as in the order list so I'm gonna add another unordered list with let's say 3 LIs exactly and we change here the type to disk and give it some another names let's say I don't know Ryan, Peter and Jet and so this is actually our unordered list there's nothing not that much to talk about I mean how the list itself works I mean you of course can add also or nest like within your unordered list an ordered list it's not a problem you can just do an ordered list and give it some new elements of course not like this and here we get a hash load and it's nested like that you see that well but interesting will be if we can change here kind of the behavior of this whole unordered list we can say unordered list and give it now some elements like I give it an a and give it 5 of them for some reason it doesn't do that for one second so it's supposed to add now all this stuff here but it doesn't well whatever let's just do it like this then and add here an anchor tag anchor tags are just links I'm going to talk about it later and add here some like I don't know let's say blog and news shop maybe and this will be our notification first doesn't look like real like a notification so far so we're adding some CSS and what I can do is just like make all our eyes as you remember it is under our like blog elements so I'm going to make all my eyes inline blocks and you see they float next to each other and this is actually how you create notifications plain simple and yeah and so forth and in our next episode or next lecture I'm going to create a few of our first project and we'll be a sticky navigation so a navigation that sticks to the top like we already talked about in the precisioning lecture so I hope you to see I hope to see you there and I hope you will like it now to our first real project where we finally use what we have learning the breeders lessons so we are going to create a sticky navigation sticky navigation you probably have seen on some pages see we go to blog or something let's see if we find something like that let's see if WordPress has this actually it has this is a sticky navigation it sticks to the top even if you scroll or let's say something like this and it has a sticky navigation too you see here yeah this is a sticky navigation of course with javascript you can do some good animations here so if you scroll down it disappears or it makes it smaller shows some details gets transparent or something like that but to the sticky navigation itself now we are going to create a div or let's make it and then we are going to create some another list and within the another list some eyes and I want some anchor text and I want this four times it doesn't do that no idea why okay let's make it hand like this and let's say okay here here here and here an anchor tag I don't care about the tag if you have attributes or forums add some menu points that's a product and tutorial documentation maybe about us and maybe contact page this will be our navigation and then I'm going to add some other elements because you want to scroll that whole thing and add some placeholder elements let's make three of them and let's make them first actually let's create the styles for the placeholder the placeholder does have some different background let's make first basic styles so I'm going to say with 100% height view height and let's make the view of two on a flow I give here hidden and this should be right actually and now I give each placeholder I'm going to use here some pseudo elements you don't have to care about that now I'm going to explain all that later basically it's just this element this nth child the first one of these placeholders and I'm going to give it a background background of green and the next one I'm going to give a background of red this one let's get a background this should be a red for and let's give it some kind of actually add actually to where the night is so far what we shouldn't forget here to reset our CSS space normalize it let's make a midnight let's say 100% worth 100% should actually let's say overflow delete actually I don't know why I added it usually it should work with view height view height and view width but for some reason I don't know so let's give it just 100% and here some whatever as a height now it's not important actually you see just we have some content here and yeah the last the one I just created how many did I create actually I created one, two where's the green one the child doesn't, it's not right with the child of course I have to make two, three and four because child if I say add child it counts all in our document root now so the net is our first child this is our second child this is the third and this is the fourth so now it works alright so I'm gonna add now the styles for navigation so our navigation is position fixed it's supposed to be fixed I give it a background color there so we see a little bit the whole thing I'm gonna make our gba and give it a white and a little bit opacity let's say six alright so I want it to be completely 100% white here and when you remember the previous lesson I noted lists I want to have this list points there floating next to each other I mean I can do it in several ways I can do it like this I can say and give it a display in line block of course that works so we have now already our many points here or I'm going to say just float left then they float next to each other as well both works both has different behavior though and let's say display in that block for now I don't know why I always write block I don't know and now we are adding the A as style I want a style to be color and black or at least make it really dark gray or something like that that's too bright I think for some reason I had A of course I see A here and let's make it like this maybe like this a little better like this I think like this is good I give it a text decoration you get rid of that undermining and everything you see like this and I give it actually a padding I give each element a padding of let's say 12 pixels I think this should be fine and I have to say here display in line let's make it block level display block if I am going to do this you saw it actually doesn't add a top and bottom padding well it's because it's display in line so anchor elements are display in line so to change this kind of behavior I am going to make it display block and you see it's adding also the padding to the top and bottom now what I am going to do is add some hover behavior so when I hover over this element I am going to change the background of this element and I make it just white all let's say RGB A 255 255 255 at 1 for null part opacity and if I see a float over that I have this box selected well I don't want any of this spacing here I didn't give it any padding right so I don't know some what because here some margin so all the padding automatically so let's say reset this and now we got rid of this and we can of course say now to send it the whole thing if we want it to look maybe better I don't know so we can text the line send her and we have now a wall navigation centered and as you see we scroll and our navigation stays right that's quite nice could be also we want our navigation on the right side I mean all you have to do is like let's float it float it right and it's on the right side you see this is how you work with navigations and how you create just a simple very simple sticking navigation and now you could add some stars, some javascript let's try I mean let's say you select now this navigation and here scroll down and if you come to a specific point or it's kind of just going down and you make it completely wide so the opacity disappears so it's like opacity 1 then and stuff like that and of course you can put much more stuff in your navigation put maybe instead of just one URL on our list another element in the net float it left for a logo or some some social buttons or something like that but for the basic understanding and the first project I think this is okay in some I hope you understood everything if you have some kind of problems to redo this whole project please message me or open the question I'm sure everyone will be happy to help you let's start with our first lesson every one of you maybe familiar with CSS basic selectors like the element selector like we write something like urli and then color red which selects all li elements within the url element every li element which is nested in the url element also you might be familiar with the id selector which is written like this list for example id list gets selected or the element with the id list gets selected and I give it a color green then we have the class selector I'm sure everyone is familiar with that too when we give it a class for example work and say color purple now I'm going to write quickly a url list free li elements just give it a name max,pd and fall then I'm going to create list id just let's say we give this li element the id list and this one the last li element the class world now I'm going to open the browser just to demonstrate what it looks like and you see the first one is red as we selected all li elements nested in the url element now why is peat and paul green and paul is purple this is because we overwrite the stylings peat has the id of list and paul has the class of world so we simply overwrite it now we are going to just delete the class and the id and maybe extend it a little bit here let's say we give it another url element and nest another li element free and give it some female names let's say paula something like just ignore the odds written from sessica dina and then more li elements another free with more names let's say dina next we have let's say andy and now I'm going to show you different selectors you may have heard of or but you don't completely understand them let's say the first selector we are going to use is this one I'm going to say url li one moment for that I'm going to change the url here to ordered list let's say color and let's say we give it a color more color for long green I'm going to delete these three styles here and now I'm going to open this and you see all the li's are selected that are nested in the url but not the ordered list and the nested li's well this is because this is a child selector and so it selects all li childs of url the ordered list is not a child of the url list I mean it is add a child but it's not the li child so now you can see the difference if I say url and just li so the element selector and say color green should see now this here all of them because it selects every li which is child of that one so it selects all the nested elements if I just switch this now and take this one on the top select this here and that one I'm just going to delete now show you again and you see all the li's have the long green with the child selector and that one has the element selector now we are going to do something further we are going to say something like url class name let's call it class name plus li what this is going to do I show you in one second let's give it a color of red and we give it here some element the class name the class class name let's say we give it titano class name and now let's see what happens nothing because I gave it url and now we see andy got selected andy is red why is that that is because we select the li with the class class name and plus li that means we jump just one li further and this is andy and this gets selected so it is red now I am going to say li that class name and then I am going to use the till design sorry till design and again li and say color and we give it here this chocolate color let's see what happens what happens andy got this color andy got this color hmm this means we overwrite it and this basically means that all the li's after the class name so after the class class name get selected so andy and bob every element after the element with the class this selector basically does in our next lesson I am going to show you attribute selectors and I hope to see you there I am going to show you the attribute selector let me show you quickly the universal selector I am sure every one of you is familiar with something like this here star or universal selector and background red if I am now going to refresh the browser you see the browser or the window is red the body is red this is because I selected basically everything everything in my html document so if I am now going to create something like and headline and let's say narrow headline and narrow headline and give it some text and do notice something like color and let's say white open the browser refresh then you see everything or all the headlines are white because I selected everything so I universally selected all the elements in my html document this is nothing new as I said but you can do something else with that let me show you by creating an unordered list with some li's and within the li I nest another unordered list with again two li's now I did something one moment like this and this again like this alright I think I did a mistake let's just redo that let's say maybe just like this here again unordered list unordered list and here another one of course not like this I want two li's alright now I give it just some names let's say max let's say peter let's say met met met and andrew all alright I'm going to show you now just quickly how it looks like I'm sure you know how it looks like like this so one unordered list nest is another unordered list and nest is another unordered list now I'm going to select a specific part or a specific layer just imagine it as a layer this is the first one this is the second one this is the third one so depends how deep you nested this element I'm going to say unordered list universal selector li color red so what do you think will happen let's see you see frank met andrew and paul are red that means I selected all li's they are nested within the first layer underneath the first layer this is the first layer so I selected the second and the third one now I can do something else I can say ul star space star or universal selector and color green going to open that and you see I just selected andrew and paul and they are green because I jumped basically just two layers down this is how the universal selector basically works of course you can combine it with another selector as I will show you in the next lesson with the attribute selector I'm going to use it too so I see you in the next lesson previous lesson we talked about element selectors and class selectors and id selectors so basic selectors in this lesson we are going to talk about attribute selectors we can do a lot of cool stuff with that I'm going to show you how that works by showing you first or creating first the input element because we need an html element which contains an attribute so input I'm going to create four of them and each one has already an attribute type you see here now I'm going to add attribute name and I call the first one first name the second one last name then email and then password alright now I'm going to select some of all of them actually by a simple attribute selector called just input and each input which contains the attribute name I'm going to color this red background one thing to just show you that better let's say we first name last name email password I'm going to open this in the browser and reload and you see we have here four input fields a place or color because I selected all of them with the attribute selector by saying each input field with the attribute name background red now I'm just going to quick put these underneath because I don't like this this much so let's say display block and margin quickly a little bit pixels 12 pixels yes that's alright okay now I'm going to select some others let's say we want to select a specific one with the name attribute which contains password now I'm going to say background green and you see it gets selected because we selected the input field with the name password now we can do a lot of interesting stuff with that we can say for example input name and then I'm going to use the dollar sign equals and say again not done again just name and say background let's say yellow let's see what happens I'm going to select the first and the second one why is that this is because I with that side I say select each input tag where the name comes in the last spot so name is in both cases here the last part of this whole string here so I'm going to select that and make the background yellow here of course can kind of flip that here by for that we need of course something which looks a little bit different let's say input let's say name name name something I'm leaving out now that sort of and now I'm going to say input and instead of this sign I'm going to use this on equals name and say sorry background let's say blue going to load in the browser and you see I selected this one because this tells exactly the opposite I want name in the first spot now I'm going to do something like this here name and star equals name and say background let's say we make it this here and as you see I select three of them because now I'm going to say each attribute with the which contains name it doesn't matter what spot we have that so I select all three of them and give that the color Fuchsia so you see you can do a lot of stuff with this attribute selectors in the next one I'm going to show you some sudo elements sudo classes I hope to see you then let's come now to sudo classes there are a lot of sudo classes in CSS so I'm going to show you the most important ones and to show you that I'm going to create different input elements HTML elements so let's create first of all let's say five input fields I don't know if we use all of them but let's try first so I have here input field type email and I'm going to say name email to you and also give each one a label like this okay the first one has a label email of course and of course it's for the input field email the next one will be password password for the input type password and name password then I'm going to create here instead of type I'm going to create number let's say min 0 max let's say 10 and step 1 of course name I shouldn't forget I forget this would be here number this is for number then I'm going to create two checkboxes or just one checkbox actually let's say boom something like so it's for mail mail and here I'm going to delete and I'm going to make it just a ptech and say something nothing too creative and I'm going now to see I select the label tag and I'm using brackets and I'm going to say name email and here say valid now I say bottom let's say for pixel solid so if I enter something in this not label in this input in this input tag email which is valid html5 automatically recognizes notice that if there's something not valid token which doesn't fit to email and if it's valid then I'm going to add a green border let me show that you're right away in the browser refresh and now if I go this here you see the green border disappears I'm going to add now add something something or not come and you know it's you see it's getting green now I can do exactly the opposite so I can say input name email invalid and then I say again border pixel solid and here say red so that's refresh and you see it turns red because it's not valid add something something and it's green see it works not now I'm going to add something here our password one I had required so this input field there is something required we have to fill it out before we continue first I'm going to select the input field with usual attribute selectors let's say here name password and here say required I give it water again solid let's see backup verbal going to reload if you see it's selected it's required it adds this violet water here and now let's see we are going to continue with the number input I'm going to select the number input I say here type here I say something like out of range I think it's pretty self explaining what it means so anyways I give it a border if it's out of range I give it 2 pixels solid red so I guess you already know what it means I added to this input field a range from minimum 0 to maximum 10 so this is everything right here see I put something out of range should turn red and you see it turns red because it's out of range I can also again turn that and say got exactly the opposite I'm going to select again the same one and say in range and this time I give it a 4 or 2 pixels solid green same thing reload refresh and you see it's green as long as I don't overstep and put something in which is not well this works really great so let's continue with the last one which will be checkbox so first we select again checkbox you say input input you say type checkbox and now we say checked I'm going to add something add the p-tag I'm going to change the color of the p-tag and I make it let's say a different color here let's say blue make blue so refresh going to take it and you see that changed so now I'm going to take it and change spec blue and so on so you see there are pretty and pretty convenient these city classes and I hope you understood everything well and I'll see you on the next lesson because it was so nice I'm going to show you some more city classes such as empty, disabled, read only and read wide to show you that first of all let's try empties so I need input some texts name name first name and this should be all maybe another one just to demonstrate name last name and now I'm going to say I'll use our attribute selector again it's going to say I select each input field with a name let's say just each let's practice it again let's say name and it should be with remember with the we select each input field with the word name in the end so I'm going to do that but this I think this dollar sign equal sign and then name and I'm going to add some style but now I'm going to say it should be empty just if it's empty I'm going to add a background and the background will be red now I'm going to open the browser and to reload this and you see both is red because both is empty now I can do something like let's say keep this here let's add here disabled so this one is disabled and I say now the same input I'm going to select both of them name equals name and I say here disabled background green and let's reload this and you see I selected the first one it's still disabled so I can click on it and I selected this one now I'm going to show you the read only in read and write you can do something like this you can make a paragraph and you can say it's content editable without any anything else text and now if I reload the browser you see some text here and if you click on it you see you can edit the text here you can delete, write everything now of course I can select this I can select this by saying p and then I say read and write because this is my writes I have the writes to read and write in this p element so I'm going to change the color here to fuchsia and just to show it it doesn't look like the other one I'm going to create another one and another one and this has more text and let's see in the browser I just selected editable and you see I doubleize to that one if I just want to select each or every p element which is not editable I'm going to say just p and then read only read only and let's say I make now here the color gray let's just add some a little bit more p text text let's make it like this some more text let's see they all have the color applied for that because they're all editable so they're all read only so I selected all of them these selectors can be pretty handy sometimes too so I just decided to make an extra lesson to that I hope you liked it and see you in the next one we'll talk now about pseudo elements pseudo elements on the contrary to pseudo classes just create four elements so you can style them pseudo classes are like elements that are already existing to show you that I created two paragraphs here and I'm going to style them a little bit I used the knowledge of the Brio's lesson the pseudo classes for that so I'm going to select first of the type of the paragraph and then I say something like first line let's say first letter first and I say give it a color of red and I say text size text size of course font size and give it 36 pixels now I'm going to open this in the browser and reload and you see I selected the first paragraph and the first letter we can do the same with the first line so let's say I say here again first type and first line and I'll give it a color of green and also a font size 24 pixels going to reload and you see perfectly select the first line in our paragraph now there are some pseudo elements you might know already for example the before and after one just do I still show you of course now so it's the last of the type so we select that last paragraph and now we say here and some content here let's say add some text here and let me show you what happened we added after this paragraph just some content here some text now I can do exactly the opposite I can also say last of the type before content edit some text in the beginning and now I'm going to here reload and you see we added some text in the beginning and on the end this kind of pseudo element can be really practical if it comes to curating some forms drawing some styling some new website which I'm going to show you later also the content in general the content element generating content can be really handy I will show you much more on that too later just hope you like this lesson and you can see it's pretty practical to style your text and more of that later I wasn't really satisfied with this before and after attributes I showed you this kind of pseudo elements so I am going to a little bit more into detail with that because we I'm sure we needed quite a lot actually actually nowadays you needed a lot in web development if you create little tooltips you can use before and after elements or if you draw make a tooltip at all because for example these little triangles on a speech bubble or whatever this kind of element you see sometimes this is other in before element so to show you that I'm going to create little div and let's call it right away actually let's call it some kind of tooltip or also what we could do I know I'm going to create with you a timeline a timeline is like it says a timeline and like a vertical line and there you see different elements and there's like a point on this timeline which shows on this point something happened or this point there's a form or whatever I mean just let's create a zone I'm going to create a div of the class timeline and then I'm going to give it a child element and I call it timeline entry this will be an entry a little box or something with some content which points on that specific point on the timeline but before I'm going to do this I'm wrapping this whole thing up here so you see it a little better so I'm going to use a rubber and then I'm going to just copy the stuff quickly in here exactly like this and rubber space alright so we have this timeline entry here and within that entry there comes then some we can now just write some timeline content for example and before that content I add some timeline headline or I call it flag now here this is like a headline flag and here comes some content alright now I'm going to set the wrapper quickly I want it to have a max width of 80% and a margin of zero and auto let's make it top a little bit actually margin and I'm going to create a timeline the timeline itself it just takes the whole width of the wrapper and has a border left this would be our timeline actually so I'm going to say three pixels solid and let's make it black here you can see this is our this is our timeline and it's of course pretty short now it will grow with the content with the entries and what I'm going to do now is creating the flag right away so timeline flag entry first of course our box here which will have actually different backgrounds color would be kind of convenient here so let's set it to background and actually not the wrapper it's the background I want the whole body to have the background so let's change the background of the body right and the timeline entry has the background white you see this is this whole thing of course and now I'm going to say display the timeline block because I want the whole width here and I also want that it has a margin from the left definitely 25 pixels maybe let's see how it looks like yeah this is alright and what else I'm going to need here I'm going to add here our before the element now so I'm going to say timeline entry before so what I didn't tell you that content is always needed otherwise you won't see anything at all so you can write here anything it won't be shown if you don't write the content attribute here so now I'm going to set the saw thing absolute to absolute position it but remember that lesson about positioning we have to set actually this here position relative and and what happens here actually to or do better imagine it or do better understand the whole concept of this before and after but it actually does it does actually the following thing we have now here our timeline entry and within this entry element it creates us a before element like this or not like this of course of course not the right thing like this more imagine like this you have now here before and here you have another element after this is how you imagine or how you can understand that better what it actually does here what this before after elements creates for us and many people think actually it comes out often that parent so it would be here before and then there after but it's always within the timeline entry so because of that we have to set it of course relative so we can position it absolutely better so what I want now I want it left zero top zero and I want a triangle right pretty simple I just create a border 10 pixels and say and I say transparent what triangle we need here is the one that points to the left which would be our border right actually so I set the border right color to already our rectangle our triangle excuse me and all I'm going to do now because we also set this margin and everything I set 10 pixels not left I set minus left extra little bit more there is our triangle and now I'm going to continue here I want to quickly completely show the whole kind of little project here what are we going to do and I add padding here add a padding of 15 pixels see it looks a little bit much better I think looks much better so we have now here our little content box and this headline flag here timeline flag timeline flag our timeline flag that gets kind of some special treatment it has a padding of the bottom of course so we don't exactly a little bit separately from the content and I give it for example a front size a bigger one 24 pixels exactly and now I told you I want to show or want that triangle there to point on the specific point on the timeline so I'm going to use for that the after element I use here after because for the before I used our use triangle but before I'm going to do this I want to add more entries I want more of these little boxes to show point more here so let's create quickly another one here another one exactly so we have that here and what I didn't do of course I have to say here I put it here inline block let's leave it as a block actually and let's give it just the width or we leave it inline block to load of course this needs some points here I know it doesn't make sense actually because it doesn't work with the before let's just make it block here let's make it block and if you wanted so wide whatever we just changed width pixels or something like this exactly and we give also a margin top here pixels exactly and yeah that's all and now I'm going to add the after element so I'm going to say in timeline after our entry of course it's part of the entries though and of course we need the content like I said before this is really necessary you always have to write a content attribute set the precision absolute too I need it left I don't know I just guess now minus 40 pixels I don't know actually you'll find out in a second I get a width of let's say 20 pixels background of black here and pour mix don't forget the height has the same one and then I'm going to add the border radius of 100% and you see already we have the points now here so I'm going to adjust it a little bit 35 is not that great let's make 7 maybe yeah this seems fine to me now and now we have our points here of course we can mix up let's say border yeah 2 pixels maybe solid and also black here and just gonna delete here the background exactly and I need it a little bit more to that side 39 minutes for it 39 is fine I think of course it shines like we see of course the timeline border now so I'm gonna set the background actually to our body here the same color as I gave the body and now it gets this effect like shining through and the first one for example is active let's say now we have here in each of this kind of flags entries I mean like a form and like some input elements and a button and we for example submit now this form and then this one closes and the next one opens or something or then here is kind of a tick or something or a cross if something is missing for example like that now set the first one on active for example so I'm gonna add a glass active and the active class does the following timeline entry, active after and content here same and gives it a background of black you see so just the first element which is now active later of course you would do it on jQuery, javascript or whatever you check that it's active or not and give it a glass active and it has some automatically black or the circle has a background color this is how it works and you see how you can use effectively the after the before attributes and I hope you understand a little bit better there is actually a little bit more about before and after but it's not important now in our case so with that you can already handle a lot of stuff and do have fun and just play a little bit around and if you have questions of course feel free to ask me we will come now to a pretty big topic and a big thing and web developing and essential actually because it's about forms forms you find in all the pages all kind of web apps and stuff you always have to fill out forms it's kind of a little own thing it's kind of hard to really handle forms well so to create a form we just going to write a form element it automatically creates for us this action attribute and here we specify what kind of action we want to submit when we submit a button this could be now post or make an HTTP post request and send this request to the server we also could make a get attribute or a get method this will be send a get request and yeah this is actually yeah we'll just make a get request and how it does that is we just need a button of course which will yeah which will actually do this whole thing and let's do it now like this let's for example create a button here and click click here you see it loads here something calls it twice send a get request and you can add here specific things again you can add here a target like if you remember the anchor tag you can say here blank again and if I'm now going to click on this button it opens a new page and it sends them the request and redirects here or whatever you want to do here you can give of course the folder name like for example then you can refer it for example you have then like a select element you can refer the select element to this form now a form is called just a bit like this usually you have a form then you have some label and just label the ranks to an input field which will be named now name for example so I'm going to say name here then have an input field name and ID name the reason why I sent here ID name is that if I click on this label it automatically selects the input field if I delete now this ID name here nothing will happen but we want actually this behavior it selects our input field when I click on the label right and to create forms like I said is a little bit of our thing I will go more into detail after that and I'm more into detail about the label and the input and whatever you can do then here you can make a checkbox for example and let's create quickly one so you have your checkbox or like a radio button then you have your radio button in a second actually not the radio button just radio and here you have your radio these all these elements which puts a form together and in the next episode or next lecture I go more into detail in the depth you also create some forms of course because this is a really not tough thing but you can do a lot of things wrong so in the next lecture I'm going to show you more like I said previously we go now a little bit more into the details in the form especially the labels and input elements and for that we're going to create a form simple form give it an action of post and maybe a name of let's call it again Lugin and now I'm going to create a label and I told you briefly I can use this or attribute to assign it or like kind of include it with or combine it with an input field I do it with the ID of that input field so I'm going to say here for example name now like I did before name and then I'm going to say input and give this ID of name when I click now on name it selects this input field here there's another way you have if you can do it without actually using this for attribute at all you just simply don't write this input field outside you write within the label so now you have this here and now if you click on the name you select automatically the input field there are different ways to do it you can choose if you want to use more that for attribute or you just simply nest it in your label now we are going to come to the input field well before I'm going to do this it's maybe also important labels and input fields it's really good for browser that Google and so on and screen readers reads that stuff so always add a label to your input field it's also a convention and you just do that and later I'm going to show you also how to structure it but for now just remember always add a label to your input or nest your input within the label and now we come to the input field and we see already that automatically puts the type attribute here we have different types of inputs this is now a simply text type so I can just add here text and actually let's change it to number and what it does now we have still this input field here but we can here choose numbers see that and we can actually also add now something like a min which is 0 and a max which is 10 so now I can go below 0 and I can go above 10 see that this is our input type number now we can add input type color I need to kind of leave this min and max here and what this does it opens the open action on my mother screen field here this depends actually what browser you are using what kind of field looks like here and now you can choose some color whatever color you want to and I think you just submit like this and then you have selected color here nice and the next thing you can do is a checkbox a checkbox we know already name mix not that much since now let's say a male here and we are going to choose between gender or something like that so I am going to create here a label male maybe here under input I am going to delete this for here and let's say here female this here checkbox and now we have here female or male or male I don't know it would be better usually you would use here something called radio instead of checkbox and then you would be able just to select one of this kind what else can you add actually you can add date so now you have here date or you can with HTML5 you can click here and you can select a date or just write it here that's pretty self-explanable as well as you can add file file now you can choose a file from your from your computer actually let's quickly as you can see let's make a label display block top here just a little bit see the better and the next thing you can add is also month for example now you choose here the month and here that's pretty similar to the date one additionally you can add password now let's see what that starts here actually I just password you see it actually just hides our input this is the password type and then we have something like range and now we have this kind of thing here this kind of range slide thing here I think we can also make a here like one mix 10 something like that now you see already steps here and another one you can do is time then you choose just time and you see there is a lot of stuff you can do with this input fields now to really go deep into details of that what you can also adjust a little bit on time number, color, checkbox and so on I suggest you to go to the musilla foundation to the mdn if you just google it you will find it right away or I put you a link down there in the description and you find much more details about this input types now let's create our first form so let's start right away our container because I want to center actually our form in the center of our screen so then let's add another div and then it's called form wrapper then I'm going to add the actually form give it an action post for now and I give it something called input group and I'm going to make a div make a class input group the reason I do this is I put like kind of kind of a row so I put always a label and an input element in one input group and stack it on each other so I stack it so I can control also better the distance between those input groups and it just looks better it's structured so now I'm going to add a label and I'm going to add input element the label is for my name and input gets id name and I'm going to do this actually a couple of more times so I just have to copy this so another one another one so we have now name or maybe let's make it like let's make surname say sname then I'm going to make let's leave name here name so name and name is right then I'm going to say here email set it here to email and id email exactly and last one maybe make another one make a password one pass password here and there password alright, okay good and what I'm going to do now is styling so let's style the container first so we set that whole thing so I'm going to use here position absolute 50% top 50% and transform translate minus 50% minus 50% perfect before all that make sure you add normalize and auto brief fixer and then I'm going to set all my items organizing auto box remember why we do this so it doesn't add the border, the padding to it or actually width of the elements then I'm going to select the body and give it a background color of a roof dodge tray like this and now we are coming to the form record and the former gets a background around white exactly like this and no padding so make a padding 12 pixels and then here may be 9 pixels or nothing let's make it 12 here 16 here yeah seems fine to me and let's leave it like this for now let's leave it like this and then I say that all the input groups have that width 100% at this block of course I don't have to set that, I mean there are any ways to set the block and they have always padding top of let's make padding in general let's say then I make a padding of 8 pixels at 0 let's leave this for now and then I'm going to give the label display block because we want everything underneath each other looks good I think looks not that bad and now I'm going to say that the label has a little padding bottom and I always make the padding between the label and the input field for pixel it's like also a convention I have and actually let's change this to 20 actually I always do it like this 20 that's a little bit white let's make 10 here in this case fine maybe 10 is fine and next thing will be actually a button we didn't add at all so I'm going to add quickly a button here so whether we make now input and type button this press 2 or submit we can do it like this of course or we add a button but like this kind of your decision I mean you can do it how you want that so we have now this button here and that's good actually what I actually did now I gave the input group the first one adding from the top I don't want that I just want this padding between these elements here and because of that I'm going to say something I'm going to say input group and I'm going to use absolutely element you're going to see later it's called nut and then I'm going to select the first child and here I'm going to add this padding and nut there so this actually just adds all the paddings except of the first child which is this one here and now we have this elements here so but the thing is then it doesn't add actually doesn't make sense here because now it doesn't add adding bottom too so this was kind of not the plan let's make it different then it's coming alright so let's just make the input group first child not first child let's make first child and the first child does have no padding top that's all then we have this now so we have a surname we have a name, email, password what we're going to do and I always suggest you to do additionally always write a placeholder in your input fields so I'm going to actually select all of them I'm going to just select and hold command and select other input fields as well like this now I'm going to say placeholder and give it some placeholder text so here I'm going to add surname there I'm going to add name there I'm going to add email and here I'm going to add password and you should forget of course to change here the type because we don't want to see the password when I type or something it's like him there's still too much distance let's make it a little bit less here I think as of now it's better alright we have a number of this and we have this button and we have all what we can do now to make it look a little bit better so I'm going to add here a box channel one pixel two pixel something here let's make it look like this or we simply just add rgba rgba this make it black and set the opacity a little bit lower like this so now we have our input field email and so on and always a convention is to write your input field underneath don't write them anymore next to each other always try to write them underneath except the space is important and that's actually that's about it I should add maybe a little headline or something let's h5 maybe let's say h5 login exactly yeah this login has a little problem and this login sets a many as a padding actually now we see it's gone so we have now rgba and maybe add here h5 quickly and project 2 how much should I give here or actually it's more here so too much here and it's not big enough actually let's just make the font size a little bit taller I think this looks better so this is our little form here we're going to also select the button now it looks pretty ugly like this so I'm going to select the button with selecting the type stop it to the selectors you will hear a little bit more later or I did it before because I have to tell you I record most of my lectures like different times I could actually be just change my mind and I put this section now later after all these selectors because I have an extra section of course for all the selectors I hope you like it and I put this lecture afterwards or this before but I think it will be afterwards because it makes more sense because I'm going to use here a lot of the lectures actually so now I'm going to say here at the bottom non-quickly so just to see it make sure it's selected background none as well and I want actually a border I want one pixel, solid I'm going to use this here as well let's look to right or let's make it the same way here should be a 0, 0, 0 2.2 3 is okay and I'm adding of 6 pixels maybe yeah, doesn't look that bad and I need also a margin here because I don't have that space here that I should have we remember we gave here each one 8 pixels so I'm going to say 8 pixels here to the top alright, perfect now we can just sub it or we just cancel it it's like while you log in and make another one cancel exactly now we have here two buttons we can cancel or we can log in and this is our little form here you can change yourself now a little bit like the width and height or pettings and colors experiment a little bit makes them a little bit beautiful maybe the input feels much wider a little bit here I would say also show you how you style input fields much much better styling also like the placeholder and stuff like that and I will do this I will put this probably in the section how to and here I am more handle, tell about the basics and understanding a little show how to do that like specific problems like styling like button differently, buttons differently input fields, ready buttons and so on making the how to's so if you are now interested scroll down and click on the how to section and then just watch it already if you want to you finished your first chapter and now we are coming to the next one and now I am going to show you how to draw with CSS in the beginning we make with triangles how do I actually create a triangle with pure CSS to show you that and to demonstrate you actually how that basically works I am going to create a diff container with the class of triangles plural triangles not capital T of course actually we don't need any content on it so and then we are going to give it some basic styling, triangles first I am going to set the width of zero and the height of zero and then I am going to say margin zero to center it in the screen and what comes now, this is the thing which what what shows you demonstrate to you how this whole triangle thing works out with CSS so I am going to say border 25 pixels solid and I give it a red now so what do you expect to see now let's see we open our browser I am going to reload now you see it's a rectangle actually why is that, I mean to show you really how that looks like actually with this borders now I am going to give each border a different color and first I am going to set the margin from the top a little bit okay now I am going to see border left green and border right I am going to set blue now I am reloading nothing works one second, of course I want the color not the whole border and reload and you see actually how it looks like, we have a lot of little rectangles a little triangles here four little triangles what it does actually it's kind of each one gets the same space within this rectangle because we set the height and width to zero so the space or the width of the border has to go somewhere you know gives each border the same width and then this is how this triangles appear now I can, I mean of course we have now four triangles but if we just want to have one we can simply set the rest to transparent of course let's put this two here these two to transparent and reload you see we just have this two triangles left of course we won't do it like this then I mean let me show you that on a practical example let me create a speech bubble for that I am just quickly renamed class name to bubble and say bubble first I am going to set this whole thing to relative give it the width of 250 pixels and a height of 100 let's say and then the same thing I am going to use a margin to center it let's look quickly then of course I need a color let's say we give it a slightly gray like this here I am going to set also the border radius a little bit just to make it look a little bit better good and within the bubble I write some texts hey are you alright of course it doesn't look that great so I am going to padding a little bit and font size bigger and you see looks better alright now I am going to add this little triangle here I mean you can do it how you I mean it's different ways to do it you can make it on the left let's create it on the bottom to make a bottom one first how it works is actually you say bubble then you say before then you set the content to zero because we don't want any content but you want to of course to appear something some style so position is absolute because we have to set it to the bottom and to from the left let's say let's make 25 pixels the bottom depends how high the height is of this whole triangle let's say 30 pixels just to make a little look a little better I am going to put this here in a separate line like this and now I am going to create a border okay we need a triangle looking down that means we need the top one so it says we make border top I am going to say 30 pixels solid and I give it the same color of course as the bubble and the border right I am going to give 20 pixels solid and transparent because we don't want them to appear really border left 20 pixels solid transparent and let's see how it looks like first we don't see anything that might be because I am not like this sorry let's make minus here and here it is so this is actually basically how it works of course if you want now for example one on the top then you would one moment create not the bottom border tops the border bottom you would then of course right here and if you want one on the left you would appear then and you would set the top and the bottom border to transparent it might take a while until you figure it out but I am sure you will do and thank you for watching and the next one lesson we look at some different forms our next shape will be a ribbon a ribbon actually just contains a rectangle and on the left bottom side a triangle and on the right bottom side a triangle and we will just appear half of each triangle there are of course other ways to do that but let me show you by that way how simple it is actually first we are going to create a div container with a class called ribbon then we style the ribbon or ribbon body first by giving it a height and a width let's say 300 pixels and height let's say 150 let's say 150 and height 300 pixels we set a margin again 150 pixels auto to center it and background color of green and position relative alright just see what is happening here we have seen our browser this is just normal rectangle and here we will now create our first triangle and then our second triangle by using the pseudo class before and after ribbon as we got our left one so content again nothing and position again absolute then where we want to put it is on the bottom I make here minus 30 pixels now and left zero then our border actually so we want the left one so it means border left 30 pixels what width do we have 150 so it actually makes sense to make it 75 and the half 25 is 35 so we make 75 pixels solid and green and border top will be then our so it is transparent one and border bottom as well alright let's look quickly how it looks like almost there is a little set here that is just deleted by making minus 30 for example yeah that fits perfectly alright and then we are going to create the right side ribbon with after pseudo class content again the position again absolute bottom is actually the same 30 pixels but instead of left we use the right because we want the right side of our ribbon then we need the border right not the border left here the size is the same solid green and border top 30 pixels solid transparent border bottom 30 pixels solid transparent and here we go we have our ribbon hope you liked it and the next one we are going to look in another shape see you then shape is an octagon an octagon is a shape with 8 corners and actually it's pretty easy to do so to like the rest of our shapes but just for better understanding and to be not leave anyone confused here I'm going to show you by a basic example how it actually was how this form is set together and I'm going to do that by creating again a div tag and give the class let's just go out and now I'm going to give this one some style let's say with 40 pixels and height going to leave 0 and then I'm going to create a border border top 30 pixels blue a border right 30 pixels solid green and a border left 30 pixels solid green then I'm going just to make this quickly a little bit from the top and center it so more than 50 pixels in auto then I'm going to load this in our browser and what do you see here actually is just the bottom of our octagon we want now our top it's nothing but just exchange that from border bottom top to border bottom and you see it switched and we have that top of our octagon and between that is actually just a rectangle that's all of course we want to create it like this we will use before and after pseudo classes again of course so I'm going to delete this here and this here because we are specifically creating a cube and hide 800 pixels too and background blue okay sorry for that and position relative now I'm going to use the before pseudo class I said like we did before with the when we just used the diff class without before the height to 0 and we go to the width of 40 pixels and of course we set again the content and we set also the position to absolute and now we are going to create the borders so border bottom 30 pixels solid blue because this is the one we want to appear and the border right it's also 30 pixels solid and this one we are going to set transparent and the border left 30 pixels solid transparent alright let's just look quickly for nothing one second now we have of course also to set the position relative I said I have to set of course also to after one take after the same thing height 0 width 40 pixels content empty here then the position again absolute and the border top this time 30 30 pixels solid blue and the border rounded so left and right transparent and here we have to set a margin 70 pixels and let's see doesn't appear yet this is cause a little mistake here just set it white and here we have our article pretty simple okay let's see what we create in our next lesson but I'm definitely sure it will be another cool shape we will learn how to create a special shape in CSS we will create a heart and to create a heart you might think it's like set from half circles and triangles something like that but it's actually pretty simple to show you and demonstrate that again I'm creating a div with a class heart and now I'm going to say with of course heart selecting first with I'm going to 70 pixels and height 115 pixels height of course alright then the background the blue let me show you what I did just basically just this rectangle here I'm going to center it and make a little bit space from the top too and then I'm going to say a border radius and I'm going to set just the top border so the top left and top right border and the rest I'm going to set to zero which made it look like this now here and now imagine this turn we use here just transform rotate 45 degrees or minus 45 in this case now I'm going to reload and you see we now just would create another one here and you would have a perfect heart shape now again we are not going to create here two this and then lay them over each other and something like that we just use here again the before and the after pseudo element so to create that to do that again I'm just adding now here before and I also create knowing your heart after right in the same line let me put this here I'm going to add here position absolute and content again of course zero and before we do all that I'm going to set our heart itself to position relative alright this we can just leave like that we right now here left 70 pixels and top zero this is right almost right let's look looks like we just basically still the same everything here and now I'm going to just select the after on heart after because you want this one a little bit different and I'm going to say left zero and then we transform it to and say rotate 45 degrees and reload see already it's like this here now I just have to change the origin to transform origin from what angle from what origin it actually rotates so I do this with transform origin and I say here 100% 100% see it's like here and of course I have to do this here too transform origin zero 100% and we have our heart perfect let's just now create because the origin we blew of course let's make it red and we have our red heart this will be all about shapes so far and in the next lesson on next chapter we're going to talk about animations transitions and so on we finally now put into practice what we learned before so we are going to create a little bear illustration with pure CSS and let's right away jump into it and start with the container we will center the whole bear illustration or this bear head within our windows so I'm going to use a container then I'm going to create a class with the with the class head I'm going to nest all the other elements now within the head div class and I'm the first element I'm going to add is the ears and I want them twice of course and I'm going to style the container first and I position it absolute because I want to use left to right left 50% top 50% transform translate minus 50% minus 50% that's all about our container now I'm going to start ahead I want the head to be 300 pixels wide and 200 pixels height I give it a background of barely a width and I'm going to set the border radius to 100% and the position relative because I want to position absolute the child elements and then I want to add a border solid black or let's just this code here then I'm going to open this browser and we have a nice shape of the head already and now we are going to style the ears the ears should be wide 50 pixels height 50 pixels so nice equals circle border radius 100% position absolute and border 5 pixels solid and this black here open in the browser yep just of course adding the background color use here barely width as well good I will of all both ears I want to set the Z index to minus 1 because I want it behind the head there it is now I'm going to position each one of these ears so I'm using here the child selector the pseudo selector child and I'm going to select the first child which is the first ear I'm going to set it to top 10 pixels and the right ear I'm going to set top 10 pixels as well and right 0 now we have our ears here now we are going to add the eyes the class I twice so I'm going to select the class I and I'm going to say with 10, 15 pixels height 25 pixels background going to make it completely black I want a border radius 100% and quickly let's have a look looks good now I'm going to position the eyes so using the child this is now not the first child of course it is the third child because it's the third child but a lot of our diff container of the class have so this is the third child this is the fourth child so I'm going to use 3 and I'm going to set it to top 80 pixels left 80 pixels of course I have to set the eyes position absolute and then we will let the browser there is our left eye now we do the right eye for top 80 pixels and right 80 pixels see that looks pretty good so let's create our nose so nose nose should be white 80 pixels hide 60 pixels border radius 100% background black and position absolute as well going to say top 60% and left 50% because we want it of course centered in the middle so I'm going to use transform and then translate x because I centered it in the x axis so minus 50% and let's open that it's a little bit big let's make it smaller let's say 60 and 40 yeah that's better and now we are going to create something something like a mouth it is not really a mouth it's just some line underneath the nose that gives it a nice kind of style but I just call it mouth actually I have no idea how you call it so this mouth I did it of course now in this style of course I have to add this here so we have we have already our mouth now add of course the style excuse me a little bit confused here and I'm going to set this width width of 10 pixels the height of 20 pixels let's make it 30 and a background of black again then left 50% and bottom 0 that should do that actually of course I have to set it to absolute otherwise we couldn't position it and we of course have to set it to absolute so I'm going to use transform here translate x again that's 50% and it's not high enough so let's make it let's make it 40 this looks actually alright actually it's better if you set the nose a little bit lower I'm not so satisfied with it let's set it let's set the nose not to 65% maybe exactly it looks a little better and the eyes a little bit lower as well let's see 90 90 that looks much better this is our bare illustration actually you can do much more complexer stuff and I hope you maybe will a little bit try yourself how to do that stuff and find your own little illustrations and create some cool CSS art we will talk now about transitions and the best way to explain your transitions is to show you that on a simple example there will be just a button on the center of our screen where we are going to change the background color and the color of the text a transition itself describes just how long a particular state change should take and how it should actually change we take for example the change of a background color whatever element in our screen or our HTML and the transition says what particular it should change so the background color how long it should change should it have a delay until it changes or should it also have a specific way how to change should it ease in, ease out and custom made how long it should take and this is actually what a transition is and I'm going now to show you that on this example so I have here our HTML document and I'm going to create now the container first so a diff container within the diff container I'm going to nest a or anchor element and this says click me now I'm going to center this container by using position absolute top 50% left 50% transform translate minus 50 minus 50 before that I'm going to reset the HTML and body styles of the browser by setting the margin to 0 and the padding to 0 now I'm going to select the atek and I give it some styles to make it a button I'm going to say font size 24 pixels and then I'm going to say padding 8 pixels and 24 pixels and I give it a background color orange orange red orange red and also a color white and I'm going to change the font family to Helvetica also I want to change the text transform to uppercase and I want to delete any text text decoration so the underline disappears it should be all now let's see what it looks like in our browser so I'm going to reload that looks pretty good to me and now we add finally our transition and I'm going to show you now first a long hand way so this just needs this transition and the first thing we will enter now is the transition property so which property we are going to change or what we want to change this would be the background color here then the next one will be the transition duration how long should it take let's say 3 seconds everything after that will be optional it would definitely work now right this but we can now add a transition delay 500 milliseconds and we can add a transition timing function which means the way how it changes so standard or the default value would be ease then there are linear ease in ease out and what we will talk about later cubic easier for now I'm using ease in which kind of fades slowly in or changes elements slowly in and this should be all and now I'm opening the browser again and reload of course nothing happens yet because we have to add our change here anchor with a hover suit element and we want to change the background color so let's change it to green now open the browser again and reload let's hover it and you see it slowly changes to green with a little delay of this 500 milliseconds you can add you can use here for the for the transition duration milliseconds or seconds of course also for the delay and if you want to make now a second transition we just don't want to change just the background color you want for example also to change the color of the font text then we are just adding a comma behind it and saying now the second property this would be color and we want to change it with two seconds and with a 200 millisecond delay and we say is out here now I'm going to change that also color black for example opening the browser reload and hover it and you see it's going to change the transition works now I showed you the long hand version I'm going to show you also the short hand version even it's really more useful to use that long hand version it just looks prettier and faster but especially in the beginning it may help to use maybe the short hand version so instead of making this transition and adding then all this we want all this options we just can transition property now we add the property then we transition duration transition delay and transition timing function and see it's in and it would work perfectly the same of course now I told you there is another timing function that we can use which is called cubic bezier with cubic bezier you can actually adjust yourself how slowly it goes in and how it ends or how this whole transition appears to give you a better picture of that there is a help there is a website it's called cubic bezier.com where you can actually look how it looks like by adjusting this little handle here you can perfectly create your own little transitions now if you click on go you see how it looks like and let's do it like this here you see this it's pretty interesting and on the top you see then always the settings you use here with this little graphic this thing let's do it like this maybe yeah you have a little delay here let's use this one so we need to copy this then open our editor and add this values here let's save see how it looks like ok you don't see the dwellers in here you maybe want to make another example also to show you better how everything how it works to practice it so let's create quickly our round object let's say I make here a diff and let's call it ball now I'm going to delete all the stuff here let's say container ball we'll have a width of let's say 50 pixels and a height of 50 pixels and background color red and the border radius of 100% let's see now we have a little ball here and we want it to move a little bit to the right or left so first of all we need to add a transition we want to change the transform property and we want to have them say 0.75 seconds and we'll add 200 millisecond delay and we say ease in now I'm going to add this let's say how are you too and then I say transform translate x 200 pixels let's see how it looks like and let's open the browser and see the changes now you see moves to the right or what we also could do is changing maybe the the transform actually right we leave that like this we just instead of translate we use scale and let's say we say 2 so reload let's see how it looks like if we use it goes a little faster of course if we use linear it's pretty straight there's now slowly or something coming in let's just right away use our transition so let's leave ease in it slowly starts and goes a little bit faster I think that's fine like this so you see how transitions work and you can play around with it a little bit and I'm sure we are going to use it one or another project later and the next lesson first we will talk about animations they're actually pretty similar to transitions and you write them kind of in the same form and I hope to see you then this lesson we talked about CSS transitions now we are going to talk about CSS animations to show you that animations are not that hard and actually especially how you write them or declare them pretty similar to transitions I'm going to show you that on a simple example again we will do a couple of scandals, don't worry but first of all we are going to create a loading animation for that we need some loading cycle first of all I declare write again an HTML div tag with the class of container which we are going to center and with then I'm going to nest a div class with the a div tag with the class cycle now I'm going to center the container again position absolute left 50% top 50% transform, translate minus 50% minus 50% then I'm going to create a recycle I'm going to say with 50 pixels hide 50 pixels because you want a nice round shape and I'm going to say border 10 pixels, solid and I'm going to use the slight black here and of them I'm going to say border radius 100% then what it looks like at the browser, yes looks not there I want to have kind of an open border so I'm going to say border top color transparent alert yes exactly how I want it and now we are going to add the animation but before we can add actually the animation itself we're going to have to create some keyframes we are doing that by saying keyframes giving this keyframes a name we are going to call it loading and now we need steps now you could do something like from and to but what if you want to do several steps like 3 or 4 or whatever how many you want to we use for that percentages 0% and I'm going to say transform translate not translate I'm going to rotate 0 degrees and 100% transform rotate 360 degrees and this should be our keyframes and those keyframes we are going to add now in our cycle class with the animation now I'm going to show you exactly the same like in our transition class or our transition episode I make this longhand first because this is the most practical and most convenient way to do that so I'm going to add as first animation name or the keyframes name which is loading then I'm going to add the duration the animation duration is how long should it take to fulfill this one animation from 0 to 100% I'm going to say 1 second then you need animation timing function and for that we are just saying linear now you don't want any steps you don't want to ease it in start slowly and go fast then then we could add an animation delay which we just leave out now because we don't need it and I'm going to say animation iteration count infinite because I want it unlimited infinite animation so now I'm going to open the browser and we see what it looks like and we have a nice move animation the cycle 360 degrees infinite now let's play around a little bit and let's do in the next episode something else a little bit because there is actually much more what you can do animations there some other properties we can add other options we can add so I hope to see you in the next episode lesson we started talking about CSS animations and now we want to practice this actually on a very good example we are going to create a walking cycle we are going to create animation with some kind of sprite sheet I hope everyone of you or at least some of you know this adventure point click game monkey island because we are going to use guybrush 3 puts character and we want to make it walk over to our screen and to do that first of all I'm going to show you where to get this sprite sheet it comes from this nice website here and you can just I don't know, copy that I will link it in our notes of course the URL and just use that URL then form a creating animation so this is a basic walking cycle of guybrush 3 put and we are going to create it now first of all we need of course some div which holds it but first I'm going to create again a container and then I'm creating a div container or a div tag with the class guybrush and first of all the container gets centered again position absolute left 50% top 50% and then transform translate transform translate minus 50% minus 50% and now we are going to style our guybrush class first of all we need of course a background and this will be coming from our URL I gave here and we are going to say zero zero no repeat so we start with the very left picture then I'm going to say with 100 pixel and height 148 pixels so this is the optimal height actually to see really the whole frame or the whole sprite of guybrush 3 put then I'm going to say actually nothing else let's just look what it looks like in the browser reload yeah we have our guybrush 3 put in the center of our screen that's actually perfect and now we want to animate it well we know this picture this sprite sheet we have here is like length though we have this one two three four five six sprites and what we will do now is animate each one like the first one second one fifth one, sixth one and so on and each sprite actually if we just say now here instead of zero we say now minus 100 pixel let's just reload then you see it does have the second frame we just got the second frame so we just move our background so 200 reload the next one 300 reload the next one okay we have here a little shoe can adjust it a little bit then when we make the actual animation so let's put it back to zero and now I'm going to create first of all of course our keyframes I'm going to write them above this keyframes keyframes and I'm going to call it guy brush walk and I'm going from 0% background position 0 0 100% background position and this I already tried it of course will be the best one if you use 612 pixels and then 0 and now I'm going to add this in our our class here in our guy brush class with animation and I always use the name and one second should be enough and I'm going to say linear first and infinite so let's see what it looks like in our browser now see of course we don't want it like this looks though interesting but we don't want it like this so what we are going to do instead of linear we are using something called steps so we just divide frames into steps the animation should do and we have 6 frames so I'm going to use 6 steps I'm going to save that and open our browser and reload and here we go we see our animation guy brush looks very good now I forgot something in the previous lesson because I wanted to show you the short hand I just showed you the long hand notation but I want also to show you the short hand version of animation so I will just do that now here even I recommend you not to use it so it's really used just here the long hand version you can of course say animation name that would be guy brush walk here then animation duration animation timing function then delay and iteration count but like I said the best would be if you learn right away the long hand version let me start now with animations our first animation will be a loading spinner I will show you how to create simple animations on that simple example let's jump right into it and the first thing we are going to do is giving the body a background because I'm going to give the loading spinner the color white so I'm going to say background fire brick then I'm going to create a div and give this the class name spinner that's all we don't need any content and then I'm also going to reset the browser settings for marching panning zero and the spinner needs a width and a height, so I'm giving 25 pixels 25 pixels needs a color I know it actually doesn't need a color the border just needs a color so let's say border I'm going to give 6 pixels of wood and solid and we're going to make it white then I'm going to say absolute because I want absolute position directly in the center of our screen so I'm going to set top 50% and left 50% and then I'm going to make actually the top border the color of it transparent then of course I also have to make the border radius 100% now I'm going to look first in the browser what it looks like so I'm going to reload and this here is our loading spinner and now we are going to create our keyframe first of all for animation you need keyframes a keyframe you declare by design head and say keyframes and then you give the keyframes a name let's say I call it spin then you just use normal curly brackets here and then you say where to start and where to begin you can make now several steps you can say 0% this and then something happens then you can say 10%, 20% how many I'm just going to use 0% and 100% like I said the steps you can choose yourself you can add animations you can just make how many steps you also want depends on you and now I'm going to say transform rotate 0° and here I'm going to say transform rotate 360° so it makes completely one way around and that's our spin keyframe and now we are going to add this in our spinner with animation you see already just type animation there are different things here we can declare a delay and everything else but we won't use everything now I'm just going to show you later what you can do with the other of the options in animation for now I'm just giving it a name for spin how long, one second I want to make it infinite and I'm going to make this whole animation linear that's all now I'm going to open the browser and reload and you see the animation goes this is our basic loading circle of course we can now adjust a little bit let's say make it here 500 milliseconds maybe a little bit faster see it's pretty fast and there are different other ways how to set up your animation with different options and so on but I'm going to show you different examples for each of these options so you see better what works and how does it look like next episode where we talk about gradients gradients are a pretty cool thing to create some really nice effects button nice make a nice button look and give a kind of a three-dimensional effect you also could make some kind of stuff like patterns and much more I'm going to show you this gradients again on some simple example we start with linear gradients that's the easiest way and kind of default value first so I'm going to create a diff container with a glass of box and I want that four times and the first box I'm going to give a second class called default then I'm going to style the box glass with a width of let's say 350 pixels and a height of 150 pixels and a margin of 100 pixels on it's 50 pixels and also then I'm going to create the default glass and here we are creating our gradient we do this with background and before I start creating this gradient a short mention about the browser support actually the browser support is extremely good so you see here you can take a look on kenayuse.com and you see it's pre-supported by every browser except maybe opramino mini so the basic gradients of course there's some other stuff which is not that great support but the more stuff is really good supported so we're good to go anyways you make sure you should use sometimes some browser prefixes and the best thing is anyways to use something like an auto prefixer that automatically prefixes or writes a prefix as he says for this here I'm going to use a webkit prefix and say now here linear gradient and I or this is the background or the linear gradient property expects now here two arguments two colors the start color and the end color to which should go there gradient you can use here white and a second form black and now I'm going to open the browser and reload and you see here a little box and nice gradient from white to black now we can switch this shortly here to see also works of course the other way around so you're going to see it goes from from black to white but that is the easier way just to return that here and there's a easier way to do that and I'm going to show this with the next box so give it a second class called horizontal so of course I should write this class then too horizontal and here I write the same the background using the webkit prefix the gradient I'm going to go again from white to black opening the browser quickly see here's the second one and instead of changing now the colors I'm just going to say here I'm going to start from the bottom now opening the browser again reload and you see it starts now from the bottom so white starts from the bottom now and what I can do here too is saying left and you see our gradient starts now from the left to the right of course the same works with right reload quickly the next thing I'm going to show you is how you add other colors of course you just you don't have to use of course just one color and we call it just vertical color so I'm going to make it vertically again the same background and webkit gradient now say here bottom and we use here red and then yellow see how that looks like and pretty nice from yellow it goes to red of course you can also add multiple colors not just one color so let's do this with this here of this diff container I'm going to say multiple multiple background webkit gradient and now I'm going to say all red yellow green and blue let's open this in the browser and see what it looks like see it goes from red to yellow to green to blue you can add as many colors as you want to now I'm creating another diff one I'm going to show you one more thing I'm going to call this here position because you can change actually position of your gradients so for example where should red start and where should yellow start and so on so I'm going to say position background webkit gradient going to say here from the left so red, yellow and a green one and see what it looks like looks like this and now I'm going to manipulate the yellow where it should start let's say 20% open this reload you see it starts now much earlier of course you can also use pixels so let's say we have 50 pixels width so let's say 300 pixels reload see it starts now here 300 pixels you can do that of course also with auto colors let's say red 20 pixels reload if you say now here of course like let's say 200 pixels you have a much larger red here section if you say now here yellow starts much earlier then something like this will happen because there will no gradient of course you see you can do a lot of stuff with this linear gradient already and play just a little bit around with it and get familiar with the syntax and everything and in the next episode I'm going to show you how to create radial gradients let's come now to radial gradients we will do exactly the same as we did in linear gradients so I'm going to create a diff container with the class box and extra class default now I'm going to define the box class give it a width 300 pixels and a height of 200 pixels I'm going to say margin 25 pixels now I'm going to create a default class and I'm going to say background webkit prefix and radial gradient like in the previous episode where we talked about linear gradients we also can need two colors to start and stop so I'm going to use white again and then black now I'm going to open the browser and see what it looks like and you see we have here a radial gradient it is though a little bit stretched you can actually kind of change that with a special keyword here and to do that I'm just going to create another one diff box this we call directly circle and now I'm just going to define the circle class background webkit radial gradient I'm just going to do exactly the same from white to black but in the beginning now we are going to add our keyword and the keyword is circle empty surface semicolon and slow this in the browser now you see it actually has perfect circle shape on our gradient also it's a little bit overlapping because the shape of our rectangle here but we can change that too by saying contain circle refresh now the browser you see it stops actually at the closest borders of our parent here our element or html element or rectangle we can change also this kind of behavior by saying farthest farthest side now I'm going to reload okay that doesn't load probably say closest side which is actually opposite I forgot of course contain has to build in now it works okay and now we set here farthest side and you see it stretches now to this border here because this is the farthest most far away but for our purpose now contain is actually perfect here we set to contain and you see we have our little circle here now I'm going to create another one a narrative container and give it this time a class called ball and I'm going to give it a class called colors first I'm going to define the class ball 150 pixels height 250 pixels much in the same 25 pixels and auto and I'm going to say more radius 100% so we have a perfect little circle and then I'm going to define our colors class I'm going to say background what kids and radio gradient I'm going to say it goes from from red fire brick load is now browser you see we have a little circle here you don't see much the difference of the colors let's say we go from red to orange and now you see it has a nice gradient here and we can add the same kind of options here like we previously did in the linear one so I can say here as well bottom going to reload it you see it starts from the bottom I can of course also define here starting points and end points so let's say here 100 pixels and do if you remember what we did in the previous one we set that actually in lower than what red one starts so we actually don't have any gradient let's say 50 pixels and you see we have this kind of shape here just a little I don't know what it is like kind of mountain here and then this background pretty nice you could do some nice things here you can say now here instead of orange I'm going to use white see what it looks like and you have a nice little shape actually here alright let's do another one and this time we do again add the container we call it we use again ball and I'm going to say multiple multiple colors multiple background webkit radio gradient I'm going to say now from the left we start and I'm going to say go from red to yellow to green to blue to black what it looks like here you have this nice interesting created shape here this radiant because it's so nice let's do another one a little bit more complex one say diff class complex first of course we say ball and then complex this time let's make a box so let's create a complex class background webkit radio gradient we are going to start from 40% 50% I'm going to say circle and I want the closest site and I want it from white to black 25% starting then again white 75% red starts and then again black let's load this in a browser and see we have a nice little kind of a donut shape and a little circle and you can see you can do all kind of shapes here you can just just experiment and play around with it but we are still going to create a little I don't think we are going to create a background with our gradient because there is something special about it I will show you so I'm going to say here of course if you want to make a background we would do that in our body because we want it for the whole page of course so I'm going to say background webkit for the linear gradient here and I'm going to say I want to start from the top and I want a light gray darker gray let's say here and I'm going to load this done as you see here we have a nice gradient now on some browsers it can come to problems actually so you should add here background peat no peat and background attachment fixed because in some browsers it will actually repeat this kind of gradient so it means like you have just always this short little gradient and you have some kind of weird shape design pattern then this will just you make sure that you have very perfect background with the knowledge of our previous lessons it shouldn't be a problem to create the diagonal gradients that works pretty easy by showing you actually again like creating a diffcontainer giving it a default value I'm going to say again box with pixels 300 pixels margin 35 pixels auto give it a default class background webkit linear gradient and all we are going to do is using the first option that we write into our arguments is just saying how many degrees 45 degrees going from white and from black to white and again to black and let's look at the browser what it looks like and you see it starts diagonal and we can change that of course let's play on a little bit 15 degrees with more let's say we have now 90 and of course we are again on this way here and let's say 12 you see it's really easy to make diagonal gradients create finally now our first pattern and our first pattern will be CSS blueprint pattern which is just a blue background and a white grid of it let's get started we don't need any further HTML elements because we will apply everything directly to our body so I'm going to say body background color and set it to this blue we want to use going to open this quickly in a browser so you see what that blue looks like then I'm going to attach the background image and here is where we are going to use the linear gradients I just leave here the web kit actually so otherwise it wouldn't work the browser support is anyways here so we don't need really the web kit transparent to pixel then we start a new line and do exactly the same gradient just this time we were at 90 degrees but again white to pixels and transparent to pixels then the line again linear gradient this time we use RGBA as a color 255 255 and as opacity 0.3 after the presets we add one pixel and transparent one pixel then I can come up and another line linear gradient 90 degrees again then we say again RGBA make it here nice black and opacity 0.3 then one pixel and we set again transparent one pixel now I'm going to add the background size 100 pixel 100 pixel calmer 20 pixels 20 pixels and again 20 pixels 20 pixels this will give us this grid system actually and the background position minus 2 pixels minus 2 pixels minus 2 pixels minus 2 pixels minus 1 pixel minus 1 pixel and again 1 minus 1 minus 1 now I'm going to load in the browser let's see what it looks like and we have our blueprint background here now I wanted to show you something else and I'm going to show you that actually in the next episode I think this is better this will be another background and I will also apply to it how to use gradients on text and fonts let's get started with CSS clipping to show you CSS clipping I have here a div class with BG background and I'm going to give this class some background image I'm going to use here unsplash dot it again you just can't copy this URL here and then paste it in that was the wrong one and then replace this with 250 250 so we have even sides so each side is same size and then I'm going to say with 250 pixels height 250 pixels let's look in our browser show it repeat of course class is right here it is here's our picture I'm quickly going to reset our browser settings because I see there's a little margin here let's reload the browser now it's perfectly in the corner now I'm just going to position this thing here position absolute left 50% top 50% and transform translate minus 50 let's reload and there it is perfectly centered now we are going to use a clipping path and a great help for that is the page clippy or this tool clippy which you find on this URL here www.benethafili.com clippy where you have some predefined shapes and clip paths you can just click on whatever you want to let's take this heptagon here copy stuff here and just paste it in and save and now we open our browser page and here we go we see how the clipping works and we have a beautiful nice shape let's try to do something else let's take maybe a star here same way we just copy that paste it and reload and again we have our star here because it's a random picture we can just reload and get a different picture looks pretty nice I would say of course you can make your own clip paths you just actually define this points here and you see also if you just move this little circle here which value is changing so you could just create your own little clip paths here and make some art because css provides us with this css pseudo class we can check the html input field with the type of radio button or check box which state we have checked between two states so checked or not checked which gives us the opportunity to create something like a full screen slider with pure css without any help of javascript that's pretty cool I think and I'm going to show you how to do that and so we're going to create a full screen slider and we do that by creating a new index.html file I already put in the folder here and normalize css which will just reset the preset styles of the proleter looks like this you can just batch that online if you google normalize.css and you just copy then the content and create a new file and paste it and say that then I created a styles.css where we will save our styles specifically for our slider everything on the page and index.html which holds our slider of course so I'm going to say html and we want of course a header and we want the body tag not a header I mean of course we want a head not a header and ok now we'll do that of course here let's just create like this and let me look better like this then I'm going to create a title a meta tag and a link actually we need two links because we have our normalize and our normal styles.css so normalize.css and here our styles.css the title I'm going to name css fullscreen slider and a meta tag just for health trusted information UTS it's then I'm going to create a container first this will be a dupe tag the class container and with an arrow container I'm going to create a header and with a header I'm going to create four labels these four labels will help us navigate or set our state for our input fields for our radio buttons because if you click on a label and it's linked to the input fields with this for attribute you actually just check that radio button or you set it so now I'm just leaving it blank and just give here each one a container so let's say always slide and then a number and each one will have a number of course two, three, four then underneath the header right away I'm going to create an input field which will be of the type radio and right afterwards I'm going to create a section tag and I will do that four times so I'm going to do that by saying input first I need this presence here input and I need a section then I'm going to say times four and you see that does it for us now I'm going to select all these types here by shift command of L and I'm going to say radio then I'm also going to add ID this ID will link the input field or the input tag to our label so I'm going to call this here slide then a number one and then I call it trigger because the triggers are actually slides and now I'm going to say here two, three four and our sections before we actually do our sections I'm going to add the same one in our four attributes here this is important so otherwise we can trigger it of course slide one trigger and here we are going to say two three four and now we're going to go to the section fields each section will have a class of slides so I'm going to select this we do that again by shift command in L now I've selected all the queries let's do it like this shift command L and then I'm going to say class slide then specifically also I'm going to add each one has of course own class so with a number so say class one has slide one two three four section we are going to add content or this the content which should be like on our overlay like some text some headline so I'm going to add a headline there by best would be like selecting all of this again shift command L then a little bit space and then I'm going to add a headline let's say a tree headline should be enough it doesn't do that so let's do it manually and say headline number then we give here number two three four now we have all our actually HTML we are going to need let's see how it looks like in our browser opening the browser and zero around of course one second okay now reload and you see our input fields here our input tags our radio buttons and click now on slide here it's going to select these because I told you they are linked to them via the for attribute now I'm going to add some style so let me open the styles that CSS first of all some global style so HTML and body I'm going to set both with and height 200% and margin and padding zero we don't need actually because we use our normalize then I'm going to use the container click and I'm going to add here it's same like with and height 100% and set the position to relative and overflow to hit give it a background let's say some dark gray I give it a color I'm going to set it to white text line let me make it a little darker let's say just here free now I'm going to style a header the header will have a background too I'm going to make this a little darker let's make it completely black let's make it like this and the box shadow of 0.5 4 AM 1 AM and black then I'm going to say precision absolute now positioning it on top 0 left 0 and give it a width of 100% and I'm using a set index because I want all this to have it on top so let's say 1000 then we go to label text and give it a color I'm going to use here white or let's say a lighter gray let's say a more light gray and the cursor should be the pointer so you see actually we are on a link this play will be inline block next to each other of course and I'm going to say set a line height to say 3.75 and font size to 7 AM font weight to bold and padding to 1, 0 and 1 AM then I'm going to style a little with the hover effect I'm going to change the background for lights let's see how it looks like in our browser in the browser we have sender everything we have here where we later have our slides and now we can select each radio button here it looks fine so far from me and the rest I'm going to do in part 2 so I hope to see you there and you hope you liked it welcome to the second part of our CSS full screen sliver in the first part we created the html structure and I want you to please in each input field here input radio button the name attribute and the content slides for each of our input fields please this is important so we can select each slide separately not this so it doesn't keeps the state always on because if we sleeve that out so it will be always selected and we can actually change the state between them so please add that and we edit the styles of course up to the hovering effect of our labels and repeat again our navigation contains just label elements because with the full attribute and the idea of our input fields we can link them to each other and can so change the state by just clicking on the label now I'm going to continue here where we stopped by adding the styles to our slide I'm going to say with 100% and height 100% then I'm going to set the precision to absolute I'm going to set the top 0 and left 100% later we are going to set it back to 0 to make this effect of sliding now the set index I'm going to set it to 10 that padding to 8, em, 1 em and 0 and the background something that's black here and the background position to 50% 50% and the background size to cover and at transition we're going to say left 0 seconds 0.75 seconds delay and now I'm going to add to each slide our background image I'm going to do that by using external page called unsplash.it I'm going to show you quickly what it looks like unsplash.it and actually it just gives you placeholder images randomly from the web you can use you can set after the slashes here always the size on your pictures you can also just get randomly in pictures by just adding this this question mark random here and you can also greyscale it by adding a view between it and you can also use you're getting a list here you get an adjacent object back and then what we are going to use is a specific image and we will use this one here we will do that now by slide 1 image URL and I'm going just to copy this just go here and take this here copy this in here I'm going this we leave here but I am changing the sizes so they won't be so pixeled say 800 and now I'm going to copy this whole thing here 3 times and say here 1, 2 and 3 and of course I'm going to change the numbers here too 3 4 and then I'm going to select our slides we will use now our attribute selector remember we can just there is here id and I'm going to select the first one each id which has slide the string here in the beginning this will select all our slide sections and our input fields now I'm going to add the attributes added the pseudo class checked so we want it checked and add then point slide the class and setting the left back to 0 remember we set it previously to 100% now we are going to set it back to 0 so it gives the slide effect set in the 100 and the transition of course of left 5 seconds and is out now I'm going to show you how it looks like and our browser by reloading the page let's see we have our nice full screen pure CSS slider now just let's add a little bit of transition cure animation for h1 here by saying slide h3 and setting the opacity to 0 and transform it translate y to 100% this will make it like slide up to our animation then let's say transition left not left, we want to transform and 0.5 seconds 0.5 seconds and then we are going to change the opacity 0.5 seconds now I'm going to select this the same way with the attribute selector ID first everyone with this slide on the first checked plus slide and h3 take of course now I'm setting back the opacity to 1 transform translate y back to 0 and transition 0.5 seconds 0.5 seconds 0.5 seconds that's actually all let's see how it looks like reload now you see it has a really nice effect when we change the slides this is all about our full screen slider I hope you liked it and you see that you don't always need javascript to create a slider if it's much easier to do it with css it's actually not that much code and I'll see you on the next list the second project in this project we will create a little css terminal and we are going to start right away with the cancel body so I'm going to create a div tag cancel I'm going to nest within it a navbar and a screen element both divs so navbar screen within the navbar I'm going to add 3 buttons will be both, or 3 will be divs so I'm going to give them all a button class say a times 3 then each one gets a separate class so I'm just going to score and then I'm just going to say red and this one I'm going to give orange and this one green to set the colors later and within the screen I'm going to add another div tag with the class first line and within the first line I'm going to add some text I say home pc and then till the space hello world another span with the class cursor and this is actually all about our html support now we are going to add some style so we start with the cancel element and I give the width 500 pixels now hide 300 pixels background slightly not that dark black and position relative and margin to center it let's say from the top one pixels and then auto and then I want to add border radius to the top and left and the top right border top left radius 10 pixels border top right radius 10 pixels and this I'm going to open in the browser and reload it and we see here our window now I'm going to add the nav bar so the top value three buttons will be placed going to do it by nav bar and going to say position absolute top zero left zero width of 100% background I give it a light gray and a height of 25 pixels I say here again the same I'll give it a border top left radius 8 pixels because otherwise a little bit overlapping and you see a little bit black so you can border top right radius of 8 pixels now I'm going to open in the browser again reload you see our macro now I'm going to add the styles for buttons so the button class each button will have a height of 10 pixels and the position will be absolute as well I'm going to say top 50% then transform translate y minus 50% to center perfectly in the middle and from the left I just want 10 pixels then I'm going to say border radius 100% let's open the browser to see how it looks like and now we don't see it yet because I didn't give it any color so let's add quickly a color by selecting the button red and saying background red we will use fire brick now open and we see the first button now I'm going to add the orange one setting the background to orange and I'm going to say left 28 pixels open the browser and see what it looks like and I'm going to see how this looks good now the last button green background green and left 46 pixels let's open that looks good so we have all the buttons now I'm going to add the screen or let's say style the screen so the screen all I have to push that text style position relative top 30 pixels let's see if that is looking right then left 10 pixels that should be fine now I'm giving the text a little bit style so I'm going to I'll start at first the line the color white text a little bit better alright so now I'm going to add the plank effect so we also need a little bit of animation at least so I'm going to select our cursor and I'm going to say border right one pixel solid see if you see it here here is the cursor now a little bit of march into the left pixels looks good now I'm going to create keyframes animations I'm calling it blink as a 0% I'm going to say border color transparent 100% border color white now I'm going to add this our cursor so I say animation blink and then say 0.75 seconds should be alright I'm going to say infinite and open the browser see what it looks like looks good that's how we create a little CSS terminal now we could add of course other lines and add the cursor and the end and do a little bit of JavaScript but I'll leave that to you that should be enough for now so I'm going to see you see in our first how to I'm going to show you how to customize your select fields or your select drop down input fields and for that I'm going to create first a diff container and with the container I'm going to create another diff and give it the name give it the class drop down and if this drop within this drop down element I'm giving the select field and some options and I'm going to give it four options I'm going to give the name of this select field again job and id jobs and now I'm giving it some jobs adding to the options let's say your web developer maybe something like engineer cashier content so these are our jobs I'm going to select the container first and say your margin is 0 auto with 2% here yeah, like this or yeah, let's select it a little bit so we can see that better and now I'm going to style or try to style the select field the thing is select fields have some kind of problem or some kind of reason to have some issues to style them because they have preset styles you can't just get rid of and you will additionally have problems if you can get rid of them with cross browser support so on internet explorer I especially make some problems there but I'm going to show you some workarounds and some fixes that will help you to solve these problems so first of all let's try to give it some style in general for example if you try to give your select field some padding like 200 pixels here nothing will happen so because of our preset default styles here so what you can do here is adding something called appearance did I write it right appearance like this and set it to none nothing will happen here because you have to add some prefixes here for each browser capability so I'm going to add here the webkit appearance and set it to none too and you see all the styles disappear except the border actually and for Firefox you're going to add the master prefix appearance appearance set it to none too but you won't have to do that you're just going to try here some stuff in Codepan for example you just can add the auto prefixer then you don't need anything of this you just need appearance and the rest will Codepan do for you well like I said you will have some problems in internet explorer there is a walkaround and you simply just select the select field add absolute element ns expand here and set the display to none well this will do an internet explorer 10 and 11 it will hide the default error so this error you would have usually of your these errors here so I'm going to put this back here and now you're going to style our select field so first of all I'm going to give it a padding I'm going to give it a padding of 8 pixels this is fine for me and I'm going to get rid of this border radius I won't want any border radius in this case set it to zero looks awesome good to me now I want to add some after element I want to add an arrow so I can't do this with select after as you might think it will have some problems so because of that I created a parent for our select field the drop down class here if it has a drop down class and I'm going to style the drop down instead the select field itself I'm going to make display inline block because I don't want it to have to hold it actually here and I'm going to give the drop down display inline block 2 and that's actually all I'm going to add the drop down after element and what we don't forget, set the position to relative here so first we need of course the content again and the content will be here not empty we will add here some icon and the standard font comes actually some cool icons you can find on the website like topdoll.com or some other websites too and you always find something like the CSS code here so you're going to just have to copy the CSS code and paste it into your content here and you can see already here is this icon a little arrow and that arrow I want on top zero right zero and to align it like this of course you have to set the position to absolute awesome I'm going to increase the width of this whole select field so I'm going to give it 165 pixels slightly then I am going to say line height I'm going to change the line height to center that whole icon here let's go 35 pixels it's pretty much the center, let's make it 8 root more let's leave it to 07 then I give it a padding right of 5 pixels exactly around say 8 and we have our icon here we can try some other icons here we'll see if we find something interesting here let's say we want like this here for example this looks good let's take this code just copy and paste it in your code here good, now we have here this little arrow looking right here, this graded end thing and this is how you actually style your your drop down or your select field your select element you can also change the border here if you want to all kind of stuff if you have problems like I said before, repeating if you have problems with Internet Explorer to make your form elements display correctly, especially here use select fields add always these lines here and for all the other browsers you add appearance none or if you don't use auto prefix you compile your files then you just add a prefix like mos or webkit and you're really fine to go so I hope to see you in the next how to lecture and I hope I could help you with that issue I'm going to add here the normalize and the auto prefixer then I'm going to create the html which will be a diffcontainer diff input group and another one and within the input group I'm going to add a label this label will be for mail so I'm going to say mail here then I'm going to create input and this will be a radio and I give the idea of mail then I'm going to create another one and say here female female and the input again the type of radio and the idea of female alright this should be all now I'm going to create the css first of all I'm going to take the container here and say what you wanted to send it a little bit I don't know, 300 pixels then I might say also I want a little bit distance from the top now I'm going to create an input group selector and I'm going to say this block is automatically set to 100% and padding 12px0 so from the top and the bottom it will give a little bit space so now we are coming to the radio button itself maybe first let's create first the radio button so first of all say input and I'm going to use selector here and say radio and then I'm going to say appearance appearance should write it correct of course so the radio button is actually gone but now I'm going to bring it back by saying the same selector here and say before first of all we have to give it a content then position absolute left 0 say top 0 bottom 0 width 10 pixels and height 10 pixels background just color here so we see it already appears on the top left corner of our screen but of course have to set the position of the parent relative alright so this is now on the very left and actually let us do a little bit different here I'm going to put the radio button before the label actually so let's just copy this here so I don't have to worry about the lighting for now I think I just deleted the label let's create a cleanlabel mail mail and that's alright, okay good now I'm going to say that our label so let's make our label maybe here so label is margin left 12 pixels and then a little bit distance between and except background this I'm going to say here border 1 pixels solid same color then I'll say border radius 100% perfect I have bottom top to zero left to zero to the right now I'm going to change here the line height have to try a little bit and of course it also says display inline block let's make it a block level element actually and then I'll say line height pixels is a little too much let's say 8 better 6 6 is good margin left a little bit more let's make 24 and now we have this our little radio buttons already cut up I forgot to put actually let's see the form so let's do this clearly just going to copy all this here and put it in a form like this maybe a little bit more structure ok now I have everything we continue with so I'm going to say input type radio and use here the after but before I use the after I want to say checked after and the same thing content position absolute left two pixels maybe top two pixels bottom I'll leave now so with 8 pixels height 8 pixels background same color border radius 100% now I'm going to click here and you see the radio button is there and it works this is our little radio button of course let's make it actually a little bit bigger here so it looks a little bit cooler so I'm going to say before one 15 maybe that's pretty big and going to say here not 14 what does it look like here a little bit too much let's say 12 yeah that's not a bad 12 minutes say 3 3 that's not a great actually doesn't look that good we can make 4 that's too much probably let's leave it to 2 and just make the width a little bit smaller that fits all right perfect now I'm going just to save this quickly here and click and perfect so this is how you create custom made radio buttons