Hey, guys. And welcome to email and see It says from scratch video where we'll learn HD email far and see if it's three from scratch using visual studio code text bette r
. Well, video will mostly focus on a balance. We're also gonna cover typical visual studio code text better set up, including nifty extensions like Emmett Snippets
and clever keyboard shortcuts to speed up our developing flow. Since video consists of more than 100 and 20 pictures, I find it a bit counterproductive to go over
the whole content of the video in this interest section. So instead, why don't we take a look at a general outline of the video video consists of three modules H T M
L tutorial model H T M L Project modules and C. S s territorial modules. In our first aged amount module, we will use few flights to get to know what is at Gmail
. And as a side note, video will be hands on and flights we're going to be used only very sparingly. We're gonna cover how to install visual studio code, text better and Google Chrome
browser on our local machine. And most importantly, we'll start working with the email by learning a tax and use cases, they're in the module. We're also get comfortable with multiple
visual studio code features to improve overall work for and by the end of the module will be comfortable working with Gmail helmets and as a result, will progress to
actually know project modules where we use our knowledge to build our first H T. M L Project. Right after the project, we'll deep dive into how some world and see assessed by
first covering what in the world is the assessed multiple ways, how we can add C. S s to a project and generals and guidelines force. Then we're gonna be off to the races to cover
as many properties and their values as we can, including selectors and colors units and C. S s typography see box model display options, background
images, positioning transitions, animations and many, many more. I guess that's enough of me chatting and why don't we learn some h? The amount has a side note video
as part of my you Demi course, where we'll also learn what is select box and see if there's great layouts, modules and build more sophisticated project using H, the amount assessed
by the way course projects are available for free period, so you're more than welcome to check them out. You can enroll in a course by following the link in the description of the video or
by searching for my courses on your demo. Now one of the world is H T M L email stands for hyper text markup language. And what this mumbo jumbo gibberish
means is that email is not a programming language. It is, in fact, a markup language. Now why is the amount is so important on well worth our time learning
? You see, a email is responsible for the structure of the Web pages, and that makes me in my moment. The building blocks of the Web pages elements are represented by this syntax content
between the tax more precisely opening tag, which consists of the name of the element we would like to use, surrounded by angle brackets, following what we'll be displayed on the
Web page and then the closing tax for the element For the closing tack, we also need to add forward slash before the name of the element. So if we want a heading in our Web page
or what project we would create a head intact and right are heading. If we would want the program, we would create a paragraph tag, and sometimes that will be, you know, a program. Same would go
for the link, and you get an idea. Some elements will not have closing time like, for example, image or the line break. And there will be times when you'll see for these elements
with a forward slash before closing angle bracket while aged email. Five does not require that, meaning both in taxes are valid with and without a forward slash. For example, React
, which is probably most popular jobs framework around today, has a stricter policy where forward slash is required. Just something to remember just to give you an early taste. The
amount. Let me open up a browser window and let's say that we're gonna be searching for ESPN dot com now once we open up the euro, obviously we have our weapons. However, we can do
the inspect, uh, look at developer tools, and obviously we're gonna cover this during the course. And as you notice here, even though there's a lot of moving parts because this is a complex page. Check
this out. You have all over the place, the open attack and the closing thing, meaning the email is still responsible for the structure of this webpage. And this is why it's so important to learn at Gmail
in order to do any kind of one of the open we for sure, we'll need to think, Hey, Texas, to create our project and I will browser results. Well, there are many options out there for this
course will use Do Chrome as a Web browser and visual studio code has are better. Well, I can go on and on about why you should pick these two specific tools in a short, one
sentence. Answer. Both of them are industry leaders and first one to implement new features and, by doing so, improve our work flow and overall development experience. Both of them
are for free and require simple download. Well, this is not a requirement, meaning you can use other browser in Texas to your liking. If you want. The same exact results during
the course is me. How is it just downloading these 22 First start by getting the Google chrome browser. So I'm going to hope not whatever default browser I have on my machine
and I'm just gonna say Google home and we can maybe add, I don't know download because this should always point us to the right direction anyway. And as you can see, we have the most secure browser
on the web and just look it over here and we have an option for downloading, and we just bravely click here accepting install. Um, this is gonna be installed on my machine. Once the download it has been
completed. We can head over to downloads and notice your here we have the installer package so we can just click on the package. I noticed right away it gives us the Google chrome so we can just
drag and drop it to our applications just that we can have it available. And right now it's saying that it's copping to the applications and we should have it available to us in no time. Now, once
the installation has been completed, you can just close it over here. And if you want, you can just inject the Google chrome and we can just look for it in the application. Let me see where in the applications
I have to go. First of all, let me open this. And once I open it up over here, it's gonna ask me whether I'm okay with this being the application from the web. I'm going to say yes, but I would like to open it as
well as I would right away going to set it up in the dock. So I'm just gonna right click it, Um this is going to keep it in a day. No, also right away. Like to make this a default browser? No. Again, you don't have to
do this, but I would suggest that you do that with me. Just remember that depending on your operating system, you might need to take different steps. I'm gonna head over for all the way on the top
, right corner. I'm just gonna click on. So as you can see over here, we have the settings part and we can just click on the settings link now, within the settings, we're gonna scroll down a little bit. Uh, notice here we have
make it as a different. I'm just gonna click it over here, and I'm gonna say that? Yes, I would like to use chrome as my default, and that's pretty much completes our downloading of chrome and setting it up as
a different browser. Okay, Awesome. We have our browser now. What? Well, I believe I told you that we need and also text so we can put our good old friend Google right
now already, since it is on our machine, uh, to use and we can just search for individuals called again. Same old spiel and you say residual studio code. Well, we're not gonna be looking for
logo. We're gonna be looking for visual studio code. Uh, notice this is gonna be the first thing that pops up so again bravely, without hesitation. We just get over here. And as you can see, it tells me
right away what operating system are month, and it's as well. Here is the download, buddy. Okay, so I'm just gonna click it over here. So this is gonna start my download again. The installation package is going to be
available to us in a second. And again, obviously, if you're using different operating system, they were going to provide you with a proper insulation package for your operating system. Now here
you can see that this would be my download so I can just open it over here and once I have it right next to Google Chrome, I have my visual studio code again. The same old feel. I would just need to grab
this. I'm just drag and drop it in my applications. So I'm done. We're getting my visual studio code. And again, the same thing within the applications at first. Find the visual studio code
, and I'm just going to open up over here. Now, let me first of all, maybe close this. I don't need the actual browser open and again, it will gonna ask you Are you okay with? Well, obviously we are. Since we want to work
with this. Um, before we do anything again, I'm gonna keep this in the dog. I was gonna say options and keep it in and out. Now, once we open up individuals to your code And you know what? Let me just make this bigger
, so it's a little bit easier to see. We'll get to be met by welcoming street. The welcoming screen. We have few options. We can open up new file in the folder. And as you can see where you can also customize
it Now, this is gonna be the first time when you're actually downloading visual studio code. Obviously, we're not gonna have the recent project. The only reason I do is because I have to
reinstall divisional studio code just so we can go through all the steps together. No, I'm not gonna spend tons of times right now on visual studio code because I would like to get us up
and running and actually create our first weapon. I do want to show you the the general workspace. So let me close this first. And as you notice these icons, right, So we have at the very
top this is we're gonna be working with our files. So as you noticed, I'm opening this up, and this is gonna be the space where we're gonna be doing most of our work. In fact, all
of our work and this would be our file structure. So whether there's gonna be folders, files, or images or anything like that, this is gonna be within this tab over here within the sidebar
. No. Next we have a few other things. You have the right contact we're not gonna use right now. Let's say search throughout the documents and we also have for the search control, which would be good as well
as the bug again. We're not gonna cover them right now because we're not going to use them over there. We're gonna be something useful, which is extension, Meaning with every tax that are, you basically have capabilities
of adding more features to a tech center. And we're gonna do that actually in a second. But for now, just remember, these would be basically the extension that you are have available
, so, as you can see here, recommended. But for now, you shouldn't have any extensions installed if you obviously just download individual. Now, if you'd like to search for extension again, we can just type
whatever extension we're looking for. And obviously, this is not going to come up with anything. But let's say we're gonna say jobs strip, and this is gonna bring me all kinds of extensions Now, last but not least
regarding visuals to the code, something that we're gonna be in reporting and especially later on, as we're gonna be working more and more with visuals through your code. It's the settings. So
if you click on this car all the way in the bottom, noticed it's gonna give us setting. Now. Settings allow us to customize the workspace. So let's say we want a bigger contact
so I could change this from 12 to, let's say, 22 if I would want a different tab sites, okay. And we can just change this around. And what I'm trying to tell you is that has, the more you're gonna be working
with your actual text. There's gonna be times when you are changing your settings to adjust, whether it is going to be an extension or just for your personal preference. Now, also, the settings are, in
fact, in adjacent, and this would be basically graphical interface. How we can work with Let's say, I'm going to change the setting from Von Size. Let's say I'm going to say that this is going to be 22 once
I make the change, the changes that are going to be automatically saved. However, there is also an option for the Jayson object and within Jason Project notice something interesting. So now, these
would be my settings. As you noticed, I changed it from whatever it was initially to, let's say 22. So if I would want to add something else, I'm going to say I don't know that this is the setting for the is going to be something
like 30. Now, in this case, I would need to save it. So I have a few options. Either I can go over here and just look for the file and then check this out, that I can obviously save it, or I would have
to use the shortcut, and that would be commanded again. If you're working on Windows, that probably would be controlled. And that's But since this is a Mac, I'm just going to say that this would be commanded next. Now
, in my case again, I'm gonna delete this because I would like to come back to it within a few videos whenever we're gonna make our first majority. But just to let you know that this is
where the settings would be located for visual studio code. Okay, enough of me yapping. Let's start working on our first one now. In order to do that we were going to need a project. Now, in order to create
a project, we just need to create a new folder. And this is obviously a Mac thing. Where or I'm sorry, any operating system thing, It's nothing to do with visual studio code or the actual Web development
, but we would need to create a new folder. Now I'm gonna be creating my folder, as you can see in the desktop. But obviously the same thing would work. If you're gonna go to Finder and let's say working documents, I just find
it much more straightforward If I'm gonna be working with all my files and folders on the desktop. And like I said, I was like a folder and obviously I would need to come up with some kind of name. So
let's say that I'm just gonna call the station now. You can call this, however you would like Bobby went to town or whatever. It doesn't really matter. So let me say this, and now I have to look at how we can
get the folder. So there are working projects to individual studio code. The first of all, let me go back to the file. And as you can see, we have multiple options. The first of all, I can just click over here on open folder
. And you know what this settings is for now? A little bit annoying. So let me just close this, and here I can click on it unless it's gonna give me an option. So if I go to the desktop, just click in over here, and this will
open up the folder in the actual visuals vehicle. Now, we also have an option of, as you notice, if I'm working with visual studio code, that I'm going to have this file time now within the files have
noticed again, we have either open, recent or in general would have open now again. This would work the same way. It's like on open, and this is going to direct me to the folder already because
I obviously was just here a second go last. But not least, there's a very neat feature where we can just drag and drop it. So if I'm gonna grab this project that I have right now, we're folder
or directory called This whatever you would like and just drag and drop it here. And this is gonna do the same thing. Where, as you can see right now, I have my folder available to me and I can start
creating files and folders, maybe within this project folder, and basically get up and running with my project. Alright, Alright, I have the folder. But how do we create our first weapons
? Well, first of all, let me just make this bigger again so we can see everything that's happened now. Second, it's easy to see that everything is in very small phone. And like I said, we will gonna fix this
later. But just to give you an a tip whenever you're working again with visuals to your code, they're gonna have option of zooming in. As you can see right now, if I'm pressing command and plus for minus
, I'm assuming in more I'm zooming out. I'm going to do them in so we can see really clearly what we're doing. But we were going to exist in the next video and we're going to start working with our settings. The first and foremost
, we're gonna have to create a file. Now again, we have a few options. As you noticed Yeah, we have a little icon, and when I'm hovering over it, it says that we can create a new file or there's another option
where we just right click it on the side and again, we have multiple options and what we're in that is new file. Regardless, the result is gonna be exactly the same that we can create a new file
. Now I want to call my file my first file in the email, and both of these things are important. It's important to call this next as well as it is important to have this extension
of h T M L. Now the reason for the email extension, because there's going to be different files there's going to be maybe not. Maybe there's actually going to be assessed files later on. There's gonna be some job script files
and all kinds of fun. So this tells the browser what type of file this is gonna be now. Second, the index is important because whenever you're gonna download your project or upload
your project on the server, this is gonna be your home page. So if you're gonna home page, this is gonna be indexation. If you're gonna have an about page or contact me paid. You may miss however you
like, but your home page, we're gonna have to be in the h t e mail now on the right hand side. Like I said, this would be the space where we're going to be doing all the work, which would be our
workspace. Now, since we know that at Gmail is made up off element, let's create our first two elements. And again, we will cover them in bigger detail later on the ledges get
up and running with our first whipping. So, first of all, I would like to have a heading one. And again, syntax was the opening and closing. Now, what's going to happen? We have visual studio code this automatically
gonna create the closing back for so we don't need to worry about. So here. I'm gonna say, hello, world. And then let's also add maybe a program. And again, we have an option of creating the
paragraph tax or paragraph element, and I'm gonna say this is my first web page and again. Please don't worry. I'm gonna go over detail what these things
mean in the later videos. But just for now. Let's get up and running with our first weapons. As you notice right away. You have this one as well as you have this little circle here. Now what? This
says that you haven't saved the file. And again, if you would like to save the file, you have two options. You can head over to the file, and then we can just click on save as well as it tells us right away to shortcut, which would
be commanded. So either you just press on the file more command list, and now we're going to save the file. So how do we look at our first weapon? Well, we're gonna have to navigate again back to our
folder project or again. Call this however you like, I notice. Right now you have this in the email. However, it has this little hike on right next. And maybe in your operating system, the economy might
be different. But the general idea is that we can open up this file in the browser. So how do we do that? Well, first of all, we can just double click where we have an option of right clicking. I notice it says
, Well, open with. Well, since we already set up the Google crime, this is gonna open up as a default browser. But the same way would work if you would have a different browser. If I'm just gonna double click
this, this is going to open up in the our default browser. So again, since in our case, both of them are exactly the same, it would have the same results regardless. And sure enough, now I have
a little world, and this is my first flip it. Now, again, this is not most sophisticated webpage. However, this is a job well done since we created our first webpage successfully
. Now, making our first Web page was a lot of fun. However, there are a few nagging issues that I would like to say, and first of all, those would be our workspace. I'm gonna head over again to the car, and then I click
on the settings and now I'm gonna open up this settings window now within the settings And when the first of all, I would like to change here the phone size. So again, if you'd like to search for it as you can see, we have an option on
the search bar. And again if I'm gonna type something, this is going to bring me whatever setting I would like to change. I'm gonna say here that this is the new phone size should be something like 26. So, as you can see, this is
gonna be automatically safe. No, not again. Just to show you that we have other options where we have the Jason object. Then I'm just gonna click it over here on the little like on. And this is going to open up my
Jason object. Now on the right hand side, these are gonna be my settings or our settings that we're gonna have. And remember, just by changing the zoom level notice the setting
is right away or here and again. We didn't do this in a previous screen, remember? We did it previously when we resuming. And so for now, your zoom level, let's say is have to However, if
I'm gonna press it one more time is gonna zoom in. And now my zoom level is going to be a threat. Now, within this screen, the way we'll work again, it's gonna be the similar way because again we can look for something
. And what I'm looking for is the tab size. I can just say tab size, and this is going to bring me to the editor on top side. Now, we're not gonna be able to do any kind of work here because
it's gonna complain that this is going to be read only. So if I'm going to try to change this something here, this is not gonna work. Whoever we're going to have an option of editing. So if I'm gonna click on this little pencil
, it says right away copies of the same at the moment I'm going to do that. This is going to copy the settings where I can change it. In my case, I would have them. I would like to have them as one. Now again, depending
on how you're like to work, your zoom level is obviously can change for me. I'm going to leave this for an hour or two later on. I'm gonna see how this is gonna work. So what we can do right now
is just close both settings and we are ready to go. No. Another nagging thing about Our first Web page is all the manual labor that we need to do now. What do I mean by that? Well, let's
say that in my first webpage, I would like to change from hello world to Hello, people. Well, we can definitely do that. So again, we're gonna head over back to our document. I'm gonna go over here within the
content that's going to be displayed on the page. So within the heading tags and I'm gonna say hello, people. Now again, we would need to save this. And again, you can prefer to shortcut or a long way through the
file system. And here, I'm gonna say this now, once I save it, I need to head over back to my webpage again and refreshing the moment we refresh the page. And obviously we have hello, people. And while
this does not seem like a lot of work right now, trust me, the more and more we're gonna be learning and working and experiencing this is gonna get annoying really fast. In order to fix that, we're going to
install our first extension for the visual studio code. So I'm going to click on the icon and now we need to search for our extension. Now, if you'd like to search for extension again, we
would do this in a 34. So here, I'm just going to type alive. Uh, the name of the extension is going to be server. Now, this is going to bring up the extension that we're looking for. And as you can see, the moment I make the side bar
a little bit bigger, we can just see more clear what this extension is all about. Now, if you want to have more information about extension which you should probably read a lot of times before
you install this extension, so that is a good option. You can just click on it. So double click on it, and then you're gonna have this info window. Now, if you'd like to install the extension was gonna click, uh
, the installing of the extension. And now we would need to reload the visual studio code. So we're just gonna click on reloading. And sure enough, now we have our extension available. How do I know
that? Because these are the extensions that we have on our machine. And these would be the recommended extension as well as the moment I'm gonna start typing Original through your quote is gonna be suggesting
the extensions, obviously, based on what we're typing here in the third. So with all that being said, what I can do right now is first of all, minimize it just so you can see a little bit better what's happening
and also gonna close. Whatever the Web browser we have before, I'm gonna close this processing, then let's also maybe make this smaller as well as open enough in
the actual file system. Well, I'm sorry, not file system basically in the folder. And then once we have all day, what we need to do is right now navigates to our workspace. And
once we are in our workspace again, we have a few options. So either we can go here where we have go live. So this is going to open up the life server or we can right click it. And again
, we're gonna have the option of open with a life service as well as we have a short cut and the short would be commando and commando. I'm just gonna press on the go liable here
and this is going to open up a local development service. And what's really nice about this? Why we would prefer this way instead of the previous one. Well, first of all, the way the course is gonna be setting up
is I'm gonna set up them side by side. So I'm gonna open up this guy on my visual studio code as well as my coat later. I'm sorry. My, uh, local development server on the
right hand side, all the changes that we're gonna be doing, we're gonna be able to see right away in our lives. So let's say that I'm first of all gonna close this because it's complaining that we don't have a proper structure
which we will gonna do in the next video, so don't worry about it. But let's say if I would like to change this back to the helo people, I can just delete whatever I would like to change. And we're going to write the little world
. No. For now, nothing is gonna change because we still don't have the proper syntax for the HMO document. So basically, that has to be structured. However, later on, we're gonna have an option
where every time we're gonna be making some kind of change, the changes are going to be showing up right away, alive here on the right hand side in our local development server. And trust me in the long
run that makes our lives much more easier. While we are very happy with our first one page as we should be, it's hard to miss another message by the live server in the very bottom
of the screen. So there has to be something missing in our page. Now that's something is a proper age the email structure. So let's take another quick pit stop in the slide will
to discuss that you see all H T M L elements follow the same basic structure so that the browser that renders the file knows what to do. At the very top, we have a doc type declaration
. The tells the browser what usually male version the pages written the doctor, If you see in the flight response to the latest version of HD email, which is H. M 05 Next
, we have a email root element that will wrap all our code in the page, and we'll always contain one head element and one body on it. Uh, notice how everything is kind of sandwich
nested inside a moment. By the way, that is really important. And we'll discuss that in more detail. Once we had back to Texas after the email wrote Element, we have H T M L
Head element that will contain information about the page like, for example, page title page made of data and links to external resources like C S s, style, sheets
and jobs. Five content within the head element will not be visible on the page that is being rendered. And with your permission, I would like to hold off on covering head element content
in any more detail because at this point in time, we have more important business to attend. Insured Head Element will contain information about the page and will not be visible on the page
that is being rented. Nobody element is whole another ball game because this is where we'll do all of our work. Like adding headings, paragraphs, links and basically creating
are fantastic webpage. Now that we know the basics page structure, let's implemented in our first Web page. Now that we are big shots and we know the basic email document
structure that's implemented in our page. First of all, let me just get rid of this heading one, and because we're gonna redo this anyway. And let's start with our doctor. So here are gonna declare what version
of Asian email we're gonna use. And in our case, that's gonna be html five. You can see right away it gives you suggestions. It's like, Hey, listen, do you want a doctor? I'm sure enough we do
. Again. This is not a cheating. There's nothing wrong with that That will gonna save you a lot of time in the longer we'll have a email wrote element and then let me get all caps and we're gonna write
each demo now with the National Mail. Remember, we have the moment on within head elements we can right away places. Title again. Title is just gonna be, uh where the title of the page
is going to be displayed. So here we're gonna say first not at first. What page? And then let's go right away to the body and what's right within the body. There's going to be two more things heading one
is gonna be Hello. My name is John, or whatever name you, Obviously, with the right. Correct. So hello. My name is, uh, John. And then we're gonna right? I don't know, in the paragraph. And
this is my first webpage. This is my first web. Thanks. Now, once I'm going to save it, nothing is gonna change right now because we still would need to restart the server, because now
we do have the proper actual page structure or document structure. So let me do this. Let me just go over to the port and click on disposing it. Something I can see gonna
say that server is gonna be online. Okay, fair enough. And then let's go live. So the moment I'm going to go live now, business is gonna be my page with the title here at the very time so I can close
this tab. And now let's test it out. Whether life servers working properly where we can type something, and the moment we're gonna say with the changes are going to be displayed live in
, uh, life server more into service. Sorry. So let's say and this is my first page, and, uh, it is very good. And let's mention what's here
and let's say this and sure enough, the moment we save it, notice what happens. So hold on changes. We're being displayed right away here on the last server. So what's happening again is we don't need to
go and refresh because life server is doing for us. So development server is working hard. So we have to work less hard and also like to right away show
you that we have a death server with the lives we have an option of right away, where we everything we're gonna be working. There's going to be changes this way and forties, we have auto save. So
let's do this. This guy and then every time we're gonna be typing something, it will in fact going to be displayed right away on the page. So it's I have 30 heading one. I'm gonna have another one. So as I'm starting to type
, notice what happens in the last server. So in this case, we don't even need to save anything. The moment we're going to be typing something, we're adding something. The changes are going to be displayed. Life
. However, I do find it a little bit annoying, especially when you start working with things like jobs trip. So I usually have mine went off. Now it's really up to you, whether you would like to prefer to work or
for this editorial, I always we're going to have my one off. So first I'm gonna make the changes, and then I'm going to save the changes, and then they're only going to be displayed here on the page
. Also, I would like to talk about how the tags are messed up. So as you notice we have the H t email and wrote element, and then we have two Children. And the reason why they're called Children, they're sitting within
this age element. Now. The two Children are ahead element as well as the body on now. It is important to keep the syntax because this will not gonna make sense if you have
a child within the head element. And then let's say the closing tag of this title is going to be removed and placed. Let's say outside the head on, you always need to follow the structure where if
you have the element and if you mess something within this element or sandwiches or whatever. However you'd like to call it, it's important that the closing tax also is going to be sitting within the same
element. Now. The same would work here in the body. If, let's say I would get rid of this closing tax for my heading one and place it, it's on the body or even outside H E mail, it will not
gonna make sense. So this is something. Also, you should remember about Children and parents. So the parent is going to be the parent element where the child is sick. And as you can see, the child
can also can have multiple or one other child. So even though the head is the child of Asian email, you can have the child on its own, meaning the title element in this case
would be the child of the head. No, I know it might sound foreign with Children and parents everything, but just remember, that is important to follow the same tax where if you're placing
something within the element, make sure that that elements closing tag and opening tax are actually sitting within this element, and the same will go here don't mix, Let's say
heading one with paragraph. Don't place the closing tax for having one within this program, because again, you're gonna get errors and it will not gonna make sense. Excellent. We know
know how to implement basic Asian email document structure. Our lives server is working correctly, and we're good to go and start actually working more with a she male meaning
learning more at a moment. Or before we do that, let me quickly show you two very important things that are gonna come very beneficial as we're gonna be working with H T
M L moments. My first of all, I would like to talk about the world as you noticed, since we have the program and it's quite a long and let's say, if I'm going to be adding more here exclamation marks and I'm
going to save it, everything is going to be displayed nicely in the page. However, notice what happens with our actual Texas. So now I need to start scrolling left and right. And you can say, Well, you can always
do amount right, so I can keep zooming out. How are what if we're gonna be adding more? Texas that's not gonna make sense, because then basically, I'm gonna have to make it really small. And first of all, part of the editorial
is gonna be very hard for you to see as well as in General, whenever you're gonna be working, this is not going to make sense. So what would be the solution? Well, again, we're gonna have to go back to the things I'm going to click
on a card and then we'll look for the setting of the word. Okay, let me find this. And then you're gonna have this control online should wrap. And here, in this case, we just need to say that this would be on
so instead of off, then was there before we were just going to go for all. Now what's going to happen again? This is gonna auto save right away, and we can just see that in a text editor right now this is gonna
wrap the line and again this will you make your life easier because you're not gonna have to stroll left and right as well as email. So now whenever you're gonna have a longer line, this
is just gonna wrap into new one? No. Next I would like to talk about them. It No one in the world is Emmett. You see them? It is something that speeds up your racially amount work. For now
, if you're using different, you can still access them. Now we're in the visual studio code is built in. Now again, if you would like to have a little bit more information about the limit you can head
over again in the Google and just my payment and you'll see that this is essential toolkit for Web developers where we can quickly, right, bunch of cold. Now there's some things about them it and again
, I wouldn't want to spend a lot of time on that. Our in our most basic example, What's going to happen is that every time I would like to create a moment, I don't have to start
by the angle bracket. I can just say whatever element I would like to rent it. So let's say I'm looking again for heading one. Now is the moment I'm just gonna type h one and the same is gonna be for you
. We're gonna have a suggestion. And as you can see, it says clearly Emmett Abbreviation. So what happens is if, let's say I would like to have having one writing, too. We're heading six. I can just type head like
H and then we can choose whatever heading we would like. The same would work if I would want to program again. I just need to type whatever name of the element or let's say not the name of the old man, but starting
letter of the own and is gonna do arrest. Now, if I would like to render that element, I would have to press tab or return. So basically, the and Turkey, the one suppresses notice. Right now, I have
my own No. Again, this is just the most basic thing that we can do with them and, uh, later on throughout the course. Obviously, we're going to expand our knowledge regarding them majeste on a very basic level
. This is going to save us from again typing and typing and typing and necessary an email where we can just look for whatever element we would like. And right away it's going to be around
. So let's say here, I'm gonna say, this is, um it's paragraph meaning paragraph like with just a P. I notice if I'm gonna save this. Sure enough, I'm gonna have and didn't
save it first, so no one would notice. I have. This is so this is very cool. Again. If you would like to find out more information, you can just sit over to this, Uh oh. And if you're using a different text
, you should be able to install it as an extension. And we're we're visual to your code. It comes in prebuilt now, last but not least, all this work that we did, we could have done it actually
with a name. So let me the latest and once you're gonna have an exclamation mark. So I'm gonna press shift an exclamation mark a notice again. This is gonna give me that information at the moment we press center notice
what happens. So now we're getting the proper at Gmail, structured that. We work on the last video. So this pretty much saved this time where we don't have to retire this and again. Please don't
focus on these meta tags. We were going to talk about them once. We already have sufficient knowledge of Asian amount. There's no point right now to fill your head with this information as well as this
language again. What we need to focus right now is the fact of the title that's sending within the head of them and as well as all the work that we're going to do in the body on it. So let me close
. Maybe the Senate for now. As you can see right now, this is still saying Hello. My name is John, but once we're gonna save this, I don't know, uh, proper, uh, structure that's called. Is
this one? Sure. Sure. You can see my typing is just awesome. And you're going to have just a simple heading. One with the title of the page being a document. Excellent
. Well, finally gonna take a deep dive into H T M L components. And our first component is going to be heading. And we obviously have already covered headings because I need to do something with examples
. Pretty much I couldn't have them. MP, So you already a little bit familiar with, but let me go over the whole spiel again. So basically, headings would be titles. So if you think of any kind of document people that have a title
. And for that we have headings. Now, for the headings we have six types starting with heading one and ending with adding six. And obviously having one would be the biggest one, and heading six would be
the smallest. So let's start with having one again. We can use them as obviously and we can have a tab or enter or return. And then here I'm just going to say I am. I am heading
and we're going to type hitting one now. What I'm gonna do right now is I'm just gonna copy and paste this line, and later on, I'm gonna show you some keyboard, keep its. But for now, we'll gonna be basically doing this
manually, like we would do normally on a computer, meaning we're gonna do it with copy and paste. Later on, we're going to look at a keyboard shortcuts that we're gonna improve again. I'll workflow tremendously. So
let me, first of all, copy this. Um, let's say the second line and maybe for this one, let's make it as a heading, too. So it's changed these values as well as this guy. So let me say this. Uh, sure enough
now I have a heading to. Maybe in this case, I can just copy and paste it again. Two of them right away on one more time. So then I'm gonna have six of them. So here would like to change the values. So this would be heading three
, 24 5 on heading six. Um, the same old steel over here. A lot of not having six, but we'll have any three four. I'm heading six and again, the same old
thing. Like with the rest of the elements that we're gonna have. We're gonna have the element that is in closing angle brackets as well as the closing tax. So whatever is going to go inside between these two
exact is going to be my heading. So obviously, if you want to write a paragraph, you can write a paragraph in heading Now. I don't know any case where you would want to use that Obviously title His self explanatory
, that title. So depending on how long the titles, you're right. But that is one word too. Or to 10 words. But in general, you probably wouldn't want to have a title that is actually a program. We have specific
paragraph tax. Now I have just a little bit. But let's say first of all, this is gonna be having three for because I didn't have the numbers. Sorry, I was cheating a little bit. So let me say this. I'm sure enough as you can see right now
, we have six headings. So depending on the situation, obviously you would pick a heading that you would like to use for that particular situation. Hey, guys, just to let you know that starting
from this video, if we will write any code during the video, if you would like, you can access electrical for that particular video in the zip code in the video resources
. So let's take it out for a spin. Let's say that we're gonna be looking for the heading elements and we would like to get a source code. We can either click it here. As you can see, this would be the resources. Or while
you're watching the video, let's say, within damages, we can start watching the video, and then we can posit because we don't listen. This guy, um let's just say in the resources we're going to have the availability
for the images. So this is how we can access the images. In both cases, you're gonna download the Zip folder for that particular lecture. And then as I'm going out to my documents, I'd like
to go to the download. No, see, I have two zip folders and we can just open up the zip folders and we're looking forward to hold her name. And again, this is gonna work exactly the same for damage. So I'm
not gonna show you for both of them. But we can just drag and drop it. Or however you would like to open up in your text better. And then if you want to save it, obviously you would need to use it for your downloads
and then maybe put it in your documents or something like that. But the general sense would be that if you'd like to access the cold that we're right in the video, you can always have access to it in the video
resources. So far, so good. We have heading covered and now we can move on the program. Now, before we start covering paragraph element, let me just quickly correct myself. I believe
in the last video. I said components and components. We haven't react united the amount they have elements. So what I meant was heading elements, not having components. So I would like to correct that. First
and second, I would like to show you that starting from the last video, whenever we're going to do any kind of coating on the video, there's gonna be resources for you. So as they're watching, maybe you'd
start to understand something you can always go underneath. The research is a video, and you can just download this now, obviously, in the download, what you're gonna have is the same exact thing
we're doing in the video. So it's not like I'm gonna send you some kind of black magic over here is gonna be the same information we already covered. As you can see, this is going to be a zip file. Now, I already automatically open
up the zip file and I'm gonna have my index file. No, I don't think I need to go as far as opening the annexation mail to show you that this would be same exact thing. Not for the project. It might be
a little bit different because already Previously for the previous project. Uh, you know what is underneath the set up video? We have the whole zip file. Where was the starter files as well as the finished
project. Now, as I'm re recording the course, I might add again folder for each and every video that we're doing. That might be something that i'll do not
because I wouldn't want to do it, but unfortunately, I have a pretty bad memory, so I might forget, but I Hopefully I'm going to try to remember. So the same would go for the projects as well
. But in general for sure, I'm gonna try to do that with territorial. So everything that we covered in the last video, it should be accessible for you in the resources. Okay, enough of talking about again
about everything else but the actualization email. And now we're getting rid of all the tags since you can have always access in the actual resources. And let's say what we would need for program now for the paragraph
, This is gonna be very straightforward. We have p So that would be a letter p which would reflect a paragraph and again, Same old, same old syntax opening class Total closing tax. Here we can
write whatever a novel if you would like to do it now again, Like I said, you can still do it. And the and the actual heading But probably paragraph is where you're gonna put your content. So here I can just
say I don't know some kind of content that I can just keep on typing. And as you can see, since we have the ninth, uh, word break, everything is four months is really nicely, and we can just save it
. And this is gonna be my perfect. However, if we're gonna get over to the browser in the bigger browser window and let's say I'm going to type 1 27 because that is where the local development
server or live development server is going to set up my indexation. Email not is that everything is sitting correctly like it should, but again here as well. I have the zoom for
200 again just so we can see better everything. But in the essence, that would be about the program again. It is very straightforward. We would just need paragraph tags and whatever text
is going to be sitting within these tax is going to be displayed as paragraph. I also need to mention the email. Is white space collapse and your probably first question is white space
. What? And what does that mean? Well, what's based collapsing means that email is just getting more extra spaces. Now, it's gonna be easier for me to show you, then talk about for three hours. The first
of all, let's say that there's going to be heading three that will be on top of the program and then the heading three hours like right, Hello and world decide. That is gonna be better for my website
. I'm gonna add, like I don't know whatever amount of spaces in between now, what do you think is going to be rendered on the right side in the life service and what I'm gonna say this Check this out. All the extra white
spaces were ignored by email. Now the same would work. If I try to create some space in between the heading three and program again, we can test it out the same way. At the moment, I'm gonna say that nothing
is gonna change on the right side and not because there's some error or the life service not working, but because of the simple fact that email is ignoring all this white space. Now, the point of this is
that in the email, if we would like to create spaces in between the elements or within the element, we need to use Special Agent in moments. Now look at them a little bit later, but
again, if you have been testing it out and if you're confused, why, if you're adding the space in between, I'm working. The reason for that is H T M l Is white space collapsing while we're
still on the subject of the program, I also would like to cover, dummy. You see, there's gonna be situations where you know that there's gonna be some kind of content, but you don't have the actual contact. And also, as
you can see in this case, it would also serve me really well. Is that I don't have to type now. How do we can create dummy text email The fastest way are you seeing? Dammit, If I'm gonna type
Florham, you will notice that I'm getting some kind of command. So how much is gonna press it or your notice? What's going to happen? Basically, we're gonna be getting a dummy text. Laura, I'm hip. Some things now we
can control how big it is because for now, as you can see as I save this, check this out. So this would be my text and there's a specific amount of work. Alright. Can also control how many words
I'm getting from the Semitic. I can say Laura them and then I will need specifically say how how many words? 35 1 50 Already he found 1 10 but I was there. I get 10 words and again press
tab or return. And sure enough, we're gonna be getting this done. Now, if you don't like for some reason using them it in your email, then you can also search for this Lauren system. It's kind of universal
, dammit ! So I can just say Laura, It's, um and you're gonna be getting tons of generators that pretty much give you the damage. Now, if you like to be a hipster, you can just use lower amid some
hipster. And this is just gonna give you a dummy text that has basically bunch of hips towards. So let's say I could say five paragraphs again. We just click on beer. Me. And as you notice
here instead of this, Lauren, have some typical dummy text we're getting all kinds of hips towards. So if you are a hipster or you would like to be a hipster, maybe you would want this dummy
tax as a hipster if some these days it would be really hard to find a website without images. So maybe let's see how we can get images to our email. Well
, the issue is the first we we need to get an image to our system. So some kind of image that we would use We're so let me get around this time here, okay? And save it. And obviously there's gonna be nothing here and
now we're gonna go online and search for image. Now, I can obviously do it. You're on the right hand side, but I think it's gonna be easier for us to see if I'm going to open up the new brother window. Um, somewhere I'm gonna make it down
to maximize it again. It's easier for you to follow on and let's say that we're gonna search for some kind of image. So let's say, um, you do me in Demi image
. Um, let's see something. What's going to come up instead of some kind of text, we're gonna click on images, and now we have plenty of images to choose from. No, in this case, I'm gonna get this one. And in order to save
it or machine, we would need to use the save him a jazz, and this is gonna save damage. Now, obviously, this is gonna somewhere save it wherever we are. I would like to. So now, case
, we would like to save it in the fall that are working on now. You can save it in this top if you want, but eventually we would need to have access in the email. So I was just right away navigating to
a folder or folder, whatever you have or examples and then save the same, uh, my case. I'm gonna call this, you dummy, and then this is going to give it the P N G extension. So
now I'm gonna save damage. I'm sure enough we have the image now getting damage was the first part, and we can always double check it and email. Sure enough, this is gonna be our image. Now we need to see how we
can get it in documents, because on left inside we can see that we have new file. We have your P n G. How are it is obviously not showing up in a document. Now, the way we display
more render images in a document is you guessed it the human element. Now for the image element, the actual syntax would be I m g. I can just start typing
in G and then it gives us plenty of options. Now we can just go with the regular one. I notice what happens. We are giving the image element. And I remember him. Image element was without
a closing tax. This is a self closing element. Horror. We're noticing two interesting things. We're getting something called source and all now source and old are
actually. So whenever we're thinking about 18 moment, whatever is going to be in in between, the tax is going to be renting. However, attributes would describe the owner, so there's going to
be actually that are specific to a specific element. And then there's going to be actually, let's say that each and every element can have. Now for the image we have the source central. Now, sources attribute is gonna
tell us, where are we going to be looking for damage? Because our email email would need to know where to get the image that's going to be rented Now, alternative is gonna be if we cannot send their
damage for some reason. So let's say the path is wrong or something is not working correctly, then this is going to be displayed. And I was always I think it's gonna be easier for me to show you how this would work
. So if we know that we have this you Demi, that p n now in the source, we would need to specifically say back No past is where this image is located and his team is located in the same folder
. We just need to have forward slash and check this out. What happens? So now we have two options. We have either an exceptional amount, which is a file that we're working and we have you a Demi p n G. So if you are in the
email. German. You would like to render this? Which one do you think you would have to pick in the email or you didn't? I think that would be the main engine. The one say, save this Notice what happened? Sure enough, right now I'm
getting my image. However, let's say the first time I'm going to change this. And I'm gonna say for some reason I'm gonna mistakenly say that this is going to be J breaking up the energy first of all, then let's see what happens
. Now. Let me just not display because our past is wrong. Not correct. However, who would have the alternative here? Uh, we're gonna say, um, image, uh, you dummy. And sure
enough, now we're gonna have the majority. So this is gonna be display if we cannot access to much, It's gonna be like a alternative syntax If we kinda threatened their damage properly
in the at Gmail. First, let me fix this. Let's say that this will gonna be P n g. And again we're getting back or image. So let's quickly read. Write what we learn in this for you. First
and foremost, if we would be damage. We would need to get the image from somewhere. Now, that could be from Google, like we just did. Later on, we're gonna look at a alternative
sources how we can get images. Then once we have the image in our project, in order to access the image, we would need to use the image tax. So the image element, no image element is gonna have attributes
. Now, one of the attributes is gonna be the source on the second was gonna be alternative. Now for the source, we need to show the past. And if the past is going to be in the same folder, we just use a forward
slash and then whatever name of damage, However, we also gonna have suggestions from the original code. So if we're really not trying hard, it's kind of hard
to mess it up. And then alternative is going to be displayed if the email cannot find image, even though everything is displayed correctly in Life server, if we're gonna try to run this with the browser
, So first of all, let me open up the browser window. And of course it has to be massive right away. um, let's say that we're gonna look for a file which in our case, is gonna be annexation. Email noticed that we're not
going to see the image. So we're getting this altar tax now. The reason for that because file system is giving you a lot of hustle because of this forward. Now, I know we haven't covered yet the comments
in a email, and we're gonna do that in a few videos. But let me just first of all, copy and paste this two more times and let me just show you what other options you have for getting damaged
. My first and foremost as you can see, I actually made a mess a little bit because I didn't want more of them here. Let's start with a simple one. Now. I could just write like this without a forward slash, and once
we save it notice in the life server, everything is going to be displayed correctly as well as in the file system. So if I'm gonna refresh it, check this out. So now we have a nice image, and also we have another
option. So let me copy and paste this line and let's comment the previous one. We have an option of having the dot and then the forwards. And again this is going to do the same thing where I can save
it. Everything is going to be displayed correctly on the life server as well as going to work in the browser because, as you can see once a refresh, there's nowhere or not. Okay, it's just there's no tech
now your question probably would be Well, if we can use this, why are we using these forward slashes? And And the reason for that is, even though I don't like to throw a lot of things in the beginning
, Eventually the more Web development you do. And as you're gonna start progressing with note or PHP or let's say I don't know react, you're gonna see a lot of these
relative path where you have dot and then you have forward slash. So that would mean that this is in the same directory or you were gonna say two dots, which would mean that this would be in the actual
folder, maybe outside the director, and the point of this is for you to get used to the syntax. So where on. Once you see it, you're not like a deer in the headlights, you know. Okay, so this means that this
would be the same directory, and then to that, I mean that if it's outside the director now, we're gonna cover to Dr later on as we're working with the assessed because a lot of times see if that's not going to be in the same
folder as indexation email. So I'm not gonna cover that right now. Just please remember that if you would like to open up in the file system, you can use one of these two options. Um, it's gonna be disliked
correctly. However, throughout my project, uh, we're gonna use this dot syntax because I think it's gonna make a lot of sense in the long run. So you are very used to the same tax once you progress
to that stage. Okay, We have an image that is in our local project. So far, so good. And what about if it was just going to go on top of the human again, is using three and let's
say image you did me something like this again, we can write whatever we would like to? No, we have that in three. We have damage. What about damages? And we can directly
access from the web. Okay, let's think about it. So we have the image, the attribute of the source on source point somewhere. Meaning and all Because that would be to the same
directory where we're working. Can we maybe use this source and pointed to the image that is actually somewhere on the web? Well, that's just it out. First of all, let's have the heading. Three, That would say
image of, uh, you too. Well, go. Okay. Okay. Name this, however we would like. And now you can see that I'm heading three and having three. And between them, I have here this. Okay
, let's just it out. So, first of all again, I'm gonna open up the new browser window. Okay? I'm going to maximize this, and that's right. Used to dot com logo. Then what specifically
say that we're looking for damage, and in this case, would you like to do instead of using save ass with it before? Remember, we used to in my chest. Now we can have an option of copy
image address, so let's click on this. Now, the address is gonna be a copy to Clipboard, and we have to head over back to our email. We can again create a new image element
and in this case, within the source, what's copy and paste? Whatever we're getting back from our clipboard Now, the annoying thing is gonna be this that the obviously this path
is so long. So again, I'll tell you right away it's gonna be very annoying whenever you're gonna be getting something like this from the web. So unfortunately, this is how it is. But we can right over here. That
may be for alternative. You too. Uh, logo. Something like this again. We just want to quickly see it, and that's it. And sure enough, everything works fine. We have our image. But annoying part
would be the fact that source would be displayed like this. So, as you can see, it's pretty much we would need to spend, like, three minutes. Just scroll up and see all the source that
is starting here at the very top. Awesome. We know how we can add image to our HTML document, however, where we can get nice images and more importantly
, copyright free images. Let's get rid of the 16. 01 because it's gonna know it's really fast and all these lines of code Let me just believe this guy. I'm
sure enough right now I'm just gonna have to use any local. And while getting your images simply from Google is fine for whatever small projects were doing for around use
. Whenever you're going to be doing something commercial, you're gonna get in a lot of trouble. If you're just gonna say, let's say some kind of images and you're gonna be using him for your commercial
purposes. So what we need to do is get them and just that have no copyright issues that are copyright free. Um, obviously, there's many sites that you can use, but I usually prefer
using three of them. So one of them would be picked the bay. Then I really like pretzels. Mostly I'm getting everything from the pixels and, by the way, also has the other one as
well as you have Greatest Agra fee. And with the greatest Grafite, it's more like funny pictures, you see, as like with a bunch of people. And again it would work exactly the same way. So if
you're gonna go to the site and if you're going to find whatever you're looking for and let's say in effect, those we would like to have technology something like this, then I was they were getting very
high quality. Uh, copy, right? Free images. So in this case, let's get this laptop again. Work the same way, save him again. We would save it here. Let's say left
up, that's gonna be the name. And we're just gonna get whatever, uh, extension. It provides us anyway. So I'm gonna head over again, and we're going to test it out one more time. What are we going
to say? That this is not gonna be able to me? Alright, image. Oh, back sells laptop. Um, let's do you right underneath the heading. Three. The image again. And
we know that we have sort of tribute and within source again. We're looking for damage. No, since I would like to have left up, um, I was thinking she was left up. Um, let's say here this would be the image
of laptop. So those laptop would be my alternative text. I'm gonna save this, and sure, enough. I'm getting my image now. There sure is. An image is really
big. And this is something we're gonna cover next video. But first of all, let me just double check it. How This is going to look in my regular browser. Meaning not in this small one. That's right next
to me by the actual text. Better do the same thing. We're going to look for 1 27 45,000 I'm sure enough. Still the same as you're going to be much bigger. So next we're gonna
talk about it, how we can adjust the size of the images. Okay. Okay. We have one decent size image and one very big oversized. So how we can
render them exactly the same size or at least the second one smaller than it is right now. Now, before we do anything, I will right away. I want to tell you that. Well, this may be
the fastest way. However, you need to understand the later on you're gonna learn better ways that some of them are gonna involved to assess. And some of them are just gonna roll cropping
the image before we even rendered. But I'm gonna get into this in the next video. In this video, I would just like to show you how we can use attributes the female attributes in order to
do that. So, first of all, let's test it out. How big his damage. So let's say for to use anyone. And once we click on image notice, the image is gonna be rendered, and there's many ways that we can track it. But
the fastest one probably here, you know, what is this is going to be 259 by 194 so those are ready to pick. So then, for the left of obviously this is going to be bigger. We have
1000 by 616. Okay, so we already know that we would be looking for something like this where we have to have 100 59 by 1 94 Now, whenever we're working
with an image, not also we are getting the source attribute and held. We also have an option of height on the way and again, this is gonna be very straightforward. So as I talked
typing notice again, we're getting a suggestion that we're gonna be looking for to hide. And also, like I said we have with now if we're going to type with it automatically is gonna just to hide so with this, probably
even gonna be the past. So if I'm gonna say, let's say 260 because I believe that the first one was 259 And you know what? I maybe wouldn't want to do this with you
did me longer because this is already around it correctly. My apologies. Let's get rid of the with on the local and let's navigate to the laptop all over or laptop image. That would be more percent
. Let's add here that we would want with of 260. So let's notice what happens. I'm sure enough I'm getting my with and I right away. Like I said, the height was adjusted. Now, if you still like to readjust
to hide specifically so let's say the high my guess would be something like 100 notice. Now I'm just gonna make sure that the high this 100 but again, if we're gonna get rid of this, then obviously
we're always going to have to do with and the height is going to be adjusted automatically. Um, this is how we can basically the fastest way. Uh, we can readjust the height and with, um, the image
in the email. I couldn't be more proud of ourselves. Well, you know how to use within high. I know both of our images are rendered exactly the same or there's a big issue even though we changed
within high or even if we do it in the C s s, which I got a little learn later on. The browser is still rendering that massive Amy. And what happens is if you're gonna have tons
of massive images like this, then your user whoever is gonna be you using or visiting your website, he's gonna experience very slow load times. Um, usually, what happens
? The user is gonna wait for three seconds, and then it's just gonna leave and find a different page. So even though we have here, we have 2 59 and 1 94 when we're actually rendering is
still this guy with 1000 and 660 Um, there's multiple things that we can do. In general. We would use some kind of application, whether Dad would be photo
shop or something like that. Or there is maybe a quick way meeting. Obviously, it's not the best one. Let's say as we're working just with H T M l and C S s. And we just
want to quickly crop damage, we can use the actual Mac. Now, if you're using different operating system, you would have to research it was done on the windows. Going on the market would be
kind of simple. What is it going to look for? What image we would like to crap? Um, as you noticed. Once I right click it and have an option of open with. And once I navigate to the preview, I'm going to be given
off now, within the options, I'm going to be looking for tools and with the tools, we can just adjust the size. This is the top that we're gonna be looking for now. At the moment, I'm going to click on it. Not as here. I can change
the actual dimensions of the image now, here and write that you might be having different One would say you might have percent oranges. I would suggest going for the picture. And then if you have over here Desslok that
means that if I'm going to change the with the height is going to change automatically. So if I'm gonna write 100 notice, this is gonna give me 67. Now, once you click on a lock now, you can change both of them. So in this case, maybe
I can say that the height is still gonna be 1000. But the way it's gonna be 100 again, this is really up to you. How you would like to do it and discuss it doesn't really matter again. Let's say that I'm gonna go
with again 259 but I believe right, uh, let me log this notice set up a little bit. Sorry. 2 59 And this is gonna give me 1 73 so I
can just click on. Okay, Now, this is going to quickly cropped my image. And again, this is probably nothing. Something you would do in production, but in general, just for projects, whatever
we're gonna be doing this is gonna be good enough where you don't need to learn how you can start using the actual photos, I'm gonna head over back to our project notice again. We have 2 59 by 1
73 instead of 1000. And I can also get it. Maybe these guys again. It was a good thing to learn it was beneficial for us. But in order to save our user
, a trip to a kitchen would say to make a coffee while our page loads, we can obviously just crop them images on that way. Everything is looks much nicer and also
performs much nicer. While we're still on the topic of him, I just I would like to talk about fast in general. H demo? No, this example. We're going to look at the images of the past
portant for images. Please. Remember, later on, we're gonna be working with new pages, meaning there's gonna be multiple pages that we're gonna be working with. My just email will also gonna have both
as well as contact. So the same we're gonna work with whenever we're working with an email, that's fine. And what I'm talking. So let's say for now again. We have to images World is great
. We are good to go. I would imagine the sites where you have 50 images and you have I don't know, 25 C s s files, and then you have multiple jobs profiles. Now what's going to happen is you're gonna
have to start having some kind of structure. Having all the files here in the folder is not gonna make sense because it's gonna be really message. So the logical thing is gonna be setting up
with the same and just to decide. So there's gonna be special holder with images and reality. You're gonna have even just folder and then within images folder and have another folder for let's say, homepage images
and then involved images and you get the point. No, no. Okay, so we're just gonna start very simply, we're gonna create a new folder, and let's say holder name is gonna be very simply now, What I
would like to do right now is move these images because obviously that was the whole point. Now I can move them one by one, or I can just press on the second one as well as the first one. And in order
to select them both, you would need to hold the command now, once we hold it, notice I can just drag and drop them. And now I'm dropping them off Indian. As you can see, a visual studio code is saying, Hey, listen, buddy
, are you sure this is what you would like to do? I'm I'm just gonna break with, Say, Yep. This is exactly what I would like to do. I notice what happens. Mhm. I have the heading free. Oh, that's good. I have
the other having three. And I don't have my images. Now again, The reason why I don't have damages because this past is correct. Only if the images are sitting in the same holder. Are they stating the same folder
? Well, no. Right now, the images are, in fact, in the images folder. So what we would need to do is again, we can obviously out of here to extra pass more. I'm just going to delete it, because this is just gonna make more sense
. And then we do the same thing. Now we did the forward slash Now, forward Slash is gonna go to where I was gonna go. Payment just folder. And now we're looking for the specific image we would want. So now Okay, so damn it. So
again, this is very important because you will going to use this where your C s s we're your jobs. Make sure that the past actually makes sense. If it is in a separate folder, you
need to look in that folder and then you're gonna get an image. Now let me fix. It's the same way and again, Like I said, we can just have it here. So let's say added, uh, an images. I'm sure enough, once
we do that again, this is going to override it. Okay, let's look for the laptop. And sure enough, this is gonna be proper rendering option. Since now we have a proper pass. So always
, always, please remember to make sure that your past is correct at this moment in time, documents is small. I would even say time, so adding Commons would probably be an
overkill. How are you? How's your project? Are gonna grow bigger inside. It's wise to have some kind of documentation. What is happening in the project and for this we use the comments in
an email for the comment would be very simple. We have the angle bracket. Then we're gonna be looking for more. And then we have two dash. Now, the moment you type that as you notice you're having this green line
Now, whatever we're gonna write, it is not going to be showing on the web page. So in order to this, you can just say hello there. Um well, notice what? I'm gonna say it. It's not going to be showing here on the webpage
. Now again, we can right here now, if you would like to. But in general, you just write some kind of comments about what is happening, whether you were working with the team or whether you're just
working on this by yourself, because trust me, if you'll work on something, let's say two weeks ago, and then again, you load the file when you're starting. Going through comments really help you
to get up and running of what's happening in your project. Because even though you created it, trust me two weeks later, it's gonna be hard for you to remember now. We also have an option of just creating
comments with a short and that's what good would be. Very simple. We'll have to press command and then forward. Now the forward slash is gonna be left from your 50. Um, just like that again, we have the comment
. So let's say here I could say, um, you Damien image. Then we're gonna head over to where the second having three is I got I'm going to create another comment and let's say, laptop
image again. And just as this would be clearly an overkill, But in general, this is how we would work with come. And I also would like to show you how we can use the line break because having a comment is one thing
or you know what? No, I forgot to tell you something. We also have an option of adding the cold within the comment that we would like to hide for that particular time. So let's say that I would like to just check
how this image on the laptop was gonna look like, However, I wouldn't want to delete the you Demi altogether. What we can do over here is we can create a comment. Unless you can see, this would be
my comment. And if I'm gonna place whatever regime elements I would like within this comment, and they're not going to be displayed on the page. So for now, I just cut them out and copy and paste them in here first
of all, the green. So we can see already that they're not gonna be rendered at the moment. I'm gonna say this during this out. So obviously I don't have this anymore rendered image. Now, obviously
, if you would like to render it again, delete the comments and everything is going to be working fine. So that's another use where you would use the comment where Let's say you would like to test something else. Something looks, but
you don't want to delete that other part. Then you would just basically comment it out. Now, Like I said, back to the line breaks because, as you can see, even though I'm adding here, let's say more space in my
email. How is that Nothing is happening in my webpage because again, email would be white space collapsing. So instead we would need to use the element and the element would be line break. Now the same for
the line break would be very simple. We just need to write b R. And again we can use them for that, obviously. And then the person you know what it is. Now I'm starting to get some kind of line
breaks. Now, that obviously is only one break. So let me just company have you more just so we can see for sure that we have more. 123 So, four something on the moment, I'm gonna say, I notice
I'm getting line breaks now that would work, whether in between the image and hearing three as well as if we're gonna have some line breaks over here. So again, we just cut this out or copy and paste it
. I don't know. We can do the same thing over here. And obviously, the more line breaks, you're gonna have to apologize. Then the more space you're gonna have in between. Alrighty, then I know we know that images are important
. However, what's also important for every Web page is to have some kind of link. Now, that would be an application with when we were going to be navigating the project. That could be the link within
the actual single page more. It can be also the externally. So let's say our user can visit. I don't know Facebook or Google or whatever some kind of external information. Now, as you can see right
away. I did some spring cleaning here because I usually like my editorial screens kind of just bare minimum because I think it's just gonna help us all. If we're not gonna clutter here now
, it's a different kind of scenario. Whenever we're going to be working with the project, there's gonna be tons of information. But for the total, I always like to have it as clean as possible. Now, what about the links
? How we can create links in the email? Well, we already know the deal, right? We need to have some kind of tags, and then we're gonna place the link within attack. Now, what attack would be for the link? What would be the element
? Well, for the link we're gonna use a, uh, sure, enough right away. We're gonna have our link available now within the link tax. This is where we are, right? Text. So let's say visit your Demi for
more information now, as you can see, this one came out really long. Link. I'm sure No, no, I have my link now what's going to happen once I click this link? Well, let's think about it if I'm going to click on it where
I'm going to go. So I click on it and nothing happened. Okay? The reason why nothing happens is because we also need to fill out the HR tribute, which comes right away with them it because they are doing all the work
force. So if would manually be creating this out, we would have to write. The HR attributes ourselves. Now the extra attribute sales is where the user or whoever clicked on this link
is going to be navigating too. So here we would need to write the u. R. L Now here we can just say H t T P s and then the whole deal or if you don't want to make mistakes, or maybe you don't know
the full you our own. Maybe it's really long. You can just sit over to whatever you are all you're searching for, which in my case, would be so I can just copy and paste this and we can head over back to the
issue. Um, based it within the quotation marks. And now, once I save it, then the user should be available or users should be able to go to your damn. So is that Click
on its notice now? We're never getting to the Demi page. No, there's one thing, though. You probably don't want user to leave your side because of this moment. Notice we went to your Demi, but we left
the side that we were currently on. So maybe it's better if you would add the attributes and then the attribute name is Target and we would need to set this to black. So on the score
black. So this would be the value now, in this case, what's going to happen? Uh, first of all, I would need to navigate back. And what I would like to do right now with Target Blank is whenever use, it is going to click
on a link instead of navigating. And it didn't happen because I needed to refresh, probably, or something like that to have target Blank reset, you dummy for more. Everything is saved. And sure enough
, now, once I click on the link instead of navigating away from the side of the users going around, we're opening up the link in a new browser tab. So this probably
should be a better option, especially with an external ones where we adding this target contribute as well as we're setting an equal to black sure thing. Now we know how to create
external right. What about internally? Well, you see, at the moment we have only one home page, but eventually for the project. Let's say we're gonna have the about page the contact page, so we would need to set
up some kind of navigation. But in order to set up the navigation, we would need to have going. That would point to those pages. So how do we do that? Well, first of all, it's great that new page. Let's say the new page
is gonna be about h t m l. Now we're you know how to create a structure again. We're gonna have a simple explanation, Mark. And then let's say in the title, that's right Now, document
. Let's say about then we're gonna know that we're navigating to about Page and then right away let's create first of all, link that's gonna be pointing back to the home page. So as we know again, it's going to be very simple
. We just have the link and then here, we're going to be pointing to somewhere now, in this case, we're not pointing back to the U Demi in this case, we're gonna say where we would like to go. And in our case, we would
like to go back to the home page. So, as you can see, we just need to point to the correct file, where is the home page? And that's right here. Back to, um because that's going to be enough also
, like to remind you or to show you that we can write anything within the link. What's important is the HR. So regardless of what we right over here, we're gonna be navigating
to whatever we're pointing to nature. So just because we're staying here, let's say go to them. It doesn't mean that we're gonna go to you. This is just gonna be text that being rented. Not once we have
our about email set up, we'll head over back to the email and maybe somewhere on the top of the image. And then we're going to create a new link. Um, in this case, we're gonna be navigating too
about at Gmail. So within the 100 people gonna be pointing to about page and let's say about age or just about is gonna be good enough. Now, let's save this. Uh, sure enough
now I have my link. Now let's see if I'm gonna click on the about notice. I'm navigating to the about page. Since I know the first of all the titles different as well as I have my link
. And if I'm gonna click on the other page, then I'm gonna navigate back to the home bridge. So this is how we set up links internally within our project. Good enough. We know how to set
up external links as well as internal links that will allow us to navigate throughout their project. I won't let me show you the case where we would want to use some kind of link within the
actual page that we're working now for this example, you have two options. Either you can create a program with some kind of long Lauren fix. So let's say 5000 words or something
like this. So that is going to create a very, very long pick or we can say some kind of line break. Now I'm going to use the line break example. But again, it doesn't really matter what you do now. Before
that, we need to set up some kind of program. Where in the park, Say some text. Yeah, This is gonna be my program. And then maybe right after the program, let's just create
a simple link tax For now, This is not going to point anywhere. But we were gonna ride back. Um, back to the top. Okay? It doesn't really matter what we right, but we should
have some kind of like, no. Okay. Like I said, I'm going to use the mind break, but you can create a new paragraph and have some kind of things. Now what I'm trying to show you, let's say I'm gonna have one line break
. However, I'm gonna copy and paste it and make like, I don't know, 50 or 60 of them. Let's say this and what we have right now. So we have the page and let's imagine that this
would be some kind of long content again. It can be anything. The text, it can be images. It doesn't matter. The point of this is the user needs to start scrolling down because the user is reading miss content
and scrolling down and all the way in the bottom. We have some text. Now. What do you think? What would be a better user experience to tell the user to scroll back up and again? Imagine this being
really long schooling, and I just what we're doing right now or have some kind of link that would navigate back to the top of the page. Well, I think the link would be a better option. Right. So how do we set it up now
, In this case, the link is going to be pointing back to I d. Now, I know we haven't covered ID, and I would like to cover ID and more detail once we covered the C s s because I would
like to cover together with classes. But for now, only thing we need to do is instead of pointing to some kind of external resource or internally to the page, we need to have to start
. And then we would have the ID name. So here, I'm gonna write top. Now, what hasn't happened yet is I haven't created this some kind of device or whatever any
kind of element that has this idea of top. So I'm gonna head over back to the top of my page and maybe where I have the about before that I'm going to create a heading one and within
heading one, I'm gonna say top of the page. Now, what I would need for this element is to have this attribute of the ID. And again, I'm gonna cover ID's in more detail
once we start learning with he says, because I think it's just gonna make a little bit more sense. But with an ID now, we would need to have the name and send some pointing here within a trip to the top
ID. Obviously, this would also have to have the same name if you would want this to work. So here. I'm gonna write that now what's gonna happen in this case and maybe had a little bit more, but line breaks just so
you believe me, then this is actually happening. So let's have more line breaks. And as you can see right now, I have to do more scrolling. But the moment I'm going to click on it. As you see, I'm navigating back to
the top of the page. So this is how we would have set up the internal links within the actual page where we would have some type of element again, it can be any kind of element that we're
gonna have the ID. And once we have the link, if we're pointing this link to that particular element and obviously the names need to match don't right here. I don't
know John Doe. This is not gonna make sense. Then if the main names match, we will gonna be navigating to that particular part of the page. Up until now, all are
examples with links were with. So we had some kind of link and then we place the text within the link and then obviously the link was this place and we were navigating somewhere. However, we
also have option for placing different things within the link. We're just not limited to the text. So let's just so let's say here on top of the page and again, this is just so we can see a little bit clearer
. Let's place a link. And for now, let's say the link is gonna be, I don't know, going to, uh, the same thing. Maybe your Demi dot com again Just to save me a little bit of time. I'm just gonna grab the sex. You
can obviously right it if you want. But I'm saying copying basis. And instead of placing the text you Demi or John, though whatever we would like to place there, we can place an image. So let's say here, I'm gonna
have damage. You know that we need to have the image element within the image elements in our source. Now, in this case, let's look for the images. Now, we didn't Images folder. We also have an option for laughter
. So I'm just gonna grab this image. And you know what? Just so it looks a little bit better again with, uh, maybe a with of 200 so it's gonna be a little bit smaller. I'm gonna skip on alternative attributes
. Uh, let's see what's going to happen. So as you can see right now, I have the image. The difference, though, as I'm scrolling or I'm sorry, as in hovering over damage. Check this out. So I have this will
like on That tells me that pretty much and this is a link. Now, as I'm hovering over you, then the image things like that don't happen. So what this means is that this is actually a link right now. So
if I click on it Sure enough, um, navigating to them, no. Last but not least, now that we know that we can also place an image is within the link or not limited. I also want to show you that Let's
say if you don't know right now, at this point where your link should be navigating, let's say you know that there's gonna be a link on the page. However, you don't know right now the u R l When
we can always do, we can just place the half track on. That way we can be having a link. So it's gonna be a link is gonna be this play. There's only and it's gonna be clickable and everything, but it's not gonna navigate
anywhere. So that's also an option. I mean, again, you can call this however you like, could be an empty link. This could be a dummy link. It doesn't really matter. The main point is, instead of placing u R l with
we're just placing the hashtag jobs. We covered links in the email. Now, I'd like to switch gears a little bit and take it easy on us. So first, I would like to just get all this information
because, like I said, I would like to keep this clean. Everything within the body I'm just gonna delete, and the moment I'm going to save it, I'm going to have the black page and here within my text. Er, I would like to
talk about sub and sub elements, and they were going to be a straight forward as it gets. So let's say we're gonna have a creating a heading one and within heading one I'm gonna say, um
hello. Hello? I am. And here I would like to say, first John in town. No, I could obviously write it like this. I can say first, First John in town
or I can use and some elements, and again, this is gonna be as straightforward as it gets. So first of all, let me create a little bit of space, and as I start typing notice again, I'm getting from damage suggestion
. Now, what I would like to do right now is grab this first and play within the and again you're gonna see in the second what happens. So I'm gonna spare us a little bit of time and
let's just create these elements first and then obviously going to be very clear of what is happening with these elements. So we don't have to spend hours and hours of talking about it. Instead, we can just look at it. So
in this case, I'm going to use sub element. Where are the first one was up on the second one of the sub. At the moment, I'm gonna say with notice what happened? So I'm having my text, and then everything is gonna be placed within the top
is going to be here on the top. Uh, the rest of them thanks. And everything that's going to be placed in the bottom is obviously going to be here in the bottom, meaning everything that's going to be placed in the sub element
is gonna be eventually showed in the bottom of the rest of the text. So, like I said, straight forward as it gets, if you ever needed you can use up and sub element. Good
. We know how to use, uh, sub elements. Next. Let's look at how we can work with strong and emphasis elements. And we're gonna do the same old appeal where I will gonna create
some kind of program. And let's say within the program, I'm gonna say, I don't know 30 words. I think that's going to be more than enough. And then if I would like to use the strong and then moments, I was gonna
have to create them somewhere within this program. Yeah, and they can be really anywhere. Just make sure if you would like to have the image suggestion you need to make, like, a little bit of space, As you can see, if I pressed
baseball and this is going to create a space and now I can write whatever element I would like to have. So since I'm looking forward to strong element, this is where I would like to play something. Okay, I'm just gonna grab whatever
I was like over here, the three words or the whole Sometimes it doesn't really matter at the moment. We're gonna copy in place that notice that the text that is within strong tax is both
. Now I can cover emphasis, and then we're gonna go a little bit more detail because there's more than meets the eye with these two elements. So let's say again, we're going to pick some words again whatever
amount awards we would like. So it's a M. So that would send for emphasis. Um, let's say in this case, speak a little bit more words and just stopping pissed. And sure enough, as
you can see right now, the text that is within the emphasis, uh, element is right now this plate is talent, So it's all the fun. Now the key with these two elements, like
I said, there's more than meets the eye because we could have achieved is simply using the C. S s. Um, in general, you would always prefer see, assessed just because you want to have all your cells in one
place and services Asian email just for the structure. You don't want to mix and match them Now. In this case, however, is the fact that women, uh, strong and within them elements emphasis
elements also help us with accessibility. So let's say you have a user who's accessing your project with a screen reader. Then the screen reader is gonna treat this differently
. Let's say whatever is within the strong as well as whatever we have within the emphasis. So that's always You should keep an eye on whatever you're working with strong and emphasis elements. There's gonna
be some cases where we would like to use special characters, the nation. So maybe let's look at how we can work with them and how we can access first and foremost. Let me get rid of this paragraph. I'm not
going to need it right now as well as let's create a heading one, maybe. And you know what? I didn't want to delete the body, so let me just, uh, go back. Uh, here, let's say that there is going to be adding
one, and within heading, one would like to use the copy right? Special character. I can just right over your copy. Alright, so some kind of text and then how would access the special characters
in it? Well, first of all, I would have to access the end percent time, and if you know that you need to do the ship as well as on my keyboard at least is some of the, uh, number
seven on August. Now I'm getting my and percent the next I would need to come up with the name that I would be looking for. So obviously I already know that I'm gonna be looking for a copy and check it out. I would need
to write whatever the character I'm looking for. And then I would like to use the semi colon. For the moment. We're going to save it. I'm gonna have the whatever text ahead as well as the special
character. No, you can look for special characters. Obviously online there's a bunch of tables to give you all kinds of names. I'm not gonna go through those tables. It's really gonna be time consuming and
a lot of wasted time. Just remember that whenever you would be looking for some kind of special character again, you can just Google machine special characters and it's gonna give you tons and tons of options
as you can place it within your agent amount element. But again, the syntax would be exactly the same. We would have the n percent again, we would know some kind of name or number that we're looking for, and we
would finish off with a semi colon and then we're gonna have the special character, this plate in our H t m l document. A very useful element in the email is on word list. And
or now how do we create on our list and order list in the at Gmail? Well, first of all, we would need again the element and this element name 40 on our list would be u l
and sure enough, right now, I have my own list. However, if I was wanting to have some kind of items within the on our list, I would need to use the l I own. So the syntax would be for an ordered list
. We would have the honour list element and then each and every element within this list, we're gonna have the l. I element down here we can write whatever would like. So let's say we're just going to have some
kind of name, and I have right now the list item with this bulletin point shown on the list. Now, if I would like to copy and paste them Let's say I'm gonna create two more. Second one
is gonna be theater. Um, 31 is gonna be Sarah. I'm gonna have these three list items this place has on order list. Now, the question would be, well, where we're gonna use
the list. Well, the biggest one where we always use the analyst would be forward navigation. So for now, our So we only have the about page. But imagine that we're gonna have multiple pages. We can
just place our links here. So either we can create a new one more. I can just, uh, the lead. These guys, Peter, let's also delete Sarah and within the list item within the
list. Instead of placing some kind of tax, we can place the link. No, again, I'm going to use just feeling more than me and let's write your home. Then let's grab this link and let's just copy
and paste it within the next two list items. Uh, let's just right over here about as well as I don't know, contact would be our third one. Since we do have the about, maybe we can also write
the about, but I'm not going to navigate their again. We already covered this with the links. Now, the moment we save this notice, we have our navigation. Now, obviously, keep in mind we haven't added any kind
of C s s yet. This is where the magic happens when we go to the town. But in general, this would be our navigation where I'm gonna click on it. Obviously, I'm gonna go through the about page
as well as I have the other links this play that list items within my on order list. Similarly, we can also create more list. So first, let me just delete the list
. And again, syntax would be exactly the same difference would be We're not looking forward to list, which has the element of you. Well, we're looking for the order with the in the element name would be Oh, well
, and here again, we're gonna do the LA and again maybe let's write some damage. So the first order list item would be John. Then the second one will be here, and the third one
, we're gonna have Sarah and let's see what we're going to have necessary. That's Sarah. And the moment will save it. Notice this would be number one, number two, number three again
the same idea as with an order. Or we would need to use the different element name, and then we would have the order list instead of an order list. We also have an option of creating
the next list. So let me again delete the first and let's create a new. But again, it would work exactly the same way with both of them. So again, the syntax was u l and then within
the list, we have the list item. And again, let's start first with John, then copy and paste it. Um, the second one is gonna be Peter and sir So our simple on our list
and sir, but let's say that we would like to add some more specific information about theater and then okay, the fact that he already knows the amount now within the list item. So within the list
item where we would like to have our next list, we were gonna create either an order list or list on. Okay, so let's switch it up a little bit and have it as a order list. And again, we're gonna have a list
item. I don't know. Okay, let's say the first one is gonna be email, and let's copy and paste it on. The second one is gonna be the CSIS. So the moment will I'm gonna save our email documents
. We were gonna have John. Then the Peter's gonna have already arrested list where not only has a list item with just the name. We're also gonna have our word list
within this this time. And this is how this is going to be this place and again, you can get really creative with that if you'd like. But just to let you know that this would also be your options If, in your project, we're gonna
have to use some kind of table, we also have an option of working with tables. The nation, you know? No, Before we do that, there's always we'll need to get out of this on the list first
, and then let's start working with our table. Now, if you would have to get all we would have to create the table element with everything that we already know so far. Well, I think you probably guessed it correctly
where you said Well, first of all, gonna have to create the table element. And then, obviously, for each and every table, we would have the rose. Um, so? Well, as we would have these columns, right? So in order to
create a row, we would need to create a role element. And then when the road, this is where we would create our data and again whatever columns who would like to create meaning, if you would want to have
10,000 columns more, if you'd have four comes, the same thing would work where we would have the table data element and then within the table data. This is where you write our information
again. Let's just have some kind of dummy text. We have the John. This is going to be my table date. So we are gonna copy and paste it again. Um, let's say the second one would be Peter
. Then again, Sarah and again, four days territorial. I don't see the point of coming up with some kind of exclusive examples. This is just going to give you a general understanding of what's happening
. So the moment table data, I'm gonna be adding meaning the more columns I'm going to be, adding then obviously, the more columns are going to be displayed. Now, we also have an option of having
the table headings. So in our case, we're gonna have let's say TR. And within the first table row, we have element of Ph, which was time for table
head and within the table head we can write again. Whatever it was like. I'm just gonna say here some info, and we're gonna copy and paste it. And now I'm gonna have three table headings as well
as three regular columns in the second row. And if I would like to create more rose, I would just have to create again knew row element and just keep on adding the table data elements
for every page. There most cases is always a form that allows us to collect some kind of data. Whether you want to use it to set up or something, or whether you just want this personal
information, his or her, you would need to set up the form. Now, how do we set up the foreman issue? As always, we're gonna have first of all, the form element. And now, within the formal notice, we're gonna
have the action. Now I need to tell you right away that whenever we're working with forms and at Gmail and C. S s, we will just gonna be displaying because we're all going to be working only with the front end
. Now, in order to collect the data, you would need to work with the back end language like, for example, PHP. So in our case, this action as well as there's gonna be another one that you're gonna see a lot
, which would be the message, is not going to mean anything, because again, we're not going to collect the form. And there's also gonna be a few attributes and in our case, are not going to make any kind of changes. But later
on, as you working with PHP or jobs to this, we're gonna make sense now what we were gonna do later on as we're working with this project, So not email project. But this project we're
gonna use the service called forestry, which is for free, by the way. So again, don't freak out. You're not going to have to pay anything but this service, the form spring is gonna allow us to have
our form but the data is going to be submitted to our email. So, as you see is still using the action and they're still using the methods. And just to quickly go over action, basically
with me where this information would be sent and the method would mean how this information is going to be processed. And with the Post request, you basically would be adding information to the service
again. I digress a little bit, but just to give you a general idea now, like I said, we're going to keep on working with the form. So the first thing that I would want to look at is the input, because that's going to be
our most basic type of form. Input that we're gonna have is just a general input. Now, with an input, you're having multiple types you can have. Let's say input. There's an email, but
the most basic one is gonna be text. So in this case, we can just write that and the moment we're going to press tab or enter, we're gonna be getting this form with Let's say type like I said text, which would be the most
basic one, and we have a few more, actually. Now again, Name attribute is going to be used whenever we're collecting the data, because this is something that's going to be shown again, you know? Okay, so we can write whatever
would like over here, and nothing is gonna change. Now, the idea is going to be used for label, which is I'm gonna show you in a second. But for now, let's say that I would want to save it. And as you can see, right
now, we're having our first thing. But so I can always think of head over here and type of that was I would like. But nothing has happened. Now, for every element that we're going to have in the form meaning
the retirement, we also would like to have the submission. And when I said for every meaning for every form out there, you would also want to submit it, right? Otherwise, what good does it make if
you have the form that you cannot submit Now again, I'm gonna be in our case, we're not going to be collecting the data, but I would still like to create a form, submit elements because you were going to need them later on
anyway. Now we have two options we can use just a simple button. So let's say we have the mutton and within the button we can write type. And for the type we would have to write something. Now, if you're we using
the button, then obviously we're gonna write our values in between the button helmet. And if I didn't cover before initial email the button again. But it would be extremely straightforward
, which is right, The name of the elements, which in our case, would be button and then we have multiple types of them. So now, okay, this would be submitted. So as you can see right now, the submit definition. Now
, if you would like to have some kind of space in between them for now, we're going to use the actual line break the later on. As we start working with this, we're gonna see how we can use this
using the disk. So at the moment I'm going to save it. I'm gonna have my input. I can write whatever I would like to have in my input. And I can start clicking. Submit now, For now, what's happening is the
form is being submitted back to the same page again. This is what happens if we just leave this blank so you can just write some kind of value. I can submit notice we're gonna have our name here
, but again, we're not going to work with this right now, But in general, the form is going to be empty again because we have resubmitted this to the same old page. Now, we also have an option
of input of submit. So not only the button, but also input. So let me first comment this out. Uh, that's right, that this is going to be important. And for the input, I would like to have again the
options. So maybe we can just type the input first and notice. If I'm not selecting with them, what kind of important I'm gonna have? I'm gonna have the general text, but here, I'm going to change this
, and I'm gonna say this is not going to be equal to, uh, Texas. It's gonna be equal to the submit. Now, the moment we're going to save it. See, this we have right now are now. This is all working great
and fine. and we're I also would like to see what's happening with the ID. No idea is going to be used for label element so above the input. Let's write that there's gonna be a label
home and and within the label element, we have the attribute of four now within the four. This is where we are targeting the ID. So in our case, if we know that the idea eventually is
going to be the name, which is gonna be the value than the moment I'm going to have the four attribute, I'm gonna have to have the same idea that I have a Ford input. They're on target. And let's say here, I'm
gonna write first name. So this would be in my label now what's happening with the label, then, as I'm clicking on the label notice right now, my input it was gonna be highlighted
. And if I'm going to change this, let's say I'm gonna make a mistake and this is not gonna be name. We can click all day long, and the label is not going to be high with. So that would be the purpose for the label as
well as we have other options. Let's say we can have the perfect so we don't have to work with labels. Although it most cases it doesn't make sense if we're actually implementing the label whenever we're working with
input. So now let's look at other options that we have for the input. And again, we're not going to cover all of them. But let's look at more popular ones, which would be password an email again, the same
old deal. We can write input first of all, and then for input. We can either use the eminent where we have just to call in, and then we're picking more. We can just have the general input type
and then change it. So okay, so it's right that we would be looking for the password. And again we can write the name where we can have two options. So in this case, since we're not going to be using the name actually
, anyway, we're not going to be collecting the data. Maybe let's right above the input that there's gonna be paragraph and that's my password. So again, we're not limited to just using the label. We
can just use the simple paragraph and we're still gonna have the employee now. Maybe to have it just played a little bit better. Let's have the line break first. So this is gonna be our submit, and then what we're gonna
have within the password. Now, we have two options. We can either write a placeholder, so it's all right. Uh, password and the place holder is basically going to be displayed just to
give you a general idea what the user should be typing. However, the moment I'm gonna start typing notice, first of all, the password or the place holder is gonna disappear as well as we
have a type of password in for our imports are going to be here, so there's gonna be just these little both important Now. I also have an option of the value. So the value
attribute for input and to show you how the value works again, let's create a new input and we're gonna right first of all line break. And in between these two line breaks, let's create the
input with an email and maybe, in this case, let's use this. Am I calling or I'm sorry calling and let's say that we're gonna be looking for the input type of email again, Name doesn't really matter for
us. I d as well if we're not using the label. And also, I need to let you know that not only for the label we can use the ID it's obviously can be used whenever we're working with jobs. That's
also another option. But I again I digress a little bit. And within the input type of email, we were gonna have to submit the correct email, meaning there has to be an outside if I'm
going to try to submit something that doesn't make sense. So let's write. Maybe email. Uh, I don't know. Email, email, email. Then, as I'm gonna be clicking, submit notice there's
just gonna be a little bit of, uh, email validation what it's gonna say. Well, you cannot submit because there's after missing. The At symbol is missing in your input
type of email, so we are going to write something like some gibberish, like email, uh, at email. This could be an option. So it's the email at email again. This is not going to validate the actual
correct email, but we will gonna be able to submit right now because we did have this symbol and last within just simple. In protects, I would like to point to you to the
value. So the value attribute is going to allow us to hard code something and that in most cases you would use something like this whenever you would like to have some kind of data already. So let's say
you're editing something, so there has to be some kind of data that's already being passed on. So let's say in here I could write email at email dot com or something like this, whatever would like
, hear whatever would like to right here within this value. And sure enough, right now, I have already hard coded data. Now the difference between the place holder and hard coded data. At the moment
you start working with a placeholder, the place all that is going to disappear with the hard coded data. This is already going to stay. So with the value, the value is going to be actually displayed
now where we could use value. Well, as you can see here we have the input type and the type of submit. But what if I would like to change the text because by default we're having here to submit. So here
I can just say value. And let's say, uh, submit, please again, whatever we would like to right over here, it doesn't really matter, and then we're gonna save it. Obviously, I'm gonna be
having the submitted. So these would be the basics of how we can work with input types. And again, we would first need to have some kind of type. And the most employers one was going to be
text. Then we're gonna have usually name it should be, which we will use only when we are submitting the data. So we're never collecting the data, and then we have an option for the i. D
. Attribute the idea. Actually, we can use the label, or if we're gonna be working the jobs, then for the label, it will allow us to click on the label. And if the ideas
match with the four, actually, then the form is going to be highlighted with the password. We're gonna have our both in points. So the password is gonna be him for the place holder. Information
is gonna be before use attacks anything but the moment you start typing, obviously the placeholders and disappear. Now the value is gonna give us the hard coded values
whenever the form is shown regularly. So I can obviously submit this also with hard coded data. But it's still gonna show up right away because I still have my values. And we have two types
of options of how we can submit the data, whether that would be the input with the type of input, as well as just a button with a type of submit button input elements are
not the only thing that we can just play within the form. So let's look at the other popular ones. Um, with your permission, I'm just going to continue working with the same file again. If you would like to access
the resources of the previous video, you can just download resources for the previous video. But after the email and put what was going to look at the few other more popular ones
, No, the first one is gonna be text area where we can have some longer description. Um, you can already see that right away as well. This gives us you actually a good we haven't seen before. Now, first
one would be columns and the second one is gonna be the roles. So let's say we would like to have some kind of description. Check this out. So again, this is not gonna be styled very nicely right now because
we have everything all over the place. But let's say that if you would like to have some kind of line break in between them again just for styling, for now, we're gonna have our description. Let's see here
. And maybe we can just have the paragraph of the description. And we can obviously, right. Our description within our detector and columns would mean how many columns? If I'm
gonna say 40 I'm gonna have 40 columns. If I'm going to say 20 we're gonna have 20 columns and the same thing would go for now. Also, we have the radio buttons and for the radio buttons
. What's unique is that you can have only one value, meaning you can submit one value. That's the whole point of the radio. But now you don't have to specifically do it that way. But that
would make sense, since they're obviously were designed for that. Okay, let me have the line break just so it's gonna be displayed better. And let's say that we're gonna have a paragraph which ask, uh, please
, we select select our your Hayward coding language. Hopefully, this is written correctly. Once we have our paragraph reinforce what is
your most favorite quoting language? It's also maybe add a question mark gonna make a little bit more sense. And then we are going to be working with input type of radio. Okay, we can you send my call, nor we can
just create a basic one and change it. I'm going to use the right away, and here I'm going to have the name and I d No, I'm not going to need any of them for now. Meaning that we're gonna use later on name. But for now, I'm not going
to use it. Um, let's just write that this is gonna be jobs. So once I'm gonna say would notice, I'm gonna have my radio, but, um, there's gonna be some kind of value now. The thing is, with the radio buttons, the name
should match because the whole idea behind radio button is the fact is that you would just choose one of them later on you, We're gonna have select boxes where we can pick multiple. But
if you would like to use radio button, the name of the input should match. Now how this is going to look first of all the copy and paste this Let's say there's gonna be three of them and let's write the second
one is gonna be our language. And the third one, uh, we're gonna have as Python. Um, now, at the moment I'm gonna save this, I'm going to have an option of choosing one over here, because again
, the idea was would be that if I'm selecting something now, you also would want, as you're submitting it as some kind of value because you not only would want to click on the radio button
, you would like to collect the value. Okay, so we're going to hard code that this is gonna be jobs Now, obviously, value has to match Do whatever you would like to submit. If you would like to submit some kind of John Doe. Hopefully
, you need to write it in the value John Doe. So, in our case for the job, we're gonna write all your job. So this is gonna be my value as well for the price on the copy and paste it and you're gonna
write paper. I hope you understand the whole purpose of this since you would want to submit this kind of data, whether this is gonna be the job of language, your job, language and
radio button is going to allow you to choose which one you're submitting. Whoever the value is gonna be the one that's passed on. Whenever we're adding this information to the day, this is
just showing what the user is picking so again, in our case, we're not using the actual value for now. But it's obviously important to use it later on as you're actually submitting the day. Now, if you mess up
here with his name, remember the name it should be. All of them needs to match. Because if I'm going to do like this, if I'm going to say that, let's say the second one is going to be not coding. It's gonna be cold in. And if we're gonna
save it now, the trick here is that I can pick just it and I can pick job and this is not something we would want with radio button, because the whole idea is to use check boxes for
Okay, So your next question, probably as well. What is check boxes, and how do we start using them? Well, again, we're gonna do the same old deal where we have, first of all, probably some kind of line
breaks in between, so we can see a little bit better. And let's say again before submit and right after the radio button and the line break, and we're gonna have to get have the input. Now
, in this case, this is gonna be check box. So and we're not looking for radio. This is gonna be check box. And you know what? Right away. Also, let's have the paragraph. And that's right. Uh, the same old deal that
we had before. So, uh, with your permission, I'm just gonna copy this just so we save a little bit of time as well as you notice, we have type of check box. And now again, we have the same old deal
where we have the name as well as the valid. So what do you think would a value what we would like to write. I think we can do the same thing. Right? So we have value. First of all, it's gonna be jobs. That's gonna be
the first thing that's going to be passed on as well as we would need to ride the actual jobs compared. So I'm gonna say, you know what? Okay, So this is gonna be jobs now. The difference with actual check boxes
. His that we can pick multiple. So let's say we're gonna change First of all the name to programming again. This is gonna be your name, okay? I mean, and let me make sure that I read this correctly. And now
it's copied basis. Let's say 123 And you know what? I did one too many. So let's first of all, change whatever while you have, because I was so we don't want to strip or
three jobs in our case. Who would want only two? Sorry, we would want only one. And let's change the second one the job. This is also gonna be value of job. Uh, value my
son. And again I know I'm repeating this, but the values were going to use only when We're submitting data now. You could write whatever you would like Order. How much? Right on. Right over here. Um
, what we have here is the check boxes. Oh, with check boxes, we can click multiple so we can choose. Let's say that our favorite languages are going to be all three of them. So that would be the biggest difference between check
boxes and the radio buttons. The simple fact that with check boxes we can, like multiple, we can choose multiple, but with the radio. But the whole idea is that you're just choosing
one. Okay, so we also have an option of select. So select would be something like a drop down menu or something like that. Again. Same old deal right after the python. Let's
create maybe in this case again, paragraph and the paragraph is gonna same old deal. We're gonna have the same old question, because again, I don't see the point of being really creative during the editorial
right now, because the most important thing is to understand the general concept and for the select box, this would be different. Where again we create an element and the element is going to be select. And
here we need to write. Let's say what kind of name it would be. Now we're gonna write again languages. We're just I'll just leave the ID for now. And, uh, you know what? You know what, uh, one
last thing that I wanted to show you with, uh, check boxes. We also have an option of check. So if we have checked already the check box, let's say, by default, uh, we can add. So
for this, I'm gonna head over back to it. Say my first one and we have the attribute of checked and we can just leave it like this or we considered equal to check is gonna work exactly the same way
. So notice now, once I have to check for the job is going to be automatically check. Now I can still on track it, but by default is going to be checked since we had a decision and we can add this to all of them here. One
and sometimes you're gonna see the long way written not to the email. Where are we going to be looking for check is gonna be the check again. This would mean exactly the same thing. I
was just having a check like this. So let's get rid of it. And now let's finish off. We had to select now within the select. We have options. Those would be something similar, like you have
with order nor list. Remember, you have the list items. So the same the over the work with select where within the select There's an option now within the optional again. We're working
with the values. So we're saying Okay, what is the value here again? We're gonna start with, uh, your script job script, which again will be submitted. I know I've said this many times, but
I just think that it's important to kind of get this point across where the value is going to be shown. So the text is going to be showing within the email, but the value is gonna be something that's gonna be submitted
. Now again, we have a few other options. So with me, you know what? Maybe with me, I make this a little bit smaller on the right hand side. So then we can see better and your full copy and paste this
multiple times and again, we're going to do the same deal where we have JAMA, where we have also python python. And we also would like to change these values. So it's a
job on the last one, but not please. We have the python. So this would be a drop down menu. And you know what? Maybe let's have a little bit more mine break. Uh, sure
enough. Now, this is there's gonna be a little more space. So if you want to click something, let's say again we can choose. Um, this is gonna work. So let's say for want to test it a little bit, Let me just write some numbers here. Had something
to the email. This is gonna work description and something. Let's say from the select is going to be selected a job. And again, we can just submit now in the u. R l. We're gonna see our key
value pairs if we're gonna paste it or whatever. If we're gonna name this bigger notice now, these are gonna be the value pairs repairs that are going to be submitted again and not okay. We
don't care about them. We only will gonna care about them. Has we start working with some back in language. But this would be the general principles of working with the forms and the H demo
. Awesome. We're done covering the most important parts of issue again. This is just my opinion. Obviously, you can find more and more information about more and more elements, but in my
opinion, this would be more enough to get up and running with it, you know, Now, before we dive into our first station project, I would like to cover two things that I find really important
regarding whether we're working with jobs, triple working with email or see if and those would be keyboard shortcuts as well as former in our code. Now, let's start with the easiest one, which would be four to making
our code. So we already know that email is white space collapsing. Right? So if we're gonna right here, let's see paragraph, we're gonna type some text that I'm going to have more space and I'm gonna take more
text. I'm gonna say with the whole text is gonna be displayed only with this one space. Since everything is collapsed, however, has we're working in the project in our amount or I'm sorry without
, uh, Texter. Notice how this gets really annoying really fast where we do have these spaces. And again, for now, we have one. We have body with one element. Or if I'm gonna
have another one like that, I'm gonna say again, other programs again time some mumbo jumbo gibberish or something like this and yeah, yeah, yeah. What's going to happen again? It's gonna get
really hard to work now, granted, Right now, I'm obviously doing begin just so we can see everything better in the editorial. But in general, you wouldn't want something like this because it's gonna
make your life really hard. You are gonna get annoyed really, really quickly. So what would be the solution for this? Well, you can say I mean, jeez, just don't do that. Just delete everything
and make sure that everything is displayed correctly and that's true. Yes, you could do that. However, there's a better way. There is more automated way where I don't have to worry about what
I'm doing, meaning whether I'm actually typing everything correctly, we can use the format for that, and in order to get up and running with the formatting, we would need to install another
extension. So already we know that I feel we are gonna have to head over to this, like on click on Extensions. For now, we should have life server only installed unless you installed something
else. And here on top search bar, we're gonna write free. And then we're gonna be looking for two teams. They should give us the previous. This is what we're looking for to install. So we're gonna click on this and we'll get
it. Our as we before we installing or right after we install it doesn't really matter. They tell us to use this editor at format on site. So this is something that we
should also change in our settings. This is kind of important for this to work the first of all, Let's click on his tall and let's see, by the time this is gonna be the next calling, I'm probably gonna tell you my whole life story
. Hopefully not. It takes for some reason, quite a long time, so hopefully it will gonna be done installing. I'm sure enough it does. So now I can reload my text editor. First
of all, this is gonna be my first point, then I would like to close. Probably these extensions. We can just go back again to our folder structure. And now let's navigate to the same
. And again, we're gonna have to look for two things. So first one is going to be editor formats on save, so we can just write editor. And you know what? This is not going to give me what I wanted. This probably would work
better here in the Jason object. I just right on save. So this should give us an option. And this is what I was looking for. So we have format on pace and form. I don't say. Now I would
like to click both of them. Um, again, Since this is gonna auto save, we don't need to save it anywhere else. And now let's go back to our farm. So what's going to happen again? For now, everything is not
formatted. But let's say again, I'm going to have one more paragraph, so that's great here, Another program. So I'm gonna have the tags and for some reason I can get them. And again, let's write it the same way
where we're just typing some something that doesn't really make sense. Now, the moment we're going to press, save notice, what happens? So now the visual studio code, Where the help with our extension
? Four months, everything nicely. Now, I understand that from now it might not seem very useful because we really have three paragraphs and all. The editorial that we did was pretty much six
lines of code. How are you as we're going to start working with the project, And as you're gonna keep on working with the assessment says project formatting, your code is really gonna help you out
in 11. And by the way, uh, you did need to restart a server because obviously we didn't reload the server, so I did this already behind the same. But if you didn't do it, then
you're gonna have only two paragraphs shown. So again, you would need to restart the server by going life. And just to make my point across, you should want to have some kind of formatting
for your code, because this is going to be really painful if you're gonna have to do it manually. I guys, in this way, I would like to talk about keyboard shortcuts Now, in general
, the main ideas to save you time of not using them out. Because the more and more Web development with interesting job you're gonna do, you'll notice that instead of reaching for
the mouse each and every time, you need to do something. If you're going to use a keyboard that we're going to save you a lot of time in a long now I have to warn you right off the bat that in the beginning
they might seem like a hustle. So you might be like, Well, this does not make sense. I can just use the mouse and you can. But I would suggest incorporating them one by one. Let's say learn one
of them, and then every time you needed to start using it and then eventually pick it up more and more and you'll see how your work for he is gonna improve dramatically now, first and foremost where
we can get all of them. So if you'd like to know all your keyboard shortcuts individuals to your code where you can find him well, need to open the new time. Then we're gonna get the welcome
screen. I notice. Here we have principle Keyboard teacher. This is where we're looking for the keyboard short now. What's going to happen? The moment you're gonna open up, these are going to be your Children. Now
, nobody is expecting you to remember all of them. Obviously, it's impossible. Especially like first day. And I wouldn't suggest memorizing them from for some kind of reason. Instead of like I
said, I would suggest incorporating the most interesting ones and then one by one, pick it up more. Now, what I'm going to show you is just a few other ones that I'm using
, Uh, maybe the ones that I kind of feel most important ones. I don't know. It's really up to you. You'll see again. You want to use them. Great. I don't want to use them. It's also fine. It's really up
to you. Now, whenever I'm gonna be talking about the option key, I also can mentioned that this probably would be all I'm pretty sure because as I'm looking right now, my Mac keyboard
, it says option. But I'm quite certain that it would also mean out. Um also like to mention that whenever I'm gonna say command in most cases on the windows. This
is going to be in control again. I cannot guarantee that. But in most cases, I'm quite sure that this is gonna be the case. Now, let's start with the most basic one, which in fact probably
has nothing to do with visuals through your cold. But you can still use it here, and that is Command Z, which is for I'm doing something. So let's say I'm going to write something. I'm gonna
say there's going to be heading one on the head and one is going to be a little world. Now I'm gonna copy and paste the line, which we're going to learn later. Um, you know what? At some point, I'm going to decide that I don't need this
line, So I'm gonna delete this now. What would happen if I would change my mind again? And if I would want to get a line now, obviously I can create a new one, but the fastest way option would be pressing
commands. Um, it's pretty much undo is everything that I did last. Now again, we also have an options of command C for copying and command plus for patient
. So Also, those would be the basic ones. And if you want to check some commands, let's say for Eddie. As you can see, you have the undo and the shortcut would be command Z and we have redo again
. That would be shift command Plus and then I have copy, cut, copy and paste. So those are the very basic ones. However, even though they seem basic, trust me undo is gonna save you
a lot of times whenever you make some kind of message. Now they're interesting. One would be creating multiple cursors. So let's say that I have some kind of, I don't know, text. Um, let me copy
and paste more lines. Um, if I would decide that you know what? Not only I want to change Hello world to help people on one line. But let's say in all six of them here now what we can
do is we can hold the option, keep more help, and then, as we're holding it, then start pressing on the different lines. So now I would like to place a card question here
, place the cursor here as well as I would like to place the cursor right here. So now my car, sir, instead of one line is on six months. So what I can do right now is I can just delete
in the world and then just type whatever I would like because you can see this saves me a time of jumping from one line to another one and then adding, Hello, people. Hello. People have people again. That shortcut
would be holding the option, plus keep clicking whenever you would like to place the cursor. Obviously, in this case, I would like to place my cursors where I have the end of the work
. But in general again, you can place them anywhere you would like. And I also let's look at how we can select the whole line. That would be an extra. So let's say if I would like to select it on on
the second line. Now, of course, I can use the mouse and I can do something like this. Or as we're navigating, I could just press command and plus alright notice right away
I have my line selected. So if I would like to delete it, I can just delete the line, select another one. Okay, Sure, enough. Select another one. So, like the last one, we just move the cursor down as
well as just the leading going, Uh, now, okay, we're not touching the mouse at all. Once we know how to select on, we can also look at how we can navigate meaning move
where the words start around. So let's say that we are in the beginning of the line and we would like to move to the end of people. Now, obviously, we have an option of just moving the cursor or
clicking it with the most. However, we have also an option of holding the option. And then, as we're holding the option, keep, we can move. Either Is that right? Or to the left Notice What
happens now? I'm moving with the work, not just one. Move the cursor or with the actual amount. So again, this is gonna save you a lot of time whenever you have a big line
. But you would like to move with the words not with actual cursors and stuff like that. And also we have an option of right away moving from the end of the line to the beginning. So if I'm gonna press
command and again left and right now, moving from the one side of the to the other side of line. Now, also, I can move up and down the whole document. So if I'm going to press command
up, as you can see right now, we're on the document. And if I'm going to press command, um, down now, going to be in the bottom of the document. Also, where interesting is command
and D. Where'd you get the same selection? So let's say not only we're gonna have to be heading one, as it was the second heading one. But we're gonna have, let's say, heading too. Hello
, world. And then again, it's copy and paste the line. That's maybe change this to hello, people, people. But in this case, I would like to change the anyone again. Back
to anyone. I'm sorry. Heading two back to heading one Now. What would happen if I would like to select all the heading ones in this case again? Not the heading to in a big in the middle of that has
the whole world, but only the heading ones. Well, I have an option as you notice as I'm hovering right now with my cursor over to heading one. If I'm going to press to Mandy, then I'm going to select
what I would like to start selecting. And if I'm gonna keep on pressing command, then now I'm selecting the second one. So now I have two headache ones that I have the third one and then I have the fourth one on
this case. If I would like to change this to, let's say, heading for I can just change on all of them. And again, this is really powerful. When you have 15 of them or something like that, it really is gonna save you. Think
now? Also, we have an option of copying facing the same line. Now there's a market for that would be shared options and down. So if I'm keyboard down, So if I'm gonna press
shift options and then he bore down, check this out. So I have a second line 3rd, 1/4 1 And this is basically how we can do that. Now we can also have an option of moving
the actual line important. So let me just navigate to the bottom here. Then let's start anew. wind. And let's say that this is going to be heading six. So I'm heading
six or something like this. Let's say that I would like to move again. They're setting six somewhere here in the middle. Let's say the third line or something like that. No. Obviously we have an option. We can maybe
select the line. We can cut it out. We can go over here and copy and paste. That is always an option. However, we have a faster way we can hold options and then just press
keyboard up or down. Now, I'm just moving this heading six up or down. As much as I was wondering, I want to move it out. You can move it out. You want to move it here in the comments, we can move it in the comments and this is really powerful
. And you will gonna use this a lot once you're going to start using the keyboard shortcuts. Also, we have an option of creating the comments. I think we already covered this, though. Remember when I said that we can always
use the command and forward slash, and this is going to create us to comment so if you would like to write some gibberish over here, sure enough, you can go ahead and do that. Now let me select the line and let's just delete
the line without touch of the month. Also, if you would like to start a new line somewhere in the middle, let's say that I'm navigating somewhere here and I'm at the end of the hello. However
, I would like to start a new one. Now. One of the options would be again. We can move with the command, press, return or enter, and we're gonna start a new one. However, there's a faster way. This first of all, let
me I can navigate somewhere in the middle. And if we're gonna press command center in this case, so you need to hold the command, then we're gonna start right away. New line. So again, we wouldn't have to navigate to
the end. No, There's also an option of changing the short. So if we're gonna hold a man, Okay, plus, then we're gonna press the first time. Come on. Okay, then we're gonna press command
s This is going to open us the shortcuts, and we can obviously change them So if you would like to change how the short that would be entered, you can obviously do it over here. As you can
see, this would basically tell you what the shortcut is doing. And you can change this so this would be insured about the shortcuts. And I would suggest at least starting one by
one using them because they will gonna save you a lot of time. In the long run, I would also like to talk about the external resources. And while we're at it, we're all going to look at the helm
and and the meta tags that I promised you in the beginning. Now, two really good resources are gonna be Missouri developing network, and the easiest way to search it again with which is
going to Google and you can just type in the end now with Missouri Development Airport is really good. How I think that you probably gonna start using it once you
are already somewhat comfortable with H e mail or any kind of technology because while the documentation is really good, it is also very expensive. So let's say
First of all, if you would like to go back there. We can always have an option of searching, right. We have an option of searching, let's say email in. Okay, And then we have an option for documentation. In
our case, we would like to select the email. Then within the email, we need to start navigating to whatever we would like to research. So let's say we're gonna be looking for a male tutorial
, or you can have the Asian email documentation or Missouri developing that point. And in my case, let's just click on the story. Now, in the editorial notice, we're going to have all these options where
on the left hand side, there, right away. Give you the C. S s. But if in the beginning you just like to understand everything about the email, then this is where you're gonna be doing research. Whether it was gonna be multiple
India and embedding with the images and email. Or, let's say the element in the email now a little bit more user friendly, especially in the beginning, would
be WW three schools where again, you just search it in Google for WW three schools. And once we click on it, obviously there's a bunch of editorials available to us? No, again
in. Okay, we will gonna select email. This is what we're covering and then within a female. Let's go ahead and let's find the h T m l head element. And now we can start reading everything that there
is about it. So, like I said, this would be a container for meta data. So data about the actual site and that will be placed within the head element, obviously
, and the meta data is not gonna be displayed Now. There's gonna be tags, Let's say for the title and we were covered. Title title would be for the page title. But then later on, as we
are going to be working with style sheets, we're also gonna work with style tags as well as linking the style sheets of looking to see assessed as well as we have an option for jobs. Now there's
always gonna be meta tags and for the Met attacks. And again, this would be the title. And as you can see, you can read everything that there is about title. Then the style element would be for something. Like I
said, um, we're gonna cover Link is gonna be linking to the external stash, and then we have the metal home now in the middle element. You have multiple
options. Let's say we have characters. Now, if we're going back and checking our basic set up with an image we know this is our first Met attack would be characters. This answers
What is meditating is doing, then also, we have an option. Let's say for description. So again, the syntax would be matter that we have the name and no case that would be description, and
then here would place the content. Now the same appeal would be for the keywords keywords author. In the bottom, we have the view port medicine. That explains how the airport
matter Attack is gonna work. So New York apartment attack allows us allows our pages to be responsible again. If we're gonna head over back to our basic set up with them, notice that
we already have, you protect that sets up the with properly, and that way our page is going to be responsible. So again, if you'd like to research more information but anything
that we talked about it, this is a very good resource, as well as Missouri Development Report. Well, spending time in territorial will was a lot of fun. The real learning starts whenever
we start creating the project. So this is gonna be out for this project where we're going to use the knowledge that we learned about this in the mail to create our first side on the side is going to be very basic. We're gonna
use only at Gmail and decide Well, when I say only email, there's gonna be a tiny bit of this. The other side is going to start off with the local, let them. We're gonna have a few pages and let's say, for the home
page there's gonna be a big banner image. Then we're looking for headings with your product. And then let's say there's gonna be some kind of product for every product we're gonna have. The details
, not the details, is going to be a link that's just gonna go to the computer. Or, as you can see, we will gonna open it up in the new tax. Now there's going to be three of them. There's gonna be house blend, French Rose
and Colombian roast as well as all the way in the bottom. We're gonna have link. That's gonna stroll all the way up to the top of the page. Now, this would be the home page, and we're looking for the about page
again. The navigation and the image is going to be exactly the same as well as the background. How old are here? We're gonna have just some text about the company again. We can click on back to the
top and we're gonna be brought back to the top. Then in the numbers, we're gonna have the table where they're just gonna be a little bit of information about the stores of the company. Again, we can scroll back
to the top, but I believe there's going to be contact where we have the contact form. Now in the contact form, we can just enter some kind of information again. Let me write some gibberish. And I was once
we're gonna invented this is going to be displayed in Europe, but we're not going to be collecting the data in any way, shape or form again. We can go back to the home bridge, and this is gonna be our home page. So this
is gonna be a project. I hope you guys enjoy it. And let's start working on it. Okay? Our first task is to create some kind of folder structure because obviously, we're gonna have to have the
project. And within the project, there's gonna be multiple files. Now, we can obviously work in the example folder that we have before, but I think this is gonna actually help us by
going over the steps again to kind of solidify in our mind. Now, let's start first by again creating the folder. You can created whatever you would like, But I'm going to do this in the list up. Uh, let me just rename
this, and I'm gonna say that the older name is gonna be coughing. Then obviously, I would need my text editor so I can just open up my text better and again. However, you would like it, but we would need
to get this folder to our tech center. I'm just gonna drag and drop it. And sure enough, this is gonna be my fault. Now, within the folder. First, I would like to create my home page, so I'm gonna say that there will
gonna be in that email And since I know that we can use them and I'm going to use the information mark to get my basic structure now within the basic structure, maybe Let's just change the title
and let's say coffee and let's call this junkie and maybe within heading one. Let's write some kind of fellow world. Obviously, there's gonna be more work that we're gonna be doing. But I would just like to set
up the live server first and all kinds of things after that. So what's the first? Since we know how to work with Life Server, we would need to open it up again. We have an option of opening up
in multiple ways. So let's say we know that we can right click it and then I have an option of open live service. So I'm just going to click on that and this is going to open up the license
. Well, this is all good, but what's happening is I would like to have to screen so one screen is gonna have the final project. What? I'm going to show you what we're gonna be doing as well as I'm going
to look at my current project in the bigger browser one. However, as I'm working side by side with my project, I would also like to show you how the project looks saying a small browser window. So what I'm gonna do
right now, I'm going to open up the new window and which is then let me just make this a little bit smaller. This is really big right now, and I'm gonna again check for one 27th for my
indexation. Now, in this case, what I'm gonna do is I'm just going to set these on side by side. So as you can see, this would be my project where I'm working. Hopefully, you can see everything correctly. Maybe let me make this one
a little bit smaller. And then this is where we're gonna be doing most of our work. This is the small browser window, so you can see exactly of what everything is happening. And then this would be a bigger
president. Well, that would be initial set. Now, also, the right to right away create my folder. We're gonna be placing our images. So let's say you folder and I'm going to name my folder images
. So this would be our basic structure for the project. And now we can ready to go and start importing our images. Alrighty. We have our product structure. So what
next? Now, as we're checking the project, we can see that there's gonna be a few images and as a side note, if you don't want to download images in this video, I mean the resources you're actually going to
be able to find the whole project with all the images that we're gonna be using anyway. Now, for the logo, it is very simply, I went to Google and just search for a copy cup, uh
, logo to star in the background. And then I would say there's many wants to pick, and I just picked this one. Now, please understand that this is not something that Children do for the production, uh, project
, but now, Okay, so this is just a simple project. We can just do it this way for the local. So in this case, what I would do is I would just say that I would like to get damage, so I'm gonna say, save him a jazz and
I'm going to be looking for desktops. And this is where the project is, and then within the images, I'm gonna say that I would like to save this as a logo, and either we can at the end of ourselves
, or we can just go with whatever extension that they give us. So this would be the local. Okay, After the logo, we also have one big background image as well as three smaller ones
. So these would be, I don't know again. For the house plans or French rose, it doesn't really matter. The main idea would be one big macaron image and then three smaller ones. So these images
I got again in the pixels, the ones that I was telling you before, where you can get nice copy, right free images. And again if we just start searching where if you search for a copy first
off the one here and coffee and as we start scrolling down, you can see that there's gonna be quite a few of them that we're using. Uh, let's start with this guy, since this is gonna be a background. So
let's say here again, saving jazz, and I'm just gonna call this background and again, let's just go with whatever extension they give us now. After that, we have house blend, and
I believe for the house. Bland, uh, scroll down. See where I have this. Uh, no. This guy. Uh, Let's see. Let's see. Let's see which one That I picked this one. So let's say what's
name? This house? London. Then what else we have? We have French roast would be looking for this guy. And what I have this one here is, uh, saving. This would be French
Rose rose, and the last one is going to be, I think Colombian I'm being roast. Um, that's gonna be weird. And the machine. So it said that this is gonna be Colombian in
the Rose. Now, I have these four images, one for the background and three smaller ones. And for the smaller ones again, I use the option in the Mac where we can just crop them a little bit. So
let's say that I was gonna select first of all, three of them. But again, not background, not logo. Just these three, and then I'm gonna open it in the preview. And within the preview, I would, like, select
all of them. So again, the short cut with the command day. So as you noticed, right now all the images have been selected, and then we can look for the tools and and we're just in the side. Not in my case. I'm going to click
on this little padlock, So now they're going to be adjusted exactly like I want, not the height adjusted to death. Um, let's say that I was going to be looking for 320 by 240
. Um, yeah. Once we do that, these are gonna be our images and everything is set and ready to go so we can start working on our project. And once we have our images, we can start working on
the project and actually start doing some kind of h t M l. Now, as you can see, we need to start by getting the local first. Then we're gonna have the heading three, and then we're gonna have our little
number. Now, this is the first thing that I would like to do, and then we're gonna start moving on and working with different sections of the project. Well, first of all, we would like to get an image. So we already know
that we would need to use the industry. So here within the body might just start getting damage. And for the image we're gonna be looking for the source or are also I'm in right away. Then we're gonna give us source
and within the source. Now, we would need to navigate to the images folder. Now, we know that we would need to use the relative path. And maybe I didn't mention this before, but you're also going to see a lot of times is
done. So again, this that would mean the same thing where we are navigating somewhere within the folder, meaning the index right now. And images are still within the same hold
. However, the image that we're looking for is in the images folder. So first, we would need to never get still within this folder and look for the images folder. And once we get the images folder
, what's gonna be next? Well, then we're gonna be looking for the local, right? So, as you can see right now, we're getting along and let's just right here. Uh, coffee, coffee, local. Um, yeah. Now we have our image
So this is all good. Next, what we have after damage, we have some kind of heading. Now, In my case, I used I believe, having three. I'm gonna say heading three is gonna call this. This is
gonna be the name of the company or website or whatever you would like to make it. And in this case, I'm gonna say coffee. Unless we would need to create our number. No, for not. But I
said that we would be using an order list the first we need to create the list. Then for every list, I don't We know that we need to create a list item element. And then with the This is where we're
creating our like, no, forever your link. We're gonna have to have the hr and basically the past or direction. Where do you think is going to be going? Um, since we're gonna start with the home page and say that the
home page is going to be going through an email now, obviously we haven't created yet the rest of the pages. However, it doesn't stop us from creating these links. So what I would like to do right now is just topping
pay this three times. And instead of having this as a home, um, I'm going to change it to about numbers and contact. So first of all, let me again do multiple customers. So
now that we would need to use out for that. So in this case, if I'm going to press, um, multiple places notice I'm gonna be having multiple cars. So let me delete First of all, home organization, every
one of them is gonna be different as well. Let me get rid of all the indexes at the same time, I'm just like that. We got rid of all the next. And let's say the second page is going to be involved in, um, the name
in our, uh, number is going to be about. Now, let me say this. Let's see Sure enough, we have the about and then let's have the numbers numbers. This email, this is gonna be a page, and
in the number we're gonna have numbers. But at least we're looking for contact. Interesting. Now. And this was going to be equal in the number to contact. Just contact. I'm not gonna have anything
else. Good. We added local we added heading three as well as our number and maybe just a general check. We can go to the bigger browser we know and let's see how this is going to look like. I think
it looks good enough and we already move on. Are working the next part of our project right after the logo. On the number, we have the big background image as
well as we have feature product where there's gonna be three products the house bland French rose as well as Colombian role. And each of them is going to have some kind of link that will gonna
go to the commedia. And as you can see, it's gonna open up in the new time. Now, at the very end, we're gonna have here this whole paragraph with the copy, right? Remember the special relation email
character and then back to the topic. So first of all, let's start working on all this. So let's say this right after the obligation mark or number, we would like to get our first big
image. So how do we do that? Well, first of all, we would need to get the name is right, so I'm gonna say M G. And now we're looking for the source. And again, we need to navigate to the images folder and then we're gonna have our
big background. Now, what else can we adhere? Well, let's say first that we would like that. Hold on a 56 Let's say coffee beads. This is gonna be method as you notice. Right now, the images
obviously big. We didn't adjust anything. And also, let's check it out in the bigger browser window. Just so how it looks now. As you can see, there's two issues right now. So for the smaller screen now
, the damage is way too big. How we're on a bigger screen. It's not big enough. Basically not spanning all across. No, in order to fix is usually would work with. However, in our case, since
we haven't looked at the C s s, we can do a tiny, tiny little trick where remember we had the with and then previously we worked with with only with pixels when we
were actually adding, let's say, 100 pixels here or something like this. We also have an option of using the percentages. So instead of using pixels, I'm gonna have the 100%. And what happens right now
the image is actually responsible. So now it is on the small screen. The image is exactly big enough for the whole screen instead of standing outside of the screen and
for the big screen notice. No, it's actually standing all across. So essentially, what we did is we made this image responses again. Normally, we're gonna do this within the CSF
, but again, just because it's a little bit annoying I just added, here this whatever two lines of code or uh, with actually basically okay, now what we have next. Well, let's maybe
created next a line break, just so there's some space in between. And then I would like to start by placing heading one. I'm gonna say, Hey, go on. And he was featured insured
. Um, let's say product. So this is gonna be my head in now, after the heading one again, let's add another line break and maybe right after the line break, let's start using the comments since there's
gonna be three features project and all of them are going to be their own product. So I would like to have some kind of distinction of what is in there. So let's say first, this is gonna be the house plan
. And for the husband, we'll start by heading too. So we're gonna have to get into right here and let's say House Bland and we're gonna be looking for the coffee. Let me say this. Um
, this is what I have here on the right hand side. Okay, moving on. I would like to place an image. I'm gonna say image again. We're gonna be looking for the source of damages. And now we have to look for the house
Now. What else? Well, we can always have the house blend like this and say that there's going to be alternative text. So if the images is not available or we can have this place, then there's going to
be alternative. No, this is gonna be my image. Know what else? Well, I would like to have the program. Let's say for the paragraph there's gonna be a text off. I don't know. 25 words, 50 words. It doesn't
really matter. You can just have some kind of at the moment. I'm gonna save this. This is gonna look nice on the small screen, right? As you can see right now, however, the issue is on a bigger screen. It is really annoying
if I see these lines like again, this is something we were going to do with the assessed. But just because it does annoy me hell of a lot. What I'm gonna do is I'm gonna have a new attribute that
we haven't covered that yet. And that is the style, actually. Again, you're not gonna use this later on once you learn to yourself. But for now, this is going to help us a little bit. So within the C s s, this is basically
in line and again, you don't need to remember this property. You're gonna learn it later on within the C s s anyway. But here I can just say with property and I'm gonna set it equal to 50%
. I'm gonna say he close to 50% again. Please don't worry about the syntax. For now, we're gonna cover this. This is a very, very basic C SSN tax. But it was it was going to help us, though
, because now I have my paragraph expanding 50% and it's gonna look much more better on the biggest screen again. It's really up to you. You can just skip this style, not tribute
and just having a normal program. But I'm just gonna choose choose to do it this way, then last but not least, there's going to be some type of link I'm gonna say, heading three and within heading three. I would
like to have the link now for the link again. We're gonna have to use some kind of match tribute, meaning the HR attribute where this link is going to be going. In our case, we can either copy
and paste it from the U. R L after research for computer More. Since I know that this is gonna be my you're out. I can ride at P s then to forward slashes, then WW
, and we're looking for a week. Pedia org dot org. And then let's have another forward. However, since I would like to open this up in the new tab, meaning I wouldn't want the
user to navigate away from our page. Can I have a target that tribute instead of equal to underscore black? And let's call this details so this would be the name of doing now. Once
we save it, what do we have? So we have our house blend, and then we have also the details. So if we're going to click on the link, let's check it out. Well, for now, what's happening is that this is navigating
away from our page. And the reason for that is, as you can see, I have a very small but at the end of the day, very important there because this is not a target. That should be target. As you
can see how easy it is to make, actually, mistake. Let me get back. Maybe let me refresh just to make sure that everything is working. Correct. And now we're opening up, obviously, in the correct recipe
. Now, if you want to go any, maybe further, you can write coffee. So maybe let's search in the media for coffee, and then you're gonna have a different you are out. So maybe if you really like you can just copy
and paste this u R l where you're gonna be for the coffee now. I'm not gonna do that. I'm just gonna leave my general the computer. But if you would like to do that. I just need to copy and paste this. You are okay
, So, So far, so good. So we have our first, uh, product, the first feature price? No, that's what I would like to do is just copy and paste it, because there's gonna be three of them. However, I don't see the point
of rewriting everything from the scratch if we can just copy and paste and create two more. Okay, I'm gonna say coffee, and we're gonna copy and paste. So this is gonna be our I believe French Rose
. And the last one is gonna be, uh, Colombian. No, once we are done with copy, then we just need to start changing the value. So obviously here, we're not going to be looking for the house blend
. Gonna be French roast, then also the images. We're gonna have to be different. So let's say that not a house coffee, Right, Rose, as well as remember image
. Okay, let me look forward images and when images, we have the French rose. Unless the least we have the alternative attribute. And yes, Okay, that would be our second one. And the last
one, the third, but not the least one is going to be a Colombian. But remember, we can just keep this. However we would like, uh, meaning we can keep the link the same way. But
you know what? I would like to have the maybe two more line breaks after the end of the each of the items because I think it's just gonna make a little bit more sense if they're going to be separated
a little bit. So let me grab these two hours here as well. Uh, where we have the end. I think it's right here. Copy these guys as well as at the end of the third link. Also, just
gonna have the line. You know, like I said, we still need to change this Colombian. So Colombian being a rose. Uh, you know what? I can just maybe copy and paste this. Maybe it's gonna
be a little bit faster. Let me delete title. Then we're also going to be looking for damage and then another forward slash, Um, enough. We have Colombian. Um, yeah, I think the last
thing just would be changing this alternative. Now, what is that? The very, very end of our home page. That would be our simple paragraph. And let me show you again. Maybe
we already forgot what you had. And by the way, we can see right now how old are page would look like on the bigger brother window. But at the very bottom we have our copy, right? 2019
link back to the top. Okay, Now for the link back to the top, maybe a little bit more line breaks here just because it's gonna look a little bit better. And then here, we're gonna
have the paragraph within the paragraph. There's gonna be copy, right? Text. We save this and show you this is where we typing the program. And then again, let's use the special character
notice. Or remember, it was the n percent, then the name of it. And in our case, that was copy. And let's just say the year, which would be 2019. Now, if you're watching
this in the future, let's say 2000. Whatever, obviously, right? Whatever year you are currently at. And last but not least, we're gonna be looking forward to having having three. That
we are going to include the link back to the top. Now for the link again, we're gonna have to have the address. And then here we would need to navigate to a local. So somewhere at the very top
, we're gonna have to create an ID or element with some kind of idea that's going to match local. And here, let's just right back to to This is gonna be my text. No, it's happening
right now is we don't have anything here that has the logo. I'm sorry, That idea of local. So what I would like to do right now is for my image, my local image. I'm
just gonna have the ID, and we're gonna send the sequel to Logo. No moment. We're gonna save this. Check this out. I'm gonna lower, and we're gonna click on it. We will gonna
scroll all the way to the top. So we're going to navigate to the top of the page and yeah, we maybe should just check it out in a bigger president to make sure that everything is working back to the top
is fine. And now I can start working on our page. Awesome. We have successfully created our first home page. However, we have a few more pages to go and
the next one would be developing. Now, before we start doing anything before we start creating the file or anything like that, let's just check it out. What would be the common things between the home bridge
as well as the above it? So if I'm going to open up the about page in the final project notice again, logo is gonna be here. We're also gonna have our headings as well as our navigation
and then the big background image. Now I keep calling this the background image. Of course, this is just one big image. But later on, as we're working with the assessed, we're gonna be setting this up as
a background image. So my apologies. For now, it's just one big image. But I keep referring to has one big background. No, we also gonna have one. Well, then there's going to be specific
text for the page. But then the footer, as well as link back to the top, is gonna stay the same. So we have two options. Either we can create a new file and start creating everything
from the scratch or we can just copy and paste everything that we have in the indexation email and delete unnecessary stuff. Now, let's say first, I would like to create a new file. And
let's call this about email again. This would be in the HMO page. We need to use the agent email extension now within the file. I would like a copy and paste everything that I have here. So
I'm gonna select everything with command A Then we're gonna copy this by with command C as well as last but not least, was like this with command. And now I have
my index page in my about it. However, this is where we're gonna start making changes. So first for the title, maybe Let's write that about page or just in general about as
well as Florida heading. I would like to change it from coffee junkie to about now. What else? Well, payment is going to stay right. However, the feature product is going to be about us
, so the text year is gonna be about instead of feature. Now here, we're gonna start deleting everything. So I would like to delete all these featured items so everything's starting from the house blend
and ending with Colombian roast. I'm just going to delete this. So first of all, we can save this. Um, let's see what we're gonna have. No, this is gonna be my home page. However, now I can navigate to my about page
and what we have is the local, the navigation, like we wanted to as well as the big image. And then we have just from hearing with about us and the
very bottom, we have the paragraph we have copy, right, and link back to the job. So all this is working now, the last thing that we would want in the about page it just to have the program
would, let's say 500 words. So we're gonna create April tags and we're gonna paste, uh, or you know what's not based. We obviously need to look for damage. So we have Lauren 500 then
we're looking for 500 words. Now, the moment we're gonna save these are gonna be a 500 words. And again, there's always we can check it out how it looks like in the bigger browser window. So this for now
would be the logo. I mean, sorry, Index page, This is an email. And then as we have our or has we navigate to invalidation email, then we're gonna have our heading with
are big and successfully. We also have created our about page. Before we start working on number page, let me just make a quick correction. We're here at the very
top. Instead of having this heading three years in about, I would still like to leave. This has a coffee junkie, cause I think this is gonna be the name of a project or page or the company. So
I just keep this country junkie as well as let's write the title with a capital A, um, as we saved. Right now, everything is working fine. Now let's decide what's happening within
the numbers. No, this is my final project. And get an advocate, the numbers and within the numbers again, Most of the things stay exactly the same. The difference would be here. There
are stories where we're going to use our table Now. In our case, I think it's gonna be faster than a copy and paste everything that's in the about a female and then then just get rid of this
tax. Okay? And let's create a new file. Let's call this numbers email again. Everything was selected, the invalidation email. And now I can just copy and paste in the numbers and
email. No. Like I said, I would like to delete all this long program. This is not what we're gonna be doing. And that's right. First of all, numbers or our numbers. Uh, where were you like
, or you know what? Let's call this our stores. I think that's just gonna make a little bit more sense and let me select the whole program. Delete it. Uh, let's maybe change the title of the page
. I thought I was going to be right now. Numbers, Let's say this and from our about page, we can navigate right now the numbers and sure enough, those is going to have our heading with our
stores style
now within the title what we were gonna have. Well, we said we're gonna be working on our table. So first we know that we need to have the table, a woman, and then within the table element, we
start working with Rose. No, Maybe let's had a little bit off clarification. So in our case again, we're going to use the comments. So I'm gonna write that this is gonna be for the city. So this is
gonna be our table role for the city now for the table role we need to create table real element on. Then we're looking for either table data elements that would reflect
columns. Or since we would like to have some kind of headings, I'm gonna go with table heading element. So here, I'm gonna ride. That first one is gonna be city. That would be pretty much telling what my columns
that are gonna be like as well as you know, what this is gonna be. The first one is gonna be Chicago on Let me copy and paste this. So while the first one of Chicago, we also have an option of New York. So
the stores would be located in Chicago as well as New York on. We also have an option off Los Angeles. Let's say this on this would be my city on. Then these would be
my cities. Okay, so far, so good. Now we also can right away, maybe add the comment of End off city so we know that this would be the end of the road on May be. Let's create another one
where we're gonna have some kind of numbers. So it's a maybe before that had another comment, orders and the borders. So the beginning of the comment and end the comment
. Maybe let's and also end off waters. And now let's start creating a rose now within the road, there's gonna be instead of table heading table data, What's right? Table data on the first one
is gonna be the name of a row which will be numbers or orders. My apologies. Let's copy and paste this and let's write that in The first one is gonna 325. The second
one is gonna be 250 and last but not least, we're gonna be looking for 503. This is gonna be our second role again as we have been placed it, Norris, These are gonna be orders
. No last. But at least we're gonna be looking for basically profit. So whatever profit our city stores would be generating, So let's rewrite this. This would be profit
profit. Let's make sure. Does we write this correctly as it was enough profit handlers just had some kind of dollar values. Now, I would also like to change the name of my row
. This would be profit. Now, on here, we're gonna be looking for a dollar sign, meaning this would significant I that this is dollars. And let's say 10,030 and 1030
Hamlets just copy and paste this. So it's a first one second, one third one over here. We're going to change it to 20,030. 30,030 on this should be good enough
now, Last but not least again. I'm going to implement a little bit of CSS because it bothers me that it looks so bad. So what we would need to do and again, you don't need to worry about the syntax right now
. It's very, very easy assistant tax that we're gonna cover later on. But I would like to write against style attributes. So this is gonna start my in line CSS and then let just at
border on board. Needs to be two pixels solid. Let's say black, as was the other property would be borders pacing border. Ah, spacing
on that's gonna be equal to, let's say, 25 pixels. So spacing the colon, unless just right. 25 pixels. Now, in the moment, we're gonna save it, as
you can see right now, the table looks a little bit more presentable now, Last but not least, let's just check it out in the bigger browser window again, we would want to navigate away from about. We're gonna put the numbers
on. Yeah, we have our stores. So our number of pages finished, and now we can work on Contact page. The last page in our project is gonna be contact page where again We have tons of
things that we have from the indexation amount page, meaning our homepage, but well done on the form where in there is gonna be the name input, email input, as well as the description and text
editor. Now let's head over back to our project. First of all, let's create the page. So we're gonna say contact HTML. That's gonna be our name on within the page again. Would like to
copy and paste from the about or numbers because they're just gonna be shorter since again, we're going to reuse tons of things from there. And maybe let's delete the long text. We were not
gonna use it, or we're not gonna need it in our case. So ones that is deleted. We can also change the heading one on Let's write, contact us that's gonna be are heading on
within the little browser window and just navigate to the contact page on this is gonna be a page number four. We started working on the form. Maybe let's also change the title. This should be contact. And
now here on the top of the tab, I have my title of the page. No, what we have for reform. Well, we have the heading one right on. Then we would need to create the form element
. We're, um, element on. We can use the amateurishly forties on. We can just leave the action blank again. We're not gonna be collecting the values as was. Let's start with the simple
comment just to separate later on. What we're gonna be creating this is gonna be the name we need to use the label ailment. Now, the label element will have the four attributes
on. This is gonna point to the idea that we're gonna be creating No, In our case, the i d. We're gonna have to be name mostly for the label to match as well as let's write input. Who is a
type of text. Also, I would like to add name attribute on We're gonna set name attribute equal to the name in this case. And last but not least, we have the i d on the I D needs to match
four attributes in the label. So in this case will get also a name it name on. Now, I have excellent input. Where if I'm going to click on the label, the input is going to be highlighted
. So this is gonna be mining. And again, the reason for the comment is just making a separation later on, since this is gonna be the name, but the next one is gonna be email. So then change the comment
through email on now. We're gonna change name in a few places since we don't want to keep the name. But in fact, this is gonna be email. So first of all, we're gonna be deleting it from the four. As
was the name of the label the I D on. Last but not least, the name attributes. You can just delete all of them at the same time. And let's write your email as well. His email. Now
, we could have written same way how we did it delish in. But since this is capital, I just kind of he wrote it. All of them one of the same time. No, we have everything we have four attribute
. Name I d email. Once we're gonna save it, we're gonna have our email. No. Maybe we can also add the land break. This is gonna look a little bit better. Just get the actual loan brick as
well as Yeah, maybe another one that might look a little bit more decent if you have two lines in between and what else we have. Well, we can also use the text area for description. So
let me copy this on now. I have to land Rexes. We'll hear on here. I'm going to say that there's gonna be a comment. The description. This would be the common for my description. And
let's write personal paragraph, the description. So this would be my paragraph. Basically, the value within the paragraph is gonna be description. And we know that we have the text area
, right? We had a text Terry Element now within text area. That's also write the name for description. Now, as you can see in this case, we're not using the label. So we don't really cared about the
I. D. You can stay there blank. It doesn't really matter. Columns are going to stay. 30 rows are going to stay 10 on. Do you know what? Let's try just the placeholder. Let's say for the placeholder, we're gonna say
you're description. This is something we should right on. Now we have a nice text area with a placeholder of description and yeah, I think that's gonna be enough for our
contact page. Let me just double check whether everything is working in the picker browser window. We'll have the numbers from the numbers working, navigating the contact. This is where we're gonna have our simple
form on. I think that everything is working fine and we have successfully created a lot of four pages. Congrats, guys, on finishing the project, hopefully that everything worked out. However
, if you got stuck on something, please remember that for every video there is also there in the resource is the folder that contains the code from that specific video as
well as in. The resource is of this video that you're watching right now, you can get the final project coat so you can just download it on. Compare it if you have any kind of mistakes. Hey, guys
, before we deep time into CSS, I would like to show you my extensions and workspace settings in the visual studio code. If you're just joining us, you don't have to use visual studio
code in order to follow this course. Or even if you are using visual studio code. You can skip this video and use the set up. That makes sense to you. I were just to show you what is my set
up. Let me spend a few minutes on that now. First and foremost, I would like to show you a few extensions that I'm using on forties example. I'm going to use the main CSS now. Obviously, we haven't covered yet anything to do with
CSS. But what I'm about to show you is just a little visual thing. So I don't think we need to cover what is Theus s in or to understand. Now, as you notice, these are extensions that I'm using right
now. And if you're just joining us, then please head over to previous videos where we talk about the life server installation as well as the prettier if you don't have them already
. Now, the first extension that I would like to show you is the bracket per colorizing. Now, as you can see right now, these brackets are pretty much white. So there's no distinction in between them. How are if we install
this extension? I'm saying brackets, they're so here. We're searching for extensions and we should have the brackets pair colorism. Now again, the only thing we need to do is right. Click Install
on. The extension is available to us now. What bracket pair colors there. Does he colorize? Is the matching bracket? No, in our case, obviously our example is very simple. When we just had two
sets of brackets and maybe in the project or whatever sections we're gonna be working on, it will not gonna make as much a sense as later on as you're progressing with Web development. How
are this is very neat whenever you start working again with large chunks of code where you can at least see what is happening and understand a little bit more visually, So that would be the first one. Then
let's look at the in dense rainbow can Let me just delete this in brackets per colorize. Er what? Saying dent? Rainbow on again? This will gonna make indentation easier
. Three. Now how we can see that in real life. So first of all, it's installed this as you can see, right now it's installed. And if I'm gonna head over back to indexation email, notice that I'm gonna have these indentations. So this
pretty much shows us off. What code Block their work. So everything within the body is gonna have this indentation on the left insect. No. Last one is gonna be highlight matching tag
. So I have been to lead this. Let's say hi, light a matching and there's gonna be a lot of them, so we kind of need to be very specific. And in this case, this would be the name. Now, what's really
neat about this extension years again, this is gonna highlight the matching closing and opening tax getting Morgan installed it. I work for this one. We're gonna do a little bit of extra set up again. Let
me first say, would make sure that it's here on what's gonna happen as I click again on some kind of element is gonna highlight the beginning and the closing tax. However, we're gonna add a little bit of more
settings. Well, let me scroll down. And as you noticed here, there's gonna be more options. Now, in our case, first of all, I would like to select this and then in here you would need to use again the edit. So we're gonna use the
copy, So gonna copy everything that's right here and we're gonna head over to our settings. So we're gonna do settings, the card, the settings and we're gonna be looking for to Jason object and right after today
, let's say falls. Let's just copy and face. So in our case now, this would be the setting. And here I would like to change this a little bit around. So I'm going to say that the border with is going to be three pixels. The
border style is instead of daughter is gonna be So lead the red solid on. I'm also gonna change the color. I'm going to say that color is gonna be hell. Oh, and you can pick a red
. You can pick Blue whatever you would like and then bored raises still gonna be five. Now the same thing is gonna go here. We're going to stay three picks, those first of all. Then again, we're looking for solid
style as well as last but not least, the color should be Hill. This is just gonna be a little bit more distinctive off what I have before. So again, let me head over back to indexation email
and now check it out. So now I like how these tags are styled. This way is that way really clearly shows me off where I'm working. Now again, this is not gonna make sense. In
are very, very basic project. But as we're working with more extensive projects, this is going to save us many, Many times, while we're still in a subject, let me just show you the general settings that I have
in my texted Her first. I have the window zoom level, but I think this is gonna change. Mother, I'm gonna be zooming in more zooming out. Then the editor Font size having 26. The tap size
would be one again. Tap sizes right here. This will be the top size on again. If you would want it more. You can honestly have two or four. It's really up to you. Then. I do have the auto save off. That
would be over here. Remember, As we were working with Life server, we can have the orders, everything. What we were gonna be writing is gonna be saved and shown right it right there. And then Then I do have the world
rap on. So that way my lines are not going to be extending. So I don't have to scroll and then two settings that I have with the prettier where I have four months on paste and form. I don't say so every time
we were gonna be saving than the R code is gonna be formatted now. I also have the meaning map enabled to false. So basically, I don't have this little mini map on again. This is
really up to you. You want to keep the mini map, keep it. You want to get rid of it, just set it equal to the force. And if you would like to look at the other settings, let's say remember that you have this option or here
where you concert for them on Once you find them, you can obviously change it. Let's say found size, do something bigger or smaller. And then I would say this is gonna be displayed here in your Jason settings. No, you can also
work right away here and Jason Settings. But this ours that gives you a nice graphical interface. Hasam. We made it to the CIA's. That's part of the course. If you're just joining us, welcome
to the course. If you just finished HTML, welcome back. As always, I would like to keep slide videos short and concise. So what in the world to see a set? She assistance for cascading
style sheets. And in one short sentence answer. CSS is used to make our what projects Awesome on beautiful. So you can say see assesses responsible for styling the web
. And while html was responsible for what elements will be displayed, CSS takes care of how elements are displayed, meaning the layout on the look off the element Why will
come back to this in tax like a gazillion times in the course just to get our feet with the general CSS syntax wouldn't be following, so I'm gonna have a selector. So what elements we would like
style. A set of curly braces that start a declaration luck. And within the bloc, we're gonna have a property of the element we would like to change. So let's say the found
size of the element the color or do with just the name of you and value for that property. So, for example, for the color, we would have to choose the color. We would like to apply for that element. We'll
come back to it during the course, but always, always make sure you add semi colon between declaration. Otherwise, you're gonna get a syntax error. Now that we know the theory about CS says
, let's start using it. Why don't we start very simply by singing up our workspace. So as you can see, right now, I'm sitting in my desktop. So I'm gonna create in your folder. I'm gonna call this folder with
, say, CSS. But as always, you can name your folders however you'd like and then we're going to open up our text. Better. No, I'm gonna open up the text editor and again, we know that there's multiple ways how
we can get our files here. But for now, let's just grab the folder. Since that would be the fastest way on. Right now, I have my folder in my texter, so everything is working really nice. Next, I would
like to create a new indexation in mount file. I'm gonna say new indexation amount, which is gonna be our home page. And then you know what? Let me just make it bigger. But before I do that, let's open up the
new window or the browser window, because again, we would like to see the all the changes that we're creating in our text there live as they're happening in the browser. So for this, we're going to say that there's
gonna be a browser window on. Let's set them side by side. Now you don't have to technically do it this way. But I think it's just gonna be easier for you to And then in the indexation men, let's just create a basic
HTML structure. Now again, we're gonna be doing this using dammit on. Maybe we can also change right away. The document name. So the title more webpage acknowledges, called the CSS
tutorial on may be Let's write it like this. Yes, it's the story L Hopefully this is gonna be spelled correctly on we can add. Some may be heading one with hello
world. So I'm gonna say this this is gonna be my starting point. And then let's open up in the live server and again, we know that we have multiple options. We can right click it on orders. We have open
life server more. We can use the actual shortcut, which would be again command plus l plus command. Oh, now, as I see in the bottom, my server has
been started at the port 5503. But sure enough, it right away opened up in the browser anyway. Now I'm also would like to open this up in the bigger browser window just
in case we would want to see some things shown in the bigger brother window on four days, I'm going to open up the new window on here. I'm going to be looking again for 1 27 0.0 upon one
on again port would be 5503 on then It gives me a suggestion right away for indexation. And sure enough, this is gonna be my weapons. So this would be our basic set up on. Now, let me
just maybe make this a little bit smaller. The side window as well is the browser. Because again, in most cases, most of the work we're gonna do here in the center because
this is where we're gonna write our CSS. What's really cool about CSS is the fact that just like with a she male, we don't have to Donald anything to start using CSS. And we can just start
using CSS right away. In general, there are three ways. Help Start using sisters. The in line internal on on external CSS as a side note. In the beginning, I will use
a lot of color property because it gives us the best representation. But don't get hung up on the property names or values right now. We'll cover them very shortly. First, I would just like to get
you a general idea. So first, let's look at in line CSS. So let's say at the moment we have one heading one bravely sitting on our page. Now how? I would like to stylish. So let's say I would like
that color red Now, in the HTML, we have a attributes. Now they attribute. Name was very simply stop Now again, For now, please don't get hung up on the syntax. I would just like to show
you how we can add CSS to our page. And later on, we're gonna cover properties and values and everything else. So within the style, Nah, tribute. I would need to have the quotation marks on
then within the quotation marks, This is where I write my styles. So, like I said, I would like to have the color. So I'm gonna say color here is gonna be as you can see, many options I have right away by visual
studio code. So let's go with I don't know. Congar. Oh, with Olive. What say now? I know I said red, but for now, I just changed my mind. We're going with Olive, so we're gonna save it on what happens
is right away in my text is Olive. So I changed my color. No, all this is great. However, obviously they're gonna be some downsides now, what would be the downside? Well
, even though we have the color and everything is looking really nice, what happens if I would like more properties? So let's say font size Now remember, we needed to have a semi colon, and I'm gonna say farm
size on Let's go with again three Ari ums. And again. I know I said this before, but please, please don't get hung up on the syntax right now. We're gonna cover this shortly Pretty much. You don't have
to do anything, Just watch what's happening. So let's say here we're adding the font size now, As you can see already, I just have to properties. But my HTML is getting really clogged up. Um
, also another issue would be the fact that what if I have another heading to not saying kill on here? I'm going to say Hello, people. Now, what if I would like to have some CSS here too? Does that mean again
I'm gonna have to create a style attribute on at all these thousands? As you can see, it gets real annoying because if you're gonna have webpage normally would, let's say 503 elements. What air you
gonna dio for each and every element you're gonna be adding these kind of style. And then what if you were going to change your mind? What if you're gonna say I don't know? I don't feel like all if I feel like red. So let's head over back
and let's say red now. For every element that has the olive, you're gonna be changing back to read. That is not very practical. So while in lines here since is the most basic way. How we can add ceases
to our webpage. Since it has multiple downsides, This is probably not something that you're going to use very often. Hey, guys, just to let you know that starting from this video, if we will
write any cold during the video, if you would like, you can access electric code for that particular video in the Zip folder in the video. Resource is. So let's take it out for a spin. What
said that we're gonna be looking for heading elements and we would like to get a source code. We can either click it here. As you can see, this would be the resource is. Or while you're watching the video, let's say within
the images we can start watching the video on. Then we composite because we don't listen to this guy on. Let's just say in the resource is we're gonna have the availability for the images. So this is how
we can access the images that in both cases Jurgen and download the Zip folder for that particular lecture. And then, as I'm going not to my documents, I would like to go to the downloads. You'll
see. I have to Z folders. Now we can just open up the zip holders and we're looking forward to folder name and again, this is gonna work exactly the same for damage, so I'm not going to show you from both of them. But
we can just drag and drop it, or how you would like to open up in your text better now if you want to save it, Obviously you would need to use it for your downloads and then maybe put it in your documents or something
like that. But the general sense would be that if we'd like to access the cold that we write in the video, you can always have access to it in the video. Resource is I know what some of you are probably
thinking. No. Okay, smart guy. You just show us how to use in line CSS and then spend next five minutes trashing it. So what is the better option? Well, we have the internal ceases. So
first of all, let me get rid of these style attributes. I'm not gonna need it right now. And let's say there's gonna be heading one on just for kicks. Let's add a few more. Let's say that I'm gonna have three hello worlds with heading
one. And then I was just gonna have one lonely one be heading to now. How do we have the internal CSS? Well, we're gonna have to head over to the head tags and again that is important. Leased them, place them somewhere
else, and then expect them to work and then within the head tags, we would need to create another tack. Now, that would be the style attack. Again, we're gonna create two sets of tags the starting
one and the closing one. And then we write our CSS within these tax. Now, how that would work again. We're gonna start with selector and again, Please don't get hang up right now on the syntax we're gonna cover
and literally and a few videos. Well, let's say I would want to start with old heading ones. So I'm going to say all the heading ones are gonna have some kind of styles now again. Like I said, I was gonna go with color because
that is just gonna be these everyone on. Let's just go with blue. So my color is going to be blue as well as I would like to add farm size. And again, let's go with something like three rum's. So in order
something else now, I don't have to jump back and forth with my HTML and add for every kind of style On that way, all of my heading ones have been styled, right? Were literally
like what? 123 and four lines of code and I can add whatever styles I would like over here and all my heading ones are gonna be stopped If I want heading to. I can just say heading to
on. Then let's say again, we're gonna use color color's gonna be read and not read, Olive. But actually read on, let's have fun size to be really small. Ah, that would be it on no 0.5
volumes. Something like this. So now my heading to is gonna be very small. We have color red, and if I'm gonna have more heading twos, the same thing is gonna happen to them. And again, you can see
how much more powerful this is already because we don't have to first of all, clog up our HTML. So I didn't need to Anything here. I can clearly see what kind of structure I have as
well as the only changes were making are gonna be instantly added to all of them. Now, let's say I'm gonna change my mind. I'm going to say, you know what? I don't like the color blue, so let's say we're gonna go with chocolate so
instantly. All my heading ones are going to get this stop. So internal ceases is way, way more powerful than jumping throughout the actual components that we have. I'm sorry
, not components the elements that we have any female on, adding them the in line styles. So far, so good. We know what is the on line sensors as well the internal sensors
. However, there is also a tiny issue with internal CSS. Now, what would be the issue? Well, we're lacking flexibility for multiple pages on. I think it's gonna be easier
for me to show you then again to talk about it for, let's say, half an hour. First of all, we need to create another page on. I'm going to say there's gonna be new file and we'll call this page about HTML
and again, we're gonna have to get some kind of structure. So I'm going to say that first of all, I would like to get the basic Asian infrastructure, So I mean, really this on Let's say that we're gonna be looking for again some kind of
reading ones. Well, say heading one on, we can do the same thing. Hello, world. Um, let's copy and paste it on. Maybe let's also add heading to Just so we're staying consistent? No. Here we're
gonna say how little people just like we did before. Analysts copy. Let's say three lines over here. First of all, I would obviously like to see Oh, my about page is gonna look like. And here maybe let's have another title
. Just so we know that this is gonna be about page on which right? An entitled This is an about page on. You know what? Let's also right away. Set up the link is that way we can navigate it much more easier
. So I'm gonna say somewhere within my hand, expressions to indexation email all the way and a top We're going to say that there is going to be a link. The link is gonna goto about Index page or about HTML
page. And let's just say about Paige now, I can do the same link in the about page just that we can navigate back, so I'm gonna head over to my belt age. And instead of abolishing
the male rows, they're gonna write indexation email on Let's just change this to a homepage. So again, we're just setting up a easy navigation just so we don't have to deal with whatever taps
here. So let's say here, we're gonna get rid of this. We're going to save it. And now I have my about page link. Now, if I had over to about Page, what do I see? Well, I see that there is pretty much three having
one's on, then heading to. But obviously all of them are not stopped, so I would have to stop. Well, the easy Where would be well, I mean, it's very simple. We're just gonna grab the style tags. We're gonna copy
and paste them here on. We're gonna say that somewhere again, within the head element within the about page, we're gonna copy and paste them. Sure enough, I have my stuff. So everything is working really nice. But let's
say I don't know next day or next hour, whatever. Sometime after I've created this initial stars. I changed my mind when I say you know what, this chocolate color doesn't
really good. Look good. So it's safe. We're gonna head over to my home page. I'm going to say you know what? I would like to change this, and I would like to change this to Green again. No specific reason. This is just how I feel
. No. What happens though? I would like to change these heading ones to all my pages. Teoh Next page about page. Let's say there's gonna be Contact page or whatever. Another 1030 pages
? No. What happens though? I go to about HTML. What do I see? Do you think this is gonna be green or this is gonna be still chocolate? Well, I'm gonna go out here on a lemon, say that this is still gonna be chocolate, because
within this page were obviously styling and has a chocolate. So that is probably an issue. I mean, changing one color is no big deal. They imagine that in general, with your styles
, you're gonna have I don't know, 1030 lines of code 503 the lines of code, even 30 lines of gold. So what are you gonna do each time you're gonna change your mind to some kind of property or the value
you're gonna be jumping all through your pages and changing it? And what, for example, happens if you forget what kind of style you need to change, then you're gonna have to scour through on, I don't know, compare
them or do something like this. Now, again, that doesn't sound very productive to me. So there has to be a better option, Okay, in order to show you the better option. First of all, let's get rid of these styles we don't need them
for now is gonna get rid of the internal CSS now within the about page as well as the index bridge. So let's say we're gonna have no internal CSS. So I'm just gonna go again, back to the basic
html that we already worked before. Now that better way would be a external CSS known or to create the external seasons would first need to create the
CSS fire. Now we can name our since this fall. How are we would like but similarly how we had with index when we needed to have this HTML extension the same
works we would see assess. So here, if I'm going to say let's say, Stiles says. And again, you can name this Bobby CSS doesn't really matter. There's just some conventions where you say main
CIA service or style. CIA says something that would actually reflect that this is something to do with styles. But the most important thing is here to see assess extension. You always always need to have
it if you want to use it. The CSS Now here again, we can write the styles. Now again, let's remember what we had. So let's say anyone on before heading one. Let's have just a simple color on Let's
look for some kind of color so I could go with I don't know Crimson something like this. So I'm not gonna add in a more fun sized. I think it's we already have covered this, but let's say
for having three. And when I say cover this, I mean we don't need to add it right now. We're gonna cover the syntax. That doesn't mean that I'm not gonna cover what is the font size just as a side note. And let's say for heading
to move and add another color. It's a color, and I'm gonna look this time for you, so I'm going to save the file on surprise. Surprise. Nothing happens, you might be wondering. Well, this dude doesn't know
what he's talking about. We just had a perfectly working CSS. And now he just ruined everything. He deleted it. He created some funky CSS style on. Nothing has worked. Well
, please, just wait. If we're gonna head over to indexation email and again within the head element, please don't place it somewhere else within the hell it Helmand. We're gonna have to create a
link now with them. It if I just type a link. Noticed. I'm getting all these options here. So what I can do is Aiken like to see assessment, which is gonna give me a ride away? Everything that I'm looking for now it
might be funky sometimes if you have multiple actual files. So big here. Careful, it's going to give you something automatically. So again, let me head over back with Command Z. So
I'm do what we just did on instead of maybe CSS. We can just look for basic link, So let me again get me up. Suggestions on within the link notice. We're getting the link tag now. The link that is not
gonna have a closing tax. How are we were getting this relationship attributes on this is gonna point to the statute. So we're saying we would want to link this page to establish it. Now, this is where
we would need to go with the path. And again, we have covered this already in HTML, where we can have, let's say, the simple bath and just say style CSS war. We can obviously adhere
the dot and work slash And again, this is where we're looking within the folder. Now, up to this point, it's not gonna matter which one you're used. Like I said before, later on, as you're using the react or node, this
will gonna matter. So you might as well get used to it right away. The actual relative paths. But anyway, let's just stay with a simple example on Let's say we're looking for style. See assist. No, que
So I'm looking right now and I don't see anything. The reason why I don't see anything that if I'm actually in the index page where I'm sorry, the belt page. I'm obviously not gonna be able to see that, however, if
I'm gonna click on the index page, so I'm currently at the index page. Check this out. So have all my style's red, for one as well is. I mean, it's annoying. Probably. So this
was probably a bad choice. What's pick another color? Let's say that we're gonna be looking for this guy. Maybe this is gonna be a little bit friendlier through I. And now we have this cat it blue for my heading to. Okay
, so this is already a good start. Now, what about the about page? No, we would have to do with same thing we've had over back to the about page. I'm gonna create a link. Now, again, this link is gonna have to be
the actual element. We have a relationship attribute that gonna have the value of passion as well as the entry of attributes we have where this is located. And remember, whenever
we were working with links were also using this pastry factory. Check this out just like this here. So the same way would work over here again. We're gonna point to the same thing. And I'm sorry. Not main CIA says
but style CSS. So once we save it, notice what happens. So if I'm gonna go to a about page, what do you think I'm gonna have or you, um if we're working where I'm sorry for looking
at this correctly, we noticed that both of them are exactly the same. So we have been successful. Now. What does that mean to us? Well, that means that if I'm gonna go here back to the styles CSS. And if I'm
gonna change this and let's say if I'm gonna go back toe, I don't know, like, regular herbal color on both pages, not only the about page, but also the homepage. These styles are gonna work
so you can see already how much port more productive. This is where we can right away work with multiple pages. Again. Let's have maybe a font size. It's a phone size on. Let's
say this is gonna be 4 g and right away on both pages and again for the last time with me, show you that this really works on both pages. They are working, so we know we have been successful. So in
general, this is gonna make your life much more easier if you're using the external CSS. No. One Last point that I would like to cover, though, is this path. In a lot of times, whenever you're working
, your styles are going to be in fact in a separate folder because you're gonna have multiple files within your root directory as well as you're gonna have multiple ceases. And it's not a good idea. Just
have all these files over here. So what you would do in most cases and we're not gonna do this throat editorial. But throughout the project, we're gonna have the folder on, then within the folder, let's call this
folder. And again, it just makes sense. Leaving the folder is gonna be CSS and let's grab on copy and paste. It starts now, the moment we do that notice we don't have our styles anymore because the relative
path or path in general matters. It doesn't matter where you're pointing where this a trick FIS point. So let's fix this. Let's say 40 annexation email again. We need to look forward to CSS folder
first, So I'm going to say we're looking for two CSS and then we're looking for staff and again as a side note, this is also gonna work. So if I'm going to say for indexation Mel, I would have to look for CSS
folder and then order style CSS. Now everything is working for him and again this is gonna work the same way. If we're using the relative, No, let's also check it out in the about HTML. Again
, we just need to point to CSS folder and then within the CSS folder we have the style CSS. And this is that we can start using the external stash it in our CSS projects
. Awesome. We have covered in line internal and external CSS. However, before we dive into the syntax on how we can create a syntax, what are the rules for the syntax
? I would like to show you which one is more powerful. So if you're looking at these three options is gonna come important later on, he's gonna basically matter a lot of times, which one of them is more powerful
. Now, let me show you what I mean by this. No. First of all, I would like to clean up a little workspace a little bit. I mean, you don't have to do this, but I'm going to set it up basically the workspace, how we were going to use this. So let me close
. First of all of the tabs for now, I would just like to have my neck station email. I'm going to use the style CSS on. I'm gonna move them out of the CSS folder as well as I'm gonna delete the CSS holder
. So I'm not going to use it right now on. I'm going to get rid of the about HTML as well. So I'm gonna be left with only UNIX html on here. Let's create the proper path. So I'm gonna have
the style CSS. And now this is gonna be my set up. So as I'm looking at this right, I have my heading one as well, ascending to and for now, you know what I can just do with heading one is we're only going to show
you one example and then if I have my styles would, let's say color blue, what do you think happens if I'm going to create another one? The internal CSS again? Remember, this was done by
using style sheets. And let's say here, I'm going to write that You know what? Heading ones are gonna be different color. I think one is going to be, let's say, uh right. So let me write the proper syntax
, which we will cover learn in the next video on, Let's say color is gonna be read. What do you think is gonna happen? No. This year I'm having heading one with color blue. But in my internal staff, she
I am writing This has color it. No, I haven't saved it yet, so nothing obviously is happening. But what do you think is gonna happen once I say, Do you think heading one is going to be bluer it? Now let's just it out. Let me
say this on Interesting. What's happening is my headings not blue. But in fact they're red. So I can see that the internal style sheet is stronger than the
external one. Because we are overriding. Now let me tell you right away that we can. You use both of them. So let's say if you would have some kind of styles here for heading one, but you
would have different styling here for having to. You can do that. It's not like against the law or anything like that. How are Just remember that if you're gonna have some kind of style here already for
heading one, you will get override this. So if you're selecting the same element more the same class or I d or whatever. You're having the same selector. And you already have this style property
in value in your external CSS in the internal one Jurgen override. No. Obviously, if I'm selecting heading to on for having to have no selections right now have no CSS roles in the external
one. It's obviously not gonna matter. So let's say found size is gonna be I don't know, three Ari EMS, then this is just gonna affected because I don't have any styles there. But if I would have
some difference down here, it will going to get over it. That's something important. Now we also have the in line sees. Doesn't remember. So what about if we go to one of the heading ones on? Obviously, this is gonna
work the same on all of them, but I'm not gonna go show you the way we do it in all of them because it's just a waste of time. So let's just look at the first one on Heroes again. Change the color on
. Let's use the green one. No, What do you think is gonna happen right now? So let's say this and Let's see. Interesting. So we have the external one that had a color blue. Then we use the internal one
on. We basically said you know what? No, it's going to be read. And then last but not least, we have the in line one which pretty much override both of them. And now we have the color green. So what you need
to remember is that the in line one is going to be the most strongest one. So whatever you're gonna right here within in line, he is gonna overwrite everything that you have with an internal or
external the same way with internal. You're gonna override the external one. And again, this is going to save you a lot of time when you're looking for some kind of bugs is to remember that in
line one would be the most powerful one. Then we have the internal one and only then we have the external Excellent. We know who is the biggest bully on that would be the in line sources
. So let's right now. Look at the syntax on the way. The general syntax work number four again. We do this. Let me just delete this comment in html. Let's get her the link. I
think we can get all these headings. We can just leave maybe two of them. I'm just gonna get 103 of these months as delete the other heading to as well we can get Ah
, this one deleted. So there's gonna be knowing line style on just as a side note. If you would like throughout seriousness tutorial, you can work within the stash it the internal
one. So let's say all the examples that I'm gonna be doing are going to be in the external stashing. Or if you do find it more useful during this tutorial, you can obviously work here within the
internal. So let's say it's a little bit more powerful to you to see that you're gonna be selecting having one, and you can see that the actual heading one is going to be right in front of you in your HTML. Now
, I wouldn't suggest doing that when we were going to be working on the project because there's gonna be way more cold in the actual CSS. But for now, there's not gonna be that many, So you might as
well can do that? No, I'm going to write everything an external one because I just find it a little bit more interesting and useful for me when I have that external style sheet. But this is really up
to you. So if this is something you enjoy more working with internal one during dictatorial, go ahead and just do that. Now I'm gonna delete it, and I'm gonna do on my work in the external
. Now, if we're gonna head over to external one, we're not going to cover yet all the values, However, we were going to go over the general things that are there. So first and foremost, this is gonna be called CSS
rel. So this whole thing together is a CSS rel. Also, if you are working in CSS, we have an option for comments. So the way create comments is just by
command and a forward slash or again, If you don't like the actual shortcuts, we can head over to the file or, you know what? It wasn't file. I think it was in the edit. Noticed We have toggle
common, so that's gonna do the same thing that's gonna be useful, especially as we're working through the project because you would want to separate your styles a little bit. So there's gonna be some styles that are for some type of section
of the page. Then there's gonna be other ones. So you will gonna use the comments. So just so you're not surprised of what's happening right now, if you would like to have the comment again, you'll just go here with me starting you line
, Mary, that's gonna be a little bit more useful. And if you click on Taco Line comment, you're gonna get new sets of comments. So everything that we're gonna right over here similarly, how we have with the invasion email is
not gonna be infected in our stash it so we can even comment out the actual styles that we have for now. So let's say I can come in the mountain once we save it. Notice we have no styles anymore. So it's
also something that you might do later on when you would like to test something, So I digress a little bit, but I wanted to show you just so you're not surprised of what's happening. So with me, delete
. This common here was Get rid of this by the second one on here, we're going to say that this would be CSS rel. Now, next on our agenda is gonna be this guy. So this is gonna be our selector
again. Let me create another common and I'm Let's right that we're looking for selectors now there's gonna be tons of selectors. However, in my opinion, it's not necessary, especially in the beginning
to really know all of them. Because you can do a lot of powerful things by knowing, I don't know, maybe six or seven of them. And for most cases, believe me, you can do a lot of powerful
things just by using the class electors that we haven't covered on the I. D. So later on, we're gonna look at more selectors. But in general, just remember that this is gonna be something that
you're selecting. So let's say in our case, we're selecting the heading one. If there's gonna be heading to, we're gonna be selecting getting too. If there's gonna be a class, we're gonna be selecting class and so on and so forth. So this would
be something that we're selecting with this elected after the selector we have the declaration. Look. So, first of all, let me write this neck. The oration that's gonna be probably
proper spelling on this whole thing is gonna be declaration. We're noticed that we do need to have the opening really brace on the closing one. So again, if you're gonna orbit this, and if I'm going to save this
for now, this is gonna work. But it gives you an error. So technically, if you're gonna do something like this, if we're gonna use another heading to notice, it's gonna be really hard. You are getting right away there. So here, we're gonna
write color Red. Let's check it out. We're gonna have And we cannot select anymore how heading to Because we already made here to syntax. So you need to be careful with the fact that you do need to follow the
proper syntax. So the moment I'm going to open up or I'm sorry, had the closing curly brace, then everything is gonna be working. Fine. Now, this is gonna be our whole declaration block now, like I probably mentioned
before. And no, this is not what I would like to do. The whole thing is gonna be called CSS rule. So this is going to be our whole that includes the selection er on the declaration block
. Now, you don't need to remember these names, but the reason why I'm telling you this is as we're gonna be going through Tutorial. Just so you're not surprised if I'm using one of them. If I let's say, Well
, let's work on the most basic selector. You know what I'm talking about? Now, this within is gonna be the property. So let's say within the declaration block, there's gonna be a declaration. Now, Declaration
is the property, plus the value. So in our case, this would be this line on what's right over here. Declaration. That's gonna be the naming. And then within the declaration, this guy's
going to be the property. So what kind of property would we want? Whether this is gonna be the color or font size And again, there's many, many properties, so obviously I'm not gonna cover them right now, but
in general, what you need to remember this is gonna be the property. Then we have this Intacs off a colon, and then here we have the values, and if we have many properties. We also have even more
value. So let's say four colors again. You name it. You want blue, you'll get blue. You one thread, you'll get read on. You get the idea now, Like I also mentioned before, the semicolon
is important. Because if I'm gonna admit to semicolon on again if we're gonna save it, notice something interesting. My color blue is not working as was my father said, And again, we're getting the errors right away. So it's
kind of hard to miss. And this is one of the neat things off using the actual nice text, that air, which is gonna give you right away suggestions. So you don't have to spend hours or minutes
or whatever on looking forties there syntax errors that you created because believe me again, we have four lines of code seven lines of code. Yeah, of course, it's easy. But once you get
to hundreds and thousands than the smaller might take you a long long to fix it and find it. So it's always better if you have something visually telling you that. Hey, listen, buddy, you made some
kind of mistake. So semi colons important in short. So with me, maybe add we're here that there's gonna be property. So it's right property and right of the property. We have the value with
me. Save it. Now we have a lot of comments. So now we know the basic syntax. And again, in a nutshell, all these things are gonna change. Depending on what you're doing, you're gonna have different selectors
. You're gonna have different properties, and you're gonna have different value. So these things are going to be constantly changing. You're not always gonna work with heading once you're not always gonna work with just colors or, let's
say color Valley of Blue. So all things can change all the time. However, the syntax is going to stay the same. You will gonna have a selector. You're gonna have a property, and you will gonna have value
. Excellent. Now that we know this Intacs, why don't we start with our first most basing selector, which is gonna be the type selected now in order to work properly? Let me just delete
everything that I have been to see assess. Now you don't have to do this, But in my opinion, I would like to start from scratch is that way. You don't get confused with the previous code. Essentially, Mel, I'm going
to create a new element, so there's gonna be one heading one with hello world, then heading to Well, let's have maybe a paragraph. Now, please understand that we can have all the regime elements we
would like, but in my case, I'm just gonna got three of them because it's gonna work exactly the same. So there's gonna be a heading one heading to on paragraph. We have 50 words. Okay. So far, so good. Then
if I'm gonna head over to Styles, insists on make my first election. Now, whenever we're gonna be working with selectors, the most basic selector is gonna be the type. Select now type
selector reflects off the type off the male element you would like to select. So if you want to select heading one, you're gonna type heading one you're gonna want to select heading to you're gonna type
heading to now. What do you think you're gonna have to type if you want to select paragraph? I think you probably answered P meaning for paragraph, so that would be correct. Now, in order to work with that. We already
know. We We need to create a selector. In my case, let's say heading one. And now I would like to say what kind of styles I would want to add or this element. Now, in my case, I'm the right color
again. And we're gonna use color quite excessively in the beginning because that's just easier one to show you because you can right away. See it on the browser. Let's say again, we're gonna start very simply
by heading one is gonna be read. So sure enough, all the heading ones were in our kids. Just one that we have in our document are gonna have the color of red. Now the same is gonna work
if I'm gonna have the heading to and again, I'm just selecting this as my selector. So all the elements in my page that are going to be heading to we're gonna have color on Let's say
green again. Nothing really earth shattering. But we know that this is working. And last but not least, we have the paragraph and again exactly the same way off. Whatever html element
you have now, in my case, I have a paragraph on Let's a Color is gonna be great So so far, so good every time. We would like to style some kind of HTML element, the easiest
on the most basic selector with the type selector where we just select the type off the HTML element we would like to style. If you want to be extremely precise, we should address
these selectors as element selectors. So if you're a stickler for names, here you go. Keep in mind, though, at least in my opinion it is much more important to know how to use them not to remember
every naming convention out there. That being said, once we have elements electors in our CSS still build. Yes, that's not for something really cool called element grouping, where we can combine
multiple selectors while we will use element selectors as our example, please understand that you can group any feature to see it's a selectors we will cover in the future of the same way
. So how selector grouping work. So let's say right now we have three selectors. We have the heading one had in Q and Parker on what we would want to do if let's say we would want the whole text
to be blue. Well, you could say the simplest way would be very simple. We could just select the body since this is attack and add color. Well, let's try this out. Maybe like me. Delete this on
. Let's say that instead of selecting heading one or paragraph, you could just do body on. We can use color blue so simple enough. Let's see what happens. Well, sure enough, it works. Okay
. What about if I would just want the heading one? And hadn't you to be able our paragraph should say, I don't know, stay right or something like that. So let's say the whole body is gonna be red. But
then these do. I would want to people. Well, I can either select them specifically separately. I can't say anyone and heading to war. I can just group them together. In this case, I can
just say heading one comma so that would be this in tax on heading to is gonna be in a different color. In our case, let's say that it would be blue. I'm going again. Use the color blue on
the moon. We say with notice what happened? So both of the selectors that we have, if we group them together, both of them have the same property. We have the same value. So this is how we can use
grouping selectors in CSS. So far, so good. We know how we can work with group, but let's imagine a little bit different scenario. So let's say I'm gonna first delete this on. We're
gonna write, heading one is gonna be title heading Idol ending and then organize some kind of paragraph. We're gonna say paragraph and within the paragraph, I don't know, Let's place like 20 wards. There's something like that
And then after the paragraph, let's imagine there's gonna be another heading one, but this one is just gonna be at on your foot or heading again. It doesn't really matter how we call this. The main idea is gonna be very simple
. So I would like to work with heading one, and I had some kind of styles on Lee to the heading one And let's say the other heading one. The photo heading he is gonna have a separate styles
. Well, first of all, let me get rid of everything that I have for now. In my style, she and knowledge decide how we're gonna do this. So only the title heading is gonna have specific styles. And then the footer heading mood
have totally different styles. How we would do that well, in the CIA says we have an option off using the I d Select. Now, the way we work with the selector first, we would need to create a
90. In my case. I know that I would need to work with a attribute in mansion email, which would be I d. And naming here is important because we're gonna use it to actually select it in CSS
. So let's call this. I don't know, a heading adul. And then also we can work with a heading one, but we're going to do that in a second. Once we understand how we can select this, we have the idea of heading
so far, so good. So we have the idea with a value of heading now, once we go to style CSS, If we would like like this Heidi, the syntax would be following. So first we were going to go with
hey hashtag and then we would need to come up with a name. Now when I say we would need to come up with the name, that means that the name should match whatever you have here in the value. Otherwise, you're gonna call this grandma
. Madea, the CSS is not gonna be able to select it. So in our case, we know that we're selecting the heading on. Let's maybe use the color again. Property on. We're gonna say the color should be green power. Let's
also look at the other property, but we can use for colors that will be for the background. And again, we were gonna cover colors and literally few videos. However, just remember that
with a color, what you're doing is you're selecting the color off the text. Then the background is going to be self explanatory with a background. So it's a background. Should be. I don't
know black. Now the moment we say would know what is what happens. Only the heading beheading one that had the title of the heading has over here this background like as well
as the color green. Now I can go back and I can change. It could maybe let's call this title heading. Maybe that should make a little bit more sense. So I can write title. However, the moment I changed the name or my value
in the A, the attributes Obviously the CSS is not anymore selecting because names don't match. So in our case again, we would need to head over on Let's say that this is gonna be the time now one thing with
ideas, what we should remember he is the simple fact that they should be unique What I mean by that. So let's say if we're gonna be working with the other heading the foot or hurting, we should have the i. D. Howard
that I d shouldn't match. The idea is that we already have currently on a page, So I'm gonna go this here subheading. So instead of using again, the title ideas should be unique because there's
and for the subheading again, we're using the Addy selector and we're saying that the background is gonna be gray on color is gonna be read. Excellent. We know how to use the I D selectors, but
CSS offers also something really cool called class electors. So where were we would use these bad boys? I was always We're going to start by getting rid of what we had in the previous
video I'm Let's say in indexation email, we're gonna change this around a little bit. So I'm going to say that I'm gonna get rid of home headings and everything. And I would just like to work with, I don't know, heading three and
again. It doesn't really matter what kind of elements were creating. The whole point is gonna be working with classes. So let's say there's going to be heading three on. I'm gonna call this I am on. We're gonna have green. So that
would be a green head now, within the second heading the other heading three. I'm going to say, Well, you know what I am red. So those are gonna be in my two headings so I can save this man. You know what? We
can just select them both and copy and paste a few times. So let's say that there's gonna be six headings total three of them are going to be green on. Three of them are going to be read now, as I'm looking
at it, I already concede that Yeah, everything is fine. So I have read, read, read. Everything is correct. No. How do I actually style them? Green or red. While you can say we could use the ideas right
, because we cannot select them all. I cannot do like this because otherwise this is not gonna make sense. I'm gonna style them, but all of them are going to be exactly the same. So if I'm gonna write color green, all of them are going
to be green. And if I'm gonna write, call, read, all of them are gonna be coloring. So what would be solution? Well, you can say, OK, we can go back and we can start adding the ideas we can say, I don't know
, maybe one. Right. So this would be number one that number 234 and then go back. Yeah, you could technically do this, but that probably wouldn't be the fastest way. There's actually a better
way that would be using the class. No class is gonna be again attributes on our HTML on safe self explanatory. The name is gonna be class. So class selectors
other ways how we can work with CSS in order to work with multiple elements together, not just grouping the actual selectors. So that's something you should always remember it. If you like to use I ds
would be using the class attributes and again for the class attributes. We will need to write the value now. This is not the best naming convention. I can tell you right away and having these green on. We're gonna cover this a
make sure that their unique for that specific element meaning you're not reusing them somewhere around the actual page. Otherwise, if the ideas are not unique, you're kind of losing the
lot in the project. But for now, alleges go with class of green, where for every heading that I would like to have green, I'm gonna have this classic cream. So instead of using daddies
actual meaning off. What is the reasoning for using dead Now? If we have the subheading much changed around a little bit, let's say again, we're gonna be selecting Hub subheading. Now we know that the naming right
, we're gonna create a class on for every heading. Like I said that I would like to have green. I'm gonna copy and paste this on at the value of green. Now, for all the red ones, I'm going to change it. I'm not
now is correct. Maybe let's select these 1000. Let's just change these colors. So instead of green, that's gonna go with I don't know, text read on, then what we should use for the background? I don't know. Let's 307 04:04:54,64 --> 04:02:06,55 decide So for the background we can use may be great. So it's this this out? No. The moment we're gonna save it, notice or the title lady, we're selecting the background Black and the color green
gonna say Green. We're gonna use the red. They're gonna let me select this value for this guy on, Let's say, for the red one, coughing paste on for the last one the same way. Now, how do we select them and see
us as though? So we'll head over back on. We're gonna get rid of this heading three. We're not interested in this. And now, instead of the hashtag that we used for the eighties, we need to use Doc. This is how
we can select classes. And again, we need to write the name of the class. I'm don't write grandma my idea because you don't have this glass in your document. Well, maybe you do have in yours, but I
don't have in mind. So in my case, we're gonna write Green. And now again, I can write whatever I would like in our case. Since this is gonna be best visual example, I'm gonna use green. And what happens? Onley The
headings that have a class agree there in green simple enough now lets comforting pace this let's say we're gonna select not the green, but instead we're gonna work with Red And
what happens? Well, we're gonna live, Let's say color red and also background I don't know, great background is gonna be great. No. What do you think is gonna happen in this case? So only the
classes that were added to the heading threes with the value of red were styled this way. So this is how we can use class directors in CSS, and they're very, very powerful
just to hit home about the I. D and class electors, we can also combine them. So first and foremost, if we would like to add the idea of let's say title
, this is gonna be my main title. I can just add the I d and I can also have the styling. So just because you already have the class doesn't mean that you cannot add the i d as well as you can have the second
class. So let's say here not only we're gonna have the out of title, but we're also gonna have I don't know, the class of lower case. So again, the naming is not gonna be the best one. But this is just to show
you that we can work not only with multiple classes for the same element as well as we can use the idea combined with classes how this is gonna work. So let's say I'm gonna go back to the style CSS
on. We're going to say the i d for the title. We'll just going to say that font size is gonna be really big. And again, we're gonna cover these properties in a second and just need to show you how things work with classes and I d. And
let's say for the idea of title, we're gonna have the font size with 40 pixels, denies right away how it got bigger. But then let's say we also have a class of lower case Lower case
on for this one. We have text transform again and probably we're gonna cover later. But we're gonna have the lower case in this case. So every time I started with I am is going to be turned into
lower case now again, the main difference between the i d selectors and class electors. Because, as you can see, the only thing was syntax into CSS. But everything else
was the same. But in the HTML, you should use Onley ideas as something unique. So don't add the same i d with the title somewhere else here. How are classes
? Weaken? Reuse how we would like so for everything that I wanted Green, I could just have the class of green. How are for lower case? If I would just want let's say this class of Red, most of lower case I
can do the same thing. So no, this guy has the Larkin and hopefully you get an idea where classes we can reuse them. However, we would like for everything that we would want to style our with ideas
. They should be unique, so you shouldn't reuse them with same value while working with HD month. We didn't cover two specific elements. One was def on. The other one was spat
. Now the reason why I didn't cover them because I didn't find it useful within a she male because they're used for grouping our in the thesis, these two elements are going to come very, very
powerful on very, very useful. So again as always, let's look at the example. So first of all, let me just keep this green on. The color's gonna stay green as well as we're going to keep this class of right just
to show you how basically things were. Now I'm gonna get her of the titles on the ideas and everything else. So let me save it on Let's head over. Back in indexation. Now, in the indexation email, I'm gonna create
a heading. Let's say three with a title. Um, heading number one heading anding number one on. Let's add maybe a paragraph with I'm sorry
, I would have to first have a paragraph. Well, I don't know text like I don't know 10 words or you know what twin? That's gonna be our partner now. What I would like to do, right now is copy and paste the same thing
here. And let's write heading not number one, but this is gonna be heading number two. And also let's decide that somewhere within the second paragraph there's gonna be some text and I'm gonna have my own text
where I'm going to say, Hey, I am I am uppercase and I'm gonna right here A I am upper case. So we would like to have this text apricots, and I'm gonna place it in two places. So I'm going to say
the first one is gonna be here on the second one is gonna be somewhere over here and again. The soul is gonna make sense literally in a second. Now what happens? So I would like to leave this heading of handing number
one on the paragraph to be read as well as the heading three. The second heading, as was the paragraph to be blue so long let's think about it again. I cannot select all the heading threes
because I would want them different as well as I cannot select all the paragraphs because it'll work the same way now again, we could say, Well, we can easily just adhere the grouping or we can
add the ideas. However, there's a better way so we can use def on span 40. Like I said, Deven Span would be used for group. So first, let me create a element on the element is gonna be very simple. We
just write a diff, that's all, since that is the name of the owner. And now I would like to place the ending tax. What is there where I would want the group something. So in my case, I want a group the heading three as well as the program
, the first burger. So I'm gonna add over here and the moment we say with noticed, nothing happens. Nothing literally changes. No, que however, that was a good start. Now, why don't we do the same thing with span? However
, in this case, we're gonna work with this. Hey, I'm uppercase. So again, right before this text, I am uppercase. Let's create a span element. And now let's say that I would like to work with an uppercase. So I'm gonna grab
this whatever text, and I'm gonna copy and paste it here. Now, I would like to do the same thing with this guy. So we have few options. We can either just copy and paste everything that we had here. Or you know what? I
didn't want to cut it out. That's a copy on. We're going to replace whatever text we had already with the spot. And again, the moment we do this, nothing changes in our actual browser. So we might
be tempted thinking Well, listen, there's something wrong with this. What's happening? Well, we should already know that we can use just a simple element, selectors. Right, So we're gonna head over back on, We're gonna say
, For all my dibs, I would want to first have some kind of color on the background. So again, we can just copy and paste whatever properties and the values on. Let's notice something interesting. So right away
, What's happening is the Div. Helmand that had heading in a paragraph has the styles that we wanted just by obviously using our element, selectors. Okay, let's just get out of the same thing on this
man. Let's say for the span, we're gonna use text transform again property that we're gonna cover later on. We have an uppercase now. Also, we noticed something interesting. So everywhere we used the span
, we were able to group whatever we placed within the span on at these styles. No, I'm not gonna cover right now. The reasoning for why this is basically displayed one
way on this planet is going to be in the in line because we're gonna cover this as we're start talking about the box model because for now, what we're seeing is that there is just difference with a day of
we're basically starting a new line on the span were using foreign line style, and in general, this would be the block level element on this is gonna be the in line now, but again, we're gonna cover this later on
the course. What? I would like to understand that whenever we're gonna be using dividend span, this is gonna be used for grouping. So if you want a group something together, we're gonna place this in a death on If you
would like to style just asked a block element, then there's are gonna be important how or if you would like to style something. Asked the online helmet where, as you notice, it's not starting a new
line, and then we're gonna you spent. But again, we're gonna cover this later on in much more detail. For now, though, what is gonna happen with second heading to you on the program? Because remember, we
wanted the second one to also have different styling. And for now, we have the dip. Now, if I'm gonna have another live here, I'm going to say, OK, so there's gonna be a second Dave and let me cut
this out on. Let's say that I'm gonna obviously end where I would like to end my grouping. So this is gonna be at the end of the paragraph now. Both of them are obviously having the same styles. Now
, this is not what we want, right? So we wanted the second one to have just a green color. Let's say, Well, we know that we can use classes. So this is where the defense become important because we can have
these classes and say, You know what? There's gonna be class and we already have the classes, so I'm gonna have the class of red now. At the moment, nothing changes. Obviously, we have both the same things. Or what if I'm
gonna get rid of this dip. So I'm gonna select anything anymore with a div. Notice the first one obviously has the class. Now I can head over back to the second one and say, You know what? OK
for this guy, let's have the grass is green. So the power of Div on the span is the fact that not only weaken style them asked element, selectors, We can also add whatever ideas we would
want, whatever classes we would want. And that way we can start grouping things together on adding whatever styles we would like. Now, how also is gonna work with this plan? So let's say that
I have this. I am uppercase. Well, I can head over to the first one since I wouldn't want all my spans, just the upper case. But let's imagine there's gonna be span where I would like
to reuse my class of red Mocha. How we have to do is just have the class of red on. Let's see what happens. So now only the span that has the class of red he is getting these styles now again
. Please don't focus of the fact that Dave's are block level elements on the spans. They're gonna be in line level elements because we haven't covered that. But just remember that whenever we would like to group
something, we can either use Dave war. We can use the span and just in a very basic level span will gonna use if you would like to start something within the tax
authority so we wouldn't want to start a new line. Our Dev, we would start if we would want to start as a block level. So just to give you an idea, if I'm gonna head over here and change
the span to the div So let's say there's gonna be Div instead of the glass respond. I'm sorry to deal with the class of red instead of the span. Noticed what happens. So in this case, we were going
to start a new line. So instead of just styling everything in line so again, that would be the most basic differences. But we're going to cover the more differences later on once we have covered
Div. Now let's talk about the inheritance in CSS. Now, please don't be scared of this word. It's not as scary as it seems. It basically operates on the principle that whatever
styles were gonna be adding for the better entitlement in the HTML, the Children elements are going to be inherited. Unless we specifically style the Children element, I was always
I think it's going to be much more easier to go over were the actual code. First of all, let me get her of styles that I have over here on. Let's also delete everything that we had so far in the previous
lesson. So we're gonna start very simply by working with paragraphs. So I'm gonna say there's gonna be two paragraphs, each of them I don't know, 10 words. So let's do it this way. I'm going to select them both. And I'm going
to say, you know what? The first and the second one is just gonna be paragraph. Okay. So far, so good. Now, if I'm gonna head over back to style CSS notice that if I'm going to style the body
on let's add the color Red What's gonna happen? Both paragraphs are gonna turn right now. Why is this happening? Well, you see, if we're looking at the body, anyone we should already know, that body element
at the moment has two Children, and both of them are paragraph elements. So paragraph number one and paragraph number two. And what happens This If we're gonna add styles to a parent element, the
Children are gonna inherit them. So as we're styling, the body were ultimately also styling right now the perfect. Now, if I'm gonna head over back and let's say that there is going to be a div And
now these two paragraphs are gonna be sitting within and if on Let's this thing out So I'm gonna copy and paste them for now, all of them are still the same way. However, if we're gonna say that def
is gonna have a color of red, check this out. So I'm sorry, not threat Little something different Now both paragraphs are blue. Now, why is this happening? Because even though the Dev
is still the child on the body now, we specifically say okay for days, Dave, there's gonna be a separate start. So instead of just inheriting everything from body, we specifically
say OK, so for day we're gonna have color blue. So now both paragraphs are actually inheriting from the dip, So in General. This is how the inheritance, the door, how are if I'm gonna
head over. And if I'm going to say that I also would like to place a, I don't know, heading to and I'm going to say I am heading. And if within the CSS we're gonna have a specific
style here for heading to and again, this could be I d. This could be classed. This could be a simple elements. Elector, please understand that there would be no difference on for our case was going to use a
simple element like they're on if we're gonna again have color of green. No, this noticed something interesting. So now the heading is gonna be having only the color of green. So what? I'm trying
to explain to you that inheritance is gonna work unless you're adding the specific style for that particular ailment. How are if something is going to be sitting here as a
child element? It will gonna be inherited from the parent element as you're applying styles to a parent element. Hopefully we understand the general idea behind inheritance. Now
, let's look at some caveats to the inherited. No. Nor to do that We're gonna head over back through this style senses, and we're gonna have a selection for the body on for the body would like to have
some kind of fun family. Now, I know I keep repeating this, but please don't focus on the properties and the values because we will going to cover them. In general, I would have to cover some very
major topics first, and then we're gonna look at the specific properties in the value. No. Like I said, we're gonna be looking for the farm family on Anarchist. We're gonna go for the mono space, and we're also gonna have some
line height. Let's say line height is gonna be 1.5 e ems. There's something like this so noticed something interesting. Now all my Children element are inheriting this from
the body. Now, the reason for that is not only were just using some kind of CSS, we are not overriding this specific property, So this is important. Now let's say
again, we're gonna have the color of red within the body then because we're selecting this color within the Dave as well as within the heading to this is where we're more specifically
working with this element whole. If there's gonna be property that we're passing down from the parent, we will going to inherit it. So this is kind of important point, because understand that
this will be inherited unless you specifically overwrite that specific property. So please don't get confused. And don't think that just because you added color blue in A div doesn't mean that
you're gonna also overwrite the fund family in line break. It doesn't work that way. It needs to be a specific property Now, in that case, how you're gonna be using different value, like with
heading to where you have the same property, but different value. But if you are not working with that property, then you will gonna be inherited that property. Now, what's also important is that not
every property is there gonna be inherited. So let's say we're gonna work with a border on. In this case, we're gonna add, like, three pixels solid on. I don't know. Black. Something like this. Check this
out on Lee Dev right now has this property. So not all the properties are gonna be inherited by Children. So that's also something to remember has just aren't working with CSS. Inevitably
, you're going to meet the last ruble principle as well. A specificity and then you also going to see later on whenever we working, we have Universal select and I'm gonna kind of
lump them together because I think all of them pretty much work on a principle off the previous one. So let's start with a last room. So let's imagine this scenario again. We have our
live we have heading to, and then here I have two per gram. No, let's just get rid of all the styles just so you don't get confused on Let's imagine that we're gonna be styling just a paragraph, right? So So under
, As always, we're gonna use the color example, and I'm gonna say color is blue. Now, if I'm gonna later on in the same style sheet had the same selection for the paragraph with a
different color, what do you think is gonna happen? So let's say here, I'm going to say paragraph on. In my case, this is gonna be read now. What do you think is gonna happen? Well, we can already see that paragraphs are right
now. Gonna be with a color of red. Now, what is that happening? Well, because the assist is going to use the last rule that you're added and then apply that in the stash. No, usually what's gonna happen
is that you're gonna be card card working with your CSS, and you're gonna be adding lines and lines and lines and CSS And then later on, you're gonna come here somewhere on line 32 or 3000
and 49 then you organizing this, that So what happens is that you're gonna confuse the fact that you already have your style selection over here and see. It says it's gonna be like, OK, so you
had your first rule or whatever second rule or whatever. But later on, you're actually creating you want. So I'm going to use right now The fact that you added this last rule on I'm going apply
only the restaurant. So please remember whenever you're working that your last rule is gonna be applied regardless of what you have in between. So that's something to really too important to remember
because there's gonna be cases where you're gonna find yourself looking for the reasoning off. Why certain CSS is displayed. So waste check whether you haven't applied another rule
that pretty much overrides your initial one. No, Also have ah, topic off specificity. Now what would dad me? Well, OK, let's look at the same example. We have one paragraph
on the second one, so let's add maybe some kind of class to them. No, What's right? Glass is going to be read? No. Here as well as for to this guy with add the classic right now what happens if
I'm gonna head over again? Back to CSS. First of all, let's style the class of red. Not right. Obviously, the color in our case is gonna be red. But let's say that Mitterrand again
somewhere in a document, moving right, that for all my paragraphs in this case, I would like to style them blue. Do you think they were gonna be blue right now since we just covered the last rule or they're still gonna
be right? Well, I must just get out as you notice they are staying red. And the reason for that is, even though we're applying this with a last rule, the first rule is more specific
. So what's happening would see assess. CSS has a specific measurement system for specificity, and if you want to be really diligent about that, you can just go ahead
and Google specificity measurement in CS says No, I'm not going to cover this because I don't really find it useful right now. Especially we were just starting with CSS. However
, if you would like to go and explore it on your own, you're more than welcome to do that. And at the very beginning, I believe I would go with W three schools again because their explanation probably
is going to be the most straightforward, especially as you're just starting out with a CSS now. It also would like to cover very quickly the fact that we have the universal selector, which select
all the elements. So if I'm just gonna get rid of this on, if I'm going to say there's gonna be universal selector on the way we type, Universal Selector is by disastrous on again let's
add some kind of value. So let's say color is gonna be blue. All my elements are going to meet the blue. However, the kicker here is that universal selector has the least amount
off the actual specificity. So even though we can have this at the very end, if we're going to be overriding this somewhere, So let's say again for the paragraphs we're gonna say Color Red, then
the actual universal selector here is going to be the least powerful one. So it's gonna have the least of my kind of specificity. Now we are using universes, elector, whenever we want to reset
the default processed us, which we will going to cover a little bit later on. We will going to use this university selector as we start working with the project, but in general this is all it's
gonna do. It's going to select all the elements, however, with least amount off specificity. Hair is at this point, I think we are comfortable. We would see it says basics. So we're gonna start exploring
more specific parts of CSS. And since we have used colors for most of our examples anyway, why don't we start with colors and CSS? In the following Whittier's we will look at color
properties values how visual studio code can help us out with picking the best colors possible for a project and last but not least we'll explore. Useful external resource
is for colors in CSS. So what do you say? It sounds like a plan. All right, All right. I know you're eager to start working with actual properties and values, so here it goes. Even though we have already used
color properties pretty much for all our examples. Why don't we start with colors on then we're gonna go from there and we'll start very simply by looking at two properties that you'll use most of the
time with colors, color, property responsible for the color of the text on background color responsible for the color of the background. First, let's practice with some more HTML. So I'm gonna head over
to my indexation Mel on. You know what? Maybe before we do that, I'm gonna get rid of these paragraphs on whatever, Asterix Not gonna need it right now on then, within the indexation email
, I'm just gonna create basically two headings with each of them having a separate def. When I'm sorry. Not just if I would separate I d. I'm going to say, let's say there's gonna be hanging three on
within the heading three Wogan, right? I don't know I d on. Let's call this first on this is just gonna be I am heading adding number one, By the way, I noticed that all the time
. I'm misspelling this, so if you're annoyed by this, my apologies, but unfortunately, that's what happens. I do like the misspell stuff. So let's right here second. So I'm gonna have to headings one
is gonna be number on. One would say on the other one is gonna be number two. So let's see how this is gonna look like, very simply. We have just heading. Now I'm gonna head over back to style, CSS
. Like I said, we're gonna start working with the color properties now. We're not gonna look at the values right now, meaning we're gonna use the most basic ones. Those are we're going to cover in the next videos. But let's just start
by looking at the properties that you will use all the time with your colors. So, first, let's start by selecting a live now the div or I'm sorry, the i d. Some reason I keep naming
my ideas the dibs on my first I d is gonna have color, not the color property again. Could be anything we're going to go with. I don't know something like this. So this is gonna be my color
. And then we're looking for the background color mom of the background colors. I was going to be responsible for the background. So the moment I'm going to save it notice right now, my i d With a name of
first he is gonna look like this. So it's gonna have this background and obviously this would meet the car again. This would work with any element that you would like to apart from obviously something like image
, where images totally separate. HTM moment. But let's say it would work with the link. It would work with the paragraph. Now, with the links there, some carry outs to it. But generally speaking, every time
you would want the color of the text to be some kind of color, you would use the cold property, and every time you would want the background, you use the background color property. Now, it's also tested out for the second
i d. Because I would like to show you where the background actually has the shorthand. So we're gonna go over here and we're going to say that there is gonna be obviously the i d. Second. I believe
that's how I named it on here. Let's again use some kind of color. Now, this is just gonna be some crimson or something like this. And then let's work with the background. Now with the background eventually, we're gonna also
look at the background images and what happens is that what images we would use something like this and again, we're not going to cover this in great detail right now because we're gonna look at it later. But at the
end of the day, we can combine both of these properties here on just right, the shorthand. And this is something that you're going to see a lot in a ceases. And obviously we're gonna cover this a lot because we can do the same
thing we have. Let's say padding or margin, and you get that idea. So in our case, instead of writing the long way where we're just looking for the color, we can just write background. And then here we can write either
the color or later on. We're obviously going to start working with images as our background. So in our case, let's just say that this is gonna be yellow on weaken. Save it. Noticed that it's gonna work exactly the same way
. So just please be aware that you can use background color just as you work more the color. But later on, as we're going to start work with, images were also can use the background short at where we just
read background on. Then whatever value were tapping here for the color. Awesome. We're experts on color properties. What about the values? Well, our most basic option would be using color names
on this is as straightforward as it gets. Every time we're gonna be using the property, that's a color or background color. More the shorthand for the background. We would want to use some kind of
color name. Now, what's neat about visual studio code that it gives the suggestions. So if I would want color names starting with why it's gonna give me the color. And I'm starting with why, If
I'm gonna start with A, it's gonna give me color names with a and you get the point. There's 100 and 40 off the color names. If you would like to know all of them. You can again head over to W three schools
on. Just start scrolling down and you'll see all the color names now, Like I said, this is just gonna be as basic as it gets. Every time you would want to have color or background color property, you can always
pick a value from the color names. Using color names for your project is very neat and handy. However, eventually you're gonna run out of your options. Basically
, the more project we're gonna build the bigger project you would like to build. You're gonna be reaching for some more color options. On one of the color options we have is RGB Now, what in the world is
RGB Most? The RGB stands for red, green and blue. And then we can pick color values from 0 to 255 meaning zero would be the smallest
onto 55 would be largest. So how we would use this. Well, first of all, let's delete this color name and let's right there. We're gonna be looking for RGB color. Now we're gonna write rgb um let's right over
here. What values? Who was like, Well, since I would like my color to be completely red, you can have my value to 2 55 and then for rest of them for green and blue. I'm just gonna set them zero. Now, I
already concede that visual Studio Gold is giving this suggestion. So basically, this is gonna be the color that we're gonna have on. We can clearly see that this is gonna be right. Now let me save it. And
sure enough, I have my red color. Now, as we working with RGB values, we also have an option off having the black or white color. So how we would get the black color gun looks right. Rgb
That would be our syntax. And then we're looking for 000 So all three zeros would mean that we're getting the black color now. The white one would be completely opposite that one. We
will be 2 55 to 55 on 2 55 So it's just, you know, personal change for the i d. Number second two green color. So let's say the color of the text
is gonna be green. So how do we do this again? zero, 2 55 and 2 55 since the green is the second value, correct. And then we're looking for the background of white. Now. Obviously, the moment
I'm gonna do that, you'll see that it's gonna be hard to notice because their whole text is white, our whole document. But let's try it out. So it's right to 55 2 55 on, let's
say, 2 55 Like I said and start to notice because our whole background this way No. Why don't we go to the body on Let's look at different values because for now, you're probably thinking, Well, wait
a minute. He's just using the red and green color known. Let's mix it up a little bit. Let's say for the Bari there's gonna be background on let's write RGB values and then you can right here
whatever your heart desires. So I'm gonna write 100. I would say 34 on may be here. This is gonna be 210 and let's see what kind of color. And obviously, first of all, I can
see that I have my background, the white. So all this is Warton. And here I'm getting this purple car now, I was We're not going to be covering each and every number right now, but just to give you an idea
, if you would like let's say your color to be reddish, you always there would be focusing on this valley. If you would be having your color is green, you would be focusing on green Dark. Now let's maybe at one more I d
. Here. Let's basically say heading with a idea of three. Um, that's also right. I'm not gonna be too. I'm gonna be three and let's just that I was for the blue one. So let's say or
here in the styles can weaken. Just create a neural. I'm going to say we're gonna be looking for number three on for the color. Maybe let's have the color again off blue. So let's
look for RGB and then we're saying 00 on The last one is going to be 255 because obviously that is from the blue one on land for the background again. Maybe let's
test it out a little bit different values. So let's say rgb and then we're looking for I don't know, 100 on dread on 100 let's see how this is gonna work up. This is like a dark
gray color. Hopefully you understand that this is how we work with RGB values on feel free to experience with these values and then next video gonna look at the rgb
a value. It's easy to see that RGB values give you much more power because you have way more options than just choosing the car names. Our what's also really need about RGB
that allows you to use RGB A, which would stand for a pass it Ian Transparency. The values would be from 0 to 1, and I was always I think it's going to be easier for me to show you how that
would work. First of all, let's head over to indexation email, and we're gonna have one more I d. Here. Let's call this war. Let's say there's going to be heading three with a idea for on the values
also gonna be here once we have added our heading. We have an idea. Four. We could head over back to style seriousness on here. I'm gonna do it a little bit of spring cleaning The first again. We're going to start very basic
. We're gonna say for the first one I would like to select it. However, right now you know what, Maybe legis save it and let's see that everything right now is pretty much white on the color is obviously black on here
. Let's write some color values. I'm gonna start first. By color on I would like to practice a little bit off rgb a on. We're going to say that I don't know this is gonna be like 100. And then again
, let's say 100 and 23. Um I don't know, 56 whatever value you would like now the difference here is for the background. I would like to go with a black macron. How are
I would like to use the opacity and transparency values you hear? I'm gonna write background. Then again, I'm gonna be looking for RGB. But instead of just simple rgb, we're gonna be looking for RGB
now. How we would write this again, we would look for the black color honestly, since this is our option and then we're gonna be looking for what kind of capacity or transparency this is gonna be So let's say
here if I'm gonna write 0.5, this is not gonna be totally black color. Noticed that this would be a great score because we would be adding the opacity of 0.5. Now, we were gonna be practicing
all Onley with RGB A for the background of black, but obviously understand that you can use any color here. What's important here is this opacity called Now again, it's probably gonna be easier
if we're gonna look at multiple values. So it's competent paste this. Let's say for a second one we're gonna be using a different one. So first of all, let me select again the first on Let's change
this to a second. So for the second, maybe I would like to maybe have a different color. The color is gonna be, I don't know, 45 on and I don't know, 200 on. Let's
say the third one is gonna be animal 34 and again just to show you that you can obviously have different college rallies now, mostly focusing on the green one. So maybe let's this one, like 10 because otherwise
are all of them are going to be green. So this is gonna be totally black old here. So why don't we practice on having the capacity of zero point? Let's say 25 and I'm giving right now kind of
round values, but understand that you have an option off 0 to 1. So one is gonna be the Maxwell. I'm zero would be the smallest one. So as I'm working here, notice
0.5 would have a less transparency. That 0.25. So if I'm gonna go totally with zero, this is gonna give me totally white color. Don't believe me
. Now, let's this thing out. Then we're gonna copy and paste that here In this case, we're gonna change it around. I'm gonna say the value is gonna be three. So harshly. 40 idea of two. Now, let's go. Totally red
color. So here we have 2 55 00 That's gonna be my option on Let's notice if I'm gonna go with totally black color. How are also more capacity is gonna be zero
. What's gonna happen? Well, the background is there, but we cannot see it. And this is our capacity. Value would work. So even though we have a black color. We made it totally transparent by adding
here 40 capacity value zero. However, if would like to check totally black color, we know we have the 84. Then let's have a different color. Maybe a blue one. Let's say rgb
again. Rgb then we're looking for 00 on. Then the Third Valley is gonna be to 55 and here for the background. Let's have totally black color with RGB a Juve
on that will be 00 on one. Now, obviously, in this case, you might as well just right RGB because there is no difference. And again, we're using the round values just to show you that how
this would work because I'm not gonna cover every number from 0 to 1 0.1 or 0.2 because this is gonna waste a lot of my time. But we noticed that there are fourth I d
is having a totally black color with a color obviously of blue because we already know how the RGB would work. Now if you would want to experimental more, let's a body. Let's go
for some kind of background color and in our case again with use RGB a And then again we can write whatever our hearts desire. So if I'm going to start by 10 uh, 10 and maybe here
. I don't know, 200 I would like to have some kind of capacity. Let's say 2000.0 point three, let's notice what we're gonna happen. So now this color would look like this. However, if I'm gonna omit that
and if I'm going to say rgb a noticed, I'm gonna be having totally blue color. So what The opacity ads is right now pretty much or transparency. So again, let's go back. And let's say that RGB
a is gonna be I don't know, 0.1 something like this mor 0.2. It doesn't really matter the moment. I'm going to say it's gonna be almost wait because we're almost
transparency level, Okay, so if we're gonna go up, obviously we're gonna go like zero point. I don't know 56 what we're gonna Well, now we're gonna have less transparent color so
more towards the blue one again, this would work with any color valley. So if I'm gonna right here not 3 55 But let's say 200 months notice. Now we're going more towards the green and again
green with some kind of Transparency Valley, not just regular going. And this is really powerful whenever we're working with a CSS, because this is going to allow us to create, like an overly
So let's say there's gonna be some kind of picture and we would want to add some kind of color on top of the picture. So the picture, let's say, is not as break. So that is where we can use RGB air values by controlling
or opacity. One would think that having color names as well as RGB and RGB a values would give us more than enough options. But lucky for us, we have more
ways to work with colors in CSS on those would be H s l as well a sex of decimal values. Now we will not cover hs o, since at this point I find
it a massive overkill. If you would like to research on your own, of course, there are plenty of great resource is just type CSS hs l and you're gonna be blown away. We will, however
, cover accidents Immel color values or just hex values for sure. X values work a lot like RGB, where it covers the spectrum off red green
on you guessed it blue colors. The difference, though, would be the fact that hex give you much more color choices. Because instead of just using numbers, hex values can also be letters from
A to F, where a would represent a number of 10 and F would represent the number of 15. Well, the syntax would be following first. We would need to have the hash tag. Then the first two values would represent
color of red on it could be any number from 1 to 10 on the letter from a toe, for example, if we would want to have a red color, we would write like this notice we have the hash tag. So we're
looking for tax value, and then we have to efs. Since we know that the half is gonna be the highest one now, does that mean is the same thing as we were working before with RGB, where the highest 1 to 55
waas obviously read anarchic since with hex value, it's exactly the same. Our what you notice here is that you have way more numbers in between. If you were just looking here from
0 to 55 here you're looking at two values that each of them can be from 0 to 50. So again in general, in one short sentence, the hex values are
just going to give you way more color options. That's all the wrister. And as always, I think it's the best way to actually practice with this. Now I will gonna get rid of the body. I don't think that color is
helping us right now as well as I don't think I need to create anything in the HTML. I think that's a little bit overkill or it each and every time heading over to HTML on Let's start, maybe with
an idea first and let's decide what we would like to see. So I guess again, as always, let's start with the red one. But please remember, these are not the only colors you can have. Well, just using them for examples
. So let's say that we were going to get rid off the RGB. We don't need this on. You know what? Let me right away delete both of lines since we're gonna rewrite both. And let's say that here, I'm gonna
be looking for the hex color. And that way we know that this is gonna be hashtag then ff because I would like to have the red 100. Let's say 00 for bull hand 00
for it. I'm sorry. The 00 for green and 00 for blue. Unless you can see right away. The visual studio code gives us the color box where it tells us that this is gonna be red
color. So I wasn't the pulling a fast one on you. Okay, What about the background? Well, let's check it out. How we can get a black Well, if we would have to guess if you already were working with RGB, what
would you think? How we would get the black well with RGB, we got 000 Well, what about if we tried with hex? So I can say here 000 And what you can see is that there's gonna be
an options for you in hacks colors where you don't have to type all six zeros. If you just died three on this pretty much is gonna mean exactly the same thing. Not with me. Save it and let's see what's gonna happen. And surprise
. Surprise. I'm having a black color as my background on my hex color would be for surrender. Okay, let's test it out. The green one. How are let's switch it up a little bit? Let's say that this
guy's gonna be green, and we know that this would be hex value on we're looking for 00 f f That would be for the green one, and they were looking for 00 So this should turn green
. And instead of the color being green, we're gonna have the background green. But the color is gonna be white. So I'm gonna show you how we can get the white color with a hex values. So let's say hashtag
then. We're looking for F f now. Why again? We're using F f f. Remember RGB What was the value? Well, it was 2 55 That was the max zero was the black one. So Max was the white one
on that zero was the black well, it works the same way with hex values. Just the difference with hex value. Maxes Over here, Max is the 15 again. Let's save it and what do we see? Three
. The color The background color is green on the actual color. He's white. Awesome. Now let's try with Div more. I'm sorry. Heading number three Meaning the I. D number three. And in this
case, let's try it out. Maybe the blue one. It's a hashtag on. This would be against 0000 and then we're looking for FF, which should give us the blackwall
. You I'm sorry, the blue out And as you can see right now, I'm having this in Texas. No, I am having the syntax error because I'm trying to write the hex color with seven values instead of six. So let me delete
one of zeros and we have ourselves a blue color. Now maybe let's test it out some different value because again, probably you are a little bit confused of why we always use these colors the red, green
and blue. Why, we can try some other colors on. Sure enough, we can. And let me show you my favorite at least orange color, which would be F 15 0 to 5 From the moment we're gonna
save it, this is gonna be our orange color on then. Obviously, my color for the text is still gonna be green. I'm sorry. The blue not green. And then last but not least, let's work with the four. Where was gonna give
some random colors for Hex? So it's a hex value, and then we're looking for I don't know, 234 a. D something like this. So this should be a pink one. And then
what's happening here is gonna be another value of hex on. Let's just go with 222 which is gonna be the black one. But in general, this is how it would work with hex colors in the CSS. It would also
be a crime from my part, not to mention the awesome tools that visual studio code offers us whenever we were working with colors. So let's say if I'm looking at this hex color What if I would like to change
the car, which you noticed as I'm hovering over the color? I have these options. So, first and foremost, I could change whatever values I'm getting back so as you can see right now I'm working with hex values. What if What if I change
my mind? That's a You know what I would like to have The h s l Well, I can just click on it. And now my values in HSM Now, if I want RGB, I'm getting the RGB I also noticed something else
. If you have here this board, these cardboard has that left click it on this death. I can just change whatever color value I have on it gives me the values here in RGB. So let's say here
I'm looking for this color than I with one. That one. Let's say black one. That's brighter one on here on right hand side. I can just change the color scheme altogether. So it's I don't like the red one. Well, what about
if we're trying out Green? What about red? And again? I can go on and on the whole day to show you that you kinds of you have all kinds of options or now we can also control the opacity
. So even though this is gonna be the color, then here we're looking basically for the tone. We also can change the opacity. And if I'm gonna go completely over here to the zero, I'm gonna have RGB
a value of zero. Now, remember, what was the zero? What? It was totally transparent. So if I'm going to save this right now, check it out. You're not gonna be able to see any of the text, because right now, the capacities level
is all the way down to zero. If you want capacity 0.5 well, let's go somewhere there is 0.5 and then this is going to respect me back some value off. Whatever I'm having again. If I would like to change
it to let's ahead color right away, I can just change it to hex color. So we have all kinds of options here with visual studio code and all of these things combined. Make it the best text better out
there if you're anything like me. It is a great struggle for you to pick nice colors for your next project on. And while there are many great options out there, since all of them essentially do the same
thing that is, offer you a color palette. I'll show you coolers, which I use the most as always, this is subjective. So if you like some other resource, no hard feelings on the way
it works is we're gonna have to visit coolers dot com on. If you're looking at the girl, this is just gonna be basically see and then two O's and then again, L o
R s and they were looking for dot to you. Now, the moment we visit the site, we noticed that we're getting this interface on the home screen. We see this button, start the generator of its free
. So working, just click on it. Have no fear. They're not gonna charge you anything. Then this is gonna load up the generator, and now we're getting the color palette. Now, let's say it starts here with black one, and obviously you can
see this greenish yellowish or whatever. Now we can pick all these colors more. Let's say you would just more so you'll have to press the space bar on now it spits back another set of
colors, and I can go endlessly here with the space bar. And you understand the idea that this is just gonna give us each and every time, and you call her power. Now let's say if I like this green bluish
color, I can just click on it and notice that says, here, lock on again, we contest some more on Let's say this is gonna give me the matching colors. Now, I think this is gonna match with this guy. Okay? I contested
more colors again. With the space bar on, I can go on and on and on now in the bottom. Right now we already know what are the hex colors. So we can just copy and paste this value on but we can head over back
to our text Better on, Let's say for the color I'm gonna pick this guy. I noticed that it doesn't come with the hex value actual hashtag I'm gonna leave the hashtag once I believe the old color Let me copy and pasted
once we're gonna save it right now, my color is gonna be this greenish If we would like to let's say change your background to this guy the party born again. We copy the value we're gonna head over back to
text editor on Let's say here for the background again with a hashtag mood is gonna have the background car now. Normally, what you're gonna do is you're going to get all these colors up here on top of the
CSS. And then we're gonna later on learn how to use this thesis variables and how we're using them. Most likely you're not gonna be jumping back and forth for each and every element and getting the colors
. But the main idea is, if you would like to pick some kind of nice colors that actually go together, you would be looking for some kind of external research on the one that I like to use is the coolers dot
seal beautiful. We know know how to implement colors and CSS What's next on our agenda? How about CSS units? Over the course of next five years, we'll discuss
what our units more is the difference between absolute and relative units as well. Let's take a closer look at pixels E m or E M values as well as Vieux port units
off with hand height in the process. We're also gonna learn New Seasons properties that implement units in their values. Okay, you know, theory. Let's get after it. All right. We
have added colors to our series is still built. What's next? Our next topic is very interesting because it will control the layout off our project. So, my friends, let's get to know units
in CSS and we'll start with something called pixels. Here's the kicker dough. In order to cover units, we're gonna have to use them on some properties. Otherwise, we might as well look at this lights
for the next three hours. So let's quickly learn three properties in the CSS. Fun size with and height. If you would have to guess What do you think these properties control? Well, if I would have
to go out on a limb, I would say found size is responsible for the size of our funds. More text on with and height would control the with on height off the elements
. So far, so good. What about pixels? Well, again, we can spend two hours and 20 slides or we can resolve it in one sentence. Answer where pixel is an absolute unit
of measurement. On speaking very broadly, one pixel represents one dot on the screen. So as you're looking at this screen right now, one pixel is basically gonna be wonder and
again. This is speaking very broadly because I don't want to spend two hours in slide. No, let's test it out. Because this is just gonna be the easiest way to understand now, as you can see, by the way
, I cleaned everything out in CSS and HTML because for this new section, I would like to start fresh. Now again, I'm gonna do very simply where there's going to be heading one on. I'm just gonna say, units
in the CSS in the CSS. So that's gonna be my text on the moment I finished typing. Awesome. We have are heading one. Now I'm gonna head over, back to this town's on. We're gonna
test our first property, which would be phone size, so we know that we can select it in multiple ways. And in my case, I'm just gonna pick the elements, Elector, that I'm gonna write. What kind of fun size I would like something
to say. Font size. This is gonna be my property. And now I'm using the values on. As you can see, there's many options that right now, visual studio code gives us, but what we are interested is the pixels
So here we're gonna say that. Let's say this is going to be 30 pixels, not check this out the moment we're gonna save it. This is, in fact, going to get smaller. Okay, what if we're gonna write 60 pixels now? My phone size
is gonna get way bigger because I added this absolute value. Now, why did I say that pixels are absolute values of measurement? Well, you say 60 pixels right now, what we have here
, he is gonna be 60 pixels here as well as it wouldn't be 60 pixels on the difference creases. So the 60 pixels or pixels in general are not gonna depend on anything
else. Yours is gonna come up with your absolute size, whatever that might be. And then you was gonna go with. Now, later on, As we're looking for responsive values, you'll see how, with responsive values
we will gonna be, depending on other things. But with pixels. This is just gonna be straight up. Give me the value for the pixels on these are gonna be dots on the screen. And let's say for the font size, it's
one thing. No. What about the with? Let's say what if we're gonna say some kind of with on for the setting one again with me. Write it properly. Let's say with is gonna be I don't know, 200 pixels
. Now, let me save it on. Check this out. First of all, we can already see that something changed. So our text basically wrapped to a new life. How are, Maybe visually, it would be easier if we would use the color. So
how we can use the color when we already covered this. Right, So we have the background on, Let's say, let's go with some kind of color again. I'm gonna go with the color name because I find it much more easier. So I'm gonna
gonna be 200 pixels on the bigger screen. So again, it's not gonna depend on any parent elements and the route elements anything like that. This is just gonna be straight up valued that we're giving you want more with
no here ago I have 404 100 pixels. This is not what I wanted. Didn't let me say it properly. Now, this is gonna be 400 pixels again, depending on the screen size. If I'm going to say that this is gonna be let's
say 1000 now, obviously this is gonna be wrapping out, so now wouldn't actually need to scroll because this is literally gonna be 1000 pixels. So on a smaller screen hours that this is not gonna be able to fit in the screen. However
, if we moved to the bigger screen size, everything is working. Fine. This is gonna be our 1000 pixels. Now, let's test it out also, Maybe the height. And you know what? Let's change this 12 decent 400
that is going to stay in the same. So let's save it or, you know, more. Hundreds still to make let's do 200. That's gonna be our value on Let's maybe add some kind of height on for the height, we're gonna be looking
for the height property again on In this case, we're gonna go with 300 pixels and again, all of these are very straightforward. You want bigger size. Just go with bigger size. Now you don't have to always use
pixels. We will going to cover all the relative values. How are the main importance is to understand that the font size is going to control the height of the text. So the bigger obviously the value here
, the bigger is gonna be the text. Smaller value. You get that idea now, the same would work with with Again, we're gonna be working later on with responsive values. But you just need to pass some kind of unit
here. In our case, we're using the absolute values. So everything that's showing on the small screen is gonna look exactly the same on a bigger screen. You want different height, have different night. You want that different
very easy. We're gonna say 50%. So far, so good After that, we would like to look at the height, so I'm gonna say height on again. We can do the same thing high. It is gonna be 15% now, also in order to see what's happening
, maybe at some background color. So let's say there's gonna be a background color on what's gonna go with the right one. Now, once I saved, nothing happens on. I mean, you could jump back to HTML. You can
probably double check. Maybe your classes were not matching. Maybe. I don't know. You didn't have enough coffee today, but it's not working. So either Weaken, yell out some nasty things
towards the screen or we can figure out what is happening with the percentages. You see, the percentages are going to depend on the parent element. Know what is in our case? Parent ailment. We have Deena. Correct
. And then we have the outer. So I would assume that the outer is gonna be the parent on. Then the unit is gonna be the child. Now, let me take this a little bit on. We're gonna have for the outer also some
width and height. So here, I'm going to say 40 hour. Dave, I'm gonna be looking For what? Well, first I would like to have somewhere. Let's say again, we're gonna go back to the pixels and we're going to say that the with is gonna be finally pixels
on. Also, the height is as well going to be 500 pixel. So far, so good on. Let's add maybe also a background color on the background. Is there gonna be a bull? What's Avis and what do we see
? So we have the outer def. That should have the 505 100. And then the inner one is going to be exactly the half, because obviously, we went with 50% as well as the 50%
for the height. So now you can see that this is a relative. This is relative to the parent. So if I'm gonna make this 200 just so we can understand a little bit easier, we should We should see that the
U nerd if should be 100 by 100 now, it is still gonna be displayed in the percentages. How are the moment we're gonna be changing these values? The 200 or 200 Also, the with off the
with Go ahead at different with on this, just as a straightforward hasn't gets absolute values were a piece of cake. Just type the value and CSS is going to spit back in the browser. Whatever
inner one is also gonna change. Now, we can also change it by just changing the percentages. We're not limited to 50% by any means. So if I'm going to say that with is gonna be 100% now, my with is gonna be 100%
value you chose, what about relative values on the first that we were gonna be looking at? It is gonna be the percent of our not Portis I will gonna delete it says So we will going to get rid
off this 200 pixels. You want more? Here you go. we can do 400. Now we have the outer one of 400. And again it follows the same principle. The only thing we need to remember that percentages
of the heading one as well as we're gonna head over back to HTML on here, I'm going to create a new live. I'm gonna have some class going to say that this would be the alternative on within the outer Devlet
will get a depend on a parent element. All right, up next, we have e m values, which again in one sentence would be relative value. How are the key is in the details
at another day with a glass of inner. So again, the naming Israel up to you as long as you obviously remembered by the time you get to CSS. So far, so good. So we have our HTML now. Now I'm gonna head over 611 05:05:58,39 --> 05:03:10,94 to the seriousness on first. I'm going to start styling the inner death now for the owner. Dave, I'm gonna say very simply that I would want with on, I would want, let's say, within percentages. So let's start
. So basically devils in the details where it depends on the parent again. And as always, I think it's just easier to go through with an example. Now, we're gonna head over first to the next HTML
, and we're gonna create something else I want to say There's gonna be a paragraph on for a paragraph. I don't know can be You know what? Let's just write text Absolute on Actually changed my mind. It's not gonna be
Paragraph is gonna be heading three with a text off first, maybe relative as well as we're gonna have the same class. I'm gonna say class on this is also gonna be relative Now what I would like to do with
the second heading one since I'm going to copy and paste it, he is. I'm gonna change this value from the relative on, I'm gonna say this will gonna be up. So so to hitting threes won with relative
and the other one with Absolute. So far, so good. Then we're heading back to style CSS on. We can obviously get rid of these styles because we already don't have the def, so there's no use for them. Whenever I'm gonna be
working right now with the relative and absolute, I would like to select the classes because this is what I have in my annexation. So first, let me try to select it. Someone to say, for relative
value, I'm gonna have something that's not gonna make sense right now. I'm gonna say, let's say fun size the property we already know. So this should make sense. But I'm gonna write to E EMS. Okay, so I'm getting
the text. I mean, doesn't really matter what I have there because I haven't covered yet. What is the, um but now let's look at the absolute. I'm going to say absolute. I'm salute on. This is gonna be fun size
. And I was like, this would be a second heading three on. We're gonna say phone size it is gonna be 32 picks off. Okay, Now, I know it might be hard to see because it's a different text. So maybe if you want
, you can go back and just write in different text the one that would match Absolute. But I can tell you right away they are exactly the same. Now, how do I know that? Well, you see, first of all, is I'm looking here. What do you think is
a parent element for my relative class here? Well, if I'm looking at it, I think this is a body on for the body by default in most cases, the base text for default brother styles which
will, by the way, cover the default brother styles right after this section on the default brother style is 16 pixels, basically the font size for default browsers
. I'm sorry. In the browsers default font size is 16 pixels. No 1 a.m. one e m. Value is equal to, in this case, 16 pixels. However, if we're
gonna change this value, then also the e m is going to change. So for now, both of them are exactly the same because this is 32 pixels absolute value on this two year. He's also 32
pixels because my default browser style is 16 pixel. But what about if we're gonna go to the settings and again you don't have to do this. You can just watch how I'm doing it. But as I click
on this icon over here, I have an option for the setting. Now I'm going to click on the settings and then as you scroll down notice, you have an option for font size. Now again, if you're using different browser, it would be locating different place
. But if you are using Google Chrome, you should be able to find here font size. No, In this case, I have right away medium, which is default style. But what if I would change this? Whatever I would say Oh, here
very large, not can close the settings, notice something interesting. So now my relative is actually way bigger than the absolute because I change this default browser
style font size. Now, this is not anymore 16. This is in fact, bigger. And I can see this because this relative is actually bigger than absolute. Now with me, first of all, change it back. And
once I change it back, let's create another example. Just so you know, for shorted, this is exactly what I'm saying. Now I'm gonna head over again, back to indexation email, and in this case, we're gonna create our own
parent containers forties, heading three. So for the first one, we're gonna create some random live and let make and selected. Probably gonna place it here. We didn't deal on for the second one. Will also gonna do the same thing
. So almost everything the same. However now, both of are heading threes are as a Children for two of the dips. So have parented as well as the second parenting. What about
now? Well, I'm gonna go back to a sickness. I'm going to say for all the lives, the font size, the base font size shouldn't be, Let's say I don't know, 20 pixels. So phone size
that property on, I'm gonna say 20 pixels. No. What do you think is gonna happen? Notice again? This is bigger on. If I would actually want to maybe proved the point a little bit better. I'm gonna say 10 pixels. So right
now the e. M. Is following the fact that the parent as the base size off 10 pixels. So it's one EMR is right now equal to what? Well, this is equal to a 10
pixels. So now this font sizes in fact 20 pixels because all we're doing is basically multiplying this. So if my base on sizes 10 pixels no, I multiplied by two and I'm getting 20
pixels right here, then the absolute one doesn't care about that. The absolute still stays 32. So that's the key. Whenever you're working with the e m values, remember that you will gonna be depending
on the parents container. And if you're changing something in apparent container that's gonna reflect of what's happening with he e m values after he and values, we're gonna look at our ian values
on even though they look exactly the same. They, in fact, performed quite differently. Number four. We actually go over any theory. Let's just do a small test now. For now, we have the relative
which would be in him, which would depend on apparent whore. Let's change this around. Let's say that this value again is gonna be to rum's. So in the morning when we change it notice against something interesting. So
now both of them are again exactly the same. So the first key about RM values is that they will not depend on apparent. So I can change this all day long. I can say that there should have
40 and nothing is gonna change. What does matter is as I'm working with my route off the document now, our case, What is the root of the document? Whenever we're looking at our document, I believe
this is gonna be there in your mouth. So instead, if I'm gonna go and say that 40 html is we would like to change it and let's say instead of 16 pixels, which again comes by default from the browsers
the same way how we looked at the M values we can say, let's say that the font size is gonna be I don't know, not 16 but we're gonna go with I don't know, 32. So it's right
fun size 32 pixels on. Let's see what we're gonna have. And now, obviously, this is gonna be 64 pixels Now, how do we know that? Well, if I'm gonna head over here on. We're gonna change it again
from 30 to 64. We'll see that now. They're exactly the same. So what's happening is it's the same system. So whatever we have here has a fun sized original
for the actual route off the document. This is gonna be either doubled if we're going to Ari EMS, where we for going with 1.5? We'll just need to do the math. When we calculate how much
is 1.5 from the 32. And I believe this is gonna be, like, 48 again, we contest this out and we can say that this is gonna be 48 now both of them should match. So what's happening is that with
r E M values again, we're not depending on a parent. We are depending on the route, which, in a document, is gonna be a steam l. Now what's also gonna happen is not say that I'm
gonna get rid of this html on. I'm gonna keep this first of all again, as I don't know to Rum's. Now, I'm also gonna keep it here. I'm going to say that this value is also gonna be 32
pixels, so I would like to set them side by side on. Both of them should be equal. How are if your user again is gonna head over to the settings on in the settings? He or she is going to change it with a very
large check this out. Now, obviously, this is much more bigger because again, we're doing the same thing. We're changing this default browser style set up for the pixels. I'm sorry for the funds. So
it's nothing more 16 pixels. But in fact, we change it to the bigger farm size. So right away the values with R E. M got bigger. My absolute favorite units in the CSS
have to be you height and be with. And the reason for that is because you can make really cool banners like this. No. How are they gonna? Well, first and foremost, they are going to be again relative
. How are they are gonna be relative to a screen. So whatever you're seeing right now, everything is gonna be related to that. Now, was that means is that even though we're gonna be changed screen size
, they were also gonna change their dimensions depending on that. So how this is gonna work? Well, as always, we're gonna head over to the annexation. Mel, we're going to get rid of some of these suckers. We don't need them. And we're
gonna go first with the diff. The class is gonna be in a long let's call this banner, and then let's copy and paste it. And instead of the Vanora, we're gonna call this header again. It doesn't really matter what your color
classes. It's for testing anyway. Okay, so far, so good. So we have our two dips, and then let me also delete these guys. We don't need them as well. Now, let's start first with Well, let's see what we have
. First thing it was the banner. Okay, so we're selecting the class of banner, and now I would like to use not say, 50. And in my case, I actually need to go with 51. Well, I'm going to say with so 50
with is gonna be in my case, I don't know you with now. The reason for again would have with we would have to use view with four height. We're gonna have to use you heart. So we have
the with What about the height? Let's also say you heights And then let's check it out again. Background is gonna be ready. No, no, that's something interesting. Dont pay attention, please. Again, there's gonna be margins
that we're getting from default browser styles. But what's happening is we're getting 50% of the screen horizontally as well as vertically. Now, if I'm gonna make my screens as bigger, it's not gonna change
again. Depending on the screen size, this is still going to be 50% horizontally and 50% vertically. Don't believe me. That's tested out with another guy. Let's say that there's gonna be header on
the header is gonna be I don't know again, with and weaken, you can use any kind of values. I'm just using the round values because they kind of make a little bit more sense with a coffin basted in this case, I don't
want the with. I want the height, and in my case, the height is gonna be a good 100 view Hearts on. We will going to use this a lot every time we're working with the banners. So every time we're gonna
be making some kind of banners like this. We will gonna use these values more these units. Now, let me add one more thing on. Let's a background is gonna be blue. Now
, this is gonna be harder to see right away, because noticed, we kind of have to scroll. So you might be like, Well, wait a minute. This is not exactly 100%. And this is not gonna be 100 viewers
. Okay, I guess you don't believe me. Well, let's test it out. No, you don't have to write this code right now. We will gonna cover this a little bit later, but I'm basically gonna do like a little recent man. I'm gonna do
this with properties we haven't covered yet. So again, please don't freak out. We were gonna cover them later. So let's say first, I'm gonna save margin zero. And by the way, you don't have to do this. I'm just doing it just so you can see that
is really happening. Then the pattern is gonna be zero on. We're also gonna have box sizing Teoh a border books. So something like this. Now what happens? You can see that this is exactly
right. now 100% horizontally has well, is 100% vertically. And you know what? With me, do one last thing on. Let's flip them over. Let's say that we're gonna be looking first for the header and then
the batter. So as your stuff scrolling, this is gonna be 100%. So the moment loads. This is exactly my height and Witham screen, But the moment that scrolling this is where I'm getting to my
next day on this right now is gonna be 50%. Now if I'm gonna make again my screen size bigger, this guy obviously is gonna work. We have 50% of the screen. So again, they are really, really cool
values or units that we're gonna use them quite a lot every time we're gonna be working with the matter. But also you can use for many other things, and what it allows you to do is not to use some kind of hacks or
anything like that dealing with percentages instead, again, you're just using the screen. You're saying Hey, listen, give me 25% of the screen. Gave me 75%. Give me 10%. It doesn't
matter. You're working with screen. So every time you're gonna be working, depending on different screen size, agent gonna perform exactly the same way. At this point, I have mentioned default browser styles
far too many times without going into too much detail. So why don't we change that and see what default browser styles are all about, as well as getting our feet with with Google def
tools, which is an awesome tool to test examine onto the bug. Our code Now, First things first. I would like to get rid of the content in the staff CSS so it could just
delete these suckers here we can say it. You can also head over to indexation your mouth on Get rid of both of these deaths. Now it's right. Just a simple heading, one that would say default
, browse their styles. Oh, something like this. And once we have our having one with some generic text, now let's decide what we're gonna do. Well, we would like to see where our old
browser starts. We can do this on the side browser window here on this morning, but I'm going to do it on the bigger browser window because I think it's gonna be easier for us to see. And in order to see default Browsers
1000 action, we would need to head over to our death tolls to the Google death. No. Nor to do that, we would need to either use the right click and notice. We would have to come to inspect
more weaken, go the long route where we're right clicking where I'm sorry just clicking on this little icon then We're looking for more tools and within the more tools we have the death tolls and noticed they even
give you the shortcut for that. So again, it doesn't really matter which option to choose as long as you get to this window. Now, I know this might look a little bit scary in the beginning. I trust you
and I really feel you're paying our Please don't be scared of this, especially right now, because we're not gonna be covering all these tabs or anything like that. We're not working with job script, so we don't need a council
. We're not gonna be working with Redox. We don't care about the reader. What we will gonna be working is the elements. And you know what Let me just zoom in a little bit because I think that way we're gonna be able to see everything better
. Okay. So far, so good. So we have our elements now. What do you see here in this pain or screen, or how are you would call it. What do you see here? Has the text or as the content? Well, if we're looking
correctly, we see the doctor, so that already should bring us the bell. Then we also see the heading one, and I'm less than half asleep right now. I think this is our heading one. Now, let me double check
. But I think it is, Yes. So we have the heading one and that actually matches that we have a non document. So basically what we see or hear on the elements that are gonna be in our documents
. So everything that we have in a document, we also see here on this screen. Now I can open this up and notice we have the head element. Well, obviously we have the meta tags as well as we have the link
. So, so far, so good as well as we have the actual body now within the body. This is where we have our heading. One. Okay, So far, so good. So if I'm gonna click here on this heading one, what do you see here
? On the right hand side? Well, we see that there's gonna be syntax, that we already have covered it quite a lot of times. Which is the CSS in next? Yeah, the curly braces. And then we have the styles. But what
about the styles display block that doesn't ring a bell? We didn't write that font size. Well, we know the property, but I don't think we included. Okay. Well, maybe I'm wrong. Let's head over back to style
. Sees this. Make sure that I did have my coffee and we didn't have any of these styles and I'd see the clean style shape. There's nothing here as well as everything you say. So it's not like we added them
and maybe didn't save them or something like that. So what's happening here? More. You see, for every browser in or just display heading one or any kind of HTML, it needs to have some default
browsers that otherwise think about it. So we're gonna write something we were going to need to have some type of CSS to display, right? Otherwise, how we're gonna displayed on the page. So we're gonna write the heading one, and then
what? I was just gonna magically appear. So this is where the default browser styles coming to play. Now, again, we see quite a few of them here on. One thing about them is that as
you were gonna be heading through, let's say you're deaf tools. If ever you're gonna notice this user agent, stash it. So that means that that comes from default browser stuff. Now there's gonna be cases where we're going to override them
, just like we did in a previous video where I used some presets. So I got rid of some margins that come by default now, in most cases, rules going to use them. So that's the thing. If we're using, let's say heading
one. So it's gonna have by default font size to e EMS. Now, unless you override this in your sister's, he was going to use that. You're just gonna assume that Walter heading ones that you're gonna have are
gonna have this kind of font size. So that's all there is to it. So it comes with some default, brothers, NYSE, some of them You might override it. Some of them you want some of them You was going to use it. Like, for example again
, let's say found weight ball. Unless you override this for your heading ones, then they're just gonna be bold. Now, let's just something out. We're gonna head over back to index a shame hole, and we're gonna say that you know what? Not
only there's gonna be heading one with default browser stuff. Let's create a heading to in heading to We're going to say, um Google Google Death. Chrome lets you Let's use
chrome, chrome, deaf tools. Something like this are awesome. Let's write this over here and heading to. But in this case, we're gonna head over to Estelle cirrhosis and actually add some
styles. Now what we're gonna add again, it's gonna be very simply, something we have done already before. Color is gonna be read on. Let's say found size is gonna be I don't know what we can do. Maybe 60 pixels
. Something like this again doesn't really matter what you write, as long as you had some type of style. Again, we're gonna head over back to our death tools, Noticed something interesting. So I have my heading one on. If I
would like to check any element as I'm hovering over the element, then already deaf tools are telling me some stuff about them. So from the body, let's say shows over here the width and
height. So there's gonna be some within heightening pixels as well as we have an option here. If let's say we click on them, then on the rights and it's being displayed. So if I click on them again
, it shows over here. If I click on heading one as well, this is being displayed on the right hand side. Now it's also nifty about Google Left Tools is the fact that I can just select element. So
having this option of just clicking on it on this little arrow, and then as I'm hovering over the document, I can just select wherever out one. Now that's gonna come in handy, especially if you have something really nested. Which was
gonna happen later on as we were working with projects. Please understand that where now we have two elements so That's probably going to be no case in your scenario. Whenever you're working with anything that
has to do with HTML CSS. So again, this is gonna be very nifty later on for you. Whenever you could just point whatever element you would like and notice that Freeman shows me that there's gonna be heading one or
heading to, and I can just click on it. And again, this is gonna show me on the right hand side what I have you I notice something interesting on I can. You know what? I can actually, maybe you make this a little bit bigger. I have the heading to
, but in this case, not only I have the default styles that I'm getting again from the browser. I also have our own self. Um, here we see, obviously the style CSS. No. What? Its
style sees this. Well, the last time I checked, it was actually our how she don't see yourself. So this tells me where I'm getting these tiles from now. What's also really, really nifty is the fact
that we contested in the browser. Now be a weirdo. Whatever we're gonna right here is not going to stay you know, actual CSS meaning the moment we're gonna refresh the page, all the changes are going to go away
. But what we can do in the deft ALS is we contest something up. So let's I I don't like the red color. I thought I did, But in fact, I don't know what we can do. Well, I can head
over here. I can click on it. And you know what? Not read. Monstrous Right, blue. I'm sure enough this is blue. Now again, The moment I'm gonna refresh the bridge, it's gonna go back to the red because this is what we're getting
from the style street. But we can change this in the browser. And that way we contested out. Now again for this kind of scenario. Two elements, quite realistically. You're probably not gonna be checking
anything here. You're gonna write everything in the CSS as your project grows bigger Hill, there's gonna be cases where you just want to hop over to death tools. Quickly check something, whether that makes sense. Or
maybe you're gonna be debugging something. You're gonna be checking for these default browser styles because what's gonna happen is there's gonna be cases, especially with layout. Trust me with layout, you're gonna have
a pain where you're gonna be looking for something you're gonna be like, Hey, listen, I added some margins and padding. And again, these are things we haven't covered yet and we will. But I added, despite ing is that I didn't margin what
is happening. Why, this is not working. And this is where it's really helpful again at the moment. Scary. Gotcha. I understand. No problem. But I would strongly encourage you
to at least try to start using it. In a sense, just don't dismiss it. Don't say okay. It looks scary right now, so I'm not gonna touch it. I don't never want to know about them because they will gonna come
really handy on as faras. The default browser styles come and go. Then there's gonna be styles that we will go over, right? Like I said, there's gonna be styles that we're just gonna use it, and we're gonna be fine
with That's the basic scenario. All right, we will still on a subject off the units in the CSS. Why don't we take a look at the call function which is really gonna help us out
in a lot of cases? No. What's happening in the indexation email? We're gonna set up two elements. One of them is gonna be nab our. So I'm going to say, Dave on board for the class and let's give it a class
of not barn legis. Right? This is number. Well, this obviously is not gonna be really nab, are we? Just gonna set it up as a element. We have the class of number. So far, so good. What else we have? Well, let's
there's gonna be another live with a class of banner on then. You know what? We're not gonna type any kind off texting here because we're gonna be adding the background color anyway. Okay, what do we have in the CSS
? No verse along going head over back, and I'm gonna reset the browser styles, the default ones, because I would like to show you something with view height, and I think this is just gonna make a little bit of sense if I'm gonna
say margin is gonna be zero, So now we're resetting the default style. Okay, What's next? Well, let's say for did not bar seems this is gonna be the class we know how to selected. Then we could maybe
add some, I don't know, background first. Maybe background is gonna be blue on. Gheit would be something like 100 pixels, Let's say on pixels And then we also would like
to have a little bit of color color could be white on Maybe, I don't know, font size on our three area ums. So this is gonna be arm in arm bar. So far, so good. What is happening next? Well
, let's say that for non bar I would like to Ah, I'm sorry for their banner number. We already styled it. But for the manner I would like to add first of all, the background. So let's write Background
is gonna be right, and then we would need to have some kind of height. Well, we already know we can use Min height. What is if the content doesn't support whatever we're having right now? Then at least
the minimal height is gonna be whatever we're typing here. So the difference would be between height. You're just setting the height with the mean height. If the content is going to be enough in the actual element than
it's obviously gonna be bigger. Meaning if we're gonna be placing a bunch of text year within the banner, if it gets bigger than 100 you heard, then Obviously, this is gonna be bigger. How or if the content
doesn't provide that much height. Which is this case, of course, because we haven't provided any kind of content. Then we're just sitting here. What would be the value? So I'm gonna say, here 100 you hurts. No, What's happening
? Well, I can see that there's gonna be in Anbar, but then I need to scroll down for my 100 viewers on That is an issue because let's imagine the situation where I would want my nap bar as
was my banner shared 100% here of the screen because right now I'm having 100% plaza, these 100 pixels correct. Well, this is where the called function comes to rescue and
what's really neat about call function? We can perform math operations. So addition, subtraction, multiplication and division, as well as weak Megan mix and match values. So how this
is gonna look like so instead of using the mean height for 100 view heights what I can right over here. I can say cock. So this is gonna be the function. And then I was gonna perform the math operation, and in this case
, well, first of all, I misspelled it. But we can write whatever values you would like to be calculated so we can mix. Imagine them, I can say, Yeah, my men had should be 100 view heart. However
, I would like to subtract the 100 pixels. So what I'm saying here is yeah, make this 100% but get rid of whatever nab our vote value was old here. So the moment we're going to save
it now we have exactly 100%. This is where most cases we're gonna do in a project where we're gonna be setting up the banner and then we're gonna make sure that the actual welcome pages exactly
100 percent more under view heights on four death. We're gonna use the division to get rid of these. Whatever value would be for number four. Be careful, though, if you're just gonna admit
something. If you're going to say something like this, then the cock is not gonna work. So what's happening right away? It spits you back there more. We can do something like this. And again, this is not gonna work. So you need to make sure that whenever you're
doing the actual calculation, that there's space in between. So the CSS Quincy what is the operator? So that would be the short hat to a CSS called
function. Hey, guys, congrats on making this far. We already know about colors and units in CSS. So in this module will focus home typography and CIA says, basically text on our
page everything, starting from properties that are used for topography, what is found stack and uric phones. And at the end, we'll look how we can add awesome gula funds to our project. So what
do you say? Let's get after it. We will start very basic by looking at a phone, family property and ultimately fund family property describes the front often element
on a side note. We did already cover font size property, which would be responsible for the size of detects. Now, as you can see right now, I already deleted everything that we had in the previous
module because I wanted to start fresh in the indexation email as well, a style CSS. So if you need to do the same, police pause the video and resume whenever you're ready to go. Let's
start simply in the indexation by creating the heading one and in the heading one. Let's say Hey, dude, I am heading or main heading. That's called this main heading
as was We can also create paragraph on for the paragraph. What's I don't know. I have some 50 words in here or something like this. Let's have 50 words and we're going to save our HTML. So far, so
good. We have the heading and we have the partner. If I'm gonna head over to stop seeing sense, you can just select the whole body on. Since we already have covered the inheritance, we know that if we're
not gonna change anything with any of the elements they organ inherited from the parent, which would be the body. So in our case, we're gonna do like this we're gonna safe on family. I'm I don't know. Let's go with hell
. Very car. Something like this. Let's save it and forced we right away. Notice that are fun. Family changed. Okay, Awesome. Now I'm gonna head over to heading one and more specifically, changed my
find family. So what happens is that we can change the family off the fonts for whatever element we would like. And in most cases, this is exactly what you're gonna do. You're going to set up some kind
off funds for probably most of your project, and then there's gonna be specific elements like headings or paragraph. Doesn't really matter in your situation, it really depends on that. But
you're going to change the font family for specific type of element. In my case, I'm just gonna change for my heading. One which may be for Project Could be old heading one. So here, let's say again, from
family on, Let's right. I don't know verdana something like this and savour Donna. And now I can see that even though the paragraph we inherits this from the body, the America, then the
head of one is gonna be more specifically with the evil down off on family on. This is as straightforward as it gets, where you can just pick whatever fun family would like and just add it with on family
property to that specific element, all is well and dandy by what if browser that the user is using does not support the funds we have picked? Well, I guess we're in deep trouble. Not
so fast. You see, for phone, family property, we can have several fund families as a fullback system. So if the browser does not support the first one, it can try getting next one and
so on and so forth. We call that a font stack on what's also interesting. At the end of the font stack, we can pass a generic font family that allows browser to pick similar funds
from generic family. So let's see that in action. As you can see, right now, we have the Helvetica and we have the verdana. But whenever we were writing them, you probably noticed how right away
individuals to your code gave us multiple options. Now, again, let's test it out first, because it's gonna be easier for me to show you. So let's say first, we're gonna get rid of the heading one. So I'm gonna comment this out
. Don't let me just delete this whole American the moment I type Pond's family. What's gonna happen? Well, actually, district gives me suggestions and it doesn't. So what I would need to do is press control in space bar again. That's
gonna be with intimate. Now, what do you see or hear? Well, there's gonna be a bunch of funds on the way there. Written is not just one family. It's in fact, like this. So we're gonna have one fund family
, then you're gonna have another one, and then you'll have the third one. Now, third one is the generic one on this whole thing is called Fahnestock. So we're going to try with our favorite one if the browsing doesn't
have it. Okay, pick this guy, then. If this one is not available, grabbed his generic fund family and pick some kind of funds that will at least match better than just passing
some kind of default ones. And that's the whole idea. Or here. Now the general ones are served on Sarah cursive fantasy on the model space on. Sure enough, Now I can see that everything is pretty much
in this fund family as well as you know what, Let's do the same thing with anyone Now. Let me again. I'm coming. This so we're gonna have heading one on the same thing here is gonna work. Let's say when we're done
. What we're getting is Vidana Geneva home and then we're looking for this generic one that will going to try to supply at least some type of formed from this generic family
that would match this guy that we picked already in the beginning again, that's obviously not gonna be exactly the same, But at least it's not gonna be default Browser fund family Thanks to Google
, funds were not limited. Just picking our funds over here. In fact, we can get them from that, um, awesome resource on we can include them in our project. So how does that would work
now, Before I actually covered, I'd let me just quickly show you that if we're looking for generic font families, we can check them out Individual studio cold. So again, what can create? Maybe in your line of code one straight
on family on notice. Here in the bottom, all the single ones are gonna Kirsty fantasy. Now, don't look at inherit initial onset. We don't care about those, but you'll see
again all the fires that I just mentioned, which would be the generic ones again. That's basically aside now. No, let me delete this one family. And you know what? I will going to get rid of this for now, cause I would like
to show you how we can use the awesome Google forms. So so far, we have no phone. Family property as well is obviously no value. So I'm gonna head over to the browser. I'm gonna maybe open up
a new tab. Then we're gonna write Google once. That's all we have to do then we're looking for Google fonts. This is gonna bring us to the euro. We're gonna bravely click on a link. And while we
have our funds and again, there's many, many funds we can pick over here. There's many options how we can pick. Let's say we can pick on styles the thickness in this land. So let's say let's
try to get a really slanted and think one. So I'm going to click on the slide and I'm gonna increase this land. Now we see that this land is increasing also. Maybe let's include a little bit
thicker on what happens is now it tells me. Listen, buddy, you pick thickness and slam on. Realistically, you can have one of these two. That's fine. So in order to pick a fund, you
can just click over here on this public plus sign on, then in the bottom. We're getting the phone now with the 40 funds, we have two options. How we can include it. We can import it where we can use the link. Now we'll obviously
gonna look at both of them. Just so we have covered that. But just to give you a general idea, then also an option of customizing it so we can add custom options. Well, in this case, there's not many of
them. There's just one regular 400. So why don't we pick a popular fund where we can maybe see more customizable options and also, by the way, tells you the low time What your normal case is gonna be
fast. So far, so good again. We're going back to embed We could just minimize this, and now it Compper search for them. And by the way, you can see that there's gonna be some articles. If you're looking for something as well as we have an option
for, let's say trending. No, I'm gonna get her of this sickness in this land. So this is basically going to stay simple and then probably the most used when the Children see is gonna be Roboto. This is very popular
, but let's say you can see check here for trending popular date added or alphabetical. Let's look for the popular one, and sure enough we have the Roboto. Like I said, then we have open
sense. Then this guy also again, there's quite a few that are very popular, but Roboto You'll probably see a lot on again. We know where you have to pick. It could just click on it. Now
we have to fund families selected on Let's Head Over Again. To the customized is like I said, this is gonna be eruption and then with Roboto, noticed that we have more options. So let's say if we would want bold
700 italic medical right away tells you that now the load time is going to suffer. So keep in mind that I know that everyone likes to be artistic, especially in the beginning, as you start working
with CSS basically learning CSS. But I also understand that this will gonna affect your user experience, so probably don't try to take it too seriously
and go too crazy. Now, in my case, I don't really care. Of course we can just have that just to see how it looks. But in general, just keep that in mind. Now again, we're gonna head over to embedding
on, like already previously. No mentioned. We have two options. Again, we can use the link that would be included in our success. Meaning when I say CSS basically in our HTML
or we can do the actual embedding. I'm sorry importing. Okay, we have billing. Let's say this. It's a link on the way. We would need to include it. We're gonna head over back to indexation
email on let's say, right before our style sickness. We're gonna maybe make a comment first, let's say Google fonts Google Farms on Let's copy and paste this line and again
. Please don't delete something here. Just copy and paste the way this comes from the Google. And then we're gonna head over here and noticed that they tell us Well, if you want the phone family, the one that's
gonna be thickness and slant, then you will need to write this type of cold and then just the normal when roboto would be something like this. So get off me. Select may be the first one here, and we're gonna head
over to style CSS. Maybe before we do that, let's save the station email and then within the style, CSS I would want this for my heading one. So I'm gonna have this fun family
for my hang one and then for main one for the body. I'm just going to use the normal roboto, and I'm gonna copy in first that on. We're gonna save it. No, my heading right now has obviously this
one family and then rest of my body, which, obviously, in my case, is only a paragraph has this type of fund family, which is robotic. Okay, one last thing. Let's check it out. How
we can importance now for importing. We just need to click it over here. And you know what? Let's change it around. Let's head over back to her document and just comment this out. So that way, we know for sure
that our import is actually gonna work somewhere and do it like this. I'm gonna come and this out. We're gonna save it on notice right now, so I'm not definitely having the same funds, right? So again, let me comment
this, And you know, is that Bonds are gonna look like this. But then once I'm gonna come and this out, the funds are gonna change. So now I know that my friends are not included. Okay, let's just get out. Let's say that again
. We would need to copy and paste this line of cold. That's copy and paste it. Let's head over to the styles. Um, right on the top here, maybe even above the comments. Although it's Allison unnecessary. But
let me just put it all the way at the top. And now again, my funds are working because I'm grabbing the exact funds that were using. And this is how you can get number up and running with Google fonts in
your project. Next movie. Let's cover properties that were going to use our text. But since I don't want a crab, them in one video, I'm gonna spread them out either to properties that one video
or maybe three. Let's see. And we're gonna start with funds weight on file style. Now, as a side note, though, I would just want to show you that wherever generic family kicks in. Now, if
we're gonna head over to our import on the phone is gonna comment this out, notice that we're still going to get these generic on families. So some kind of funds from these generic font families if
we have cursive this is the reason why this is gonna look like this. And then for a bottle were getting sensor. So here you can see actually the generic families in the work where we have
commented this out. So obviously the browser cannot find this room bottle. But then it finds something that is at least close to that from the San Serif generic fun family
. So, in a nutshell, that is how the generic on family would work. Now again, maybe. Let's come at this out more. Let me just make this visible with me. Save it on. Now
, I have both of the found families and I'm gonna head over back to heading one, and I'm just going to say, first of all that I would want to have some class some of the same main on You know what? I would like to add
some more things here on maybe change around the paragraph. So first I'm going to say for the paragraph, I'm going to say something, Lauren with 25. So I'm gonna have a little bit less text. However, I would want
to have another handing one. So this is gonna be able It's a subheading on. I'm not gonna add right now. Maybe. Or you know what? I should probably So it's right class off subheading as well. Just
so we contest different things and we're gonna do another one under paragraph. We is lower. I'm off, I guess 25 number Sarit So I have to seven innings are staying because they're heading ones
on both of them have this cara fund. Now, if we're gonna go over to staff CSS, I would like to change this, and I'm going to say that this on family is only going to be for the main one the moment I say
with obviously list from families applied for the first one because the other one has the class of suffering now where the font weight comes in and what does it do? Well, It just makes our
fonts boulder out of how would that work? Let's say for the body we're gonna go with phone family on then. We're looking for these guys. So we have. I'm sorry. Not found family. We're looking
for fun. Wait, and then we have a bunch of numbers here. Also. Options of bold boulder and lighter. No, I can probably already tell you what they're gonna do. Bold
was gonna make it bold. Boulder's gonna make it. Boulder on Lighter is gonna make it lighter. Um, these numbers here, keep in mind that if you haven't important, just because you sit gonna set something
to 900 is gonna default back to that 700 anyway, so be careful about that. Don't think that just in case you cannot 900 then this is gonna be definitely bolder. Now, in order to show you that, why don't
we go over to the paragraphs on those system classes? Is that way? We can be a little bit more specific. So this is gonna be paragraphs number one as well. Israel gonna deal class off paragraph
number two. We're not very general names. Meaning not very original names, but We're just gonna have a little bit of fun. Wait. So let's say for the paragraph, Number one
, we would want I don't know, fund found weight. And I was gonna be like I said, Let's try with 700 here. That's gonna be the first one I notice it is right now. Boulder on. Let's
try with number two to go for 900 just to kind of prove my point. Now again, let me look for the proper family. What? I'm sorry for a problem of property. Some reason funds families stuck in my head and
I cannot get it out. So once we have found a way to 900 what do you think is gonna happen? Do you think this is really bolder than that? I don't think so. I think they're both exactly the same. And now is that the reason for
that is the max We have a surround. So far so good again. We could do the same thing here, weaken Sebold and let's say for this guy we're gonna have Boulder again. Let's try it out on pretty much. They
both look the same. Okay, we have the font weight covered now also maybe look for lighter. We're gonna go with lighter. No, obviously, this is gonna fall back to 400. Then we would also
want to look at font style now for the fun style. Let's go with farm style. And here we have few options. We have again the initial inherit. And then we're looking for italic
normal on a bleak no, we have the italic one. So this is gonna look like this. It's copying page of this style, let's say, or this guy or number two, we're gonna oblique
. So make up in based on, let's change it around to say oblique over here on again. As you can see, very, very similar things on may be the last thing What we would want is check
it out. What what else we have here? So for this, I'm going to do with subheading. You have a class off some heading, and here I'm gonna be looking again for the farm style on for
the phone style. What do we have? Well, I believe we have the italic. Then we have the oblique on. You know what? Let me get my suggestions. And again the suggestions was the control in space on here
. I have the normal one. Now your question probably will where we're gonna try the normal ones. Now there's gonna be cases where you said something for what's a three paragraphs. But one of them you would
want the default setting. So in general, you're not going to use this normal setting because this already comes by default. That's the reason why nothing changed there. But let's say for all the headings
you have set some kind of style Now, what is gonna happen? Well, let's change this around. Let's say that I'm going to get rid of the funds style here as well as here. And let me get rid of this guy. Number two
. I'm gonna do like this. Me save it. So that's gonna work. And also, you know what? Yeah, get rid of the italic ones, but somewhere in the body, let's write like this. Let's say fund
want here, Bond on. We're gonna write style. So for home, my body, I would want to Let's say, have italic. Well, the moment I'm going to save it noticed something interesting. So everything here turns italic
because obviously this is the inheritance in the works. We have the parent and we're just passing down his property. How are, let's say, for this guy, we would want only normal ones, and that's the reason why we would add normal
. And that is something that you're going to see a lot where meaning you're not gonna use and maybe a lot. But you'll see it a lot where if you're gonna have those default properties like, let's say there's gonna be text ah
, left so text would be left. This is gonna be applied on Lee. If you're applying to multiple items, let's say some kind off font style. That would be Talic. But then you're going to use the
default one on some of the elements that you don't want to follow the same pattern. Since I mentioned it in the previous video, why don't we trick it out also right away. Text the line property
as well as text and then a war. With your permission, I would like to get her of these phone styles because this is annoying me a little bit. When I have all these selections, I'm still going to keep here the selectors
and curly braces, but I'm just going to give her the properties as well as the values. I was gonna delete them, and I was gonna have a normal text. Now for text the line, what's gonna happen? Well, we're gonna
be able to control the alignment of the text. Now, we're gonna start very simply by the whole body on just say, for the whole body would like to text align it in the center where weaken dio
left. Or so let's do the center on first, which is always gonna place that it text in the center. Now, I can maybe make my brother with a little bit bigger, but you can see right now the text has
bean placed in the center now. Similarly, if I'm gonna go text online, right, this is gonna place it all the way from the right now here. I would like to again show you where would use the normal one
, which would be the left one. Meaning the default one. Because right now noticed we have detected the line on the left. Or if I'm gonna comment this out, nothing is gonna change because this comes preset with
a browser. No gun, weaken. Just delete this. Maybe this guy here, I'm, like, just again the same thing that for the whole text for whole body, I'm gonna line it to the right. All my
headings. So it's a my main one, or you know what? Not all of that may be the main one. I'm gonna align it in the center. No se text the line center, though this heading the first one main one is gonna
be the center. And let's say for both of the paragraphs more You know what? No, I'm just lazy was just right for the second paragraph. We're gonna place it all the way through the left. So we're gonna write text the line on
this is gonna be on the right hand side. Well, you know what? Not right inside. That's obviously coming from the body here. We're gonna use the default one, which would be killer. Now again, this would be the case where you would use it. So if
you're applying some kind of property either right more center in this case, then if you would want to go for your default one you would use text align left. Now, if you're not doing that There's no need
for using the text line left because this is already preset for you and we have texting them. And maybe let's practice on this paragraph on that would basically invent the first line. It accepts
multiple values. Wheel's gonna use pixels, but we can also look at the Auriemma's Let's say, ah, text invent Was the property name invent on the values? Like I said, I could use whatever
you would like. Ah, we're gonna go first by let's say, 50 pixels. No se like this. Now, this is gonna in dent this first line. But maybe it isn't wearing the fact that everything is aligned right
anyway, so let me comment this out. I'm going to save it now. This is gonna be normal. And then, sure enough, we have texting them to 50 pixels. If you don't believe me, make 100 pixels. And now this
is inventing again on first line? No, Like I said, we can years also hardy and values, so I don't know, 10 Ari ems. That should do the trick. Now then Sten Williams. And that's how we
can work with text the line properties on text indent. You know what I changed my mind just because I would like to be done covering the text properties. We're gonna cover five properties
in this video on, then weaken, move onto the next module. However, I will going to do a little bit of spring cleaning. So first I'm going to get her of the Google fonts. Ah, then as well, we're gonna get her of
rest of the styles, we're gonna delete them on within the indexation. Mel, let's do a little bit of different set up where we again. I just want to delete everything, and we're gonna start from scratch
. So first, I would like to create a link, and then we can create This doesn't dumbing link. So if this link is not gonna going anywhere, we can just have a hashtag and we're good to go on. Let's right over here. Let's say Google
, that's gonna be our link, which is not gonna go anywhere. Then we were gonna have one heading one on. We're gonna say, Hey, I, um I am the A main heading something
like this main heading. Let's say this and see what he will have. This is gonna be our main heading on. Then we can have two paragraphs with Let's each of them. Class of 123 First, let's create a paragraph
. This paragraph is gonna be lure. Um, on the whole 25 actually want multiple lines. So that's kind of my important thing. I think three lines is more enough. I'm just gonna say, here class class
is gonna be number one, and I would like to copy and paste this some of the select all of this and want you. So there's gonna be paragraph with the class of number two. You know what? I can just use the multiple sectors
, lead it here, then head over back to my class Number two, have that glass actually here. Let's say that class is gonna mean you're too. And then for the third guy, this is gonna be the class
off number three again. Not very original, but this is going to do a job now within the style CSS. We're gonna start by simply looking at the line height now the line height
. He's gonna control how the winds have space in between them. So let's just get out on the program. Number one on here. Let's write line, hide property. Since
that is obviously the name that we're looking for on for the line hide, This is gonna be relative again. At the moment, we haven't set it up anything that the parent, which would be the body. But in general, this is gonna be relative
to something. So at the moment, this is gonna be relative of the browser. So I'm gonna say 1.5 e EMS notice. Right now, my line heights are getting bigger. Don't believe me. Let's try 2.5 and you will
see that now I have way bigger Leinart. But again, if we're gonna change this somewhere in the body or the parent element, let's say there's gonna be Div. Then this is going to depend again off how we're controlling
for the parents at the moment. This is working with the browser. Well, let's say if I'm going to say 0.5, then my lines are gonna be very small. And that's how the line height woodwork. Next up, we have the letter spacing
. So let's write for the paragraph. Number two, we're gonna be looking forward. A let their spacing. I won't be the name
And again. Let's go with pixels in this case. But you can use different values on for the letter spacing. We're gonna have a five pixels. And what do you think is gonna happen? I think the name is quite self
explanatory. The one we're going to save it. I'm going to be getting the five pixels in between each each and every letter on the actual element that I have selected. So far, so good. We also have
the word spacing. So let's say for the guy number three, we're gonna have the awards placing property. So let's say where's words placing again? Let's do the same thing. 20 picks. Those
should be more than enough now, in between each and every word, we're getting out 20 pixels again. Extremely self explanatory. The two properties with letter spacing and word spacing as
well as line height is also very self explanatory. Then we have text transform. So why don't we practice on our heading here? I'm going to say we're still heading one on. Then we're gonna be looking for text
transform on in the text for in form. We're gonna have capitalized. We're gonna have lower case and we're gonna be looking for uppercase. So these are the ones that we were gonna use most of the time. So
let's say start with an upper case, the whole text is gonna be uppercase. And sure enough, right now, heading is upper case. I could also do what's a capitalized than the letter of each
word is the first letter is gonna be capitalized just like this. And then if you want to test that out the lower case, honestly, again, we're gonna have to go to the body on Let's say if we're all of them were old
elements I have text in Swarm is gonna be the upper case. And here before heading, I'm gonna change my mind. And I'm going to say I would like to go with the default one, which is lower case. But if you're not gonna have
anything to the parent element, which in our case would be the body, then obviously nothing is gonna happen if you're gonna add lower case, because this comes by default as well as we have text decoration
. Now, the easiest way to show you the text decoration especially the default one for the length, is by looking at the link. Okay, maybe let's make it a little bit bigger just so I can get my point across. So in
order to select the link, I can use the easiest selector that is out there, which is an element selector because you guessed the right link as what? Well, the element is a so I'm just selecting
the link. Um, let's have the property. We already know the farm size. That's a 40 pixels. Now I have a massive, massive link. Now, one of the things that it's kind of annoying about the link
. He is the fact that it has this underlying by default. So what you're gonna do a lot Whenever you're gonna be working with CSS, you're gonna be looking for text decoration on. In this
case, we're not gonna be looking for colors going to say that we would want X decoration on. So you're gonna get rid of this underline unless you really dig down the line on Let's look at different properties
that we have for down the line on Let's say not for the whole body, but we're heading one that's again. Go for text decoration on for text decoration. Let's deal line through. So now I'm gonna
have line heading through are heading one Also, we have the on overline option. Why don't we test it out on this guy on paragraph number two when we have the line? Uh, I'm
sorry. Nothing. Line, text, text, decoration would be, in our case, overline. This would go not underline and not old lace. How we're gonna have over line
on. Sure enough. What happens is you see that we have overlying no, again. It's kind of doesn't make sense. We have multiple Ryan's, right. So you might be thinking, Well, it's kind of like an underline. Yeah, it is
. Underline. Because if you're looking from this perspective on just to kind of give you an idea, we know we can use line height. So why don't we get really creative and I have this line
height. And now for sure, you must agree with me that this is gonna be overlooked on last but not least, we have the underline, which again we can use it. So let's say for this guy we were gonna change
it on the line. So let's write text. Ah, Decoration. Yeah, not text decoration. Yeah, like the correction. It was the underlying. And sure enough, we have It has an underlying
. So this is how we can use all these five properties line I letter spacing, ward spacing, text transform as well as text decoration. Right after topography. We have
an extremely important subject called CSS box Model First will understand how CSS box model works, and then we'll implemented by using patting border on
margin properties. Awesome. Let's get to know CSS box model. All right, people, next topic is extremely important because you will practice a daily. The name of the topic will
be CSS box model. And since it is so important, we will get some visual. And by the way, if you are falling asleep, get up. You don't want to miss it. So CIA
says box model? No. Like I said, we'll gonna be getting some visual help so we will gonna head over to browser and within the browser was gonna type CSS barks
model. And then, instead of looking for the text, we're gonna be looking for the images. I'm gonna pick this image. You can pick any image that you like because pretty much they were gonna explain
the same things that I'm gonna be talking about. Now I'm gonna click on Image on now Let's get over what's happening here. You see, every time you will be working with CSS, each and every element is going to be displayed
as a box. Now, within that box, you're gonna be dealing with three properties batting that's going the distance between the content you have in your element on the edge. We're here
that we're gonna have the border that's gonna go around the element and then we're looking for the margin. That's gonna be the distance between let's say either of the edges of the screen or
some other elements. Now is always the best way is to practice with these properties. We're gonna head over back to our document, but I will gonna be switching back and forth because I think some point
maybe we were gonna need some help here again with an image on actually, looking at this visually might help us a little bit. Now, back to the document. I know it might be annoying to some of you, but I will gonna
believe this. I'm gonna say blah, blah, blah I would like to select everything here. We were going to delay this, so once we delayed it, we're gonna head over being next html on Also, we're gonna do a little
bit of spring cleaning since it takes, like, 30 seconds. I don't think you should be that annoyed by that. No, Within the body. What we're gonna have I don't know. We can start by hitting one. And you know what? Maybe let's make
this a little bit smaller because I think it's gonna be easier for us. And here, let's write some. Hello. Ah, I I would like Teoh learn about. See, It says bucks motto
. Um, let's have maybe some exclamation marks. No, that is gonna be my heading one. Okay, so far, so good. What about the paragraph? I don't know. Let's add Florham 20. So there's gonna
be paragraph with some text off 20 words. So far, so good. We're gonna head over back to the styles. We still have her comment. And now let's start working. We had the famous CSS box
model first. Let's start with heading one, and we're gonna have simply a color or, you know, what's that background car technology is gonna make a little bit more sent on for the background we're gonna do. You're very pretty One
which is gonna be ready. Okay. So far, so good. Then we also have the paragraph on the paragraph is gonna be background on. Let's say blue. So we have two elements now. Like I said, we were
gonna have to start working. We is our box model within the box model. What do we have? I believe we have the padding. That was one of the properties that was available to us. So if I'm gonna
head over back and if I'm gonna say Florida heading one, I'm gonna be looking for the padding and then noticed I have bunch of options here. Well, let's start with the most basic one. You're gonna have Paddington Now, what is going to be in the panic
that we can use? Any kind of values we already covered sees this unit. So we should be very comfortable with Let's say I don't know, 30 pixels. So what do you think is gonna happen right now? As I'm looking
at my text on the edge of my element right now, I'm getting this padding in between. Does that reflect what we see in the picture? So we have batting That's gonna be around the content
within the element and this guy's we just add it to the top. Okay, let's just that out. Would say batting is gonna be able to go on the bottom. It's that banning bottom on. Let's also do 30 pixels
on. We have right now, the padding in between where the text ends and again the edge of our element. Now maybe let's increase it was get really creative on. Let's say this is gonna be 60. So now
getting my patting with 60 I also can do patting left. So it's right Baddie left. And in this case, you know what? Let's do I don't know, 25 pixels Getting
doesn't really matter now. My text is being pushed here from the left inside. I'm getting my padding as well as we obviously have padding, right, Since we're covering pretty much top bottom left
, we can also do right now within the right. I don't know what can do. 50 pixels. So now I'm pushing my padding here from the right answer. So this is how we can write with padding the long way. However
, in the CSS, we're gonna have bunch of shortcuts. And now we can look at it how we can create the shortcuts with the pattern. So for this case, we're going to use the program. So instead of writing nature and every time patting
top, I think about it. I'm betting left, but right, we can write patting, and then we need to start working with the values. Not right away. I can tell you that this is gonna work exactly the same with a margin that
we're gonna look in the next video on. There's also gonna be shortcut for the border. So just as a side note Now, what about it? First, I have an option off using the same batting all around. Now, why do I use
the same work? Well, because if I'm gonna write 50 picks, those noticed what's gonna happen with my back? So I'm gonna be getting the exact same patting all around. So if you know that you want exactly the same planning
, just bounced the number, and then you're gonna be getting the value. So everything is gonna be working fine now. Since I want to test out a few more options for my shortcuts. I would like to first of all
, comment this out just so you can see that this is still valuable. But I would like to see you show you other options. On the other option is using to Algiers the top bottom on left and right
. So how is that gonna work? I'm gonna say batting. Then the first value is gonna be top bottom. And you know what? Let me just first save it notice. Right now. It's basically complaining. It's saying, Well, you have a syntax there. You haven't
added any value, but the padding basically goes back to zero. Ultimately, and in my case, I'm going to say the first value. The top bottom is gonna be three pixels on left and right
. We're gonna have 60 pixels. No, what happens right now. So I have the padding with thump 30 pixels bottoms. Also gonna be 30 pixels on left and right. There's gonna be 60 pixels, so quite predictable
. Okay, So far, so good again. Let's do the same thing. Let's comment this out. We know that this is gonna be valuable option, but We also have an option of checking each and every value. Now, how is that
gonna want? We're gonna write padding, And now I could start looking by. The first value is gonna be the top. The next value is going to be right inside. The third value is gonna be the bottom, and then the fourth value
would be the left hand side right over here. Let's test it out. Let's say 20 pixels on the time. Then let's say 40 pixels on the right hand side, 60 pixels on
the bottom. And then let's do I don't know, 80 picks those or you know what, 10 picks those on the left hand side. Now, what do we have here? I have 20 pixels predictably on a jump. Then I have 40
here, then 60 or here on the time is gonna be all the way and left inside. Please keep in mind. All of them are valid. Our you would need to pick whatever value you would like to use
for the property. Whether you're going to write that, there's gonna be patting all around whether there's gonna be patting left and right on top and bottom more you're gonna be single handedly working with each
and every dimension top, right? Left on the bottom on again just to cover the basics. The padding is gonna be different in between or spacing in between the
contents. You have an element on the edge of element and we can have more options. That would be top right bottom on the left. Next one up, we're gonna have the margin
on again. We were just going to check it out first in the image and we see that pattern was the distance in between the edge of the element and the content and that the margin would be the distance in
between. Let's say the screen or other elements on weaken. Just test it out first. No, you know what? I can just get rid of all these values on was gonna keep it simply by padding
on, Let's say, 20 pixels. There's gonna be 20 pixels all around on also what? Do the same thing over here. I will gonna comment this out just so we know that this obviously works. But
I'm gonna uncommon right now. First patting on, let's do exactly the same thing where it was 20 pixels. Awesome. Everything is working really nice with the fatty. Well, what about the margins? Well, we have
the same options. Weaken right margin, and then we're again. We're looking forward. Marching bottom, marching left margin top. Maybe not. Let's test it out. All of the options. Let's just say first with
margin, right? What do you think is gonna happen right now? So I have some kind of margin, and this is some case already where? Even though we didn't at any margins, the default browser stars are adding
these margins. This is the reason why you see these distances in between. And this is gonna be a lot of times, especially in the beginning. Once you start out the annoying factor where you're like Well, wait a minute
. I'm doing all this with the layout and why this is not working. Why? I'm keep getting this margin. Well, that's the case, because it starts off by default, so you need to be very careful with that. But
where's margin, right? What I would like to write. Let's try 50 pixels. What do I have right now? So I have more than my margin on the right here. is gonna be 50 pixels and again I can go all
around like we did with the padding. But I think it would be a waste of our time since we know that they would have worked exactly the same like we had with the panics. What I do want to show you is that how
we can get rid of this default one. And I already said the priesthood previously my videos where I just select all the elements and we added the property. And I'm not going to do this in this video
because eventually we're gonna come back to it anyway. But I do want to show you that if I'm gonna head over to margin on in this case, I would like to have a margin bottom. Now, the reason why I would want to set margin
bottom is because I would want to show you how we can stack one on top of each other because at the moment you noticed they do have the margin between. But we didn't work on that margin. It's obviously nowhere
in our services. So how do we do that? Well, the same margin Bottom on. Instead, off the value of 20 pixels, 50 pixels, 120 picks holes. I'm going to go with simple zero. What happens
? Well, I'm getting my margin smaller. I do still have the margin, because the key here is paragraph still has the margin on top. Okay, let's get rid of it. That same margin and
we're looking for a margin and margin Top. Surprised? Surprised? We're gonna go with zero. No. What do you see right now? Did we eventually get rid of the default margin that we're getting? I think we did so
again the short way you would do it. Something like this, you would say the Asterix. And then you would say Margin zero again. Well, we will gonna be adding more properties later on, but you'll
do something like this where you would just say whatever I'm getting. I want to get rid of all the default margins and just let me work from the scratch. Well, this is again something you would normally do. And this is something we
will in fact, do that all the project with me again. You know what? Let me in. Common this or common this out. Just so you know that this is an option. But let's keep working with these values. So now I have margin bottom zero
as well. Is this guy now? You know what? We can also maybe get rid of this on. Let's look it again. Whether we have the same options for shortcuts, because we know already margin, top margin left
and all those properties are going to be available to us. How often will use it? I have no idea. In most cases, I think you're going to go with either this one where there's gonna be marching around or
the top bottom and left and right. So why don't we practice on these ones? So let's say for here I'm gonna say margin while around is gonna be I don't know, 30 pixels, something
like this. So that would be the margin. And I'm also gonna be working with paragraph. So for the paragraph, let's try margin. Top bottom is going to be 50 pixels on and I don't know, 20
pixels left and right, that would look something like this. And once we have a margin, top bottom. Why don't we also try all four options where we have marginal around
on four days. We're gonna say margin again. Let's look for some kind of values. 106 pixels just so we can see. Ah, I don't know. 20 pixels again. Left and right. I mean
, sorry. Right? Not left and right. Ah, the bottom. Obviously, we're not gonna be able to see there's nothing here right now, But let's just that again. Something like 20 pixels on last But not least, we're gonna be looking
at the right one where we can get against have been, like, 50 pixels. Let's say this on. What do I have? I have 106. So I have 20 on I have all around. So this is how the
margin would work in the CSS box model. Last but not least, we have the border on again. If we're checking our image, we noticed that the border is going to be around
the ridge. So we're gonna be able to control how the bore off our element looks like we're gonna head over back to RCs this. And let's start with heading one now for daring one again. We just need to type
the border, and then we're gonna have multiple options to choose from what we're looking for first is gonna be border style. So what kind of style of the border is gonna be? I'm not gonna cover
all these options. It doesn't make sense. In most cases, you were gonna go probably with something like South, But we're going to look at I believe, dashed or doubted just to give you kind of a taste off a different
border. So first, we're gonna go with style and what kind of style of the border this is gonna be then the moment we're gonna save it. Noticed that I'm getting right now on my solid border all around my own. Well, awesome
. Everything is working fine. And then we're gonna be looking for the border on the property here is gonna be with. So what would be the width of that board again? We can use rum's. We can use
the pixels on. I'm just gonna go with pixels and let's say I don't know, 10 pixels should cover. I have a black, beautiful border around my
heading one and probably last one. But I would like to show you Is the fact off Not only style, not only with, but we can change the color. I'm just a border caller on. Then
what we're looking for again we can use RGB can use RGB A could use hex colors. We can use the net color names, whatever. Whatever you would like. Whatever your
heart desires. In my case, I'm going to go with I don't know, something like pink just so we could see better. What's happening on? I don't think that is the best case because it's kind of bright with me. Do the
yellow one, which obviously also doesn't really work. I mean something. Okay, the green one is gonna work fine enough. One of those is gonna have this all around. Awesome when we have next. Well, next
, we would like to cover what happens if I don't want to type this just like this. Where each and every time I have the property that I like to look for the value. So if we know already with padding and margin
, we have the shortcuts. What do you think that I'm trying to show you right now? I think you would probably guessing that there's some kind of a shorter version. How we can write it on. Sure enough, there is the way we're going to write this
, we're gonna say border, and then the actual syntax here matters so the water will gonna matter. So first, we're gonna be looking for the width of the border. So let's say in my case, we're gonna
go with I don't know, 10 pixels. But you know what? Let's change it. Otherwise, you're gonna think that all the borders have to be 10 pixels. So first is gonna be the with. Then we're gonna be looking for what kind of border and this is gonna be. So
in our case, this is gonna be solid on now. We're looking for the color. No one would be a car. I don't know. Let's try maybe yellow one here. What's a yellow? Excellent. We have our border
on. We didn't have to use all the property. Now there's also the option off. Let's say you don't want borough around. You're like looking at it in your listening. Well, I have this specific element where I don't
want the border all around. How it could do this, why he's just showing me all the options off all around the board. I mean, no fear weaken. Do that also to come and this out just so
you can have for the reference or three of them. In the moment I save it. Obviously there's no border, but we have the other options. And again, I'm not going to show you for each and every side
. But we can maybe tested out with, you know, let's say bottom. That's right, border Now what we're looking for, we're looking for border and then the side. We would like to stop. Let's say we're looking for border
bottom style like I promised before we will gonna look at different options. So let's go with dashed. Let's see how that is gonna work out. Then we also have a thing for with
So it's red border and you probably get the gist authority bottom. Then the with is gonna be, I don't know, five pixels. Hopefully, we're gonna be able to see and border bottom
with or bottom color. Let's dry. Hashtag, let's say hashtag um, I don't know to to to and see how this is gonna work out on yet. I have my nice dashboard
. Now that is the CSS box model. Again, this is going to be very important because you were going to use it a lot. Whether this is for lay out whether this is just gonna be for styling. So if you're
maybe not comfortable with some of these properties here, maybe again, we win the videos, practice a little bit more because you will going to use this a lot before I let you go where we're still
on the subject on CSS box model. I would like to cover one more property as well as one more value. Now, the property name is gonna be bored. Radius on the value is gonna be negative
. Margin. So how this is gonna work? Well, first and foremost, let me just make some changes here because otherwise this is not gonna look as well as I would like to. So let's say, by this time I hope that you already know
all these values and properties, meaning at least the basics of them. So we're gonna start deleting them, just so I have a little bit more room. And again, if you need to go back, just go back to the previous video and you can obviously
get source code. No, What? I have here. I have the border, but I have dashed on. It's only for the bottom. So that's not something I'm interested. So yeah, I'm going to say that I'm going to get rid of all these three and we're gonna
work with border. Let's say five pixels. So then I'm gonna go with something that we can see clear. So I'm gonna go black. So that's gonna be my border as it wasn't gonna get rid of this
margin. So is gonna leave the default margin for whatever heading one. Now, I'm also going to make some changes for the paragraph, and here we're also gonna do something similar. We're going to get
her of order margins as well as we're gonna change the color. So here, let's say the color is gonna be green. Maybe this guys, we're going to see it a little bit better now. What about Border Radius? What does it
do? Well, with border radius property, we can work on the edges off the border on. I think it's gonna be easier again to show you. So we have border than we have radius. And now again, we can
insert whatever values you would like I know in my case, let's start with 20 pixels. So check this out. The moment we do that we have right now the border about the edges around. That's the whole point
of this border radius. Now, if you want to be really creative, we can obviously change the values here. We can have more and more values. No, the options. Always. We can also go and make it totally around
. So it's a In my case, we can use border radius on Let's set this still 50% because we can also use the percentages. Second, there's something like this and check this out. Now my paragraph
is actually around like this. If I'm going with 50% now, you can obviously go 80 if you want, and you can go even more. But probably in most cases, you're gonna be dealing yours is gonna go
it 50%. Now, we also have an option for negative margin. So how that is gonna work? Well, for now, we're looking at it. Then we see that this would be the default margin that we're getting
from the default browser starts. So there's some margin here in the bottom and then there's so so someone atop for the paper. What about it would change a little bit. What if we're gonna say here border or I'm sorry? Margin
on border on for the margin. Top for the paragraph. We're gonna set margin, but this is not gonna be a positive value. Instead, I'm gonna go with, like, negative 106 pixels. So what's gonna happen
here now, the moment we save it noticed that when our paragraph is sitting actually on the top off our previous element, which was heading one on in most cases, whenever you want to deal
with some kind of layout, this might be one of the options. Now, I'm not saying this is gonna be the only option you're gonna be using, but it's good to be aware of it because it might come in handy when were still on the subject
off border radius on border margin padding and everything that has to do with a CSS box model. Why don't we take a look at some very, very
nifty property called outline on? You know what? 42nd. We're going to use some visual aid. So again, we're gonna right over here. CSS outline property, something like
this. And then we're gonna be looking for the images now, with in images which is going to show you again, there's plenty of them. You can choose whatever you like. But what's happening is that we have the content, so we really have it
where we have the padding. Then we have the border and then pass the border. We, in fact, have the outline, and then we're dealing with a margin. Now let me see. Maybe there's a better a little bit actual image with me
checking in for the images on Let me scroll. Here's the border content. Ah, let me see where there's one with a margin. Maybe. Ah, yeah. I don't think this is gonna be here, but anywhere
. Just understand that there's still gonna be margin right here, because remember, margin was kind of behind the border. So what? In fact we're having here is the content. Then we have the border. Then we have
the outline on. Eventually we have obviously our margin. Your question probably wouldn't be. Why? Why does it make sense? So we're having right now the border on why we care about
so much about the outline. Well, we don't care it like excessively, but we can do some pretty nifty things with an outline that we cannot do with the border on as always. You guessed
it. In order to show you that we're gonna head over back to indexation amount on here, we're gonna say something like along the lines like this. There's gonna be a div. The Dave is gonna have class. So the class is gonna be buttons
, Let's say And you know what? Let me spell it correctly, as was within this day. If we're gonna have to links now, each of the links is gonna have hashtag so the link is not gonna go anywhere. How are
the first one is gonna have the class off. Let's say one or, you know what? Justice Switching around. Let's use the deaf and say this is gonna be in debt. Arms? Very what? Dave, I d Let's use the i d
. And I don't know why I'm using the hashtag because this is something I'm gonna have to using a CSS. So sorry. I guess that's what happens if I'm using classes 20 times Anyway, I want I d
. Now the first one idea is gonna be one, and I'm gonna say is no outline. So that would be written in the link and I'm gonna copy and paste it. Now for the second one, I'm going to say that this body is gonna be number
two on here. This guy, he's gonna have the outline. Awesome. We have everything set up in the HTML now, What's next? Well, let's start in the buttons. Seriousness, Let's say for the buttons. First of
all, I would want some margin and margins gonna be three r e m zone. OK, it's a very, very nice start. Then I would like to like both with links and we're gonna add a bunch of styles just
for both of dealings. And then we specifically work with one of them with the border and then the other one, you guessed it moving to use the outline. So we're going to say something like this woman to say, First of all, background
is gonna be some X value. Ah, 689 Let's say again, hashtag 689 on that, I'm looking for F three f Oh, it's
gonna be a green card as well as we're gonna be looking for some text decoration. I'm gonna say text decoration is gonna be none. Ah, padding What's has impacting a little bit. Let's say 1.2 or three m's
on 1.5 r e m says Well, so this is gonna be my paddock. Awesome. Then we're having the color on the color weaken Dio, I don't know connects how you 2 to 2 so blackish
color on. You know what? We can also do text transform on per case text transform upper case This is gonna be transformed Never Gates. And you know what? We haven't
covered yet display properties, So let me make the smaller later on. We're gonna see why this is happening, But don't worry about it too much right now. What we're looking for is the outline property. What else is happening? Well
, now we would want I don't know, a cursor pointer. Now, this is gonna make sure that as we're hovering that there's gonna be a little pointer. No, Once we save it, check it out. What happens as I'm hovering
over the links that I'm gonna having this cursor point, Ma? Ok, what else? Now this is the time we're gonna meet the border again. What? We have already met the border, but I guess we're going to get to know
Border one more time. We're gonna right the shortcut on you're gonna say border on for the border. I don't know, 0.2 Ari EMS. That would be the actual with of the border. Then we're looking
for solid on, then to To To Okay, finally, we can start working on our outline and outline is gonna have to be a lot similar. The way
the borders. Meaning if I'm gonna go to the second one I can write like this. You can say number two. He is gonna first gonna have some kind of outline with. Now, let's do again. The same thing. 0.2
Mari ems. Then we're gonna have the outline, and we're gonna be looking for style. So in this case again, we're gonna go with colleges because we want to match exactly the same. Like we had here. Just so you can see that there's
a lot of similarities on the last. But at least we're gonna have hold line color. No. Once we have these three things hashtag 2 to 2. You'll see that everything looks exactly the same
. Now, your question probably would be Well, what is the difference than why you're showing this? Well, what's nifty about the outline is the fact that you know what? Before we do that quickly, add
some margin. So margin is gonna be for both links. Zero top bottom on. Then we're gonna be looking for, like, 20 pixels, something like this. Just because they're not actually sitting side by side
. And again, I'm struggling because we haven't covered display properties. That But the moment we add outline, you might be tempted thinking, OK, so that looks exactly the same. Why? What, you're going
over this while you're covering the outline? My first of all, I would like to tell. Yes, there's gonna be a lot of similarities because I can do the shortcut. Remember how we have the porter border so here
can ride the same thing I could say outline than whatever styles I had 0.2 Ari ems solid, Meriem solid. And then I have hashed active too. What's really
, really nifty? No, around this property is the fact that we can use the property off offset How is that gonna work? Well, let's see. So if I'm gonna right here, Outline, offset
. I'm gonna be able to move this outline, whether more out from the actual button, anarchist, or we can move it. Morning. So let's say if I'm going to say that the outline
is gonna be 10 pixels, notice what's gonna happen. So now we have nice effect. Where are border has been actually moved away from currently? The element of working on what's also really
cool. We can move in the opposite direction if I'm gonna company paste it. And honestly, right now, because of the order, I'm going to override this. And if I'm gonna say negative 10 pixels, what happens is right now my outline
is gonna be within the element. So those are the cool things that we can do without line on. That is the reason why we would want to know about the border as well as about the outline. Brilliant
. We know. Know what is CSX box model Next? How about we take a closer look at another ceases doozy display property? What it is out of works on
why we care about it so much? Since I don't hear any other suggestions. I guess it's settled this plate robbery. It is incredible. We finished another major milestone in
CSS because now we know what is the SS box mile? Well, next property is very, very interesting because it might confuse your lot in the beginning on that is gonna be
the property of display. I was always Let's start with this example on here. I'm going to get rid off beginning one, as was the paragraph. So the styles that we have in the CSS on also
in the indexation email, we're gonna clean it up a little bit on a different elements. So we're gonna get her of the heading ones and paragraphs, and we're gonna start very simply by having a div. So I'm gonna say there's gonna be
a live now here in the David. I'm gonna write that I am block element. No, just some kind of random texts. Well, random at the moment that you'll see why we're doing that, Then within the devil
, it's on a class. Let's say class is gonna be a block again. It doesn't really matter. You can cordon, call this class orange. It's not gonna change anything. The most important thing is what we're gonna do in
the CSS. So let's say there's gonna be another heading on. The heading is also gonna have the class and the class again is gonna be the same thing, Block. And also, we're gonna do the same thing with the text. So text is gonna be in
block element. And sure enough, now I have two of them now, last. But at least we're gonna have paragraph on. Don't worry, we're not gonna have any more block elements. But for now, let's add a paragraph again
. We're gonna do the same thing and block element something like this. And then let's add the same class. So let me copy and paste the class. This is gonna be right here with a paragraph
, and I have three elements. So far, so good. Then I would like to head over online somewhere. So I'm going to say I would like to open up the new window and I'm gonna be going toe pixels on those of you who are following the
HTML partner that within the pixels website weaken get nice images. So I'm just gonna search for some nice image. Let's say here we're gonna call this movie. And again you can look for kitten. Doesn't
really matter as long as you get the image. I'm gonna go with this image and I'm going to say save image. Now I'm gonna look for my season's folder and then within the CSS folder. Let's just call. This photo is again. It doesn't really
matter. I just needed for example. Now I have my photo. So far, so good, so harshly. Here, photo J pic. And now let's create three more elements. So there's gonna be the first one span on for this guy we're gonna
say class in line on. The only thing I would suggest is if you're adding different class names, try to imagine them because then you're gonna see the actually better. What's happening? Please don't name this
orange than this one apple, and then it's gonna be hard for you to see what we're doing. So I'm going to say I am in line. Government. That's gonna be my span on here. And maybe we can just copy
and paste this on. Change this around a little bit. You know what actually did one too many so I would like to have here image. There's gonna be my element and for the source and all that I can look in this
folder on in this folder. I have photo and we're looking for J Ping. Know what else I have? I would also add, Like to add some with And let's say with is gonna be 50 pixels. So far, so good. I have
to expounds on that. I'm also looking here for the last nine, which is gonna be linked. You know what actually didn't need to copy and paste it on. That was a useless part of my actions
on Let's do a Trip attributes. Let's just say that Link is not gonna go anywhere is going to stay on this page on the glass is also going to be in line. So far, so good. Let's call this also, I am
in line element. I know this was kind of a little bit annoying and long example html. But hopefully you're gonna forgive me, and we will be able to work in a CSS
and see why we're doing all this. Now. Let's head over to CSS and let's add some basic styles of them. So for the block one's world of them who are block, it was just right. I don't know. I'm background
is gonna be, Let's say, blue very, very original. And then color, that's a is gonna be white. Now, for the in line ones, I would like to have something else I'm
going to say in line element and here I'm gonna have the background of red on. The color is gonna be white, so I think this is gonna look sharp enough. Now, as I'm looking on, the rights inside
, What are you noticing? So have three elements here in the top, and I could have added way more that I just needed to prove my point on What you're seeing is that they are looking at least differently
than the ones in the bottom, because what's happening is the four region one of them. Even though we have more space, we are starting a new line as well as each and every element is spanning
from one side of the screen all the way to another side of the screen. Even though again we can change the screen size, it's still gonna do the same thing No. The bottom ones are behaving a little bit differently
, so they are not starting in your line as well as the only take up as much space as necessary. And what's happening is that in the CSS or in the HTML
, what's happening is that there's elements that by default we're gonna have display property. In fact, all elements have by default, some kind of display property. Now, property is gonna be the same
, but the value might be different. Where, for some elements, the property is gonna be block by default right away and for some of them is gonna be in life. And what's happening with the block is that with block
level elements or block elements, they will always gonna start in your line. And they were gonna take up the full with now 40 in line ones, they will not going to start in your line and only gonna take
as much space as content is necessary. Now, that is important, because you will gonna use this a lot whenever you are styling it. Whatever you're dealing with, some kind of layouts, whatever you're dealing
with, I don't know how it looks. It will gonna play a big role later on, especially the more and more work you're going to do with CSS now. It's really nifty is that we can control
this property. So we're not just looking at it and saying, OK, there's nothing I can do. I just have the spine and this is an in line element because what we can do is we can go over here and yes, I display. So that would be
the name of the property. And let's change it. Let's say that this is not gonna be in line anymore. And by the way, notice if I'm going to write in line, nothing is gonna change because by default on the in line elements already
have this set on display in line. But we can do this. Play block on Now, check this one out. I'm gonna say this plan block on the one when I say that all of them starting you line and all of them spend
from one side to another one. Now we can do the same thing. You're the block. Once again, I would first need to show you that if I'm gonna go here and if I'm gonna say this play and we're gonna call this block. Nothing is gonna change
because again, by default there, block level elements or block elements. However, weaken due in line and now notice what's happening here in line on. Now we have them here as in line
elements. So now they're again taking on Lee as much space as they're counting on there, not starting a new line. And that's something that I mentioned in the very very beginning when I talked about Devon Span
and I said, I'm gonna talk about this later, but this is when we're covering the fact that all the elements are gonna have either in line or block set for display property on
this will gonna matter as we're actually start working with them and start styling them in CSS. Right? We know what is the display property. However, probably your next question is well
, where we can use that knowledge that we know that some elements are going to be blocked on. Some of them are gonna be in life now just to look at a very basic example. Let's look at a horizontal
center now. I can tell you right away at the moment you're gonna learn everything about flex box on the grid. Those are probably gonna be your go to things for centering, whether
horizontally or vertically. However, we can look at some basic examples where we can just do it with good old regular CSS. So let's start first by getting rid of this display in
line. So let's keep them the way they are, the way they have been created right away by default. So I'm gonna get her of business play block on now. I'm just gonna say so how we can horizontally
center, whatever we're dealing with her, it's blocked element more in line home. Well, first of all, let's work with the parent. So what is the parent? The parent would be body. I'm gonna head over back to the body arm. Sorry
, CSS. And I'm going to select the whole body. No, the moment I'm gonna write text the line because we know that was the property to actually center to text notice what's gonna happen. So the moment I save it for the block
elements on Lee, the text is gonna be centered, but they're still not gonna be centered because they're spanning from one side all the way to another site. However, once I make the screen bigger, notice the
in line elements weaken horizontally center by just using this text. One property, however, for the ones that are by default block only the text is gonna be in center. So your next question
probably will be well. But how can we center the block level moments or block helmets? Well, let's figure it out. So you know what? Let me make this decent size not too big
, not too small. And then let's look in them. So I have block level elements. Why don't I add some with here? So I'm going to say form all my block elements. I'm gonna have a wist off. I don't know. Ah
, 150 pixels. Let's see what's gonna happen. So I have my block moments, all of them with we have 150 pixels on the way we can center them horizontally is by using
the margin property that we already covered in the CSX model on the way. We're gonna right. This is gonna be margin. Then remember, we had on option off having a top bottom
margin on left and right margin now for the top bottom. We can write whatever we would like, but in my case, I'm just gonna write zero. But again, please. Remember, you can write 50 pixels or 506 pixels. It
doesn't really matter in this situation. What's more interesting is that we can write with left and right auto. Now, what's auto gonna do is it's literally right away going to place it in the
center. So right now, if I have margin zero, this is the reason why they're stacked one on top of each other. But what's neat is that they are in fact in the center, because now I have some with
, and I added the margins. Now, if you don't believe me, let me at I don't know, 20 pixels. And now this is gonna be top. I'm sorry. Yeah, top and bottom. Now, if you're a little bit confused about his auto
, we could have reroll this a little bit differently. We could have said it like this. Let's just get rid of the margins and let just right for all of them were gonna have margin. Then we're looking for left. And then again, we use the
auto so in this case, this is gonna push it all the way to the right hand side because the left margin is gonna be left Perrotto. And then if I'm gonna copy and paste it, and if we're going to say let's say margin right
is gonna be auto now, this is gonna be in center, so it does exactly the same thing without top and bottom margin, but just works with a horizontal margins Now, obviously, if you don't
believe me, I can just come in this out and now this is gonna be all the way and left inside because margin right is gonna be auto right over here. But that would be the default set up anyway. So if I'm gonna come and this out, it's
gonna look exactly the same way. But if you would want a place in the center, the in line element, we can use text the line center on for the block level elements we would want to use
again with me, right? This same margin on again this case maybe 20 pixels on left and right is gonna be on and you'll see this a lot where were using its in order to center
it. Ah, but again, let me repeat that the moment you're gonna learn the CSS flex box as well, a CIA says great. You most likely were going to use them for centering because once you learn
them, they offer you more options on there a little bit more straightforward. We also need to cover the fact that browser does respect top bottom margin and patting for
block elements, but does not respected foreign line elements. And in order to hit this home will make a simple mobile number in the process. We're also gonna cover list style type property
on descendant selectors in CSS. Let's start with an easy one, the block level elements or the block elements. So for this, I'm just gonna get it of everything that we have right now in the CSS
. We're gonna head over to indexation email later on. We're gonna change. It will even add obviously some different elements here. But for now, I just want to show that if I have, let's say Dave, And if I'm gonna go
here and CSS we already covered this, that if I'm gonna have the background, let's say background blue, call her white on if I'm gonna have let's do the easy one. Patting all
around is gonna be 20 pixels on margin. All Rome is also gonna be 20 pixels. Now, what's gonna happen? Well, margin is gonna be respected as well as the padding is going to be respected. No
, it's gonna make a little bit more sense once we're gonna work with the online ones because you will see what happens with these elements and why they differ now. In this case, maybe we can get her over Dave again. We're
gonna save the sea Assess. We were gonna delete it in html on Let's create our number, number, number. We're going to use the on our list. Then we know that within the honor list, we have
a list element and within the list element. Let's place a link now for the link we're gonna place hashtag since this link is not gonna go anywhere. And then I was gonna write home. So this is gonna be our first week. No
, with me. Maybe make three more animals going to change the values here. So, first and foremost, I'm going to select few of them. I'm gonna delete them all of them at the same time. Then we're gonna add I don't know. This is gonna be about
us, Page, and we're also gonna have the link to I don't know, products page on. Last but not least, we have the link to contact us Page. So four pages so far, so good
. Once the HTML has been set up, we're gonna head over back to style CSS. And we're gonna do our styling. Now. First, we need to understand that for now, we're having these margins here that are
coming by default from the browser. So I would like to get rid of them. And remember, we have an option off changing or selecting story all the elements on then. Now, we already have covered these two
properties where I'm just gonna add the margin so margin right away by default at the moment is gonna be zero for all of them has balls. We're going to get rid of the padding, and then there's gonna be property
that we're gonna cover in a few videos, which is gonna be box sizing, and we're gonna write box sizing on in this case, we're gonna write border bucks again. I'm not gonna cover this right now. We're gonna cover it in
a separate video because it's gonna make a little bit more sense. So far, so good. So we have. Right now, the margin is zero the batting zero as well as the box sizing. So now we're having actually a far
different view right now. So we got from the got away from all the default styles. Okay, what's next one? Let's maybe add some fun family. We know that we can added for whole body and was going
to phone. Family is gonna be Let's go with Madonna on. We already know that this is gonna give us the font stack on. The last one is gonna be like Sand Saref on. Obviously we see
right away that the funds have bean successfully changed. Now, since I want to show you the property off list style type, let me just come and this out for no. Now, you don't have to do this on your end
. I'm just going to do it over here just so you can see what this property is doing, because otherwise it's gonna be like, Well, are you shorted? He's doing it correctly because nothing is changing. Also in the CSS
, we can select the Children. Now, in our case, what's happening? So we have on order list. Correct. Then we have a list item. Who is the child off the on our list and there's actually four Children. And then each
and every list item has the child off the link. So how we can select them? Well, we have an option here, off going on order list. So we're selecting on our list. And then we're saying all the list items
that our Children off owner list. We would like to select them. No, For them, we would like to select the property of list style, least style, because this is obviously a list and then we have list style
type. Now we have many options here again. We have Romanian circle. Whatever disk. Maybe you can check it out. This coward works and yeah, it doesn't really change anything. Let me see another one
square. Maybe square is gonna be different Now you can see that there's gonna be square. Let me try one more last one because I don't want to spend the whole day on them Ah, we have up a Roman
. We have Alfa. Let's try this guy. Maybe awful, Roman. So now I have Roman numerals, but mostly what you're always going to do with list. You're gonna write something like this. You're gonna say I don't want these
dots. I just want them clear because you'll use these lists for your navigation. So in this case, you were gonna be setting this up and you're gonna say, List out, I have none. So once we have successfully added this
property of list style type with the value none. Now we can head over or I can head over. I don't know the Jew and common this or not on now I'm gonna uncommon this again. And now we can place
it again without any default margins patterns as well. A set the box sizing to the barter box. And now let's work with our links. And again, we can do the same thing. We have the an order list, correct
, Then within the honor list, we have what we have these links. Now I can do this directly. I can just say all the links that are gonna be within the on your list or we could be more precise
. We can say here that even there's gonna be, Let's say, for example, some other link elements directly here is the Children. Maybe it would be a little bit more precise to use
this ally. In our case, this is not gonna make any difference. It would only make a difference if you're gonna have some link elements without these list items here, that would be the case where if you want to select only those ones
, you would like to use this ally. But in our case, either of them would have worked. I can either, do you? Well lie. And then the link woken. Just say you Well, so in order list. And then we're
looking for the link. Please understand that what we're gonna do with the links, let's decide. We know already that we have the text decoration, so I may get her of the text decoration and was going to say not so far, so good
then Also, we know the property of text transform on for the text transform value we're gonna use capitalized. So now all our text is gonna be capitalized also, let's add some letter spacing
, Let's say for the spacing, we're gonna have to pixels. So far, so good, then we have two pixels also. Maybe let's add some background. Let's say that the background is gonna be hashtag 2 to 2
. So the bathroom is gonna be black on the color is gonna be, Let's say, orange F 150 to 5. So, so far, so good. Everything is working out. How old
? What if I would let me make sure f 1508 I was there to five. Hopefully, this is gonna be the orange one now. The key here is I would like to add some padding here
, top and bottom for my elements, as well as maybe a little bit off margin in between now, eventually. Once we set up everything, we're not gonna have any margin. MMA, just to prove your point, let's say that I would want both
. I would want some padding time, bottom as well as I would want some margin. Tell madam. Okay, lets try, toe. Let's say first of all, patting is gonna be all around on. We're just going to say padding is
gonna be five pixels. No que already. Something interesting is happening. I'm having the padding, but they are overlaying one on top of each other. That's definitely not the look that I want. Okay
, we're gonna keep on moving, and I'm going to say margin is also gonna be top bottom and something left and right. How are Maybe since you don't believe me, you would be like Well, okay, you're just writing it incorrect
. Let me write different way. Let's say top bottom is going to 10 pixels as well as 10 pixels is gonna be left and right. Know what happens? The links are moving left and right on. Obviously, in this case, we just see
the left side because there's nothing here in right hand side, but they're not moving top and bottom. So what's happening? Well, remember, links were in line, they were in line elements. And what happens is that browser is not
gonna respect that as your start. Having these patterns here as well is the margins for the top bottom. So in our case, in order to fix this, we would need to make them as the block
level elements. So how do we do that? Well, first of all. Let me get rid of this. Let's say that I would like to get it with margin padding. We're just gonna rewrite this and in this case, I'm going to say display. And now, instead of in line which
was the original one? The default one. I'm going to say display block, So check this out. So now my links are all the way from one side to another side of the screen. And now if we're going to start adding
padding on, let's say for us the padding is gonna be Ah, top bottom is gonna be, Let's say, 10 pixels and then left and right is gonna be 10 pixels. Now, obviously again, the batting is gonna be only shown on
left inside because there's plenty of space right here, so we're not gonna be able to see what happens right now. My links are actually respecting this padding time bottom. The browser is respecting
because their block elements now the same thing if we would want to do this, But again, we're not technically wouldn't want to do it in a mobile menu. But, I mean, maybe, who knows? But you could add margin
. So let's say I couldn't do just the marginal around in this case. And now these 10 pixels of margin of us on right are going to be respected, not just the left and right that, like we had previously
. But again, in this case, probably this is not something that we were going to use, but again, just to show you that for the block elements, the browsers will gun respect the top bottom padding and margin. How
are for the inland elements? They'll not going to respect the top on bottom margin and patting at this point, we know two values for the display. We know
that there is going to be displayed block as well as display in line. What about we cover the in line block just to see how this is gonna work. Now I'm gonna show you this with link elements who are by
default, obviously in line. But just please understand. You can do this with any element. Basically, you can said this doing Leinbach now, just like to show their characteristics off in line block. Let's start
by simple hello world and again. Like I said, we were gonna be choosing some kind of in line element. In my case, I just find the link to be fastest. That's right. And then there's gonna be value of link within
the actual link, and that's copy and paste that I don't know. Four times these are gonna be my heading one way of these length. No, I was like I said, we would like to cover in line block. We already know that there's gonna be an issue
if I'm gonna be styling the links and let's say phone size is gonna be 60 pixels. Then let's maybe some background Ah, for red. This is gonna be a good option, then. Also, we
have an option of adding the margin. Now, the moment we're gonna be adding the margin, there's gonna be a kick Your go. If we're gonna have 10 pixels, notice what's gonna happen. The margin is gonna be only applied again, left in the right
, because for now, the browser is ignoring because it's looking at it and saying, Hey, listen, buddy, you're inland moment. I don't care whether you're adding the margin, which, in your case, you're adding 10 pixels
all around. I'm just adding this left and right because you are displayed in life. So you're in a question would be Does that mean that each and every element if I want that margin, does it have to be blocked? So
let's say, do I have to do like this this play on block? Well, the answer would be very simple. No, you don't have to. Because in your case, you would be like, I don't want this to be spreading all across
and just want them all in one line. But then I would like to add still some margin. So how do we do that? Well, I think I already answered by saying that we're gonna be looking in line block when we just right in line. Block
. So what's happening with in line block and let me come into south, and then you will see that right now we don't have the margin notice how they moved. And if I'm gonna have inland block now, we moved. And if I'm gonna have more margin
just to show you that I was said, this is going to be 30 pixels right now because the more margin we're gonna have and let's say 606 or you know what Let's do 60 now, we're gonna have 60 pixels margin
. Um, if you would want your margin top marked a bottom margin to be respected you. And if you don't want it to be displayed, block. So taking the full line, you have an option
of using the in line block. And again, you can use this on a daily element. I just showed you with the link in the previous video. I mentioned that we were going to cover the box sizing on, and we're
gonna make it, actually, with an example, because, like always, and I know I keep repeating this, but it makes much more sense if we're looking actually at the example. No, what we
would like to do here, I guess, again, for the whole psychosis. I was going to delete this. Ah, we're also gonna go to index html gonna say we're not gonna need the on our list, but
instead we're gonna create a dips. In fact, there's gonna be three. There's what a day of let's say first box number one is gonna be in a class on Let's right here. We a heading one. Ah, simple
text. I am with ah I am with Border box Mortar box than the next one. I've been just copy and pasted on Let's copy
Invested two times. So the second Davis House they're gonna be with box of number two on the third one is gonna be with a box of three again. We'll just use this for styling here. Let's just say I'm normal
. I am the warm Oh, Andi, for the third one, what's right? I am without border box and we're gonna save it. Okay, so we have three days. Within the three years we have heading
ones again, The most work is gonna be in style. CSS. And let's start styling the first and foremost let's select Barks on was in the right box number one. Now, since I would like to have multiple
styles for each and every box, let me repeat. Maybe when we could group the elements when just say box number two, we're gonna write a dot again blocks number two as was
comma on box number three. I'm just keep forgetting the dots, but I think it's gonna be OK now what I would want for all the classes, because again, that was the whole point of this grouping, so I'm going to say 206
pixels was gonna be my with then we're also gonna deal, I don't know. Height on the same of 206 pixels. Excellent. We have the with on we have the height. Now what? You know, maybe let's
add some colors, but for the colors, they're gonna be separate on one to actually select the actual boxes on their own. The box number one is gonna have the background off. Let's say
red, then we're also going a little bit of coloring with white. So that's gonna be this style on you know what? In this case, we can just complete basted because there's no point of rewriting everything. So we can say
that I would like to select whatever these lines on we're gonna copy and pasted two times. Then let's write different values. So this would be box number two. This is gonna be boxed number three and you know what
actually changed my mind? Why don't we do this 106 pixels? Because you'll see. Actually, no, you cannot do it with my apologies. I need to go with 206 pixels because I have adding one. Please disregard
whatever I just did on back to the colors. Now, for the second one, we're gonna add, maybe, I don't know, blue color on Texas. Still gonna be white. So here we can also do the
green. Now, as we're looking at it, first of all, you can see that I messed up. I could have used the color right here. Said color on white. Um, let me just spend 30 seconds to delete these guys
. So again, we're going to select them with multiple selectors on. We'll just gonna delete them, since all the colors that are going to be exactly the same now comes the most interesting part off where it's
starting to work with the border books. So why we're using that property on why we're using the actual property as well as the value. So why were using the box sizing property? We have the
value of the border bucks. Now, in order to demonstrate this, why don't we add some padding now for the box number one, which was gonna be Warbucks and then for the box number three, So leave the middle
on the box number two just the way it is so here. I'm going to say like this. I'm going to say that I would like some padding and I'm gonna have padding all around. I'm going to say 20 pixels. Okay, so I'm
really noticing that my box is getting bigger. OK, let's do the same thing here. Let's say for the third box is also gonna be the same thing. And again, we're getting the bigger prodding. Want a lift inside
as well as we can see that it's happening on top of bottom. Now, if we really wanna actually check this out, we can head over to the bigger browser window. Or you can do it in a small side
browser window, really up to you. And then we can again refresh our weaken. Go to Google developer tools on. If I'm gonna click on Inspector, I'm gonna open up the tools I'm going to right away. Zoom in so we can see better
on that was a little bit drastic. I didn't need to go that for but we can stay something I cannot pick the right angle. Um what's a head within the head? I'm not interested in anything
. I don't know why Opened had actually needed body. Ah, me. Open up the body now Within the body. Have my boxes. What do you see here on the box? Now, if you can clearly see on the top I have
240 by 240. How are on my right hand side? It says 206 by 206. Again. Let me have a hold over back on. As I'm hovering over the elements, you can see that there has been
added some with and some height because we just had a departing because I said patting is going to be left and right and top and bottom. So what happens is even though originally it was 206 by 206. Now, in
fact, this is 240 by 240 because we added the padding. Okay, Don't believe me. Let's help over to box number three again. Same deal. So even though I'm having here right now
, this 206 by 206 what's happening is on the page right now as I'm looking at again, this is 2 40 by 2 40 and we can also see this over here. So I have 206 by 206
. But then my pad ings are being added on weapon Inside on right inside. It's obviously a different. And stay opposite the left inside in the right hand side as well. A stopping bottom. Now why
this matters? Well, has your gonna be working with CSS as you're going to be working with your layout? This is really gonna mess you up, especially if you tried to position something somewhere and
you just add a padding. And this is totally gonna mess up your layout, your view and probably most importantly, your mood, especially in the beginning. So when do we do about that? Well, let
me head over to the box number one over here and let's have the property that we just learned which was box sizing property on for the box sizing. We would like to have border box. Now, what
is Bordered Box? And you? Well, what happens with border box, Border box is right now and we can actually click on box number one and now check this out. Now, this is probably gonna be clear. But even though you can still see
it here, at least I can see it on my window. I can see that this is still 206 by 206. But I guess this is gonna be a little bit better. Were noticed. What happens now? The padding is added on inside, so
the content is actually 1 60 which again might mess you up your content within. But at least it's not Gunnel mess up your whole layout now. Is it the same thing with everyone well known, This is
still without a border box value. So what's happening is this is the reason why we're using the border box. And that's the reason why in the beginning, remember when we had that universal selector, when we said
that we would want to select everything on that was the Asterix. Then we're adding margin is gonna be zero. The default margins should begun, then also, the padding should be gone so
we could always add their own patterns. And that's why we added here just box sizing with a value of the border box. So that's why we said here border box. So no, all of them are exactly the same
. The only difference right now with a one and three is the fact that the padding has beat added on inside. But the key is that if you're adding this property, it will not gonna mess up
your whole layout if you're adding padding to a element because batting is gonna be applied inside of the element, not the outside, making the element bigger. Well, we're still on a topic
off display property. Eventually, inevitably, as you working with he assists, you're gonna come across the A pass ity property as well as visibility on. You're going to see the
value for display property set to none. So why don't we cover all these properties with these values just so we can see the difference now within the indexation mouth, we will gonna create three
new there's I'm going to say there's gonna be Dev on The first one is gonna have a glass of none because we're gonna look at the class of none Hamlets I don't know right also, Maybe the name here on let's copy
and paste it Now, once we cap invested, I would like to select both of them on Let's right here. Opacity here is gonna be equal to one. So that's gonna be Mike last night as well as their how you, um as always
you'll see why we're doing that. Just in a second on. Let's right over here. Rapacity is gonna be I don't know, five on this is gonna be basically capacity of 0.5 on. Then the last
one is gonna be a pass ity. We had zero. So with me, some like this on now, this is gonna be my rapacity of with you. I also would like to have the div. And you know what matters Will copy and president. And let's set
this up with a hidden. So you know what? No. Let's give this a class of visibility. So the name is also gonna be visibility, but the value is going to hit. So these ability
hopefully, um, tapping this correctly. No, let me say that this is gonna be my dips. No. For each and every day. Let's again at there's always some general styles. It's a deer is gonna have some background. Background
is gonna be below. There's gonna be a little of a margin around, so I'm gonna say, I don't know, a little bit of margin off like, let's say thank pixels and run up the margin went and we had some coloring
as well on Let's rate the color is gonna be one. So what's happening right now with these properties while we have the classes so I can say none on here? I would like to start using by display
. Now, this is not gonna be display blogged the in Leinbach or inland. Instead, we're gonna set this up with that. And now let me first at all of them with a pass it ease and with visibilities And then I'm gonna
go over to the actual developer tools and then we'll see kind of the differences. So for now, what we're saying is that we have the class of none on display of none. We cannot see the element. And that is
true. Now what other options we're gonna have? Well, we had believe capacity. This is gonna be equal, Teoh. A actual a pass ity property on opacity property is gonna do something very similar
where this is going to control the visibility. Now, the max value is gonna be one which is gonna be by default, right away displayed. And then we have an option of zero, which is gonna make sure that the actual
class is not displayed, meaning the element or whatever. But we're since we're using the class to selected, the one that has zero is not gonna be displayed now. In this case, obviously I need to still like
the proper one. So if my class was zero notice, I'm having right away the Dave where we cannot see them. Because this is where again we're working with these values were rapacity is changing
Now, if you remember, it was something very similar. As we're working with the colors where we're using the RGB a value, remember, we had color and then the last value in RGB a was
the transparency or opacity. So the same thing is working here, just with the whole def were by default, all the capacities are going to be one. And that's why we don't need to write it on. We can see it clearly like
this hour. If we change it to zero, which would be the minimum value, Then we cannot see the Dave anymore. And also, I'm gonna have the value off five, which is gonna be zero for now. I'm not gonna
cover each. In fact, every value between zero and one. Just understand that we're just using right now around values because they just make a little bit more sense. But if I'm going to say 0.5
the opacity, the transparency off this live, it was gonna be like this. So it's gonna be somewhere between the middle off, totally hidden element as well as totally clear elements, because we're gonna
have the transparency of far. If I'm gonna change this 0.74 then my ample capacity goes bigger because in goes towards one, meaning I am less transparent if
I'm gonna go with 0.25 than the element is gonna be way more transparent because we're closer to one. So you're bouncing in between these two values zero and one, and whatever
value you're picking in her case 0.5, then the transparency is gonna be like this. Now, last. But at least we have here also the visibility and four days we had the class is the
ability on. We're gonna go with visibility property. I noticed what's happens with visibility. We have an option off hidden more. Aiken, head over here and again, we can have the hidden
or visible. Now the visible again is gonna be by default because all the elements are gonna be shown by default. But if you would wanna have hidden, then we're gonna have to Here. No, maybe in order to kind of see what's happening
. Like I said, it's gonna be better if we're gonna go to developer tools just to see how everything is working. And then we're gonna head over here to inspect. We see that there's gonna be my elements on. Maybe I can
make this a little bit bigger than within the body. Noticed what's gonna happen. So I will gonna have my display of none. Then I have my capacity of one as well as here. We're working with
a capacity of 0.5 and then I have the opacity of zero as well as I have my visibility. Now. What would be the key difference you see, has we're working with display of none. This
is taken out out of the flow so we cannot even see it here. How are as I'm hovering over the capacity, I see that there's an element, So the element is there. We just cannot see it right
now in the browser. How old were display of none was taking totally out of the flow of our documents. So even though I can see it technically that it is in the HTML, I cannot hover over
, I cannot select it. I cannot see it more in more detail. Hold with opacity Onley thing we're doing as well as visibility were hiding that element. We're not taking out out
of the normal flow off the doctor, so those would be the key differences. If you want to totally get rid of the element you would use display of none. So maybe head over, Let's back. We have the display of none that would
totally take it out off the floor with document, if you would want to. Let's say change the opacity. Change transparency. You would use the opacity and choose some kind of value between zero and one
. And if you just want to hide it, you'd say visibility of hidden. So those are the properties. Those are the values, and that is, in general how we would use them. At this point, we already know how to add background colors
in CSS. Well, what about images as backgrounds. I think it would be really cool if we would learn that not only will learn how to use background image properties, we're also gonna take a closer look
at short hands Index, which, in essence, we're going to save us the unnecessary typing. Okay, Our next subject is really, really interesting. And that is gonna be the background
how we can add background in RC Asus as an image. Now, in order to start working on this, we're gonna have to get images. So I would like to spend this video with the set up. Now, you don't
have to follow along. You could just go three sources and get everything that I'm gonna be doing this video. But I do want to show you again to repeat where we're getting images on, we can save them
and how we can crop them now before I do anything right now with images, Let me just delete my CSS. Soc says it's gonna be clear as well as in the next session of mouth. We're going to get
rid of all these dibs that we did use in the previous video. Okay, Awesome. We also can delete this guy. We don't need it. The photo is gonna go. Bye bye on
, then. Yeah. What's going? Look for images on You know what? I don't need the council. I don't think we will need it on. Let's open up the new tab again. We can use picks, obey or pixels. I'm gonna go with pixels
. What kind of image we could be looking for. Let's say we're gonna get this one. This is kind of interesting. And again, the way we'll do that, we're gonna save image as, and then we're looking for where we're saving this. So in
this case, I'm gonna call this big image. Now, you don't have to technically name with this way, But there's the reasoning behind this. So again, this is really up to you. I'm going to say that this is gonna be big. Then
another image that I'm gonna be looking for is gonna be Let's say this guy on again. We're gonna do saving me jazz on. I'm gonna call this one small again name and how are you? Would like and I'm gonna name it
this way. And then what else we have? I guess we can maybe work with the actual building here, let's say save image as now the key here is gonna be that
I would like to create a folder and then I'm going to save this image in the folder. So I'm gonna call this first of all folder image That's gonna be my name. And then first, I would like to create a new folder. And again, this is just to
show you something How we would get the path here. Let's say I am G or images doesn't really matter going to create it. And then I'm gonna say with within this folder, hopefully you were successful. Now I'm
gonna head over to my folder, and I would like to crop the small image. So the one that's in the images folder as well as the big, big image can stay the same but the small. When I would
like to actually crop it and not in the photo shop, I'm just gonna do it the quick way in the actual Mac. Something to say within the tools I would like to adjust the size on
. Just get something small. Ah, you know what actually wanted Really, really small. So I'm gonna say 106 by hundreds. This is gonna be very, very small image. Let me save it on. I think
now we have all are set up so we can go ahead and start learning about background image property in the CSS. Alrighty, neighbor. Hopefully you have the same set up
as me. Whether you downloaded with her, you fall along last video and now we can start working on the background property for our images. Non first and foremost in the indexation email
. We're gonna create a diff Now this def is gonna have a class Now in the class is gonna be big. I m g on within this deal. Let's say that there's gonna be just some heading one with
Ah, I am. I am gonna make this proper one. I am big image and with make up in pace this on, let's say 123 then
the second one is gonna be the small. So it's a small image. The third one is gonna be the folder image again. Kind of straightforward. This is gonna be the small image, and you probably right. You can guess what we're gonna
be doing anyway. So it's a small image on then the last one is gonna be the holder image. So I am Holder Image. Nice to meet you. Okay, Index html Done. Awesome. Let's
head over to style CSS. First, let's select all the deaths on let's say the lives are not gonna have any kind of with, so they're gonna be spanning across. But we're looking at some height. So let's
say height is not gonna be two pixels had actually would be. I don't know. Let's test it out by 406 pixels. All right, I think that's gonna be a little bit too drastic here. Let's covered 306
pixels. Maybe that's gonna be bigger. Well, at the moment, it's still kind of big. But you know what? It's obviously the fact that I am working with the browser window on. I have zoomed in a locked so not
there. I'm gonna zoom in there, but zoom out over here because I always want you to see a little bit better so I can see that I kind of went a little bit drastic where I had 1 75 So in this case
, it looks better with 1 25 So now I Maybe I can not really get 406. Not not 54,060 or 5406. Let's try 406. Yeah
, I think this is going to do the job. Excellent. Also, I would like to add the color so it's right Color is gonna be read. Let's save it. So far, so good. And now let's start working with backgrounds. Now
, we have done already too many times the background property, so I'm not gonna show you with a color. However, the whole point here is to show you how couldn't work with images. So for the class of big image
, what I would like. First of all, it's a collective background. Now it's gonna be the first step then for the background. The value in this case is going to be a girl. This is where the difference comes in. We're not placing the color. Were
writing the girl now within the URL, we need to show the path. So where this image is located now, where is this image located? The big image. Well, it's in exactly the same folder as
our style CSS. So it's very simply we can just look for the big image that I'm going to do in the forward slash on. In this case, this would be the big image. Now, we can also let me just say that first
of all, just so you can see that there's gonna be an image. But let's look at the other options we had. We obviously could have done it like this could have said like this. This would still gonna work. But again, please remember, it's going to depend whether
you are opening up with the browser. So if we're gonna go over here and if you're gonna click on, let's say indexation email, then the different paths are gonna mess up over there. Has your opening
directly in the browser. So just keep in that mind. So this is gonna be the safe one where, even though I'm gonna open up where the boroughs air directly, this is still gonna work. So again, this is just something you need to keep an eye
on. Now let's say this again on what else we have. Well, maybe let's just that out oiling this. It's a big J peg now. Is this working? I think it is again. We can do
the same thing. You know what? Let me open up the new browser window, and we're going to cover everything that we again did in the indexation. Email. Let me open this up. So this one is working right now? Then let's
do this guy where we have the quotation marks on I'm sorry if you already know this, so it's annoying to you. So it would be showing here on my life server. But if I'm gonna refresh, it's
not gonna be working here, as I will open up this directly with the browsing window. So again, this is something we already covered with the indexation email where we have the relative path. But
this is something that we're gonna work with the browsers as both with development servers on. This is the syntax that you'll use a lot with their desk and me again. React or no, there's
something like this again. I digress, but it can sometimes really throw you off if you're just messing around. And if you're not getting the correct values. So for me, I'm just gonna be sticking with this. Whatever
you pick, it's really up to you. Okay? We have the background Now, with all my yammering about the actual path, I didn't tell you that. Basically, we're getting the image. So that's the need point where
we have the background right now on the background is in fact, image. If I'm gonna make this bigger, still notice we're gonna have a nice image. Now, there's gonna be a couple things that are happening by default, and that is something
would see assess where some of the things you already have noticed Let let's say display properties. They already precept. No. One of the things that we're gonna again cover in a few videos is the fact that this is
repeating of the background image. It fits one. If the diff is getting bigger, it needs to fit another one, and this is gonna be repeating again. We're not gonna cover this right now. We're just checking how this would
look in general. Then let's do small image. Remember, that was the other one on again. You know what in this case? Maybe Allegis Copy and pasted. There is no reasoning for me to
not copy and pasted because I think it's going to say it was a little bit of time so it's a small image. So I'm gonna be looking for the small guy on Check this out. So I'm gonna change this. And again, this is
in the same folder, so I don't care. I can just use small J peg. And what do we see or hear? Well, we see that literally. The images repeated not only the X direction visible
I direction again. That is something that's happening by default. So it will get a matter what kind of image you're making. Because I'm sorry using because the reason why I wanted to show the small image
is that even though we were gonna cover later on the properties that affect this So technically we could get the same look where the small images still going to be covering on hold if it's
gonna be distorted and it's not gonna be very pretty. So it doesn't matter what kind of image you're picking, so please don't pick like an image off 25 25 then wonder Well, why my image looks so bad or why
does it doing this repetition? Because that is something that's happening by default on. I know that's quite a lot that you kind of have to remember that. OK, they display properties by default. This
is by default, but there's nothing I can do. Just this is how it is. It is happening by default on. I just need to cover it now. Last one is going to be full damage successfully or happily
. That was the big one. Let's say small and I don't know why I deleted the image. Could have just said with folder. Now, I don't want to use the small one. Now I have to look into folder now the reason here
again wants to show you that we need to use the path. So we have to use the path where we're looking for the images, then within images what we have. Well, we have folder image
now. We were successful, and now I'm getting the folder image. So big takeaways. If you want to place an image, use the background property that we already have covered many times with the colors, then use
the URL and then within the u R. L need you need to get an image. But please understand that the image you're picking matters because the small image is going to be repeated. Well
, since it is hard to dismiss the background image repeated, we might as well start with that property and cover the options we have for the values. But in the process, we're also
gonna touch on something in CSS that is very similar to the last rule. Now, remember, the last rule would be something like this. So if I'm gonna copy and paste it and if I'm going to say with a div on the
height, I'm gonna set it to the 206 on. Let's say color is gonna be blue. What do you think is gonna be displayed? Do you think the first one or the second one what's gonna be the second one? Because this is the
last rule. Well, the same works with in order, and you'll see what happens here with the property of background. Repeat, and this is not specific. Through this property. This is gonna be happening with all of them. And you know what? I might as
well show you right now. So the order is gonna work like this, that even though let's say I have the height here first for 406 even within the same rule. Something right here. Height on
206. What do you think is gonna be displayed? I think at this moment you already known that this is gonna be 206 because again, the same how we work with the last rule. The order also matters. So if you rolled this first find
, this is gonna be displayed. But the moment you organized the same property with a different malley, then I always said this is going to change because this is gonna be the last in the order again. I had aggressive little bit, but
I'm gonna be using This is an example. So you might as well get used to it right away. Okay, we have a background. Repeat now, what will be the property? Well, surprise, Surprise. This is pretty
obvious. It will gonna be background. Repeat. That's gonna be the property that we'll going to control the repetition off the image. Now again, remember that there's gonna be some things by
default. So if we're gonna right here, repeat. And then I'm looking for the values notice you're gonna have no repeat. Repeat, repeat, Tex around in space. So we're gonna check some of them. I don't see the point
of checking, actually, all of them. But we're gonna start with a very simple one. Repeat now, what happens with repeat? Well, nothing happens with the repeat because it is said by default. Anyway. So again, something to
keep on eye on, then the next value. And this is where the order starts working where I'm not gonna be coming thinking about because I might as well write the next one because the next one is gonna be affected
. Now, in my case, I'm gonna write, not repeat. I'm gonna use Nora P. Check this out. So what happens now? Only this image is displayed ones. So if this is 106 by 106 Well, sorry, dude, but
this is as much as is gonna cover now. We can also maybe add some border just to first of all, refresh what we already learned. So two picks owes a little red on the second
one just to show you that this is all the space that they would have. But this is how much the background is actually image using. Okay. What do we have next? We have repeat X now repeat X
is just gonna be repeating the image, this direction, and again, I know that is kind of hard to see, but I will gonna make this bigger the browser window just to show you that even with the bigger images
, if the Dave is gonna get bigger right now in the X direction, the CSS is going to repeat the image. Because, as you see, there's one image in there is the second one. Now, it was easier to see with the small ones because
there was 10,060 of them. But it also is happening with the big images. So don't think that it's on Lee happening with small images. By default, all of them are going to be right away. The background Repeat
on set with the value of repeat what else we have. I digressed authority, man. You know what? I'm just gonna do it. Simple way you said it that I'm going to repeat this line. My meaning? Copy of this line on
Gonna repeat X again. $10,060 to whoever guesses this on. Yes, this is gonna be X direction. So good job. Whoever you were on, then we're gonna
say why direction again? Kind of obvious what's gonna be happening? It's gonna be repeated in the Y direction, and then we also have the space and round. So let me copy and paste this. Let's
write space on for the space. What's gonna happen is that there is gonna be space in between these images kind of obvious. You can see that there's gonna be space in between whatever images
are being repeated on the last one is gonna be the round now around is gonna make sure that Onley round images get in there. What do I mean by that? Well, if you notice
that if you have the repetition, if it's not gonna be able to fit the image is basically gonna fit like half an image. Now, in order to show you that, let's go to the big one because check this out So we have big image
, but then notice how this is basically like half, because notice that basketball post is gonna be right here and then it doesn't cover it completely, so the hoop doesn't fit in
. Now what do we do here? Well, we're going to say that we would want to use the same thing that ground. Okay. Gonna forgot already. Background. And
why? I'm toppings background not repeat. We're looking at we are looking for Repeat. Ah, what was the value around? Okay. And let's test it out. Oh, this is gonna happen now, in this case
, I apologised. Ah, this is gonna fit only one. Because what happens? I'm sorry too. So, basically, by the time it's going to get the bigger if it's gonna be able to fit to, then it's gonna fit nicely, too. If
it's gonna get smaller noticed now, it's gonna fit only one. So if I'm gonna get really big, then if there's gonna be space, it's gonna fit in. I don't know, let's say three, but obviously, in my case, I'm not getting get to three
, but in the bottom Here, check this out. So we have the second image, but it is not using the whole thing. It's the same image, basically is cut off. So that's what's happening with the last one, which
is gonna be again background repeat round. Now, I'm kind of skipping over these ones because in most cases I think you're gonna be using the no repeat again. It really matters
what you're doing, of course again and everything. But I think especially in the beginning, you're mostly going to be focusing on this background. Repeat on setting this to know, repeat, I might be wrong, but that's just my
opinion. Interesting. But what if I don't want this repetition? What if everything that I'm seeing with background repeat, I don't like it. So I would want some kind of property that would fix the fact
that repetition is happening now again, in order to make this are you know what? I think this is gonna be fine for now. I couldn't just leave them. Doesn't cover too much of my space. I'm gonna have to add only two
properties anyway. But what's happening is we can use the background size property forties? No, for the background size, we're gonna look at the few options fuel values on the four first
one. The most important one is gonna be background size, and then we're looking for the value off cover now with cover is gonna do is regardless off the size of
the diff. The background image is always gonna fill up to the now it also gonna do the same thing even though the image is really small. Now you know what actually will gonna deleted my apologies? Do
it like this. Let's say background. And just to prove my point, size is gonna be cover. Now, what's gonna happen is like I said, I believe in the first video that the actual quality
of the image is going to suffer dramatically. See this we have the first image nicely covers everything as well as the second image. Nicely covers everything. Now, I'm not gonna make this one smaller. Bigger? We
might as well go to the bigger browser window and you'll see the same thing. Now we have the first one that the images cleanly covers everything. And then the second one, which is really distorted because we have picked
the small image. Now the property did his job. It did cover everything. However, this is where you need to be careful. We're not picking to image of the small now. We also have an option off contained
. So here, let's write background background again. We had size macron size on. Let's say that this is gonna be covered now with the arms are not cover contained
with contain. There's gonna be an image our if there's not enough space, so this is gonna keep the ratio of damage. But if there's not enough space again, there's gonna be repetition. Don't believe
me. What's right? Background Back on ground, my grown repeat and let's go with no repeat and you'll see that only one image is able to fit their
while we're still keeping or hear this ratio. So that's gonna be the difference between two of them on again. In my most cases, especially in the beginning, I believe you're gonna be using this cover
in order to nice make nice headers or banners or some kind of parallax effect. Your just gonna pick a nice image, you're gonna set the background size to the cover. So this is always
gonna cover on. Then you're gonna be good to go. Brilliant. We know how to work with background size property. So what's next? Then? We have the background position, and as you can see, I already did
the misspelling. So let me make this correct. And now what we're gonna do well here are gonna be changing the position off the background image and, as always, is just gonna be much more easier for us
to actually test it out. Instead of spending three hours talking about, I will gonna do a little bit of spring cleaning. Though I were going to get a writ of this background repeat as well as this background size cover for
the second one. I also would like to set up background. No, repeat, forward a second guy and Logan, right background Repeat, and we're not gonna be repeating now. Here, we're gonna be testing out pretty much
everything on a small one. But once in a while, we're gonna check the big one just so we would want to see the differences And let's say, here, background, we're looking for position. And then we have the percentages values
, the pixel values. But we also have straight up text now for the text that started with the most basic one, which is gonna be exactly in the center. So if I'm going to right center, notice what happens now? The background injury is sitting
in the center and again, the difference between the small one and the big one is that obviously with small and we can see where him and just sitting with the big one, The image is still going to be covering the whole Dev
. Our the positioning of demons is gonna change now, in order to show you that we're gonna do background again, we're looking for position on. Then here we're gonna be placing in a center and now pay attention
. The moment I'm going to save it, the background image is going to shift a little bit because now this is gonna be the center of damage. And again, I'm not gonna be testing out on both of them because I already we have an idea
. So I'm just gonna be testing out with a small one because this is gonna be clear where the image is gonna be sitting. But just please understand that the same changes would be affected within a big image. However, the difference
would be that the big image is still going to be covering the whole def since obviously we have e macaron size set to cover with me, save it. And now let's look at the other options. And you know
what? Maybe let's leave the center and we're just gonna add background position a few more times, we're gonna say back in position, and we have an option of bottom on how this is gonna be sitting in about him. I'm gonna copy this. I'm
going to say left. So now the image is gonna be left. Then we have background position. And honestly, we have an option of right, and sure enough, this is gonna be sitting and right, And then we have the top
so background position on. Then we're looking at the top one. I'm sure enough yet sitting here exactly on the top. All right, so far, so good. So we have covered the name positioning
. And you know what? Maybe let me just make this one smaller, because I think we're gonna be able to see everything. And now I would like to delete them, because again, you're gonna be able to see them very clearly. Clearly. Anyway
, in your text. Better if you're looking for suggestions. So let me delete them. And let's work right now with percentages. Now, what's happening with percentages? We have an option off working with a Y
value on the X value. Now that is going to be obviously the axis Was that this is gonna be X axis. And why exit now? In the beginning, we start again by default, and that would be 06 So
originally, if I'm gonna comment this out, this is gonna be a exactly in the same position. However, here we can change these positionings. So let me again. I don't know why I'm saving here. And let's say that I would want
toe place it 20% on the X axis and then 20% on the Y axis. So how this is gonna work? Well, I'm going to say 20% on the moment. I'm going to save it notice and moved
20% on the X axis. We also have an option. Like I said, 40 y axis. So if we're gonna go 50% now, this is gonna be 50% on a Y axis. And that way we can really manipulate
the image however we would like, so if I'm gonna go all the way 206 let's say something like this on something like this. This is obviously gonna be sitting right up here. Now, I cannot again
tell you which exactly properties you're gonna be using throughout this course. Most likely all the time we're gonna be settling basically for sending in the center. Now, if you don't like how your image looks
in the centre, ours, they just understand that you would need to change the background position, and you're gonna be good to go. All right, we have one bad boy left, which would be background touch mint, But for
the background touch mint, we're gonna do a little bit more realistic. Example. First things first, we would like to get her of the height as it is right now with 406 pixels and we're gonna say mean height instead. This
will probably make sure that even though the content off our Dave is not what's a big enough 406% of you had, it always is gonna be a least minimal height off 106%
fewer. You can say here, view height on as well as always. You don't have to just use this in view heights. I'm just setting up this with a view height. You can use this with the pixels as well. That would be the first thing
then we're gonna get rid of. Let's say color red and we're gonna add some green one going to say that the color is gonna be green can also add right away some font size. Well, let's say 60 pixels
. And now I would like to place this text in the center. No, we haven't covered this yet. We haven't covered the flex box, but we were going to use it quickly. Again. Don't please hang up on this. We're gonna cover all
these properties later on with the values. So for now, just type with me and we're gonna place the text in the center. So I'm gonna say first display is gonna be equal deflects. Then we would like to justify
content in horizontally. So going to right center on a line. Items also in the center. That would work unless it's gonna place it exactly in the center. I
would probably still want to add the text in the centre as well, so I'm gonna text align on text. The line is gonna be in the center. There's a little bit of margins and patterns that we're getting. So maybe why don't
we do a quick reset or preset where we had just margin, it is gonna be zero now. We have already covered these properties with values batting is also going to be set to zero on
box sizing is going to be set to border box amok sizing border box. Once we say that we have three big containers, each of them having 106%
off the u it since we already have covered the view height items. Okay, what's next? Well, we have the background attachment now. 40 background Dutchman. Let's maybe also change some few things
around because there's gonna be much more easier to see once we have the big images on here. The changes that are going to be very simple. I would like to have the Big J pack for the third guy or the folder
image on for the small when I'm going to change this one toe the folder image. So I'm going to stay here like this so I would cover this line of code on. I'm gonna basically cut it out, copy and paste it right here. So
I'm now I'm gonna have my second one, and then for the third one, I'm also going to get the big J pig. So I'm gonna copy this one on. You know what we're gonna copy and paste it here for the background image. Know
what else we're gonna do? Well, we're gonna have the I'm background size set to cover. Then we're gonna get rid of the repetition on position. So I'm gonna say these
guys are not gonna matter. I'm gonna say background on. We're gonna have size is gonna be for all of them. Cover on. You know what? We can maybe add also No. Repeat. So let's do like this. Let's
copy infested. Let's add right here. No repeat. And here, this is gonna be no repeat. So all three of them are gonna be exactly the same on you. Know what? What else we can do? Well, position
. We could maybe add center. Let's say Bagram position position is going to be in the center for all the images. And you know what again? Let's do the same thing where you can just copy and paste them. We're gonna
company pays them No. For all my whatever the banners that I have right now, the position is gonna be in the center. Now, where does the background attachment comes in? So as I'm scrolling, I could see that I have
three massive images and we can see it actually better on a bigger screen where we have the I am big image. I am the small image on I am the folder image. All of them are big banners
that we were gonna later on use. Usually for our websites. The moment we load this is gonna be the big image that we're gonna be loading as a background image. How old? We have an option offsetting the background
attachment. How is background Tuchman gonna do? Well, let's figure out so for the middle one, because it's gonna be easier to see in the beginning, we can just write background on. Then we have an option of background Tuchman. So
here we have the scroll on the fixed. So that's what we're looking for. Well, the fixed one is gonna make sure that background image stays fixed while the text is still moving. You want
to see that? Here. This would be one that doesn't have the fixed. And as I'm scrolling down, check this out. So the second one is gonna have this scroll for whereas we're moving up and down, we're having
this parallax effect where the text is moving, but image stays actually fit because the background attachment property has been set to fix weaken, doing the same thing for all of
them. Now that we know how this is gonna work, so again, let me select the line. Gonna copy and paste it. We would want to copy investment to the first one as well as through the third one. No, all of them are gonna
have it. And now again, we can check it out. Now, this is gonna be for all of them. Where we upping down on the background attachment is gonna be fixed again. This is going to be something that we're gonna be using
. Whenever we're going to load the page, there's gonna be big banner image and as we're scrolling up and down, the actual property is gonna be set the fixed and as a result, will very having this parallax effect
where the text is gonna be moving. However, the background image here is going to stay fixed. Well, we're still in a stop IQ of background images. I would like to cover Grady ins and ceases
ingredients are very, very cool feature of CSS, but I can tell you right away that there is more to Grady INTs than what we will cover because we will use Grady ins for a very specific
reason to add overlay for our background images. And if you feel that you would like to research Grady INTs in more detail, you can always utilize external resource is with that being
said, what in the world are ingredients We always we're gonna start with an example on. This is not gonna be different. We were gonna get rid of all the heading ones right now as well as this div and we're gonna
create six dips we're gonna say they've the glass is gonna be, Let's say one on that. It was gonna copy and paste it. So let's do the second one. And you know what? Let's select all of them right away. All the
class values on was going to change Here. Just delete this on here. Let's say number two, then number three read and we're looking forward of war. Ah, surprise
, Surprise. This would be five. And then this is gonna be box number six. I'm going to save this right now. Then we're gonna head over to the CSS. I'm going to select everything animals going to delete it. We're going to start very simply
by adding some with and high toward all our names. So, Dave, number one, number two and all the way up to the sixth is gonna have the with of 150 pixels. Then we're also gonna add
the let's say, height, 106 pics, 50 pixels, let's say height off 150 pixels And then we would like to set them side by side. So again, we're gonna use the property with the value that we're gonna
cover a little bit later, which will gonna be display flex. And again, don't get hang up on this because this is very easy thing. We just haven't covered it yet. No, what we have when we have the
radiant Americans that working with Grady int Well, there's many ways. But in our case, we're going to use the background going to say that number one is gonna have the property of the background and here we can use the
linear ingredient known for the linear Grady int. We have values that we're gonna have to input for the colors as well is direction now direction again. There's gonna be already some default
. So if I'm gonna write for number one red and green, what do you think is gonna happen when I'm gonna save it? The Grady and starting from the top, which again would be the default if you're not adding here, the positioning
and it gradually changes color from the red all the way to the green. We can also this that out. Let's say with number two, let me company based it. Let's say here that I'm gonna be selecting
the box number two. But for the box number two, I'm going to change the direction off where the color is going. So let's say in this case, I'm gonna write to, and then we're looking for the top the moment we're going to save
it. Noticed this box right now. He is, in fact, working like the way it should be. Now, you know what looked me out a little bit more margin. You say the margin is gonna be let's say, five pixels
. So that's gonna be my five pixels. And then you know what I shouldn't have added display Flex to the Div? Should have went to all of them on here. I'm going to say to the body. So my apologies. We're gonna
head over here on. We're gonna say that for the body. We're gonna add display flex. Not definitely. You don't have to do it. We're probably gonna be able to see six boxes, but I just think that it's gonna be a little
bit easier if they're gonna be side by side, so the moon will save it. Now, this is how they're gonna look like. But you know what I'm noticing right now? Actually, the boxes that really small So maybe let's
just leave it without a flex. So I'm going to save it and then was gonna see boxes one by one again. I did a little bit of detour, but I think you we were gonna get over that. Okay, so we have read
coming all the way to the green, which would be the ingredient. And then again, the direction would be the default one from the top to the bottom. But if we change it and if we say to the top on Dhere
, we can say Red green again. Color is gonna start then to the top. So the first cultural gonna write is gonna start with the bottom on. Then we're gonna go to the top court were not limited to adding these two
colors. We can add whatever color values you would like. So here I can just say blue, yellow and just keep on typing away again. I can have another 50 but hopefully already understand
. The idea of what's happening is that we are pretty much setting up these values. So far, so good. What else we have? Well, then we have number two. We can have our is the number three. So it's a And
you know what? It's probably gonna be easier me to grab this class. It's on the dark because we're gonna be selecting glass on here are gonna say four. What I would like to show you right now is that
we also have an option off working with the degrees. We're not limited Onley to adding this to the top. We can say that You know what? No, I didn't
want to change the second one with me. Undo it on. Let's say instead of red and green, that's right. Like this Not say that we were gonna be looking for degrees on 150 degrees. So
let's see how this is gonna look like I'm gonna save it. And now what's happening is obviously they're not the color. So it's a number three and this needs to be right after the yard on. Now I see that I'm
having it from the 150 degrees. So it's starting from, let's say red and then goes all the way to the green. If we're gonna change it, let's say 315 again. This is
changing where there colors is starting again. Nothing really fancy you just changing off the direction off your Grady. We also have an option off adding this my letters
. So in this case, if we're gonna copy and paste it and you know, it looked me so, like, properly these lines let's say I'm gonna say these guys and again talking and typing is not gonna be my strong suit
. At the moment. We're gonna copy and paste it. Let's say we're gonna change this one to number four, for I'm here. Let's change it from the degrees, let's say to the top left so I can say
to top on left again. This would start with red, then green on. Then we don't go all the way up to the top left. Now, if you want to the top, right, right to the top
. Right. So now it starts here and we end up here. We a green one all the way on the right hand side and hopefully understand that by changing these directions, we are changing where
the linear great and it is going to start and where this is ending up now, in our case, would we're gonna be doing We're gonna be doing this for the overlays on. We're going to see that in next video with a very
, very clear example. But I would just want to show you two more things that were not limited again to the color names. We can use whatever color values we would like. So unless this thing out, let's say
that we're gonna be looking for number five. Then again, we're gonna have the background se background. Then we're having a linear graded. And here, instead of using the color names, we can also
use the hex values. But what we were going to do a lot is going to be with RGB a Now the reason for this rgb a here is gonna be much more clear. In the next video, I'm gonna be covering the actual
background image. But for now, logistics down now Remember for tobacco on images what we had I'm sorry for the rgb a what we had what we had the values so red, green and blue on then we're looking
for the opacity more to transparency. So let's say if I'm going to start with 0.3 transparency, this is not gonna be more thwarted in black. It's gonna be more towards the white because if I'm gonna
go total Zieler, this is gonna be in white. And here the opposite would be the fact that if I'm going with 06 on here, the last one is also going to be, let's say, 0.9
with me on the comma and then we're gonna have 0.9 now. What's happening right now is nothing because I probably have some kind of mistake. And sure enough, I do, because I have here 10
Okay, so so far, so good. And then I also have one extra zero because there should be only four values total. And I have fun. So once I added, since the direction is
the default one where it starts basically from the top to the bottom on actually too quickly show you the default. One would be like this. So if we're gonna right to the bottom, nothing is
gonna change because that would be the default one. So once we're going to say that I get notice, we're starting from the top and we go to the bottom again. There's always we have the default values on this. Pretty much is gonna be one of them
on here. I would like to work with the RGB A So that's the reason we restart by 0.3. So this is kind of transparent on we go all the way to 0.9, which is almost
almost black Now for the six we can do the same thing moves gonna test it out with a to the left, just to see that this for sure is gonna work. So it may have been placed it. Let's
say let's say here we're looking for six, so 60.6 and then I Let's just add here. I don't know. To the left or to the right, it doesn't really matter. So conceited left
. And now we have the initial color starts here with 0.3 and then it goes to the black one, which is going to be on the left hand side. At this point, we can have a look how we can
combine ingredients. We have background images, and as a side note, I purposely delete the previous lectures and re create a new HTML content almost each and
every time. Because while it might seem like a waste of time, I think it helps us with our muscle memory where we can get comfortable with typing actually amount as well a CSS I mean, I might
be wrong, but that is my reasoning behind it. So what we're gonna build right now? Well, like I said, we were gonna delete everything that we created for just so we can get comfortable by typing HTML and CSS
as well as we can get rid of these guys. There's gonna be new lives on for the new lives. We're gonna have two of them. Ah, the first one is gonna be just a Let's a simple div Just going to say hello
World on for this one. Let's call this one. I don't know Class on Banner on Now I can copy and paste this on. Let's say that there's gonna be another div which we're gonna have the class of
header as well as this is gonna say hello people again. Not too original, But I think this is gonna do. So far, so good. We have to deal. What are we gonna have here within our
style? CSS. We can first start by selecting the both of theirs and set up the mean height. I'm going to say for both deaths, we would want to have to mean height off, Let's say 106
view heights that should be looking really good. Then we're looking forward about grown images, So I would like to place background images on both of them. And you know what? No, let's first added in the center again. We
haven't covered this technically, but we're gonna say on this play flex, So displeasure reflex. After that, we have a line items in the center, so this is gonna place it the
vertical in center and let me get her. This guy on just for content is also gonna be center as well as text. The line should be in the center. So in this case, we're gonna be placing everything in the center so the text
is gonna beat Senator Center on. You know what? Let's add font size again. And with 60 pixels on color, I don't know, maybe. Let's try something else. So what we're gonna have for the color
we're gonna get out on orange. Something like this should work. Fine. We will save it on. What are we gonna have next? Now we would like to start working with a banner. Let's say so. I'm gonna say for the banner
, we already know that we have an option of background now for the background. We know that we can use the image. And now let's again use both of the big images. So I'm going to say Big J pick here, not with me out. Maybe
the quotation marks on proper path here. Let's say I'm gonna be looking for the Big J pick. I'm going to save it, and we already know that we need to add a few more properties because for now, this is not gonna be working
out really well. So we're gonna say like this we're gonna say, starting with background on. We're looking for what we're looking for. Repeat. Or maybe let's start with a size and
say size is going to be first. We're gonna be covering so the size should cover. Then what else we had on? You know what? Let's get that quotation Mark will save it. So now the sizes covering Andi
. We also had background. Repeat, let's say no. Repeat, on DA position is gonna be center background positioning is gonna be in the center, so, so far, so good
. And what else we're having? Well, I think the last one was What? The attachment. Right. So we had background attachment on this is gonna be fixed. Awesome. We have are set up with the
banner. Now, what's next? Well, now I would like to show you how we can work with linear Grady INTs on what kind of issue will be solving. And you know what? I know that this is gonna be weird, but this is a little bit bugging
me. These margins here, So let's do that little thing. What we did with the arrest of the elements or settle the elements is gonna have some margin of zero. Adding a zero on the box
sizing is gonna be equal to it's a border box. So now I'm gonna get out of these margins, okay? And the issue that linear gait is gonna solve is the fact that right now
, if you're saying if you have an image, you wouldn't be in some cases able to see the text. So let's say in our case, we technically could see the text. But I think that if the image would
be any brighter, it's gonna be much more hard to see the text. So the solution we can do is we can place an overlay using the linear Grady. So how this is gonna work out? Well, I'm gonna show you this. However
, I'm going to show you this on the second one on the header just so we can see the difference personal. And I'm also going to show you how we can shortcut this because you're probably looking at this and you're like, this is really annoying
. Were technically really typing for properties here with the values. So isn't there a shorter way how we can do that? And since it is success, yes, there is a shorter way. So in this case, we're
gonna say had her. So I'm gonna say we're going to start looking for the Hatter. So that would be of my first thing. I can let me set up a nice curly braces and then what I would want for that matter, Well, I'm going to start the same thing
. But instead of right away going with an image, we have an option off adding the linear ingredient. So let's start here. Let's say that there's gonna be living here, great in. And now I would like to decide on a color. No
. Well, what kind of colors we can have? I guess we can start with maybe black one. Maybe this is gonna make this image less bright so we know that we can have rgb a Then we need to have
the comma. So that would be the proper syntax. And again another rgb a Before that, before all the examples I was using one color and then there was some second color. However, if
I would want let's say everything to be in the same color. I can just add same color so I can say 060 So that would be my black one. And linear great in here is gonna be 0.4. And
I could do the same thing here. I can say zero again, Comma zero on. Let me make this properly zero than that is gonna be my third zero, I believe. And then I'm
adding my 4th 10.5, not me. Check. Yeah, I have five. No, again have one extra zero because this is technically wrapping here. So now let me save it. And now
I have my great color because obviously this is exactly the same where I'm having my rgb a one value as well as the second values Exactly the same. So this is the reason why
this is not starting from somewhere and ending somewhere. Well, technically it is right behind the scenes. We're starting from the top, but we're ending with the bottom because we haven't said any kind of direction
. But since this is the same color, everything's looks the same. Everything is unison. Now, if I'm gonna change this And if I'm going to say 0.1, notice that right now it's gonna starting from the top where this will
gonna be bright, and then we're heading over here where this would be doctor. But again, I would want it to be the same. Once we have added successfully are linear ingredient will. Now what? Well, now we're gonna work with our
image. We're gonna be looking for the image. However, this is important that we're adding here this come, please don't omit the comma. And then you're gonna be looking for the mistake because they will gonna be a syntax
error on here. We're gonna say you are l since this is where we're gonna be looking for damages. Now, I'm gonna look for either the folder or we can maybe look for the same image just so we can see the difference. I think
that would be actually better, because that way we can see one image is not gonna have the linear ingredient. And the second one that would have the linear grated. Now the image again was big Jipping. So forward slash then
would look before the big Jake bag, and now we're gonna have damage. Now the question would be you would say, Well, first of all, you can right away see the difference. So we have one that's gonna have no over early in the second one where the text
is much more clear because we have added the overly. Now, this obviously is not some kind of set overlay that you always need to use. You can use whatever color you would like. Like
I said before. But in my case, I'm just showing you with this kind of value just to show you that it is darker on again. This is really up to you. If you want to use the yellow color as over like you can use the yellow
card. Sometimes we're gonna do something like this where we have the let's say logo and then we're using the same overlay for this picture so it doesn't have to be black or white again. That's
the reason why you have these rgb a value now. Lastly I would want to show you is how we can shorten this because for now you would be thinking OK, so I have all this. I have the URL. Everything is looking really well
, meaning the image. But I still need to add the cover No repeat center and all that, because right now I have two images, so I would like to fix that. Now we can technically right, this soul out and there's nothing wrong with that
. But we have a shorter way. So here we can write that the image is gonna be always in a center because we have the position of center. And you know what? Maybe let me kind of put them in order how I'm putting them
here. So we have the center. Then we're gonna have forward slash on the cover so I can use this, and then we would need to write what we would like to do. So I'm gonna say no. Repeat, on this is gonna
be fixed here like this. And what happens? Well, we have added all these properties without writing, actually, properties just by adding the values. Now, be careful here. You can
change this order. So let's say I could save no fixed, and then I'm gonna write No, Repeat. So this is gonna work. Fine. How are don't mix these two up? Don't say it like theirs. Don't say cover
on, then center Because notice what's gonna happen? Little damage is not gonna be sure. So these do, guys, if you're writing them, just make sure that you right, center, then we have forward slash And then we're using
the color on that way. You know for sure that your image is always gonna be shown. This is basically how this is gonna look like might be mixed save. And I think it looks awesome. I think the little looks really good
. And now I can see the text much more clear. All right, we know the basics about the linear grains. Humbled. We check it out. Some external resource is that are gonna help us tremendously
as we're working with linear ingredients. So we're gonna head over to our good girlfriend Google on that. I'm going to write, not learn. I'm going to say CSS early in the year ago. Radiant generator
. So that's gonna be met. Text. Now, the moment we take that surprise surprise. This is what we're gonna be getting in our search on. We're gonna be looking for this. Yes, as great and generator from the color zilla. Now, what's really
cool about this is that we can come up with whatever colors would like. And we can really set up for Grady int. And they were gonna spit out that the code, and we just need to copy and paste it into our browser
. Meaning I'm sorry into our text. Better now, you'll see a lot of mumbo jumbo here on. The reason for that is we're not gonna cover this right now, but there's something called browser prefixes on
. Don't worry about them. Right now. Again. Only thing you'll need to do is just grab this code and copy and paste in, and everything is gonna be working finding a project later on towards the end of the CSS
tutorial. Before we start working on the project, we're just gonna take a look at what are they, browser prefixes, and why would want to use them. But for now, probably don't pay too much attention on you. And
I know there's a lot of code in here, but just keep in mind that you only need to coffee and face that and you're good to go now. First, let's say we can choose whatever directions is gonna be over orientation. Horizontal
, vertical diagonal radio doesn't really matter. Let's go with a horizontal. Then also, we can choose the color for month. Now go hex, where we can go with RGB. Now I can tell you right away
, even though you're gonna choose the hex color. However, if you'll now start changing into your opacity, what's gonna happen is we were gonna automatically switch to RGB A. So just because you picked checks, if you're gonna
let's I change the opacity or transparency, then the four month is automatically going to be RGB. No, let's say this would be hex color. So what kind of color would like again? We click on this box here
we just click here. Let's say we wouldn't want to go with the red one. You want to change the opacity, you go. We can change the opacity. We can say that. I don't know the capacity is gonna be something like this. And again, we can clip it
here so that would do the same thing where I'm changing the rapacity. So now this is gonna be a little bit more transparent than the same thing I can do Over here. Let's go here maybe with a green one on This is not
what I want. I would want to click old here on. Then I'm going to say I don't know that gonna be picking something like this. So that's pretty much going to be my transparency right here. Then
also, if you want to change something here, let's say color. You want to remove this color, just delete it. So just stay here and that is not just deleted. So we got out of this color. You want to get Billy
this color weaken, delete this color. So now we're getting this rgb A You wanna have them One more color lets you change your mind, Has your hovering notice. We can just click it here. This is gonna have the plus sign on
. Let's say that this is gonna be my color. No, I'm not gonna show you each and every possible option, or understand that this gives you a lot of flexibility. So, like I said, what we would need to do is just
grab this cold and we have again we can. There's many ways company this, but I mean, I'm just gonna sit like this, all looking copy on. I'm gonna head over back to indexation email. I'm gonna
call this day of, I don't know, color zilla just so we can see that color zilla. Hopefully, this is how they were spelling ultimate colors ill. Yeah, I think that's gonna be fine. And
then we'll save the style CSS as well as well, just gonna have the color zilla on. You know what? Let's do it like this. Let's just copy invested on, see how this is gonna work, like
, so if I'm gonna save it. Sure enough, this is gonna be my death. Um, I have everything working with my Grady in, so we have successful a copy and paste it. Now, if you want to change direction
, you can always changing direction on so on and so forth. So if you don't want to literally just settle for the basic colors that were picking only two colors. You can always head over to
color Scylla and pick whatever Grady and you would like. Brilliant. We're covering CSS properties like there's no tomorrow and next on the list, we have float clear position
. Property media queries for responsible design Z knicks to control the Z axis on before and after pseudo elements right off the bat. I can tell you that if you don't grasp
any or all the properties slash topics we cover, don't panic or get discouraged. We will use all of them in the project. So I'm more than 106% positive that if something's
might be unclear, they will crystallize in the project setting. I do want you to get at least a general feel for them. So here it goes. All right. First on our agenda is gonna be the flow
property we're gonna start very simply by creating some kind of Dave can actually give it a class A class again is gonna be something like banner than within the battery. We're gonna place our image, and
we're gonna go with a small one. So it's a source we're looking for small. That's gonna be the image name. And then let's right, I don't know, whatever some kind of alternative, so small image
. And by the way, I know that I have been avoiding alternative result time. So that's probably something we should always add what was in a small image, just double check. So we had some kind of Mountains. Let's say that
this is gonna be nice view. It's gonna be a text. So nice of you. Okay. So far, so good. Once I say with obviously, this is gonna be my image. Know what else? I would like him. Well, I'm gonna say paragraph
. And for the paragraph, I don't know, 50 words that should dio save its. And now we have the program. Okay, We already know that. The reason why we're having the margins here and the reason why we're starting
your line here is because paragraph here's block level. But let me throw you a mind gurney. I'm gonna head over back to Celsius. There's first. We're gonna select Ban uh and then for the manner
I would like to have just some kind of order on the border is gonna be five pick cells. Solid on, as always. I'm gonna go with the red on. Let me have maybe a little bit of padding. Let's say
batting is gonna be 10 pixels all around on what happens if we use the float property? Well, I can just say for the image since I have one image, but I would like to floated and I can just say flow on
then. We're looking for a few options Here. Let me get my suggestions again. Let's say float on the float. We have left. We have right, and we have none. Now, you would be tempted to say
that this is already floated to the role left, because what's happening is that images already floated to the left. However, by default, we have for all of them. Now, now, do you want me to pro that? What happens here
? So I'm gonna save it. Floated to the left. Now check this out. Even though the paragraph supposed to be a block level moment where this is starting a new line right now, we took the element
out in our case image out of the normal flow. So now the paragraph is actually wrapping around. Now, if we don't want this look, then we would need to go. For what? When we have an option off
. Clear. So for the paragraph, I would say that I would want to use d clear, and then I have few options I can have clear both. So in that case, if there's gonna be, let's say two elements that have being one floated
to the left and one to the right or I'm gonna be looking forward actual flow direction. So in this case, if I floated to the left, I would need to write that I would want to clear it also on the left hand side. Now
I'm having back again the look that I had before where the paragraph was actually respecting the fact that it was starting in your life. No, If I'm gonna make him, let's say mistake and
write that I would want to clear it from the right notice again. This is not gonna work. Well, this case, this is not gonna work because I wrote it incorrectly. They should be ghd. But still, what's happening
is that even though I use the clear property, my value was incorrect. So that's something you need to remember that if you're floating something, let's say in one direction. If you want
the next element to clear it and start normal flow of a document like it should be, you also need to use the right or left property. In our case, that would be the left. So now
we have the paragraph that is actually respecting that. It needs to start annual mind just like it should be. And also, let's just start out with a right one. Let's say that I'm gonna be looking on right
and again. Same thing happens is because we're using pretty clear left. So now the paragraph actually goes up. So if I'm gonna again, here's the right. That would be the correct one. Noticed
again. We're gonna be starring in your life. What else will have when we have an option off? Like I said, there's gonna be, Let's say, two of them. We can use something like both. No. Where we will do that, I don't
know. We can head over to index html on. We're gonna copy and paste this image. Then there's gonna be too small images. Now one is going to be, Let's say, with a class of first, just to show
you kind of how everything would work, We're gonna have a class. This is gonna be one on. This is gonna be number two now, what's gonna happen right now? Well, both of them, first of all, gonna be floated to the left
side by side. Well, I'm sorry to the light because we added float, right. But in my case now we want to use the class of one. So I'm going to say that on Lee, the first one is gonna be floated to the right, and then
this guy's going to stay so everything is working Fine. However, if I'm going to say to and also I'm gonna float it to the left so floated to the left. Now again, the reason why we have normal
everything. Because if we have clear both But if I would write just clear right? Not just where our text is gonna be sitting right now. So right. And now my Texas sitting exactly in the middle. Because even
though it is avoiding the actual one that we have on the right hand side, it's not avoiding the left one. Well, you might say this is not true, and I can see we're starting new lives
. Okay, what if I go here on a number two and let's say that the height is going to be 306? What is gonna happen right now? Now my image is really big. So even though we're starting a new line
because there is the one on the right. The left one is still not being taken care of. So in this case, if you would want to avoid that, we would say clear both. And now we finally have a paragraph
where we have has a normal next element. Now it's really up to you if you want to float it to the left and have paragraphs at my side. That is also an option just to quickly show you, though, if we're going to
go bigger with this image right now, if let's say I'm going to go with 1060 is gonna be my height noticed that this is pretty much really gonna be big. Um, it's gonna
leave, actually, also my debt. So what would be the suggestion? How we can fix that? When were an option here off wonderful and hitting. So that way, the image whenever it's gonna be getting
too big for the parent, if we can use this overflow with the value of hidden and now at least the image is going to stay within the bounds of mistake. Now, again, this was a little bit too drastic
. Let's say 306 you know what I can just get rid of the second one just to show you how we can do with them side by side. So let's say there's not gonna be any more in the second one. And now we were gonna imagine the scenario
where we want them side by side. So we like to look how everything looks. Okay, so we have floated here this month is left. So this was fine or you don't want to the right. We can delay in the second one. We don't need it
anymore on. We also don't need to clear property. Let's say that this is exactly how we would want would want them side by side. Now, what we can always do nicely is to have some kind of margin. So for number one
, I could say margin on, let's say margin left is gonna be I don't know, 50 pixels. So that way I can get more margins in between them, if that's something that you would like And that's in general how
we're gonna work with a floats just to give you a taste of what we're gonna be doing in the project. Why don't we make a three column layout with this on with floats now in index and
HTML, we're gonna create. First of all, we're gonna get her of this closing, dear. I don't want that on. You know what? Let me make this a little bit smaller for now on. Let's right that there's gonna be a
div. Now the Dave is gonna have some kind of class, so I'm gonna say class of one on. Maybe we can add some text here. I don't know. 10 words. This is gonna be good enough. Now, I'm gonna copy and paste this two more times
and I'm gonna change these class names. I'm going to say this is not gonna be number one. Instead, we're gonna be looking for number two. That's gonna be my name on the third one is gonna be number
three again. Very, very original. I'm gonna head over back to my CSS. I'm just because this is a little bit annoying to me. The default ones that come with because I would like to show you
how the three column layout is gonna come. I'm gonna do a reset again. Where? I'm just gonna say margin is gonna be equal to zero. Adding is gonna be equal again. Zero And
border box is gonna be equal to aim box sizing border. But I'm sorry it was box sizing box. It's not Shadow. We haven't covered Alvernia on border box
again. It might be an overkill in general for the small examples that we're doing, but I just like to show you a correct three column layout. Otherwise, it's not going too good a look. Good. As good as I want
. Okay, so let's start with the class number one, Let's say the Nordic last number one. Well, first of all, gonna floated to the left. No, again, we noticed already something is happening because our layout changed. But I think
it's gonna be easier to show you background, No background attachment is something recovered, but I don't want it. I'm gonna say background is gonna be read on what else I would want. Well, maybe let's add some height
off. I don't know, 206 pixels, so that's gonna be my first thing. And now let's add some with. So I already have floated to the left. And since I won three column layout, since I have three deaths, I'm gonna
sit with percentage. Now you don't have to do this. Asked 33 if you have four days, then use for 25% 5 Dave's 20% and so on and so forth. There's
no rule that you have to use this kind of percentage is the only reason why I'm doing this because I have three column layout, so I know that I need to divide 106% by three. This is gonna be
the closest one that I want. Okay, What else? I have one. I believe I have the def number two. So I'm gonna say here class was number two. And obviously we can head it over here and say for the div
, all of them are gonna be floated to the left. I am comping basting a little bit too much, Meaning I'm repeating the same things. But just so we're on the same page, let's work one by one. And
here again, we're gonna say the same thing. So this is gonna meet my second one and you already have guested that if I would want the third one, I would need to do something like this where this is gonna be number three
on let's do this. One asked a green one. I mean, delayed this. This is gonna be number three hand, and we're gonna use the green. So this is gonna be something we're gonna be doing in a project. Know we're
gonna be doing a little bit more sophisticated, Not with red, blue and green and all that. But the general idea would be that if you want some kind of column, Louds, we're gonna be using the floating
one. And just to tell you that why this was technically incorrect because I was repeating the actual properties with values. I didn't have to do that. Since all of them is gonna have, let's say height
here with 206 pixels, I could have just didn't something like this. So I'm from going to cut this out, and I'm gonna also cut it out. These guys, that's a like this. Now I'm floating
all of them. So all the Dave's now, obviously, if you're gonna be adding more lives, this is gonna mess up. But since in our case we just have three Daves, I can just use this element selector and then what else
we can do? Well, we can get rid of all of them. So I can just say here that we're reaching one of them. The only that I would be interested is, in fact, the background. Now, that way again. Notice when? The moment I'm
saving nothing changes everything. Nothing breaks. I still have my three column land. Now, the reason for that is because I know I have all the dips. So I added for all of them left
and then some type of height. Now you're not limited. I could just say something like this year. You just say that the height is gonna be handled 406 so I'm still gonna have the 406 height. Now
, my columns are gonna be bigger on the regardless of the screen size. I'm still gonna have three column layout. I do want to mention though, that we do need to work with clear. So in my case
, what if I'm going to say heading one with a simple hello world? I save it. Okay? Everything is looking fine. So, technically, we have cleared the ship on. We have three column layout
and we do have over here right now are headed one. But we know that if we're gonna go on, let's say I had one more death and this is not gonna be delay out who were looking for. So we're gonna go
here, and now we're heading. One is gonna be sitting actually side by side because again, we do have the property for the clearing them. In my case, I would want to stake. Heading one on you're gonna
have to clear on the option would be I guess the best case scenario would be both. Now, I know in this case, this might look like a unnecessary example You could say, Well, the heading
one was still fine order. And then there's gonna be cases if you're using with floats. And by the way, I want to let you know that most cases you're going to use at this point already probably flex box. I do want to
cover floats, though, and we were gonna do in the project with the floats because I think it's important for you to know the full. But whenever you using the floats, you do need to start practicing of the fact
that whenever is gonna be coming after something that you're floating, you're adding this clear property. Otherwise, there's gonna be cases where you're looking for mistakes and it's really hard to find. And that's why this
is the easiest way Where you right away used the clear property on again. You can set it the left. You can set it whatever direction you want, but where you can use the both, which in that
case, at least you're making sure that whatever direction you're floating, this is gonna be one. Fine. But I would suggest using the property right away, just in case you don't run into some kind of mistakes
. Later on, moving on, we're gonna talk about positions, whether that's gonna be static, whether that's gonna be fixed, we also have relative and absolute. Now, the first one is gonna be static. But
to tell you honestly, most of the this video we're going to do with set up for the next positions because the static is gonna be by default, and there's gonna be nothing really exciting about that position value
. Now, what I would want to do is I'm gonna get a riff. There's live. I'm going to say there's gonna be another day, just a simple live then Let's add a two paragraphs with, Let's say, I don't know 40 words
here. Or maybe you know what? That was an overkill. I think 20 is gonna be fine. I could just save it. So that's gonna be even paragraph than for this guy. I'm gonna have a class of one. Then I'm gonna do exactly
the same with the next one where the class is gonna be number two thing that's gonna be sufficient enough. And then within this paragraph, let me add this span. I can tell you right away, though, that
again the span is not special. The positioning we're going to use is gonna be special, But it's gonna work with any kind of element. In my case, I'm years explained as an example, but you can use anything and here
I'm going to say I am more. He I am. So Hey, buddy, I am absolute. Now, at this moment, he's not or she is not absolute at all. But later
on, we're gonna make it absolute on. Let's say class is gonna be special. When this is going to be our special kid. We have the ham. Absolute. So what we have in CSS. Let's start
with the deaf. The Dave is gonna be border on. I have a warning for you in this video or next following videos. The coloring is not gonna be the most exciting one who's gonna be actually cut
quite hideous. But hopefully we're gonna be able to get through this. Let's do background Yellow on my hope was is that it would help you at least understand the general
idea. But we'll see. Maybe it's gonna be the opposite. Maybe you'll be like, Well, this doesn't make sense at all, So I don't know. We'll see. We'll have margin top right away again. This is gonna make a
little bit more sense later on. So I have the David has some margin top. You know what? I'm gonna have more going to say 40 pixels, then what else I have? Well, I have two paragraphs now. 41. I'm
gonna do a not padding. Background is gonna be blue. So that's my one then. I mean, also gonna select it, and I'm going to select it properly. I'm gonna say
, or you know what that deleted. I'm going to say that I'm selecting this guy. We're copping basting for number two? I don't know. Weaken Dio. Maybe number two is gonna be
I don't know what what we could do. Green. What do you think? Yeah, I think green is gonna be fine. Okay, so we have number two, and then we have the class of special Now for the class of special. Let's just add
, I don't know, background. And I choose something like this life quarrel, which is again going to be very, very hideous. But we're going to live with that fund size. I don't know, 20 pixels
, something like this. So this is gonna be my spot. Like I said, position static. He is very, very boring because all the elements again by default, just have this position static
. What position? Static means in general that if I added this class with the paradigm sorry paragraph with a class of number two after the paragraph with a class of one, this
is how it's going to be displayed. So that's gonna be exactly are normal flow of document. So you from having here to span? Let's say after the text, then this is gonna be displayed after text. Now, where would you use
the position of static. Most similarly, remember how we had the text, the line property. So if I had, let's say text online off all of them, right, if I would want some
of them just to be normal one. I used to use a text, and then we use text. The line left now in general, by default, all of them were on. This is obviously mistake. All
of them were text a line to the left. But if you set the parent through some kind of, let's say text align right, then you use this default one well, the same with the position static. If you're going to use them. Quite a
different positioning for the parent, Then if you would want some other one within that parent to have the normal positioning when the static, then you would use position static. Otherwise, you can write it here
. I can say position, and I'm not going to use a relative. I'm going to use static. You'll notice that nothing is gonna change because by default all of them having this position static. So that's the reason why everything
stays the same. Thankfully, position relative is much more exciting than the position static on. Maybe we can test it out. So we have right now, maybe d the class of one. So
we have a dead with a class one man, we can, I think, work on this guy. So let's say we have position and we already know that we have an option for the static. Now, the moment we save it was position relative
. You know, there's nothing changes we might be tempted to say. Okay, so it's pretty much like, however you would be a tiny bit wrong because with a position relative would weaken. Do is weaken
said it relative to its normal position. So whenever it was sitting normally and flow, we can actually adjust that. Now we can do that with four properties on the first one is gonna be top
. So let's say relative to a top word mishearing. So in our case, what we can do, we can say, I don't know, For example, 50 pixels. When Athens is, I moved it 50 pixels away
from where it was sitting relatively with its normal position. So now it's sitting basically 50% or I'm sorry, 50 pixels down. No one can use multiple values here. We can say, let's say
maybe Rpm's. So for the left one, I'm going to use, like, 20 rpm's, so not only were gonna place it 50 pixels down relative to where it was normally also, we're gonna
dio 20 rpm's left from where it was sitting relatively. Now, since I would like to use multiple values, I'm going to say I don't know, right. He's gonna be now, I don't know, 50%
. And I was like, This is gonna be more to now We're also using the stop one. So maybe that wouldn't be the best example where we have already left one, and then we're using the right one. So why don't we do this when
we come in this out? And now we're gonna move it to the right now This way, we're pushing it relatively. So where was sitting normally? Ah, 50% from the right. Now, also, we have the bottom
so we could push it from the vitamin again within doing the same thing where Top is gonna be commented out. And then we're gonna work with the bottom and for the bottom. I don't know. We had Ari EMS. We had percent. I guess we can again
do with the pixels. It doesn't really matter. So I can just say to 206 pixels. And now we pretty much moved it away from the screen. So maybe in let's not be that drastic, we can also do 20 pixels
. And now we just moved 20 pixels relative off where it was sitting up because moved it 20 pixels from the bottom. And that's how we can work with position relative in the CSS
A. Okay, if you thought that position relative waas somewhat fun. Wait till you meet position. Absolute. Which is, in my opinion, a real rock star in
the CSS. What do I mean by that? Well, let's take a closer look. First, I would like to get her of this relative, or we could just delete it may be all together later on, actually, throughout
this video and added back. But for now, just to show you how everything is gonna work, I will gonna delete this position relative. Where does position absolute come into play first? I'm going to go to the special One says
this was the reason why we added it and then let's a position here. Since this is our option position on then for position. We're not gonna go with the relative. We're gonna go for absolute
No, once we save it. Noticed what happens already. We're having some interesting changes. Okay, So far, so good. So what's happening? Well with position absolute were also placing
this position relative. How are on this position relative to the nearest ancestor that has the position relative. Now, if position absolute cannot find that ancestor, if it doesn't
exist, then it places itself relative to the body number four checking here in the indexation. Mel, how many answers there's does? This span has what has the first one? The parent
with the class of number two. There it has the Dave, which is the second one. And then, since none of them have position relative that it looks for the body. Now you don't believe me. Let's test it up. So here
we go in the right top. Since again, these are properties for the manipulation of the position on, Let's say for the top is gonna be here because we can have any kind of value on. We can also add zero
So let's say top zero on right is also gonna be zero. And let's see what's gonna happen on what happened. Well, the absolute special. So the special class way of position
absolute moved all the way to the top right corner off the body. Because, like I said, if there's gonna not gonna be an ancestor, that basically is gonna work as a position relative
than we're not gonna be able to capture that you want me to show you. OK, so you think the accession email I had position number two more class number two for the program. If we're gonna head over back to the CSS
and if we're going right position and in this case, this is gonna be relative noticed what's gonna happen? So now this span with a class of special is going to be sitting in the same position with
position Absolute on top, Right Corner 06 However, this is gonna happen within this paragraph. We have a glass of to and the reason for that, because we added this class of relative
where I'm sorry we added the position of relative. Now what's gonna happen if I'm going to remove it? again, It's gonna go back to the body. Well, we can also test it out under there. Let's do the same thing. We're going to say that the position is not
gonna be standard instead of a little gonna change it. I'm always going to say that this is gonna be reelected. So now this is sitting 06 However, within the deaf. No, nothing is gonna happen
if we're gonna place here the position relative and one because what we need is the actual ancestor. This case, this is just gonna be a sibling for the class of number two program. This is not gonna be an answer. State
afford his classes special. So that's the reason where we never replaced something with a position absolute. If we don't want it to be placed relative, Mahdi, we need to
have some kind of parent element Orhan sister Element that's gonna have a class off relative where I'm sorry the position of relative on just to show you that we can actually place it in the body
again, whatever we would like. First of all, let me change it that are no 50% here, let's say 50% up on 50% bottom or I'm sorry. Right. So this is gonna place
it somewhere here on you can see that there's one thing missing on that One thing is the fact that we haven't looked at a transformed property yet. And we were gonna look sooner, because at the moment you can say, Well, it's
technically not sitting in the center. That is correct, because we would need to shift a little bit the position of this element. However, this is close enough for the center for us, just to show you that
we can use any kind of values. No, they're just be percentages were just gonna be pixel again, really? Anything you would like. And then, like this time, I could just remove the relative and you'll see that this is
gonna be sitting pretty much all the way in the center here off the body, because again, there is no ancestor that does have the specious relative. So this is not placed relative
to those ancestors Now, one thing, though, in the next video are gonna be looking at position fixed in this case, if you place it here with this position, top not say 50 50. This is gonna
disappear as we're scrolling. So if we're gonna be adding more elements here and as it was gonna be scrolling down this element with a glass of special, he is actually gonna disappear as we scrolling. So
it's gonna be scalable. How are we have positioned fixed? What's gonna happen is that the element is going to stay. So even though we're placing right now relative to the body, this is not going to stay on the page
as we're scrolling down. Last but not least, we have position fixed, which in a lot of cases, were used for navigation buttons or maybe for navigations. Again, It's not exclusive
, but that's probably we're going to see the most on four days. We're gonna head over back to indexation email, Then I'm gonna add, I don't know, some more paragraph. We had massive amount of text just because we would need
to scroll. So it's a paragraph on, I don't know. 506 words is gonna be here. Massive paragraph, and then at the very bottom. Just to show you that this is actually working, we're going to create a button. Now
the button is gonna be very simple again. Whatever button type is gonna be button or the type. And here we can just say now, But again, this is not going to be really now, Button. But it's not
just going to do the job. I'm going to save it. There's gonna be my now button, and this is You know what? This is not actually big enough cause I'm not gonna do any kind of scrolling here, So let's do one more thing. What's write
another paragraph in this case? What's try? Maybe 4 5060 words. Well, Laura m. And for some reason, I cannot write it. So we're gonna test it for 5060 words
. We're going to save it. No. What happens? Well, nothing happens. Really? Because again, let on. So now I refreshed. And now it's working. So have long, long, long text here. Hopefully, you can see that I'm doing a lot of schooling
, right? And all the way in the bottom. I have this for now. Button all the way in the bottom. Okay, Now, what I would like to is to show you how the position fix is gonna work. So I'm gonna head
over again and I don't really need this text, Meaning I could head over back the styles that only to screw up in his name. L and I would like to first of all, change the comment. This is gonna be position
fixed. And now let's work with our button. So here, let's say all the way and book top, we're gonna have a button on. And when do we can we'll have background, I don't know. It's gonna be read, so sure enough
, it's gonna be read. The Foncier is gonna be bigger just so we can see what's happening. So 40 pixels hand maybe. Let's add the coloring off white, not counter reset
. I don't want that color white people. This is what we want. So this would be our number. Now we can click this obviously all day long, and the thing is gonna happen because we haven't hooked up the job
script. But for this we just need position fix, and what I would like to do is set it up here all the way in the top. And as I'm scrolling, it should be saying on four days we have position on
, we have position fixed now the way the position fixed is gonna work is this is gonna be set relative, but in this case, this would be set relative to the actual document. So in the beginning noticed
the total disappeared. So we have position fix, but we cannot find our button. And as you're scrolling down, it's not their as you're scrolling up, it's also not there, um, nor again to
see if we would need to set it relative. Now, in this case, we're selling relative this document, and as we're gonna be scrolling, it's gonna be sitting here fixed. That's the reason why it has named
position fixed. So I would say here 06 1st, let's say right, it's also gonna be zero and what we have now. I have my never but says I'm scrolling up and down. Then this is gonna be
sitting and again we can see the nap. Now, I'm not gonna show you the other properties with values we have top right, left bottom. I mean, you can explore that on your own, but
in general terms, this is how they position fixed with work. Where if you said something with position fixed, it's gonna be relative right now to the document. So all the documented we're working
on but as you're scrolling, is going to stay in that position. Excellent. Our CSS journey finally has led us to media queries on the reason why media queries are so so cool
in the CSS is because they allow us to work with responsive design. And in a nutshell, they allow us to style elements depending on the screen signs, so we can have different styles
on different screen sizes. On with the project, there's obviously going to be more complicated examples with column sizes on all kinds of things. How are for now? I'll just want to show you the basics example
where there's gonna be a div and we're just gonna work with some properties now with media queries we're gonna be working with Men with and Max with and again rule of thumb would be the men with is going to
be starting from. So just remember this on the max would be up to, and in general we're gonna do a mobile first, where we're gonna start all our styling from the small screen, and then we're gonna be adding
the media queries as our screen size gets bigger because that would be probably easier than working with the next stop on going the opposite direction. But as always, we're going to see all this
throughout this example On in the indexation email again, we're gonna do a very simple one. Gonna say there's gonna be Div We can maybe add this again some class that is live. Let's call this a battery
on then within the heading one we're gonna say hello, world. Uh, I'm learning learning CSS learning CSS once
this is gonna be saved I mean, obviously my writing at the moment of serious But maybe we can fix this by adding Ling, this Maybe this is gonna be a little bit better. More We can just have detected capitalized
that we already have learned on once we had over back to the CSS we can start styling Well, what do some again awful examples with colors we're gonna right over here Body is
gonna be, let's say, background yellow again just so you can be mad at me on then, once we have the background yellow how we're gonna go with the banner. So the day of that has a class that banner and
I would like to add a I don't know, background of blue. No, this is gonna be my choice. No eyes. But at least I would like to head over to having one. We know that we can use the element selector on Let's a
color white on text. Like I said, let's do not text the line where you know what, Maybe let's test it out Next center. Then we can do text decoration
on that. Maybe an underlying as well as we have an option off text on then. Here I would like to work. Not with decoration, not with aligning, not with shadows
. In fact, I would want to work with text, text, text, text, text, text transform. Sorry. Ah, and that we're gonna be Capitalization. This is how this text is gonna look like. And
this screen size? No, The thing is, we haven't added immediate work. So what's happening is and I'm going to show you right now on a bigger screen that regardless of the screen size, this is our webpage is gonna look like and
let's say we decide that. Okay, This is perfect for mobile view. So once the screen some of the small. This is awesome. However, as the screen size gets bigger, I would like to
change some things around. I don't think that my users would like the yellow color and maybe some other properties. Okay, so how do we do that while working with media queries? This in tax would be like this. We need to have
the ad and then we're looking for media now. Need to write media on. Then we write screen. Now, it is important this in texture because if you're gonna make some kind of small
, even syntactical letter your media queries not gonna work on, Maybe if I were going to remember, I'm going to show you this once we set up the media query, but even the smallest space is gonna matter. I'm
trust me because I'm getting questions already on the course, so yeah, this is happening. So you need to be kind of very careful about not that mean your site is gonna break is just your media queries not gonna work. So
here we're looking for men with on That would be the syntax on. Now we can use whatever values you would want Now, in my case, I'm going to use pixels. But again, remember, you can use our PM's if you want or anything
. Like like you would like on Let's say here, 5 76 So what I'm saying is, starting from some 5 76 there is gonna be some kind of rules now. They could be different rules. They
can be the same properties with different values. This is really up to you. So let's start here. Let's say body. So starting from 5 76 what is gonna happen to the body? Well, designer suggests me
that the body shouldn't be background. Right. Okay, that's a good start. Then I'm gonna be looking for a different background for the main, so I'm gonna say nothing. Main Sorry, banner. So I'm gonna write for the banner. We would want background
. I'm let's say yellow, So I'm gonna kind of not flip it technically because this is our label. And then for the heading one. This is where I would like to have some more styles. So I'm going to stay here. I don't know. Color
is gonna be black on that. I'm gonna be looking for the font size so fun size is gonna be out of no. Ah, 60 pixels. Basically, this is gonna be massive. Okay? We don't see anything. There's no changes
. Yeah, but the thing is, we are not passed the 5 76 because again, when we need to remember is that this notation means that starting from that screen size on since I don't
want to mess up this view, we're gonna head over again to the bigger browser. And you can already see the changes. No, when the changes are happening. Well, we can see that once the screen size is less than 5 76
the moment we're gonna get past 5 76 then we're gonna be getting new stuff. Now you want to see it a little bit more We can do. Obviously has always our development ALS on what happens here
on the right hand corner. You are probably seeing here the actual with of the screen. Now, what's happening here? This is saying 5 76 now, the reason why this is happening, because
obviously I have zoomed in here because I already have set up my resume. So if I'm gonna set my zoom to Let's say 106 like it normally would be him just for tutorial. I think
it's easier if we're gonna go actually again, back to develop portals. You'll see that this is actually happening from 5 76 with me again. Make the smaller then we can do. And this is not what I wanted to
dio, Um, my apologies. We would need to go to 1 27 Then I'm going to open up my developer tools, and then we can start looking here. That's starting from 5 76 The
changes are gonna happen. Well, there's actually a little bit better way in developer tools, so we can notice that. So let me first Magnus again. Probably bigger on. You know what? I can just make this
1 May be smaller on. Do you know what? What I would want? Well, here I would like to zoom in. I'm not over here, but in actual document. So it's zoom into 206 then in the developer tools, notice
what we're gonna have. So we're gonna have the little thing where we could be looking at the screen sizes? No, What I have read I have the width of 406 and then off height of 509. No, if
I'm gonna be expanding this, check it out. So starting from 5 76 was gonna happen. We're gonna see that we're gonna have our changes. So those are the kind of two things that, if you would need to know that within
the developer tools, if you want to check it out on different screen sizes, you have this option. You don't have to do the normal way. How are Even if you're not doing this with screen sizes, you're still gonna be able
to see just gonna be hard to see, because is gonna be probably written in a small tent or something like this. Now back to the media queries. You know what? Let me just close the verbal tours and let's take for
this one now on. Like I said within the media query, if I'm not adding this text decoration, underline If I'm not overriding this in 5 76 what happens is
that the underlying still state. So even though I said that starting from 5 76 I would want some different property values on the heading one, because I didn't
have this text decoration other line here, This is the reason why it still stays on also have an option of adding the new property. However, this new property with 60 pixels is only gonna work
from that 5 76 the moment we're gonna be again back to the small screen. This is not gonna work now. We also have an option of adding as many media queries would like. So how this is gonna work
? Well, you just copy and paste int. And you know what? Before we do, let me just do a little bit off undoing. Let me show you where would be the mistake. So what if I'm gonna do it like this? What I'm going to say
, media screen on, then in between the end on the actual parentheses. I'm not gonna leave any kind of space. Do you think the media query is gonna work? Or remember what I told you is that even
the smallest mistake is gonna make that big difference. Now check this out. It doesn't matter how big the screen size gets the media queries not working and weaken refresh all day long on this is not gonna
change on The reason for that is because the smallest syntax error in this case, even a simple is just leaving on this place on pretty much everything is gonna be messed up. Now, I
can tell you right away my biggest issue is always writing something like this. So I do it something like this and that I'm looking for three days. Where is my B A query? And I'd understand whether it's a browser school or
anything like that, because obviously, my spelling is not the best. So I always have issues with the with. That's just something from my book to let you know to maybe you so you can avoid it on
. Now let's go back and let's say add another one. And now this is gonna be the kicker where even this is gonna be starting from men with 5 76 In this case, I obviously would want to have some
bigger screen size. So let's say this is not gonna be seven. I'm sorry. 5 76 we're gonna say 7 68 So once we get to 7 68 then we're gonna flip it around again. So here
we can do green again. for the body. The background for the banner is gonna be blue again. Ah, the color I don't know Could be read, read And maybe let's add some
Another property here. But I'm just thinking what kind of property I could add with a text. Maybe. Let's do text the line on not center we can do Maybe right. And that's gonna work out or
you know it even more fun one with at a phone family off Perdana. So the moment we're gonna get to 7 68 then we're gonna get over Don, let me double check whether I corrected my mistakes
that I did it on purpose. Otherwise, this is obviously I'm gonna work on. We're gonna head over right now to the bigger browser window. So we have less than 5 76 the moment we get past 5 76 and obviously
again, in my case, 85 zoomed in. This is obviously going to be on a bigger screen size. But as I came going, notice what happens the moment we get to 7 76 I have all
kinds of things happening here. I have done. I have text right on. I have the backgrounds and everything. All that on this is again to show you that this is how we would work with media queries
again. Very, very basic example. Throughout the projects, we're gonna be using a lot more different properties on this is gonna look much better, but the general idea would be like this. Now, we also have
an option of Max with no for the max with Let me just flip this around. So first of all, I'm just gonna comment this out, and then what we would want is the same syntax how we're gonna right
Max with now how the max with is gonna work. Well, the Max with is saying up to So we technically flip this around since we already had here the
rules, whatever the CSS properties and values we are saying here, up to this 5 76 we were gonna have these values. So these are gonna be the values don't be shown. However, if
we're gonna get past 5 76 notice what happened. So these are original styles that we wrote. So what we're saying here is up to the 5 76 then we're gonna go back to whatever styles
we wrote over here. Now, one thing that we need to be careful with Max with is that we can easily overwrite this. So if I'm gonna come in this out again and if I'm going to say Max with from 7 68
and again, let me select this here. Let's say Max on this is not what I wanted to dio with. Same. Relax with No. Once I write 7 68 what do you think is gonna happen right now? I'm
writing here up to 5 76 then I have another Max with 7 68 So if I'm writing here up to 7 68 do you think which style is gonna be shown on
the screen or render in the browser? Well, we can already see him right inside. That this is gonna be this 7 68 And again, the reasoning for that would be that we're saying Max with 45
76 but 7 68 includes this. So we're overriding in any way what we're saying is okay. Yeah, You said 5 76 But what I'm saying is that I would like to have
the 7 68 But again, the interesting thing over here is, even if I'm gonna change it here on, if I'm going to say I don't know 40 pixels, I'm still gonna be getting this value. So even though
I'm writing here 7 68 I'm overriding this. I don't know the font size, right, so that's what's happening. But let's test it out with some kind of property that maybe is not affected in the banner
. Now, we already know the border radius, border, radius, hand That could be an unknown 20 pixels. No one's. I say with this is what happens. So that banner, even though it is Max with
up to 5 76 we're still getting this right now, the border radius because we're not overriding it over here. So this is gonna happen with properties that we overriding on. This is the
case where you need to be really careful. So if you're gonna have some kind of properties here that you're not overriding this 7 68 then they're obviously still gonna be shown, so that's something
that you need to pay attention to. Another interesting doozy is a Z index in the CSS on. What we're gonna do is we're gonna set up some example with some images just
so we can see a little bit better on four days. You know what I will going to get her of all this mumbo jumbo that we had before in the cirrhosis four star going to save it on in the indexation email
. We were going to create maybe the same thing. We can leave the Dev, but within the Dev, we're gonna have some images. Now, we're going to start with small one first and it doesn't really matter because we're gonna be
changing the sizes on. Let's say here, I'm gonna be looking for the image. Now I'm going to start with small one so I can just say small J Peg and let me out the class because we will gonna be adding some
changes individually by each of the images. So let's copy and paste it. First of all, let's say class of number two and we're gonna be locked in four class and number three Ah, what else
we can have. Okay, so we have small. We obviously also want the big one. So I'm gonna say Big J peg. And then let's look for the folder and again, just for simple reason that I would want them to be different. And
then, you know, this was obviously enough in a folder between images. And then we're looking for folder image. First things first we will need to fix. Obviously the withs here the heights are just massive. So let's
say for all the images I would like to have, I don't know with off 206 pixels, let's try it out with 206 pixels and right away the height also for 206 pixels
, and we'll see what happens. So 208 106 on this is Obviously I mess up is not what I want. Let's go back over here and let's save it. And now we have 206 by 206. So far
, so good. Um, you know what? Maybe it's not so far so good, because let's do maybe 106 pixels, because that way this is gonna look a little bit more decent. It's okay. 106 by hundreds. Now
, this is gonna look good. Um, what else I would like? Well, for now, let's just work with the Div. Let's say for the day of or maybe let's a banner. Since we have the class authority, I would want to have some margin
. Now, the margins are gonna be, like 20 pixels around, so there's gonna be some margin on I would like to add some with What's a 70 view with? No, it's gonna be my with
as well as some height with some I don't know, 70 viewers. So 70 view hurts when save it. So this would be men live and let me add the border right now on for the border
, I would like to add, I don't know, five pixels, so
solid on. Let's go with the red. So something like this just so we can see where the Davis actually sitting. Excellent. You know what, though? One thing missing we can maybe do with
off little bit whiter. So this is going to look a little bit better now. What? Well, now let's test it out. Something else we're gonna say position. And since we already have covered position absolute, let's see how this is gonna
look like. So what I'm saying for old images, no gonna have the position absolute. And again, we have already covered this. So now they're just sitting here now. We haven't added position relative yet, so that's maybe something
we should do because we know that we have ancestor on 40 answers there. We would like to have position relative on at the moment. What I would like is to control them one by one. So since I have a class is
there is gonna be the image with a class of one on, then image with obviously class of 213 And let's just first start by positioning them. So for the image number one, I'm going to say top is gonna
be zero on left is gonna be zero. Then what else we're gonna have? No, let's just copy and paste it. I would say two and three on then. Also here we would need to change different classes
. Then here, organ right number three and then here are gonna have different positions. So let's say, for number two, I would 1 10% 10% from the top 10 person from the left, same thing
Or here can do 10% from the left on. You know what for this guy? Maybe 20% from up on 20% from the left. On the moment we say
what happens? Well, we're noticing that we're having the images. We have the image number one, then the image number two on the magic number three on. As we're looking at it, we can see that the third one
is closer to us now. The reason for that is very simple, because this was the third image. But this would be the easy next that were controlling with I'm sorry. The Z axis that were controlling
would seen on the reason why the third one is gonna be the closer because the actual image was the third in line on the first one Waas further away or is further
away because it was first one in the line. So how we could change that? Well, we know that we have the option of working with Z Index that would control this Z axis on
. Why don't we test it up? Why don't we have a look of how this is gonna work? So let's say for number one, we would want to work with the next No. One thing that I would need to let you know right away is that
with the index automatically, you're gonna be getting zero, so all of them, by default, are gonna have zero. So even though I'm gonna add for the 1st 10 nothing is gonna change because the rest
of them also right away of the Z next of zero. So instead of what I would like to do, either I need to go bigger new zero. So in my case, I could go toe one on. Check this out. Now
, my first one is actually closer to us because we increase this zine next value on the Z next property war. We could do something like this if we know that all of them
are by default, zero. In a way, it doesn't really matter. I can just say that this was going to stay zero, which again would be the default on. Then we can say See next, negative one. So that would be for the
this guy on, then, For the third one, this is gonna be seen. Next number two, So is the index, and we can just go negative. Now, what do we see? We see that the first one. Even though they shouldn't be like that
, normally he is displayed closer to us. Then the second one is further a little bit away on the third one were controlling here with the next of negative too. So this one is
further and further away. And like I said, even if I'm gonna come on the sell by default, this is how it works with Z next zero. So that's that's the reason why this is gonna be displayed closer. Now we're gonna have all
kinds of values here. It doesn't really matter. You can write something like this 999. As long as this value on Obviously, this is the case. If you want to place this one behind the element
number two is more negative than this guy. So instead, if I'm gonna write, let's say 909 on this one, we're gonna say 910. Then you can already guess what's
gonna happen. So now the third image is gonna be displayed closer to us than the one that is number two. Because we changed the Z index values. However, there is one kicker about
dizzy next, and that is the simple fact that it will only gonna work if you're gonna have position, relative or position. Absolute meaning, It's not gonna work with position static. So let's
have a look at how this is gonna work on in our case, what we could do. Well, we're gonna go back again to negative one as well as negative, too. Let's do it. Something like this, and this would be no good. Have to
. You can save it. And you know what? Maybe let's flip it around and let's say that we would want I don't know, to be shown. Okay, So how this is gonna work? Well, we can do I don't know position
static. Right? Because we added the port. All the images. We added this position. Absolute. So what if why don't we go back? And why don't we say that Ford and number two, we would like to add position static
. Okay, so far, so good. So this image is still gonna be in front. But then what's in this case? We're gonna change this, and we're going to say that you know what? The Z next is not gonna be negative, but
instead we're gonna go with a positive on. We're also gonna go with this guy being positive so we can do something like this. So now again, we have pretty much the default look like we've had anyway. But you know what I would
say? I don't like this. Even though I still have the static one. I would like to have dizzy Index. In my case, I'm going to say Zine next is gonna be 109 Just so I'm making sure that this would be bigger than the previous
two. And nothing changes the moment we save it because it's not gonna work home the static one so we cannot do the static one with a Z Index. However, if we're going to change this one to relative, obviously
this is gonna be again in front because we can use it with relative as well as well, Absolutely. All right, we have covered position. Absolute. We have covered Z index
. So I think this would be a great time to look into pseudo elements before and after. In every practical case, Suitor elements style, specific parts of the element like, for example
, in the case of before and after you guessed it before and after the element. But what's more cool, we can insert HTML dynamically from our CSS, essentially allowing us to avoid
extra market. Don't believe me. Why don't we take a look? And by the way, this might be a longer example, because we were going to cover multiple other things as well, like smaller things, but still
important. Ah, first and foremost, I would like to get her of the old the old stuff. I'm going to say all of you guys gone disappear. We'll head over back to indexation amount. We're gonna
do a little bit of spring cleaning, too. We're going to say that in the annexation amount, we would just want first of all, one paragraph. That's it. Nothing really special. One paragraph
on the way. I hear. Let's write that on him before and after their a pseudo pseudo l a man's just like the video name. Let's save it on
. We have the program. Now, if I'm gonna head over back to the CSS, I can first very start very simply by saying that be. And now I'm gonna have the colon. Now what you're going to see maybe
in older syntax is something like this where people just wrote, Ah, the name of the element because we were gonna be inserting before or after the paragraph and then one. Colin, how are you? Should probably
stick with a CSS three syntax. Were you adding to Collins again? You'll see one colon and technically, that is correct. But I would suggest working with two columns and here we're going to write the
first one. The pseudo element beef war on what's happening next on, Nothing is happening technically next, But we always need to have the content, so the content property should be always
there, and I'm gonna show you example what happens if we don't add it, But first logistic content. Then we have the colon. And now what we would like to right over here. Well, let's say I'm gonna right over here. Hello
? And I'm gonna add the space on. Check this out. Now, The moment we're gonna save the CSS, we'll see the hell over here. So that's really neat about the competent that this is very much padding the
content in our HTML. So we didn't need to have this conference. Don't believe me. You can head over back to our brother tools. We can see the inspection on. Then, as I'm looking at my body
on, I don't I mean, just can say for now I think it's gonna be fine, But if I'm looking at the paragraph notice having to do before we didn't add it here as the markup in the HTML, how
are we are able to do that from our CSS, which is really, really cool again. Very basic example right now. But we can do a lot of interesting features using this No good. What else
we can do? Well, we can add whatever CSS we would like order. So I can say fund. Let's say wait is gonna be bold. Ah, Then we could be looking for a farm size Sercan say found size
Ah, to Ari EMS or something like this. So very, very massive text as well as maybe let's add color so the color can be read and I can go on and on and on. I'm actually we
were going to do that because we're gonna be looking at a little bit more sophisticated examples. But to understand the basic idea, we can add some kind of content before and after the
content of the programme. Now, that is important, because if we're looking at the actual browser tools, we see that this is before and after the conference, and this is gonna become important once we're gonna talk about
images. So just please remember that now. Okay, what we have next Well, let's look at the after so again, these impacts is gonna be exactly the same on why don't we start the same way where we just look
at the content property? So I'm going to say content on in this case, we're just gonna right after the morning we say what we noticed the little after, so we know that this is gonna be working. But what if I would want to insert
some kind of box here? Well, at the moment everything is happening in line. We're seeing that whatever content we were adding, this was happily happening in line and that is happening by default. What if What if I
would copy and paste them on? Let's add it over here to on notice. How is that? This is gonna be right now on the second line because there's more text. But I can bring it back to the one line because again, this
is all in line happening. But what we can do is we can do this is display Block second said like this instead of display in line, I could just change this weaken, do this
play block text is going to be read. But we can add Let's a background, which is gonna be black. And what happens now will we added the content in before and after
the paragraph. But we can add it as a block so I can do the same thing that we're here on. We can copy and paste it on short enough. What's gonna happen is that I'm gonna have my paragraph, But before and after
the content of the paragraph, I'm gonna have my suit elements on as you're looking at your like. OK, but what if I don't want to text? What if let's say we would want some kind of box e don't know. Let's
try it out So we can say we're here like this. So I'm gonna delete everything that we had here on. We're going to say, Display, this is gonna be this play block. Why don't we get rid of the text? Because, let's say we would
just want simple box on what we will cannot over here. Well, we can do with maybe 50 pixels. Could do heart 50 pixels on weaken Do background. I don't
know Green. So something like this know what happens? Well, the block is displayed, so everything is working. Fine. But what if I decided? I say, Well, what is the point of this content if all I
want is here the book So technically I wanted content on Lee with Hello? Okay, that's just they wrote. I'm gonna come under self and sure enough, nothing of his display. And this is something that I want
you to take away that content property, even with an empty values required. So whenever you want to insert something, even though there's not gonna be text, you do need to have this property
with this kind of value. Simple enough. And typically, I could just stop here with this example and say that, OK, we covered everything that there was, at least at this point is before and after elements
. But I would like to make a little bit more interesting example where I would kind of want to show you that how we can use position absolute so we can use the Z index and more realistic scenario where you would
use this. Because at the moment you're probably looking at and you're like, OK, thanks for telling me. But that is probably the first and only time that I'm going to do that where in fact, you can use the before and after in
a lot of interesting cases. Now, enough of me yapping on let's head over to index html and we're gonna add one more thing. So we're gonna say here right after the paragraph. Now you can delete
this. You couldn't delete the HTML unsee. It says I'm gonna leave it just in case so you have it for your own explorations later on. But I'm going to say here, Div, and I'm gonna have damage
. Now, This is important. So make sure that you're adding the divan image because we were going to get over this image on just to give you a hint we're not gonna be able to add before and
after for the image. And again, we're gonna cover this in few seconds. But just make sure you have the div and you have the image on also do that because I would like to show you few other things how the image
is going to be interacting with this data and how we're going to use this later on. Um, let's start maybe with a I don't know what can do. Big a Majorcan do the small image you not now let's
do the big one because I do want to show you the actual responsive images. So at the moment, obviously this image is massive. Okay, we already knew that. So typically what we would do well
, gonna rush back to the CSS on. We're gonna right away Try to add whatever property where we would change the with so we could do something like this. We could say image is going to be
the with off. I don't know. Ah, 309 and then hope for the best. That image is gonna look like this. But while this works on, all this is fine. There is a better way what we're going to use whole
throughout. Probably the project will not every single case. But you understand the idea where I'm gonna first work with the deaf. So I'm gonna say that Dave is gonna have some kind of with
on in most cases that with is going to be responsive, and then the image is going to be set responsive to that death. Now, how does that work? While I conservative since I have the death and for the day
, I'm instead going to say with off, what's a 50 view with again? We already know this. This would be the percentages of the screen. And then let's adds a margin to it. Let's say margin
, 109 pixels, top bottom and auto left and right, so I know that I'm gonna have it here somewhere in the middle. Now, I also would like to add maybe a let's say border. So it's a border
to pick so solid just so you can see a few other things later on on solid. I don't know. I was always working on gold with red. No. Okay, so we're getting somewhere, so we have the right
now the with oven image with something 309 on Dave is actually responsive because it is sitting in centre. However, what's happening is you see that the image obviously doesn't
fit here. So what we can do is with an image. So since this is already responsive, we can add the 109%. So what's happening right now is the image is going to be responsive, depending
on a div. Meaning as I'm gonna increase the size off the Dev. Also, my image isn't gonna increase because I already set this up with 109 percent. So if we're gonna
be creating some kind of column layouts or anything like that, this is exactly the syntax we're gonna be using. What are you noticing, though, is that even though the Dave covers nicely left and right and
top, there's this space in the bottom and you might be tempted to say, Well, OK, so I had the with on me at the height on hopefully for the best. Everything is gonna work out on
the moment we say with nothing changes on the North to get rid of this annoying space in between let's say what you're gonna have in the Dev as well as the image we're gonna have to make their
display property. And we're gonna straight display, not in line, but we're gonna have to display block. And this has nothing to do with before and after pseudo elements. This has everything to do with how
we're gonna be later on working with a div. An image again, Syntax would be that border. Let's say some kind of column layout that Dave is going to be responsive than for the day
if I don't think we're gonna be adding born each and every time. But we're going to be adding the image within the Dev, and then the image is going to be responsive, depending on the with off the actual div
as well as we're gonna set it as display block. Now, we definitely don't have to do it. We could have avoided that. But by showing you this, I believe that I'm going to save you a little bit of time. Because
as you're going to be working with CSS eventually organized some kind of paragraph. Let's say hello there or something like this. And now for sure you're gonna have some kind of
input? Not obviously. I'm going in my paragraph right now because I already have selected all the paragraphs. Let me fix this. Let's say there's gonna be heading one. And now you're gonna be able to style actually
on the basic selection instead of what would happen if you're gonna remove this player bark What you're gonna see there's gonna be this extra margin of the extra space, and you're gonna be
sometimes really annoyed were like, Listen, I'm styling this left and right how I would want But this is not working. So in order to get rid of this annoying default margin that you're getting
again, we would just need to use display on this play block. Got nothing to do with the other elements. Everything has to do with how we're gonna be later on working with our dibs on how they're
gonna be interacting with images within the there's no. Okay, so we have covered this one. Now, let me get her of this, um, border. We don't need this on. Now. Let's decide what we're gonna do. Well, we can
start working with before and after. Now, the temptation would be like this. We'll have the image. And I would like to insert something here in between the image so I could just say image before
and let's go for the content. And let's start very simply by internal content on the continent is gonna be Hello. Now, the moment we say that nothing happens on the reason why nothing happens because
image element and I'm really shortened this. There's obviously big theory behind this and all that. But in general terms, image is already the continent because again
, at me, repeat. And this was the wrong screen. If we're heading over again, Torre paragraph were noticing that this is placed before and after the content now image tag by itself, the image
is the content, so we're not gonna be able to do that. Long story short, you're not gonna be able to add before and after a four year image. This was one of the reasons why we added the Dev. Because we do want to work
with these two developments now in the process. I also showed you other things about how the deals with images are gonna be interacting. But in general, you're not gonna be successful. So
I mean, I can repeat this 10 more times, but this is not gonna work. So far, so good. We have covered this. What else we have left? Well, why don't we actually look how weaken insert the before and
after as we having the Devon image now for the divers is actually very simple. We do have the content. Don't say, Dave. Beef war low their body on what I would like or, you
know, I know I need to have the content. I'm gonna say content. And even though there's gonna be something else, I'm just gonna say the empty country. So what else? I would like you. Well, I'm gonna say border is gonna be two pixels
solid on. Let's go with great one. Okay, so for now, I'm having this guy, so there's some kind of border. Okay, Why don't I make this interesting. I know that there's someone with and there's
some kind of height, and I know that I have the deal. So why don't I make it do with to be not some pixels? Not some absolutely. But also 109% as well as why don't make it. Height
1%. So you just say here height 1%. Now, the moment we save it got nothing strangers. Okay? But we already know the position Absolute right. So I could just say position
is gonna be absolutely. And then let's see what happens. Not a relative, but absolute What happens? Well, now this is really big. Okay, Probably not something that we wanted. What
else we can do? Well, we remember that whenever we were working with position absolute, this was looking for one. Well, for the first ancestor that had what? The position of relative? Because otherwise
, this is looking for the body. That's the reason why this is so massive. So what would be the solution while we have the ancestor, the ancestor would be live in this case on what we can do is position
, and we're looking for relatives. Now what happens is that this is gonna be 109% now. You could might be arguing. You can say, Well, this is not really 109%. Because what's happening right now you cannot. You can see
these spaces here, and the reason for that again is going to be the border box so we can have block sizing are not box shadow. For some reason, this is popping up and we'll, by the way, color box shadow
. So that's gonna be covered. But if I'm gonna go with box sizing, notice this one. So right now I'm having the actual border box on. What's really cool is that this is exactly like
I would have him when I did. So you noticed the idea. So we added this two pixels and now this is gonna be 109% 109 height and then this way we can start actually doing some more interesting
things. Now, what would be the more interesting things? Well, we know that we can place the relative relative honestly to Arran sister on Also, we can use the negative values. So how
this is gonna work so I could say top is gonna be negative. 40 pixels. So we're gonna lift it up a little bit as well as left is gonna be negative. 40 pixels. So where this guy's gonna go
? Well, now, this is gonna be sitting right here. One annoying thing you might be looking at your like. Yeah, Well, okay. It looks kind of cool. But why is this covering the image right now? Well, you don't want
occurring image. What do we have? What property we had and I already actually showed you. So probably the easy answer would be, Well, Z index. Right. So what is the scene next? Right now for damage? Well
, that's actually automatically zero. But if I'm gonna make for this guy negative to what happens Well, now this is gonna be hidden behind the image. Okay. So far, so good. Why don't we take
a look at the after one on here? I'm going to do something like this. I'm going to say Dev after now. In this case, I would like to copy and paste a lot of them because I don't want to rewrite them on one by one
, someone's going to say something like this. And now let's change the values. So we have did before and after content. Is this going to stay the same empty? How old here? I'm not gonna be looking for the border. I'm going to say that there's
gonna be actual background, so not a border gray bod. We're gonna say background gray, So background is gonna be great. Now, what is gonna happen here? Well, for now, we're gonna cover everything because obviously
the within high, this 109% on. What we're doing is we're having this. Top is negative. 40. But I can change this. I can say Trump is gonna be negative. 20 left is gonna be negative. 20
as well as let's create a see you next. Little bit smaller. So this is should be sitting all the way in the back. Then we're gonna be having this image. Were not image basically block with background
gray on. Then we having our image. Okay, so this probably would be a little bit more interesting example where we can start using again the pseudo elements before and after
. Probably again. Not the biggest example that you could see in the world. Meaning you can use all kinds of other things with sue development. But at least this would give
you, like a little taste where it would be much more interesting than just displaying the block. Now we can add the block quotes. I mean again, there's tons of interesting things we can do. This is just, I think, in my
opinion, more interesting that when we didn't before and you don't have to do this along with me because we haven't covered a few of these properties. But just to show you how this was gonna interact with the page
, I'm gonna add some things we haven't covered yet. Again. You don't have to do them. I'm gonna leave them in your code so you can maybe actually explore them later on. But don't worry about
it again. We haven't covered them. But what I would like to do right now is as I'm hovering, I would want these guys to move. So how this is gonna work? Well, first of all, I'm gonna head over here again. We're gonna
cover. We're going to write something we haven't done yet, so I'm gonna say, as I'm hovering to Div, I would want before enough there to actually move something to say. After that, I'm going to copy and paste it on
. One thing we have covered. Oh, even though we don't know understand the selectors yet we have covered that we can actually group them together. Right? So I can say before and after
. So both of them are gonna be selected and what I would want. Well, I would want top of them and the zero left of them to be zero on. Yeah, that's gonna be it. So let me say this. Okay
, So what happens? So as I'm hovering, this is actually getting headed. No. We can also add a little bit of transition and again, please don't worry about the properties in the values. We will gonna cover them. As
also, don't worry about this selector. This is gonna be covered in few videos. But what I can do here is Aiken, say transition. I'm gonna do all 0.5 pixels on
. We're gonna write linear on along with me. Copy and paste this line of code. We're gonna head over here. Copy and paste it to on Check this out. So as I'm hovering now, this is happening over 0.5
seconds. Much more cooler example than what we looked at a simple block on simple text here on the top on In general terms, this is how you would use the before
and after elements. Just remember again you need to use the content you are not gonna be successful using with an image. And you're placing this before and after the actual content
off the element, not before and after the element. Hey, guys, before we deep down into CSS transitions, transformations and animations Elect, take a quick
pit stop and revisit selectors in CSS Some of you might be wondering Well, why are we just taking a quick pit stop and not full on to our stop? Well, here's the thing. Yes
, there are many more selectors in CSS. I am fully aware of that. But here's my argument. You want to use CSS to make cool stuff right? Websites, applications, and so on
and so forth on to tell me honestly, weaken easily do all those things just by using simple selectors. So I think it is much more productive that we cover Onley Basic selectors start
creating awesome stuff and then if we need to get something very specific done and we need a very specific CSS selected for that. We can always go back and learn that selector. So in this module
we were fresh on selector basics as well. Let's cover some other essential CSS electors. All right, why don't we start with the basics that we already have covered all throughout
the scores? But it's kind of important starting point. So let's say within the HTML were going to say there's gonna be hitting and I'm gonna purposely name them exactly the same just so we can kind
of see the difference. So I'm going to say there's going to be heading one with the 90 of heading and I'm gonna call this. I am Ah, I d heading so extremely simple. And we're gonna copy and paste
this line on. We're gonna write that not there's gonna be heading with an I. D. There's gonna be instead off glass and here we can just write a class heading again just so we can see that there's obviously
gonna be different with selections. And you know what? Last but not least, let's add a little tiny paragraph with a hello world in it. So far, so good. No, What's happening in the CSS
. We already know what basic selectors we can use. So let's say fired once. So like them all, I could just say selection of all on we're gonna be looking for the color red. All of them are going to be with
a color it We can also select the I d on dykan say 40 I d. I would want what first of all I would need to have the hashtag. Then I would need the name of the I d And then let's add maybe different
answers. 40 pixels is gonna be good enough. Then we have text transform property also, So let's transform it to upper case. So this is gonna be my application, dude on
. You know what? Let's change the color. So here we would like to change that Call it on. We already know that there is going to be specificity. So even though we selected all the elements on added color
red, since this is more specific, we are overriding the property value that we had with a less specific selector. Now we can also use the class and again this would be the difference
that if, with an I D we have a hashtag with class. We always need to use the duck on even though there named the same. They're gonna perform the completely opposite because we're gonna be adding different
styles here. So let's say phone size is gonna be instead 20 pixels. So this is gonna be simple than text transform. Gonna be looking forward to capitalization as well
as let's have the color green and again more specific. So we will gonna be overriding this. Whatever value we had with Universal selected no last minute. At least we have the element
selector wherever congested, right, a letter spacing is gonna be, I don't know, 20 pixels again basics that we have covered. But it's important to keep them in mind. So just
in case we wouldn't forget them Next one up, we have descendant and child commentators, and probably the toughest part he is gonna be for you listening how I struggled with
a descendant name and everything else is going to be very straightforward where Children can be descendants. But descendants are not gonna be Children. And I know it might be confusing a
little bit right now, but I think with an example this is all gonna make sense. So what I would like right now is head over back to my html on within the issue. Man, we're gonna create some dips. So it's
a first of all these suckers are going to go because that was the last video. And then within the next HTML, we're gonna do a little bit of cleaner on Let's say there's gonna be Do I'm over with the day of I
would like to have some class, So I'm gonna say that there's gonna be a head of class on a date on within the devil. Let's place, I don't know, heading one where we're going to say I am child and
descendent on. Like I said, watching me struggle with the name as well as the spelling is probably going to be very funny. Hopefully this is correct this inland and then we're
looking for another Dave on. Then we didn't this day again, we're going to do with the same thing we're gonna have the class of this is gonna be header. And for some reason I wrote mostly here had the year
, just not what I wanted on. Let's add on another on order list within the underworld list. There's gonna be list at him on here. We're gonna say, heading one where this is gonna be this and and
hopefully I'm spelling correctly. And now this is gonna be my list item. Now, where do those selectors come in play? Well, it's safe. I'm gonna write very generic. I'm gonna say, Dave on, Let me delete
this. Let's say Dev, I'm not there, Dev. So finally, def on. If I want to select all the heading ones, there are within the gives. I can just create a space. And now I'm
looking for my descendant. So everything that's gonna be as an ancestor where Dave is gonna be answers there 40 setting one. This is going to qualify as well as this guy's gonna qualify because both
of them are descendants. From the dip on, simple enough. We can just say I don't know, color. He is gonna be read now. What happens? Both of them turn color right now. The reason why this dot is not here, obviously
, because this is sitting within list item, so don't get confused. We're just talking reality heading once Right now. However, we also have an option off Children. So even one just select
the direct Children off the death. Well, the syntax would be like this. So in this case, we have the space. Then we're looking for the final bracket, and then we're gonna write heading one. So in this case
, we're gonna write color on in our case, it's gonna be below. So if I'm going to change this and if I'm gonna say Onley heading ones, there are direct Children off the div because you notice right now I have
the deal. But then I have the honor list and then list item. So the erect parent would be the list item in this case is not gonna be the actual dip. So that is the reason why all of
them have been selected with red. But then, if you're adding the child, then obviously only that direct child is gonna be stopped were not limited. Using the element selectors here, we could use the class
. That was the reason why we had at the class when I said header And again, let's say I'm gonna be selecting all the heading ones. Same thing again. I'm just looking for descendants on. We're gonna say color here
on the color is going to be green now. It's also happening is that this is going to be more specific now. You might argue with me. You could say, Well, yeah, just because you wrote it as a last true. Okay
, let's just get out. Let's put it on top on Once we say what happens? Still, everything is green on the reason for it again, I used the descendant selector so older, heading ones within the class
of header and we can use the I. D. Here we can use anything we would want again. We're just looking for descendants elected on However, though this is more specific. So even though we wrote this on the top
, and then we added two more rules directly looking for the classes more specific and that's the reason why we're overriding this. That's something to keep in mind that the specificity is gonna matter now
. I also condole. Let's say her on, then I can look forward elect child. So in this case, maybe, let's say, for the heading ones, there are direct Children off the class of header. I would want the color
to be purple now, what do you think is gonna happen? Well, I'm pretty sure only the first one is gonna be purple on and nutshell. This is that we can work descendant on child Combinator. Zor selectors
in CSS next one up, we have to suit elements which would be first line and first letter on just by looking at him, I think they were going to be much more straight forward
than the before and after. So the first one is gonna style. The first line on the second one is gonna work with first letter. As always, Let's get her of everything that we had in the previous
one. Save it in the next. This is gonna be very simple. Was gonna work with not a div matter. We're gonna have the paragraph, then the paragraph is gonna have internal or, um, 30 words something
like this when this is gonna be my paragraph, and then if we head over back to the CSS, you could just say paragraph and use the first line. So this is gonna style the first line. And in our case
, we can just say font Wait is gonna be Let's say, bold So now the wait is gonna be bold. How are if you would want the first letter to be bigger again? The same thing we're working with First letter
on, Let's say fun side is gonna be I don't know three r e m so as straightforward as it gets First line on first letter, Fresh after death we have pseudo classes
on the first one is gonna be the hover now with pseudo classes in general domain ideas like this. So as the element is gonna be changing some kind of state now we know, however, and this is very
simple. So as we were going to be hovering over the actual element, then something is going to change about that element. Now again, this could be anything with the sea assists on. We can apply
this to all the elements. Now, later on, we're gonna be looking at specifically the links. So those pseudo classes are gonna be specific. The links, But how we can use on everything on do you
don't want Why don't we make an example? So first let's get out of this conservative and in the indexation, Melican, maybe leave the paragraph again just to show that everything works on all of them. Let's
right. Maybe a div. Then with Dave at the class, just to show that this is gonna be one with the glasses, there's gonna be Header. I don't know within header rules is gonna have some kind of text as well
, maybe 10 letters, something like this. And then let's add a link. No, for the link again was gonna have a dummy nature of meaning. This is not gonna link anywhere on here. Open is going to say that
. I don't know. This is a link, something like this. And now let's decide what we're gonna do. So let's say that for the paragraph, I would want as I'm hovering to be a bigger phone size someone say paragraph
. But then here, we need to use the hover. So now we're hovering with this class, and this would be difference between the two dots that we used previously on Suter elements on with the classes. So
the classes This is just gonna be one set of Golan metal on here. We're gonna say as I'm hovering, I would want the phone size to be I don't know, 60 pixels in the Bangor. What's gonna happen as were hovering
ordering the mouse then, honestly, this is gonna be very big. Now I need to had over Back in. Maybe this wasn't the best example, because it's gonna be triggering over the place. So maybe let's change
it. I don't know, farmed. Okay, let's do the color is always a good escape. Could say color on, Let's say, read the NYSE. I'm gonna be hovering. The color of the paragraph
is obviously going to be ready. I also have the class so we can do the same thing with a class. So let's say for the header we're gonna be hovering and we can change the background. Teoh, I don't know
Blue as I'm hovering over notice. What happens also were not limited to again. One property with one value we can write that color is gonna be white here again, whatever CSS styles would want
to worry on, let's say as I'm hovering enough, I have the background that's gonna be blue on. The color is gonna be Wait, no last. But at least I do have the link. So let's say for the link there's
gonna be again. Hover says I'm hovering over Dooling. What should happen? I don't know. I'm going to say text decoration is gonna be known so only as I'm hovering than the Underline is going. Yeah. Now what happens
as I'm hovering over dealing, I have no underlying. So that's how we can work with hover pseudo class in the CSS. We have have a pseudo class selector. It was somewhat straightforward
. So on Lee, the changes were happening as were hovering over deal. However, with links, we have a little bit more state. So Lincoln be just general link than Lincoln be visited
. We can also hover over Dooling on the actively. So why don't we take a look again? Bye bye. You're gonna be gone on also within the annexation of Mel. What is gonna create bunch
of links? So with me first, delete all of them. Then let's say here again, this is gonna be just a general link. So what's right, General link, Then we're gonna copy and paste
it here. We're gonna right? I don't know a visited link. We can go with this. Could I just say visited? Is it that link? Only the second one. Then we have the active one on the
cover one. So for the hover one again, this is gonna be very simple. I'm just gonna say, however, although what's gonna happen is as we're having all of them you're always taking, I'm able to see anyway. But that is just a
side note and let's write with active one. So active link something like this. So here them were with Capital Letter and few of them was gonna
be with that lower case Lor. Now, this is again somewhat straightforward. Meaning only thing we need to do is just say that Let's say, would want to select all the links. So how gonna Right? Well
, we can just say that all the links that have bean on a page So let's say a link and then we're looking for something. It won't start very simply by color. Um, let's see, the color is gonna
be awkward. No, all my links are gonna have this color again. Very simple. Now, I also have option of visited because we can click on a link. So that way we're visiting dealing No, in order to do that was just
gonna say visit dead. So if we have clicked on a link. Let's say red. So something like this. Now I'm gonna head over to the second one to visit and one, but again, you can click on any link
what's gonna happen the moment we're gonna click on it, all of them are going to be read now. What is the reason why all of them are red? Because our atria interviewed he is here to national. So
we would want we wouldn't want this And wearing thing was gonna write http http Then again, we're gonna have to forward slashes. Let's say google dot com when the moment
going to save it. Noticed this is not visited like so just please remember, if you're gonna have multiple links that we're gonna be pointing to the same thing if you're gonna click on one of them. Obviously
, the same think is gonna happen. Now again, we here we have multiple options. If you don't like the fact that all of them technically have been visited could just change this around to Google. Just remember that the moment
we're going to click on one of the Googles, they're also gonna be visited. Let's say this okay, So this is gonna be visited. Link, Then what else we had. So we had a hover effect. So that was again for all of them. Obviously
, since we're gonna be able to hover Ah, in this case, I don't know color. And he's gonna be blue now what happens? So as I'm hovering over the link, obviously the color is gonna turn blue, even the one that has
visited Because again, this just shows that we have clicked on a link. No. Last but not least, we have the acting one, and the active one happens as we're clicking on the link, there's gonna be the split
second as we're clicking on the links, the link is active before, Technically, it says that it was visited. So four days, we could just say active can and I don't know, we can have the green one, and
this is where we're gonna be really have to pay attention, because this is going to change literally over the second. So as what happens is as I have a role here, and if I click on it, I mean, yeah, if
I'm holding the left key, then obviously we're gonna be able to see that this is not visited. You link it. This is not any more blue because when hovering So this would be the actor one. So that's where
we would use this pseudo class. A lecture on the moment I'm gonna let go off the actual housely left key. Then what happens is I'm visiting the Google first and foremost because this was the link
and now all of them are red. Now, the reason why this is red because we already clicked on it. But rest of them were Google anyway, So now all my links are showing has visited. Now this is in
general how we can use pseudo class electors with links more than its link visited hover, war active. We also have an option of using the route pseudo class selector
where we're styling the root element of the document, which in our case, is gonna be html document on right after bad. I can tell that this is probably gonna be used mostly for general
styles as well as we were going to use it with CSS variables that we haven't covered yet. Now how this is gonna work. Well, we're still let's get her of all this old garbage? Well, not really
garbage, but I just needed to use some kind of word. So let's get her of the old code than in the indexation. Mel, we're gonna I don't know, create heading one. That's not what I wanted to do
. So elected to lead them here on Let's start by heading one. So this is gonna be simple. Heading one heading one. Let's say I am heading on. Then let's have two paragraphs
now for the paragraphs that I would want to have two classes. So there's gonna be paragraph we have little room. So on 20 words as well as I would like to add the class now the glass is gonna be absolute
. Doesn't really matter how you call the class as long as you has always remember how to actually start within the CSS. Meaning you remember the name so you can access the class on here. Let's
say responsive. Then we're gonna have a look at what would be the difference within the root element. So far, so good. So we have all our html now for the root again. We're gonna do something like this
on the most basic way would be doing well. It's a background. He is going to be read. Now again, This is something we already have covered. So obviously, if we're selecting the HD melon
were saying that the background should be read. What happens is that since this is bring much the root of oral document just because we started this red, obviously, but now we're gonna have the background, right? So
far, so good. Very simple. Now, if this is annoying or can just comment this out, maybe some of you hate the red color, especially since it's for the whole background. But what is more interesting on what it would
be? The case is apart from CSS variables that we haven't covered. But we were gonna cover later and again, I'm will going to revisit the route because this we're gonna be setting up the variables. But where else
we can use the route? No, we can use it for general styles. So let's say that I would have a heading one, and the font size is here. I don't know. Could be anything as long as you're using the rgm
. So I'm just gonna say found size is going to be three are Diem's. So remember, this was responsive values. How old? They were responsive towards the route, so they
were responsive as the route was changing. Okay, what about the paragraph? That was absolute. Let's use, actually, the absolute values, which would be pixels, and you're gonna safe
on size off 20 pixels. Now, what also would write to do is for the responsive one. I have the same value just with R E m values. Because, remember, the whole idea was like this that
Juan R E m was actually 16 pixels. Correct? That was the default one coming from the browser. So this should be exactly the same. So the question here is for the responsive one
. If I'm gonna add, let's say 1.5. What is that gonna be? Well, if we do a little bit of math, we know in that 16 1.5, meaning this would be 24 cause
we had one full 16 and then we would add eight. So in that case, we would be getting exactly the same 24. Now, if you don't believe me, I think we can just check it out here in the browser and
we'll see that both of them are exactly the same. So where does the root element come in right now? Well, we already know that The reason why we're using the Ari EMS is that let's say, if the user would
like to change the font size, so if you use, it would be like, You know what? I don't like how this sponsor, let's say too big or too small, so the user can go always actually to
their settings on the way we go to the settings again, we click on this icon, then we're looking for the settings and then within the settings, we have the farm size. So what happens is if we're gonna change this, let's say to the very
large the text that was used with Ari EMS is gonna become very large. Don't believe me. Notice. This is a large already. We know this, but we cannot see technically
, that this was bigger than it used to be. How old we concede here would do paragraph where previously they were exactly the same because they were 24 pixels. The moment we change the settings
on a user because this is depending on the settings on the years are now This is getting much more bigger. OK, so that was something we already have covered. Let me put this back on the medium just so we can see that
again. Most of them are gonna be exactly the same. And now let's look at the root element. So what's happening is if we're gonna be styling something relative, the route, we can go back to the root and we can
change these settings. So let's say in this case, I was styling everything towards the route. So my heading one was three rd ems and obviously most likely you're gonna have your paragraphs that
are gonna be smaller. However, they were smaller relative to the root. So if I'm gonna make a change here off, let's say fun size on. If I'm going to start changing with the percentages
, if I'm going to say 109% nothing is gonna change because this is still going to mean 16 pixels. However, if we're gonna go 150 pixels, notice what happens? So now we're
increasing the value here by these 50% but this was a relative to the actual route. So everything that we're gonna change within this property in the root, what we're gonna have
is the response of values. But again, the hap salud one didn't change because absolute was just 24 pixels and I'm good to go. The relative one is the one that you can
say. Okay, this is gonna be three Ari ems so relative to the root. So if you're gonna be changing something to do it, let's say you can make the whole document whole webpage whole wherever application
. And at the end of the day, you can be like, Yeah, well, three Ari EMS is okay, and 1.5, but I would want to make it bigger so you can head over back to the root and you could just change these values, and then we're
gonna be affected all throughout the document where you use the responsive values that are related to the root. Hey, guys, in our next module will cover of transform, transition
and animation properties along with their supplementary properties in diseases. While these are definitely important topics, I'll try to keep example short and sweet, since I think
it is more important to spend time working with these particular properties in our project, where we can get a better understanding. How can they be used in the real world? Situations briefly
transformed property applies some type of transformation to the element the translational along X axes on y axis rotation scaling or skewing transition. Property
, on the other hand, is in charge of making state changes occurring over some period of time. So let's say we have her over the button on the background color of the button changes with
transition property we can control how long that stage change will accord. Animation property is very similar to the transition, with major difference being that were not limited
to just two points. Beginning on the end of the chain. Animation gives us many extra points where we can control how they change from one state to another. Takes place. We were gonna start
are transformed journey by looking at the translate. But before we do anything in the CSS, I would like to head over back to indexation email on here, like already. Usually we're gonna
create some Dave's, but we're not gonna place any content, which is going to say that the first one is gonna have class of one on. Then you probably guessed it here. We're gonna have glass and number two. Then we have
the third one with glass of number three. That's going to do with HTML on. Then we have the CSS well, in the CIA's this Let's just started by some journalists tiling. And let's say I don't know, with there's
gonna be 150 pixels. Hopefully, this is gonna look good. Not I'm going to change it than the height. Also, cousin be 150. Let's add height 150. And this is not what I wanted
. So this is gonna be the correct one. On what else? Well, we can also add maybe display not in line, but in line block. A little bit different is not gonna make this play block, which obviously
would be by default for the defense. But this is gonna be in landlocked. Okay, what is next? Well, weaken first ad, maybe some colors. So it's a background is gonna be read for number
one, and that's gonna be my live on. You know what? Look makeup in place that again. 123 as well as I would like to change these. So this guy's gonna be number two on for number three
? I don't know. Again, whatever colors you would like, I think I'm gonna go with my typical ones off. That's a green on. Then the last one is gonna be blue. So again with me. So, like this
sale here, I'm gonna be working with the bull. So nice. Three blocks. Maybe I'm gonna make this a little bit bigger because I would want them side by side and you'll see in the second one. Now, what is the situation
would translate. Well, first of all, let's get the property, which will gonna be trans form, so transformed property. But then, within the transform, you noticed that we're getting rotations
, the scaling as well as as we start scrolling down, we have the skew and translate now, four to translate. It's gonna be very interesting, because translate is gonna be to function now. What does that mean? Well, that means
that if we can get translate X, which is gonna work with the eggs erection, that and we have the why which is gonna work in the Y direction. And then we just have the plane. All translate. So let's
start with X now. Like I said, the X is gonna work with the X axis. So here I can write whatever rallies I was like, I can write pixels. If I want more, I can write percentages, not
just to show you how this is gonna work. I can just say I don't know, 20 pixels. Now, what's gonna happen is that the box is gonna move right now. 20 pixels to the right, because the value is positive. How old is we're gonna
change it. And if I'm gonna say negative 20 pixels, obviously this is gonna move negative. 20 pixels. In this case, though, the movement is gonna be to the left. So if we're adding the negative, this is gonna move
the left direction, however positive is going to move the right direction. So far, so good. No. We also have an option off 50% or I'm sorry percent, but we were gonna use 50%. Now
, how is that gonna look like one? Let's say we're gonna move it 50%. And obviously, since the value was positive again, we moved the right direction. Here's the kicker dough. 50% means 50%
off this. 150 pixels. Don't believe me. Well, let's look at the third one which was blue on. You saw that initially there Exactly in the same position. Now, if you didn't notice that
, then I could just come in this out and you can see that their city exactly where the other one was. Okay, what if I go over here and I do the same thing where I use the transform just
only with the pixels. So what happens is I can just say not 50% but let's say 75 pixels on you can see that 75 pixels would be exactly the half from
150. So that tells me that this 50% is going to reflect on the actual with off the L. So if I'm gonna change it here, let's say 309
pixels then are so this is gonna move way more. Well, maybe this was a little bit too drastic example. It's maybe go with 109 on. Then we can see that this is not gonna work exactly the same because
they're not gonna be in one line. But I hope you understood the idea where If I'm moving this to the right by 50% that is gonna mean exactly half off its with. And I can double
check that by moving the third guy. Exactly 75 pixels. And they were gonna match. Well, if we're looking at it, we see that there's gonna be translate X. Can we do translate wife? Well, I think
we can figure it out. So we have transform than four transformations weaken Do instead of X We're gonna do Why on here again, let's just it out first Black pixels. So if we're gonna say 30
pixels, man right away, let's do the negative. Now My box moved up because I went into negative direction. So if I'm gonna get rid of the negative one now, I see it went down
because we're moving the positive direction again. Very straightforward. You want to move it up? This is gonna have to be negative. You want to move it down, then this is gonna have to be positive. We also have an
option off, actually combining them both. So let me come in this out. Let me start a new one again. Transformed, translate. And then if I'm not adding extra. Why now? The first
value is gonna be X X is and the second one is gonna be y axis again and list amount of possibilities on. I don't think that there is a point to covering them just to show you how this is gonna work. So
let's say I would like to move this 20 pixels on the X direction and then in a 30 pixels in the Y direction. So what happens is that the box moved 20 pixels to the right
and then 30 pixels now, because we moved it obviously in the Y direction. If we want to move it, let's say a little bit more could do 209 pixels by 309 pixels. And then now the box
is gonna move 209 pixels, the right and then 309 pixels down again. We can use the percentages here. We can use the negative values on. I'll let you explore in more detail if you would like
to. But generally this is how we could work. We transform and translate function within the CSS next one up. We have the scale and you'll notice the a lot of things
that we already have a translate here is gonna be very relatable to the scale. Know what? Start maybe with the red one on, Let's use transform. And then we're gonna set it equal not to translate
, but we're gonna use the scale. No scale again is gonna have few options. We can have these k lex, and we have scale. Why as well as we have scale so that we can enter both
values for the X one on the white one. Now with the X was gonna happen is that if we're going to go past the value of one in the X direction, the element is gonna grow the X direction
. So let's say if I'm going to say to, then the element is going to get twice as big in the X direction notice it happens on the right hand side on on the left inside. However, if I'm gonna go less
than one, so let's say 0.1 now the element is going to be half the size, but the trimming is gonna happen on both sides. So not only let's say on one side, but the trimming
is gonna happen on the left hand side on the right hand side. So, no, this is gonna be half the size off the previous element. That would be the X direction. Obviously, we can do the same thing in the Y direction. Let me just
copy this on. Let's say for the number two number green one instead of next, we're gonna place why I noticed what happens. So now the element is gonna be half the size in
the Y direction. You want it twice as big. And again, I'm just using the round values. You can do something like this. So obviously this is just going to grow a little bit more than the normal one. But I'm just using
to just so he conceded for sure on the element is growing. Okay, so that would be the wife. Direction on self explanatory. We can use both values. So if I'm going to use the same thing here, and if I'm gonna copy
the transformation, I would say we're gonna have new one. Then this is gonna be scale, and I would like to I don't know, zoom it or I'm sorry that zoom it, make it smaller eggs direction. And why
direction This is the only thing we need to do. So now what happens is that this element is half the size X direction, as was my direction we wanted make it bigger, could make it 1.5
as well is here and now. Obviously, the element is gonna be bigger next direction. Why direction? Very, very straightforward. If you ever need to increase the size of the element X
or Y direction, you can just use scale. After that, we have the rotate, and I have to be right away, straight up honest with you, that with rotations, the X and Y directions are going
to be hard to see, especially as I'm showing this in the example. Now, what's gonna be easier to see is going to be rotate Z on. We're also gonna look at the shortcut. And that's the reason why I'm going to start
right away with our rotations, E because I think you're gonna be using that more often than just X and one now, how disease gonna work, right? And let's a first we're gonna be looking for information
on. We're working here with the second one, I believe right, that was the green one and then we have rotate and they were looking for to see now the way this is gonna work. If we were going to write some kind of degrees
once a 45 degrees, this is gonna be the easiest one to see because this is gonna be rotated right now on the Z axis. Very swift world. Very simple. So if I'm going to say 109 80
now, this is obviously gonna move under Navy on this. I was gonna be exactly the same like we had before, but let's say if we would wanna I don't know, go with 135
. Then again, this is gonna look exactly like the 45. You get an idea, we have 360 degrees, and then we can rotate de Helaman. However, we would like now how this is gonna go
with ex acts as an y axis, so here will have a transform our you know what? Before we actually cover the X and Y axes, you also want to say that this is gonna be exactly the same. So
if we're going, let's say copy and paste it the red one on change it around to. I don't know, 340 were going to get some kind of rotation because this would be the shorthand
. So we don't have to times e We can just say, OK, rotate on both of them would mean exactly the same thing. Uh, yeah, that is just gonna be side note. Hopefully you've got that. And then last but not
least, we're gonna be looking at both of them the x and Y on here. I would one transform that I'm looking for. Like I said already. Rotation on for rotation. I'm looking for
the X value on this case. You from going a little, let's say 20 degrees. Like I said, this is gonna be hard to see because what I'm doing as I'm rotating this X direction or
if I'm telling you that this is gonna be 90 degrees, we're not gonna be able to see that, because if we're looking at the X Plain Lang right now, we have rotated this exactly nine degrees
and this is gonna be hard to see now. We can also do the same thing. Let's say here, comment this out on we're going to do the Y direction. So it's do transform andan
rotate. Why direction again? This is gonna work exactly the same where, Let's say 20 degrees is gonna rotate it. So this is gonna be a little bit small on this moment already. Wide direction
because previously, remember, it got smaller in the X axis because we're flipping it around the exact Now we're flipping it around the y axis. This is the reason why 20 degrees is gonna make this smaller
here. Not from gonna go 40 degrees. This is gonna get even smaller. 60 degrees is going to something like this, even smaller. And then finally, again, If I want to flip it around, Aiken
do 90 degrees. And then my actually element is going totally disappear right now because we have rotated this 90 degrees. Since it is not our first rodeo, we're
recon. Guess off what the skew is going to do. Um, the fact that scares gonna have again the X direction in the Y direction as well as we can combine them both. So
I guess we're gonna do with simple one with number one on here. I would like to get to work with transform and on the right that I ask, you will get a first look at the X direction on
here again. We're gonna have to write degrees. So if we're gonna say 20 degrees, this is gonna screw it this way. It can also have the negative value on this is going to skew the other direction. No
, with me, copy and paste this. And let's say that I would like to have the skew wife or the second one on. Now, obviously, this is gonna be the Y plane that's being skewed. No, last
but not least, you already guessed that that we can do the both of them on Let's say here that we're gonna be looking for number three and that's not what I wanted to do. I didn't want assure you the bigger screen doesn't really matter
. We can see everything here in a smaller one on. Let's say if I'm gonna go negative 20 degrees or you know what, let's do 40 degrees and let you show you that if I'm not gonna add on, but then one
lead it If I'm not gonna add any kind of value in the Y direction, what happens is that this is going on. The only skew the extraction don't believe me. How? I can do the same thing here and now. As
you can see, both of them are exactly the same. How are if we're gonna have the second value here with degrees? This is also going to spin in the wind direction. So what's to start out with 20 degrees
on here? If they could have a look, then we see that this is gonna skewed both directions. The why direction has. Well, Azad direction has, um once we have the general idea
about the transformed property, we're gonna shift our attention to transition on. If in one sentence, I would need to answer you what is transition? That would be change happening
over some period of time and again, the example is gonna explain it much more better. But if I would have to give you once and the example, that would be a change over time. Now you'll notice also
that transition property is gonna be a lot similar, like we had with background, because this is gonna have quite a few of them on. Eventually we're gonna look at a shorthand on the set up
is gonna be exactly the same. We're gonna have three dibs on. Let's figure out one problem. Let's say that I have three Dave's. We already know how to use the hover pseudo selector on
As I'm hovering over those, there's I would like to change the color. So for now I have red, green and blue. But let's say for all the Dave's as I'm hovering and again, we would need to use the pseudo selector we would like
to change the background color on. Let's say background color is gonna be whatever you would like to be. In my case, I'm gonna go with Quarrel. So far, so good as I'm hovering more than lives, the color is
changing. How are you probably noticing that the colors changing instantly on while that might work. In some cases, you probably would want to happen exchange over
some period of time because I think it's gonna look smoother now. How do we do? First of all, let's just work. We have number three because I would still want you to see the other two where change is gonna happen instantly and let's
say for number three first we will need to start working with transition now for transition with first would need to say what kind of property? Well, is it this gonna be? I don't know. The font size is just
gonna be with or whatever. Well, in my case, I'm gonna say that transition property is going to be the background. So here, I'm gonna write Bank run. Okay. So far, so good. Okay, once we saved what happens, well, nothing
happens. We're still having this change instantly, because the second thing we will need to add is transition on. Then we're gonna be looking forward. Duration. So how long this transition
is going to take place? We can use the seconds we can use milliseconds. Normally, we're gonna settle for something like 0.3. But just because I would want you to see how this is happening, I'm gonna go
with quite big number, and this is gonna be four seconds. So as I'm hovering over what happens well, the color is changing. However, the colors changing over a period of
four seconds, not instantly liked with the rest of them. And this is something that we can deal with a transition property. Luckily, for us as we were working with transition probably were not limited to
only one property. So what if let's say for number three, the one that actually has a transition, I would like to add another thing and other property. We have a hover. Well, we have few options
. I can either add this property here for all of them. Since here, I'm just selecting all the dips more. We can be more precise than I can say. You know what? As I'm hovering over the three, I would like to change it on border
radius on. In this case, I would need to have my suit of selector. So I'm going to say, as them hovering over three, I would like to have border radius on. Let's say this is gonna be 50%. And again
, I would just like to pay attention to the fact that I could have added this to all of them. It's going to do exactly the same thing. The difference would be that this is gonna be applied to all the lives in this case, since
this is the only one we're using the transition property. That's the reason why I'm adding it specifically to hover off three. So as I'm hovering, What happened? What I see is that my
border, it is changes instantly, and the color is taking four seconds. Because for now, only thing would having his transition property on the name was background. So the way we're gonna do this is
we're gonna have a comma that will be this in text. And then we just need to again, right the property name. Now, our guys, this is gonna be border radius on. We also have an option off. Let's say what kind of duration
is gonna be for the second property. If we don't want it to be four seconds, we just need to again another their value in our case, we're gonna leave it for now. The same. So this would be four seconds on. This is gonna happen
the same way where the color is gonna take four seconds as well as the Borys. However he if working out here, I don't know. Two seconds. Then the radius is gonna happen in
two seconds and you can see still, that color is changing. So that would be the way how we can have multiple properties With our transition property stunning, we officially know the basics
and general idea behind transition. Why don't we take a look at the transition, the late property as well as how we can write a shorthand? Because otherwise you might find it annoying. If you're gonna have 50
properties, if you're gonna have to have to specifically name all of them in your position property. No, first and foremost, let's go with delay. Since I think this is gonna be asked trade forward as it
gets. So again, we're gonna write transition. So saying transition, where are you delay on, then we're saying for some kind of dealing. Well, I don't know how long you would like to wait. Do you want me
to talk for nothing for 10 seconds or let's say three seconds. Now, the moment we're gonna have this, what's gonna happen is that this is gonna take three seconds. So this would happen over three seconds. And
now only then the changes are going to take place. Now, as I'm hovering, I'm gonna wait, Wait, wait, wait, wait. And then after three seconds, my transition takes place again. Nothing really. To add as
straightforward as it gets. This is just going to delay your transition. So far, so good. Well, what about like I said, if this gets really annoying, if you have multiple properties that you would like to change over
here, do you think this is gonna be the best syntax where we just need to add the property? The duration delay on this is where the image comes into play. Meaning? Remember when we were covering the background
image? Eventually we came up with really neat and nifty syntax where we just wrote all our values so we can do something very similarly over here. First of all, let me delete this. Say that we're
gonna get rid of this. Then I also would like to probably get rid of this cover because otherwise this might be a little bit confusing to you. And let's say that we only gonna be working with our third year. Let's just leave the other two or
more on. We're gonna copy and paste it, and we're going to say that we're gonna be changing to things as were hovering border, radius and background. But what I would like to understand that we can add anything over here. As long as we're
following the proper Syntex Now, the properties intact would be like this. We're gonna first have the transition. Then we're gonna have to write the name off the transition. So let's say in our case or
I'm sorry, the name of the property, we're gonna write background so that that's gonna be our first thing, and then we're gonna be looking for how the transition is gonna take place. So how long the transition
duration? In our case, we're going to say, Well, this is gonna be three seconds and then we have an option of adding, if you would want to have some kind of dealing. So in my case, let's say I'm gonna be looking for five seconds
now the moment we're gonna save it. First of all, please understand that this is gonna be option. What you're really, really for sure need is gonna be in this three seconds. You know, I just to make it actually a little bit more understanding
. I'm gonna right away at it. And then what happens is that the background is gonna change place in three seconds. No, I'm still having my border radio, so maybe let me come in the South because this might be a little bit confusing
. So the background is gonna take change in three seconds again. Something really similar we already covered. But this would be the shorthand s. So far, so good. Then we have an optional one
on that is going to be how the transition is gonna take place. But we're gonna cover it at the next video. So for now, I'm just gonna leave this blank. But we also have an optional off delay. So let's say in
this case I'm riding the delay and that I'm saying that DeLay is gonna take two seconds. Now first, as I'm hovering, we're gonna wait for two seconds, and then the background is gonna be changing over the
period of three seconds. So far, so good. What else? Well, if I would want the border radius, I could do the same thing. That's a border. And I have the same properties here. You want to write the same ones
, you can write the same ones war, weaken. Say, I don't know, the border radius is gonna take place over five seconds as well as the delay is going to be on one second. Something like this. It doesn't really matter
. As long as you make sure that these properties are correct. None with me And common this Now we're gonna wait for two seconds for the background to change, and then after one second, I'm gonna have my border radius
, which is gonna take five seconds again, something we already have covered What's really nifty, though? If we would like to have the same duration, the same delay and all
that we can write even bigger. Shorter where we just write like this we're gonna say, first of all the properties on this is a syntax, so don't write it your own. This needs to be in this ward fall
. Then we're saying how the transition duration is gonna look like and in our case, I don't know. We can say for just change again. This is gonna be four seconds on DeLay is gonna be, I don't know, five seconds again
. This is gonna be optional, So you might not at it, You might add, It doesn't really matter on that. I'm gonna first all wait for this Dave to appear because that's gonna be the thing when this pretty much
. This transition right now is taking place. Now, the moment this Dave is gonna appear, notice what's gonna happen. So as I'm hovering now, we're gonna wait for five seconds. So we're waiting, waiting, waiting, waiting, waiting
. And the moment off. Five seconds are up. Then both things are happening. The border radius, as well as the background on both of them. Take change over four seconds of time. Now, this is
how we can work with delays as well as this is how we can work with the actual short hand for the transition property. We're almost done with transition property. But in the last video
, I mentioned the optional transition timing property. So why don't we take a closer look? First and foremost, I want to tell you that there's a lot to this particular property, and the reason why
we were going to cover a bare minimum is the simple fact that at this point in time, in my opinion, that would be an oracle to spend more time on it. The general idea behind the property
is specifically decide how the transition is gonna take place. Um, just let you know that there is a default value Already off, he's on. That is the reason why the property
is optional. Now what other values we're gonna have? Well, first and foremost, if you're looking at the shorthand, you see that the transition timing function is gonna be placed here. So first we're gonna
have the property that's gonna be affected. That ain't gonna look how long the transition is gonna take place. And then we have the transition timing function. Now we can write it separately on during
the example, gonna look in both ways, but the right away just let you know that in the short hand, this is gonna be placed here. Like I said, the ease value is gonna be default. That's the reason why it's option. And
as we're looking at these values, these one would be slow start. Then this is gonna go fast on the slow end. Then we also have the linear. So that would be the same speed as well as we're looking
at easing and he's out so slow. Start and slew in and then last But not least, we would have the ease into No, no. Like I said, this is just gonna make a little bit more sense as we're looking
with an example. And you know what? I will gonna de redo the actual indexation email. So first of all, let me get rid of these deer's as well as we're gonna clean up a little bit of CSS because I would like
to restructure it a little bit on Let's say within the indexation email, I would like to start by creating a DIV. Then the deal is obviously gonna have a class. Now, the default class is
gonna be the first one I'm going to say Default and let's right, maybe also the text or here then I would like to create another one, and in general, we're gonna create six of them. Now, I know this might be a little bit unwilling
, but since I would like to show you how they would work, was gonna have to go along with it, and we're gonna copy and paste it. Then we're looking at linear. So the New York timing function also, we
have easy in and out. He's in and out. Or you know what? Let's start just with these. Then we have these out on last, but not least we have. He's in and out. So that
would be the last. No. All this is nice and fine and dandy, but as you can see, I did a little bit off extra work. So let me get out of this guy. I mean, get out of this guy
on. Let me get out of this guy as well as you know, at least is also a Norco. So for some reason, I decided that I'm gonna be adding way too many examples that I would want Knock it. Now that we have the
ancient email set up, why don't we start? We had CSS, and like I said, the ease is gonna be D. Folkman. But maybe we before we started looking at the actual time and properties, why don't we set up the
dips? So I'm gonna say, for all the deaths, it's gonna be exactly the same. We're gonna have the with off, I don't know, 109 pixels. The height is also gonna be 109 pixels, so that's right
. Height is gonna be 109 pixels. Then we also have an option off background. So let's right the background blue. Now all of them are gonna look something like this. We can also add the color just so we can see
the text a little bit better. So the text right now is white. Ah, you know what? We also can use a little bit of marginal around, so it's a margin is gonna be 15 pixels on. Now we're having the margin
as well as let's set up some default transition. I'm going to say transition and all the properties, they're going to be affected. And this is gonna take one second of time now. What kind of transition? I
don't know. Let's do Dave hover. So as we're having to give, let's combine whatever we already learned about the transform. So why don't we write transform? So we're gonna be transforming on
the way we're gonna transform it. We're going to translate it. My let's say 109 pixels. Like I said, by default right away you will gonna be having this ease. So if I would have right here, over here, ease
, that would be the default value anyway. So, technically, you wouldn't have to write this Now if I would want for all of them linear, just type linear, and then what's gonna happen is the transition. He is
gonna have the same speed all throughout this transition. So it's going to start the same way in the same way and during position is also going to perform the same way. Ah, just to let you know again, we have
an option of testing them out like this or weaken go individually and the way I would like to set up individually, I'm gonna delete the linear one just to show you on here, we're gonna say he's
so we're gonna be targeting the actual Dave that had a class of these on here. Let's right the transition timing function. So it can say transition, transition
, timing. And I was like, This is gonna be impossible to find on. Then we're gonna be looking for Let's see. And again, this is gonna be exactly the same how we would be writing this
like this so I could have wrote it transition then all than whatever two seconds. Any on again. This is just to show you that these are possible options since we have
already set up to Div here with transition of all on one second, I'm just adding here This timing function, but in general normally would write something like this where would specifically go
with each and every transition. Now, I don't want to do each and every transition for all of them because we have six of them. So that is the reason why I'm using the shortcut where I already set up everything in a div. So
the properties, all of them, the timing is gonna be one second. And then for each and every day, If will's gonna look a different property value forests, timing, function, that's
all we're doing. Um, as you notice, this shouldn't be no difference. So the first one is gonna be exactly the same as the second. It was like I said, the default while value is gonna be he's. So if I set up these, this
is gonna look exactly the same. Now with our valley's we're gonna have let's say we can look at linear on for the linear. Then we can just copy and paste this on. Let's just change this still in here
. That's a Lini here on the moment was gonna happen. Notice that there's not gonna be this slow start or slow it. This is gonna take exactly the same speed has throughout
the whole transition. What else we have? We have easier and out on ease in out. Okay, so first class, second class on third class. So we might as well
copy and pasted three times on. This is not what I wanted to dio as it was not not This is what I wanted to dio. So let me select the line. Let's say that I would want to select actual
line and let's copy and paste it. Um, you know what? Let's let's do one more on here. Weaken right away. Delete three Lanier's We're not gonna be selecting winners on. Yeah, let's just
name it. He's and And I know this might be a little bit annoying, but again, since I would like to show you at least the general idea behind it, there's gonna be a little bit of typing and then we're gonna be looking for
a reason. Then also we have easing out. He's out, as was, the value here is gonna be. He's out. He's out on the last month, at least we have using or not. So
he's in a note on their will. Gonna be more options for you again. If you would like to go on research should just type into Google the CSS transition, timing function, and you're gonna see
way more options. But again, in this case, I don't feel like this is necessary for us. Whatever we're doing right now, because we can just get away with learning the simple
linear he's in announced on ease out. Let's say so in the moment we save it. What's gonna happen is that would linear I'm going to repeat probably for a third time. But this is gonna be same. Speed
he's in is gonna have this slow start slow and is gonna be 40. He's out on last but not least, we have the east in announced little start on fast and slowing. Now, as
we're hovering again, the default one is gonna be exactly the same disease. Then we have the linear one Just gonna have the same speed. Easing is just gonna have the slow start and then it
is going to perform normally. He's out, is gonna have this low end and then we'll have again the slow start slow went on the fast during their transition. Those would be the basics
behind the transition timing function in the ceases. Next one up, we have animation. And probably since they were going to be so similar, one of the first questions you were
gonna have is gonna be like, Okay, I know the transition, but why you're shoving this animation in my face right now on the answer is actually very simple. You see what transition we always went from
0 to 109 and that's gonna be obviously the natural. We're gonna look an example and yeah, yeah, yeah. Just to give you a one quick short, one sentence answer. Transition goes from 0
to 109. Always. We went from some kind of state that was here, Let's say on left inside. And then our box moved to right inside, and then it moved back. What school? With innovation
, we have way more options so we can have the point. So the animation is not gonna go from 0 to 109 old. Instead, we can have zero. Then let's say 1%
on that, that that whatever percentages would want, I I know or you know already what I'm gonna say is that we're gonna have to look at the example because there's always this is just gonna make way
more sense. And again, yes, we will gonna be deleting CSS. We will gonna be dilating html because I do find it much more convenient or much more productive. If we get
used to working with HTML and CSS, we could always lets a expand on the previous example, but that I think Rob's you the actual opportunity to work on the muscle
memory again. It is my personal opinion. You might disagree with that, but not just the waiters on here. Let's start by simply saying that there's gonna be def. Now, this day is gonna have some kind of
class on the class. Let's say is gonna be transition just so we can see the difference, Onda, we can also maybe right, transition name here. Maybe that's gonna make sense. And then I would like to copy and paste it. And
now I would like to actually delete these values. I'm going to say that I'm gonna get rid of the transition on here. We're gonna write animation and you already probably guested that we're gonna be styling
one with transition on the second one with animation now within the CSS. Let's just say that both there's are gonna look exactly the same. So again with is gonna be on time, 209
pixels, then we can do the height. That's gonna be 109 pixels. Also, maybe let's have a little bit of marginal around. Just so they're not stacked one on top of each other as well as
And you know what I said? This is not gonna be class. This is gonna be the day. And then let's start with specific classes. So for transition, I'm gonna say, And you know what last been leased may have color
on Dwight here on four. Transition What I would want for this day. First of all, let's answer my ground. Let's say background is gonna be right. So this is gonna be my transition on. Also, I would like to say that there
is going to be some kind of change, So I'm gonna do this. We transition. I'm going to say there's gonna be transition now. All the properties are going to be affected. This is gonna take two seconds on. Let's do linear. Since
we know that ease is gonna be the default one anyway. No. Great. So far so good as well as I would like to work with my hovering because obviously this transition should take place as
I'm hovering. So I'm going to say as we transition as we're hovering, what should happen? Well, let's say background is gonna turn yellow, get nothing really original as well as I don't
know, well done out of work with a transformed property. So I'm gonna say transform is going to be again translating X direction by Let's say, I don't know, 109 pixels. So something
like this. No, what happens as I'm hovering, then this is gonna move all the way to the right. And then as we're not hovering, we're moving all the way to the left market. So far, so good. So what about the animation
when this is so special? Well, let's start working on this dip. So first of all, the name was animation and now let's add maybe a background off. I don't know Blue, something like this. So
this is gonna have the background on what else would like to add over here. Ah, we can start working with animation. Maybe right away. Now, 40 animations. We would need to set up key frames. So the syntax
would be something like this. We would need to, Right? First of all, hat on this is gonna be very similar. Like we worked with media queries, Remember, we did something very similar. We had the atom. That media? No. In this case
, we're gonna have to ride the key frames. No, the naming matters here. Meaning if you're gonna name this Grandpa Bob, then you also need to reference it in the animation with same name. Don't
write something here different than within the animation, because this is not gonna work. This is a simple is that And I'm just gonna call my animation move on. Like I said, the difference would be that we're not
going from the state of 0 to 109. We have multiple states Now, how do we access the states? We can use the percentage values going to say 4 to 0%. This is gonna have some kind of value
. And first of all, I'm just going to say, transform on. Let's translate it. I don't know, 20 pixels eggs direction. So I'm gonna say exit direction. 20 pixels. So this is gonna be my zero value. And then
also I can have an option here off saying at 50% this should be translated, let's say, 109 pixels. So again we can copy and paste it on. Let's say 109 pixel. Now. We're not
limited to only having the one property here because, as you can see, we're working just with Trans one. We also conduce, let's say background And again, this could be as many properties as you would
like. No, let me understand my colon. Otherwise, this is gonna throw an error on Let's a background is gonna be red. So that's 50% of the animation. The background is going to be read. Then we can add 75
on as always. The reason why I'm using these around values is just give you an idea. Please understand that you can use 1 to 3% 1.5. It doesn't really matter, but
I'm not obviously going to cover all of them because it doesn't really make sense if we're gonna be going from 0 to 109 bite each and every information Ah, you know what we can in this case maybe grab these
values already. So going to say translate on in this case, I would want to move with 109% negative. So this is going to shift and left. The yellow color is gonna be also the color for
the background. And last but not least, let's go 409. Where on you know what? They're gonna copying faces way too many times on 409. I don't know what I would want and let me decide. I'm gonna go back again
to 20 pixels. I guess as well as I'm gonna set this up with Green. So that's my animation. Now, at the moment, as I'm refreshing the page, nothing happens. And the reason why nothing happens because we still need
to set up the animation now for the animation again. Similarly, how we Hadley transition. We have the long way of writing this or we have the shorthand. So first, maybe let's start with
the long one, and then we're gonna bounce back to a shorthand version, Not for the animation we're gonna say first little animation name. So we always always need the animation name. And this is where the name incomes
important again. If you name this something else Don't, Right, Grandpa Maria Here. We're not Grandpa Mondrian. Grandma Maria on. Let's say here, I'm gonna write. Move. Since this is
obviously the name of my animation know, once we say that nothing happens because there's two more properties that we need for the animation. So not only we need direction so similarly like
we had with transformation or transition. I'm sorry. Then we also need the count. So how many times this animation is gonna take place? So we're gonna be looking for animation
on. Then we have the count properly. Animation it oration, count, animation it aeration. And then we're looking for account. We have all kinds of options. We can go one Teoh
, whatever. 12. And we're also gonna have infinite value. Now, we're gonna look at the infinite value later on. Let me just go with two. So this is gonna run two times. No notice what happens on right now. This
animation is right now bouncing to 50% and then 75 was negative 209 then we're going back again to a zero. And again, the animation is gonna take
two times because we have the count here of to you now, you can already see that this gives you way more options. Transition was very simple. I go from one side and I go to another side on
devalues their changing from 0% 209% with the animation. This gives you unlimited amount of options. Now, keep in mind, though, this 10 seconds is going to reflect this 50%
. So if I'm gonna right here, let's say 20 seconds than my 50% is gonna be already a 10 seconds on So on and so forth. So these values air correlating to each other. So if we're gonna write one second, this
50% is gonna mean 0.5 seconds on so on and so forth. Okay, so far, so good. Now, what about the shorter? Because we see, obviously the long way of writing. Now for the short gun again
, this is gonna be very, very similar to what we had with transitions. First is gonna be the name. And you know what? Let me go up here and so like the mall and just come in their mouth. Their first one is gonna be name
. Then again, we were looking for how long this is gonna take place or duration. And maybe in this case, let's write five seconds as well as the last one is gonna be how many times we're going to run their animation and
let's use the infinite value, because that way you'll see that the animation is gonna be bouncing infinitely on whatever again we have. The 50% 75 on the animation is
just gonna keep on repeating because we set up this value we the infinite bones on this is how we can work with an emissions in the CSS. Well, we're still on a topic of animation. Why
don't we take a look at the animation film on property on what it stands for now, the theory is that animation feel mode is helpful with defining the values outside
the animation. Now, in practical, how this is gonna look like, Well, I don't know, maybe an index html Let's get her of this transition. We don't need it as well as let's make our assess
a little bit more slim. We're not gonna have these styles for transitions, cause we already have covered it. And you know what? Also, I would like to get her off all these comments here. And you know what? Might as well let's
get out of the animation. For now, at least on delete all the information that we have within the move animation to begin with, just I would like to start from the scratch. So I have my animation
And you know what? The moment I say with obviously this is gonna be my dear. Let's imagine some kind of scenario where there's going to be information and I would want to start with opacity off zero, which would
mean that we wouldn't be able to see it is live on. We're going to do the animation where it goes back to 0.5 capacity. So then we would want to decide how the animation film mode is
gonna come into play. First things first, let's set up our information, and I'm going to say that at 0% there is gonna be the opacity off zero, right? Opacity zero. Then
also, there's gonna be 50% animation so at or you know what, That's maybe right. 25%. At 25 we would like to transform property again, and there's gonna be translate
X negative 209 or not. 209 Not to do 209. This is going to shift in the right as well as let's add a little bit more capacity. No, in this case, capacity is gonna be I
don't know, zero point. Ah, 25. Since this is 25% then let's copy. Invest it. Let's say 12 we have 50%. Yeah, that should be enough
. So with 50% we're gonna have the capacity of 0.5, then at 109% we're also gonna have a opacity off. Let's say
you know what? No, let's change around. Let's say 50% is gonna be a passage of one. And then once we go back, 209% moving all half a capacity off 0.5, we already
know how we can use the animation. Someone right. Animation on the name is gonna be what? Well, the name was moved so that I would be in first value. Then we're looking for how long
the duration would be. So let's say five seconds and let's run this two times. No, the moment we save it, her innovation is kicking in. Everything is working Fine. But what happens? Well, we
get to the 15%. So this is where we're gonna stop then on here. Obviously there's a mistake. So yeah, I'm looking at I'm thinking what? This is doing that because housely left the translate
with 209. So let me fix this. I would want to have not 209. So my bad. I was waiting, waiting for it, and I'm like, looking at it. Well, wait a minute. Nothing is really happening on. Then let's a
zero. So this is gonna bounce to the right, then left back and then end up with zero. So in the moment we saved. Now we have our animation. When it balances, first time bounces the second
time, and then the end of the second time, it stays back to a opacity off one because we can clearly see where the actual Davis sitting for. And maybe that's
not something we would want. Maybe I would want to end up with opacity of 0.4. So this is where the property off animation film mode comes into play where we can head over back here and we can say
animation, film mode and we have few options We have backwards where this would go back to original value, which in our case, would be something when this Where we have an option. If word now how
the forwards is gonna look like the moment I'm going to save it. Eventually. Once the animation is going to stop running, my Dave is going to stay with opacity of 0.4. Don't believe me. Let's test it out. The
animation runs the first time. Okay, so far, so good. Then again, we run the animation second time on the moment it stops running. Instead of going back to capacity one, which would
be original value, we are going forwards on staying with whatever values we had here. So if I'm gonna add, let's say translation of 20 pixels, what's gonna happen is my
Dave is gonna be by default right now. Also translated not only a passing and in general terms, this is how we can work with animation film where you would want your div. Let's
say Teoh, get the values that you end up with with 109% than yours gonna have animation film mode, and you're going to use the value of wards. Hey, guys, In our last module, before working
on a project, we will cover CSS variables. I want to use them. Why would want to use them in the first place? Held to add font, Awesome icons, tour projects And what would be the generals in tax
Porter Fund custom icons, text shadow and box rental properties as well as the external resource is for both properties. We will also gonna take a look at what in the world
are browser prefixes and semantic html tex on We'll take a look at useful Emmett Snippets to speed up our work full during the Project Development Morgan
. We have CSS vary bills, a k a. Custom properties and I can tell your way. I really like citizens variables. I like to use them because they give
us a lot of flexibility. Now, the main point behind the variable would be the fact that we can store the variable and then we can reuse it whole. Throughout the document, not a syntax would be
dash dash than the name of the variable. And then what kind of value would like to hold on then, if you would like to use it, then we're gonna have the property. Andan against in tax would be far. So that
is this, in fact. So please don't give it and then he will need to go again with Dash Dash on the name of that variable. Now there is going to be two types of scopes for the variables. There is gonna be the global one where
we can use it all throughout the document. And now we're going to return back to this selector. Remember, we were talking about pseudo selectors, and in that case, we're talking about the route where we actually are selecting
the HTML element. So that way we're setting up our variables as global's where we can do it locally, just one element. Now, in our example again, we're going to use mostly
the actual colors or I think, maybe exclusively colors because they were gonna make most sense. But just remember, you can use it with any kind of property on throughout the projects. This is exactly what we're gonna do. First
things first, we're gonna head over back to HTML. As always, we need something to work with. So it's a heading, and in this case, I would like to have the class. So I'm going to say class on here. I'm going to use
the same heading class. Not technically. We maybe don't need to even add classes. We could have done this with heading ones, but, you know, just because I like adding classes. What was gonna go with, uh, classes? Okay, first one is
gonna be hitting one. Then we're gonna create another paragraph. I don't know. Here, the glass would be against text on. Let's, I don't know, have some Lauren text. I don't know. 20 words. I think that's gonna be enough
. Okay. So far, so good. So we have paragraph on one heading. So what's next? Well, now, I would like to create a give way of the class of Maine where I'm gonna have another program. No
, The reason for that is because I would like to show you how we can locally scope this. So I'm going to say first that there's gonna be Dave Then we didn't day. We're gonna have some class on the class. Name is going to be made
on within this live. There's gonna be another paragraph on again just because I like adding classes miss a class on this is gonna be equal to the main text. And again we can do the same spiel to any words
. Please. Thank you. Emit now moving on after the Dave there's gonna be two more headings One is going to be with a class of I don't know Ah, Second, heading again. This doesn't
really matter what kind of class names you have or you can select later on with headings. We have the element selector, but I think I'm just gonna stick Were the actual, um classes so heading
And I can just do it over here like this. I can say that first. Oh, yeah, this is gonna be heading. Then we're gonna copy and paste this. So I'm going to say one more heading three on Let's change the class here again. Just so can
see actually, how this is gonna be happening. We're gonna have third handing now. We have the main heading two paragraphs on one of them that is important sitting within live and then we have the another thing. Now
, if we're heading back to HTML where I'm sorry, CSS then you know what for the time being I'm just gonna collapse this just so we can see a little bit better what we're doing. And then let's start by
selecting the colors, because news that's usually is gonna be something We're going to lose the CSS variables where? Let's say that if I would want for heading some kind of color and I'm going to say color
hashtag f on fire 0 to 5, so that's gonna be my orange coat. So if our secret, then also I have an option off using the text. Remember, that was the paragraph again, We're gonna have the
color hashtag 32 If if on zero e and that was the green color on, I would like to also have the for the main text. So for this guy over
here, I'm gonna say Main text on then I don't know what can use Color Nash Dag 1313 NF eight. Okay, I don't have three colors Now what happens if I want
? Let's a color for his second heading. Well, you can say you have many options. You can either included here with the heading one, or you can just reuse the color again. Really Pick and choose. Okay
, I'll listen to your advice on I'm gonna stay second heading. And I would like to re use one of these colors. No, let's say this is gonna be this orange one. So I cannot again type color or we obviously
could have copied, pasted. There's no big deal. But since I really like typing 0.25 knocking But what happens later on? Let's say a simple example, but I change my
color. I said, You know what? I really don't like this orange one. I would like to have some kind of color. Okay. I mean, it's easy. I can just change it, right? You can say, Well, change the I don't know variables
, say 39 hopefully this is gonna be better. So now we're having a darker orange color. OK, but what happens when all the instances of this car now, in this case, obviously we have only two of them
. We have the heading in the second heading. What is gonna happen if you're gonna have a five page website? Are you really gonna jump through every instance where you have the color on change? This color
? Because it might be a little bit annoying or okay, you don't have this case, But you have another case. Where, by mistake, you tried like this. You were typing your busy. You're watching TV or something. And
then it doesn't even match your original color, Another mistake or you know what to do. So what? It would be solution. And this is where the CIA says variables coming to help where we have a way of storing
these values. And then I can just reuse them all throughout my document on they were gonna be stored in one place, so there's not gonna be any typos. That's number one number two. The moment I'm gonna change
it in my main setting. Whatever. I'm storing these values. They were gonna be changed all throughout my document. Don't believe me. Let me show you on four days. You know what? I will going to do a little bit more
off actually commenting out because again, I don't want it just to get in our way. So I'm gonna say this. I mean, we already have covered this technically again. There's no real point off saving
these colors. We have color. The hex values magician in case, you're You have everything that we're doing an electrode. I'm just gonna keep this in the comments. However, I will gonna collapse this because I think this is gonna be easier
for us to work. Like I said, there's gonna be two places where we can store these values. One is going to be locally for some kind of element, and the second one is gonna be global. Now, the global one is
gonna make sure that we can access it everywhere and again. We were gonna be going back to Drew. Now, if you remember, the rude was selecting the HTML element. So saying whatever I'm doing right now is I'm working
with HTML. And in this case, I would like to start. We're declaring a variable, so I'm gonna say, primary color and again, name this. Whatever you want. The Medea, the orange
, the Chicago's, the again doesn't really matter. Are you gonna name something related related to the color? If you're storing the car rally of probably. I mean, unless you really are a
rebel or something, you're going to use something that relates to the value that we were gonna hold it. So in my case, I'm gonna say primary color on. Then I would say that I would want to store F 150
too far. Now, the key here is I can reuse where I would like so I can and can't say heading. And in this case again, we're gonna use the color property. But this is where change happens, because
instead of using this value can save our gun. That was this index two dashes and then I'm going for my variable. Now, at the moment, we have only one variable, so it's kind of hard to mess it up, but
in general, we're gonna have 567 10. Doesn't really matter, not check this out. I have access to this color. So if I would want for the second heading, no problem could just get the same thing. So I'm gonna say, like
this company based it. I believe that class name was second heading. Correct me if I'm wrong. Second heading, What do you see here? And I see this orange color. You don't like the orange color. My problem. Lead
this. Let's say this is gonna be hash tag. 1313 f A. So all my headings are blue. I hope you already see how much more beneficial this is than copying
pasting each and every line that you're working. It might seem like a no big deal to copy and paste it first five times as we're working with the silly examples. But the moment you're gonna start doing some
kind of relevant work you Hogan appreciates Yes, as variables a lot. And I mean it a lot. Okay, now we have this coming one covered. What about if we create another color on
Let's say I don't know. Oh, you know what? Let me show you another property. So since we have been covering everything here with the colors, why don't we create another when why don't we say main transition? Because, like I said
, we can store anything we would like here. We already have covered transition. So we should be very similar to the shorthand where we have the all. So this would be on the properties, and I'm gonna say 0.3
or four seconds, and then the transition is gonna have the transition function of linear. So transition is gonna happen linearly. Okay. On what I would like right now is for the second heading
. So that's gonna be my ailment. As I'm hovering, I would like to have the different color. And you know what? Let's have a different color. Also, this would be, let's say, primary and we're gonna have
another variable secondary color on this is gonna be orange. So again, let's f 1511 for I know I deleted it in the home. Arrogant again. My
apologies. But I just wanted to show you the blue one and then got carried away. Deleted it. No, it's back. Okay, Now, as I'm hovering, I would like to change the color on again. I can use Davar. Since
this is globally, I can access this anywhere and could ask this that in this paragraph in that paragraph doesn't really matter now I'm showing the heading, but hopefully you understand the idea Secondary color. Here I come as I'm hovering
, This is gonna be the color and I also at the moment there's known transition as I'm hovering. It happens instantly. Well, I don't want that. So I can say transition again on that. I'm gonna be looking for what
? Well, bar again. This syntax and main transition. What's really cool again? I can have this transition if let's say I set for all of them. 0.4 I. Can you use this all throughout the document
everywhere. I would like you 10.5 later on. You can have 0.5 later on. Obviously, if you wanna have some kind of unique transitions, you wouldn't want to do this. But in my case, they usually prefer
just just thinking with one transition. Unless there's a really, really something major that I would like to change. I mean, not for every project, but in general terms. So let's say as you can see again
, the transition is happening. So everything is working. So we have successfully created the variables and we know how we can reuse them. Now let's look with the local school because so far we're just
working with the main scope on again. I'm not going to show you the example, but we could access this year with a paragraph. We could access this in the text because the reason for that because we set up the route on
the route right now has these variables. How if you understand? No. Okay. What about the local one? Well, the local it's a paragraph. When I was sitting where? Well, this is sitting in the def. I can target the class. This
is gonna work exactly the same. But I'm gonna say it for two days, because again, this maybe he's gonna be a little bit easier to understand. But we could have used the class on in this case, I'm gonna say, Primary
primary. Read more. You know what legis ride like this primary color on. I'm gonna set this equal just to a simple red car. I could have used the hash value. Doesn't really matter, but in my case, I'm going to say
this simple red car. Okay, What is within the diff? If I remember correctly within a day, we have main text. Okay, so, class name, text go Color
is gonna be one. Well, I can using in the variable name, right? So far, the syntax, dash, dash, primary, red. And you're also right away. So two options so I
could have used you see, the primary or secondary. And I also could use this primary the moment we save it. Sure enough, no questions asked. We're having this
paragraph read. Okay, What about? Can we access these values somewhere else? So let's say we're trying to access this another heading the one that's all the way to bottom with a class of third ending. I mean
, we can always this that up, you can say, third adding it's gonna be the name and forties heading. I would like to accessing in the color as well as I would like to access of our I'm Let's drive
for primary Red. Let's see what it isn't gonna work out. And I'm moment I saved nothing changes. Hmm. Does that mean that this is gonna be local? Is cold as always, we can head over to our developer tools
and say, Inspector, I dont be able to see what's happening with inheritance. So this is gonna be my body Now what happens on my heading? One as I'm looking forward. Well, I see here that I'm using the primary
color and all that. But notice what's telling you. Inherited from HTML. Inherited what? While we inherited colors. One color transition. So far, so good know what happens
with this guy with the one that's sitting within the main. Do we stay here? So we have a program. So what paragraph is inheriting? Well, it's inheriting two things. It's inheriting from the day of the primary Red. So
we can do you reuse it everywhere within his death. And obviously, since we set it up in our CIA says with a div, understand that I can have as many dibs and this is gonna be scoped in those dips. So
this is just the way normalcy insisted war. But it also has access to these values. So if you want locally scoped, you can create some kind of variables. Ah, in most cases, though, I'm not a fortune
teller. But I would assume that you're gonna be probably setting up everything globally within the root and then just reusing these variables all throughout your project, as you were gonna be creating more
and more what projects? In most cases, you will gonna need some kind of like a on the service that I really like to use is found us in my country. I'm just a disclaimer. There is many
, many icons. You can get out there with the reason why I like using phantasm because they're free. They're easy to get up and running on. They have a very straightforward and simple syntax. As
always, we're gonna get her of everything that we had within the CSS. Then the same with an HTML. What is going to say that we're looking for them? Let's say we're gonna be a little reading one having three
. This is all gone. You know what? Also, I'm gonna clean up a little bit in my head because we were gonna be coming pasting this. So I'm going to say that I'm gonna copy and paste it, and then we're gonna change this. Not Google fonts
were going to say Icahn's Morgan say phantasm doesn't really matter. I will save it. Now we have a clean document. What's next? We always go to our good old friend Google on
. We're gonna be looking for fund awesome dot com on weaken type font awesome icons and doesn't matter. In my case, I think I'm right away. Gonna have phantasm dot com on this is gonna be
your startup screen now within the Starscream. If you never have worked with fantastic microns, we can go to the docks where they explained everything that you need to do on the basic use would be very
similar to what we have done already before. Meaning there's gonna be some kind of element on the difference would be you. We were gonna have to include the font Awesome to our document. I was gonna be the first step
what you were gonna do in a second. But the moment we have included to the document we need to create on high element. So this is where I'm saying something similar because we would need to create a new moment. And then, Fordice
, Element, we're gonna have the classes, depending on the name of your icon. This is where you're gonna be choosing different class. However, don't skip on this first one, you need to include F A s. Or if there's gonna be different
type of icons that would need f a B. Now there might be, and also the pro one. That's the one you need to pay more distances regular. But as far as I remember that this was for the pro one you have
to pay. And this was the f a r. Um, what else? What else has been scrolling down, then I tell us pretty much what would be the fund? Wait, we don't really care about that. The styling
we're gonna cover in a second the moment we're gonna have actually in a document. This is going to be another styling. Uh, yeah, that would be pretty much with the docks here. We would have the icons. So whenever
you want to search for icons, you just click on air Cons on. Go ahead. Just pick whatever I can. You would like order if I would want I don't know, Amelia or Android. And just click on it. And you're gonna get this in tax
. No, Like I said, Ford Android, let's say this is gonna be a Fabi. And then the name FAA Android. Now is we're gonna head over back to deal like gods. Let me show you just one with f A s. Just
so I didn't think that I'm pulling the wool over your ears. Uh, let's say archive. Maybe hopefully this is gonna be a face on it. Yes, it is. So this is gonna be a fe s. That
would be another type of syntax. How can you start working with phantasm? No guy Let's have a look. We have the start option. So let's clip on star option on the first thing they provide you is right
away. Cdn The moment of we're gonna understand the general syntax, I will show you how to download. And I'm also gonna explain why am I downloading? You don't have to download, but I'll get to
give you my reasons for it. Let's copy this right away. So tells us that it has been copied. We're gonna head over back today at Element and in this case above the style sheet. And
maybe, let's add the some kind off. Ah, comment here, let's say custom CSS just so we can see not custom on this is gonna be our CSS within the body. What
we're gonna do. Well, let's create these two white guns. Let's say in the beginning, because I don't think we need any more to actually understand the basics of it. Now, the first one, like I said, this would be the element
. And we can still use the Mm. So this hasn't changed. On day, we're gonna have the eye on that. We're gonna be looking for a class in Michael Summer say FAA? Yes, f a home that would be named
in the icon that I'm looking for among but I'm gonna save it. Notice what's gonna happen in the document in the browser. I'm gonna have my little icon just to give you heads up. If you want to control the height of deer income
, you can use their own classes. I always prefer to do it in my seer says because I feel like I have more control over it because they don't have to jump back and from the document and actually changing in here, because
I understand you're changing this in the HTML. So if you're gonna have the in, let's say 15 places, I find it easier if we're gonna set up actual class with actual value. But
again, this is your option. So you can say something like five x, Andi. There's gonna be different values. They're gonna go with one X. Let's say this is gonna be one X, then we have 10 X. That would be the biggest
one on so on and so forth again. If that's really was something you're interested you can head over the documentation explored more. I don't prefer doing this way again. I told you my reasons
, but you could do really whatever you would like. Awesome. We have our basic one. And you know what? I will gonna leave the size just so we can see actually better in a browser at the moment. So I'm going to say something
like five X. So now we're gonna have the being icon. If we want to add some custom styling weaken, just head over back to the CSS. And then I remember we had a class name. We have this class off every
home we can actually style. This wouldn't say f a. Now the name is important again. If you're gonna name this FAA orange, obviously not going to get to the class how Or if I'm gonna be targeted in this class on
I'm going to say that the color of my homework on is gonna be green. What you see in a browser, he is the Greek color, right? We also have an option of working with some kind of a parent element. Second
, say span here. And then let's maybe have the Facebook icon just so you can see that way we can work with that baby. I'm gonna do a little bit off amateur Good that I haven't been doing on
. I'm going to show you that actually UNAMET video where Weaken Just have the element and then dot And then we're adding the classes. So in my place, we're gonna say Facebook. The result is gonna be exactly
the same. We're gonna be getting our element with our classes. And I were going to show you that in the Emmett Video. But in general, this is how we're going to speed up your work. We have the icon
of the parent element. Why don't we have the class on? Let's say here properly, we're gonna say class and we can use the i d weaken target the actual element. Again. It's really up to you and we're gonna call this
social icon and within the styles, we could do the same thing we already did. And when I say so, show Icahn on. Now let's don't allowed the font size. Like I said, we can have the font size bigger
. So in our case, since this is gonna be font awesome icons, we can use the font size because we were gonna be able to access the size we the this property on. Then let's say
four rum's. So now this is gonna be much more bigger on We could maybe have the color off. I don't know, Blue. This is gonna be my icon with able color. So those will be the two options how we
can access it with a CSS. Now, I would like to head over back to the fund Awesome documentation and go Why? I would like to download especially why my downloading
for the project the fantastic Michael. Well, here's the thing. I really like font awesome icons. But what's really sometimes annoying is the fact that there are bearing their versions on their changing
Some type of syntax used to give you an example when they switched to fire rice. Um, five. In the beginning, you only could style with a parent element in the font house. And four, you
were actually able to access the class like this when I was sitting in a high limit. But then once they rolled out the phantasm five in the beginning, you could style this Onley by accessing
the parent home. Now they're back again where you can style the class. And what happens is that if you include the cdn, this cdn technically is just gonna be dealing with whatever icons you have so far, so
good. So that would be good enough for your project. But in my case, if somebody's watching the editorial there, including their own CD in Unless very obviously using the source files. But
what happens is that they're using their own Syrian, and then the version has already updated. And then they're trying to, let's say, style all their icons with just accessing the class of
my home on for that particular reason they cannot do it for that particular version. And they're mad because they're like, Well, excuse me, you are doing the editorial and you are able to
access your funds Awesome icons directly with this class here on phone tossem. But then I would have to do here with the parent. So that's the reason why I always like to include actually
download defund us Americans, include them in a set of files, and then once they're in set of files, I can say, Hey, listen, so I'm doing two tutorial. If you want to fall along Exactly. I don't know
whether defined awesome version has changed, but you can always access the ones that I was using again. A long story short. It just saves me time later on as they roll out the
new versions on Phantasm. After all this talking and yammering about ah, unnecessary stuff, maybe for you, I'm gonna head over to download because that's where we could get their guns. You can click
it over here and first all day. We're gonna tell you right away what files you would need to include. You want to use the SPG, use this part. You want to use the CSS version, use all sources. However, one
thing that is very important is to have the whole folder there. So don't just drag and drop the file because the file is going to be looking for the actual folder
. Now, in order to do that, let's just actually click it. Now we're starting to download. I'm gonna head over back to my actual documents who and find her. I'm going to go to downloads. Then this is gonna be my
found Awesome. Um, I'm gonna open up the zip file. I'm just going to say that I would like to complete this with Copy this on within the CSS. What is going to copy and paste it now? This is gonna
be my phone 1090. Good. I have my phantasm. Now, what's next? Well, first of all, let me show you what happens if we don't have the link. So I'm gonna delete this. Andi found out some icons. They're going to be gone
. But then remember, we haven't option off looking for this file with their old GSO also uses. Well, let's look for it. So here again, we would need to use the link. And then what am I doing
? Well, I'm looking for fun 1090. That's my folder. And I already know that CSS is gonna be located there. So I'm just gonna head over four to see assess. And then I'm looking for all CSS that's gonna be met back if you
named your folder differently here than understand that you need to look for the folder where you have your fantastic my country. And now I have them back on. That's pretty much gonna be short. How
we can include Fontas, my ConStor project, and start using them on, we will going to use them allow throughout their projects. So you'll really to know Font awesome icons right after the phantasm
icons on our agenda is gonna be text shadow property as well as box shadow property borders. We're gonna go first to indexation email. We're gonna set up, I don't know, one heading. So
it's a main hitting on. Then we're also gonna have some div now that they've is gonna have a class of box So simple, Dev Class, he is gonna be box. That's gonna be enough
for our html on within the CSS. Let's start styling the first the text soon this is gonna be hitting one. Ah, yeah, You already see the text shuttle property. I think that's kind
of self explanatory, But what values are we looking for? Well, the first value is going to be X, meaning this access on the second one is gonna be y axis. Then we're looking
for Also the blur as well as last one is gonna be color was gonna be much more easier if I show you so it's a one pick. So one pick. So So first, let's start very easy. Just buy
one picks on one pixel and we can also do with the color of red. No, What's happening is you know it is that we're getting the texture. If I start changing the values, you'll notice where the values are changing. If I'm
gonna say five pixels noticed right now, the direction is gonna be eggs director. So far, so good. And we can change it also the Y direction. So if I want to change my direction, I can set up here the Y
direction you don't want actually the X direction You can ride like this so again you can delete the pixels. You can just leave. Zero is going to do exactly the same thing. No, With me, leave one
and one on the blur is gonna be the blur off the shadow so I can stay and let's say one and one. But I could make it blurry. Let's blurry, more blurry on you get That
idea has been At least we have the color again. Any option under the sun You want to go with RGB, you go with RGB. You want to go with rgb a go with rgb a hex. Whatever you name
it. That would be the tech shadow. And we also have box, you know, on for the mark shadow. First, let's work with our marks. Let's say with is cannot be 209 pixels, not with your with
. Then we can also have some height under pick cells. Background blue. Ah, margin is gonna be let's say, 20 pixels little around. That's gonna have to be our margin. And now let's
work with our buck shadow on here with the box shadow, we have one extra that would be an optional. I'm going to show you that in a second, but the general idea is gonna be exactly the same. We have the box
shadow property again. The first one is gonna be for X value than the second one is gonna be for wire Al you. Then we have the blur on. Then we're here looking for the green. Now I said, this is just
gonna be the color on what happens is you know it is that I'm getting my back shadow as well as again. I can change these values and you'll see exactly the same things like we were doing before. That is all good, but
we have also nice external resource is so first start. Let's text shadow on generator and we're gonna head over to this site. Doesn't really matter. This bunch of them. You
can pick any one you want. I have no real preference. Usually the one that first one jumps out on I'm good to go. I want to say no on. Then you see the example? Obviously
. So this would be example. Text one. The distance not is This is gonna be my distance. I want the blur. This is gonna be my blur Can change the angle. I mean, whatever options you would like and what they're
doing at the end, I was gonna spend throughout the coat, so this would be the cold that you're gonna be looking for. You also can choose, obviously, the opacity that would be with the color name. And this is gonna give you whatever values you
like. No. In this case, if we're gonna be choosing, let's say for RGB, I would want this one. So that's gonna be my red color. Only thing I would need to do is just company in place this cold. Good head over back
to my text. I will gonna comment this out The easy one that we had on just complete basted. And now we're gonna have this texture. OK, so I will be for texture. We also have an option for
box shadow, believe it or not Generator. And that meaning sarcastic. Of course, there's gonna be something for the box shadow If you're already using for tech Shadow, you could imagine that they, both of
them, are gonna have some kind of external resource is And not only some There's gonna be a bunch of them. The reason why I'm showing you right away the box shadow, because the result is going to include the browser prefixes
and that is actually a topic our next video. So I purposely picked right now the texture on box shadow just so we can talk about them Because remember when we were talking Morlin ingredients we first time
we met them in the color zilla when we were generating the linear ingredient Well, again, we're looking at the browser prefixes, so I think now it would be a good time to talk about so here again
, we were doing the same thing. We see that there's gonna be some kind of value. So this is gonna be my box. You want horizontal length? Horizontal and vertical and vertical glorious blurry teas. And this is
that spread where you can kind of spread over here. That would be something optional again, as you're using, Remember, we have three values, So this will be the fourth one again, if you want included included
than shadow color, the background color. I mean, you name it, really? Weaken, pick whatever we was like. Oh, here again, a capacity we can change it on. The only thing that's missing is whole Here, dis text
. Now, what I would like to do is first of all, a little fresher on, Hopefully is gonna go back to actual zero. And I would like to show you with a hover effect, because that would be probably a little bit better example
. So let's say here we're gonna miss first, starting with horizontal length, and I'm gonna go with, like, five, something like this, or you know what? No. You know what? Yeah, let's stay with 10 and then I'm
gonna show you with the actual how this is gonna work with five. So it's a I'm going to save this first of all more. I'm sorry. Copy and paste it. So grab whatever values you have over here without changing
anything, we're gonna head over to the box and we're gonna say for the box we need to have. Actually, as I'm hovering, someone say, as I'm hovering, I would like to copy and paste the styles. Then, first of all, we're gonna get out of
this one and let's add maybe transition, because this is gonna be a little bit nicer. We know to do that all, um what? 0.5 seconds and sailing
here. Now what's gonna happen is as I'm hovering notice now we're getting our box shadow property on. Now that we have covered box set on text shadow, we understand the basic idea. I would like to talk about
the browser prefixes. All right, what are these weird browser prefixes In a natural wonder prefixes. As they're also called Arte Ways for different browsers To add support
for the latest CSS features, browser prefixes are needed as the browsers experiment investor out there implementation off the new CSS three properties on excellent
external resource that we're gonna use is going to be. Can I use that car now? The basics index would be like this again. We would have some kind of browser prefixes which in this case, is gonna be for chrome. Then we're gonna be looking for
Let's say, Mozilla on at the very end will just gonna write a normal CSS property. Ah, let's head over a baby first to can I use dot com I'm this is going to give us more ideas so I can write
. Can I use dot com And then here I can write whatever property I would like on most of the cases with me Just show you would see it says Great, because this is still gonna be lacking a little bit of support
. Now, as you're looking at it, you see that? Let's say that in 89 So Internet Explorer, this is just not basically supported our intend This is a partial support
where you would need to use the prefix off m s. Then let's say in 11 again, it says the same thing. How are if I'm gonna head over to chrome? You see that this is all green, so everything's isn't supported
on That way you can decide what is happening with the property and what you would need to do. Now here is the 10,090 question. $10,090 question. Do you need to add this every time
you're looking for the property on, my answer would be No. Let me give you an elaboration. Why? I wouldn't use that right now. Why wouldn't add them manually by hand like
this, as well as the actual reasoning behind it? You see, as you're gonna be progressing on development, you learn many, many ways how you can write more your seasons
and then set up some kind of art imitation where it scans through your CSS file and then adds them automatically at the very end. Instead of you typing this out, let's say three
times on, this really gets annoying. As far as I'm concerned very quickly. No, I after tell you honestly, I don't remember. When is the last time was typing the browser prefixes? Because again you use something like gulp
used. I don't know another NPM module or anything like that. And they were gonna do the work for you where you can set up everything. How you would like to add those Brower's browser prefixes
meaning like, let's say, for what versions of the browsers and all that on it is much more faster. So throughout our project, I'm not gonna be adding the manually. This is just not gonna
happen because, in my opinion, clogs up rails in CSS on it loses the purpose for me to actually explain everything. If you have to look at bunch of cold like this now, you can do it
. I mean, I'm gonna think there's nothing wrong with that. You can technically right, everything by hand, rule by rule. But I'm just telling you that there's gonna be a much more nicer options, how we can just get all the brother
prefixes that we need. Also, I would like to show you maybe one quick and dirty way how we can do that. So if we write auto prefix or get home, i o. But you can ask the search for
it. We're here like this. So auto prefix, sir, look me right over here on. Then we're gonna be looking for this guy, and if you want, you can just copy and paste it basically. So let's say that I know that
there's gonna be an issue with linear grading. Let's imagine that in my CSS I would have the main heading than in the main heading again. We would copy and paste it. Normally, let's say our whole CSS
file mint. In our case, we're gonna say, I don't know, background background, lean ear, Great. And here we need to have proper dash. Grady ent right
? And as you can see, my spelling was always awesome. Ah, and then let's write whatever colors, let's say red and blue and what's gonna happen? The actual auto prefix there is going to spit back already
prefix code. You can copy and paste your code here and get everything that you want, but again, this will be a quick and dirty way. There's better ways so you can actually make this automatic where again
it scans through your file. It just basically adds them on. I haven't had an issue where let's say I have to do this manually because everything is done for you, sir Creek in
the clean CSS and at the end of the day, you can get all your browser prefixes. Anyway, on my main point is that we will not gonna be adding the browser prefixes in our project. Excellent
. Our next topic is semantic html. Okay, what does that mean? Well, in general, that means that you use specific elements to structure or content instead of the
this the that spawned this span that HTML semantic tags are no different than regular tax. They're syntax remains the same. We can still add classes within
, still add ideas to them on weaken style them from the CSS using the element selectors, however they do provide us with a structure on their content, gives a browser
and off what to do and how to do it. Using semantic tags also improves your sights. Accessibility for, let's say, screen readers and keyboard navigation. I
would suggest, though not to get too worked up about it because you have more important things to worry about on. Since using them will seem natural, the more projects we're gonna build anyway. Okay, so
how do we can start working realization email semantic tags. First of all, I guess we're going to get rid off everything that we have into success. Then we're also gonna head over to in the especially amount on kind of give
you an idea how Before html semantic tax came along, we were writing HTML and CSS. Let's say we had some kind of knife. So we wrote here Div. Then they've
kind of class of nuff. So within now have replaced everything that we had enough. Now, again, I'm just going to use three dots to give you an idea. Then let's say you had some kind of header again. You had a
div and class on. Then here were writing the banner on so on so forth. So again we can rise Div class And let's say this is gonna be for on. Hopefully you understand the
idea while this is technically okay. First of all, this is structure Anything in your content you're just looking at 10,090 ifs on that doesn't really make sense as well as doesn't tell you
the browsers, anything, what is happening within your contact on. Like I said, also, the accessibility is an issue because green readers are not gonna different trade between them now. What? It would be the
solution with me saving styles here on. We were gonna be booking at very general examples because Like I said, as we were working with projects we were gonna be using those elements on
. It's not like just because we're at the element our site is gonna break or anything like that. Like I said also before, I wouldn't really worry about it too much anyway, right now, because the
more projects we're gonna build more semantic tags you can use, the more you're gonna remember them, understand them. Um, life is gonna be easier for you. Okay, so we're gonna be looking We can just say semantics
, not semantics. Semantic. A shitty amount. We can maybe try this one. And they pretty much spit you back. Everything that there is about semantic ation melon First, maybe we can look at the images
on the general idea would be like this. Where for the header. Let's say we're gonna be used the header element and we're gonna have element in section section is gonna represent some kind of cold than let's say
, a side in the footer on what's happening again. We can have the ideas to this. We can have the classes. Portis. We can place the content here just because you add this HTML tag your
HTML or CIA says he's not gonna break. It's just going to give you a structure where you're looking at your like, OK, so this is gonna be my header where I'm gonna have the header. Okay, so this is gonna be my now on the same
way the browser is gonna work on the screen, readers will understand what is happening now. Like I said, we were gonna be covering this way more in a project because we're just gonna use them. So that's the best
way health actually cover. This is just to use those elements. Now, if you do want to research more again, you can go to W three schools where they again explain everything what is happening and why would
use them. I was going to do my explanations as we were working with the project, because this is just makes more sense on in general, the idea would be a very simple would just go with some kind of header than there's
gonna be Footer and then everything else I'm gonna be structuring within the sections and then within the section, let's say if I would want something separate, we'll just gonna I don't know. Set up the article or something like this
. We can place the knave within header. We can use the cutter within the section. There's, you know, you can have multiple options. It's not as a rigid as you think
right now. Just because you learned about them doesn't mean that it's exactly how do you need to use them? Yeah, there's some general ideas behind them. You probably wouldn't want to put the footer. Where's the header? But
again, if I would be you, I really wouldn't lose too much sleep about it. Awesome. Before we start working harder in our project, why don't we take a look at the amazing snippets
that Emmett provides to speed up our work for? Because at the moment we have been using only one thing which is basically to generate the tax. The howler html tax. Well, if any
of you have missed that, we have been using hematoma long. Or maybe you're not using the visual studio code If we're gonna head over again to the browser and if I'm gonna type m it if you don't
have the Emmett meaning, if you're not using the visual studio code because If you are using visual studio quote, this is going to be built in right there in the visual studio code on were, if you not you
can go always here to their documentation on download on added to your actual texture. No, there's probably also going to be an option for you to use some kind of extension. That might
be another out that you would want to use on, if you would want to. I don't know, explore more Emmett snippets that we're gonna be working on. You can head over to their documentation. Like
I said, in general, we have been using only one Emmett suggestion where we are just getting attacked. Meaning as we're working with a CSS, they were also
giving suggestions. And as a side note, if you would ever want to get the suggestion. So let's say I'm gonna type a dot type something so this would be my class, But then I press the space bar, and I
would still want to get the m. A suggestion in the CSS is gonna work exactly the same way. If you're gonna press control in Space Bar, you're gonna get the suggestion like I said already before. The only thing
we're gonna be have been covering so far has been creating the tags When we just press whatever name of the tag and we're creating on whereas we're working with them and we have far more options
than that now, what would be the first one? Well, let's say that there's gonna be a heading. How old is heading? One is gonna have right away a class. So how we would do that? Well, enam it, we just need to type dot and
now I can start adding the classes. So let's say here, I'm gonna say Maine. So this would be the main class on you know what? If you think that you'll need more classes, you just need to keep typing that's on the class name
. So let's say secondary, then Whatever big and then something else. So what, you're gonna have a The end is a heading one. With all of these three classes No good. So far, so good. No. We also have
an option of working with nineties the same way so I can stay here heading one on again. We will do the same thing on then the hashtag and then I devalue again. We can use the same one on
we're gonna be getting the heading One with idea of Maine has you already saw it before with classes on within I DS we can put together and obviously we can combine them
. So there's gonna be heading three that's gonna have the I D or third on class of third been write something like this and we're gonna be getting are heading three We had some kind of text on This is something that
you're gonna see me a lot doing throughout the project where I'm just gonna come up with, let's say, some kind of name. So this is gonna be our nab our I'm sorry, That's not gonna be a html tag, but
let's say we're gonna be typing Header now. The header would have some kind of class, so let's say there's gonna be a header on. If you would want to add another class, I don't know main or something like this
. Then we're just getting in the header on this is tremendously gonna speed up your workflow where you're gonna find it really annoying typing your HTML tags and then later on going and adding
classes already. So far, so good. So what else we're having? Well, we can create right away dips were than I ds on with a classes as well. Now we already
know that we can just have the element and then whatever. However, with this, we have a little bit faster way. So if we know that there's gonna be dead, we can just type whatever we're gonna be adding for this dip. So
this case, let's say that there's gonna be div with an idea of box and then with the classes of box number one, box number two and so on so forth when I'm having right away is the
diff on. I have right away the eighties as well as the classes. Okay, What else we have? Well, we can create Children with Ian Allan Emmett. So let's say I'm gonna be looking forward to Div that
we're gonna have the list item within the A nordle ist. So I'm gonna say like this. And then if we use the angle bracket, that means that now we're going to be creating Children and we're not limited
to an order list or lists, but I'm just using this as an example. So I can tell. You know what? There's gonna be 109 list with a list item. How are your question? Would be? Well, usually when we create in order
lists, we create multiple elements. Don't worry, I'm I've got you covered. So again we can do the same thing where we say Dave on the list must Adam. And let's come up with our
list items even one 15 weaken. Just adhere this multiplication and just say spiv. So this is going to create five of them. And right away we have the div on her list on
whatever list items you wanted or you Well, we can also place the text within the element. So let's say we're gonna have some kind of paragraph and within the paragraph, who can write some kind of text? So some
text now, this in tax would be these curly braces on the moment again, we're just gonna get suggestion, Onda, we having the paragraph with the text inside off
some text as well as we can combine whatever we have in here. Let's say if you would want to create multiple items Ah, we consider like this when you say I don't list, then within the 109 listeners
gonna be lift list items and we're gonna multiply, Let's say by six so I can say something like this. However, within each and every item, we can place that number there. So four days we're gonna
have to use the dollar send like this. Now, the moment we were gonna be looking at it noticed, by the way, right away we can look at the info of what we're gonna be getting anyway. So that's something really need with them and suggestions
where you can expand it and you can see what is going to be a result to begin with. So it's a here again. As you see, I lost my suggestions. However, no worries. Just pressing control in space
Barak and get the Mac and then either typing return or the tab. I'm going to be getting the values from 1 to 6. So this would be the general snippet. Syntax
with an image that will tremendously is gonna speed up our work for