Mastering HTML & CSS: Build 15 Professional Projects in 15 Hours 2023 #huxnwebdev

Hey girl hus and welcome to the HTML CSS master class so in this course you are going to be learning crazy amount of stuff about HTML and CSS and I'm assuming that you guys don't know nothing about HTML and CSS if you do that's completely okay you can just jump straight into the project if you want to but if you don't know nothing about HTML and CSS so this course is totally for you okay so this course is without a Doubt the most comprehensive course out there which teaches like HTML and CSS and this is

my guarantee like if you perform all of the challenges I give you if you do all of the projects which I'm going to be doing throughout this course so by the end of this course you will be able to create your own markups by using HTML and CSS so enough talking now let's just see what we are going to be learning throughout this course so first of all we are going to be starting our Journey by learning about HTML so like we are going to be learning what HTML is and structure of HTML and all

these topics which you can see on the screen right now then we are going to be learning about the basics of CSS like what a CSS is CSS syntax implementation colors units font and etc etc after that we are going to be jumping into something called a flex box and we are going to be learning crazy amount of stuff about flexbox okay so after that We are going to be learning about what a CSS grid is and then like how all of that grid works in the CSS and then we are going to be learning

about new feature in CSS like what is a variable called mix blending mode is before and after and that stuff and I don't want to make another slide so I put this all stuff as well so we are going to be also learning about transformation transition and animation by the end of this course after there we are going to be building Our awesome awesome projects okay so suit for yourself if you know all of these stuff so you can just pick like wherever you want to start from this course if you're completely beginner like if

you don't have any idea like what HTML and CSS even means so you should start from the beginning and I want to welcome you all so the next thing which you have to do is that we have to make a setup for our coding Journey all right guys so before getting Into the actual content of this course first of all we have to make setup for our coding Journey so that we can write our code somewhere and we can test the result of our coding somewhere so for this course we are going to be using

something called a visual story coder and which lest to WR or code and you are totally free to choose whichever kind of cod you like like you can use Sublime Text you can use ADM and stuff like that there are a lot of cod erors out there If you want to choose some others so you can also choose that but my recommendation will be to use a visual story coder and you are totally free to choose whichever you like anyway so if you want to download and install visual story coder in your machine so I'm

going to give you this link so like you can just click on that it will bring you to this web page right here so you can also type that in your web browser like cod. Visual studio.com and it will also bring You to this page right here okay and it will by default detect your operating system so I'm using a Windows and I don't know if you're using like Mac OS or Linux or whatever kind of operating system you're using but you can install it for your own operating system like here you can see we

have option for Mac OS users we have for Windows user and we also have option for a Linux user okay so I want you to just click on this button or you can just uh download it For your own specific operating system so this is how you do that and then hit next next next and it will just install it in your operating system it's not that much hard and now the next thing I want you to download and install in your machine is something called a web browser in which you are going to be

testing the result of our coding so in visual story coder we are going to be writing our code like here you can see that and in web browser and you can Choose whichever kind of web browser you like but not an Internet Explorer okay you can choose whichever kind of web browser you like like chroom or Safari I don't know like whichever kind of browser you like but not internet explorer okay so this is it for the setup I want you to just go to these links and download and install it into your machine and

then you're going to be ready to go so now the next thing which you have to do is that you have to Create a folder somewhere so in that folder we are going to be writing our code okay so in my case I'm going to just create my folder inside my desktop and you can create it anywhere you like and now I'm going to give a name of like HTML and CSS and you can give him any name you like and now what do I have to do I'm going to just open my terminal like

or you know what I'm going to just open my visual story coder right here so and now here you can see I launch my Visual story coder right here and chances are your codor will not look the same like mine your codor will look like this like um the menu bar will look like this and chances are you won't have this search bar in there you don't have to worry about all of this stuff for now so now the thing I want you to mention is if you want to open your folder in a visual

stud coder so you can either just click on this open folder button and then you can choose like where is your Folder located in my case it's on a desktop so I'm going to just click on a desktop and then I can choose my folder from there and then I can just click on the select folder in your case if you don't have like this open folder button chances are you will have this like open folder button but if this is not available or you cannot see that so you can just click on this file

button and then click on this open folder so it will to give you that same popup box Right here so you can then just click on this desktop and then click on your folder okay so in my case it's on like desktop and then we have HTML and CSS and now I'm going to just click on this select folder for now so it will now open this folder in my visual story codor so here you can see our folder is totally empty so we don't have any files and then like any content whatsoever right here

so now here you can see this is totally Empty so now if you if you want to work with the HTML first of all let's just learn about like what in the world is a HTML and then we are going to wring our coding so in this course you'll have two friends or maybe more than two friends but in my opinion these two will be your best friend the first one will be mdn and the second one will be W3 school okay so you just have to type like W3 school.com and then it will bring

you to this web page right here and I guess by Default your web page will look like this like a white one so then you can just s your mouse over to this kind of a um I can't even call this um you you just have to roll your mouse over to this icon and then click on this dark mode right here so it will now provide you with a dark mode and here you can learn crazy stuff about HTML CSS JavaScript SQL PHP and a lot of crazy Technologies like that but you don't have

to go to that much detail so now Let's suppose if you want to search for HTML so I'm going to just write uh HTML and now I'm going to hit enter right here or you can also click on that search and now here you can see gives us uh this definition so we are not going to be clicking on this HTML home we are going to be clicking on HTML introduction so I'm going to just click on there and now here you can see for now you don't have to worry about all of these crazy

syntax and stuff for now but I want you to just notice two things so I'm going to just zoom in a bit so that you guys can see everything a bit clear so first of all I want you to know that what is a HTML HTML is just a standard markup language for creating a web pages okay so HTML is some sort of a language which allows us to create a web pages so what are we doing in here we are here to learn about web development and HTML is our first step to learn web

development so HTML is a standard markup language For creating a web pages you just have to remember this sentence right here and the next sentence you have to remember is that HTML stand for hyper text markup language so that h stand for hyper that t stand for text that m stand for markup and then that L stand for language so you just have to remember the these two sentences like the HTML like HTML is a standard Mark of language for creating a web pages and then HTML stand for hypertext markup language so for now I

Want you to just keep these two line in your mind you don't have to care about all of these crazy terminologies like HTML describe the structure of your web pages and blah blah blah which I'm going to show you in this video you don't have to worry about all of them for now but I want you to just keep in mind these two sentences or to be precise like these two HTML stand for hyper text markup language HTML is a standard markup language for creating a web pages okay So this was just quick introduction about

what HTML is and then like uh what do HTML stand for okay and here is just a simple HTML document if you want to work with HTML so this is first of all you just have to remember this structure and I know you might be thinking like oh my God this is a lot of stuff like first of all we have doc type then we have HTML head title and all of these stuff but you don't have to worry about any of them for now so first of all let's just Go to our visual story

coder one more time and now here first of all I want you to just create a folder and now here I want you to just create a new file so if you want to create a new file in a visual story coder you just have to click on this file icon right here so how your mouse over to it and it will select new file so if you just click on that and it will now gives us this input box right here so inside this input box we can write uh like the name of your

File so in this case you can give any name you like like if you want to give name of like orange so you can give him orange you can give him your own name if you want to you can give him like apple you can give him like any name you want but in my case I'm going to just give a name of like index and remember you have to write HTML extension this is known as extension and it will tell our browser that we are working on HTML file okay so if you don't provide

that here you can See that uh logo kind of thing is gone from here and if you do provide HTML and what is HTML stand for HTML stand for like hyper text markup and language okay so you just have to provide that you can give any name you like but you have to provide this HTML at the end of the file so in this case I'm going to just write index and then HTML and now if I hit enter right here and boom here you can see we have our first index.html file so now the

next thing I want you to install In your visual story recoder is something called extensions so let me just show you that in your case the extension look like this so I want you to just click on these four boxes right here not this one not this one not that one not this one but I want you to just click on this four boxes let me just zoom in a bit so you can see everything I want you to just click on these four boxes right here in my case I'm going to just hold control

and then I'm going to Hit q and then I'm going to just click on this extension and you don't have to do that and now here you can see I have a lot of extension which I install in my visual story Corder you don't need to install a react extension and stuff like that but for this course I want you to install a live server and also this prer okay so I want you to install both of them in your visual stud Corder so if you also want to install this monai Pro theme so you

can also install that but In my opinion like you don't have to if you want to install it so you can but if you don't want to install that you just like don't install it so you have to install this live server for this course and you also have to install the prier coder for this course okay so this is it now I want you to install both of them like live server and then preer extension and then what do you have to do then instead of clicking on these four boxes I want you to

just click on These two file kind of icons so in my case I'm going to hold control and then I want to hit q and then I'll just click on this explore and it will now giv this this index.html file right here okay so I want you to just click on these uh two kind of files anyway so now we successfully created our index.html file and I'm assuming that you already installed there two extension which I just show you now the next next thing which you have to do is that you have to Hit control

and then a comma okay so I want you to just hold your control key and then I want you to just hit this comma right here not a period like not this do but I want you to hold control and then hit comma so if I just hold control and hit comma so here you can see it un log uses these settings right here and now if you want to remove this sidebar from your eyes so you can just hold control and hit B and it will now remove there if you hit control if you

Hold control and hit B one more time so it will now show it and hide it like that okay so now here you can see we are now at the setting right here now I'm assuming like you've already installed that two extension in your visual story coder so what do you have to do you just have to type like f o r m a t and then here you'll find option like format on save so by default it will be set to uncheck and now I want you to just click on this check so it

will just install or Not install like any anytime you save your file so it will just format your document and you don't have to worry about saving and all of that crazy kind of stuff which I'm saying right now which I'm going to show you everything just like one by one and now want you just click on this x so now it will just remove that anyway so I'm going to just zoom in a bit and you don't have to zoom in if you want to zoom in or out in just St Corder so you

just have to hold Control and then hit plus so it will just zoom in and then if you hit control or hold control and then if you hit minus so it will just um minus or zoom out okay so this is how you can zoom in and zoom out in which story recorder so now the first thing I want you to notice and I'm going to also hide that sidebar and you don't have to so the first thing I want you to know is the structure of HTML so what is the structure of HTML first

of all let me Just tell you like uh HTML structure can be a little bit horrible at first if you see that but trust me it's not that much like hard to learn it's very easy thing to learn okay so you just have to first of all write a less than sign and then this explanation mark and here you can see viral story coder is already helping us like uh do you me like Doc type HTML yeah we do mean do type HTML so if you click on that and here you can see it will

now autocom completed for You so first of all I want you to just write a list than sign and then this explanation mark so if you want to write this symbol like explanation mark so you just have to hold shift and then hit one so here you can see it l gives us that explanation mark right here I'm going to remove that so first of all let me just say that one more time you just have to write a less than sign then this explanation mark and then uppercase doc type so you just have to

write that Upper case you cannot type there like a lowercase doc type it's not a valid syntax you have to write that in uppercase so you're going to be writing like D or c typ e okay so here you can see it now highlighted as red and then in lower case you just have to write HTML and you don't have to worry about like what is this doc type HTML will do for us which I'm going to tell you in a second but you don't have to worry about it for now so I want you

to remember That anytime you want to work with the HTML first of all you have to create your file somewhere in your machine and now the next thing which you have to do is that you're are going to be writing this doc type HTML so these are important stuff now the next thing which you have to do the next thing which you have to do is that you just have to write HTML and if you are using a visual story coder then I want you to just hit Tab And it will auto complete it for

you okay and then I want you to just hit enter and now here you can see now gives us our root tag right here like we have HTML opening tag and then we have a HTML closing tag now you might be thinking like what is the opening and closing tag anytime you want to work with the HTML tags first of all you would open that and then if you want to close that you'll just write this slash right here at the end so it will now just close it For you okay so here you can

see we have a doc type HTML then we have our HTML opening tag and then we have HTML closing tag and we are going to be also learning about something called a self closing tag which you don't have to close which will just close itself okay you don't have to worry about all of that for now but I want you to just remember first of all we are going to be writing a doc type HTML then we are going to be writing HTML opening tag and Then HTML closing tag and now inside this HTML what

do we have to do we have to write another tag which is known as a h e a d okay and if you're using visual story Corder you just have to hit Tab and if you are not using a visual stud coder so what you have to do first of all you have to hold Shi shift and then the less than sign and then you have to write manually like h e a d and then you have to write a greater than sign and here you can see my visual story Corder Will help me auto

complete it for me okay so first of all we have a HTML then inside this HTML we have head opening tag and then head closing tag right here so here you can see we have this slash right here which means like closing tag now what do we have to put inside this head area well we just have to write our title okay so I'm going to just put like for now I'm going to just write like t i t l e and if I hit tab right now so it will giv us title opening Tag

and Title Closing tag right here okay so anything we put inside a title area will show up at the top of our page so in this case we going to be just writing like uh I don't know I'm going to just put my and you should put your name so I'm going to just put like HX n w e b d e v so hen web and now if you s file so I want you to just right click on anywhere inside your HTML document then I want you to just scroll down and here you

will find this open with live server and remember This option will be only available if you already install live server extension in your machine if you did not then I'll suggest you to install it first of all so then click on this open with live server and it will now open your file in a live server just in a second and now here you can see it will now open our file in a live server and now it's totally blank at the moment now you might be thinking like we already write our name right here

like hosan web Dev right here where is that located well you can see that right here like we have this hosan webd if you just remove that and we didn't provide anything and if you just save our file so here you can see it will take this link and it will put it right here so here you can see we have this kind of a long name which will come by default once we install a live server so live server will help us uh by providing this one 127.0 and stuff like that okay so we

Have to provide like some sort of a title for our page and then now the next thing which you have to remember is something called a body so if you just write a body and if you hit tab it will L us us like body opening tag and body closing tag right here and it will not be inside a head area it will be inside a title area so now let me just put there right here so you can see everything a bit better here you can see we have first of all a doc type

HTML Then we have a HTML opening tag and then the HTML closing tag and then inside this HTML we have a head opening tag and then head closing tag and inside this head area we have a title opening tag then we have some sort of a title and then we have a title closing tag then outside from this head area we have a body opening tag and then body closing tag right here and anything we write inside this body except comments which we are going to be learning very shortly So anything we WR inside this

body will show up to the user so in my case I'm going to just type some gibbish right here and you can write your own name or whatever kind of text you like and now if you save that and by the way you have to remember these saving things which I'm talking about so if you didn't save your file now let's suppose we just write this kind of a gibberish or you know I'm going to just put my name and if you just write there and we didn't Save our file and if you go to

our browser and if you refresh nothing will show up right here and also right here why is that that's because we write our code but we didn't save our code in your machine so if you want to save your file so first of all you just have to hold control and then hit s so it will save your file and now here you can also notice that we have this circle right here if I hover my mouse over to it so it will now become X right here and by Default it will be a circle

that's because we didn't save file and it means that you don't save this file like this current file you've worked on if you just write a space it will also gives us like the circle right here it means that you have to save your file so if you want to save your file so you can just hold control and hit s button so it will just save your file or you can just click on this file and then just scroll down and here you pH like a save and Save as uh kind of a buttons

right here so sa will allow you to save your current file and save as will allow you to save it to somewhere else okay so I'm going to just click on this save one right here and if we check our browser so here you can see we get hosan right here and as I said anything we write inside this body area will show up to the user so this is how we can see or Huzan right here so now let me just write something else like in my case I'm Going to just put like hosan

and then webd as well and now if you're in sa file so here you can see we get this circle right here and now if I want to save my file by holding control and hit s and now here you can see that circle is replaced with this x right here okay so here you can see we are now getting this hosan web dev inside our body right here okay or web page to be precise and in this course I'm going to be zooming in and zooming out so that you guys can See everything a

bit clear so if you want to zoom in and zoom out at the same time so you can just hold control and then inside your mouse you can just scroll in or scroll out okay so scroll in will allow you to um uh zoom in and then scroll out will allow you to just zoom out or you can just also hold control and hit plus plus plus plus plus so it will just zoom in in in and you can also hold control and minus minus minus minus so it will just zoom it out For you

and the default size will be just 100 so the default size will be just 100 it will look like this so now that we told done with our structure right here the structure of HTML and this is how the HTML structure look like now let me just explain all of them one by one okay so first of all we have this doc type HTML and this is also known as a DTD and DTD just stand for like document type declaration I know these are a lot of Word you don't have to worry about any of

them but I'm just saying like for those people who are interested in this Theory kind of stuff so this doc time HTML will just tell our browser that we are working on a HTML 5 document not HTML 4 not HTML 3 not HTML 2 not HTML 1 but we are working on HTML 5 so what is HTML 5 HTML just stand for like hypertext markup language and it is the fifth version of HTML okay and this version allows us to put a video and Audio files as well inside a browser then we have a root

tag so here you can see we have HTML opening tag and then HTML closing and these are also known as a root tag okay because these will be the root of all of our coding then we have a head area and inside this head area we are going to be putting our metad datas like we going to be putting metadatas later but you don't have to worry about metad datas for now and we are going to be also linking it with our CSS files and JavaScript files and stuff like that but you don't have to

worry about all of them for now as well title and you already s like what a title will do for us and as the name suggested it will be the title of our web page and here you can see we have the title of our web page right here okay and then the final thing and as itself says like we have a body area and then body just stand for like a body you know so in anything we write inside a body will Show up to the user it doesn't matter if you just write like

one two three and stuff like that so if you sell a file and here you can see we are now getting these numbers and if you just write some gibberish like I don't know and if you just saell that and here you can see we are now getting these gibberish right here and in and we are going to be writing a lot of stuff inside of body area so this was kind of a theory you can say and now in my case I'm going to Just put my name like hosan web dev and now if

he sell file and boom we get a hen web right here inside our browser so this was kind of a structure of HTML and also how to set up your machine for writing your coding all right so now that we know enough about the structure of HTML so now the next thing which we are going to be learning is something called headings in HTML a head ings are just a main title or the subtitle of your page okay And in HTML we have headings from H1 through H6 like we have H1 H2 H3 H4 H5

and H6 okay so first of all let me just write some code then you'll get to know what I'm talking about so now I'm going to just remove my name from here and I'm going to just write like H1 and I'm going to hit tab right here so what do we get we get like H1 opening tag and we also get H1 closing tag right here and anything we write inside there will be our first heading okay and this one will Be the top or the best heading of our page or you can also select

the main heading of our page so in this case I'm going to just write like heading and then one and now if i s my file and if I preview that and here you can see it log uses this huge heading one right here okay so I guess I already zoomed in and this is how it will look like by default okay so now I want to just zoom in a bit so that you guys can see everything a bit clear so this is H1 like heading one And now if you just try like H2

right here and if you head Tab and now here you can see log uses H2 right here like heading two and now if you just write like heading two and if you save that and this one will be a little bit smaller than the first one because this is the subheading or the second heading of our page then we have H3 so now let me just write H3 in here and if you hit Tab and now it will gives us heading three opening tag and heading three Closing tag so I'm going to just write like

uh heading three in here uh th hrou e so we have heading three then we we are going to be writing H4 of heading four and then H5 of heading five and let me just write like heading five to lowercase and now let me just finally write our H6 and this one will be the final one here I'm going to just put like heading uh six right here and now if you just sell file and boom this is how it looks like so the first heading We have is H1 and this one will be the

best heading right here then we have H2 H3 H4 5 6 and so on and so forth and now if you try to write like H7 if you just write H7 if you hit tab it will not gives us any code completion why because we don't have H7 in our HTML so that's why our visual stud coder is not helping us in this case so now if you just try to write it like manually like if I just write H7 and if you just close that and if I just type something like uh I don't

Know I'm going to just write my name like hosan in here and you know what and I'm going to just write Z without any code whatsoever so now let's just see what will happen so for that I'm going to just comment out all of this code or you know I'm going to just cut that for now and and now if you save that so here you can see we have R H7 and we also have just a simple text right here so now if you save that now here you can see our browser will treat

this Ed S Just like no code what so if you just right click on that and then if we have over to this inspect and then we have to click on that so it will now open us this uh developer tools which you're are going to be learning a lot about these developer tools but you don't have to worry about any of them for now so what are we getting we are getting first of all the doc type and by the way if it's by default like console so you can just click on this element

and I guess it Will look like this in your machine this is the first time you're opening that so this is how it will looks like and now if you want to take that like uh to the left side or to the right side so you can just click on that and you can either click on this one and by default will set like this one and you can also just set that right here like to the left or to the right so if I just click on the right one and this how it will

look like so if you want to zoom in so I Want you to just hold control and then the mouse in like Mouse scroll in and like zoom out you get the idea so here you can see we have all of the HTML code plus a little bit more stuff which you don't have to worry about it for now so first of all we have this doc type HTML as we learned that just a second ago then we have our HTML opening tag HTML closing tag then we have our head area right here so we

have our title and then we have our script which is coming from A local server which we've installed in our uh visual story recorder which you don't have to worry about it for now so I'm going to just collapse this one then we have our body and then here you can see we have this H7 right here so I want you to just notice that so we do have this H7 right here but our browser will treat it like a simple text right here okay so both of them are looking the same and both of

them will have the font you don't have to worry about the font Sizes and stuff right now but both of them will just like or will treat both of them as just a simple text without any code and we cannot select that once we jump into a CSS and we cannot do anything with that so in HTML we have headings from H1 to H6 not more than that or not less than that okay so I'm going to just cut this one for now and now we have our screen right here and now what we have

to do I'm going to remove all of that and now I'm going to Just hit control V to paste all of my previous content which I just cut and now if you save there and this is how our headings looks like like by default okay so now we are totally done with the headings so the next topic which I want to show you is something called comments so what are comments as the beginning of this video I said like anything we write inside a body tag will show up to the user except comments and you

may or might see this one which I wrote in the Beginning of the course but I guess you didn't saw that so now let me just talk about a comment so a comment comments as the MS will be a comment for ourselves so now let's suppose if you work on this file like we just write our doc type HTML and stuff and now that we know like what is a heading and H2 and H3 and so on and so forth and now if you want to write a comment for yourself or a note for yourself

so for that we are going to be Writing or for that we are going to be need something called a comment so later like maybe a month later or maybe a week later and if we open our file and we forgot like what is H1 H2 and H3 and so on and so forth so we can also write or notes for us so we can if you want to write a note or a comment for yourself so for that we have to first of all write a less than sign and then this explanation mark and

then if we just write two dashes right here so here you Can see log uses this kind of uh syntax right here so we have a comment opening and then we have a comment closing right here so anything we write inside these comment will not show up to anyone because they will be ignored by your browser so in programming General if you want to write a comment like let's suppose if you want to write a comment for in Javascript file so it will be ignored by a compiler but now in this case our compiler is

our web browser so Our comment will be ignored by our browser okay so instead of writing all of these gibberish so I'm going to just write like uh maybe uh We've uh worked on headings okay and we have like you know what we can also write multi-line comment or we can also just write uh new comment if you want to and by the way the shortcut for creating a comment is there you just have to hold control and then just hit slash so it will now just create a new comment area for us okay And

now let's suppose if you want to comment all of these area out so for that we can first of all select all of these area or you know what we can just like select single item okay like we can also comment just a single element or we can select all of them so first of all we have to select some area or some specific code and then we have to just hold control and if you hit slash right here so we'll now just comment all of these codes now if you sa file and boom Everything

is gone from here but if you just right click on it and if you click on this inspect area and now if you just expand this body area and now here you can see we have our comments right here like we've work on headings and we have heading 1 2 3 4 5 and six right here and by the way you can also see this code injected by live server and here you can see this comment is coming from a live server and which you don't have to worry because This is not or code and

this is not our comment okay so comment can be helpful inside or coding but not outside from a coding okay so I just kind of want to show you this um developer tools so this is how you can find that so I'm going to just click on this X and it will disappear and now if you want to uncommit this code so first of all we have to select that so now that we selected and now we have to use that old command like control or command and then Slash so boom let now come up

here again and now if you s file and now here you can see we have our coding back right here okay so now we just write this comment for ourself but we don't want that so we are going to just writing like headings in this case and now if you save that nothing will happen as you saw just a second ago now the next topic which you're going to be learning about in this section is something called paragraph so we don't have to write a Comment for every line of code we write but we can

just write a notes for ourself you know so if you want to write a Noe so in this case I'm going to just write like paragraph right here so now if you are working on a paragraph so what do we have to do we just have to write p and if we hit tab so it will not gives us paragraph opening tag and paragraph closing tag and anything we write inside this P tag will be or paragraph As the name suggest so I'm Going to just remove this gibberish from here and I'm going to just

put my uh own name right here like husan maybe or husan webd or you can just type whatever you want okay so in my case I'm going to just stick to husan web dev and now if you s our file and here you can see we are now getting this H web d right here so if you just right click on that and if you click on this inspect and by the way if you want to get this inspect area without clicking on a specific elements You can just hit that FF so it will now

just uh close it and if you hit F2 one more time so it will now open it right here okay and I guess by default it will just open the console area and you can just click on then the elements tab so it will now just open the element step for us and now here you can see we have this paragraph opening tag and paragraph closing tag and then we have or content inside this paragraph Okay so these are the headings and Paragraph in HTML the next topic which I want to show you is something

called laurum ipsum so you know what first of all I'm going to just clear out my body so that we can work on a lauram Epsom here you can see we just have our structure and then we have our empty body so if you save that and nothing will show up right here because we don't have any content inside this body area so now if you want to work with a lurm if some so in some cases you would need A lot of text in your project like like a lot of text like just random

text so you cannot write random text like that it will look really messy and really ugly for other engineers and also for yourself like you cannot write that you can like you totally can but it will look ugly so if you just start you know I'm going to cut all of these gibberish from here and I'm going to just start p and inside this P I'm going to pass all of my text by pressing control or Command V so now if you save that and here you can see we are now getting this gibberish but

you can also notice like first of all it took a lot of time to write so we just have to write like all of these random uh words right here and now the next thing we have like it looking a bit not a bit but it's looking totally messy and totally ugly okay so unreadable if you save this more text so here you can see U they are looking totally ugly so now in this case we are Going to be removing all of these text from here and instead we are going to be writing something

called lurm ipsum a lurm ipsum is nothing more but just a dummy text and I can just guarantee for visual story coder and I cannot guarantee for other coder out there like jetb or Adam or stuff like that like Sublime Text I cannot guarantee for that but in visual recorder if you want to generate a lot of text like a lauram ipsum so for that we can just first of All write a lauram keyword and then we can specify the amount of words we need okay so if you just click on this emit abbreviation so

here you can see just gives us all of these random words right here so you know what I'm going to just put like maybe 20 words or you know what I'm going to put like 10 words for now and if I hit tab so here you can see it will L uses like 10 words and if you save that and boom it will Lo uses a 10 words right here and my browser will by Default detect like Latin words and I guess it's not a Latin it doesn't even mean anything like we have lmsm doar

Emit and stuff like that I can't even pronounce the other words anyway so let's suppose so that was just a I guess 10 words I just wrote we can also write like a first of all just write a lurm keyword and then we can specify like maybe 100 words so I'm going to just write 100 and then I'm going to just hit tab so here you can see it now just Generate 100 words for me so now if you s file and here you can see we are now getting 100 words right here okay and

now if I want to undo the steps so we have to just hold control and if you hit Z so we'll just undo it one more time so now we have to do that one more time by holding control and Hing Z so it will just undo that step for us and we can just write like maybe thousand words if you want to in some situation we would need like thousand words uh I guess that That situation won't come so I'm going to just write I'm going to hit tab right now and it will now

gives us thousand words right here so now if I just save my file by holding control and hitting s and boom it will not use this thousand words right here a lot of lurm ipsum and by the way if you want to check out the lauram ipsum website so you can just go to your Google and here you just have to type like um lauram ipsum okay so here's the website which is known as this Lipsum decom so you can just click on that we have just lipsum decom it will now bring you to this

page right here you can learn more about lauram ipsum or you can also copy uh these actual text if you want to so Laur ipsum is simply text and blah blah blah you can learn more about but my suggestion do not waste your time on learning about lurm ipsum you just remember this one line like lmm is simply a deit text okay so if you need some demit text over there You can just write a lurm keyword and you know what I'm going to hit contrl z contrl z one more time and it will allow

just undo that step for us so that was it about for LM ipsum I'm going to remove that and sell file and boom we don't have any content whatsoever inside this page right here okay so so that was just kind of it about for lurm ifm paragraph and headings now the next topic which we are going to be discussing is something Called lists in HTML in some situation you would need your data to be in order and in some situation you would need your data to be in order like let's suppose if you are building

some sort of application uh for maybe a lot of fruits so you would need your fruits to be in order like 1 2 3 4 5 6 and thousand th000 and stuff like that but in some situation you would need just a bullet points like bullet one bullet two and stuff like that so for that we can use a List in HTML so how can we go about doing that so in this section we are going to be learning about three kinds of list in HTML and I guess you can also find like more than

three ways to write your lists but I will not suggest to waste your time on list because you'll need a list just in a very tiny scenarios but not in a lot of cases okay so we are going to be just writing first of all the order list and then we are going to be writing uh Unorder unordered list and then third list which you going to be learning is something called nested and then list okay so we are going to be starting from the first one which is a order list so anytime you want

your data to be in order so for that we just have to write like o l and if you hit tab so here you can see log uses like uh order opening tag like oil opening tag and then oil closing tag and this o just stand for like uh order list Like order and list like o l okay so now inside this o we would just write like Li I and if you hit tab certain log uses like Li opening tag and then Li closing tag and this Li just stand for like list item like

Li I list item okay so here you can just put your data if you want to like in my case I'm going to just put a Technologies HTML then we can just write like countless allies inside this oil like it doesn't matter like if you write 10 20 100 200 like 2000 or stuff Like that we can go crazier if you want to but in this case we are going to be just writing like maybe three of them or maybe four of them I'm going to just write like lii one more time and here I'm

going to just put like CSS so in this case we just write like first HTML and then CSS so now let me just save that file so that you guys can see what I'm talking about and now here you can see log uses one period or dot whatever you want to call it and then we have our HTML then we have second and then we have a CSS and this list can go on and on and on and on so you can write like as many list item as you want so I'm going to just

write like l i one more time and here we are going to be just writing like JS for JavaScript lii for react and this list can go on and on so if you save that and now it will gives us like uh one HTML 2 CSS 3 jump script and forth react okay so this is it about o like a order list and then inside this Order list we are going to be writing our lii for a list item okay so now let's just learn about something called unorder list in HTML okay so in some

situation we would just need like a bullet points we don't care about like a main list so for that kind of situation we can use unorder list so anytime you want to work with unorder list so for that we just have to write like u l and UL just stand for for like unorder and list okay so if you hit Tab and now Inside this Ur what do we have to do we have to just write our lii opening tag and all closing tag and what is the AL mean I'm just asking you a question

like what is the Ali mean I just I just told you a second ago so I want you to tell me like what does the LI mean I'm waiting I'm just kidding like Li just simply means list item so here we just have to write l i and if we hit Tab and now here we can just write like uh maybe random people name so I'm going To just write like a Peter and then I'm going to write one more aine and I'm going to write like John then write aine of John do let me

just write like another Ali of my own name like hosan now let me just create another one so it will be maybe Eric so I guess that would be fine for now so if you sell file and boom so here you can see this one will be order lless and this one will be un orderless so here you can see we are getting these bullet points right here So anytime we just write on new list item and it will gives us a new bullet points right here okay so this is it about our order list

and unorder list so now the next topic which you're going to be learning is something called a nested list so what is a nested list even mean a nested list is a list inside other list I know I'm just talking like a crazy person so let me just write some code then you'll get to know what I'm talking about so un nested list is a List inside another list so that is known as a nested list so first of all we have o like order list o opening tag and O closing tag and now inside

this o we are going to be writing our l i for a list item and now here we are going to be just writing our s like let me just write like my own self like hus and hosein know this kind of Technologies so now here this is a parent uh list right here so now inside that we are going to be creating a new list so I'm going to Just write like ul and if I hit T Right Here and Now inside there we are going to be just writing Li I right here here

I know these stuff can be a little bit confusing and you don't have to go that much crazy I'm just showing that for those people who are interested in a lot of list but you don't have to go like that much crazy if you don't want to you can just work with a ul and oil if you want to so I'm just showing you for those people who are interested in these UL or Nest tags and stuff like that so first of all we have our o tag like o opening tag and oil closing tag

then we have just one single item inside there and then we have another list right here inside this list so here we can just write like heno like nodejs you can put whichever kind of text you like and then let me just create a new lii like SQL for structure query language lii for Python and also Li for my favorite programming languages is a goang so I'm Going to just save my file and now here you can say this is what the nested list looks like first of all we have a one list then we

have another list inside that list so this is known as a nested list okay so now let me just zoom in a bit so you guys can see everything a bit better okay so this is the first list like a parent list and this is the children of this parent list okay so now we are getting this nested list all right so that was it about ulol and then The nested list so so I'm going to select all of that I'm going to delete all of them and now if you s that and boom everything

is gone from our body right here now the next thing which we are going to be learning about is something called images is that how can we render our images into a browser it can be either our own images or it can be some other image on the internet so how can we render images into our browser so for That we are going to be using IMG tag so there are two ways to render your images the first way we are going to be learning about in this video is something called a local images okay

so those images which are your own images like those images which are currently available inside your machines and then we are going to be learning about remote images those images which are not inside your machine but somewhere on the internet and you have access to that Like uh maybe you just copy a link from somewhere so we can also render that if you want to so first of all let's just learn about local images so for that we would need to download an image into our machine and then we have to place that inside our

directory and then we can work with that so the best places in my opinion to find images are two places the first one we have is unsplash.com and the SEC pixels.com or just a pixel would be fine so I'm going to just Search for that and I kind of forgot it's URL and here you can see we have www. pixels PEX ls.com so we can just click on that one and boom it will not open it right here and you can also find like videos and stuff like that so we can just search for images

if you want or you can also choose it from here uh I don't know what's happening to my Internet it's taking a bit of time to render these images anyway so we can just choose images from here or we can Just type our own images uh for maybe like a hacker or hacking or you know I'm going to just search for nature so I'm going to just hit enter right now so you don't long use all of the nature images right here okay so you know what all of them are totally crap I'm going to

click on this one because I really like a dark and I'm going to also search for images in this tab as well so I'm going to just search for an n okay so it will not gives us this Image and shout out to this person Jack uh Crain sorry I can't pronounce your name Buddy and in this course I'm not going to be pronouncing people's name because in some cases I do mispronounce people's name and then I feel weird about that so I'm not going to be pronouncing anyone's name in this course anyways so if

you want to download this image first of all I want to say thank you to this person and then we can just click on this free download or you can Also click on this icon and you can either download the original size or the large size the medium one or the small one or you can also write your own customized size if you want to but in my case I'm going to just uh click on this one or you know what we just have to click on this download button so now just download this image

into our machine all right so now that we download this image right here so what do I have to do I just place that inside My desktop and by default it went to uh downloads folder so I'm going to just grab that from here and I want to put it inside this HTML and CSS folder and now if you open our visual stud coder and now if I hit control B right here so what do we have we have this image right here so if I just click on that and it will not open this

image in our visual story coder and this is how it looks like right now now if you want to render Images into our own website so for there we can use just a IMG so if you just write like IMG and if you hit tab so it now gives us a few things first of all it will gives us this IMG tag right here and then we have two attributes the first attribute we have a SRC and which stand for Source like the location of the image and then we have a art and this alt

stand for the alternative text like if this text like if this image is available so show this image so if this Image is not available then show this alternative text and you can also remove this alternative text if you want to like if you don't want to like if you don't want to provide Al alternative text for your image so you can also go with that so now if you want to render your images first of all you have to provide the URL or the link or the location of your image inside this SRC and

then in this quotes right here so now that we know that our imag is Currently available inside this directory like inside this folder so for that what do we have to do first of all we just have to hold control and then we have to hit space so here you can see it all now shows us all of the files and folder which are currently available inside this directory right here so by default or Not by default but currently we just have this index.html file and then we have this pixels and then this image so

I'm going to just select this One and now here you can see this is the actual URL of that image okay so for now we are going to be just removing this alternative text from it so I'm going to just remove that and now here we just have to close that by just providing a for not a for slash but just a slash right here so now if you s our file and boom here you can see we have that image but it is supremely massive right here like we cannot see even the road which

used to be inside this image let's just Say oh my goodness it's too much okay it's too big right here Arts now we inside in a road now we can see that now if you want to give like maybe your own width and height so for that we can provide our own width and height right here but this is not the best way to provide a width and height to your images and later in this course we are going to be also learning about how to provide width and height by using CSS and CSS is

a new technology which we are Going to be also learning in this course but for now we will just go with the ugly and crazy way so we just have to first of all write like a width and if you hit tab so it un log uses this equal to sign and then this double quotation if you want to write it manually you can also write it manually so now let's just specify how much the width should look like so we just have to provide like 200 pixel and you don't have to worry about these

pixels now but you just have to Type it right here I want you to just type it and now here we just have to place our height right here and if you hit Tab and we also have to give some sort of height maybe like 200 pixel in this case and now if you sell file and boom okay it will take a little bit of time and now boom here you can see we have our image 200 by 200 you can increase or decrease the sizes if you want to but now congratulation we successfully render

image into our Browser right here okay uh okay so this is kind of the bad way to write width and height first of all let me just say that and we can also write alternative text but we would write alternative text for the scenarios like these one let's suppose if you create a new folder and by the way if you want to create a new folder in a visual story coder you just have to click on this uh folder icon and here you can see it now gives us like new folder if you just click

on that and Here you can also see the folder icon right here so we have to specify some sort of a name right here so in my case I'm going to just give a name of like images and now if I hit enter and now we just have to grab this image from here and now let's just push it inside this images folder okay so now our imag is currently located inside this image right here so what is break inside our code okay so now if you just save our file and here you can see

our code Breaks right here and we are getting like a width and height that's because we provide it right here like manually so if you just cut that and if you sve file so here you can see it don't long gives this kind of a broken image right here which means like nothing like no image it used to be an image in here but we don't have that image available no more okay so for that we can write over alt as we saw just a beginning of this section like alternative text so we can Just

provide anything we want but we're not going to be providing anything we want so we will just provide some sort of a message based on that uh kind of image so in this case I'm going to just write like nature image or used to to be a nature image so we just s file and boom here you can see we are now getting this nature image kind of text right here and it will tell the users like your internet connection is wrong or something went wrong in this website That's why we not getting that image

but here you will see the nature image okay so we are just telling that kind of like a message to our users like here used to be a nature image but we don't have that image available for some sort of reasons so we can also provide a width and height Bank like 200 pixel by 200 100 pixel height and if we save that and just it will not do anything for now okay now we do provide our width and height right here but we don't have that Image working now what do we have to do

to bring our image back so first of all we just have to remove all of this stuff from here and now what we have to do I already show you the shortcut but if you forgot in some case so you just have to hold control and if you hit space so it will not use everything which are currently available inside this directory so we will just select the images folder then inside this images folder we have this uh image right here So if you click on that and if you s file and boom it will

Lo brings us our image back right here okay so this is how we can work with the paths like this is a SRC like a source the alternative text the width and height you also learn about width and height so this is it about a local images like those images which are currently available in your machines right here so now let me just show you the remote way of writing your images so how it will be looking like First of all we will need some image to grab first of all so for that we can

just either go to this pixels website right here or we can also go to this Nash one so here are aesome images I'm going to click oh okay there was a network error I'm going to close that for now anyway so I don't know which one sure I pick I'm going to click on that one and then okay so it's not running and here you can also to see that's Because my internet problem and here you can see this image is broke and we cannot see this guy image as well so I don't know what's

up with my internet connection let me just see that okay Network it's connected but I don't know why just refresh my browser one more time so that we can see the speed of our internet okay so we are back my internet was so so low I don't know what happened but you know what I'm going to just click on this image for now so it's Taking a bit of time and shout out to this person and he's available for hiring if you want to hire him out so now let's suppose we just like this image

so we just have to right click on it and then not a copy image but a copy image address so we just have to click on that and then go towards CSS or not CSS but or HTML file but we just have to write IMG and if we hit Tab and now inside a source we don't have to write like a whole control and space and stuff Like that here we just have to paste that image address which we just copyed from here and now here you can see we have that image address and we

not going to be providing anything for the alternative text so now if you sell file and now here you can see we have this massive image if you want to make that smaller or bigger so for that we can write or attributes like width of maybe 400 pixels and height also 400 pixels so I'm going to S my file and Here you can see this is how it looks like so you know what I'm going to provide 200 by 200 so both of them look the same so here you can see both of them are

looking the same and this is how we can render images using our HTML so that was it about for remote images and also for local images but I just kind of want to mention one more thing I'm going to remove both of these images from here and now let's just talk about something Google Images you might be Also thinking like uh husan we already have a Google Images so why do you have to search for unsplash or uh the pixel ones so now let's just uh go to Google Images uh maybe I'm going to just

write nature in here and then we have to just go to the images right here and now here let's suppose if I want to select maybe I don't know I'm going to select this image uh yeah I'm going to just click on this image or you know what I'm not going to be clicking on there I'm going To right click on it and then here you can see we have this copy image address so I'm going to click on that and now let's just render that so if you want to render that image so for

that we going to be just writing like IMG and now just I want I want you to just notice there so if you hit control V right here and boom okay so look at this crazy URL right here this is why you are not going to be using a Google Images look at this URL right here so it's supremely massive Now you might be asking like who you have zoomed in a lot so you just have to zoom it back no we don't have to zoom back this is a long URL so if I just

maybe zoom out like Zoom back back back back back so here you can see this is how the coog images URL look like oh my God it's supremely ugly and nobody wants to work with that it's kind of like SVG or maybe it's thousand time long than SVG and you don't have to worry about svgs which we are going to be also Exploring in this course but what do we have to do we have to just undo this Stu and now uh my recommendation will be to never never use a Google Images so there are

two ways the first way that we already saw that the URL will be supremely long so if you just put this URL in here and if you save our file so it will gives us that image right here but look at the quality of this image I mean like look at it's supremely awful let's suppose if You want to like uh render this image so we just have to copy that like a copy image uh address and now let me just render this image as well right here so let me just write image and here

I'm going to paste this link so here you can see like we have kind of a long URL right here but it's not that much like compared to this one so if you save that and here you can see it long gives this high quality image right here so if you just write like maybe uh width of 200 Pixel and height will be also 200 pixel and if you sa that and here you can see I want you to just notice the quality like like this one is supremely blurry and this one is sharp and

awesome okay so this is how you are not going to be using any Google images and in some cases the weird thing is that in some cases they will just remove that image from Google because you don't own that image so never ever use a Google Images I'm going to just remove everything from A body and I'm going to zoom in a bit s file and everything is clear so that was it about images in HTML now the next topic which we are going to be learning about something called links and hyperlinks okay so in

this video we are going oh not in this video but in this specific section we are going to be learning about links and hyperlinks what are links and hyperlinks so a link as the M suggest it will just link or web Page to some other web page like maybe for some cases if I just write like uh so for some cases if I just write like paragraph and then let me just write like uh check out this awesome um site maybe or you know what check out this awesome game or whatever and here you don't

have to worry about this coding which I'm writing but here we can also just place and then we just uh have to write like www or not https then double call in www Dot maybe some random side you know I'm going to copy this URL or maybe this this URL from here and I'm going to paste this URL right here and we just have to write like awesome game okay so we can just trick our users if you just s file and if you just click on that here you can see we have like and

check this awesome site and if you just click on that it will now brings us to a visual story coder so this is a link okay and never use this kind of uh Language in your sites so this is a link you don't have to worry about the syntax but it will allows us to link from one page to another page in some sort of other server on the internet okay so it will just allows us to link to other website on the internet so what is a hyperlink a hyperlink will allows us to link

to our own site like in some situation let me just go to this one or you know let me just go in here here you can see we are now inside this Google Chrome homepage right here but let's just pretend like this is your own website right here here and if you just click on maybe uh this feature one and if you want to go to the overview so if you just click on that it will now brings us to this overview section right here so this is our own site and now they are known

as a hyperlinks the syntax will be totally the same but they are known as Hyper links uh link that to some sort of other website on the Internet like in some cases we would just get to see maybe uh chome these are all about a crew but I guess they didn't provide any other links to other people but maybe uh okay here you can see we can now just click on this person uh profile and if you click on that and will now brings us to another kind of a Twitter website right here so this

is now known as a link and I'm going to also ask from a Google like what is the Difference between links and hyperlinks but before we do that I'm going to remove this cording from here and I'm going to zoom in a bit so you guys can see everything a bit better and now if you want to link to some sort of other side on the internet so for that we can just write like first of all a not just uppercase but a lower case a and if you hit tab so here you can see

it will now gives us like a opening tag and then a closing tag and then it will give us This H Rift attribute and here we are going to be placing the link uh where we want to redirect our users but first of all let me just write maybe uh some sort of a label for myself like in my case I'm going to just write like hosen yeah hosen would be fine and if you sell file and here you can see log uses this link right here so if you just click on that so nothing

is happening because we didn't provide anything inside this HF attribute so that's why it's just Refreshing overs side like I want you to just notice this area here you can see like anytime I click on that so it will just refresh our web browser right here okay so we can specify the link if you have one now let me just write like uh https I'm going to link it to my own YouTube channel so www.youtube.com SL I'm going to zoom out of bit and then let me just write this add symbol and hen web de

and I just got this label uh a few days ago and you Also check out my subscriber in a second and I'm going to save this file and now if I just click on this hosen and it will brings us to my own YouTube channel right here and congratulation we have 887 subscriber in one year or maybe more than one year so if you just go back and this is how we can link that to our not or own web pages but to those pages which are available on the internet somewhere so we can just

remove that and and we can also remove this hosan and we Can just place like maybe Twitter for this case we can also link that to Twitter if you want to so we can just write like Twitter instead so if you sell file and now here you can see it long uses Twitter that's because we provide the label to be Twitter we can also write banana.com and it will still brings us to that Twitter because uh as the link we provide a link to be this Twitter okay so if you just click on this banana.com

so it will now still Brings us to this uh Twitter right here and that's kind of a thing maybe just change this one to twitch.tv or you know what I'm going to just write twitch right here and let me just write TW TC for the twitch and then here. TV and if you save that and now if you just right click on it and then if you click on this inspect area so here you can also see like so in some situation you're not going to be sure for the links where this link will go

so You can just right click on it and then check it out inside the developer tools like here you can see we have this anchor tag then we have a Atri attribute and it goes through this twitch.tv okay so let me just click on that and it will now brings us to a twitch.tv website right here and it's awesome website to waste your time so go back I'm going to go back right here and this is how we can link it to other website you can like write more than That if you want to save

it and this is how it will looks like and boom okay so these are it about for links so now let's just talk about about our hyperlinks a hyperlink will allows us to link through our own web pages which are currently available inside our own website okay so I'm going to remove that and now let's just ask from a Google like what's what's the difference between uh I don't know uh links and hyperlinks okay so Google will help us all right so the main difference between a link and a hyperlink is that you see with

a link is Anchor text that is some text on a current web page right here that usually related to the content of the link Resources with a link uh while you can see the address of the link web pages like those link which will brings us to or redirect us to some other web page on the internet okay so that was the main difference so now let me just create a New file so that we can link through there so we just have to click this new file icon right here and then we have to

specify some sort of a name name or we have to give some sort of a name not specify and now let me just give a name of like uh I don't know banana or you know what orange n not orange and bananas but I'm going to just write like another uh page yeah or you know I'm going to provide like about. HTML remember this first name doesn't matter But you have to provide this HTML extension because this is important so if you just hit enter so it will now just create or about section for us

uh I mean like about web page for us okay so now if you want to get uh HTML code really quickly in a second so for that you just have to write this explanation mark and then I want you to just hit tab so here you can see long uses the HTML structure right here so what we have to do I'm going to remove all of these Metad datas from there and that is something called uh image which I just used in a second and we are going to be learning about a crazy image later

on in this course but for now I want you to type every single word which I'm writing so I'm going to just change this title to be maybe like about section or you know about will be just fine so I'm going to just stick to this about and here we're going to be just writing like H1 of Welcome to the New page okay so if You save that and now we successfully create our index.html file we just put all of our content inside there and we also write this H1 of welcome to this new page

or welcome to the new page now what do we have to do we have to link this uh web page to this index.html file so how can we do that well we just have to write this anchor tag and if you hit tab so it will now giv us this HF right here and all of these stuff so if you hit control and space so it will now Gives us everything which are currently available inside our directory so we are going to be selecting our about. HTML file and now here we going to be just

writing a label of like anything you can write anything if you want to but in my case I'm going to be just writing like next page right here and if you sell that okay so here you can see we have this twitch.tv this is a link and now this is a hyperlink so if you just click on that and boom so what do we get we Get like welcome to the new uh page right here okay so this is how we can link through by using our HTML so if you go back and here I

want you to also notice this uh URL right here so we have this index.html file right here and if you click on this next page so it now brings us to this about. HTML URL right here okay so this is how we can work with the links and hyperlinks in HTML so I'm going to just remove there now the next topic which we are Going to be learning about is something called uh forms and inputs and it's kind of a little bit huge topic to learn not a hard one to be precise but a little

bit long like we have a lot of input tags and stuff like that so get ready so I'm going to just save this file and here you can see we don't have anything inside this body tag so now in some cases you would just want to work with the forms like uh I don't know let me just create let me just launch a new tab Which is known as incognit so I'm going to just click on these three dots and then I'm going to click on this new incognit window so you can learn more about

this incognit window if you want to but basically incognit window don't have any kind of a history tab right here uh this uh basic one do have this history tab which is right here but this incognit will not have that history tag so you can just search anonymously if you want to so what I'm going to do I'm Going to copy this URL from here and I'm going to paste it right here I mean here if you just click on that oh you know what we're not going to be doing that we have to just

write like maybe Facebook uh uh face b.com and if you go to facebook.com and here you can see we have this form right here so we have email address or phone number and then we have a password right here and we have a login button and these kind of stuff so we have this form Right here let me go to another website which is uh Twitter .c okay and I'm going to remove that my handle so if you go to Just twitter.com so it will also ask us to log in or sign up and we

don't have any forms in there do we if you click on a sign in button and now here you can see it now brings us this form it's can not a form come on sign it with your email or phone so now it will give us like name and phone and then these kind of forms and it's tab right here so What do I have to do I'm going to just click on this x to remove that in cognitive window from now and now here we are going to be building our first form and we

are not going to be sending our data to some sort of a server and stuff like that because we are not working on a goaling and we are not using some sort of other backend development right now but we have to just create the UI or the user interface of our form so if you want to do that so What do we have to do first of all we are going to be just writing like f o RM and if we hit tab so L uses form opening tag and form closing tag so now what

do we have to do I'm going to just remove this action for now and this action will ask us like where do you want to send your data we don't want to send to anywhere so for now we just have form opening tag and then form closing tag okay so now if you save that and nothing will happen right here inside our body Now inside this form what do we have to do first of all we just have to write our label for the form so let me just write l l a b e l

and if you hit Tab and we are going to be remov this four for now and I'm going to also show you what is that four will do for us but for now we just have our label opening tag and label closing tag so here what do we have to do I can write anything I want but we can just write our specific label like maybe please enter your email like Please enter your email address or you know I'm not going to go that much crazy but I'm going to just write like an email in

here and if we save that and here you can see we are now getting this email right here just a email text nothing else so now if you hit control and enter so now we have to create our first input box so if you want to create an input first of all we just have to write i n p u t and if we hit tab so log uses this in and by the way this is a Self closing tag and we already learned about a self closing tag but I forgot to mention like IMG

is also a self closing tag if you want to close it so you can just write a sling here and this is also a self closing tag in HTML and this input is also a self closing tag in HTML so I'm going to just write a slash in here and now here you can see we have this type of Tex and we have a lot of types so for now I just want you to write input and then hit tab so it will Now give you this type of text so if you save this file

and boom here you can see we are now getting this input area and we can type anything we want inside there so we are now getting our email as a label and then we are getting or input area right here okay so if you want to break so in some case say you would need a break from this email so what do you have to do for that we can just write a special uh tag which is also a self closing tag which is known as a br if You just write a br and it

will allows us to break through this line so if you save that and boom here you can see it we now just break this line from here and we now just put this input area in a new tab right here not a new tab a new line okay so this is our first email one now let's suppose if you want to create for or something else so if you just write l a b l for label so why are we getting this four attribute like so what is the meaning of this for attribute let Me

just show you that so here in this case I'm going to just put maybe um I don't know so that was an email you know I'm going to replace that to a name so this one will be a name and this one will be email so I'm going to just put like a email in here a lowercase email and then the camel Cas e and then m a i l and I'm going to also just write input right here and now if I sell my file and now here you can see we are now getting

like name and then email if you want to Break and you know what we are not going to be providing any breaks and whatnot I'm going to remove this break from here and if you sa that we have our email I mean like we have our name and then we have our email okay so I'm going to also change the type to be email as well and I'm going to also tell you why did we change that but now that we provide a four attribute in here so what do we have to do we also

have to provide ID to it ID attribute and here we just also Have to type everything like anything we write inside this four attribute and if I copy that and if I just place it right here and if you save that so it will not do a magic for us but if you click on this email so here you can see it will not just activate this input area for us right here okay in this case we didn't provide any for attribute here but if you just click on that nothing will happen if you click

here one more time nothing will happen and if you click on This email right now so it will activate all or input area right here so that's because of this four attribute so anytime you want to activate by clicking on this email so you can just type like um you can just specify this four attribute to it and anything you write inside this four attribute and you have to put that data inside this ID as well I know these stuff are kind of confusing and not giving us that much of results but you don't have

to worry about that If you just want to remove this you can also just remove that from here so that we can just work on our simpler code so I just kind of want to show you that for attribute as well so we are now done with a name email so now let's just talk about a password one so we are going to be just writing like a password not password but we are going to be just writing input and now let's just change this text to be password and we already forgot to include our

label for here so I'm going to just remove that for and here we just have to write our password and now if we sell that I'm going to just zoom out a b we have a name then we have a email then we have a password and anything I WR inside this password input area will not show up to the user so we can do one trick for that so we just have to right click on it and then click on this inspect area and now here uh instead of writing a type to be like

a password we can change that to text and If you hit enter and we can see our password right here but you don't have to do that we can just refresh our browser and if you type something so it will not show up to the user okay so we learn about input of text input of email and also input of and by the way I forgot to show you like what will this email do for us if I just type something inside there oh first of all let's just learn about the new one then you

can get to know what is this email one so we Just have to write our input and then submit okay so the type will be submit the value will be nothing so if you save that and here you can see we are now getting this input of submit right here so it allows us to submit our data or to just clear out these forms right here or to be precise these input areas so now let me just type something in here like we can type anything we want inside there and it will not complain so

if you just click on that and boom here you can See it will now just send that data to nowhere so it will just remove that data from inside this input area so we can type like anything like a numbers or maybe a samps like that we are totally free but in email anything we write like we have to provide a valid email right here so it will require us this add symbol so you know what I'm going to just type like this Gib right here and if I try to submit my form so here

you can see it's asking for please include This add symbol in the email address you provide that and it requires this add symbol so here if I just type like maybe test at the test or you know test at gmail.com test at123 or12 would be fine and now if I try to submit that and here you can see that data will be sent to nowhere and this uh here you can see see it will now just empty up all of our input areas right here okay so this is how we can work with a text

email and a password one okay you know what we Learned enough of our levels and stuff so what we have to do we have to remove all of that from here and not a form one so we do have our form right here and if we save that and we cannot see something so now let's just discuss that input areas one more time so now if I just type like input in here so here you can see log uses these text right here we can remove that and if we just hold control and if you

hit space so it will now gives us a lot of input uh types Right here so we have button we have checkbox and all of them so let's just start working on our button so if you just click on this button and if you sell that and here you can see long gives a button with no label and whatsoever so if you want to provide a label for this button so for that we can just write like a v l like a value attribute and we are going to just write like maybe learn more and

if you save that it will Not gives us a label of learn more we can also just trite like U maybe excuse me we can also just write like a download if you want to and if we save that and it will also give us that download and we can create our own buttons If you want to so we just have to write like a button and we can just put our content inside there maybe I just kind of want to write like explor and if it's s that it long uses this button of explore

we can write uh Explore the nature we we can type anything we want inside this button and it will still work so in this case what we have to do we just have to write like maybe download and if you s there it will also gives us these same buttons right here so we don't need this uh type of button so I'm going to just remove this value from here or you know what I'm going to place it right now just for demonstration purposes anyway so now let's just create our new input box so I'm

going to just write input and I'm going to remove this text from here and now what do we have to do we just have to hold control and if we hit space so we have our checkbox so it will now gives us a checkbox as the name suggest so save our file and boom we get our checkbox right here so we can check it we can also uncheck it and we can provide like more than that if you want to so this is it about input checkbox now let's just create our new input of Maybe

uh we have like checkbox so now let's just click on this color one and this is my favorite one to be honest so if you save that and it will now gives us this color kind of picker right here so here you can see let me just zoom out a bit so if you click on that so log uses to change the color and we can provide our interactivity by using a JavaScript and it can gives us like crazy amount of stuff we can do like crazy amount of stuff with them we can Select a

color we can also change this to from RGB to hsl like Hue saturation lightness hexid deiml RGB and stuff like that you don't have to worry about all of these colors and stuff for now which we are going to be learning in a really really really R details okay so here you can see it gives us a Color Picker right here okay so now if you want to duplicate the same line so you don't have to select anything you just have to hold alt then shift and then down arrow Let me just say that one

more time if you want to duplicate a line like the line in which you're currently on so you can use this kind of a shortcut in visual story coder and I cannot guarantee for other kind of a coder you have to type it manually if it's not working on your coder as I said in the of the video like if you are using a visual story coder you're in a great phase let me say that one more time hold alt then shift and then down error so it Will just duplicate the current line which you're

on if you want to remove the existing line I know I'm giving you a tutorial in visual story recorder and I have entire course on that if you want to check that out so you know what you just have to hold control and hit X so it will just remove it from here so now that was for a color one now let's just select that and remove it and now let's just select what date and as name suggest that it will allows us it will Now giv us these de Pickers so we can just click

on the today it will now give us like 1021 2022 and we can select the month and stuff like that we can also clear it out if you want to so this will allows us to provide a date picker right here okay so let me just duplicate this line of code and here let's just select or we already learn about email file if you just click on the file one and if you select that so here you can see chosen file no file Has chosen so if you just click on that we can provide our

file if we have one so in my case I'm going to just click on that and then go to the images and then we have that image which we download just a second ago and we can just open that and here you can see we have the name of that file but if I click on that click it one more time that is gone because we didn't send our data to somewhere anyway so now if you duplicate that and now let's just hit control Space and now let's just select a hidden one it will do

then we have a image then we have a month so as the time picker as the DAT picker we already saw that so it will not give us a month we can also have a number one this is a special one so if you save that and now it will gives us that same uh input area right here but here we are not allowed to write letters like AB BC D and jish like that we can just only type A numbers nothing else in There so if I try to type something else like you can

also hear the noise of this keyboard here you can see nothing is happening right now okay so that's because it is only available for numbers so we can just put a numbers like maybe 1 2 3 4 5 6 7 8 9 blah blah blah so we can just write a numbers in here and we can also increase or decrease uh and now let me just say the programming word we can either increment a number and also Decrement the number okay so we have minus one and stuff like that so this is a number input

now let's just duplicate that one more time and now let's just change that to maybe okay we got a radio buttons as well so if you click on that and save it and the difference between a checkbox and a radio buttons uh we can check and uncheck this um box right here but we cannot uncheck a radio button once we check that we have to create more radio buttons to select the other One and we cannot like just remove that check box I mean like the radio from here because we have to select something else

so this is how we can use a radio button so now let's just duplicate that and select uh range so range is awesome so if you s that we can increase or decrease the volume or maybe the width and height of some I have countless projects which is using these range you can check out my projects if you want to So remove that and then let's just select uh reset so as the I'm suggested we'll just reset all of the data which we currently have and then we have a search submit we already learned about

submit we can also provide a phone number or tell I don't know what's that want I mean we already learn about a textt we have a time which we learn URL and then week so we learn everything about that so you can just explore and play around with there if you want to in Your spare time but I don't want to waste my time and your time so I just kind of want to give you like where can you find all of that stuff and it's on you to use it okay so now we are

totally done with the forms in HTML the next thing which you have to learn is what we call it a Val and audio so now that we know how to render image and how to render forms so the next thing which we have to learn is something called video and audio so for That we would need to download some sort of a r or audio so we are now in here I'm going to go back and here you can see we have these videos right here so you can download videos from here like high quality

videos but you have to give these people a credit okay and you can also search I guess videos from the unsplash guess they don't have any videos I'm not sure but I I guess they do have videos okay so happy love blah blah blah they do have where I saw that So where use v r d e o s so let's just see okay I'm not sure if they have videos or not let's just see in here anyways I'm not sure so we are going to be downloading you can just download your video from here

by just click on that you can select a high quality video and stuff like that but and so I'm going to just download a video in a second and then I'm going to come back in a second so you just have to wait for me I'm just Kidding I'm going to just flash through and then you'll see that video all right so I have now this asss folder right here and inside this assets folder I have this one video and one audio okay because we are going to be using that if you want to use

the same audio and video which I'm using so you should have to just click on the link which I'm going to provide in the description below and you should download that in my GitHub repository if you don't want to use that And if you want to use your own images so you are totally free to use whichever kind of video or are you like it doesn't matter and here let me just show you the credit so credit for the video goes to this kind of a guy sorry I can't pronounce your name and this where

you came from this pxb and I guess this are you came from somewhere but I'm not sure anyway so we have this SS folder so what do we have to do I'm going to drag this folder into my HTML CSS directory Right here so let's just hit controlb and we have this SS folder we have this uh value and we also have this audio right here okay so now if you want to render audio or video so for that you just have to first of all write a v e o and if you hit tab

it will ask us for a source of that video so what do we have to do we have to just hit control I mean like hold control and then hit space and here we have to select or SS folder and then in this case you are interested in This video so we can just click on this video okay so let me just zoom out a bit so you guys can see everything a bit better and now if you save that and now if you check it out inside our browser so what are we getting right

here we are just getting this image and this is also massive so we are going to be writing internal CSS and you don't have to worry about anything which I'm writing inside or underneath this title right here okay you don't have to worry about anything Right now so basically what we are doing is that we are just shrinking down the size of that image so first of all let me just get my video and let's just write a width of maybe like I don't know 400 pixel be f s and this is how it looks

like for now are you know what uh 300 pixel will do yep that's cool okay so now so this is known as internal CSS which you don't have to worry about it for now because we are currently learning about HTML and Now here you can see this is just an image it's not a video like we cannot play it we cannot pause it we cannot increase the volume and stuff like that so if you want that kind of controls for this video so what do we have to do just write a controls attribute right here

okay so if you sell there and boom we are now getting all of these kind of stuff like we can full screen it we can play the video we can increase or decrease the volume if you want to we Can full screen there we can also download this radio into our machines we can also go picture to picture so if you just go to picture to picture so like we can visit to other side and we can also see this R you play in here and crazy stuff like that so here you can see long

gives us controls right here okay so this is because of these controls attribute now this is about a video how to render a video now let's just learn about how we can render audio so it's Kind of a simpol just like a video when you start writing a video you just have like a audio right here and specify the source hit control space then go to the sence folder then click on this kind of uh storm Rock uh whatever so if you save that we are getting nothing why if you just right click on it

and go to the inspect area right here we do have that audio right here but it's not showing anything that's because we don't have controls for that and if you want that Controls so we just have to specified right here so controls and if you save there and now here you can see we are now getting these controls so we can play there it's kind of a crazy voice so we can just uh make it a bit slow we can play it one more time and stuff like that so this is how we can render

video This is how we can render the audio and we already learned about how we can render images by using HTML so I'm going To just remove all of that from here and now the next topic which you're going to be learning in this video is something called a semantic HTML it will not show us the results but we have some other language so now you might be thinking like we already learned about HTML which stand for like hyper text markup language so what is that semantic HTML even mean so a semantic HTML a semantic

just simply means meaning so if you just write like Uh you know what let me just show you there in know docs then you'll get to know what I'm talking about and I'm going to remove that from here lurm Epsom as well go back and here what do we have to do I'm going to just write s eem okay s e m n and here you can see we have a semantic HTML right here if you click on that so A semantic HTML is nothing but just a new tags right here okay so we are

going to be learning About these new tags which allows us to like better structure our HTML documents so what are semantic elements in HTML many website contains HTML code like um div and then ID you don't have to worry about that da with the classes and in indicated navigated headed and folded and stuff like that in HTML there are some semantic elements that can be used to define the different parts of your web pages so instead of writing a div and spin and now let me just show you a Div and spin and we are

going to be using a lot of D spin div and spin and this is not a better way to structure your code like we are going to be writing div and we can type anything inside there and it's just a container it's just a container for writing your code or just putting your content and then we have a span and we can also write anything inside there both of them don't have any meanings to it but both of them are the most useful ones in HTML Document so we don't have we as a programmer don't

have a lot of time to just trite like section or just write like article because we are supremely lazy and that's a bad practice so we just write like div and we also write a spans and that's because of a time consuming and this this is like these two are like the Bad Bet rer code I shouldn't have to say bad but we are going to be using that a lot but um it's not a better way to structure your code If you want to structure your code so you can use a semantic tags both

of them will work like div and span will work but it's not like a better practice for other we developers to write your code like that okay so in maybe like one years later or maybe sometime later like other developer come into your project and they see like all of the div span SP D D D D D so they'll be like what the hell am I looking at guys so for those programmer you just have to write like Section article and stuff like that you have to use something called a semantic element so a

semantic element clearly describe its meaning to both the browser and also to the developer okay so by browser we means like SEO performance and stuff like in which I'm not going to go into that much details but uh it will just describe its meaning to the browser and to the developer as well example of non-s semantics elements are like as I said div and spin and we have I guess we don't have any other nonmetric elements and tells nothing about its content like this stuff like div and span doesn't tell about nothing doesn't tell nothing

about its content so example of semantic elements are forms as we learned tables we don't have to learn and then artical and stuff like that so here are just a few examples like of a semantic element so we have article we have a side detail the caption figure fotter header Man Mark a Navigation like a nav section summary and time so before getting into the details of any of them first of all let me just write like okay so we already have this example so if you want to structure your website like first of all

you would have a header or a hero area so for that kind of thing instead of writing a div we can just write a header area or just write a header opening tag and header closing tag and then instead of writing a d of old span so for Navigation we can just use nav and we can also have section inside a section inside a section then we have article we have aide and footer and all of this kind of a crazy terminology which you don't have to go into that much in detail but you just

have to remember that a semantic means meaning like we are going to be writing a meaningful elements so now let me just give you a quick example of that first of all you know what what should I Do uh okay you know what I'm going to just ask from a Google inst start showing you the figma files or you know what I'm going to show you the figma I'm going to launch a figma right here so I can give you a better example of that and you can use the semantic elements for yourself but it

felt take a little bit of time to render but it will take a little bit of time to open a figma because it's nowadays a little bit huge to open my and my internet speed is very Low in this area I'm going to have to switch back over to some other area but for now we have to wait for a fake Mark to render suppose we have this uh website right here and we are going to be maybe building this website so first of all what do we call this area we can also have our

uh on home and we can also have our uh section you don't have to worry about this software for now because we not going to be using this software in Your course but I just kind of want to give you just for a demonstration purposes so we have section and then we have about section and we have maybe project section or stuff like that I'm going to just make that a bit bigger okay let's just close that one and I'm going to make it bigger so you guys can see everything a bit clear so here

you can see first of all this area will be our navigation for our project okay so let's suppose we are building this Website so this will be the navigation for website and then this area will be known as a header area or you can also call it a hero area let me just WR it this area will be your hero area and and let me just that real quick and this area will be our navigation so I'm going to just give a name real quick I'm going to write like navigation so for that we can

use a NV tag okay so you don't have to worry about all of this crazy terminology but I just kind of want to show you and this will be our header area so we can just write a content for here like a header and let me just make that oh my goodness why am I opening the tab uh we have to make that a bit bigger like so so this will be our header area and then this can be our section area and I know I was horrible back then I didn't have that much skills

on a uiu but now I do have a lot of skills I have taken a lot of courses and stuff like That so this will be maybe um section one and this one will be for maybe like a Content section so we can also just write article in here if you want to we can use article section which is this one maybe let's show you this is article article we can also just write a detail section if you want to because we are putting a lot of details in there and then we have you know

what we are going to be using a detail section for this one so let's just put or you know this Is going to be the first section this is going to be the second section or we can also use a side for that if you want to okay so this is how it looks like and the button will not take anything and this is going to be it for you know what uh section summ and stuff like that uh okay so we can also put that as a detail section so this is going to be

the detail section and this one is going to be just a simple actual section so we can just Give a name if you want to but I don't have that much time to show everything and finally we are going to be working with a footer and they didn't okay so we have that footer right here so this area will be for forward so now if you just zoom back and now here you can see first of all if you want to build this website so we can either build this website by using a div and

span or we can also just use like navigation header or yeah section like two section and detail Section or three section right here we can also use article section and F caption and stuff like that and finally we will have our folder so this is just it for a demonstration kind of purposes like we can use these elements but if you don't want to use that so you're totally free like if you don't want to use that so you can use other stuff which is uh divent span so now let me just show you how

all of that will work and how all of that looks like so You know I'm going to close that one and you know I'm going to close that one I want to close also this figma file as well we don't need that for now so we have first of all a header and inside this header we can also write our navigation and inside this navigation we can just write our UL then Al and then anchor tag and stuff like that so this will be or kind of like a or navigation you don't have to this

code which I'm typing right now but I just kind of want to show you just a quick preview of and then we have word section inside this section we can write a details section because this going to be our details section we can write a container and here you can see I've already used this div right here okay so we can just replace that with Section if you want to so let me just write a section in here and we can also write article maybe so I'm going to just write article uh like r IAL

and we can write We can work with all of these kind of a semantic elements right now so this is kind of a preview of our semantic elements and throughout the projects we are going to be using uh all of these semantics element and we are going to be also using deance span I can't lie I use this devance SP all the time and you will too uh okay so now we are totally done with the semantic H so now the last thing which we have to learn uh in HTML is something called a Typography

so now let's just learn about a typography and then we are going to be building a project and that's going to be it for the HTML section then we are going to be jumping into a CSS and we are going to be providing a lot of styling into our web pages all right so before getting into these semantics not semantics but uh typography first of all we just have to hit control and hit uh F and here we just have to write formatting and here you can see we are Now getting this HTML formatting right

here so if you click on that so it will now brings us to that HTML formatting web page okay so it's taking time you know what it will render yeah it's taking a bit of time okay so now it's back so we have all of these kind of typography related HTML elements right here so we have B for Bard and we have strong and strong will also make our text Bolder and then we have I for italic and then emphasis will also make Our text italic then we have a mark and it will just Mark

our text then we have small it will be just a little bit is smaller than a paragraph then we have a d as then name suggest that it will allows us to line through our element and it will look like kind of like a delation of the elements and then we have inserted we have um super set and sub I mean like subscript and we have superscript so now let's just learn all about that so first of all we are going To be starting from B tags so I'm going to just write first of all

a paragraph um maybe I am uh yeah I'm going to just write lower case I am and then B and here I'm going to just write my own name husan and it will be now Bard so if you save that and if you check it out so here you can see this hosan is not totally bold that's because we put that inside a bold tag like a b tag and we can also use a strong tag for that instead of writing B so we can also just Use a strong so I'm going to just replace

that with strong and if we save that and boom okay so we are now getting this strong tag right here uh I mean like that boldness now the next thing which you have to is that paragraph I am yeah I'm going to just write like I am and then I and here I'm going to just put my name ofan and if you save there so what are we getting here you can see the difference like this one will be italic and we can also Italic there by using em for there instead of writing I so

em stand for the emphasis so we can just write em for there and if you sell that and boom here you can see both of them will be the same like I will do the same thing like it will make it italic uh and so well M okay so now the next thing which we have to learn is something called a small tag but before I do here I'm going to just write like hello inside this and I'm going to also put that hello in a small Text so instead of writing P we have to

write small right here and I'm going to also put a hello in there so it will just give you a little bit of difference so save that and here you can see this small is just a little bit smaller than this hello one right here okay so this is how it will look like now let's just learn about that deal so I'm going to just write like paragraph and the price used to be like $200 and now the price is Just Deal Let's just write deal in here and now let's just write 100 um dollars

and if you sell that so the price okay so we messed it up right here the price used to be $100 and now it's $200 you know what I'm going to change this one to $200 and this one to $100 if you sell that and this is how we can use that deal and we can also just write a paragraph uh and here we can just use our D or not even a paragraph We can Just simply use a dell and here we can just write a lmsm if you want to like LM 10 and

save that and boom okay so it will just line through our element okay so we can also achieve the same result by using a CSS but you know what we are learning about HTML so we don't have to go into that much details so we also have a inss this is the alternative for that d one so we can just write like um lauram of maybe 20 so if you save that and here you can see it just gives Us a line underneath the text right here so it will now gives us a line at

the middle of the text and it will now gives us a line underneath the text right here so you can see the differences between both of them and now let's just learn about a new one which is called a subset and a superet and then let me just write a sub in here you know what first of all let me just write paragraph and put our X in there and now let me just write Or su4 sub and I'm going to just put two in there so if you sell that and what are we getting

first of all let me just remove all of these coding from here so you guys can see everything seven and now what are we getting we are getting X and then I don't know what you call that but we have two okay so we can also write a PO if you want to we have to just write X and instead of writing a subset we can also write super set like just a power of X so if you just sell That and here you can see we getting results like this so we can also write

instead of writing two we can write a Gib brush in here if you want to and this how the Gib brush will look like and we can also put a lot of gibberish in here and if you s that and this is how all of that gibberish will look like so we can do crazier stuff like that so these are just a little bit of typography related um tags right here and there are a lot of typography Related so we can also use a mark I'm just coming up with ideas so I'm going to write

like paragraph you will only fail when you stop drawing and now if I want to just like Mark this last word and I'm going to just put that in a mark okay so we have to first of all write a mark opening tag and then Mark closing tag and I'm going to cut this trying from there and I'm going to put it inside a mark so I'm going to zoom Out of it and this is how it looks like like you will only fail once or when you will only fail when you stop trying so

if you sa that and if you prev it so here you can see it will now just highlight it right here okay and there are a lot of them if you want to like learn more about these typography related kind of HTML elements so you can learn more about that you can also write a quotation if you want to so I'll just quick through all of that because my Internet connection is supremely low I don't know what's happening to it we can do citation we can provide addresses we can do I don't know what's that

even stand for so suppose if you want to get a quote so if you want to work the quote so you can also just write uh quote and also I also forgot to include one more but you know what first of all let's just copy this text h code and I'm going to past it right here and if you save that and here you can see it will now Just provide this quotation right here so I'm going to just remove that and I'm going to replace it with the Andrew State father code uh real quick

I'm going to replace this code to Andrew's father code which I really like so I'm going to just save that and here you can see it will now gives us these Cod quotation right here okay so these are quotation but my favorite thing which I want to show is something called ABB R tag I'm going to zoom in a Bit first of all let me just write a paragraph and do you know HTML and so you know I'm going to put that in abbr tag and as the name suggested it will be abbreviation tag so

here we just have to put our title so HTML just stand for like hyper text Mark language okay zoom out of it and here we just have to put our HTML in there and now if we save that and here you can see do you know HTML and here you can also See these dots but if I H my mouse over to it so what are we getting we are now getting a hyper text markup language right here if I H my mouse over to this anchor tag not anchor but this uh simple content right

here and here you can see nothing is happening so if I hover my mouse over to this HTML so it will not giv us like hypertext markup and language if you click on that nothing will happen so this is why I really like a ABB art it can be useful in some Situation so you can learn more about this quotation and these typography related elements if you want to but I don't want to waste your time and my time because we are going to be doing a lot of crazy typography once we jump into a

CSS but for now I guess that would be it for HTML and so you know what let's just start working on a project first of all we are going to be building a portfolio project using just a pure HTML not Anything else I'm going to just delete everything I'm going to highlight everything and boom everything should go away except that images I'm going to just select that as well you know what first of all let's just shut down our live server and I guess that will be fine sver file let's just remove both of these

file and also this assets folder So currently we are just having this empty folder with one images folder and we just have that one images so I'm Going to just drag it out I'm going to also remove this images folder and now let's just start working on our projects so anytime you want to work with HTML projects so first of all we just have to create some sort of HTML file and inside that we are going to be using imit so we have this structure of their HTML so I'm going to just write Port uh

allio portfolio project using HTML that's going to be awesome one I'm going to zoom in a bit and now let's just start Working on our maybe navigation so we have our nav inside this nav we are going to have a lot of UL and allies so in each Ali we are going to have our home maybe so I'm going to just write home and I'm going to duplicate these line of codes for now so zoom out a bit we have a home then we have about section and then we have our contact Section so let's

just duplicate that one more time for what for a project section so let me just write a projects in Here And Now ify server file and I don't know what's happening okay so we didn't launch there in a live server we have to right click on it and then click on open with live server so that we can work on that and here you can see we are now getting our first navigation right here okay so now we are totally done with the navigation now let's just start working on our header area or you can

also call it a Herer area or you can also call it a main area because we are going to be Putting all of our content inside this uh header area so let's just write over H1 I'm going to put my name in there you can put your name if you want to then let's just write H2 of Welcome uh to my personal Port portfolio right here s that and here you can see we have welcome to my personal portfolio let's just write an anchor tag it will say learn more and if you s that we

are now getting this button right here kind of a gra button not a gra but Anchor button now let me just WR a section in that and now here we are going to be rendering our image which is you know what we have to search for some cool guy because I'm a cool guy I'm going to have to put a cool image of myself so maybe um guy would be fine I'm going to just search for a guy yeah I'm totally nerd like this guy sorry I apologize it's not he's not a nerd he's awesome

looking man and I'm not like that much Rude like the one this image okay so I'm going to just search for some cool gu I really like kind of these grayish colors images so I'm going to just select the professional shorts I'm going to just copy this guy image address and now I'm going to put that inside there and here we going to be writing uh my awesome image awesome image and s file and boom here you can see we are now getting our images right here and now what else do we have to do

Underneath this section or not even a section underneath this header we have to create new section and now inside this section we are going to be writing H1 of follow me on social media and if you want to follow me on social media here are all of my social media I'm going to just fast forward these social media because I'm going to have to copy all of my social media links and I'm going to paste it in here and if you have your own so you can also paste it In here so I'll just see

you in a second all right guys so we are back and I just pass all of my social media links right here if you want to follow me on YouTube so here's the link then Twitter then U me then Instagram if you don't want to follow me in any of them so don't but I will request you to follow me on GitHub because I really love GitHub anyway so if you don't know what a GitHub is I have entire course on that if you want to check that out anyways so now let's Just write a

new anchor tag and it will go to a new file which you're going to be creating so I'm going to give a name of like another page. HTML and now let's just put our doc type in it and I'm I'm going to remove all of this metadata from here and I'm going to put like another Ag and now let's just put our cont like Hello uh and then paragraph my name is Huzan and then a new paragraph welcome to my personal site and I guess that Would be fine so if we save that and now

let's just link this anchor tag to this one so I'm going to hit control space and then click on another image and then another web page so check out my cool site H site to be precise so if you save there and now I guess you can see that yeah you can see that right there so if you click on it so here you can see now brings us to this web page another page. HTML so you're now getting like hello my name is Huzan welcome to my personal Site okay so that's that now let's

just write a footer area oh you know what instead of writing a footer area I'm going to just create a section in here here and I'm going to write H1 check out my Photography in here and here I'm going to just put a lot of images and I'm going to give him a width of maybe like 200 pixel and also the height of 200 pixel and I'm going to duplicate this line of code maybe four times and I'm Going to have to go to this unsplash.com and now let's just search for uh P hog graphy

let's just search for photography in here okay so so we are getting a lot of cool results but I'm going to right click going to select that right click on it and copy the image address and I'm going to put this address right there now let's just search for another image maybe uh professional short would be find p rouf e r f eou h SN uh shot okay I can't even speak no more I speak a lot professional shout of these people okay this is kind of a okay this is a Prof professional shot right

click on it copy the image address I'm going to put it in here and I'm going to also Her Image as okay this one is all of them are better than the other ones so I'm going to copy this one and I'm going to also put her image as well she's also looking gorgeous I'm going to put her image in here save it And here are my images like kind of my gallery right here check out my recent protography and stuff like that and finally let's just ride our forward section or we already forgot to

include a form so that people can be signed in to our uh project if they want to so we can just write like input and we can be root just like a Trader one and by the way I already forgot to include that placeholder in my uh what do we call it a form section sorry about that so now Let's just learn about a placeholders so you know what I'm going to comment all of these code for now because I kind of wanted to show you a placeholder and save it and now here you can

see we get a form right here so in some cases you need a label which will be inside your form not outside from your form but inside your form so if you want a label to be inside your form so for that we can write a attribute card a placeholder and we can write anything we want in it But here we going to be just using like uh email in here and if you save that and here you can see we now getting this email right here and if you start typing something so that email

will be gone so we can just remove that and here's our email so now let's just duplicate there and now let's just write our password right here or you know what uh let's just ask for the first name so I'm going to write a name change the text to be like name not name but uh Okay so this is going to be the text and then the next one will be email kind of lost my mind there and then here this one will be for password if you sell that we now getting email name email

and password and finally let's just write our submit button and we are totally done with this project so oh my goodness button and then submit submit or you can also create input buttons if you want to and here you can see this is how it looks like if you want breakes so we can Just write uh here BR and if you saell that and here you can see it long uses brakes and by the way if you're wondering like how did I do this multiple selection so for that kind of stuff you have to take

my uh visual story Cod course and now let's just uncomment all of these coding and save it and here you can see see first of all we have our navigation then we have our personal info right here and then we have our gorgeous image right here look At me and then we have all of these social media link right here then we have a photography section and finally we have our a form right here so now we are totally done with the HTML side of code so now the next section we are going to be

learning about crazy amount of CSS so by crazy I don't mean like CSS is hard CSS is more simpler and more awesome and more uh like how can I put it like the most easiest language you can learn CSS Is easy but it's a little bit long so you have to give it a lot of time to learn about CSS CSS is long but it's not hard anyway so now that we are totally done with our first project and HTML section now let's jump into CSS and CSS stand from cascading style sheet so now let's

just ask from our good old friend like W3 school and let's just ask him like what is a CSS CSS introduction to CSS or you can also ask from a Google if you want to so I'm going to just Click on the first link like CSS introduction and what is a CSS let me just zoom in a bit like in presentation mode CSS is the language we use to style a web pages a few second ago we just learned about HTML and HTML was responsible for structuring our web pages and now in this case we

are learning about a CSS and CSS is now responsible for styling or web pages okay so you just have to remember that CSS is something like a language of a Web and it allows us to style or web pages like this is kind of a marker and colors and stuff you have now which you can use to style your web pages so what does E1 a CSS mean a CSS stand for like cascading Style sheet so c stand for cascading S stand for style and then the other S stand for Sheet okay so we have

cascading style sheet this is what CSS means and then it is a language and which allows us to style our web pages okay and CSS describe how the HTML Elements are display on the screen paper or in okay so you don't have to worry about them for now which we are going to be exploring in a real great detail okay so for now I want you to just remember the these two things these two lines like CSS is the language we use to style our web pages and CSS stand for cascading style sheet okay so

now that we know what a CSS is so now let's jump into our visual story coder and now let's just start working on it what I'll Do is I'll select everything and I'm going to delete all of them okay and I going to just zoom in a bit so you guys can see everything a bit better now I'm going to click on this new file and I'm going to just start working on index.html from from scratch okay and here I'm going to just write a doc type HTML and I'm not going to be explaining everything

from scratch one more time and here inside this section we are going to be learning about CSS so I'm Going to name it as CSS okay so now that we know what a CSS is so now let's learn how we can connect our CSS with our HTML okay so there are three ways we can connect uh CSS with HTML so the first way we have is a inline uh CSS or you know what I'm going to write there in uh heading so I'm going to write H1 of inline CSS then we have uh internal CSS

and then finally we have our external CSN and I love external CSS Okay so if you save that and if you go to our browser it's complaining so right click on it and open it with the live server and now we are good to go so how can we apply a CSS to just inline text like maybe I just want to provide a styling for this one H1 or maybe for H2 or for H3 or even for a body I can also provide styling for a body if I want to and we are going to

be learning about crazy CSS in this video but if you want to apply CSS to just one element so we Can either use inline CSS or ex internal CSS or external CSS okay so suppose if you want to work with the inline CSS so for that we just have to first of all select the element it doesn't matter if you want to select this one this one or that one or even a body or whatever okay so we just have to write a style right here just a style attribute and here you can see all

of the CSS properties and its values I'm going to tell you like uh how the syntax of the CSS looks like but Before I do I just kind of want to tell you like how we can write an inline CSS so first of all you just have to write a style attribute and then here you just have write our property and its values and I want to tell you like what a property and value is in a second but you just have to write like color and then like red okay so now if you save

our file and boom this is our first inline CSS right here and now we just change the color to be totally red right Here okay so this is known as a inline style and we are not going to be using inline style ever I shouldn't have to say ever we will use that in some cases but these are not useful because we have to like uh provide uh staring to each of the element we have to select there like we have to copy this style attribute and it will look messy like let's suppose let me

just give you this example if I pass right here pass right here and if I type uh like something you don't have to Type everything which I'm writing but I just kind of want to give you example like background color will be like uh Crimson maybe for some case and if I just started typing like so so my code will look messy so we are not going to be writing or inline CSS maybe ever but I shouldn't say ever because we will just need it for some cases so now if you s our file and

you already know the color has changed to Red so that was it about inline CSS now then the next one We have is internal CSS internal CSS will be inside or index.html file okay so we just have to write inside the head area we just have try like style and if we hit tab so it now giv a style opening tag and style closing tag and now inside the style we first of all have to learn about the syntax of CSS so now I'm going to just zoom in a bit so you guys can and

see everything a bit better I want you to just focus on this area right here so how the syntax of the CSS will Look like well first of all we have a selector okay zoom out a bit a little bit so we have first of all a selector then we have a opening curly brace and then the closing curly brace okay and now inside that we are going to be writing a property and then value of that property okay so this is just a CSS uh syntax first of all uh let me just hit inent

right here first of all we have a selector like some sort of a selector And we are going to be diving into our selectors in a real great detail but you don't have to worry about them for now you just have to remember like if you want to work with a CSS first of all we have to write some sort of a selector we want to select something like we want to select H1 H2 H3 header footer section navigation alternative text or alt or image or anything we need to first of all select that element

then we have to write a opening clyra and then then the Closing curly brace then we are going to be using a property and then specific value of that property like let's suppose if you want to write a color so you have to provide a value of the color you want to change the background color you have to provide a background color value you want to work with the display property you are going to be using a display value right here so this is how the CSS syntax looks like and now we are going to

be diving into it so I'm going To just cut that from here and now let's just zoom out a bit and now let's just pass it in here one more time time so oh my goodness I'm just tting again and again all right so now if you want to select something like in this case if I want to select H2 so what do I have to do I'm going to just write H2 so now the first step is complete like the selector step is complete like we selected this H2 successfully now what else do we

have to do we have to first of all write Opening curly brace and then closing curly brace so I'm going to just write opening curly brace and then closing curly brace and now inside that we are going to be using a property and value so which kind of property we have we have like countless properties in CSS but for this specific one we are going to be just using like color and if you hit tab so it will not giv us like this colon and this semicolon right here so here we are going to have

to provide Some different color so if you hit control space it will give us a lot of colors right here I can't even pronounce the name of these colors right here like there are a lot a lot of colors here you can choose from so I'm going to just click on random color like uh I mean like just doy blue would be fine or you can just go with a blue if you want to so if I save my file and boom here you can see this will now first of all select this element and

it will now Provide this color to it right here okay so we can also provide just a blue color if you want to so if you s file so what do we get we get a pure blue color right here but this is also not the best way to write a CSS because we are going to be writing a lot like a a lot of uh HTML code but if you write HTML and CSS code at one file so or file will look messy and no other developer can work with that so this one method

is also fair but you will in some point in your life use This internal CSS as well and now let me show you the last and the final way and my favorite one uh which is known as external CSS so now first of all we have to create a new file for that so I'm going to just write like uh let me just zoom in a bit so you guys can see everything a bit better so first of all we just have to write some sort of a name but remember CSS extension is important you

have to give this like CSS extension Right here and now you know like what is a CSS a CSS is just a language for styling or web pages and CSS stand from like cascading style sheet okay so first of all you have to write some sort of a name it doesn't matter whatever name you provide but you don't have to give a spaces in here okay so let me just write a name of like uh I don't know I going to write like style. CSS would be fine so I'm going to hit enter right now

so now we successfully create our CSS file Right here so what was the syntax of CSS so I'm going to cut this syntax from here I'm going to past it right here so we have first of all selector then the opening curly brace then the closing curly brace right here then the property and its value okay so I know I'm repeating myself so I want you to just uh remember this stuff so that's why I'm repeating myself so now in this case if you want to select this H3 so what should I do okay so

I'm going to just Head back over to my CSS file and I'm going to just write H3 so now the first step is complete then I'm going to write like opening CRA and closing CRA okay so the second step is also complete and then I'm going to write a property name color and then this value will be like EA would be fine and now if is s file and now I want you to just notice nothing happened why because we do create our CSS file but we didn't uh link or connect that with our HTML

file So now if you want to connect this CSS file with our HTML file so what do we have to do for that so underneath this title what do we have to do we just have to write link if you just write link and if you hit tab so log uses two attributes so the first attribute we have is a link I mean like a real and it will be now set to like a Styles sheet because we are working on a Styles sheet and then here we have to provide the URL of our specific

style sheet so we have The style. CSS file so what I'm going to do I'm going to hit control and space and then I'm going to select my style CSS file and now if I save there and boom look at this aqua color right here okay so let me just change that to like some other uh colors that you guys can see everything a bit better maybe Coral will be fine no I'm going to go with the chocolate I'm going to save my file and here you can see we get a chocolate color right here

okay so this is the Better and preferred way to use a CSS and we are going to be using the external CSS throughout this course what I want you to do is that I want you to delete the style. CSS or just a style from there and I also want you to remove all of these stuff from here so I'm going to remove that and now if you save that everything is gone okay so I'm going to also remove this H3 from there so now we have a clear file right here so now that we

know how to work With the CSS so now the next thing which I want to tell you about a CSS is that how we can work with the Colors by using a CSS so first of all I'm going to write H1 so the first way we can work with the CSS is by using color names and now the second way we can work with the CSS is something called RGB and we are going to be also learning about rgba and now the third way we can work with the H I mean like CSS is called

hexi decimal so I'm going to just write hex in here and now If we save that and we just get like uh color names and then RGB and then heximal color color names so if you want to provide a color to this this specific element so first of all what do we have to do we have to first of all write H1 like we have to select that then we have our opening and closing curly braces and then we have to write color property and then the value to that color like you can choose different

kind of colors from here like in my case if I want to choose This blue violet color so I'm going to click on that and now if you save that and now here you can see it will now change the color to like blue violet color right here okay so I'm going to you know I'm not going to close any of them so this is the first way you can provide colors St it now the next thing I want to show you is something called RGB and this RGB stand from like red green and blue

so to work with that first of all let me show you that it's Documentation so I'm going to write like uh colors uh in here so we have a CSS color so I'm going to click on that um I want to give you a documentation and stuff so that if you lost or uh if you don't remember something so that you can head back over through this stuff and you can learn more about that so we have this color name we have RGB we have hex value and we have hsl and we are not going

to be using hsl that much like it stand for like hug saturation and uh Lightness this is useful for designer like those people who design the website who don't code the website okay and these are also used for graphic designer and stuff but I'll will show you that anyway so I'm going to just click on this RGB so in RGB color value represent red as I said green and blue uh lightning sources so if you want to provide RGB value first of all you just have to write this function like you just have to write

RGB as a value and Then opening parenthesis let me just zoom in a bit so you guys can see everything then opening parenthesis then closing parenthesis and then the first value will be for the red then the second value will be for the green and the third value will be for the blue one each parameter red green blue Define the intensity of the color between 0er and 255 so 0 will be the least value and 25 five will be the Top Value to display black set all the color parameters to Zero like this uh RGB

0 0 0 like red will be zero green will be zero and blue will be also zero so what will we get we will get totally black color and to display white so you set all of the parameters to be 255 like RGB 255 for the uh red 255 for the 255 for the green 255 for the blue red green and blue and you can play around with that right here so we are getting this kind of orangish color right here that's because or red value is the highest right here and I'm Not going to

go into a lot of math right here it's not a methy topic to be honest so I'm going to go with a presentation mode and if I just uh decrease that like just focus on this color if I just start to decrease there and now it become greenish and grayish and brownish and like so now it's totally not totally I wouldn't say totally but it's kind of a grayish green okay so if you we set this blue one to totally zero so what do we get we get kind of a greenish color as I Said

kind of not a totally green if you want to get totally green color so for that we have to bump it up so here you can see we get like totally green color so now here you can see the RGB the red value is zero the green value is 255 and as we learned that 255 will be the highest value and then we have our blue value and blue is also set to zero so that's why we get like totally green color if you want to get like uh red color so we have to first

of all set Everything to zero and here you can see long uses black and now if we bump up this red colored so here you can see our value is set to 255 the green value is zero blue value is also zero so we get like totally red color and if you bump up everything so it will not use this totally white color right here okay so and by the way let me just uh enhance your knowledge a little bit if you set everything to zero and it will give us this black color right here

and black Isn't even a color and a lot of people think like uh I love black color like I love this black color T-shirt and black is not a color black is the absence of color if you search for um is black a color so it will now gives us this res like and many do consider that black to be a color uh because of the combination of the pigment to create it on a paper but in technical sense black and white both of them are not even a colors they're just a shares and you

you are Totally free to explore more about uh all of that but I just kind of want to tell you like black and blue aren't even the colored so I'm going to just cut that and if you set everything to the white like so I mean like set everything to the highest value so we would get like totally a white color and you can play around with these colors if you want to like blueish kind of reddish kind of uh colors so now let's jump into our coding and now let's just start Working on our

coding so now if I want to select this H2 so what I have to do I'm going to go to my CSS and I'm going to write like H2 and here I'm going to just write like color I'm going to write R GB and if I hit tab so it l gives us these parentheses and it will also giv us like red green and blue okay so I'm going to just provide like uh 255 for the red value and if I hit Tab and I going to write like zero for the green and zero for

the blue and now if you s That so here you can see long gives totally red color right here and now if I just set this to let me just come on if I set this uh red value to zero and if you set this to like 255 and if you save that and here you can see it will long us us uh green color if you set that to zero and if you just WR 255 so it will long us us blue color and you can play around with that like if you just write

like 40 and then 10 maybe or yeah 10 would be fine and we'll just and Then let me just write 100 so if you save there it will give this kind of a creamy uh color right here kind of a creamy red color and you can play around with that and by the way let me tell you one more thing about a visual story Cod so if you have our Mouse over to this color and here you can see we have this Color Picker right here we can change the color here you can also see

that this RGB values and we can change a color from here like this is kind of a Tealish color we have kind of a greenish color and kind of a brown Coral or chocolatey color whatever you want to call it so I'm going to set this to RGB value and if I click on this RGB and here you can see it will also gives us a he score right here and which we going to be exploring just in a second so if you click on it one more time it will gives us the hsl code

and then hwb excuse me I've never used hwb in my life so I can say something about hwb And then we have RGB okay so let's suppose if I choose this color and I we sell that and what do we get we get this teish kind of color right here okay so this is looking awesome so that was it about RGB now let me just tell you the last one or not a last one we still have to Cod the hsl but I'm going to click on this he one and this is my favorite one

and a lot of developers and a lot of designers still uh I shouldn't have to say still but are Using this hexad decimal these are my favorite one heximal is my favorite one so heximal color is specified with RR g g BB like red for the RS G I mean like green for the G's and B for the the blues okay where the r is red G's are blue uh G's are green and B's are blue exod decimal integers specify the component of the color hex value in CSS a color can be specified using a

hexad decimal value from r r gbb where R is red green and blue Hexadecimal zero between zero like 0 0 will be the least value and FF will be the highest value same as the decimal from like zero as we saw like RGB the RGB was like zero was the least value and 255 was the highest so now in the hexad decimal the 0 0 is the least and FF is the highest value for example uh FF so it will not gives us red color because we just provide the first value like the RR value

to be the top so it will not giv a red color so if if is uh Displayed a red uh because red is set to its highest value FF and it other are set to the lowest value like 0 Z to display a black color set all of the values to like 0 0 and here you can see we have six zeros like um two zeros for R uh red two zeros for green and two zeros for blue okay and you can just write like uh three zeros uh it will also gives us like black

colors uh black color like um red green and blue if you want to work with that and if you set uh 6 FS so it will also give us toally white color but we can still go with three FS so it will still gives us like white color and here you can see we can play around with that by just um making it smaller or lowering or highering like so I don't want to go into the details of that and you can also write letters and you can also write a numbers if you want to

okay so now let me just show you all of the en code and now here you can see my favorite color not my top Favorite color but my just a little bit fav color all right so now if you want to select this H3 so what do we have to do we just have to write three in here and here I'm going to write a color in here and I'm going to paste this color so I'm going to sell my file and here you can see this become to that uh kind of a greenish color

and by the way I forgot to mention one thing if you want to work with a hexi decimal value first of all you have to provide this pound Symbol or hashtag whatever you want to call it so first of all you have to provide that and then you can provide uh their other numbers and stuff you can play around with that so in my case I want to work with the red color so I'm going to just write like FF and 000000 0 okay so this is a red color if you sell that and here

you can see we get like totally red color if you want to get like kind of a a blue color like totally blue color so first of all you're going To be writing 0 0 for the red and then like FF for the blues if you s there okay so red green my bad so this is zero I mean like this is the greenish um Shir so I'm going to just write 0 0 for this one and finally we have a blue one so now if you sa there and now here you can see it

log uses like blue color right here and you can play around with this color so if you just click on that and now here you can see we can change the color we can Change it from here like so if I let's suppose if I want to change this color to this kind of a uh creamy Crimson colors if you sa that it will not use us this color right here and by the way I forgot to mention something called rgba so now we learn about RGB which stand from like red green and blue and

we still left with one other so which is called rgba and a stand for Alpha transparency so we have rgba red green blue and Alpha Transparency so we can just write like 255 then we have z0 and Alpha transparency will be like 0.5 in this case so first of all let me show you that without Alpha transparency and then I going to show you a little bit of alpha transparency so if you sell that and here you can see it long use just totally red color right here I want you to just focus on this

red color and now if you just Prov a bit of alpha transparency like 0.5 maybe and if you Save that and here you can see it will now just pour a little bit of opacity to it like 0.2 would be fine and here you can see it is now making it subtle like so okay so we can also change the opacity or transparency whatever you want to call it from here as well so this is the top one and we can play around with there like we have 143 and now if we save that and

we can re really see or text right here and this can be handy in some situation but not in the Majority of them and now if you're wondering like how can I change the hexid decimal transparency so you can just click on that and then you can just change the its transparency from here right here okay so in my case I'm going to just go with lowest one like so and if you sell there and this is how it looks like right here okay so we are totally done with the colors but I just kind

of want to give you the bonus hsl I didn't plan to show you the hsl because It's a little bit weird so I don't want to include in my course but I just kind of want to show you because we already saw that anyways so hsl just stand for like hu saturation and lightness in CSS a color can be specified using a Hu saturation and lightness hsl in the form of this like you just have to pass this function like hsl first of all the Hue value then the saturation value and then the lightness here

a degree on the color wheel from 0 to 360 and Zer is the red And 120 is a green and 2 40 is a blue saturation is a percentage value like 0% means a shed of gray and 100% is of the full color like the totally bright color light is also a percentage and zero is black 50% is neither light or dark and 100% is totally white okay so experiment by using these mixing values so you can learn more about that suppose if I want to provide this color like so kind of a greenish color

yeah I guess that would be fine so just just have to Copy that and then just uh select like let me just provide hsl in here H4 H Uhl H saturation lightness and now let me go to my CSS file and here I'm going to just write H4 and here I'm going to pass it okay I have first of all write a color and I'm going to past it right here see if you s that and now if you go toward CSS file so uh okay so here you can see that hsl right here it's

kind of a greenish color okay so we are totally done with uh our color properties so now Let me just show you one more color property which is a background color so I'm going to just remove there and now suppose uh I want to get this you know I'm going to hide this meta or head area I'm going to remove this everything and I'm just uh left with this H1 of color names I'm going to just write color inside that so we just have one H1 inside of our body right here and I you save

that and we have totally black okay so if you want to change the background Color of this H1 so what do we have to do we have to first of all select this H1 and instead of writing a color we can just write in this case a BG and if we hit tab so it will gives us this by default black color but we can still write a background and then color okay so we can just provide a color like we can use hsl RGB heximal or even a color names so I'm going to just

write like uh teal maybe so if you save that and here you can see now just change the Background color of this uh text right here H1 and now if you want to change the text color to be like white so we can just write like color and totally white okay or we can use that pound symol in totally F FF and now if you save that and now here you can see the color is now changed to totally white okay so we can do lots of crazy stuff with uh like let's suppose if I

want to provide uh hsl or RGB value if I just click on the RGB it will not gives us That hsl hwb RGB Okay so you can play around with that if you want to click on here in somewhere click on select kind of a bluish color or you know what blue wet color will be fine so now if you select that and if you save it and this kind of a blue wet color right here and we can remove that boom okay so now let's just stick to you know I'm going to just get

this blue wet color from this one and now say byby to this background color I'm going to remove This white color I'm going to pass this blue white color right here so save that and boom and this is how it looks like okay so we learn enough about we learn enough about um CSS colors so now let me just show you where to find great colors so adob cooler c o l e r um it used to be Adobe k r but if you click on that so color. adobe.com so all right so they Chang

the name to adobi color it used to be Adobe k o l e r uh get Adobe experience for free Uh how to add the colors no click on this one and here you can find a lot of great colors if you want to like you can create your own stuff you can also click on this explore or you can also click on this trendy one so if you click on the trends it will take a little bit of time just wait for it okay so it will now gives us a trendy colors oh my

goodness not Trends but click on the explore and then go to Trends oh my goodness uhuh so it now gives us these uh kind of a Colors right here you can choose a lot of different kind of colors from here if you want to maybe I would just click on you can download that or you can add that to your library if you're working on that or you can just get a color from there or you can also just search for like um grade color uh website um great resour color resources would be fine and

then we have a a lot of different kind of post you know what you can just go check that in your free Time but I guess I show you enough about colors and now you can go with your own Direction with colors all right so now that we Master colors in CSS so now the next topic I want to share is something called CSS units so if you ask our good old friend like what is a units so here you can see I'm now inside the CSS units ped right here and you can learn more

about that if you want to but in my case I'm going to just highlight two things so the First units we have is like absolute lens and then we have a relative lens so what is the difference between both of them so I'm going to just zoom in a bit so you guys can see everything a bit better and I'm going to just head back over to that presentation more right here so what is the absolute lens the absolute length units are fixed and the length expressed in any of these will appear as exactly that

size so you just have to remember that will be the Exactly that size okay if you want to work with absolute units on the other hand we have a relative length so so a relative unit specify a length relative to another length property okay so this one will be the exact one like exactly the size and this will specify to the another length property and so you just have to remember the difference between both of them okay and relative lens units scale better between different R the medium and in this case they say Like absolute

lens units are not recommended for the screen because screen sizes vary so much however they're can to be used if the output medium is not such as for like PR layouts and stuff okay so we have first units first of all so we have CM mmn PX PT and PC to be honest you would never use any of them but you will use this PX and this is not is a pixel and pixel will be just like a dot in your screen okay so if you want to get more into Detail of that you can

just quick Google search like what is a pixel and you can learn more about that okay so you will never use like C m i shouldn't have to say never but you will never see this CM used in some CSS properties okay so we have a CM which stand for like centimeter then we have mm for millimeter then we have a i in for inches then we have a px for Pixel a very widely used like a pixel unit then we have a PT for points and then we have A PC I've never in my

life even see this one use Sumer s this is P or P I can't pronounce in the name of it so in this list we are just interested in this one uh not this one this one right here pixel okay so you can learn more about that okay but before we learn about that first of all we have to write some codes so what I'm going to do is that I'm going to remove this H1 from here and I'm going to just declare a div right here I'm going to save that file I'm Going to

also remove this H1 and I'm going to write my div and I'm going to give him a width of like in this case if you want to provide a width to something like it doesn't matter like you want to provide it for H1 header section navigation whatever so if you want to provide a width to it so for that we are going to be writing a width property okay and then we can specify the amount right here okay so in this case let's suppose if you want to provide like 100 Pixel so here you can

see we now use this PX and it will now gives us like 100 uh dots on the screen okay then we have a height if you want to specify a height for something so for that we can use um like this height property and then specify the amount of height you need okay so now now if you save this file and if you go to our um file right here so what do we get we get nothing right here or div is right here if you right click on it and click on the Inspect so

here you can see we have that div and here you can also see if I how my mouse order it here you can also see that blue area which is highlighting this div but we don't have any content and we don't have any like border and stuff and you don't have to worry about any of them because we are going to be just writing like a background and then color which we learned just a second ago and we can just provide our color like in my case I'm going to just write Red And now if

we sell our file and boom here you can see we have our div right here which is 200 by 200 okay so it will now giv us like 200 width and 200 height okay so this is the first unit which we learn in this uh sections we have like 100 PX and PX just stand for Pixel and here you also saw that these are absolute units like pixel is absolute unit of measurement and then now let's learn about uh relative units so we have a lot of relative units so we have M we Are going

to be learning about M and we are going to be learning about Ram we W VH and finally a percentages okay you can learn more about the other one I have seen them in some projects but I never used it I shouldn't have to say never I did use that in some cases but but not that often so I'm going to just highlight these few so we are going to be learning about M we're going to be learning about Ram VW VH and percentages Okay so starting from the first one uh Which will be a

percentage so a percentage is the relative to its parent so now let me just write some code then you'll get to know what I'm talking about so now that you can see we have this div right here so what will be the parent of this div the parent will be this body right here so what will be the parent of this body you might be guessing like it's a head but it's not a head the parent of the body is this HTML okay so what is the parent of this HTML I forgot to include a

doc type in here uh okay let me just start it DOC oh my goodness doc type and then HTML and now let me just close it right here okay so the parent of this HTML will be this doc type okay so now if you want to wrap that in some sort of a parent so for that we can use like a section or article or whatever you have so now if I hit enter right here and now I'm going to cut this uh D from here and I'm going to past it right here so now

the parent Of this div is now a section so this will be the parent and this D will be the children okay so now let's suppose if I just write something by using or parent so instead of these pixels if I just remove them and if I just write like a percentage right here and also percentage right here and remember we didn't write any styling and whatsoever for this section okay so now if you sve a file and here you can see nothing is up here okay like this is totally empty We cannot see anything

why because as we learned right here that relative uh I mean like percentage is a relative to the its parent element so we don't have any width and height to the parent element so we don't specify any width or height to this section so that's why we cannot see nothing okay and we are specifying 100% width and 100% height to this div but will not show up because we don't have any width and height on this section okay so if you want to work with This section first of all we have to select our section

so I'm going to just write a section right here and inside that I'm going to just write a width of like uh I don't know 100 not 100 pixel but you know I'm going to write like a 500 pixel and I'm going to also write a height of 500 pixels so if you save that and now here you can see we get this huge box right here so we have like 500 by 500 box and now the color is totally red right here so why is the color Totally red let's suppose if you just provide

like the background color to be like teal maybe so if you sell file and why is not that teal showing up right here that's because this div is now the children of this section and we are providing 100% of withd to it and 100% of high to it so now this div is tagging all of the area which is this section have okay so if you just write like instead of 100 if you just write like 60% or you know 50 would be fine and now If you save that and now here you can see

it will now just take the half of this div right here half of the section area because we are now working on percentages right here so now let me just write the high as well so if you just write 50% of height and if you sell that and now here you can see this is now 50 by 50 and this one is 500 by 500 okay so this is how we can work with that so let's suppose if you just want to write like 20% and then 20% or you Know 40% and 20 so this

is how it will look like and so on and so forth so you can play around with that if you want to but we are totally done with part so now they will learn two units so the first one was a pixel and and then the second one is a percentage so now let's just learn more about a relative unit so the first one we have is a M and M is a relative to the size of the font size of the element so which means like 2 m means two times of the font size

of the Current font okay so what is all of these gibbish mean so for that I'm going to remove everything which I have inside a CSS and I'm going to also remove these section and their diff so we have now empty body right here and now what I will do is I'll just first of all select like HTML like the root tab and let me just save this HTML file and I'm going to just proide like a font size of 2 m okay by default I'm going to just Pro like 2 m if you sell

there and We cannot see something because we didn't write any text and whatnot and now if you just write like uh hello inside this paragraph and now if you save that and now here you can see it log us this like 2 m if you right click on it and click on inspect and now here you can see it log use like font size is 2 m but if you uncheck that so here you can see it will log use just a 16 pixel and what is the default size okay so if you go to

the computer willu so here you Can see by default the font size will be 16 pixel okay so if you just check there and we provide like 2 m so here you can see it now double the size and we have now 32 right here okay so this is what's going to be happening and we can also change this to like something else like if I just go to my paragraph and by the way I forgot to show you like font size is a property which allows us to increase or decrease the sizes of a

font and we are going to be diving into the Font sizes and typography in a really great detail just in a second but for now I just kind of want to show you everything like what is the m unit working and stuff like that okay so now let me just select my paragraph in here and here I'm going to just WR like a font size of maybe fourm right here okay so not Rim but M so now if you save our file and now here you can see it will Now bump it up why is

that that's because we provide this SP size of 4 M Right here but if you comment this line out and if you save that and here you can now make it smaller right here okay so this is how we can work with a uh M unit now let's learn about the third unit which you're going to be learning or maybe the fourth one which is a rim so Rim is relative to the font size of the root element it doesn't care about the parent element like uh if I just write a parent element if we

have like parent element right here like if we Have section and then if we cut this paragraph from there and we put it right here so this is now the parent element and this is now the children element right here as I told you that in a second so now now if you want to use a rim unit so Rim unit doesn't care about the parent element it will just go straight up to the root element right here so it will just check the font size if the font size is something like maybe 16 pixel

and we WR like two rims so it Will now double up the font size to be like 32 so it will now change the font size to be just 32 okay so let me just show you that action and then you'll get to know what I'm talking about so I'm going to remove this section from here and from here and if you sell that and this this is how everything currently looks like and if you click on it and click on it one more time so I want you to not is this phone area it

is by default 64 what is going on uh okay we Provided there so I'm going to remove this from here and now here uh their font family is gone because we didn't provide any font family to it but if you want to provide font family so we can also do that but let's suppose if I just write like a font I'm going to write like font size of 16 pixel if I save my file and now here you can see we have a font size of 16 pixel right here okay and now if you want

to work with a rim unit like uh if I want to change the Font size of this to like two Rim so for that we can use like first of all paragraph and now I'm going to write like font size of Two Rim okay so if I do that uh so now let me just sem my file and now here you can see it will now double up that root element a font size right here so back then it was just 16 pixel now it's 32 right here and by the way one Rim is equal

to 16 pixel so so if I just write like one rim and if you s file it will be just 16 pixel and If you just uh write like two rims so then we have 32 Rim if you write like uh three Rim so here you can see log us 48 Rim four Rim will be just like 64 Rim uh I mean like 64 pixel and if you just write five pix uh five frame so it will be 80 so it can go on and on like that okay you can learn more about there if

you want to but I suggest you to learn more about there but you have to remember like we have these relative units inside a CSS relative and um Absolute units so then now the next one we have is this VW and VH right here so first of all let's learn about a VW so VW just simply means the viewport withth so what is a viewport a viewport is all of this body area which you can see right here so what is that saying so VW is relative to 1% of the width of the vi Port

right here okay so it'll just take 1% off with if you just write like one pixel and stuff so I'm going to remove everything from here and I'm going to Just remove that from here instead I'm going to write div and now if you save that and if you just write div and we provide a little bit of not WID but let me just write a background color of black or not black but te will be fine if we save that we cannot see nothing so now if you want to provide a width to it

so for that we can use like width property as you saw just a second ago you can give him like 100 pixel or 100% if you want to but in this case what we Have to do we have to just write like 20 VW it means that it will just take the 20% of the viewport withth so if you save that and now here you cannot see there we have to provide height as well so if you just write height of like maybe 10 or 100 pixel if you save that so now here you can

see L tag like 20% of the viewport with right here okay if you want to take like 50% so you can just write 50 it will now take 50% of the viewport with and if you want to Provide 100s so you can also write 100 okay not thousand but just 100 if s file and boom it will take the entire width right here okay so the entire viewport width and now the next one we have is a v Ed so this one is a viewport width and this one is a viewport height and now if

you want to change like the viewport height so for that we have to just remove that pixel and now we have to convert that to VH so if you sell file and here you can see it will now take The entire viewport right here and by the way if you are wondering like where is this empty spaces coming from this is coming from something called a user agent style shet by the browser but you don't have to worry about it for now because we can remove that by using margins anyways so this is it about

a viewport width and viewport height rims M percentages and so on and so forth okay so if you just want to provide like 50% of viewport height so if you save There so now just take like 100% of viewport height right here okay so we can play around with that if you want to so you can learn more about that and or you can just ask from a Google or you can go to the mdn if you want to but my recommendation will be to not waste a lot of your time on a unit so

you can just choose one unit and I've already mentioned all of them except like ex and CH and you would never use that in your life ever I shouldn't have to say ever But you will use that but you will not find yourself using all of them that much often so I don't want to waste your time by explaining every single one of them but now that you know units in CSS all right so I just show you a font size property and this is a typography property in CSS so what is a typography if

you just hit contrl C and if you just write like formatting okay it not helping me f o r m a t i n g okay it's not still helping Us so if you just write typography okay so it's not still helping us if you write a font okay so now we have a lot of kind of fonts and stuff we have 20 oh my goodness there's a lot of them but instead we not going to be taking a help from this mdn page I'm going to show you everything from scratch so I'm going to

remove everything I'm going to remove this D from here as well so now the first thing I'll do I'll just write H1 of like hen Right here hosan webd you can write your own name if you want to and now if i s my file and you already what we will get inside a browser we will get just like hoseen webd okay so we are going to be starting from a typography section by first of all learning about a font family okay so what is a font family a font family will be just a look

and feel of your font okay so how the your font will look like so by default once you write your uh code like by default Browser will provide a set of fonts to it so what is a set of font a set of font is that font which have these caps on it so here you can see that cap this underneath cap and you can also see that cap on a u you can also see it on X and and and we don't have any caps on the E right here but we also have these

caps so these are called serves okay you can call it like CS or you can also call it a real name which is a c i mean which is a serf to be precise okay so now by Default our font looks like this if you want to remove this caps so for that we can use a for family of sand Sur so it will not remove that so if you just write H1 and if you write like a font family and we have a lot of font family is in our side and we can work

with that I'm going to show everything just a second uh if you just write like serf in this case and if you save that here you can see nothing will happen and if you just write like send SF and if you s File and here you can see that capes are gone from or font right here and here you can see we don't have any caps whatsoever or serf to be precise we don't have that surfs right here so that's gone and by default it will gives us all of the font if you hold control

and hit space so by default it will gives us all of the list of the font which we currently have ins side World machine if you hit control space so these are all the fonts which are Currently available in my machine so the chances are your machine will not have all of these fonts so you can install that into your machine or you can just quickly copy that from Google which I'm going to show you just in a second but let's suppose if I just click on this one like maybe Franklin or whatever is this

name so I'm going to click on this one and now if you send my file and here you can see this pH will change to this kind of Frank l or whatever the font Name is and now if you hit control space one more time we have this C UI and then we have a lot of Georgia if I select Georgia in s file and Georgia will look kind of like a s surf it is a s surf but it is a little bit different than that if you just like comment this line out and

if you save that and this is how a default font looks like and if you just uncomment that and if you save that and this is how this Georgia will look like I'm going to remove that we have Different kind of fonts like we have uh curve fantasy so if I just click on the fantasy one and save there and this is how the fantasy phone will look like if you select just this curve one where is there and if you save there and this is how the kind of cartoonish font will look like it's

kind of like cartoonish font if you want to build application for some children so you can use that we have a monospace if you click on that and save it and this is how the Monospace font will look like okay so this is the first thing like how our phone will look and feel like so we have Fone family for that so I'm going to just change that to like send serf seven and we just remove their serfs from our font okay so now the next property which I want to talk to you about in

topography section is something called a font size which we already learned so here you can specify like uh by default or font will font size will be 16 pixel And you can increase or decrease there if you want to so like let's suppose if you just WR like 20 pixel and if you save there and boom it will not uses like 20 pixel if you just want to bump it up like more maybe 50 pixel and if you save that and here you can see you have now this 50 pixel font right here okay and

you can play around with the RS value and the M's value and so on and so forth if you want to but I want you to just notice like we have this font uh Size property which allows us to increase or decrease the size of our font okay so now the next property we have is something called a text transform so text transform will have a few values so we have cab lines we have lower case we have uh upper case which you can see there inside this list but let's suppose if I just click

on this lower case for some reason by default I just wrot my phone like this so it will just change the cases of our phont okay So if you save that and here you can see all of my phone is now at the lower case h is lower case uh U is lower case X is lower case n is lower case and so on and so forth okay so if I just write like uppercase if I write like uppercase and now if it's sell that and here you can see everything is now totally at the

uppercase if you want to write like for uh maybe babize so for that we have to write more than one word you know what I'm going to just write like uh text Declaration or text transform of um yeah you know what first of all let me just write like uh huzen Webb um what can I write about myself is a YouTuber uh I'm going to just write like a YouTuber y o u t u b e r so now here I want you to know this or you know I'm going to remove every all of

them and here I'm going to just write like Huzan is a Huzan web dev is a YouTuber okay so if you s there so here you can see everything is now perfectly at the upper Case and here we wrote that is lower case but if you just save this file here you can see everything is now at the lower case right here but if you want to change that to capital L so capital L will just uh uppercase the first letter of the word like this H will be uppercase this W will be uppercase I

will be uppercase I guess a will be uppercase and Y will be also uppercase and the rest of them will be lower case Okay so this is what C I will do for us So if you just try like capitalize in here and if you saell that and now here you can see every letter of the word will be upper case and the rest of them will be lower case Okay so this is a text transform property and now the next property which I'm going to explain is a line height okay so if you want

to explain a line height you know what first of all let me just write a paragraph in here lurm of maybe I don't know 40 will be fine I'm going to write Lam 40 and if you s file and now here you you can see by default we get like this little bit line height right here but if you want to increase these line Heights so for that we can write over on CSS so I'm going to now select this paragraph right here and here I'm going to just provide like line height and what is

line height we have to specify some property like some value inside this line height maybe if I want to write like 20 pixels if I just write 20 Pixel you sell there and here you can see it will just decrease that a little bit and if you want to increase that like 40 and if it's s there and here you can just provide a line height inside these line if you want to write like 60 seven and this is how it will look like if you want to write like maybe 10 so if you save

that it will just jam it in together and if you want to go lower than that so we can just write like four And if you saell that and it will just look horrible right here okay so you can play around with that if you want to I'm going to just stick to like 30 and now if you sa there and this is how it looks like right here okay so this is a line height property a line height property will just allows us to provide a height inside a line either increase that or decrease

that then we have a letter spacing so if you want to get a spacing inside this letter so if you want to get A space inside this l o o r e m so if you want to get a spacing inside there so for that we can just write like um letter spacing and here we have to specify how much spacing do we want so we can just like like 20 pixel space it will be little bit huge if you save that and this is how it looks like right here here okay kind of awful

but here you can see we have 20 pixel space in here 20 pixel in here 20 pixel there and so on and so forth we can also decrease that By just writing like maybe five and okay so it's also a little bit you just write one and one is the default one all right so we can just write like maybe 50 if you want to and if you sell there and this is looking horrible this is looking totally horrible so we can just do crazy stuff like that by using CSS I'm going to just remove

that you know I'm going to com up so you guys can see everything a bit better all right so now if you want to get a spacing between each Letters so not not a letter but in a word so now if you want to get a spacing between this lurum and this ipsum like in this area so for that we are going to be writing a word spacing so I'm going to just write like word spacing okay and here we have to specify some value to it so in my case I'm going to just write

like 40 pixels if you save that it will not provide spacing between words right here okay so if I just want to write like 20 it will 20 10 and 10 will look Like this and you can play around with that if you want to okay so now let me just write a text align property so a text align will just as the name suggest it will align our text so if you just WR like text align property and by default it will be set to left so if you just save that and here you

can see by default it will be now set to left right here if you want to push this to right so we can just write like uh text line off right and if We save that here you can see our text is now went from left to right right here if you want to make that Center so for that you can just write like Center and if you save that and here you can see our text is now at perfectly at the center right here okay so we can play around with that if you want

to and now let me just show you the text decoration property in some cases you would want like decoration for underline or line through or not even decoration like let Me write a text decoration property and here let's suppose if you want to write like text decoration of uh I don't know um uh line through maybe so if you sell file so here you can see it will now provide this line or text decoration like line three if you want to write like text decoration of underline and if you save that here you can see

it now provide this decoration as underline right here okay we can also provide it to like uh what was the other one let me Hit control space we use all of these value so we have underline overline so if you just save that c not provide the line at the top right here okay so this is how we can work with that but if you want to remove that you can also provide uh text decoration of none and if you save that so don't all just remove that uh decoration from it and this text decoration

none can be useful for anchor tags in some cases so if I just comment off this line and if I just write like Uh anchor tag right here so let me just write anchor tag it will go to nowhere but if you have like um I don't know um learn more and if you save that here you can see we have text decoration of underline right here but if you want to remove that so for that we can just write like first of all let me just select my uh anchor tag right here and here

we are going to be just runting like text decoration of none so if you save that and boom that's gone from it Okay you can change the color if you want to you can just write color and black and if you save that so it will look like these but if you have a mouse over to here so you would get this kind of a cursor right here and by the way if you want to change these cursor so you have a lot of cursors in CSS so if you want to change the cursor by

default in uh anchor tag we have like you know what I'm going to show you that inside a paragraph once you hold mouse or to your Paragraph So you want to change your cursor to something else so let's just write like cursor of pointer so if you sell that and now if you have our Mouse over through this cursor uh so it will be like clickable but we can also select everything and stuff but it will change this cursor to this pointer right here okay so if you just remove this from there and if we

hit control space and we have this alt scroll Auto and then sell and call res siiz let me show you all of Them just like one by one so if you just write alas so here you can see it just gives us that alas kind of uh cursor if you select this all scroll and if you save that and here you can see it will not gives us this all scroll kind of um Circle right here I guess you can't see that but now you would see that then we have another one which is that

Auto 7 and auto will be this automatic one and then we have this sell if you sell there and this is how it will look like kind Of a plus sign I you never used that before and then we have a different kind of like call call size resize if you save that so it allows us to like resize our stuff and here you can also see this cursor right here we have different kinds of cursors like uh context menu and I guess I've never worked with this context menu one so I'm going to remove

there and now let's just select or copy one so if you save that and now here you can see it allows us to like copy some Text and here you can see that plus symbol okay so you can see that you can play around with a cursor if you want to but I'm going to just stop from a cursor right now all right so now that we know enough about typography in CSS like we have font family font size text transform text line text decoration line height letter spacing word spacing and so on and so

forth now the next thing which I want to show you in some side you would say like great fonts like uh There isn't any great font using this side but in some side if you visit that side and you want to get that font so you can just right click on it and click on this inspect area just right click on it somewhere and then click on this inspect area so it will not inspect you and it will also give you that font family and here you can see that font family of this SE UI

Arial sensor or whatever it is if you just uncomment that or if you uncheck that so here you Can see by default use that kind of a ugly font and we have font weight and I already forgot to show you a font weight as well so now let me just show you a font we real quickly so here you can see we have a font size so now let me just write a font and then weight and font weight allows us to change the weight or the boldness of our font so by default the paragraph

will have I guess a normal or 100 one and if you set that to like 700 and if you save that uh okay it's Not working let me just remove that okay we are using that on H1 so if you just write it right here inside a font size and if you save that and here you can see it will now set to Bard right here you can also provide uh different kind of values like normal and normal will be the default one and we can also write like Bard we save that it will now

bold if you just write like a bolder and if you save there so it will just be a little bit much Bolder than just a Simple bold one okay so here you can see inside this H1 so that H1 will be by default bold okay so if you want to change that to normal so we can just write like font wait to be normal so if you save that and here you can see it is now become to normal right here okay so that was it about a typography now the next thing I want to

show you is that how you download a fonts from a Google font and then you can use the inside your project if you want to so now I'm Going to remove everything and I'll save my file and I'm also going to remove everything from a body tag as well and here I'll just write H1 of hello word or you know what Huzan would be fine you can write your own name if you want to so I'm going to sve my file and now what I'll do is that I'll just go to my fonts. goole.com so

you just have to write like fonts. goole.com and here you would find insane amount of fonts right here okay so we have like uh sender you Can choose the categories if you want to if you want to get like Ser font or sensor phone display phone handwritten phone or monospace phone you can also change the languages if you want to get a font for that you can also change the font properties like uh numbers of font and then the thickness of the font the Slate the width and so on and so forth and this one

is a new one show only variable fonts so those font which have a variable and you don't have to worry About any font variables and stuff and then show only color fonts I've never used this one before okay so it will just allow you to just provide a color for kind of a emojis and stuff you can play around with there if you want to you can increase or decrease the font size if you want to you can even change the text let me just write something else like my own name husan web dev okay

so here you can see now change all of the text to this husen web dev and now I Can see it clearly right here okay so suppose if I want to get this form maybe which one is better so I want to get some crazy one like this one uh I can't pronounce the name of it but if I click on that so it now brings us to this font page right here okay don't be scared of this jish you can download this font by just clicking on this font family but you don't have to

do that for now so if you just click on that then select all of the font which is inside that uh Folder and then right click on it and click on install font so it will just install in your machine but it will not work on the user's machine so if the user doesn't have that phone so it will not work on there so if you want this phont to send it to users so for that what we have to do we have to first of all get into the font and and here you will

find a lot of font weights right here but for this specific font this font just have like this regular font Weight and if you click on that and it will now add it right here to this view selected uh family so if you click on that so here you can see it's already added right here if you want to remove that you can just click on this remove all or if you want to add more styles to so you can just go back and add more uh font families if you want to it will give

you this link you can put this link inside the head area but I'll not recommend you to do that you can just Click on this import and then copy this import not this style opening and closing tag but I want you to just right click on it then copy it so once you copy that then I want you to go to your stylesheet right here and paste it right here somewhere inside the stylesheet right here okay it doesn't matter if you put it above or beneath but the convention is to put it above like when

new developer start working on your project so they can see the font family And stuff okay so now I'm going to just copy this font family from there and and now what I have to do I have to select this H1 by default it looks like this if I want to change that to this font which I selected so I'm going to just write like a H1 and let me just write a font and then family and now here we can paste our own font family which we just copy from this area right here okay

so now we pasted that right here I'm going to remove this column as well and now if You sell file and now here you can see our F will look like this right now okay so you can choose whichever kind of form family you like so you can just remove there and you can choose whichever kind of font you like there are a lot of them like look at this one this is how my name will look like Huzan have kind of a logo and you can choose like a lot of fonts this one kind

of a old school gamish like a Mario kind of font uh there's a Lot of them if you want Bard you can search for Bard italic uh so on and so forth you know what I'm going to show you the final F if you want to get that for yourself and a real abriel kind of awesome font let me just get that real quick and let's see okay this one also have one for Family come on so I'm going to click on this one it will add it right here so now I'm going to click

on this import I'm going to copy there and now I'm going to remove this one and replace it with this new font and I'm going to copy this font family from here and I'm going to be pasting it right here come on so if I just paste right here and you s our file so now here you can see this is how our phone will look like right now okay so if you right click on it and go inspect and then we have to go to uh netork panel and now if I just refresh that

and now here you can simp now Download this font and how much is this font okay it's not that much huge so we have like 4 83 bytes of font okay so this is our style sheet this is our style sheet where is our font all right here you can see we have our font if you click on that you don't have to go to the details I don't want to show you that details but now you know that how to render a font and stuff so now we are totally done with the topography section

now the next Section I want to talk to you about is a box model so we are going to be learning about a padding margin content and board and stuff so I'm going to remove everything from here and everything from the body as well so here you can see we have a clear body right here so now what is a box model you don't have to go to the details of but everything on the web is made up of a box so what do I mean by that if you go to any site like it

doesn't matter which kind of site you Want to visit you can visit to any site so everything you see on that site will be made up of a box what do I mean by that if you click on this one this one will be a box this one will be a box this one will be a box everything you see like this will be a box these will be a box if you go to CSS so all of them will will be a boxes this will be a box everything is a box so if you

just right click on it and go to the inspect area right here so if you just scroll down Scroll down so what do we get we get this box kind of a shape right here kind of a box right here so what is inside this box everything on the web is made up of a box and that box is made up of four things so which kind of four things I'm talking about the box is made of of a Content this is the first one then we have a pairing this is the second one one

then we have a border this is the third one and then we have a margin and margin is the fourth one okay so you Just have to remember that let me just say that one more time everything on the web is made up of a box and that box is made up of content padding border and margin okay so if you want to provide a margin to this button so you can also do that by writing here like uh I don't know 200 pixel and here you can see all all provide that margin you don't

have to worry about everything for now which I'm doing inside this box model but you just have to set back and relax and Watch it okay so now we can change the content area if you want to you can change the pairing like let's suppose for top and bottom it's awesome but for left and right I'm going to do is that I'm going to just provide like 40 pixel and uh let me just write in here like 40 pixel in here and if you write it so here you can see this button is a little

bit bigger than this one and by the way if you just refresh our browser so that will just come to Its own St like a previous one anyway so that's it I'm going to remove this one from here and now let's learn about a box model in this video okay in this section to be precise so now what I'm going to do is that I'm going to just write a div in here and I'm going to write nothing yet or you know what I'm going to write a box box so if you save that and

now here you can see we have a box right here okay so if you want to style this box first of all let me just Get this box then what I'm going to do is that first of all we are going to be learning about a border so in Box model first of all we are going to be Lear learning about a border so if you want to provide a border to this entire area like to in this entire box so what do we have to do we have to just write first of all the

Border width like how much will be the width of our border so we can just specify the amount like in my case uh we can write one pixel we can Write two pixel 100 pixel or how many you like but in my case I'm not going to go that much crazy I'm going to just write like two pixel of Border width then what else do we have to do we have to just write a border and then Style and so what will be the style of our border so we have a lot of kind of

different style we have a dash dotted gr hidden and so on and so forth and now in this case what I'll do is that I'll just write like a solid one right here okay So now if you s file so what do we get we get this border right here around this box right here and if you right click on it and go to inspect area and now here you can see we have this border all around this area right here so you have border to the top border to the bottom border to the left

border to right and so on and so forth okay so now we get our bordered so now in some cases we would need to change this border color so if you want to change the Border color so for that we can just write like a border and then color okay so it will allows us to change the Border color to be like any color as you like you can provide RGB value you can provide hexad decimal value you can provide hsl you can provide rgba value if you want to but in my case I'm going

to just click on this equa one and now if you save that and here you can see it don't all change this color to qu you know what I'm going to just stick to red And save it so now here you can see change the color is changed to red right here okay you can increase or decrease the size of this border by just specifying it right here like uh maybe uh five pixel bord to save there and this is how you can provide a border to it okay so this is the long way to

ride your border so now let me just show you the shortcut for writing a border so what do we have to do we just have to write a border right here so so now I'm Going to select everything thing and I'm going to comment all of them out and now the first parameter or the first value we are going to be providing is the Border width like we are going to be providing first of all the Border width property then the Border style property and then the Border color property uh values to be precise so

first of all I'm going to just write like two pixel for the Border width then I'm going to just write like uh in this case I'm going to Just stick to like a dotted one so I'm going to select a dotted kind of border and then finally I'm going to provide a color to be like maybe teal color okay so this is the short hand for writing a border so now if you saell that and now here you can see the color is now changed to teal the style is changed to this doted one and

now we have this border all around there okay and we have two pixel kind of a border we can increase or decrease at like 10 pixel Maybe and now here you can see that border become a little bit bigger okay so you can play around with that if you want to but now if you want to provide a border to just a specific side like in some cases you would just need a border for the top or for the left or for the right so what do you have to do you can just write like

Border in some cases like you just write for left so left border will be just like uh two pixels solid and then teal maybe or maybe which Kind of color you like in my case I'm going to just stick to the crimson and sell file and now here you can see we have border to the left if you want to push that to the right so what do we have to do I'm going to just write like a border border come on border to the right and I'm going to comment this line out and here

what I'll do I'll just write like uh maybe four pixel solid uh of um kind of a which kind of color do we have to choose U maybe I'm going to Just click on this blue wet I'm going to have to write it manually like blue wet color now if you save that and now here you can see we get our border to the right if you want to get it for the bottom so we can just write like border bottom and we can just write like two pixels solid of uh maybe uh which kind

of color would be fine black would be fine and I'm going to just comment this line out and if you save that and now here you can see now just add the border To just a bottom if you want to put it for the top so we can just write like border top of two pixel solid or whatever like teal maybe or Crimson or fuchsia so I'm going to just select this fuchsia come in the other one and here you can see it will all add this border just to the top area right here if

you want to add it for like all of the area one by one so you can also do that if you want to I'm going to comment this one so I'm going to write like border to The top first of all will be two pixel solid uh orange then we have a border uh uh come on border to the bottom of two pixels solid uh what teal then we have a border to the left you would just get like two pixels solid of green then we have a border to the right I'm going to zoom

out a bit border right to be like two pixel solid and maybe I don't know pink would be fine and now if you save that and here you can see now add the border to all of this area and we have Different kind of colors for it okay so this is how you can add a border so what I'm going to do is that I'm going to remove everything from here like so and zoom in a bit and now here I'm going to just provide a specific border like two pixel solid of red would be

fine and now if you save that and now there we go okay so now we learn about how to add a borders to a specific kind of box or container where you want to Coler now let's just learn About something called a padding so what is a padding a padding will be just a Inner Space inside this uh box or container or box or whatever you want to call it okay so we are going to be adding a pading inside a padding is just a Inner Space of that container so if you want to add

this padding so we just have to write like padding first of all padding and then this is a short hand for writing a padding so I'm going to just write like 20 pixel of padding to All around so if you save that and here you can see we get like Ping to the left ping to the right ping to the top ping to the bottom if you right click on it and go to inspect area and here you can see we have a pairing to the top bottom left and right right here and we also

have this border to all of the area so if you want to add it to a specific area so all of that same stuff will apply to this one as well so we just have right pairing to the top of 20 Pixel and s file so it will now just add padding to the Top If you want to add it for the bottom so you can also do that by just writing pading bottom of 20 pixel and s file so now just add this pading to the bottom if you want to add it for a

left so we are going to be writing like a padding of left and pading left like in my case I'm going to just write like 10 pixel and sell file and here you can see it will now add this padding to this left area right Here okay if you want to add it for the right so before we getting into that we have to just write text align as we learned in a second ago and text align to be the right first of all save it and now here you can see we have this box

right here and now if you want to add padding to the right so we can also do that by just writing padding right of maybe 40 pixel so if you sell file and boom so you don't all just add 40 pixel of padding right here if you want to add It to all of the areas so for that we have to just write like pading to the top bottom and left and right and now let me just show you one more uh pading property which is like a piring first of all and if you want

to add it for a top and bottom so for that you can just provide like 10 pixel and you don't want to add it for a left and right so for that you can just put a zero in here so this is the first value will be for top and bottom and the second value will be For left and right so if you save that so here you can see it will now add this padding to the top and to the bottom but not to the left and to the right so if you want to

add to the left and right as well so in my case I'm going to just write like 20 pixel sa file and now if you save there and boom so here you can see we have this pading to the left and you can also you can see that right one but we have uh also padding to the right one as well anyway so that's that so That was it about a padding one so now let's just learn about a margin okay so now we learn about these three things so we just learn or not three

but two things we just learned about a border we also learned about a pading but we didn't learn about a margin so a margin as this one like pading was the Inner Space inside that container or that box whatever you want to call it but now in this case their margin will be the outer space of that container okay so now if You want to add a margin and by default here you can see they added like margin to all of these areas right here as I show you in the previous video if you want

to remove that so you can just write like margin to zero but now if you want to add a margin from to these areas to left and right and so on so what do you have to do you can just write like a margin and 20 pixel to all around so if you just write there and if you save that so it will now just add margin to All of these area like 20 pixel to this area top top and bottom left and right as well okay so if you want to add it to a

specific area so you can just write like margin of left and then 20 pixel margin uh right and 20 pixel margin uh top and so on 20 pixel margin uh top bottom and just write it for the bottom one as well like 10 pixel if you save there and this is how it will look like right here and now if you right click on it and click on this inspect area and Now here you can see we have ping to the top of 20 pixel left 20 pixel and right 20 pixel and we also have

10 pixel to the bottom if you have Mouse over to the margin area and this is how you can see there anyway so we are now totally done with the Box model but we can also write like margin of just if you write margin to the top and bottom but not for the left and right and if you sa that so we have margin for the top and for the bottom but we don't have margin for the Left and right and now if you are arguing like we do have a margin to the left and

to the write and I didn't write this margin the browser wrote this margin for us so if you want to remove that first of all we have to select everything and you don't have to worry about this selector for now which I'm going to tell you just in a second but you don't have to worry about that selector for now I'm going to select everything it just simply means like Select everything which is inside our body and we can just write a margin and set that to zero and if you save that and now here

you can see we have margin to the top of 20 pixel did we just put 20 pixel yeah so we have margin from 20 pixel to the top and 20 pixel to the bottom and we don't have that to the left and to the right so if you want to provide that we can set this one to zero so we have top and bottom zero but if you want to write it for the left and Right so we can just write 20 pixel now if you save that and here you can see L gives the

margin for the left and for the right of 20 pixel right here okay and if you want to addit for all of the area so you just have to write margin of 20 pixel or th000 pixel however you like and boom okay so it will now add this margin to all of these area right here so congratulation now you totally understand a box model in CSS and that was just a little bit of tricky and I Will want you to play around with these values by yourself and now the next topic which we are going

to be learning about is something called a CSS uh background properties so now we already know uh how to work with a background color but for now what I'll do I'll just select everything and remove that okay and I'm going to also remove this box from there so save both of these file and we don't have nothing inside this body right here So we have one index HTML file and CSS file right here so now let's suppose if you want to work with the images or background properties to be precise so for that we have

to first of all write a d right here and if you save that and now let me just select my D inside there and what we have to do we have to just write like height of 100 VH so if you write a height of 100 VH and if you save there we will still see nothing because we don't have any back color to it so if You just write a b g and C so here you can see it long gives us a background color and we can just write like uh I don't know

different kind of background colors like red or green kind of a green one would be fine or greeny yellow would be fine in this case and if you save that and here you can see we get this um green kind of yellow color right here and now let's just remove these empty spaces from there like a margin to be precise I'm going to select everything And I'm going to just write a margin of zero to it so if you save the page like all of four viewport is now taking this uh greenish kind of yellow

color right here so now we already know like what is this background color property will do for us background color property will just change the background of our container or box whatever you want to call it okay so now the next property which I want to talk to you about is something called a background image Property so if you just write a background image and here we have to pass a URL a uniform resource locator you have to worry about uniform resource locator but here it will ask us about a location of the image like

this property allows us to provide image to that specific kind of like div or the header or anything you have selected but now in this case we want to provide a background of image to this div so for That we can use this background image property and then this URL and here we have to specify the URL of that image so you can use remote URL or local URL as we learned that in a previous video like if you have your own image so you can provide that path by holding control and heading space so

we don't have any images for now so we are going to be using remote uh path so I'm going to just write like unsplash right here and I'm going to go to this Unsplash and here let's suppose if I want to get this image so I'm going to click on that and shout out to this person sorry I can't pronounce your name but I'm going to take your image and thank you so much for this image I'm going to copy this image address from here and what I'll have to do I'm going to have to

write a quotes in there so if I just write a quotes and then here I'm going to have to paste this link so I'm going To zoom out of it and this is how it looks like and now if you sa file and boom we have this image right here but there are different kind of uh problems in these images which kind of problems do we have well um the first thing is that it's not repeating itself so first of all let's just find an image which is repeating itself so uh I don't know which

kind of image would be F which is repeating itself maybe this galaxy would be fine If you copy there I really like this image so I'm going to comment this line out and I'm going to write like a background image and then URL and here I'm going to pass this link right here so if you sell that all right so now here you can see this image is now repeating itself so we have this image like a sky and now here you can see this is end right here but we also can see this image

right here again so this is now repeating itself so if You want this image to do not repeat itself so for that we can use a property called a background repeat propert and here we have different kind of uh reputation properties like we can repeat for the x-axis if you want to like repeat X and if you sell that and it will now just repeat for the x-axis right here we can repeat for the y- axis so if you sa that so it will now just repeat itself for the YX but the image is a

Little bit bigger so that's why we cannot see that right here and we can also just provide a repeat of none or no repeat to be precise so we can just write no repeat and it will not repeat itself and now here you can see another problem which kind of problem we have here you can see this image is now at this area but we want this image to take its entire space so how can we go about doing that well we have another property of a background so if you just write Background of size

and here we can see we have like Auto contain cover and stuff so if you just click on the c one and if you s file so here you can see don't allow cover this area but we can all see that upper bar right here it's kind of awful image you know I'm going to remove this image real quickly because we already learn about a background property I mean like background repeat property I'm going to remove this one I'm going to uncomment This uh picture s file and now here you can see if you just

uh comment this line of code s file and this is how it looks like and now if you want to cover the background size so we can just use like background size cover and if you save that and this is how it looks like now we have another problem now we can see her image right here but we don't want this blurry kind of area right here we want her image to be inside this area so for that we can just use like a Background and then um position and here we can specify to the

top to the bottom to the left to the right so let's suppose if I just want to trite for the bottom and if you save that and boom now we can see her image and we cannot see that blur image like uh above the sky image so we can just write like top to get there and this is how it looks like and now if you just write like a left so if you s that and this is how we get our left area we can also get for the right Area by just specifying the

right area and now we can uh see the right area we can also put a center if you want to save it and it will now gives us the center of this image but uh in my case I'm going to just stick to the bottom one sell file and this is looking cool for now right here okay so so now that we solve a little bit of problems using CSS so we just solve this background image property so background image property allows us to uh specify the Image or provide image to our box then we

have a background repeat and if our image is repeating itself so we can also remove the repetion of that image if our image is not toly covered so we can use a background size covered so we can cover that and we can also use background position property but now the next thing I want to do is that I want a parallx effect on this image so now in some cases if I have like a lot of if I just write UL Li and then we want like Uh 50 Lis and if you sell file so

here you can L uses like 50 allies right here so we have now this scroll bar right here so anytime I scroll so this image is not scrolling with me so if I want that kind of effect so for that we have another background property which is called background attachment so if you just write like a background attachment property and we have a few values for it like we have fixed we have local scroll and you don't have to worry about any Other of them but in my case I'm going to just click on this

fixed one and if we sell file then now if I just scroll down so here you can see that image will stay up there and we will get kind of a parallx effect right here if I just comment this line out and s file and if I scroll so here you can see this image is scrolling with me but we don't want that we don't want that kind of a paralu effect if you sell that and now if I just scroll down and here you can see That imag is also scrolling with me not I

mean like this image is not scrolling with me but it's giving us this uh kind of a parala effect right here and now let me just show you the final thing about the background property and which I will not recommend you to use use that in your projects because it's confusing a lot of other developers and also yourself including so I'm going to just remove or not remove I'm going to comment all of this area I'm going to Also comment that background one save it so we can use a background shorthand property but as I

said that I will never recommend you to use this property in your own personal project or someone else project because it confuses a lot of developer so the first value we have to provide is a URL of that image so in my case I'm going to get my new kind of image like uh I no I'm going to right click on it and copy this image address or you know I'm going to click on that So that we can get a high quality result and then copy image address and then here in a quotes I'm

going to just provide this image in here so now if you s file and here you can see we get this image right here but now here the another property which you have to provide is something called No repeat which we just learned and this is a position uh background repeat property so we have to provide this value then now the next property we have or the Next value we have to provide is a center and Center will be for uh background position property in this case we provide bottom but here we are now just

providing a center you can also provide um bottom if you want to now here we just have to write a slash and then we have to provide the value of this background size property so what do we have we have a cover okay so then finally we have a background attachment property its value so I'm going to just Write a fixed in here and knify S there and this is how the image looks like right now okay if you want to get the bottom result so we can just remove that Center and we can just

write a bottom and if you save there so here you can see it will now gives us this bottom area right here okay and you can play around with this image as you like but I will never recommend you to use this uh shorthand property but I just kind of want to show you like this property do Exist I'm going to remove everything from this D or you know everything except that uh resets I'm going to remove everything from here and now we are totally done with the background property in CSS so the next topic

which you're going to be learning about in this video is something called uh gradient and filters so if you want to provide a gradient so first of all let me tell you like what in the world is a gradient a gradient is like this color Let me just show you that here you can see we have the mixture of colors like we have a dark green right here and we have a little bit slider green right here when we mix two colors at once and we use that in some sort of a element so that

is known as a gradient so like not just two two colors to be precise if you use like more than one color at once and we just specify that or use that in some sort of an element so that is known as a gradient so these are now two colors but We can go like three colors four colors and so on and so forth so this is now totally a green color and this is a little bit grayish kind of green color and so now let me just show you all of that next and then

you'll get to know what I'm talking about so if you just write like a div in here and now if you want to provide a gradient on some sort of image so first of all let me just get a some sort of image so I'm going to select this div and now here we are Going to be providing a background of image right here and now let me just put a image like URL let me just get some sort of an image this one isn't cool so I'm going to search for a nature real quick

so I'm going to click on there and go to Nature and which kind of image would be fine let me just see you know what I really like this image so what I'll do I'll just click on there and then I'll Right click on it and copy the image address and shout out to this person okay so now I copy the image address I'm going to just write my quotes and paste it right here so now if you want to provide a gradient on this image oh my God first of all it have to be

rendered okay we providing any height St I'm going to just write Heights of height of 100 V save it and now we have our image so now let's just Pro our property background repeat of no repeat and Background Position will be center background size will be c not contain but C and background attachment will be totally fixed uh fixed s file and boom this is how it looks like for now everything is looking the way we expect him to look so now if you want to provide a gradient on this image so for that we

have to specify first of all a comma and then here we are going to be writing a Linear and gradient so we have two kind of gradient inside the CSS so we have a linear gradient and we have a radial gradient which we are going to be also exploring just in a second but first of all if you want to like work with the gradient so we have to provide two colors so let me just write like blue and green and now if you save that and what do we get we get blue and green

colors right here so now we get like blue and green colors so we can modify That by using the opacity so I'm going to just uh zoom out a bit so you guys can see everything a bit better I'm going to H my mouse over to this blue and I'm going to change the opacity to be like so like that much so here you can see that opacity and I'm going to also decrease the opacity of this one now if you save that and here you can see now we add gradient right here inside this

image okay so if I just like let me just cut this uh gradient from There let me also cut this comma from there and if you save that and this is how it looks like image by default but if you want to provide a gradient so this is how we can proide a gradient you can choose whichever kind of color you like let me just write like maybe red kind of color and if you just lower its opacity to like so and we have green color so I'm going to select a kind of a bluish

color and lower the opacity of this one maybe like that much and now if You sell that and boom this is how our image looks like right now okay so you can play around with the gradient so this is a linear gradient so which means that we can change its uh positions as well if you want to so you know what I'm going to remove there and I'm going to just write like uh teal and blue and if you sell that and here you can see we get a teal and blue color right here so

if you want them to be like from the left so we can also write two left and Then comma so if you just write that then we have the s file and now here you can see log uses this color from the left right here if you want this color to be from the right so you can just write to the right and if you save there it log gives this color to the right if you want them to be for a top so you can just write to the top and s file it will

not uses to the Top If you want them from bottom so we can also just write a bottom it will gives us this color as a Bottom okay and we can also specify more than two colors like uh I don't know red would be fine and now if you save that so here you can see now we have three colors we have a red teal and this uh blue color so maybe I'm going to change this one to Crimson kind of color and this one to be like orange so if you sell that and here

you can see we are now getting this kind of uh effects so we can lower the opacities if you want to so we have a Crimson we Have this one kind of orange so maybe like so so I'm going to sell that okay so we M up something inside this orange one L the opacity Sav it we did mess it up something you know what I'm going to remove this Crimson kind of property let me just write Crimson Crimson property and this is how it looks like now let's just change the opacity of this one

to be like so save it and here you can see we are now getting different kind of results so This is how you can work with a linear gradient now let me just show you a radial gradient so I'm going to remove that and instead of linear gradient we have to just write like a radial gradient so here we can just also provide a different kind of color so I'm going to write like um blue and then sky blue and if you save that it will also gives us like a sky blue but here you

can see this blue is kind of a circle coming from the center right here okay So this is uh the difference between linear gradient and Radial gradient that linear gr I mean like that radial gradient will gives us kind of a circular gradient and that linear gradient will gives us from top to bottom okay so if you want to change the opacity of it you can also change the opacities like so I'm going to change its opacities and sell file and this is how it looks like right now okay and you can also apply that

same values which I Show you just a second ago to this image right here so I'm going to just save that and this is how by default our image looks like so now that we learned two kind of gradients so we learn about a radial gradient and linear gradient now let's learn about filters in CSS so there are different kind of filters in CSS so if you just search for like CSS filters and backdrop filter and we have a filter so I'm going to click on this One and we have a gray scale let me

just show you that real quick and these are kind of a new topics in CSS so we have a blur so as the I'm suggested it will just blur over image and we can increase the brightness by using a percentage sign we can increase the contrast by using a percentage sign we can also work with a gray scale Hue and rotation and in word we can also work with opacity and so on and so forth so starting from the first thing which is a blur so if You want to provide a little bit of blur

to this image so for that we can use a filter and then blur okay so blur is a function which we can use and here we have to specify the like how much blur we want this image to be so if you just want like 20 pixel and if you sell file and here you can see it will be now 20 pixel blur if you want them to be like uh 60% or 60 pixel so this is how our image will blur if you want them to be like 10 pixel and maybe five pixel would

Be fine and if you save that and this is how a little bit blurriness can be show up right here two pixel one pixel and so on and so forth you can play around with that if you want to in my case I'm going to just stick to 10 pixel and I'm going to comment this line out I'm going to write a filter one more time and now the next property which I'm going to show you or the next uh function is a brightness so as the name suggested it will just increase or decrease the

Brightness of our image so I'm going to just write like a brightness and here we have to specify the value in percentages so I'm going to write like uh 50% brightness if you save that and here you can see kind of a dark a night uh theme right here that's because of 50% of the brightness so if you want want to get for like 100% so if you save that so here you can see it will now gives us like by default image uh brightness we can also work with the 10 value so if we

Save that it will be much more darker than the previous one we can go like 41 and then 21 or and so on and so forth so I'm going to just comment this line out and now let me write another filter and it will be for contrast as the name suggest it will just increase the contrast so if you just write like uh first of all let me show you how our IM will look like this is our image if you want to increase the contrast So 20% and 10% or 100% or not thousand but

not 100 But you know what Ed would be fine save it and this is how you can provide contrast to it okay so now you don't have to worry about this drop shadow and stuff this kind of a little bit oh my goodness there's a lot of talking you don't have to worry about these drop Shadows for now you can use that if you want to but now we'll jump to the gray scale so I'm going to comment this line out and now let me just write a filter of gray scale and Here I'm going

to just proide like 20% so if you sell there so we cannot see something uh you know I'm going to write like 1% you can still see there so if you write 100% so here you can see it will now make it black and white that's because of a gray scale function okay so we can provide like uh 70% so this will be the 70% kind of a old school low quality images we can put for 40% and I guess that 10 would be the default one or we can just remove that and this is

How it looks like and so we have grass scale we have a hue and rotation and here we have to provide a degree and we learn about a degree D is also just a unit which allows us to provide a degree we can provide inversion like in word or opacity saturation or you know what I'm going to just show you the saturation and you can explore the other one by yourself I don't want to waste your time and M as well so here I'm going to just write a saturation of maybe let me just Write

a 40% save it and this is looking a bit kind of a black and white let me just write uh I don't know 60% a little bit more kind of a greeny let me just write 80% a little bit more green and 100% will be just a high quality of saturation so you can play around with that if you want to but for me I'm totally done by showing you gradients and filters in this video so I'm going to remove this div I'm going to also remove that div and boom everything is Gone all right

so now that we learn enough about gradient and filters so now let me just show you a cool places to find a gradient for yourself so the first place I'll show you is something called a gr. so or not graan doio but just a gan.com and the second place I'm going to show you is webg gradient.com okay so these are the places where you can find a lot of gr gradients for your project so I just choose like I guess I choose This gradient from this uh website somewhere I don't know but if you want

to just work with that gradient so you can just click on that and you can copy this hex code and put it inside your gradient and you can copy that one and put it inside your project okay so we have like three pages this is the second page and this one is now the third page right here okay so this is the first website right here and now this is the best way to find a gradient for your Project so now let me just show you that real quick here you can see a lot of

cool gradients you can copy the CSS code you want so if I just click on there let's suppose and if I just pass it right here so it will use this like background image of linear gradient to top and then the first color and then it will also give you these percentages and then the second color and it's percentages as well okay so you can choose a lot of gradients from this side Okay so that's what I want to show you now the next thing which we are going to be learning about in CSS is

something called selector so so far we've been using this selector like if you want to select something by using uh CSS so we just first of all write the selector name like a tag name and then we just write our stuff inside the CSS but this is just a one way to select some but if you want to work with a real world project so for that we are going To be using a lot of selectors so this is what we are going to be learning in this section so now if you just ask our

good old friend like W3 school and if you just search for uh selectors here you can see we have the CSS is selector so if I click on that it will brings us to this page right here and there are like crazy amount of selector but we would just need a few of them we have a class selector double class selector or multiple class selector whatever you Want to call it then we have a ID selector everything selector just a paragraph selector paragraph with the intro SE uh intro class on it every paragraph inside a

div and we have like crazy amount of CSS selectors we have attribute selectors and these are something called um pseudo selector which we are going to be also learning but not in this for you okay so starting from the first one which is a class selector so if you want to select Something in CSS so the first way you already saw is that first of all just write a selector name like a tag name and then just write or opening CBR and then closing CBR but now in this case let me just remove everything from

this document and now in this case let's suppose if you have like multiple thing if I want to select like H1 and we have heading one then we have like H2 of heading two then we have like H3 of heading three suppose if you want to Select this H2 by not using the tag name like we don't want to select that by using H2 and then want to work with that so the next way we can do is that we have to provide a class on it so now if you want to provide a class

to it so first of all we are going to be writing a space and then we'll just write a class and we can give like as many classes as we want right here okay but if you want to separate two classes from one so for that we are going to have to Just provide a space in there okay so now let's suppose if you want to give like two two classes like one and now if you want to give him another so for that we have to write a space and then we can write two

three four and how many classes you like okay so now in this case we want to just select this by using a class selector so first of all we have to provide a class right here like class attribute to be precise so now if you want to select that in CSS so What do we have to do first of all we have to let me just save this file first of all we have to go toward our CSS and now if you want select this class like one so for that we have to first of

all write a period or dot whatever you want to call it let me just zoom in a bit so you guys can see everything a bit better so first of all we have to write this period and then the class name so what is the class name the class name is just simple one So we have to just write one in here and then opening curly brace and then closing curly bra right here and now if I hit enter now I can do whatever I want to do with that suppose if I want to change

the color to be like maybe fuchsia and if I save my file and go to my CSS so here you can see it un log uses like fuchsia color right here here so this is how we can select everything by using classes so now let me just show you a multiple classes so if you just Provide a CLA to like one and we also want to provide uh like two CLA so now if we save that we can also do that right here so let me just select this two so it will provide this uh

styling as well because we have this class available inside this heading right here like we have one class available inside this H2 so it will provide this uh styling as well and now if you write some more styling in these two class so it will also apply there because we have These two class as well so let me just write something like uh I don't know maybe I'll just increase the font size to be like uh 4 R and if you save that and boom here you can see it also increase the font size to

be uh four rims right here okay so now if I just forgot to include this second class or if I didn't include this second closet and now if you just remove that in some case so now let me just save my file and here you can see will change the color But it will not change the font size of it that's because we don't provide uh that styling to it we did declare our styling inside the second or two to be precise this two CLA but we didn't use this two Clause somewhere inside word CSS

if you want to use this Clause like this two CLA inside this H3 we can also do that so now let me just write a CLA in here and now let me just write two and now if I save that and boom here you can see it will all just increase the Font size of it and I just realized that I made a mistake of uh th r w three or three so three so now if you save that and now it's looking better so now you are getting the idea of classes so this is

how we can select everything by using a classes okay so I guess I bump it up a lot let me just zoom out a bit so you guys can see everything a bit clear so we can uh select something by a tag name and we can also select something by using a classes so we can provide Multiple classes but we cannot provide multiple IDs to one element so what are IDs now let's just learn about that if you want to select something by using ID so first of all you just have to write a pound

symbol and then first of all you have to give some sort of ID to your element and then if you want to select that element by using a CSS so first of all you have to provide a pound symbol and then the ID name so first of all let me just write some code then you'll get To know what I'm talking about so now you know what I'm going to just write I'm going to remove this H1 from here and here I'm going to write a paragraph right here and I'm going to just write like

hello I am ID selector or just ID would be fine and now if I want to give him ID so what do I have to do I just have to write ID and if I hit tab so it will not giv us like it will not autocomplete it for us so here we can provide like uh ID and IDs are special In CSS you have to remember that the IDS are totally special you cannot put like two IDs if I want to just write like one and then two and then three so it will not

work both of them will not work IDs are special so you have to use ID once you can reuse this styling again and again but you cannot provide two IDs like ID will be one okay so now if you save that and now here you can see nothing will happen because we do declare our ID right here but we didn't Provide any styling to it so if you want to provide a styling to it or first of all if you want to select this paragraph by using this ID so how can you do that well

you just have to go to your CSS and first of all you just have to write this pound symbol or hash symbol whatever you want to call it and then the ID name so what was the ID name the ID name was just one so now you just select that and here we can just provide different kind of styles or whatever we have like let's Suppose I'm going to just put this color and now if you save that and here you can see the color changed to this kind of color like a greenish color okay

so if I try to provide another class uh I mean like ID so let's just write like two and sell file and now let me just uh select my second ID right here and now let me just provide a color of or you know what instead of color I'm going to just increase the font size to be like 4 RAM and now if you save that and here You can see it will not increase the font size why because as I said that IDs are special in CSS and you can provide just only one ID

to your um to your element okay so I'm going to just remove that I'm going to totally remove this paragraph and also these classes as well so now let's jump into another CSS selector which is called Everything selector so as the name suggest that it will be like everything selector it will allows us to select everything and this Is as a aich or whatever you want to call it so now if I didn't write anything inside a body so if I save this file and then I'll go to my CSS and I'm going to remove

everything from it and then if I want to select everything like if I want to select my uh HTML head title b or whatever we have so we can just write this s symbol so you just have to first of all hold shift and then hit add so it will now gives us this symbol right here and now if you want to Just writeing a style like border of two pixels solid red and now if you save that and now if you go toward CSS and now here you can see now you might be asking

like where is this style coming from like we didn't write anything inside this body tag that's because it is selecting uh what do we call it head area the HTML area and also the body area so if I type something like H1 of like hello and now if you save that so here you can see it will also select There it will provide a border of uh red right here if I write like Span in some case like in my case I'll just write like World maybe and now if you save that it will also

select this span and it will provide this border to it okay so this is known as everything selector and it will select everything it can be very handy in some situation like in some situation we would have a section and let me just write a section and then we would have like uh I don't know Article maybe and then we have like uh I don't know main okay so we would have a little bit of content inside there like one two and so on and so forth if you want to select everything which is inside

this section area like you have have maybe uh 500 line of code and you want to select all of there so for that you can use just first of all write a section and then just write everything selector now let me just comment that for a second and here I'm going to just Write like a border of two pixel solid teal and now if you save that and now here you can see it will now select both of these items which we wrote right here okay if you just write like I don't know H2 of

um maybe three and if you sell there so it will also select this one as well okay so these everything selected can be very helpful in different kind of situations so now I'm going to remove everything from CSS and everything from a body as well okay now the next Selector which we are going to be talking is just element selector which you already know how to select something by using an element selector you can also provide a specific class to it so let's suppose we have two paragraph suppose you have a paragraph of hello and

then you have a div and inside this div we have a p and we give a class of um you knowah I'm not going to put any classes but I'll just write a div and I'm going to write hello inside there And now what I'll do is that I'll just specifically provide a class to it like um I'm going to just write like text or content would be fine and I'm going to just write like word inside that so now this div doesn't have any classes this div do have class so now if you want

to specifically select that so for that we just have to write div with a class of text do you just provide a text yeah it's a text class so now we can style there like let's suppose if you want to Change the color it to like uh teal just write a color of teal and now if you s that now here you can see the style of the second div is change to teal colored that's because we provide do text uh cluster so now if you just remove that and now we are going to be

also removing this divs from here and I'm not going to be going through all of these selector you'll found that by yourself but you know what I'm going to just show you this uh div and P tag so now let me just Show you that real quick and here I'm going to write div and then paragraph of hello like hello and then outside from this div I'm going to create a new paragraph of word right here okay just a very basic examples I want to give you so first of all we have a div then

we inside this div we have a paragraph of hello and then outside from this div we have just a paragraph of word so now if you save that and if you go to uh CSS so what we have to do we have to just write Div and then p and inside that we are going to be just writing a color of crimson so here you can see now select this H1 the first hello that's because it's saying in a definition like select all of the paragraph element inside a div element okay so it will just

select every paragraph tag which is inside uh this d uh element right here okay so now let me just write H2 maybe and I'm going to write like uh you know what this will be two then I'm going to write um H4 of Three and then I'm going to write another paragraph tag and I'm going to write like four in here and now if you save that and now if you check so if I just zoom out a bit so now here you can see this one color is changed and this one color is also

changed and these two doesn't affect it why because this one is not a paragraph This one is also not a paragraph This one is a paragraph and this one is also a paragraph like these two are paragraph inside this div and we Are now selecting every paragraph which is inside this div and we are just providing this uh color of crimson to it so here you can see this one will take its styling and this one will also take its styling and the other one will be ignored okay so this is how we can work

with a div and paragraph or you can also just select like let's suppose if you want to select this H2 so you can just write like div or any H2 which is inside this div so you can now select then if You want to S our file and now here you can see this one take its styling right here and the other one was ignored so I'm going to remove all of this coding from here and also these coding from here as well okay so now the next selector which I want to show you is

a div and div and gr than silent paragraph so what does that mean it means like select all the paragraph element where the parent is a div element so it will now work a little bit Different here I'm going to just write like a div and inside this div I'm going to just write a paragraph Okay so inside this paragraph I'm going to write hello and then outside from this div I'm going to write a paragraph and then here I'm going to just write a word inside there and now if you sell that now I'm

going to go to my CSS and now here I'm going to select my div and then greater than sign and then paragraph okay so here if I want to change the color to be like Red now if you save that and if you check it out so here you can see this first one is affected but if you just write something else right here we have a div then inside this div we have a paragraph with the text of hello and then outside from that we have a word right here so now this paragraph is

immediately inside this diff tag so this one will take its styling but if I just write a section in here for some case and if I just put my paragraph if I cut It from here and if I put it inside this section now guess what will happen if you sell file and boom that styling is gone because this paragraph is not immediately the children of this div now this is the children of this section so this will not take its styling okay so now let me just show you that real quick so here you

can see we have a div with a greater than sign and then paragraph So select all of the paragraph element where the parent is a div so the parent I want you to notice this the parent is a div so now in this case the parent of this paragraph is a section not ative so if you just remove this section from there and now if you sell file so it will take effect right here that's because now the parent is a div okay so it will work like that now the next selector we have is

a div and then plus paragraph which means like select the first paragraph element that is plac immediately after a div element okay so What do we mean by all of that now I'm going to go to my CSS and instead of this greater than sign I'm going to just write a plus symbol right here and now if you save that and now here you can simp now select this second one why now in this case they say like let me just show you that select all of the first paragraph element that is placed immediately after

okay so immediately after the div element so what is immediately after the div element Immediately after in this div element we have a paragraph So if you just write like uh I don't know maybe article in here and then if I cut my paragraph from there and if I put it inside this article and if you sell that and here you can see nothing will affect it why because this paragraph is not immediately underneath this devoid here so that's why it will not be affected okay so now I'm going to remove that and if you

save that and here you can see This one is affected right here okay so that was quite simple and easy and now the next one we have is a paragraph and then tell the UL both of them are kind of the same like um select every UL element that is preceded by a paragraph element it is also like the same as this one you can check that out but I don't want to waste your time on that the attribute selector I don't want to get into like a specific attribute selector if you want to get

more details so you Can learn more about that but in my opinion they will just waste your time you don't have to like learn all of them but you will just use maybe a class selector or ID selector you would not use all of them but you would just use some of them so in this case I just kind of want to show you this attribute one so now if you want to select something by attribut so you just have to put the inside this brackets so now if I want to write anchor tag with

the attribute of This so I'm going to give him attribute of like uh I don't know suppose if I just give attribute of like one maybe so a lowas one so I'm going to give him my attribute of one and here I'm going to just write like hello word okay so hello word inside there now if you save that and what we get we get this like hello word right here and we give a attribute of like one HRI and then one so now if you want to select this anchor tag by using an attribute

so what do we have to Do I'm going to remove this coding from here first of all I'm going to write an anchor tag and then I'm going to provide a specific attribute to it so what is a specific attribute I'm going to just write hre HR R EF and it will be now equals to one okay so if that's true then I want you to provide a color of maybe orange so now if you save that and here you can see it will now provide a color of orange so this is how we can

select something by using an attribute Of HF or whatever like suppose if you have image with these two attribute and you want to select that by specific alternative attribute like uh I don't know nature or whatnot so you can also select that by using first of all the IMG and then provide alt in here and then provide that nature or whatever you have and then you can change the color of that and stuff like that okay so now I'm going to remove that and I want to save my file and I'm going to also Remove

both of them save my file the next one we have you don't have to worry about all of these specific ones okay so I guess we are pretty much done with the selectors okay so the next thing which you have to learn is a pseudo selectors now let's just learn about that and by the way if you are confused about these classes and these IDs and these spe specific kind of selector trust me you are not going to be using all of these selector in your project you will either Use classes or IDs and in

some cases you would just use stuff like uh maybe these or maybe these but not that much specific stuff like Target selector or stuff like that trust me on that okay so now let's jump into something called a pseudo selector so now let's just learn about a sudo selector so we have a few pseudo selector like active and active allows us to like uh select the active link and these are four links by the way or not Just only for links but some of them are for links so now let's just learn that then you'll

get to know what I'm talking about so first of all we are going to be writing our anchor tag and then here I'm going to just provide the link of like https and then www. um some NYC oh you know I forgot to include this dot um SL SL and then www .nyc go.com which is like a New York Time website and now I'm going to duplicate there a few times okay so now I'm going to change that to Wiki pedia and now this one will be just a twitch.tv and now let's just duplicate that

and here I'm going to just write like a UD me and here let's just remove that NYC from there and then Wicky pd.com and now the next one we have is twitch.tv instead of.com okay and now this one will be UD me.com so I'm going to just zoom out a bit so you guys can see everything a bit clear so we have just these links like uh first of all we Have a New York Times then we have Wikipedia then we have a twitch.tv and UD me so now I'm going to provide a specific classes

to them so I'm going to write a classes and hit Tab and here I'm going to just provide like a link class and then we have a visited class and also I'm going to give him a class of how this is my favorite one and we have active one okay so now if we save that now let's just start working on our link so what is a link first of all let's Just learn about that so we have a a link so link is a sud sudo selected so select all of the unvisited links so

it will select all of the unvisited links okay so now we visited to all of these links so what do we have to do I want you to just click on these three dots and then click on this new incognit window and this is super awesome window okay you can learn more about that well the best thing about this window is that it doesn't have any history tabs right Here okay so you don't have any history tab you can just like search anonymously inside this incognitive window if you want to okay so what I'm going

to do is that I'll just copy this URL and I'm going to paste it inside this incognitive window and here you can see it will now gives us all of the links in which we didn't visit so now let's jump into toward CSS and now here you can see we have this link so now if you want to select that first of all we provide a Class to it so what do we have to do we have to write a period or Dot and then we have to write a link not a link but a

class name and then if you want to select a Pudo selector so for that we can just either use one colon or double colon it will gives us all of the list of sudo selector we have inside our CSS you don't have to worry about all of them because we are going to be learning about the majority of them like those which you would need okay so here I'm Going to just write a link and now if I just select that and if I write like color of maybe red and now if you save that

so here you can see it will not gives us a red color right here so we didn't visit to this link so it will not gives us a red color but if we visit to this link like if I click on that and if I visit to this side and if I go back so here you can see that color is gone so this is how the link sudu selector works you can either put a single colon or a Double colon okay so if you just save that and if you okay so I guess in

this case double colon doesn't work you have provide a single column but if you want to work with a before and after selector you have to provide like uh double column in there and I'll highlight there once we get into there okay so now the next thing I want to select is visited one so now let's just learn about that like what is a visited and then I'll tell you v s i t a d so select all of The visited links like those Link in which we visit so it will now select all of

that links uh which we visited so now let me just select that visited and then let me just write a visitor in here and I'm going to provide a color of blue okay on blue is by default but you know what I'm going to provide the color to be like orange maybe and if we sell that and if we go to our original not in cognity incognet is this one here you can see these uh kind of um glosses and Stuff and this is our original and if you go there and now here you can

see it will now select this one because we already visited to this uh Wikipedia But if you click on that and go back and here you can see that color will be gone okay so that was it about for a visited one now now the next one which we are going to be learning about is something called how and how is my favorite one you can use that for anything you want not just for Only for links so I'm going to select my how and then let me just write a how inside there so here

what we have to do is that we can change the color to be like maybe um sky blue let me just write a sky blue color and now if you sell that and now if I hover my mouse over to this uh twitch.tv so here you can see it will not change the color and if I just hover it back back it will now just remove that color if we have over it again so it will now just change the Once we have our Mouse over to it okay it will change the color now the

next one we have is the active one so we have this active one but before we do let me just show you the active one select all of the active links like those links in which we can click on and it will brings us to that page so if I just select my visard uh not visard but active one and here I'm going to just provide like a active Studio selector and here I'm going to just change the color to be Like uh I don't know which kind of color would be fine I'm going to

give him a teal color I just know these few colors so now the final one we have is this Ur and if I click on that so here you can see it all change the color to teal why because this is now active so I'm now holding my mouse if I just throw it somewhere else it's blue if you click on it one more time so it will be teal color okay so these are a few sui selector which I want to show you in This section but we are going to be learning about a

more crazy sort of selector later on in this section so I'm going to now remove that okay and I'm going to also remove all of this Cod right here now that we are done with selectors and a pseudo selector and stuff so now it's time to learn about a display properties okay so by default if you write some HTML elements so some of them will have a display of block and some of Them will have by default the display of inline okay so if I want to just write like uh div so div will have

a display of block and then if I want to write a span as I showed you in a previous video uh not a video but in this section in a previous section and if you just write like uh inline okay so I want you to just notice these two and if you save that and here you can see both of them are in one line right here why is there if I just change That to instead of from uh span if I change that to like d and now if you save that and here you

can see both of them are in new line what's going on with that well so for that we have to go to our W3 school and ask our good old friend like what's going on uh so I'm going to just write like a display property d i s p l a y and I'm going to click on there and now here you can learn more about that but I will recommend you to Not because I'm telling you so why would you waste your time again and again so first of all we have a inline property

so so in line first of all let's learn about inline one display an element as an inline element like a span which I show you just a second ago any height and width property will have no effect on that so if I just write like instead of uh the I just write like a span in here and if I write span one more time if you save that and now if I want to Select that U by using a span text so if I just write like span and now if I want to provide first

of all let me just give my background color to be like uh maybe teal would be fine so if you save that and here you can see now we provide this teal color to it and now if you want to provide the width or height to it so it will not take that if I want to provide a width of like 200 pixel or height of 200 pixel and now if you save that and boom nothing's going to happen right now Because we are totally working on just an inline uh display so so that's why

it's not taking a width and a height as well okay so on other hand if I want to select my defo here if I try to provide these width and height to a div instead if I want to select my div right here like this one so if I want to just right div and now let me just copy all of the code and I'm going to paste it right here but I'm going to change the color to be like uh I don't know uh Maybe come on Canan would be fine if we save that

and here you can see it we now take this width and or highight one as well so if you just change that to 100 by 100 and if you save that so here you can see it will now take this with like 100 by 100 like 100% of width and 100% of height so what is going on okay so this is inline one and as we learned that inline will not take a height and with property the width and height property will no effect on an inline Element on the other hand we have a block

one and block displacing element is a block element like a paragraph or div or section or a header or footer or article Main and all of these semantics which we learned in the previous section it start on a new line and it takes up the whole width okay so uh any Block Level element will take all of the its entire width so if I just remove this width from there and if you save that so here you can see it will now take entire Width and anything come up in the front of it it will

just remove there and will take entire width of it okay on the other hand we have um inline one inline will not take its entire space but it will just uh work on its content like if I just write a lot of content uh like lauram maybe uh lauram 10 maybe and if you hit Tab and if you save that and here you can see it will just take its content place but it will not take the entire width okay so this is the Difference between the display inline and display block okay so now in

some situation we would need to provide display of inline but we would also want to provide uh width and height to it so for that we have another special property called inline block and you don't have to worry about um flex and grid these two are my favorite one but you don't have to worry about them for now which we are going to be learning in a really really great detail later on in This video so now we have inline block so inline block display as an element as an inline level block container as we

learned that in here just in inline one but in this case like inline block one the element itself is formatted as inline element but you can also apply height and width to it in just inline we provide inline to it so uh just if you just write like inline so height and width will have no effect on that but on the other hand if you use like inline Block so we can use height and width on it so uh instead of writing like LM 10 and stuff so I'm going to just write like uh I

don't know my name like hen web dev right here and now if you save that and if you check it out so here you can see we have like this inlight tag right here and as we learned that we cannot provide a width and height to it but we can change the display property of it so how can we go about doing that so I'm going to just provide like a Display of inline if we s that here you can see it's by default in line so if I just write instead of inline I'm going

to provide an inline block and if you save that and boom here you can see it did took like 100% of width and 100% of not 100% to be precise but 200 pixel of width and 200 pixel of height here you can see there we can change the color to be like crimson and s file and this is how it looks like right here okay so these are just a man and a Subtle difference between all of them so now let me just show you a few more things about inline and block one so I'm

going to remove all of these code so now that you know the differences between inine line inline block and Block Level element so here we have like a div and this div is like uh if you just write hello and this div Is Now by default a block level element if you just write it like block and now if you save that and here you can see we get a block right Here if you select that div and now let me just write a background color to be like uh I guess black would be fine

you know what not black but just a teal would be fine so now we have this Block Level element but we can also make that as a inline level display so how can we do that we are going to be just writing a display of inline okay and now if you save that and here you can see it's not taking its entire space but instead if you just write something like a lam of 20 and if you save that and here you can see it will now take just the content space right here okay it

will not take the entire space but just a Content space why is that that's because we just set the display property to inline right here okay so we now converted our Block Level property to be display inline okay so now if you save that and now let me just write uh Block in here so now we converted that to uh inline one but instead if you just write like Span in Here so we already know that span is a inline tag and also image is an inline tag also the anchor tag is a inline uh

display by default so these three are by default display of inline okay so if you want to change like let's suppose if you want to just write like um inline in here and now if you want to change this inline property to block so how can you do that there if you s file and here you can see it will be inline by default let's just style that a bit I'm going to Select my spinning here I'm going to provide a background of crimson uh Crim or you know what red would be fine not a

crimson so save it and here you can see it will also take uh just a Content space but it will not take the entire space but if we just write the display to be block and if we save that and boom it will now take its entire space and it will be in now in new line right here okay as we learned that inside these instructions and this is what's Happening right now so these are that two and we can also just write an inline block if you want to so we can also set that

to like inline and then Dash block we can also provide a height of like not 100 but 50 pixel and also the width of like 50 pixels so now if you save that and now it will take these width and height on the other hand if you just change that to just an inline one not inline block and if you save that it will not work like this height and width Will not not affected okay so I'm going to just remove that anyways so that was it about the display property we have three kind of

displays not just three kinds of displays but in this section we just learn about three kinds of value of display like inline block and inline block and we also have another one which is known as a display of none so now let me just show you that real quick so if you just WR display of none it will just entirely remove that element from a Dom If you just write display of none save it and boom that's gone we just kind of deleted that element from a Dom and now if you just write display of

none in here and if you save that boom this one is also gone if you just write something else like maybe section we have a UL then we have a lii then we have a anchor tag and we have all of these stuff right here and if you save that and we get just come on let me just write a hello and we have this hello now If you want to provide display of none on this section so it will now just remove all of these content okay so if you want to just select this

section and we want to provide display of none on it and if you save that and boom everything is gone from or D so this is how we can work with that so we just learned about display of inline block inline block and we also learn about a nun uh okay so here's a none the element is completely removed so we are going to be learning About in the upcoming sections uh Flex which is my favorite I really love Flex display of flex and then we are going to be also learning about a grid one

as well so congratulation for now you have tackled like maybe 50% of CSS so we have a long road to go still so I'm going to remove all of this coding from here and now we have totally a blank screen right now all right so now let me just talk to you about a font awesome in some cases in your website you want to use some Sort of a font like um some sort of a Emoji not a font but Emoji to be precise so if you want to get there for that we have to

just go to the font awesome uh.com website if you go there so in this website we can find lots of cool SVG icons and stuff some of them are free and some of them are paid so if I just click on the search gear icon right here so it un gives us all of these Library okay so which we can choose a lot of font from like we can Choose home we can choose magnified glass user Facebook check download and there are like countless of fonts right here and you can also check the categories if

you want to you can also to download this font into your machine but we're not going to be doing that so suppose if you want to use maybe like uh this Twitter font in your um social media icons or whatever so if you not a font why am I saying font all the time but social media icons to be precise not F if you want to just select this tra so I'm going to click on that and now we can just copy there and we can paste it inside our body tag but it will not

work why because we have to get a CDN of this font awesome Library so to get that so first of all you just go to the CDN js. comom and now want to hit enter right now so it will brings us to the CDN uh JS page which you will see just in a second so it takes a little bit of time and it's a little bit weird website you Will see that just in a second anyways so here you can learn more about this website if you want to but in my case I'm just

interested in font Awesomes what do I have to do I'm going to just search for font oh my goodness here you can see the weirdness so if I just write font then I'm going to click on on okay so we got a for awesome seran right here then I'm going to just click on this copy URL if I click on this copy URL and here I passed It so here you can see it log use a URL we are not interested in that one we are interested in copy the link tag so if you just

copy that and if you past it right here and here you can see this is how it will look like anyway so now I want you to just click on this copy link tag and then open your head area and underneath your uh link right there or Not underneath above your link because we want to render the or not uh above let me just put that underneath so let Me just remove that and put it underneath this link and now if you save that and now if you go to your CSS file and here just

wa for a second my internet speed is just a little bit clunky okay it's not g me a font come on give me that awesome font icon so all right so here you can see loog uses this Trader icon you can write your text inside there but before we do I'm going to hide this head area and we can just write like Twitter and save it and This is how it will look like we can get a card we can get like Instagram heart you can just play around with there and there like countless font

construction design device and hard drive and stuff like that in my case I'm really a big fan of a headphon so I'm going to just click on this um link so if I click on it so it will just copy it to my clipboard if I want to put it right here so what do I have to do first of all let me just write a br for myself and I'm Going to just write like uh you know I'm going to paste it right here so if you save that and now here you would just

see in a second that we will get our phone and my internet speed is so slow so that's why we have to wait for it and now here you can see finally 24 hours later we get our headphones right here so this is how you can work with that and now let's suppose if you want to like change the color of them to like something else like in my case I want to Change this color to be like blue so what do I have to do I can either select this class or this class so

let me just select this fa brains and I'm going to first of all write a period and then I'm going to provide this fa brands in there and I'm going to provide like color of maybe blue and now if you save there and we have to wait for it one more time come on and now here you can see the color is changed to Blue I know it's not a Twitter blue but it's pure blue we can Also change these headphones to something else so uh I'm going to just copy this link in uh or

this class to be precise and now let me just write a DOT and then let me just p in here and color would be maybe this kind of a greenish color and if you sell that and here you can see the color is changed to this kind of a greenish color so this is how you can work with a font awesome first of all if you want to get a font you just have to come to this website which Is just a font awesome.com and then click on the search gear or you can learn more

about there a font awesome if you want to you can go as a pro version if you want to but I'll not recommend you to do that and now if you want to get a uh it CDN there would be some place to get it CDN but I'm not sure where is that located so I just quick Google search and we get like cdnjs and I just search for a font awesome and then click on this copy link tag and we Just put the inside our head area and boom everything is working that way we

expect them to work so that was it about uh F awesome Library I just kind of want to show you that I'm going to remove this one and I'm going to also remove this link from here okay say bye-bye to them and let's just hide this head area and now we are totally good to go so the next topic I want to talk to you about is something called box Shadow and a text Shadow so how would we work With the shadows in CSS so first of all let me just write a div and we

are not going to be writing any content or whatnot so if I just save that now I'm going to have to go to my uh CSS and let me just select my div and inside this D I'm going to first of all give him a width of like 200 pixel and I'm going to also provide a height of 200 pixel and background color will be like kind of a blue color or you know what let me just change the opacity of the I really I'm Not a fan of pure blue so if you save that

and you already know what we will get inside our browser so this is what we get so now if you want to provide a shadow to this box so what do we have to do well there is just a syntax of a shadow first of all we have to write a value for x-axis then we have to write it for a y AIS then we have to write it for blur and also for the color okay so this is just a syntax of uh if you want to work with either a box Shadow or a

Text Shadow so you would just use this syntax so first of all if you want to work with a box Shadow so we just have to write a box Shadow property in here and now here we have to first of all write uh value for the x-axis so how many x-axis we want we want them to be like 10 pixel a lot and then we want them for a y axis 10 pixel one more time and blur nness will be like 20 pixel and the color will be by default the color will be black but

we want them to be Like orange maybe and now if you save that and here you can see it will now provide this orange kind of Shadow right here you can increase or decrease the size of it so I'm going to just stick to like two and four so if you save that and here you can see this is how it looks like and we can also change the what we call it blur so if you save that and this is how the blur this will look like and you know what I'm going to Just

write it four like so uhuh let me just change that to five yeah this is looking cool so you can just play around with there if you want to but I just kind of want to show is that how you write a shadow for your box or for your text so if you want to write it for text you know what I'm going to remove this I'm going to remove this div I want to show you something cool and I'm going to also remove this div I'm going to write H1 of my name like Huzan

web dev so now If you save there now I want to go to my CSS I'm going to select my body and I'm going to provide a background color of totally black so save it nothing will show up right here okay so now let me just select my H1 which is this hosan web dev right here okay so what do I have to do I'm going to just provide like a box shadow of I don't know two pixel two pixel two pixel for the blur two pixel for the x-axis for the y axis then for

the blur this and I want them To be like red so if you save that and we cannot see okay so I'm just using it for box Shadow it should have to be text Shadow and now if you s file and this is how it looks like right here okay so I'm going to just bump up the size so I'm going to use font size to be like four or you know five frame would be fine and if you save that and this is how it looks like and what else do we have to do

I'm going to write a text line of Center and boom look at this name I mean Like we can also provide a margin to the top and we can make it clear as we like okay so not for the top uh I'm going to provide for the bottom save it and instead of 20 I'm going to put like 50 and this is how it looks like we can play around with the margin uh not a margin but x-axis values like one one and two blers would be fine and you can play around with that and

you can get these kind of effects if you wanted to okay we can just go with h I'm going to Remove all of them and put it inside there and this is how it will look like but I'm going to have to increase the font size to be like 10 R save it and boom this is how it will look like kind of old school horror movie uh headings anyways so you can play around with that if you want to but I just kind of want to show you how you would work with a text

Shadow and a box Shadow so now what do we have to do I'm going to select everything and remove it okay and I'm going to also select this H1 and remove it so that we can get a clear screen all right so now we learn about box Shadow and Tech shadow in CSS now the next topic which I want to show you is something called inheritance in CSS so inheritance is like not a hard topic to learn but it's kind of like a theoretical topic so you have to watch some slides and I can totally

promise like my slides are not that much uh boring and I'll see you on the slides All right so what is a CSS inheritance a CSS inheritance is when we declare something on an element and by something I mean like styling on an element and it is also applied to the element descendant so what do I mean by all of that so now let me give you a quick example and then you will get to know what I'm talking about so here I want you to just notice this card so we have just a simple

HTML structure and inside a body we have two divs so the first div Have a class of parent and the second one is a children okay and inside a parent we are now selecting first of all a parent and we are just changing the color to be orange so what do you think is going to happen does this children will also be inherited or not well obviously it will be inherited so what do I mean by all of them that's because we are providing a typography style like color is a typography style so it will

be inherited so now let me just show you The result of this code and this is how it will look like so now let's just learn about like which kind of things will be inherited and which kind of things will not be inherited in CSS so not everything is inherited so only typography related style will be inherited and other than that nothing will be inherited so if you want to force inherit there so for that you going to be using something called inherit keyword okay so only typography Related topics or style will be inherited so

here you can see that green sign right here okay so now let me just show you a few codes so here you can see we have a parent and then we have a children and we have this CSS like we have a font family of sensor a font W of Bard and font style of italic and these three can be counted as a typography related Styles so these style will be applied so here you can see first of all we have a font family of s and then we Have a font weight of B and

we also provide a font style of italic so all of these are working right here inside of children as well this is a parent one and this is a children one so both will be inherited on the other hand layout cannot be inherited so all of the stuff which is layout related will not be inherited as a children so what do I mean by layout a layout we just discussed a little bit about layout but we are going to be discussing more about Layout like we are going to be discussing position and we are going

to be also discussing about display property like display flex and uh CSS grids and stuff but all of them will not be affected and now that we know just about width and height margin pairing and all of these kind of stuff so they will not be inherited so what do I mean by that so now let me just give you a quick example of that as well so first of all we just have this Code so we have a margin padding and height and width and position and all of them are inside a l out

categor so these will not be inherited so I want you to just keep these few slides in mind and now let's jump into our quator and write some code and then you'll get to know what I'm talking about all right so we are back inside our body tag and now here what I'm going to do is that first of all I'm going to write like a parent and then inside this parent I'm going to Just write our children okay so here I'm going to just write like hello and inside this div we are going to

be writing our word and now if you sell that so we have a parent with a text of hello we have a children with a text of word and now what we have to do we have to just go toward CSS and first of all let me just select my parent okay and now let me just provide a color of um maybe orange and let me just provide a font family of s surf let Me also write a font weight of B and let me also write a font uh size to be like two RAM

and I know we have other like typography Styles but for this case we are going to be just sticking into just few of them so now I'm going to just save my file and here you can see the font where is changed the font style is also changed and also the color is changed so both of them are working as the way we expect him to work because we are working on a font property or Typography related properties so these will be affected on the children right here okay but on the other hand if you

just write like uh first of all you know what uh I'm going to just do a bit of magic right here you don't have to worry about this score for now but what I'll do I'll just select my children right here and I'm going to just provide a position of uh what I'm going to provide a position of relative and I'm going to push there to Like 100 pixel to the left now if you save that and we are going to be just pushing that right here and now here what I'm going to do is

that I'm going to just provide a width of like 100 pixel and I'm going to also provide a height of also 100 pixel and now I'm going to just provide a background color to it and it will be like a teal kind of color and now if you save that so here you can see these are now applied to only this one why is there because all Of these property will be count as a layout property so that's why it cannot be inherited by these children okay so here you can see we have like width

of 100 pixel uh not 100 yeah 100 pixel and also height of 100 pixel and also the background color is also changed but it will not affect this one this one is still our children right here but this one will not be affected because um we are working on layout properties the font related property will be inherited Like a topography property will be inherited but not a layout one okay so you just have to keep that in mind and you don't have to worry about this position relative and left and stuff like that now if

you want to inherit this property as well like if you want to also inherit this width and height properties so for that we have to go to mdn or not MD in this case uh it's a W3 school and now if you just scroll down so we have a keyword called inherit so Let's just uh talk about its definition the inherit keyword specify that a property should be inhered its value from its parent okay so it will now force all of these uh values like we have width height and background color to be inherited as

a children so the inherit keyword can be used for any CSS property and on any HTML element so this property can be useful in some situation but it's very dangerous and my recommendation will be To use it just for a typography stuff and other than that I will not recommend you to do that anyway so now if you want to inherit maybe like um background color in this case what do we have have to do so now we are now inside working on a children so what do we have to do I'm going to just

write a background color and I'm going to remove that color and here I'm going to just write inherit and now if you save that and now if you check and boom here you can see both of Them will have this kind of a teal color right here and now if you want to inherit this width and height as well so what do we have to do we are going to be just writing a width of inherit and we're going to be also providing let's suppose I'm going to so first of all let me show you

the width one and now if you s there so here you can see it will now Pro this width to it but now if you want to inherit the height as well so what do we have to do we are going to be just Writing like height of inherit and now if you save there and boom both of them are now looking the same okay so now let's suppose I want to increase that to like 200 and also this one to 200 as well and now if you sell that and now here you can see

both of them are now bigger okay so this is how you can use the inherit keyword and all of that inheritance work okay but in my opinion I will never recommend you to use inherit keyword It's Kind like Using important keyword which I've never used in my life I shouldn't have to say in my life I did use that in some project but I will never use that to be honest so my recommendation is to not use that other than that it's all depend on you if you want to use that so you can use

that if you don't want to use that so you don't have to use that I just kind of want to show you like what is the inheritance in CSS so for now we're going to be removing everything we Have and boom everything is gone so I'm going to also remove these parent and children as well so save it and we have a clear body all right so now that we learned enough about a CSS inheritance now the next topic which you are going to be learning will be included as a layout topic so in layout

we have like a few topics which we are going to be learning like first of all we are going to be learning about position second we are Going to be learning about Flex third one we are going to be learning about grid so before getting into that advanced topic first of all let's just start working on our position property so we are going to be jumping into the position property but before we do I just kind of want to say that you have to give a little bit of attention to that because this can be

a little bit tricky to learn so we are going to be starting from first of all let's just Create a container and inside this container we are going to be writing like uh two classes like d and one okay so I'm going to duplicate that three times and then now let's just change that to two and this one to three and now if we save that so we don't have any crazy stuff but we have first of all a div with a class of container then we provide this D class to all of these three

divs and then we provide a specific classes to it like we have one Two and three now let's jump into our CSS and now let's just start styling or div so I'm going to just select my container right here and inside this container what I'll do I'll just provide a BG of totally gray color and you can choose which kind of color you like and I'm going to provide a width of like 800 pixel or 700 would do the thing and I'm going to provide a height of like I don't know 400 500 would be

fine if you save that so we get this container right Here or you know what I'm going to provide um 100% save it and this oh not 100% just a 90 would be fine like so and I guess that's fine anyway so now we create our first container right here now inside that container what we have to do we have to select all of the D classes like this D this D and also this one and what we have to do we have to give him a class of or not class but a width of

like just 100 pixel and I'm going to also provide a height of 100 Pixel so if we save that nothing will happen because we didn't select any of these classes and we didn't provide any background colors to it so now let's just select our first one and provide a background color of red or teal would be fine uh not teal I'm not going to provide any teal but red will be fine red and then let me just duplicate it two times then we have the second class like two and here we're going to be providing

a blue and then we have Finally the third class like a three did we just yeah we have three and this one be kind of a teal CLA so I'm going to just zoom out bit and so that we can see everything a bit better so now if I save my file and now here you can see we have this gray kind of container inside this container we have these three uh deals right here so now let me just change the opacity of that to be like just a little bit slider not that much come

on I want to change the color to be like Something else maybe that's that much kind of a grayish save it and yeah that's looking cool anyway so first of all let me just show you that relative and stuff properties so first of all let me just search for uh position okay so we have background position and we have position style u mask position come on and then finally we have this position property if I click on that it will brings us to this page right here so we have position edge2 and a lot of

stuff And let's just scroll down a bit so we have a few position properties so the first position property which we are going to be using uh I mean like we have a few position values to be precise not properties so we have a static one we have absolute we have fix we have relative and we have sticky okay and these are initial and inherit you don't have to worry about that we already learned about inherit in a previous section so static will be the default Value like by default elements surrender in order as they

appear in the document flow so if you check that so here you can see first of all we have the one then the second like a two and then we have the third one so these are at the top of each other so this is known as a position static okay and this will be the default position of our um of our side okay of or layout or whatever you want to call it so then we have a absolute the element is positioned Relative to its first position not static ancestor element okay so what do

I mean by this gibberish but before getting into the absolute and fixed and all of that first of all let me just show you the relative one so now let me just read it its description so relative the element is position relative to its normal position so left property and we have a lot of properties like left top bottom right and these kind of properties which I'm going to show you Just in a second add 20 pixel to the elements left position okay so you just have to remember this first line like the element is

positioned relative to its normal position so by default if you check over red one so it's just positioned normally right here inside this container so now if you want to just move that to the left so you can also move that to the left to the bottom to the top or to the right but it will be moved where we want to move there but It will not leave its place place so it will take this place and it will be moved to wherever we want so now let me just show there in a coding

so we are going to be first of all selecting our first one which is a red one so what we have to do we have to just provide a position of relative to it so if you just provide a position relative and if you sell there nothing will happen well because we're going to use this property like we're going to use left top Bottom and also the right properties so now we have to use like any of them so if you want to use the left one so if you want to push or H or

D to the left so we can just use left property and then we can specify the amount like let's suppose if we want to push that to like 100 pixel and if you sell that so here you can see it will now push it to the left like 100 pixel but it will not leave its place right here so here you can see we can now like push it to maybe Instead of 100 we can push it to 200 but it will not leave its place right here it will like take its place as they

say like the element is position relative to its normal position but they didn't specify that you will not leave its place okay so you just have to remember there for the relative and for the position position static will be a default one and position relative will move up to wherever you want but will not leave its entire space right here Okay so this is it about a position relative so now let's learn about position absolute so the position absolute the element is positioned relative to its first position positioned like a first position element not static

ancestor element so what do I mean by that so if you want to work with a position position absolute so so if you just write a position absolute so let me just write a position absolute in here and if you sell that and here you Can see that's gone so where is the other one well because they are jamed to each other right here because that we provide a position absolute to it so it just took its place position relative will not leave its place but on the other hand position absolute will leave its place

and we can move it to wherever we want okay so it will just check for the relative property first of all it will just check uh like we are now working on a position absolute right Here let me just write it absolute right here so first of all we check like do you have a position relative property yeah I do have a position relative property but in some cases this will not have a position property so we will check it here like do you have a position relative property they will say like no I don't

have so it will just go to the body and then finally it will go to the element like HTML root element so now I'm going to just remove this Absolute from here and now if you sa that and now here you can see that's gone from here like the other element is gone so now if you want to move around there so for that we can just use our top bottom and left propert and now if you just write like uh left in here and if you just write like 200 pixel and if you s

our file so here you can see it will now push it from this area to this area and now here you can see this element left its place and we just push That to the right right here not to right but to the left like 200 pixel we can also write a Top Value to it so top will be like 200 pixel and if you save that so it will now push it to the top you can also push it to the right and so on and so forth okay so you can play around with

that so we are now totally done with the position static position relative and position absolute properties so now the next property which I want to talk to you about is a Fixed and as an M suggest that it will be fixed value so the element is positioned relative to the browser window it doesn't care about its relative units like uh this one on this one and so on and so forth but it do care about its document element which is just rude so if you just write a uh position fixed to this third one so

I'm going to write position of fixed to this one if you saell that and now here you can see it will be pushed to the top Okay so we cannot provide that I don't know what's happening we have th e th we e so if you just provide that so we will now push it to the top so now let me just write like top of 200 pixel and now if we sa that so now push it right here we can also provide it to what we can also provide it to like um left of

maybe 200 pixel and now if you save that so it will not push it right here and we can also do a scrolling so now let's suppose if you Want scrolling so we can just write UL Li and now let's just write like times uh I don't know maybe 50 and if you hit Tab and if you scroll down so now here you can see we have a scroll bar and now if I scroll so it will just start from this area of the viewport and we can now scroll that to wherever we want so

you know what I'm going to just remove this 200 uh to the left or not to the left but to the top one so it will now be here so we can now scroll over side and This position fixed will be also scroll in this position fixed property will be very useful for a navigation kind of stuff so like whenever we scroll so that will be also that navigation will be also scrolled with us now the next property we have is a sticker property which is the sticker property the element is positioned based on the

user scroll position you just have to remember that and it's kind of an easy one so you know I'm going to remove this Position fix from here and what do I have to do I'm going to just provide a position of let me just write a position of sticky in here not static but stick key and now we can just provide some sort of position like you know I'm going to provide a top to be like 100 pixel and now if you s that now here you can see it now push it from the top

and now if I scroll so here you can see this element will be also scroll but if we hit this certain point So that will stop right here because we are now currently inside this container okay we are not outside from it so we are totally inside this container so that's why why it cannot be pushed down anymore so these were just a few properties which I kind of want to show you so now let me just riew all of them one by one first of all we just learned about position relative property and position

relative allows us to like move or position our element to anywhere we Want but it will not uh leave its place so we will have that same space inside uh in our Dom but we can move around this element to anywhere we want on the other hand we have position absolute a position absolute will also allows us to move our element anywhere we want but it will leave its space right here inside our Dom and then finally we learn about a fix which will be just like fixed to anywhere you want and if you scroll

so that element will also scroll with us Okay and then finally we just learn about a sticky property and sticky will be just like sticky at some place and if you just scroll so it will just also scroll with us and when it hit it certain points it will just stop scrolling okay so these were just a few properties which I kind of want to show you in this video or in this section so now we are totally done with this position property now the next thing which we are going to be learning is Called

Flex box or second position properties so we are going to be deleting everything we have inside our CSS file and now I'm going to save that and I'm going to also delete everything which we have inside our body I'm going to remove all of that and I'm going to cut that and now if you save that so we just have our blank body right here all right so now let's just start working on a flex boox so for this section we are going to be heading over To somewhere else called mdn or Mozilla developer Network

so what we have to do we just have to write mdn and now here you can see the link like we have developer. mozilla.org and I'm going to click on the first link and you can learn more about that if you want to you can change the theme if you want to but in my case I'm not going to do that documenting web Technologies is including CSS HTML and JavaScript since 2005 oh my goodness okay so now let's Just ask from him like what is a flex box brother so he will gives us this definition

a flexy box module usually referred to as a flex box was designed as a onedimensional layout model so flexbox only work on onedimensional layout uh for either from a left to the right from the right to the left or from the top to the bottom or from the bottom to the top which I'm going to show you just in a second so as a method that could also offer a space distribution Between item in the interface and Powerful alignment capabil ities and in this article you don't have to wor about them for now so when

we describe a flex box as begin onedimensional we are describing the fact that flexbook deal with the layout okay so if you want to work with a layout so if you want to push some item from one place to another by either using a row or a column so for that we can use flexbox and a flexbox is something which will help us with layout And it will just help us with onedimensional layout if you want to work with more than onedimensional layout so for that we have CSS grid which you're are going to be

also learning in this video okay so you can learn more about that so before getting into the actual coding of a flex box you just have to remember two things so the two x's of a flex box when we working on a flexb you need uh to think about in term of axis the main Axis and the cross axis so the main axis is defined by the flex Direction which we will see just in a second property and the cross axis runs perpendicular to the flex um what do we call it the main X's okay

so everything we do with a flex box refer back to these X's so it's word learning about Flex boxes so the main AIS we have these properties which we going to be exploring so if our main axis is set to the row or cross AIS will be set to the column because cross axis Will be perpendicular to the main axis so for now you just have to remember that and now let's get into the coding so by the way let me just say that one more time so that you guys don't get confused if our

main AIS is row or cross AIS will be colum like our cross AIS will be perpendicular to our main AIS okay so I just said that one more time and now let's get into our coding so now let's just start working on a flex box so the first thing we would do is that We have to first of all create a container inside this container we are going to be writing a lot of children's like child and we are going to be writing like uh I don't know I'm going to use emit uh we have

a child and here let me just write a uh dollar sign and boom and how many we want we want them to be like uh I don't know maybe five for now so we got like 1 2 3 4 5 and each of these D will have a class of child okay so before working on A flex box you need to remember a concept called containers so if you want to work with a flexbox like if you want to move around these uh children's so first of all you have to Target the container you cannot

work with a flex boox inside a children's you would work on a flex boox box inside a container so if you want to work with a flex box first of all you have to select the container it doesn't matter like whichever kind of container you have you Can also call it like a parent first of all you have to select the parent and you can work with a flexbox by using a parent or container whatever you want to call it so now let me just ask you a few question first of all uh I'm going

to just write like a little bit coding so that I can tell you like what's a container or parent and stuff so let me just write a section then inside this section we are going to be writing our article and inside this article we going To be writing ul and then we are going to be writing lii and then outside from this UL we are going to be also writing another section and now inside this section we are going to be writing H1 of hello okay so now let me just ask you a question what

is the parent of this H1 I want you to answer I want you to answer that well the parent of this H1 will be this section not this one but this one so what is the parent of this section the parent of this section is this Article not a UL but article because this is the parent okay these two are the nest children of this article right here so what is the parent of this article the parent of this article is this section so now if you want to work with a flex box so first

of all we have to provide um uh first of all we have to set a display of flex on this one and all of these item will just go on and on so I'm going to show you all of that just in a second so I just kind of want To give you this test I'm going to remove that and now here you can see we have this container and you know what I'm going to change this want to section to be precise uh so that you guys can see everything so I'm going to just

write section and then we have a div with a class of child and we have from one through five right here okay so if you want to work with a flex box first of all we have to Target a container so let me just write a little bit of Formatting and then we are going to be start working on our Flex box so I'm going to just write a container or before getting into the Container we just have to remove or resets first for so I'm going to just write margin and padding of zero and

then I'm going to just write like a box sizing of Border box right here and you know what I'm going to remove this border box and stuff for now let me get my body and inside this body we are going to be Writing a height of 100 VH and I'm going to provide a background of this kind of like a blue violet color like blue violet I'm going to select that now inside this container what do we have to do we have to first of all write a border of two pixel solid and totally white

and then let me just provide a little bit of width like uh 800 pixel would be fine I'm going to provide 800 pixel of width and I'm going to also provide a height of like 400 pixel would Be fine okay and then I'm going to also provide a margin of 20 pixel and auto and auto will be just uh automatic stuff okay now let me just save that and this is how my file will look like right here so now the next thing which we have to do is that we also have to uh format

these divs which is inside this container so we are going to be formatting there by using our container and now let's just get or children so I'm going to write a child right here And what we have to do we have to give him a little bit of width of 50 pixel and I'm going to also provide a 50 pixel of he to IT background color will be like you can give whichever kind of background color you like in my case I'm going to set that to Blue and I'm going to also provide a font

family of not font family font uh no I'm going to just write text line of Center and I guess that would be it so if you save that this is how things currently look like But I just felt like this is a little bit uh low contrast so if you save that and now I guess everything looks like a bit better so I'm going to just write a bit of margin like 10 pixel would be fine and if you sell that and now you're cool but I guess instead of 10 pixel I'm going to provide

five pixel margin so now we good to go and so now if I ask you a question like what will be the container of these elements so we have now these children so what do you think Will be the container will it be this b or will it be this container we are now inside this container now this is obviously the container and now we have these childrens inside this container okay so now let's just start working on a flex box so I'm going to zoom out a bit so you guys can see everything a

bit better and let me just write a flexbox stuff here and so we are going to be starting our flexbox stuff from here remember if you want to work with a flex Boox so you just need a few things the first thing you have to remember that you are going to be working on a container don't forget that and now the second thing I want you to remember is that first of all you are going to be writing a display of flex properties so we already learned about display of block we already learned about an

inline inline block and we also learned about display of none just a second ago now in this case what do we have to do we just Have to write a flex and now if we just write a flex and if we sve a file and what happened wow this magic happens so by default if we just write a display Flex so Flex boox will provide a little bit of styling to or children so which kind of styling we have like a flex um Direction and it will be now set to row so now first of

all let's just learn about display Flex so if you just write a display Flex so first of all it will gives us a little bit of styling right Here and I'm going to be telling you like which kind of styling by default display Flex provid us but you don't have to worry about them for now so now we are now totally working on a flex box right here okay and as I said that Flex boox is onedimensional layout so it just either work on a row or a column okay so you just also have to

remember that as well so now we are totally done so now the next property which I want to show you is something called a flex Direction So if I just write like a flex Direction so as the name suggest that Flex direction will allows us to change the direction of our Flex box so if you just write a display of flex by default the flex direction will be set to row if you just write like a row in here and now if you sell that and here you can see nothing will happen right here why

is that because if you just write display of flex so by default this uh display Flex Will provide us with this Flex direction of row so we can also change that to like colum if you want to so if you just write colum and if you save that and here you can see it will now change your layout to the colum right here okay so now I'm going to remove this column so we have like a row we already saw row we already saw column but we can also write a row and then reverse okay

so I want you to notice like we have 1 2 3 4 five right here here and if you save that and Boom it will now push it right here and and first of all we will get five then we will get four then we'll get three then we will get two then we will get one so what's happening so if you just remove this reverse from here and if you sell that so here you can see this is how everything will look like right now okay so if you want to reverse that and also

the direction of it so for that we can just write like a row and reverse okay as I said that if our man XIs uh Okay so if our man AIS is set to row or cross AIS will be perpendicular to that so this is how we can get that uh kind of effect so if you sell that and boom or it is changed to the row reverse right here okay so this is how we can change that and we can also change this to a column reverse if you just write column and then we

have reverse and now if you sell that and here you can see everything is pushed up to the bottom right here and we have 5 4 3 2 1 instead Of like 1 2 3 4 5 so if you want to just remove that reverse and if you sell there what do we get we get 1 2 3 4 and five and I guess I should have to make this one a little bit bigger so that you guys can see everything a bit clear so I'm going to probably a bit of more uh Hardware so

500 pixel would do or you know what uh 450 would be fine guess that's going to be fine anyways so this is a flex Direction first of all we just write display of flex and then we learn About a flex Direction and it will allows us to change the direction of our layout okay so it will just work uh um on a flex container and it will change your children so you just have to remember these things in mind and now what else do we have to do uh we are going to be learning about

a Justified content property so for that we have to ask our go old friend like what is a Justified content property so I'm going to just hit control space not a control Space but just a control and F and now here I'm going to just ask for like a justify content if I just write justify content so it will gives us this definition let me just zoom in a bit and now here you can see the justify content property is used to align the items on the main axis right here so this justify content property

will be responsible to align or item on the main AIS so how can we go about doing that so now instead of just column I'm going to just comment This line out and if you sa that everything is now back to the row right here and if you want to push this item to the end so we can also do that we can also make it Center or we can also just stick it right here so now let's just learn about something called justify my content okay so justify content by default the value will be

um what do we call it Flex start so the default value of justify content if you just write a display Flex so the default value of Justify content will be set to flex start if you save that and nothing will happen right here and we can also change that to flex end if you want to so I'm going just remove that and if we hit control space it will not gives all of these values right here you can use a short hand like n and start if you want to but by default it will be

set to flex start we can also change that to flex end so as we learned that it will just only work on a main axis and our cross Axis will be perpendicular to our main axis you just have to remember this kind of stuff in your mind so now if you want to push that to the left and I mean like to the right so for that you can just write like Flex and then end and if you just start Flex end and if you sell that and boom here you can see that it will

not push it to the left uh why am I saying left it will not push it to the right right here okay so that's how we can work with a justify content property But we have a little bit more stuff in there so we can also make things to the center so if you just want to write like a center and if you sell that and here you can see it will now make it perfectly center right here okay so now our Flex direction is set to row so this is how everything will look like

like we can Center it to the right and stuff but if you want them to be at the column so we can also change this Flex direction to the column and we can also Make it perfectly Center on on the column as well so if you save that and boom and this is how everything look like and you can also write just like a flex start and if you save that and this is by default we can also change that to flex end and if you s there so this is the flex end and we

also saw a flex Center okay so if we save that so it will not use us that so let's just check a little bit more property of that so we have Baseline you don't have to worry About that so the next property which I'm going to be telling you is something called a space around so for you know what I'm going to come in this line out and if you save that so by default everything looks like this and now if I just use like space and around and as the name suggest that it will

distribute our items like our children uh and it will provide a little bit of spacing in there and it will also provide a spacing around these items so if you just save That and here you can see it will now distribute our items and it will also provide a spacing how much they need now this is a space around property we can also write a space between if you want to so now here they will not provide spacing in there so if you just save our file and here you can see it will not provide

a spacing around the and if you are wondering like do we do have the spacing right here that's because I provide a spacing or a margin of five Pixel right here so that's why we are getting this a little bit spacing in there we just remove that if you just s file here you can see that spacing is gone so that's kind of a cool stuff so we can also go with a flex direction of colon and we can also write a space between so if you save that and this is how everything will look

like and if you just change that to around and if you save certain long uses the spacing around this item right here okay so That's it about the justify content stuff so what do I have to do I'm going to just write a center right here so if you save that it will now make everything to the center so I'm going to come in this line out I'm going to also come in this line out okay so now the next property I want to talk to you about is something called a flex wrap property so

before we do that we need a lot of content in here so let's suppose if I just select that and if I duplicate There like one more time and save it so we can work with a lot of contents just like that so now here you can see you know I'm going to duplicate one more time and now here you can see and now here you can see our children are now jamming together in each other right here and here you can also see that um with is Chang a bit so if you want to

push these item to the new line so we can also do that by using our awesome property which is called a flx F uh not Flex yeah Flex wrap of wrap so by default the value will be set to no WP so if you just write a display of flex so the default value it will gives us of no W so if you save that so no wrapping right here so in this case we want them to be WRA so we can just write as Flex W to WRA and if you sve that so it

don't now just wrap this item to the new line right here okay so that's then we have we can also have a w reverse if you want to so we can reverse our W right here so If it's sell that and boom here you can see first of all we get four five and this is a random word so that why we cannot see everything a bit clear now you have to trust me that we can also do a rep reversing by using a flex rep property so I'm going to just comment this line out

and I'm going to also undo this step so if we save that we get to this layout one more time all right so that's it about display Flex Direction justify content I'm going to push this One to a bit down and now the next property which we are going to be learning about is a items so this one work on a main AIS and now if you just search for um align items okay so let me just search for Align items real quick so here you can see we have this align items property and the

Align items property will align the items on the cross axis remember justify content property will work on a main axis and now align items property will work on a Cross axis okay so what do I have to do I'm going to comment this out or you know I'm going to I'm not going to com this one out so by default we get this layout right here so everything's uh I mean like justify content will be set to by default Flex start so now let's just work with our align items properties so by default if you

just write like display Flex so by default it will gives us the value of flex start and if you save there so nothing's going to happen Right now but we can also write a flex end if you want to so if you save that and boom it will push everything to the bottom right here that's because align items property work on a cross axis you just have to remember that we can also do centering so if you just write like uh let me just remove that and we just write like Center and if we save

that and boom it will be now perfectly Center so if you want to perfectly Center this item right here so for that we just have To uncommon this justifi content property and if we save that and boom We Now get totally perfectly center divs right here okay so these divs are now totally perfectly centered to our vport right now so what do we have to do now we learn about a justify content property align items property we can work with this so by default um that's Flex T so let me just set that to like

first of all Flex um and maybe and this one will be now set to Center or this One will be also set to flex end so if you want to saell that so now just push it to this end right here so if you just set that to like a flex start and you know what that was just a default value for both of them but let me just write like we already write Center Center let me just write a space around in here and this one will be flexx end and now if you save

that and here you can see it will now gives us like a little bit of spacing right here and it will be at the Uh I mean like it will be at the bottom right here we can also change this one to like Flex start Flex start and the other one will be Flex end and if you sell that and it will now push it everything right here okay so this is how we can play around with that and I will highly encourage you to play around with these properties and values I'm just showing you

everything but I cannot show you everything you know like uh I can cannot play around with all of the Properties because it will take a lot of time it will take a countless hours to work with that but I just kind of want to give you the test of everything and you have to figure out like how your layout will look like and how you should structure everything so now that we learned about align items and these stuff now the next property which we are going to be learning about is something called align content property

so let's just ask our good friend like align Content okay so it will now ask us to go to this page so I'm going to click on there so uh it will now brings us to this page so the CSS align content property says the distribution of a space between and around content items along a flexbox cross Axis or a grid block axis so for that we are going to be need a few more divs uh okay so I'm going to duplicate that a few times and now if you save that and now here we

can just use like a line of content and now Here uh and by the way what's the default value of align content okay align content I guess the default is start uhhuh I guess the default is start and we can play around with these if you want to let me just ask a Google like what's the default value of align content so I guess okay so it's a stretch it's not a flex start it's a a stretch so a stretch work like this so if you just WR a stretch so it's a by default value

and If you didn't provide any width and height to it or you know I'm going to just comment out this he for now and if you save that and here you can see this is the stretch Behavior right here if you uncomment or if you comment this line out and if you save that so this is the default Behavior that's because we provide height to it so that's why we are getting a height right here okay so you just also have to keep that in mind and now let's just start working on a Start so

if you just write a start and this is going to be the start we can also write a n this is going to be the end okay it's not working I don't know why we have a line AIG G n let me just write it one more time a l i g n and then we have content and let me just write a center maybe uh Center and we save that I know it's not working okay so we have to set our Flex WRA to be WRA and if we save that and now here you

can see it will Center up Everything right here we have to use this Flex W of R and now if you want to go to the start so we can use a start we can go to the end if you want to we can use a space around and it will not for a spacing around the items and we can also use a space between so if you save that and boom everything is working the way we expect him to work so I don't want to waste your time uh writing all of these properties and

its values so I'm going to just remove this Flex RAB or you know I'm going to comment both of them out if you want to uncommented so you cannot uncomment just a single line you have to uncomment both of these line at once and if you save that and then everything will work the way you expect them to work okay so now we covered half of the flex box now it's time to work on a just a specific children if you want to just move around one child at a time so we can also do

that so first of all let me just uncomment or undo this step so if You saell that so here you can see we just have like um diffs from one through five right here and now you go toward CSS now instead of writing a display property in here we can write it now inside a children because we are working on just a single property so now let's just ask our go old friend like what in the world is a order so if I just write a order right here okay so okay it giv a lot

of uh oh my goodness these are a lot of order properties so lebox flexbox Order come on okay so we have to find that out anyways so flexbox order property is nothing more but they will just provide a little bit of order to it so I'm going to go back and now let me just see that order in here okay so we have order okay we got are2 uhhuh you know what let me just ask from this friend so order property Flex or or you know let me just write a flex first of All okay

CSS nobody's helping me in this case I guess I should have have to explain everything manually well you know what I'm going to write a flex in here just like that so we have Flex bases Flex trap shrink grow flow and stuff like that I'm going to click on the flex one so I can go to the flex Xbox right here and I'm going to have to search for order right now so order uh we got a borders and we don't have any order let's just ask our friend Google Um FX box order property p

r o p r Ty y all right so it will now brings us to this W3 school okay I knew there is something inside this uh I don't know it wasn't helping us at first place so set the order of the flex item to be like some order by default every element will have a order of zero first of all you just have to remember that by default all of these elements or all of these children will have the default value of order of zero okay so this one will be Zero this one will be

zero this one will be zero this one will be zero and also this one will be also zero okay so I'm going to select just one child like maybe this third one and I'm going to just provide like a special class to it so I'm going to just sell there and now I'll just select this special class so I'm going to just write like special special so now here what do I have to do I'm going to just write order of one word and now if you save that and Now here you can see it

will now push it to the bottom right here because all of them have the class of zero and now this one is special and we give this one the class of I mean like the order of uh one so this one is now special so it will now push it to the bottom and this is how you can reorder your uh layout by using just a order property and this is very powerful so now let's suppose if you want to set this one to like order two so for that we can just write like Um

I don't know special two and now if you save that and this is how you can use the order of your element so I'm going to just write like a special and then two and I'm going to just provide like a order off to to this one so now if you save that so what do we get we get like one two five and three and four this one has the order property of two so this one have a high specific ficity this one is a little bit lower than this one and all of these

have like zero on So there will be a first second and third and you can also go with a flex direction of colon so it will give you the same result okay so this is how we can work with a flexbox order property but I just kind of want to show you is like where you would find all of these order and these kind of a single element properties and stuff like that so that's why I want to show you guys so what do we have to do that we have to remove or you know

what we are not going to be Removing there we are going to be learning about the next property which is align self so align self as the name suggest there we'll just align that item to itself so if you just write like align self in here and we can just click on that and now here you can see Center the alignment of the one element time inside of flexbox element okay so we can just work with one uh Children of the flexbox by using align self properties so the Align self property specify the Align alignment

of the selected item inside that flexible container note that alignance s property override the flexible container okay so if you have some um style inside this Flex boox container so it will override it okay so now we just give him a class of special to this third one and we want to make that to like Center maybe so we can do that so I'm going to just remove this order one I'm going to also remove this order property from there and what we Have to do I'm going to just write like um uh not Flex

self but align self property and now here you can see we have access to all of that values like we have Flex start we have Flex end Center and all of them so I'm going to just um write Flex start and if you save that and if you go towards CSS so it will be by default start like this one is special one okay so now we can use a flex start we can also use flex end and if you save that so it will not push it To the endroid here we can also use

a center if you want to we can just use like Center it will not push it right here and we don't have access to that space between or space around because we are just working on one single item I mean like this align self property allows us to just work on a one single property but for that we have to select our item manually and that container should be a display of flex okay don't forget that okay so we can just write Like Center in here and save that and it's now Center this so this

is aign self property and we already learned about a order property so you know I'm going to just write like order of one in here I'm going to comment that out so that we can't forget that so now we learn about a line itself now the next thing which we are going to be learning is like first of all just save there and this is how currently things looks like and now the next property which I want To show you in Flex box is something called a flex grow property and it allows us to just

grow one single item so I'm going to just search for there like a line not a line but Flex grow and if you click on this one so it will now brings us to this web page right here that the second Flex okay that's not cool so the flex grow property specify how much the item will grow relative to reset of the flex item or flexible item inside that same container note if the Element is not flexible item the flex grow property has no effect on that okay so you just have to remember that in

your mind so now let's get into it let's suppose we want to like grow this special class so we want to like suppose grow this one so for that we can just use like Flex grow property and we can provide like different kind of um maybe two and if you save that so here you can see it not grow right here so I guess the default value is zero for all of Them as well so now let's just ask from him like what's the default okay the default value is set to zero as I said

so default value will be set so like these will have the default value of zero and now we provide a one to it so it will now take its entire space right here okay so let's suppose if you just select this special two and we just provide a flex grow property on it and now let's just use like maybe four and now if you save that and here you can See this one will grow more than this one right here and we can also change that one sa and boom this is how you can grow

and shrink your item and by the way I didn't show you a shrink property but this is how you can grow your items if you want to so now I'm going to comment this line out I'm going to also comment this line out and if you save that and this is how everything's look like so now let me just show you two more properties and then we are going to be Totally done by flexbox and then we can jump into the game and then we are going to be playing a game so what's the next

property the next property is something called flex and bases and now let's just search for that I'm going to show you the documentation of it Flex bases and if you click on there so it's kind of a weird one so the flex basis property specify the initial length of the flexible item note if the element is not flexible item so that Flex property will Have no effect on that and the default value will be set to AO right here and now let's just work with that so now here we are going to be just specifying

like uh I don't know maybe I'm going to just put like 20 pixel and if you save that and now here you can see it will now just shrink down a bit and we can just provide that like uh I don't know Flex basis uh of maybe four or you know 100 pixel will be fine if you save that okay so this is how you can work With a flex basis so now the final property which I want to show you is called a flex shring property so I'm going to just write like a flex

shrink right here and if you just ask for Google like what is not Google but if you ask W3 school like what is a flex shrink property as the name suggest there allows us to shrink our item so the flex shrink property specify how the item will shrink relative to the reset of the flexible item inside the same Container not if the element is not a flexible item the flex string property will not effect on there and the default value will be set to one okay so if you want to work with a flex string

property first of all we have to provide a little bit of width to the item uh to the child so maybe I'm going to just provide like 400 height to it I mean like width to it and now what we have to do so the default value was one so we can just provide two if you save that okay so Here you can see our item will now shrink to that much so if you just write one this is the default Behavior we have four our item will look like that so now let's just write

four and it will now shrink it like that much okay so we can just make screen size a bit bigger or smaller so this is how the flex shrink property will work so it will just allows us to uh shrink down our element right here okay and we can just incre increase the height I mean like the Width if you want to like 600 pixel so as the name suggest that it will just shrink out over element like like Flex string property will just do that for us okay so now we are totally done with

the flex box so we learned enough about Flex box like we learn about a display property we learn about main axis and cross AIS we learn about a flex Direction property which allows us to change the direction then we learn about a flex box rep property and it will Allows us to rep the item then justify content align items Flex uh rep we learn that again and we don't learn that but we use that again and then we learn about align content property and then we learn about how we can lay out just a single

item by using a order property and then align self Flex grow Flex bases and finally we just learn about a flex string property so now it's time to play a cool game by using a flex boox so we are Going to be putting all of our knowledge into this game so first of all let's just go to our flexbox uh froggy frogy like so okay so now I'm going to just click on this flexbox froggy again for learning a CSS flexbox I'm going to just click on that and now here what you have to do

first of all first of all you just have to read through this instruction but I'm not going to read through this instruction I just know I just look at The layout and I'm going to just type a code for that so I know that what do we have to do now our main AIS is now set to row so what we have to do we have to just write a justify content of flex end and if you just do that and push it right there so all just allows us to the next level like to

go to the next level okay so if you just click on that so now the next level which we are going to be doing is something called justify content content of Center so if You do that it will now push over frogs to these uh whatever that has a leaf whatever you want to call it and now second mission is also complete so now want to click on that now what do we have we have a third one now let's just write a justify content it's kind of a simpler so you're going to be using

like a space around uh is it around yeah it's around so we want the spaces around these item and now hit next and boom now what else do we have we have to write a Justify content of space between inside there so justify content of space between okay so now this one is also done we are now at the fifth level woohoo so now it's uh requiring us to work with just a alignment we are going to be using like uh Flex direction is that so align items will be just um you know what Flex

end so if you save that and boom everything is working so now if you just click on next now the next oh my goodness it's like the hardest one It's not we already learned that we already learned that how to do this layout during the coding tutorial section you're going to be writing justify content of Center align items will be also set to Center okay so both of them will be Center Center so it will now make us use a toally perfect Center okay so now what do we have justify uh justify content will be

now set to like space uh between I guess uh yeah and then align items will be now set to send Not C Flex in okay so now it's okay it's not a center uhuh it also I guess this one is a center you know you just write Center no it's not a center it's a space around I guess yeah that's a totally space around now we have to click on the next one and now this is looking a bit weird we have to reverse the first one and then the second one and then the third

one so what do we have to do we have to just write like uh I don't Know uhuhuh we have to just write I guess justify column reverse uhhuh let's just see justify content of column not column but row reverse I guess check that okay that's not the solution okay I'm writing justify content it should have to be align items he not align items come on man Flex direction of uh DS C DS CTI and off row rewards like that okay so oh my goodness I'm going to just right click on it and make a

direction and now we are totally done so now let's just head on the next one and I guess I'm going to have to stop um playing this game because this a huge game okay now let me just type it out and it should this one is easy we just have write like Flex uh direction of column d i r a c t i o n Off column why the hell d i r e c t i o n come on man yeah so that's cool now the next one we have is first of all we

have to write A flex direction to R reverse so I'm going to just write like Flex direction to di e ctio and in this case of row reverse and then yeah and now we reverse our item so now we just have to start it from justify content of flex uh start okay okay so it's already start we have to use the end one yep that's cool now hit click on the next one and now this one is a little bit tricky so now let me just have to think about this this how am I going

to be Solving there um first of all we would need to write just uh Flex Direction that's obvious of column and now what else do we have to do we just have to push that to the end so just justify content and there's going to be Flex oh my God flex and okay and boom we are now at the 12th challenge okay let me just think about this one for a second uh okay so how can we solve there umm uh okay first of all let me just Write a flex Direction d r EC t

i o n off row reverse in here okay that's bad ah instead of row reverse we can also do like column reverse that's cool now the next thing which you have to do is that just try like space between yep justify content will be just space between and doom okay so we are now at the 13th challenge right here and this one is quite obvious this one is totally the easiest one in my opinion so what do we Have to do first of all we just have to write aine items of Center not Center but

Flex end because you want them to be at the end okay now the next thing which you have to do is that we have to just write like a justify content of just a center so we want everything to be perfectly Center all right all right all right so now we just have to uh change the direction to be like uh something else you know what I already write this coordinate work so now let me just write Like a flex direction of row and then reverse and boom it will now just reverse it right here

now let me just try it hahaa we just have I guess reverse that or don't we okay so instead of so this one will have 0 one this one will have 0 one this one will have 0 one so we have to select that yellow okay so we already select that yellow one right here and we are going to be just providing an order of special like one order and boom that's Cool and now here what do we have to do we just have to okay so how the layout will look like so we already

select this red one and now here in this case we are going to be using uh less value than one so and even less value then zero so we can work with that negative value like minus one like so and boom that's got it that one was quite a little bit difficult for me all right so what are we doing in here these greens are at the green but well here we just have to use Like aine self property and we are going to be using a flex end and boom that's it all right so

what are we doing first of all we are going to make these two up here and then push it down so I know that we are going to be using uh a line self of end we already select a yellow so now let's just use this align self of and so I'm going to write like align self of just a flex and it will not push it right here now what else do we have to do do we have to just write uh Justify content or Flex start will be in let me just think about

that for a second I don't know how we would solve that this one is like the most trickiest one okay yep we can use the order one so let me just write order property of one and boom okay so now everything is at this end and that's it all right so this was kind of a little bit uh getting all right so these challenges are getting harder and harder so we are now at here so we have to Figure out how to solve that so okay so they are squashed together to each other so let

me just try to r that like wrap and by default value is no wrap so I'm going to just write like wrap in here and yep I that was that one was quite simple and easy oh my God all right so now let's just hit next one okay so I know that we have to write a flex W first of all so we are going to using like a flex uh wrap of wrap okay So we are totally there but what else we have to do is that we have to change the rows to the

column yep that's cool we can use a flex Direction d r e c t o n to the column boom yep that's cool now hit next and now we are at 20 so I guess what do we have to do okay so for for example you can use a flex flow oh my goodness a flex flow is just a short hand for writing a flex Direction and also the red properties so we are going To be just using like a column rep in this case because we want to write that as a column rep so

Flex flow and column and then W so I'm going to first of all give you show you the documentation of flex flow so that you guys can see everything a bit better I forgot to show you this one I was just thinking like I missed something okay so the flex oh my goodness not reflex Flo and this one I want to click on that And now here you can see the flex flow property is a Shand for properties of flex Direction which will allows us to change direction then we have a flex R and it

will allows us to just either W or no WRA or W reverse items so that is just a short hand for using a flex Direction and flexx WRA I apologize about that I didn't show you that in the first place but now we are at 21 project uh I mean like 21 challenge so what do we have to do first of all let's just Read through this instruction uh okay so what do we have to do we just have to remove these empty spaces from there and yeah there we are going to be I guess

using align content property do I show you Aline yeah I did show align content propert not this one where is Aline content yep right here space between so here we are going to be using Flex uhhuh not Flex so here we are going to be using just Align content property of flex start okay so let me just write it like Flex start and boom okay that was also a little bit simple so we are at 22 and now let's just figure out like what do we have to do in there okay so this one is

a little bit okay so we have a lot of content we want to push that so we can use align content property as they said so we can use align content property and we can use like Flex and and boom everything is working the way We expect him to work and now this one is a little bit tricky to be honest I'm going to have to uh just wait for there and just check out this layout okay this one is a little bit tricky on so what do we have to do we have yellows in

here then we have a Greens in here and then we have red so you know what uh okay so display will be flex and flex rep will be set to also W so it's now wrapping itself so so now what do we have to do I know that we have to change the Direction and we can do a uhuh we can do a row reverse yeah we can do row re so Flex direction will be set to like d i r e c t i o n of row RSE okay okay that's awful Mr row

reverse let me just write a column reverse yeah we are getting that and now we just have to use align content of Center and boom that's cool okay uhuh uh and then we have a final project okay okay so we have to use all of that okay so this is the final test Which we are going to be doing okay so we have first of all the red which needs to be in here I guess we can use a flex or Al line cell for there and then we have a greens which needs to be

in here then we have two blues or not Blues we have two yellows which need needs to be in here okay so they just provideed a display of flex come on we have to figure out what we have to do uhhuh first of all let's just start working on a little bit of progress so I'm going to just write like uh Flex direction will we also call first of all we just have to like write like Flex direction of row uh it's also row so column uh L MN so this is not colum so we

can now push these item to in here and push this last one so now in this case you know what I'm going to write a column reverse in this case so yeah we are getting that so now we can push this item and we have to also wrap there so if you wrap there so This item will take its place and so on so let me just write like a flex wrap of just simply a wrap okay uh I guess we have we want this item to be in here and the other item to be

inside there so we can write a uh rep rewards for that so rep rewards and yeah that's looking cool but what do we have to do for this ones okay so I'm going which kind of Center properties we have we have align Center And we have justify Center so justify conon Center uhhuh What What In the work can I do right now so you know I'm going to just write like first of all just start with a justify of content of Center because we know we have to Center these stuff and yeah we are getting

there and final property we have to write is align items of Center okay Center and boom not boom but we have to just wait for you know what uh I'm going to Provide a flex uh start start property this one is a little bit different come on how can I do that okay so we we can just try like space around property can't we let me just start U between come on Flex between what the hell Flex between not Flex between but space uh around property okay it's not working let me try a bit not

yeah space bit come on align items is not working okay So we have more than one item so for that we can use instead of align items we can use align content right here so we can just write like space uh oh my goodness space around in this case and yeah come on oh my God so okay so now we are getting there so instead of using around we can use between and Boom come on we are now totally done with this Challenge and we did all of them so level from zero through 25 uh

24 to be precis not 25 and congratulation we Learned about flexbox and now you totally Master flexbox now the next thing which we have to learn is a new CSS uh mode which is known as a grid uh display of grid so that one is a little bit tricky to learn but you have to be a little passion and you have to practice that by yourself and thank you for watching and I'll just see you in a more second okay so this is a grid Garden then we have a n card and then a few

more uh coding kind of a challenges so Next we are going to be working on I guess a grid Garden but I'm not going to be playing around with all of the uh levels because Flex box is a little bit easy but grid is not that much easy I'm not saying that I cannot solve all of them but it will take me a lot of time to solve them and I don't want that I just want you to learn stuff I don't want to waste your time in mining as well all right guys so now

that we are totally done with the CSS flexbox layout Model now the next model which we going to be learning in this video is something called a CSS grid layout model okay so here you can see we just have our index.html file and we have just our basic structure of HTML right here and then we have our style. CSS file and no content nothing inside there so here you can see our body is now totally empty so before getting into to the coding first of all let me just show you a few slides and then

you'll get to know what a CSS Grid is okay so then we are going to be writing our coding we just have to start from the first thing which is known as a CSS flex boox and CSS grid so a CSS Flex boox as we know that it will allows us to only work on a onedimensional like it will only work on a row or on a column okay so it cannot work on a two dimensional layout on the other hand now we are going to be learning about something called a CSS grid and CSS

grid will allows to work on a two-dimensional Lbel like we can set how many rows and how many columns we want and stuff like that so for now I want you to just remember that CSS flexbox will allows us to work on only onedimensional layout and CSS grid will allows us to work on a two-dimensional layout okay so before getting into the coding first of all you have to understand a few things about grid and then we are going to be jumping into our visual story coder and we're going to be writing a lot of

code all Right so what is a grid line first of all so a grid line can be either horizontal Al or vertical it is used to separate items on the grid so this one is a grid line this one is a grid line and this one is also a grid line these are known as a um grid column line and these are known as a grid rows line right here okay so you just have to remember there for now like you just have to remember this line like what is a CSS grid lines anyway so

now let's Just learn about something called a track so what is a track so a grid track is a space between two adjacent grid lines you just have to remember that and I've highlight that on a green color right here here okay so now let's learn about something called a gri cell and we already know that if you have ever work with a um what do we call it msxl so if you previously work on msxl so you definitely know that for sure but if you don't so a grid CS are area separated by A

four grid lines and they are the smallest unit you have in your grade okay so you just have to remember that and now the next topic and the final topic which you're going to be learning in this slide are something called a grid area and a grid area is one or more grid cells that makes up a rectangular area on the grid so this is just actual definition of a grid area and we are out of slides no we are not these are a few layers which we are going to be building Throughout this section

of a grid okay you don't have to worry about them for now but these are a few topics which I want you to keep in mind throughout this video so first of all we learn about what is a difference between CSS flexbox and grid then we learn about a grid line then we learn about a grid track then we learn about a grid cell and finally we learn about a grid area so I want you to just keep that in mind throughout this section all right so before getting into The CSS first of all we

have to write some content for that so if you want to write our content so first of all we are going to be just writing a section with the class of container okay so first of all we will have some sort of a container then inside this container we will have our header with a class of D or you can also just call it s for styling and I'm going to just put like header inside there then we have our nav with a class of s and I'm going to also Provide a label of nav

then we will have our men with a class of s and we are going to be also writing a man then we have our aide area with a class of s and now here we are going to be just writing a side and finally let's just write our fotter with the class of s and we are going to be placing the label of foter okay so now let me just make that a capitalized one so we have our main then we have our navigation and then we have our header so now if you save that

and Let me just go to my browser and this is how everything looks like for now okay so I'm going to set my browser to 100% And now let's jump into our CSS and now let's just write our styling first of all we have provide our resets like margin will be totally not max resolution but just margin will be set to zero and now let's just select our container and here we are going to be just first of all writing a background color off let me just remove that hexy Decimal and set that to RGB

and let's just write or 34 34 and 34 as the colors now let's just write a padding of 20 pixel in there and I'm going to also provide height of 100 VH for there if you sell that and here you can see it will now take up all of the entire viewport height and we will just get a little bit of padding and stuff now let's just select our s which stand for like a little bit styling so we just provide this s class to all of these Element or all of these children of that

container okay so now we selected that let's just put a pattering of 20 pixel in there background color will be um I'm going to just put GB of 84 84 and 84 okay so now let's just set everything like text line will be set to totally Center and text color will be totally white and if you save that and by default currently things looks like this okay so here you can see now you might be asking like where is what Totally or not totally but we have like this color right here so where is that

color that color is hidden inside this s Clause so if you just write you know what I'm going to just provide a little bit of margin so that you can see that color I'm going to provide margin of 10 pixel maybe and if you save that and now here you can see that color which is hidden on these elements so I'm going to just remove that margin from here and now let's just start working on our First properties so before getting into that I'm going to just write like um great stuff here okay here come

on so now as we know that if you want to work with a some sort of a display property like we already learned about a CSS Flex box so we have to provide a display Flex on the container so the same will goes to the CSS grid as well so we have to provide a display grid on this uh container not on element so you just have to remember that I can't stress That enough so first of all what we have to do we have to just write a display of grid right here so if

you just write a display of grid the display grid will just Define the element as a grid container and it also establishes that a new grid formatting context for our content and all of that HTML elements here you can see that they all will become or grid uh children okay so if you just uh save that and here you can see it will now take up all of their Entire space you don't have to worry about that for now or you know I'm going to just comment this pairing out sa that oh no I guess

we are totally cool by that you know if I just come in this pairing out and it will now take up all of the entire area anyway so let's just try on new stuff so this is it about the display grid right now now the next property which we are going to be learning about is something called a grid Template uh columns okay so so agre template columns properties specify a number and the width of the column in a grid okay so here you can see we have all of these columns right here so we

have like one column we have second column you know what let me just show you the other one um I guess that would be fine so we have that one column second column third column and fourth column and these are rows like we have one row second row and third row okay so If you want to work with this columns so for that we just have to write a great template columns so what do we have to do first of all we have to specify the width of that element like the width of that um

columns and we also have to specify how many we want so in this case we are going to be just writing like maybe I don't know I want to just write like 100 pixel 100 pixel and 100 pixel so what is all of that even mean we just write a great template columns right Here and we just specify 100 pixel 100 pixel and 100 pixel so it will now gives us three columns like it will gives us one column two column and three column and all of them will have the width and the height of

100 pixels so if you just save that and if you check it out real quickly and I guess uh sorry I apologize about that not the height but that will gives us the width of 100 pixel okay so here you can see we have now three columns so now you might be asking like How is that three columns so if you just right click on any of the element and if you click on this inspect area and now let's just bring that to the left and now here you can see we have this grid pill

right here so if you can see that you have to uh like update your browser and now in my case I'm going to just click on that and now here you can see we have our grid one I mean like we have column one column two and column three right here and I want you to also notice These line like we have one line Second Line third line and fourth line right here but we have three uh columns right here and this is how we can specify a different kind of columns and now if you

want to provide a different kind of rows so for that we can use property called grid template and then rows and here we have to specify how many rows we want and what will be the width of that row so we going to be just writing like 100 pixel 100 pixel and 100 pixel so I guess I messed it up in here let me just write that one more time uh GD template and rows this one so we have G template columns and then we have a GD template and rows so guess what will happen

so if you just s our file and now here you can see it gives us three rows right here so we have Row one row two and Row three right here and we have three columns as well so we have column one column two and column three and now if you want to increase the sizes of that so I'm going To just put like 200 pixel in there 200 pixel in there and 200 pixel in there as well and if you sell that and boom so here you can see the column sizes will be now

grow up right here so we still have that three columns like we have column one column two and column three right here but the sizes are just increased a bit here you can see that if you want to increase the size of that rows so if for that we have to specify different kind of values to it so we Have 200 200 and 200 so if you sell that and boom here you can see it just increase the size of that row as well okay so if you just uncheck this grid area right here so

here you can see this how currently things looks like and if you just want to provide another loss item so we can also just write like maybe I don't know D would be fine with the class of s and we are going to be just writing some gibberish in there and here you can see we are now getting all Of that 3x3 rows and columns and if you have more content and if you have more content so it will just push it up right here so these are just the basic properties which you can use

for uh grid so first of all we just have to write a display grid so it will allows us to work on a grid and then we have a great template columns and it will allows us to provide different kind of columns to our CSS or to our layout then we have a Gr template rows and it will allows us to provide different kind of rows to our layout okay so now here you might be thinking like we are repeating ourself like we have right like 200 pixel 200 pixel 200 pixel right there so for

that we can also use something called a repeat function so let me just remove that real quick and I'm going to remove that and here we can use something called a repeat function right here so first of all you just have to write a Repeat keyword and then you have to write your opening parenthesis and then closing parenthesis so the first value you have to provide is that how many like columns or how many rows you want in this case we are working on a column so in this case first of all we have to

specify how many uh columns we want so in this case we just want like three and then you have to specify comma in there and then you have to specify what will be the sizes of that column so we just Have to write like uh 200 pixel and if you save that and here you can see that layout will be totally the same if you want like maybe four column so we can just change that to four and if we save that so it'll also gives us one more right here if you want maybe five

of them and if you sa that and it will now gives us five column right here if you right click on there and click on this inspect okay so uh we can also check that out so if you just click on this Grid kind of um pill right here and let me just make that here so and here you can see we are now getting five columns so we have column 1 column two column 3 column four and column five that's because of that function which we use right here so we are going to be

just setting that to three right here and if you save that it will gives us three columns right here and we can also use that same repeat function for these template rows okay so if you just remove That instead of writing like 200 pixel 200 pixel and 200 pixel we can use this repeat function first of all we have to specify how many you want and then you have to specify the sizes of that like in my case I'm going to just write like 200 pixel and if it's s file and boom everything is looking

the same as before okay so you can also increase or decrease there if you want to so like inst start writing 200 pixel we can also set that 200 pixel if you want to and if You save that and here you can see now our grid is kind of small that's because we make our elements or our items a little bit small okay so this is how everything looks like and now you might be thinking like we can also provide a little bit of margin so that we can separate our item but for grid you're

not going to be using any margin and stuff for grid we use something called a grid uh let me just write like a g g and then Gap so we use this grid Gap Property and it will allows us to provide a gutters and a gutter is just a space between each lines or each row or column whatever you want to call it and we can specify a grid uh gap for rows as well so for that we have to just write like a grid Gap to the row I guess it was like a grid

row Gap I'm not sure yeah no it's not a grid row Gap I'm not sure but we are not going to be using any of that and you won't need that but that was just a long W right or grid Gap But in this case we going to be just using a GD Gap right here and we have to specify how much the Gap you want inside each of the element or each of the cell and if we sell that and here you can see L uses 10 pixel of Gap right here in each element

so this is kind of simple so so now that we learn about four properties in CSS grid and now let's just learn about something called f FR and fr FR stand for a fractional unit you can learn more about that but my Recommendation will be to do not waste a lot of your time on that first of all let me just give you the definition of it so uh so the fraction unit is an input that automatically calculates the layout division when adjusting for a gap inside the grid so there was just a definition of

uh what do we call it FR FR unit or a fraction unit let me just say that one more time so the FR FR or the fraction unit is an input that automatically calculates the layout Division when adjusting for a gaps inside the grid so instead of writing like uh 100 and 100 we can write 1fr and this is very powerful so if you just use like one F4 right here and if you s file and boom here you can see it will allow just take up all of the entire space depending upon the screen

size so if you just make that like bigger or smaller so here you can see it will also shrunk down the elements or it will also make it bigger like so okay so here you can See everything so this is the unit you can use like um unit if you want to or you can just use a pixels but I just kind of want to show you the FR unit as well and we can also use it for a hard as well so if you sell that and boom so we can also use it for

rows as well so that was it about for FR FR unit or fraction unit and we learn enough about a CSS grid so now let's just learn about something called spanning in CSS grid so now in this case if you just click on The CSS grid Rod here so here you can see we have our first line or our first line will start up from here so this is going to be our first line then we have our second line right here so now if you want to spend this element like this H1 not H1

but this header area to span from this grid line one to this grid line three so we can also do that by using a grid uh properties so let's just learn about that so if you want to work with the one element for that we have to Select that specific elements like if you want to spend this header first of all we have to select that so we are going to be first of all selecting this header right here and now what do we have to do we are going to be using something called a

grid and then column in this case we are spanning a grid column and we can also go with a longer way first of all let me just show you the longer way and then I'm going to show you the shorter way so I'm going to Just write like grid column and then start so where do you want your grid line spinning to be start from so I'm going to just provide like one and here you can see we are now starting from this one right here and we want to go to this third line right

here so for that we have a new property not a new I shouldn't have to say new but we for that we have another property GD column and then end and now if you want to span or element and now if you want to span Our element from this one line to this third line so for that we can just provide a three right here and now if you sell that and here you can see if I just uncomment or uncheck this grid right here so it will now take all of these three lines so

it will now spin from this item like from this grid line one to this grid line two and finally to this grid line three okay so we can also spin around this as side if you want to so for that we have to first of all Select that aside so let me just select that aside aside right here and now let's just provide our grid column or yeah grid column will be fine so grid column start so you want to start it from the first line so if you just right click on that and I

guess I'm going to just click on this aside right here and let's just select our uh container let's select our grid right here so you're going to be writing a grid line of I guess one would be fine and now if you Just write like uh gr column and then end and we want to end it through the third one so if you save that and it will now push our item to a new line because we don't have any space for that so this is how we can spin our element if you want to

or you know what we can just write it from like second item to the third one and if you save that and that's the default Behavior that's the default Behavior we shouldn't have to use that so I'm going to just remove That and now let me just show you the short hand for writing a grid column start and grid column end and and by the way I'm going to also show you uh a grid row start and grid row end and then I'm going to show you the short hand for that so I'm going to

just write like a grid a row and then start so now in this case uh first of all we just learn about how we can spin our item by using a column so we can also span our item by using AR rows so you know what I'm going To comment both of these line out and if you save that and this is how by default our elements looks like but now if you want to start from this line and we want to go through this element so like if you want to span from this line

one through this line uh three so we can also do that by using our grid rowar property so we are going to be just specifying one right here and now let's just use like grid row and then end and here we have to specify where you want To end over spanning so we can just proide three and if we sell that and boom so I guess yep that's what's going on and here you can see L spin or element from that line one through this line three right here okay so we can also use a

shorthand for that first of all let's just comment these out first of all let's just learn about the column one so we are going to be just using like a grid column instead of writing a grid column start and grid column end we Can just write like a grid column and here we have to just specify where do you want to start or grid line and then we have to specify a slash and where do you want to spin through and here we just have to write like three right here and if you sell that

and here you can see it will all just start we spinning from this first area to this third area and we can also spin through like four if you want to so if you just write four and save that and here you can see just Spin through like so and we can also use a short hand for this grid row start and this grid row end so we can just write like grid row and then not start and end but we can just provide like a grid row right here and first of all we have

to specify where our element should start first of all let me just comment this line out where our element should start and then we have to specify this slash and then we have to specify the value for like Where our grid spinning should end so we can just specify like three right here and if you save that and boom and this is how it looks like we can also write four if you want to and it will now just spin out okay like that we don't want that so we can just go to like third

one and this is how everything should work anyway so this is just a little bit about display grid template column and template rows then grid Gap we also learn about repeat function we also Learn about something called a grid column start in end and grid row start in end and we also learn about a grid column and grid row so now let's learn a little bit about the grid naming like we can also name our grid line if you want to so for that you know what I'm going to remove all of these coding right

here so I'm going to just remove that and now here we can also give a name to our element but if you want to name our element or line to be precise for that We don't have to use these repeat function so I'm going to remove that and instead I'm going to just write like 100 pixel 100 pixel and 100 pixel so we can also name our first line to be like and by the way if you want to name your element first of all you have to write your opening bracket and then the closing

bracket it's not parentheses like these it's not parentheses and it's also not a curly Braes these are opening bracket and closing bracket right here Okay so here you have to specify which kind of name you want to give to your first line so in this case I'm going to just try like uh I don't know I'm going to prob like a start in here a lowercase start I'm going to zoom out a here so this is going to be the first name forward line and now let's just put uh maybe I'm going to name this

one so I'm going to just put or second bracket in there and here we just have to specify the name for that like in my case I'm Going to put like n so that is going to be the default Behavior I guess you know what we now we totally name or lines so now let's just span through by using these lines so I know this stuff can be a little bit confusing and it's not that much useful either like you will just find yourself a little B like you may or might use this naming or

not I can't say that for sure like I guess I can guarantee that you'll use that uh naming that much often but if you want to use It in your project and you want to be looking a bit cool so you can name your line if you want to but I just want to put it in my course because this is a complete guide so now that we line or uh lines like we have started and and right here so now let's just span through that so we can just use our grid column and here

we just have to to specify where you want to start our spanning so we can just write a start right here and where do you want to end your spanning so we Can just end it to the end and if you save that and boom here you can see it will now just take up the second element right here and we can also take up the third one as well so for there we just have to cut this end name from there and we just have to put it right here and if you save that

and boom it will not take up like three lines like line one line two line three okay so you you can play around with that if you want to and you Can also give him like any name you like but in my case I just give him like start and end you can give him like call start one or stuff like that but I just kind of want to show you like how you name your Lines by using CSS Flex box so this is how we can name or line so if you save there and

we have to remove this property from there and this is how everything looks like now and now let's learn about something called a min max function in Grid so you know what first All let's just remove this ha from there and this is how currently things looks like but I'm going to just set that to repeat function and I want to repeat like three times and we want to provide one ofr and rows are fine so if we save there and now if I just like make my screen size a bit smaller right here so

here you can see that items are also making smaller right here and we don't want that in some cases we would want or lines to be a little bit smaller not Lines why am I keep saying lines in some cas cases we would want our elements to be smaller in the majority of cases we are not going to be wanting like that kind of behavior like if you just shrunk down or website right here so here you can see everything is now shrinking down as well in a lot of cases we don't want that same

behavior and so for this kind of situation we can use something called a minmax uh function so you know what uh what do we have to do uh I don't know Why do I write far in here uh let's just write like um maybe one FR one FR and one FR and if you sell that and I don't know what's going on seven it yep my styling is back so this is how currently things looks like but if you want like anytime you shrink or uh browser and we don't want this one to shrink like

this second element so we want to provide a specific value for that so for that we can just use inad of one Rim we can use something called A Min and Max function So the first value which we going to be providing for A Min value and the next value which we are going to be providing is for a Max one so if you want to provide a value for the Min one so the minimum height will be like uh I don't know 100 pixel will be just a little bit smaller so I'm going to

just set that to like 200 pixel and the maximum value will be just one fart like however the screen size is so if you save that and here you can see this one is now a Little bit bigger because we specify 200 pixel width for that right here and so if you just increase our screen size right here and it will now just uh grow up right here okay so if you just make it smaller that other element will become smaller but the middle one will not become smaller that's because we provide a min max

of 200 pixel for there okay so we first of all have to provide a minimum value and then we have to specify the maximum value so this is how We can use a minmax function and this is a crazy function you can use it all the time if you want to so this is a minax function now the next property which you going to be learning about is something called uh all auto fill and auto fed so before getting into the detail of that first of all let's just uh comment out a few things so

we have one two three and four so you know I'm going to comment out this line and sell file and this is how currently everything look like and I'm going to also remove that and instead of using like one f4s and one f4s I'm going to put like 100 pixel right here 100 pixel right there 100 pixel right here as well and I'm going to also put like 100 pixel right here 100 pixel right here 100 pixels so if you s that I know we can use a repeat function but in this case we're not

going to be using a repeat function I'm going to make it bigger right click on it and then click on inspect then select Our grid area right here so I want to show just the difference between something called autof fit and auto you don't have to worry about that much about Auto fi and Auto fi but I just kind of want to show you what's the difference between all of them you know what uh let's just use something called a repeat function for that we have to use a repeat function I apologize by just writing

all of that code so first of all in the repeat function we can Just write like uh Auto and then fit so if you just write auto fit and then we can specify like how much we want there so we can just use like Min uh Max or you know what I'm not going to be using min max for now I'm going to just use like maybe uh 200 pixels if we sve there and now in this case we are just uh telling our browser like I don't know how many rows I want and how

many columns I want so I want you to just autofit the content in this grid area so For that we can use auto fit right here you know what I'm going to use this function inside the column so that you guys can see everything a bit better and s file and this is how it looks like first of all it will now just gives us two rows right here so if you want to shrink there to like 100 pixels sa that and now here you can see long uses uh what do we call it uh

four rows right here and two columns and it's not shrinking down I don't know why so if we Just put 100 pixel High to it uh you know what I'm going to comment this like oh no we not going to comment it out so I'm going to just put that like maybe three in there and if you save there so it log uses three columns and four rows right here that's because of that autofill uh autofit content property right here and here you can see we don't have any other uh kind of boxes right here

but instead of using auto fed if you just uh select like auto fail and if You sve that so here you can see it long uses another uh element right here so if you want this second one like like this one to go in here so we can also use that first of all let's just select or aside so we have to just use I guess the final one is a side yeah it is a side so we can just use a side and here we can just provide a property called and here we just

have toide like a grid column and then end and here we just have to specify minus two and if we save that And will push this item right here and now if you just change this property instead of auto fit uh I mean like auto fit and if you change that to auto fit and if you sve there and here you can see it will now remove there from here so we can increase and decrease the size of our element and it will just our browser will by default uh figure out like how much rows

and how much columns do we need by using this auto fit and autof fill property and I know it can be A little bit confusing at first but you don't have to worry about it for like that much so if you sell that so here you can see browser will figure out everything by itself so if you just shrunk down or uh screen size right here so our item will also shrunk down as as well okay so this is how we can use auto fit and autofill and I'm going to remove this aside from there

and boom all right so now the next thing which you are going to be learning about is something Called a flex box thing so now that we know enough about a CSS grid for now uh so we can also use a CSS flexbox property which we learned just a second ago inward CSS grid if you want to so that's why a grid can be a little bit powerful than our CSS Flex boox so we can just write a repeat in here and we just have to write like maybe three rows I'm going to just set

that to like three and comma 100 pixel would be fine so then and we can use that justify content And all of that properties which we learned just a second ago in the flexbox section so we can also use it right here if you want to so you know what I'm going to just start from the first property which is known as a justify content and you already know like what a justify content property will do for us so we just have to WR like a justify content in here and we can have like word

Center uh end and start like Flex start and flex end if you just write Like a flex start and if you sell file this is the default one if you just set that to flex end and if you sell there so it will just push it to the end we can also push it to the center if you want to and stuff like that and we can also write like a space uh around and if you save that it will give us a space around in each item or in each cell to be precise and

if you just write like a space between save it so also gives us that spacing between that justify Content so this this is it about Justified content you already know that I don't want to waste your time one more time so if you don't know that you can either just cck Google search or you can just watch the uh flexbox section if you want to so now let's just learn about align items properties so you can also use that align items property in a CSS grid as well so we have like Flex start and if

you have that and this is going to be the flex start we have a flex end And it will now push it to the end we also have a flex center right here align item Center so it will now make it Center and this one will be just uh uh let me just write a center Center so you guys can see everything a it clear and here you can see it now just make it perfectly Center so this is it about for Justified content property and align items property and we also have that order and

align items and justify item and stuff like that like align self Property and all of that stuff which we already learned so now let's just use that order properties so let's just select order uh you know I'm going to provide this photo right there and let's just select this aside one right here so I'm going to just select my aside we already know that if you use like display of flex or display grid so all of them will have the order property by default set to zero so you can also just increase or decrease the

if you Want to so if you want to just write like order and here you can see our aside is now right here or you know what I'm going to just select my header so you guys can see the difference between all of that and here you can see header is now at the top and we can also push it to the bottoms by just in one to it and boom here you can see our header is now at the end we can also provide negative Valu so if you save that it will push it

to the top as well and we Can just provide like you know I'm going to remove this um minus sign from there and now let's just select maybe this main area so if you just select for Main and if you just provide a order property for that like two and if you sell there and it will now push this main to the bottom right here because this one have now the highest value like this one has two this one have one and this all of them like these above one have uh zero so that's how

we can play around with The order property so now the next property which we are going to be learning about is something called align self property and we already know like what align self will do for us so I'm going to comment this main for now and we can just use like a line self and here we can just write like uh maybe a flex end and if we sell that so not push its item like that one item like one single item because in this case we are working on align set and it will

just Work on a single element inside that container so we can just write a flex end we can also write a flex start and we can also write a center if we wanted to so Center and if we save that and it will now push this item to the center okay so you can also use a justify self if you want to but I'm not going to go into that much detail all right so now that we know enough about CSS grid so now the final property which we are going to be learning is something

called A CSS grid and CSS grid uh not a this is great but CSS template areas property so I'm going to just remove that from here and we are going to start working on a CSS template area property for now so now let's just learn about something called uh CSS template area property and as by now you already know like what is a template area or css um grid area we already learned that in the slide once we were starting this tutorial so the grid template Area Property specify area Within the grid layout so if

you want to provide a area in a grid lay layout so for that we can just use our grid uh template let me just write template and then areas right here and this is just a little bit weird you have to keep that in mind so this is just a little bit weird so before getting into a lot of great details first of all let's just learn about uh let's just discuss like what are we going to be building in this kind of a section so first of all let's Suppose if you want to build

this layout right here so how can you go about doing that so here you can see this one is taking its place this one is also taking like two rows right here and this one have one uh item in here we don't have any item inside it the middle right here and we have one item at the end and finally this uh I WR header and finally this footer area is also taking its place right here so if you want to create this kind of template or this Kind of layout so for that we can

use a great template areas and it allows us to Pro area for us okay so first of all let's just use uh like let's suppose we have a header so we are going to be specifying header header header you can also go with a header if you want you can give any name you like it doesn't matter but you have to put something in here so in this case instead of writing totally header so I'm going to just write H H and H so what does that mean It will start from the first line it

will take a second line then the third line and we can also just write like fourth line and by the way if you're working on a great template areas you have to remember your rows and columns so in this case I'm going to set there to like five and five and by the way I'm going to comment this line out for now and if you sa that and now let's just check out our browser okay so if you just click on this grid right here so Here you can see we are now getting um five

rows uh five rows and five columns as well okay so this is it you know I'm going to change this one to yeah I guess five would be fine so now that we specify that now let's just use this Edge in or header area so if you just save this property right here so here you can see still nothing is happening so if you want to work with a great template Area Property so for that we have to learn about another property Called just a grid area not a grid template area but just a simple

grid area Okay so let's just select our element like maybe header would be fine so if you just select our header right here and we have to just use our grid area right here not a grid template area but just a simple grid area and what is this grid area so the grid Area Property specify a grid item size and the location in a grid layout and this is a short hand for writing a grid row start Grid row column start and then a grid row end and grid column end okay so this is a

short hand for all of that so instead of writing that header and stuff so we can just provide H right here why because we provide this H right here we decare that right here and that's why we are using it right here and if you save that and here you can see it will now take up these lines so why so why are it taking all of that lines if you just right click on it and go to inspect one More time and if you just open our grid area right here so it's now taking

like line one line two line three and also line four right here why is that because we use this HED four times right here so we have line one line two line three and line four okay so if you want that other items to also take its place so for that we can also just use that for for the case I'm going to just hit tab in there and if you just write like maybe I don't know uh if you want to grow up this one Like man area so for that we can also use

first of all Edge Edge and also not H but it's a main area so there we can use M M M and M so four time M and now uh we just have to select that main area so if you just select our main area and now let's just select our grid area property right here and here we just have to specify this emid here and if we just save that and now let's just check it out and here you can see this m is already taking this area right here as Well but here you

can see we have these elements right here stuck in there so for that we can just remove uh you know I'm going to provide a four column layout and it will now push it right here okay this is kind of it but now let's just work on a period one so we have our section right here and then we have nothing inside there and then we have our aside so if you want to go with this layout so for that what do we have to do we have to just write our new String so what

do we have first of all we have section T dis space from one line to maybe two or three line and then we have nothing and then we have our aside from one and two so now let's just use that so we have first of all our H then not H it's a section so we just have to write S and S and if you don't want any content whatsoever inside some sort of a cell so for there we can just put a period right there or dot whatever you want to call it and now

what we have To do we have to select this aide area so we have to just write a right here okay so now we have to use this s and that a so for that we are going to be selecting our uh section okay so we don't have any section you know what I'm going to remove this uh Na from there and I'm going to put that a section and I'm going to just write like section inside there and I'm going to put it right here seven here we have to specify that section so we

going to be writing a Section and grid area and now let's just put our s in here and what else do we have to do we have to select our anchor not anchor but our aside and we have to specify the grid area property for this we are going to be selecting our asside and now let's just use a grid area property of the inside that aside so we just provide that a for that and if you save that and here you can see I guess something went wrong because we didn't provide any style for

that now let's Just use class of s and if you save that and here you can see this section is now taking all of this area right here okay something went wrong we have word section then we have our folder uh you know what something went went wrong a little bit now let's just go to our stylesheet uh so we have section section and then instead of using this period you know I'm going to also provide another one okay so I'm going to just use the a right here and if you save That it will

gives us a footer that's because we don't have enough rows and columns so if you sell that okay so we don't have a lot of we have SS one two 3 four five and we have to provide five in there and S there so this is going to be the first element this is going to be nothing and then we have a third element so it's not showing up anything you know I'm going to remove this uh 1 a from there and save there and now here you can see it will now gives us this

Section section and then it will giv us nothing inside there and then will it will gives us a side word here so instead of writing uh five rows I'm going to set there to four rows or you know what I'm going to set that to like six rows columns so we don't want six column we want four of them and we now push it right here and we want in something inside there so you know what we going to be just selecting a fold area right Here so I'm going to just write f f f

and f so this folder will take this place so we have to just specify this folder right here we are going to be selecting our folder and now let's just provide a grid area property for that and here we just have to use this F and if you save that and boom here you can see we are now getting this layout right here the same like this one not the same it's taking all over its place but I kind of want to show you is that how can You work with a grid area property and

this area grid Area Property is supremely useful now if you want to change this layout to this layout so how can you go about doing that well we are going to be leaving this head right there and we are going to be first of all using a section and then we are going to be providing a uh what do we call it a main area so now let me just write a code then you'll get to know what I'm talking about so now header Will be on its own place so now let's just use uh

s here I'm going to put s in there and I'm going to also put s in there and then main will be in its own place and now here instead of that um SS in here we just have to put that like a and space a and we don't want to put a spaces in there so we have to just use M and M inside there so if you sa that and now let's just check it out so here you can see L use a section and a side right here and our main area is

now at this Place right here and our for is also taking its entire area like so I should have to change the header to a folder I apologize about that and now if you want to change this layout to this layout so you can also do that by just writing mm in here so I'm going to put like um M and M in here and I'm going to change that to what is the section so let's just change this one to section and then we have a side and a side so I'm going to just

write a and a in here And then M and M in here so if you sell that and now let's just check it out and boom here here you can see we get this layout right here so that was kind of simple to work with the CSS grid and I know CSS grid can be a little bit overwhelming at first because we have a lot of properties and it's different kind of values and my recommendation will be to just play around with the CSS grid and it will just click it for you I know that

you cannot learn CSS Grid in One day it will take a little bit of time to learn so if you learn CSS grid and chances are like you maybe like 80% learn uh how to build a projects by yourself and by using HTML and CSS anyway so I'm going to just close that out and I guess we are totally done with the CSS grid so what do we learn so far first of all we learn about a display property then we learn about a grid template columns grid template rows we also learn about a repeat

function we Also learn about gutters or gaping whatever you want to call it and we also learn about justify content align item align self and all of that kind of property order property and finally we just learn about a great template areas and areas are areas areas are supremely awesome in CSS and I really love uh CSS um great template areas so first of all you just have to declare your layout like how your layout should look like and then you just have to use this grid Area in their specific element okay so that's it's

dead simple but it will just take a little bit of time for you I promise it will take a little bit of time for you to catch up so if you mastered CSS grade and as I said you if you're not 80% there so maybe you're more than 50% there to build your own project by yourselves so anyways enough talking now let's just play a game using uh CSS grid so now let's just search for something Called um what was what was the name CSS grid Garden I guess uh grid Garden so now let's just

search for that game and now here you can see we have the cssg garden.com and I'm going to click on that and now let's just play this game all right so what do we have you can learn the instruction about that but in my case I already play this game before starting this video so I'm going to just provide you with the answers and I'm not going to waste your time and not mine so We have a water so we just have to WR a great column and then start so our G column start will

be from the third one so if you put that and now we will just push our item in there I'm going to just give you the answers and you will play this game by yourself I'm giving you the answer and my recommendation to pause this video for now and play this grid Garden by yourself and once you're done and if you are stuck with some uh some sort of a challenge like here different Kind of level so if you are stuck at each level so then come back and I'm going to give you all of

the solutions right here and here we what we have to do I'm going to just put like grid column uh start and as I said that I already play this game so uh I'm going to just give you the solutions if you want to fast forward so you can also fast forward if you want to watch the solution so you also can watch the solution if you want to so now let's Just get into the third one and the third one what do we have to do we just have to write uh grid column start

is already in there so I'm going to put like grid column and then end and here I'm going to put like four in there okay so let's just close that and boom and we just have to use a gr column and and second property would be fine in this case and now done if I start to expand each of the value one by one trust me will take like uh Different kind of course for learning about a CSS grid so instead I'm going to just provide you with a value so grid column and n and

let's just put a five in there and if you guys want me to teach you how to play this game by yourself like if you want me to explain each of the property and its value if I got a lot of requests from you guys I'm going to make a video on that if not so so maybe we will just move on to a new course and that would be Fine all right so we are now at the level seven and now let me just put a grid a column and end and span it to

the two and span keyword is nothing special I didn't discuss that but a span keyword also allows us to spin our element and the default value is just a line which you're currently selecting your element from so this is going to be like a flex uh or grid column start or grid column end so the default value will be that And we can spin through whatever we want with that okay so I'm going to put uh next right here now let me just write like a um grid column and then end and we are going

to be spanning from whatever line we have and we want to spend through feline and now now let me just provide a grid column start as span from whatever the line is and you want to span through the third line okay so that would be fine now let's just click on next and now here we have to use a Short hand like a grid column and then we are going to be starting from the fourth line and we are going to be going to the sixth line and boom and now in this case we are

going to be starting let's just write a grid column and we are going to be spanning from whatever the place is we want to write three and we want to go through the fifth one so hit next and now in this case we are going to be just using like a grid row start It's kind of simple so we just have right third and boom and now let's just use our grid row and now let's just span from whatever the place is uh okay so we are at the 13 so let's just write three and

then six in here and that's going to be the solution for that let's just use a short hand for writing a grid row or five and writing a grid column or two and boom let's just use a grid column span From four go to six and use a grid row of span from fifth to six and yep next and I already wrote this solution for myself okay I'm cheating in here I'm not cheating I did play this game by myself but I thought instead of wasting your time by saying H so I'm going to just

give you a straight solution and I already said that you have to try that by yourself so I don't want to waste your time and my time so we just have to use a grid area In there and boom we are now at the 17 let's just use our grid area and we are going to be writing two and as I said that grid area is going to be a short hand for grid row start grid row end grid row uh grid column start and grid row grid column start and grid column end there we

go so as I said there in the beginning of that but you don't have to use this Shand because they suck and if other developer is working on your project later so he will be really Confused by that so that's why I didn't went in that much detail on there okay so that's why I didn't provide that much detail so I'm going to put a order of this one we already know order and because we've learned that in a flexbox section so what will be the solution for the ninth one the solution will be to

just use our order property of minus one and yeah next we have a 20th one so the answer for that will be just write a Grid template of rows not rows but columns and here we going to be just writing 50% and it will now take a 50% and now let's just use a grid template template of column uh 12.5 and I know that for a fact and now let's just close that close it close it come on close it and now if you hit next it now brings us to another one and now in

here what we have to do we have to use a grid template of columns and 100 Pixel 3M and 40% okay and now if you hit next and this is going to be the solution for 202 so now we are now at the 23 level so now let's just uh work on this we are going to be using a great template of columns columns and now let's just use one F like a fraction and then five FR for the fraction and yep that's correct the solution will be just a great template columns and 50 pixel

one FR one FR one FR or you can also use a Repeat uh repeat and first of all the value will be like three and we can also provide like uh onefs in here and we can just write a 50 pixel in there so this is going to be the solution or you can just write 1R 1R if you want to so now what will be we are now at the 20th 5 one so the solution for this one will be just write a grid template columns and 75 pixel 75 pixel then we have a

three pixel and then we have not a pixel to be precise but we have 3fr Then we have a 2fr okay so this is how everything should work and now let's just work on our 20th 6 one so the solution for 20th 6 will be like a great template or not column but rows and repeat function we can just use 4 12.5 pixel no that for a fact it's like 12.5 uh pixel and now let's just work on I guess this is the F no it's not a final one we have still have one more

left so you can just use and I didn't show you That I apologize so now let me just show you that real quick so template instead of writing grid template columns and grid template rows we can also use grid templates so uh first of all we are going to be writing a value for the column and then we are going to be using a value for rows so we are going to be writing uh 60% and also 60% let me just write a percent in here and then we have to provide a column Value for

that you can learn more about this grid template property but my suggestion will be to do not use a grid shorthand property because it confuses a lot of people like and some people will be coming from a background of a backend developers and they won't understand like what is a great template and they will waste a lot of their time just figuring out and they will be all the day on a strike overflow post like what is a grd template okay so instead of Writing just a grd template you can use a grd template uh

row and grd template columns so you choose whichever you like and then the final solution we have is a gri template right and then we have to use a 1fr 50 pixel and we have to go through 20% and also 80% okay so now if you hit next and boom congratulation we are totally done with our project we already play this game like flexbox frogy and we already played This one CSS Garden and we're not going to be playing any more games I guess we will I'm not sure but I don't know I can say

that for sure if you want to play these other games so you can play these other games if you want to okay so that was it a lot about a CSS grid so we are not totally done with the CSS grid side and I don't know what we are going to be learning in the next section all right guys so now we are Totally done with the CSS grid side of this course so now the next thing which we have to learn about in CSS is something called Cal function in CSS so what I'm going

to do I'm going to just select everything and I'm going to remove that and what else so I'm going to just remove this section and stuff as well so inside a body what do I have to do I'm going to just uh create a div with a class of s and no content nothing inside there so now let's jump into it But before we do first of all we have to select our body and we have to Center everything so for that we are going to be using display of Ls justify content of Center and

also align items of Center okay so now let's just start working on that s class which we just put inside or body right here okay so we going to be first of all selecting that and then we are going to be just using a BG of crimson right here and if you save that nothing will show up right here because We don't have any content we don't have any background color we don't have uh we do have background color but we don't have any width and height and stuff like that all right so what is

a c function so a cul is a built-in function in CSS and as its name suggest that it will allows us to do calculation of our values and a call function just accept a few arithmetic operator like addition subtraction multiplication and division so before getting into the detail of That first of all let me just write a width in here so we can just write like 100 pixel and 200 pixel and stuff like that and now in this case we are going to be just writing a call right here and now call allows us to

just calculate the values so we can just write like uh I don't know we can just use addition operator if you want to so I'm going to just write like 100 pixel plus and then 100 pixel so if you sell there and we can still see something so trust me on There if you use like plus it will gives us the result of 200 pixel okay so I'm going to just remove there real quick and now let's just use a height right here so I'm going to also provide a c in there so what do

I have to do I'm going to just write like 100 pixel minus 50 so what will be the result so it will just gives us like 50 pixel okay so 100 minus 50 will gives us 50 and if you save that and now here you can see we are now getting this kind of a shape right here Okay so like the width will be 200 pixel and the height will be just 50 pixel so let's suppose if I just remove 20 and if you sve there so it now gives us what so 20 minus 100

so it will gives us 80 pixel and we can also increase or decrease the sizes like maybe I don't know certain gives to result of like 30 pixel uh not 30 but 300 pixels so if you save that so here you can see this now increased and we should have to use a he here like 100 vs so we want this Container to be totally at the center all right so this is how we can provide addition and subtraction operator and we can also use uh like multiplication if you want to so you can just

write like a margin of c and here we can just use like 20 pixel multi by 2 so it will gives us like 40 pixel so if you save there and we cannot see the margins but you know what if you just right click on there and if you go to inspect and let me just show you the Box model real Quick so I can show you that and now here you can see long uses 40 pixel to the top 40 pixel on the bottom and 40 pixel on the left and on the right right

here okay so it will gives this margin of 40 pixel all around and this is using a times operator or asish or whatever you want to call it okay so now that we learn about addition subtraction and multiplication now let's just learn about um division operators so we can just use like division operator like so I'm want to just write a border radius right here and we have to just write like 15 pixel first of all and then we can use our col function right here so 15 pixel and then let's just use our division

operator okay so 10 pixel divide by 10 and then we can specify our own new values if you want to so if you save that and now here you can see that it will now gives us these B radius right here so this how we can use a division operator so now let me just Give you one more example of that so if you want like pading in this case so we can just write like a call function and 200 pixel divide by 10 so if you sell that and here you can see it long

gives us that much pairing right here okay so piring will be 20 pixel all around right here so 20 pixel top bottom left and right so this is how we can use a c function it's not scary it's not crazy but this is how we can use a c function so remember that c function allows us to Do calculation of values and it uses a basic arithmetic operate like addition subtraction multiplication and division so this is it about a c function now the next thing which we have to learn is something called a mix blending

mode so what do we have to do for that so what I'm going to do is that I'm going to remove this s from here and I'm going to just create a new container right here so I'm going to create a section with a class of container and Inside this section I'm going to just create a d with a class of IMG for the image okay so now inside a CSS what do we have to do inside a CSS uh let's just write our resets first of all so that we can just get all of

that image so let me just write a padding in here and we can also write a margin and now let's just use a box sizing off border box right there okay so now let's just select our container so let's just select our container and we have to just use a Color of uh you know what instead of color we can just use a background color of totally red and I guess that would be fun for now and I'm going to remove this body from there so if it's s file and we know that we will

get nothing uh that's because we don't have any content and pairing and stuff like that so now let's just learn about something called The Mix blending mode in CSS so the mix blend mode CS property sets how the elements content should blend with the Content of the elements parent and the elements background okay so I know that was just quite a crazy terminology and we have a lot of value use for there like we have a normal blend mode we have multiply screen overlay dark and lighten color doors if you already work with a Photoshop

like if you've ever worked with a Photoshop so you already know blending modes so if you haven't worked with phoshop before now let me just show you what a blending mode is so now that We select everything right here now the next thing which we have to do is that we have to first of all just select or image inside that container not just an image but this image div right here so for that we can just first of all select our container then our image right here and we provide a class of image not

a toal image right there so for that we can just use like um background image right here and here we have to specify the image path so now let's just search For image so I'm going to go to unsplash.com real quick and here I'm going to just search for I don't know which kind of image would be find okay so I'm going to just search for maybe a nature would be fine so I'm going to just write a nature in here and and I guess I'm going to just choose kind of a um I don't

know which kind of image should I pick I can pick like whichever kind of image I want but I want to choose like a Cool image for this mix blending mode so uh I guess you know all of them are crap I'm going to just choose this one we already work on this one once we are working on a filter so you know I'm going to just click on this image and now let's just right click on that and copy the image and address and I'm going to put this image address right here but inside

a quote so I'm going to zoom out a bit so this is our image now let's just use a background repeat of no Repeat because we want our image to do not repeat itself and background Position will be set to center background size will be totally covered okay so I'm going to also give a height of 100 V so that we can just see everything in 100 vport height so if you so there and now let's just go and here you can see we are now seeing this image but it's kind of a crappy image

you know I'm going to select another image you know this image wasn't the way I Expected to be so let's just write our computer you know I'm going to just select this image from this uh I guess sorry I can't pronounce his name but I'm going to just choose this image and I'm going to pass it right here and if you sell that and I guess we can totally work on this image if you want to and instead of Center I can use top and if you sell that it will give us top but bottom

would be fine yeah I guess that would be fine and so now here you can See as the background of this container image we have a red color right here like we totally set up this um red color as a background right here and then here we have our image right here but now let's just use a property called mix blending mode so we can just use like mix blending our blend mode to be precise our blending mode so we can use that so by default the I guess the by default is a normal so

if you save that nothing will happen right here so we can Also use a multiply so if you s that so it will now just multiply our image and it will now gives us kind of a greenish color and we can also change this color to be like blue if you want to so if you just use blue so it will not use that blue kind of color on the foreground so this is a mix blend mode of multiply we can also use you know I'm going to just duplicate these lines so you guys can

see everything in one line or not in one line but everything on the screen so I'm Going to just use dark in value and if we save that it will now gives us kind of a darken value of that image or that color we can also use let's just duplicate that and we can also use lighten and if you save that and here you can see use the liting version of that if you duplicate that and we can play around with that but I'm going to show you all of this Valu so I'm going to

just use like color of Dodge blue and if you sell that and it will now just Fill out all of the colors so for that we have to specify some sort of opacity so I'm going to just decrease its opacity and if you set that and here you can see this is how we can play around with this overlay or what was that color dor blue or what was that so we can just play around with that so if you get like totally Pure Color like this one if you just specify instead of providing a

instead of providing opacity so if you just get like totally blue colors so for That we have to change the opacity of that colors so now let's just duplicate that and now let's just proide a color burn or burn what however you want to pronounce that and if you save that okay so it's still giving us that kind of a image or so now let's just change opacity and here you can see this how we can play around with that so duplicate it now the next value which you're going to be using is a differences

or difference would be fine and if you save That and will long uses a difference based on that uh image and that color so if you change this color to maybe like uh sky blue or not sky blue like crimson and if you save that certain log uses the differences between the color and the image now let's just duplicate that and you can just play around with that if you want to and now let's just use another property and now if you save that and here you can see the S differences now Let's use a

hue one so save it it will now gives us a pure Hue we can decrease the opacity if you want to just like that and I'm going to save my file and this is how we can decrease the opacity so if you decrease the opacity so we will get a lot of different kind of results so I don't want to decrease the opacity so here would be fine now we can use a saturation if you want to so I'm gonna just provide a saturation and if you save that it will not give us pure Saturation

right here so uh we can just decrease the opacity and we can play around with this color so if you save that so it will now give us a little bit saturation and we already learned about saturation on a filters and gradients value if you remember that so we can use saturation there and we can also use it here if you want to to so now let's just change everything to Pure Color and we can also provide a color right here so if you just provide color and if you Save that and it will give

us this result based on there and now let's just write a last property which is like sorry I can't pronounce this name but Lumin Luminosity yeah I can't pronounce that luminosity and if you save that and here you can see it will not use this different kind of result based on this color so if you change that to like something else like maybe I don't know this blue Viet and if you sell that it will not giv a result based On that so this is how we can play around with this mix blend mode okay

so now let's just uh use it a little bit more and then you'll get to know what is the usage of this mix blend mode uh we can also use that with gradients if you want to so uh you know what I'm going to Rie all of this mix blend mode from there and now the next thing which you have to do is that here we have to specify the linear gradients so at the end of this image first of all let me Just write a mix uh blend mode and we can now use maybe

the overlay ones now let's just use the overlay and we can also use the linear gradients if you want to okay so let's just use a linear and gradient and here we are going to be specifying like a steel blue color and also uh that fire brick color so I'm going to just write a fire brick so if you sell that or fabric however you want to pronounce that if you sell that it will lo you use this kind of a gradient Right here but we have to change its opacity as well so we can

just decrease its opacity and we can play around with that so if you save that and it will gives us results based on that okay so here you can see our mix blend mode is set to or and if you comment this line out and if you save that so this how our gradient will look like if you uncomment and save it and this is how we can use a mix uh blend Moree on there we can use like maybe a different kind of value Like maybe I don't know if you use here so L

use result best on that here and I already show you all of these values so you can play around with that in your free time if you want to and by the way we can also use or we can also mix two images at once so for now let's just remove this linear gradient from here and I'm going to remove that from here and we can also mix two images so let's just get another image of maybe a Macbook or whatever we have so I'm going To just select this image maybe uh I guess I'm

going to select this image and now I'm going to right click on that and copy the image address and what do we have to do I'm going to first of all put a comma in there and now here I'm going to just write like a URL so this will be the first image and this one will be the second one so so I'm going to just put its image value so or link so if you sell that and if you check it out so here you can see we are now getting this One image but

we cannot see the other one uh so now let's just play around with there real quick but there we can can just use a linear gradient as well so let's just put a comma in there and I'm going to put that linear gradient in here and I'm going to Pro like a steel blue color and we can also proide like a fire brick color as well and let's just change it from somewhere else and now if you s file and this is how this image looks like but we cannot see that other Image so there

let's just use like multiply and also comma screen and if you sell that uh okay so we are getting a totally different result I guess something is wrong so instead of using a mix blending mode we can use a background uh blend mode so if you just use like background blend mode and if you save that and here you can see we are now getting these two images so here you can see this is the first image and this one is the second image we are now Seeing that but these images are crap as hell

so we have to search for another image so I'm going to just search for nature and now let's just get like two images I'm going to just click on this one and then right click on that and copy the image address and I'm going to put it at the first image right here and now let's just search for another image maybe like I don't know which kind of image would be fun I'm going to search for or you know I'm going to click on This image and now let's just right click on it and copy

the image address and I'm going to put this image address in the second area right here and now if you sell that and here you can see we are now getting two images two kind of different imag so this is our tree images uh so here you can see these are our threee images and this is a mountain image so this is how we can play around with a background uh background blend mode and this how we can play around With a mix blend mode in CSS so now that we are totally done with a

mix blending mode and background blend mode so now the next thing which you have to learn is something called is sud sudo selector we already learned a few Pudo selector back when we were learning about like Howard visited and that kind of pseudo selectors so now in this video or now in this section to be precise we are going to be using uh is sudo selector so I'm going to just remove Everything from here and now let's just get into our HTML and now let's just remove this section and stuff so for that you first

of all have to write a header and inside this header we just have to write H1 of like hello word and then you know I'm going to just put like hello word of one in here and now let's just use H2 of hello word of two and now let's just use h three of hello word and then three okay so now we are totally done with the HTML side now let's just Sell there and now inside a CSS now let's just discuss about that property called the is sudo selector okay first of all we have

to put a column in there uh so the CSS is sud sudo selector or the is class however you want to call that Tes a selector list like this sud selector takes a selector list as an argument and select any element that can be selected by one of the selector in that list okay so I know this is kind of a giberish but now let me just write Some code then you will get to know what I'm talking about so if you want to select that header first of all we just have to write a

header and now let's just use that sud selector so we are going to be using a colum let me just zoom in a bit we going to be using a column and then the is operator or word however you want to call that and here we going to be passing the list of the selector so we are going to be using like H1 H2 comma H3 okay so we are uh Selecting these three uh elements inside this header for now okay so now inside there let's suppose if you want to change the color of them

to be like maybe red so if you want to provide red color and if you sell that and here you can see all of them are now totally red so in some cases we would get error like let's suppose if I just put s in there and if you s file so it will now just select both of these two and it will not select this one so now that was just a First example so I'm going to comment that or you know I'm going delete that for now and I'm going to also delete this

header area from here that was just a basic syntax so I'm going to just write a crazy HTML for now and you have to type it with me as well so for now we are going to be using uh section let me just write a section with no classes and nothing inside there and nothing not nothing but we are not going to be providing any classes and IDs so we are Going to be using H1 of like uh section heading one and now let's just duplicate that a few times or you know what instead of

duplicating that we are going to be writing it manually like section uh section heading two now let's just use H3 and here we going to be using section or you know I'm going to copy and past it so copy it and pass it and this one will be now the third one now let's just use H4 and section heading four now let's just put H5 or section heading five and finally we are going to be writing uh H6 for heading section six okay so I'm going to zoom out of bit and this is going to

be the first section now the next thing which we have to do is that here we are going to be using article so I'm going to just write article in there and what we have to do I'm going to copy all of the content from here and I'm going pass it right here and now I'm going to just select my section and like so now if you Want to do a multiple selection so first of all you just have to hold alt and then you just have to click on the selection where you want to

make so I'm going to just remove that and I'm going to put that like article in here okay so now let's just duplicate this section as well or you know what not going to be duplicating there we are going to be using a side so use a side and now let's just copy all of this content and I'm going to do a multiple Selections in Here let's just do a multiple selection in here real quick okay so may we messed up in there let's just remove the other one and here we're going to be using

a side and finally we are going to be creating a nav tag and now let's just copy all of its content and I'm going to paste it right here and now let's just change this aside to uh let's just do a multiple selection and now let's just change that real Quick to nav heading one and heading two and so on and so forth so this is how currently things looks like so we have a section headings then we have article headings then we have assigned headings and then we have a navigation headings so if you

want to select everything so for that we can just write a crazy amount of selection so we can just write a section of H1 and then write uh section H2 then write a section you know I'm going to duplicate that a few times Like so and we are going to be writing like H3 H4 of section five six and then we have to use all of that so I'm going to just do a multiple selection in there and here I'm going to just use like article and then H1 H2 and so on and so forth

so let's just WR H2 H3 and then we are going to be using H4 and now let's just duplicate that two times one more time then we have H5 then we have H6 and now let's just copy there and paste it one more time then we are going to be Doing a multiple selection for uh what do we call it a side and now let's I guess that would be fine now let's just do multiple selection for uh what do we call it navigation so now we did a lot of multiple selection and stuff like

that so now finally we are going to be just using our curly bracer and now I want you to just notice this selection so we have section from H1 through H6 then we have a article from H1 through H6 then we have our navigation from H1 Through H6 kind of crazy selector like that so then if you want to change the color to maybe like steel blue and if you sell that so all just provide that color to all of these uh headings right here okay just imagine the scenario like that and you will never

have a scenario like this in a real world project but I just kind of want to give you a example so I want you to just notice all of that instead of writing all of that we can use or uh selector so I'm going to just Comment all of the things right now and if you save that we will get a by default a black color so if you just uh use a sudu Plus or selector however you want to call it so we can just provide a section then we can provide article then we

can provide a side then we have to just provide a navigation and then now let's just use another is and here we're going to be using H1 H2 H3 comma H4 and H5 and finally let's just use H6 and now inside there we are Going be using that kind of a steel blue color and knife is out there and boom here you can see It'll now apply that color to all of it element right here okay so instead of writing all of these selector so now we can refactor our code to the selector right here

so if you zoom out a bit then you can see the difference between like both of that right here okay so that was it about is selector and now let's jump into a new topic which is called I guess a not Selector let's just see so now that we are totally done with the is selectors now let's just learn about the before and after sud sudo selector but before getting into the before and after selector first of all let me just say this these are crazy selector which can be used in a lot of different

kind of scenarios but in this section I'm going to just give you a quick example of that like how you can play around with a before and after selector like Sudo selector to be precise I guess I'm going to make a whole video on that so it can like uh before and after selector totally guide but I can promise you that for now but I just kind of want to give you the test of that so I'm going to just remove everything which I have inside my Styles sheet and I'm going to also remove everything

inside my body right here so totally clean body and totally clean style sheets so inside a body I'm going to just write a paragraph And let me just write like maybe here is uh some content right here so I'm going to save that and here you can see you're now getting like here is some content now let's jump into our CSS and now let's just TI that so first of all let me just uh Center everything first of all I'm going to write like a body of um height will be 100 V in display will

be totally Flex uh justify content will be Center align items will be totally Center and font size I'm going to put Like five frame for now and if you save that and here you can see everything is now totally at the center and our content is now taking like five frame height anyways so now let's just talk about about something called before selector so before selector insert content before a selected element so uh the difference between the before selector and after selector is that before selector insert item before the element after insert content after the

Specified element so this selector can be commonly used uh like to add some text or anything you want so I know that was just a horrible definition I give you so now let me just write some code and then you'll get to know what I'm talking about so if you want to use use that first of all we going to be writing a selector name then we are going to be using double colon right here and then we are going to be using a before or after okay so we are going to be just Writing

before in this case and now let's just and now the next thing which you have to do inside this before we are going to be placing a Content okay so if you don't want to put any content whatsoever so you cannot like if you don't want to put anything so you don't have to put anything so if you do want to put something like maybe hello so you just write hello in here or you can just put an image if you have image you can also put like maybe svgs if you have Svgs you can

put HTML entities if you have that but in this simple example I'm going to just put like hello and then we can just style this content which we provide right there okay so we can just use like background color of maybe red and we can also just increase the size of that like maybe 20 pixel we can also change the color to be like maybe I don't know let's just choose like this color and we can also change the font wait if you want to so like let's just Write at 100 and if you save

that and here you can see it now add this element right here you don't have to provide all of these style like you can choose whichever kind of style you like you know I'm going to change this color to be maybe like um I don't know I guess I'm going to just go with a totally Pure White and if you sell that and here you can see we are now getting this uh hello right here okay as I said that before and after selector can be used in a lot Of different kind of scenarios but

this is just a quick example of before and after selector so this is how we can put content uh before the element like we first of all have this paragraph right here and we want to put like hello before this element so this is how we can put that if you want to put that content after that element so for there we can use after Okay so now let's just select our P tag right here and now let's just use our double colums right There and now let's just use uper so here we are going

to be placing like content of buy maybe and now let's just style that so I'm going to just change the style to be red the font size uh will be like 20 pixel and the color should be totally white not should be I should have to say should be but font weight will be just like add 100 pixel not pixel but just add 100 so if you save that and here you can see this is how we can provide content before the Element and this is how we can provide content after the element so you

can go crazy like instead of putting like hello you can also provide like maybe some you can also put images you can also support a font awesome as we learned in the previous videos but in my case I'm going to just put like hello and if you s there so it will not giv us hello and buy so this how we can work with the before and after P sudo selectors so now that we are totally done with the before And after selectors now let's just learn about a final uh sud sudo selector in this

course so now let's just learn about a not sudo selector so I'm going to select everything and I'm going to remove that in style shet and I'm going to select everything and remove that inside a body tag as well so now in this case for the not selector first of all we have to write some sort of HTML so I can give you a cool example so I'm going to just Write a section with a class of section as well and I'm going to also put an a right here and then I'm going to provide

like article with the Clauses of article title so I going to just put like article title now let's just use a paragraph of content and I'm going to just put like LM of maybe 100 would be fine you lurm 100 is just uh or kill so I'm going to just go with like 50 lurm Epsom and that will be fine and now let's just write a new paragraph right Here and now let's just provide a lurm epsm of 50 one more time so I'm going to just put like lurm 50 in here and if you

sell that and we are now getting a lurm Epsom with a class of content and like this first LM Epsom or this first paragraph will have a class of content and this second one do not have any classes and any idas and stuff like that so now let's just get into our CSS and now let's just work on a not Clause so not not Clause but a notse sudo selector The not selector matches every element that is not specified in that element selector so you know what first of all let me just write some coding

then you will get to know what I'm talking about so first of all let me just get my section and I'm going to put a width of like maybe 42 rims or not rims but M and I'm going to also provide a margin of zero Auto so that our content is now at the center let's just provide a background color to be like maybe RGB of Uh 32 32 and 31 okay so now let's just put a pading of four RS in this case and if you save that and this is how currently our content

looks like and you know what I'm going to just select my body in here and I'm going to put like a background color of maybe 333 in this case and the totally uh color totally wi and I want to also put a padding of two rims so if you just sell that and this is how currently our content looks like right now okay so now here I want you to Notice that in this class in this first paragraph we provide a class of content but in this second paragraph We didn't provide any classes any attribute

any stuff like that so I want you to just notice there so now in this case we want to select like uh first of all let me just write a section and now let's just get over a and then we have to get our article uh title so we are now inside this article title right here so so you want to do a little bit of nesting in There so we are now just select word section then we select this SP section then we select word section or not section but just article title or you

know what we can just remove this a from there we don't need that I just kind of want to give you the example but we don't need that so simply just remove that so we would just select our section and then we going to be just selecting this section or not section but article title and now let's just you know I'm Going to provide a space in there and now let's just use that note uh selector so if you just write not and then we just provide a content in here so now let me just

provide a Content so we are now selecting this content class right here so any style we apply to this selector like we select word section then article and we specify not so it will just skip that and it will provide that staring to all of that elements okay so all of that selector all of that Selector will be specified oh my goodness what the hell am I doing so go back and it will now it will not specify that styling to all of that selector which we select already but it will just ignore or it

will just skip this one which we provide inside this n sudu selector now let's suppose if you want to give him a color of like maybe the steel blue or SL blue will be fine and now if you save that so here you can see it will not provide color to this Content Clause but it will do provide color to the second class right here so if you have like maybe thousand more paragraph text so it will just provide that colors to all of them except which have the class of not uh I mean like

which have the class of contents if you just right click on that and go to the inspect so let's just write F12 in here and now let's just select our first one so let me just show you that real quick so here you can see this one do have a Class of content right here and we specified that in our not selector right here so we want so we want to provide these styling which we are going to be writing inside this curly braces so we want to apply all of that style to all of

that M which we first of all have but just ignore this one which we selected inside this not class right here okay so this is kind of a cool anyway so now let me just give you another example of that so we can also just remove that nesting If you want to so now let's suppose if you want to increase the font size so we can just use a font size of 14 pixels and now let's just remove these article class and these a lot of nesting so you can just remove that and if you

save that and I guess we M up something so we are now selecting word section uh okay so we are now selecting the section and then we are selecting all of their content so that's not that's not a great idea we have to part that article one More time so we can just use article title in there so if you save that and now this is how it works so this was just a first example of that not operator or not why am I saying not operator this is the first example of a not sud

sudo selector now let me just give you another example of that so for that we have to write a little bit more uh HTML or you know what we have to first of all remove this example so I'm going to remove this example from here And save that and we also have to remove this example from there as well oh you know what we're not going to be removing that so we are going to just remove this section and then article title and then that not operated so I'm going to just remove that and this

is how everything looks like by default and you know what I'm going to give you the example of buttons so I'm going to zoom in a bit and here I'm going to just create a new article right here R Article and inside this article what do we have to do I'm going to give a class of like maybe section in here so you want to provide that section class which we already style right here and inside this uh section we have to just create a button and now let me just write like button a and

now let's just duplicate that we have button B and now let's just duplicate that and now we have button C but in this case I'm going to provide a class of or not class but attribute of Disabl so if I just provide the attribute of disable so if you sell file and this how we get by default right now so if you want to style all of these buttons like this button a and button B and if you want to skip the styling for this button c um which has the attribute of disembl so if

you want to skip that so we can just write a code for that if you want to so we can just use first of all um so for that we have to use a section and then now let's just select All of the buttons uh so I'm going to just put a button in there and now let's just use that not pseudo selector and here we are going to be just specifying the disable d s a b l e d and now let's just use like f size of 20 pixel and now let's just use

background color of crimson so if you s that so now here you can see it will now apply all of that style to all of the buttons except this specific button which have the class or not a class but The attribute of disable Okay so it will just ignore that so now let me just give you the last example on the not sudo selector so I'm going to just remove that from here and I'm going to also remove this everything from this article as well now let me just write like maybe anchor tags in this

case I'm going to just write anchor tag which will go to like uh I don't know my YouTube channel so https and then double sles www. YouTube uh.com there is sp it correctly like U Tu okay so y tube.com for slan webd my own channel so I just kind of want to give you example of these anchor Texs and I want to put like maybe YT for YouTube so now let's just select this second one and what do we have to do I'm going to copy this link from here and now let's just P this

link right there and I'm going to put like UD me right here and then let's just use like user of hosan webd and then let me just Put a UD me in here and duplicate this line of code and here we have this specify their Dash in there and now let's just write like maybe google.com so I'm going to just write like um google.com and I'm going to remove everything from there so here we just have to replace that name to Google so if we select that and save that it will now gives us these

three anchor tags right here so if you want to style all of them and you want to just uh like Skip one of them so for that we just have to write a little bit of coding so now let's just select word section and now let's just select all of the anchor tags and now let's just use our not operator but now in this case we are going to be using our H riff and now let's just provide this s resemble and now let's just search for the one we don't want to style so which

one we don't want to style maybe like uh this YouTube channel so if you don't want to Style that one so I'm going to just past this link right there so I'm going to zoom out a bit and this is how we can select that and now let's just use our curly braces right there and now here I'm going to just provide a color of like maybe Brown uh yeah I guess I will just go with a brown color and text decoration I want to remove and I'm going to set that to none and sell

file so here you can see It'll apply all of that styling to all of these anchor text Except this uh YT or YouTube That's because we provide that right here so if you just copy maybe like uh this second one and if you just copy that and I'm going to paste this link right here and if you save that so here you can see it not apply their styling to all of their anchor tags except this middle one why that's because we selected that right here so this so we can use a n so selector

in CSS so I'm going to just remove everything which we have inside Word stylesheet and I'm going to also remove everything inside our body okay so we get a totally clear body and totally clear Styles sheet so now the next thing which we are going to be learning in this section is something called uh variables in CSS so this kind of a new feature in CSS but I shouldn't have to send new it's been for a while but it's new for those developer who's been working on a web development for a long time so you

know what let me Just show you what is the CSS variables and then you'll get to know what I'm talking about so I'm going to just give you a simple example by just writing H1 of heading one and now let's just write H2 of heading two in CSS or in HTML so if you sve that now let's just get into toward CSS so now the question is what in the world is a variable which I'm talking about a variable is just a container for storing your data and you can reuse that container again and again

If you want to so that was just a kind of a programming introduction but now in CSS you can think about variables that this is some sort of a thing in which we can store the value of something and we can reuse that value again and again um so before I blow your mind out by this silly introduction first of all let me just write some code then you'll get to know what I'm talking about so if you want to create variables on Roots so you can just write column and then rout and Then we

have to write our opening clyra and closing curly brace and now if you want to give some sort of a name to our variable so for that we just have to write like two dashes and then like in this case we want to store like the value of color so we can just use like um you can give any name you like but you are not able to provide spaces in there so if you want to like provide spaces so for that you'll just use a dash instead you cannot use spaces you Just use dashes

okay so first of all we would just use two dashes then we can use use then we can specify some sort of a name to variable so in this case we are going to be just writing like primary color and now we have to store some sort of value inside that variable so which kind of value you want to store inside that variable we want to store the value of maybe like some sort of a color of like maybe teal would be fine and now let's just close that so now we Successfully create our variable

right here so we can use this variable anywhere we want we can just use the value of that variable like we can just use the name of that variable anywhere we want and then later if you don't like that color or that font or that whatever you store inside that variable so you can just change in one place and it will affect in all of their area in where you use this um variable so now let let me just give you example of like H1 and in Here I'm going to just put like color and

now if you want to use that variable so what do you have to do first of all you just have to write a war and then a war is a function so for that you just have to write opening parenthesis and then the closing parentheses this is and then just name of that variable so which kind of name is our variable or variable is now double dashes primary color so if you just select that and if you sell that and here you can see it will now Change the color to teal color so if you

want to change this color so we just have to go to our variable section right here and we can change it to like red or blue or green whatever kind of color you like so save it there so it will now just change it to that color so I'm going to just stick to that teal color now let me create a new variable so let's just write like dash dash of size or you know what I'm going to put like maybe for size or we can write it like Camel case if you want to or

we can just uh separate by a dash so now let me just write a font size and here we have to just specify like four rims right here so now in this case you want to select our H2 and now let's just increase the font size of their H2 I'm going to zoom out of B and now let's just use our CSS variable so now in this case we want to use the second or not the second but the first variable name so we are going to be just using font size and now if you

Save there and boom here you can see the font is increased to like four rim and now here you can see that so we can create like countless variables for our project but we will just keep things simple so we just learn about colors the fonts and now let's just provide like maybe BG color for a background color and now if you just use like red uh red will be the kind of the background color so now if you want to use the background color of this H1 to be like red so we Can just

use like BG and we have to specify that water and then just use that sort of a color so we want to just use like BG color for a background so if you save that it will now change the background color to be totally red and it will change the heading or the text color to be totally teal okay so we can play around with that if you want to so if I just write white and if it's s that and we now change the color to be totally white if you want pading so we

Can also use a piring so we just have to use like P or pairing you can give them like total name in this case I'm going to just put like P of maybe 20 pixel and now if you want to provide a padding of 20 pixel to this element so we can just use like padding or you know what uh I'm going to put a padding inside this H1 so I'm going to just use padding then one and then just a p okay two double dashes and P and now if you save that and it

will now just add this padding by using Our CSS custom Properties or you can also call it a CSS variables okay so this is how we can create variable and this is how we can use variable in CSS all right so now that we learn about the CSS variables so now the next topic which you are going to be learning about is something called dry principle in programming and in CSS so dry just stand for like do not repeat yourself okay so you just have to remember that and once you jump into like specific programming

Language so you would also see this pattern or uh what do you want to call it so you will also see that like do not repeat yourselves so in CSS we repeat ourselves a lot so now I'm going to just give you the example of that real quick we are going to be first of all writing a bad code and then we are going to be refactoring that code and by the way refactoring just means like we are just improving our code and we are changing our code so uh let's just write a Section in

here and I'm going to give him a class of one and now let's just use our buttons like uh maybe the first button so I'm going to just use like BTN of like learn more okay and now let's just create a new section right here and now let's just set that class to be like two and I want to also provide that BN right there okay so instead of learn more we are going to be just using like download right here so if you save that it will now gives us two buttons right Here so

we just have to put a br in there for not a b but just a brr for breaking like so so you not get like breaking in there so first of all so here you can see we have like first section with a class of one and then we have a button inside that section with a clause of BTN and then we have another section with a class of two and then we have one button inside there with a class of BTN and the title or the level will be just download and this one will

Be learned more so this is quite simple and easy now let's jump into our CSS and now if you want to select that first of all let me just write a reset for or you know what we will not we not use resetting so let me just write a body in there and now let me just write display of flanks justify con Center align Center align items will be also Center and I'm going to also put like 100 VH and seven and now both of these buttons are now at the center okay so let's just

Remove this BR from there yes all right so this is it for centering the buttons so now if you want to style each of the buttons so first of all we are going to be using a bad way so I'm going to just write like a band way of writing so we are going to first of all selecting the section then we are going to be using the class of one now let's just select our button and now we can just use like maybe the background of transparent and we can also use a border To

be like none not border radius but just a border to be like none and now we can just use like a margin of 10 pixel uh background will be like maybe I don't know which kind of color will be find RGB of six uh six I'm going to put a six in here one more time oh my goodness if I can catch a six oh my God so six and six all right now let's just put a little bit of pairing of like 1 M and 2 M's and now let's just give a little bit

of color of totally white and also the Cursor will be pointed now if you save that and here you can see it now apply all of that styling which I just show right here just this one button right here like this one BTN class uh which we specify right here now we select word section with a class of this one BTN and now in this case if you change the section to be like two and if you save that so here you can see now apply all of that styling to this button but not to

this one so we can just remove that First of all if you just remove that and if you save there and here you can see we now solve our first problem so now both of these BS are now taking their styling which we wrote right here but the thing is that if you want this button to be green like maybe this download button will be green so how can we go about doing that the first and the bad way is that we can just select word section with the class of one and now let's just

duplicate there so we will Just copy all of the content and we will just duplicate there and now we will just select this two um we will now select this second button and we can just change the color to be like maybe green and now let's just hold our Mouse over to it so you just get kind of a green color like so and now if you sell that here you can see now we achieve our result right here but this is not the better way to write our code and as we learned in the

beginning of the video is That do not repeat yourself and this is what a Dy principle means so you would just found this is just one scenario but in CSS you would found yourself countless time repeating yourself so you just have to think about that principle like do not repeat yourself there has to be a better way so in this kind of situation what do we have to do we can just uh give separate claes to these buttons so this one will be BTN BTN so now both of these buttons are now Storing all of

these styling right here so now what else do we have to do we have to just give like new claes like maybe uh BTN primary maybe and this one will be just BTN uh secondary so now that I give like a BTN primary and BTN secondary classes to it and now if you sell that nothing will still happen so now we can refactor our code just a little bit better quality code so what we have to do I'm going to just select this section and I'm going to remove That and now let's just select this

section or you know what we are not going to be selecting this section so uh we are going to be selecting all of these score from here and I'm going to delete all of that so now here you can see that styling are applying to both of these uh buttons right here but if you want to change the color of this specific button so for that we can just use uh like maybe different kind of color so for that we can first of all Use that new class which we provide right here so we want

to select this BTN secondary so now let's just select this BTN secondary so here we have to just write like a background of maybe green and now if you just put a green in there and if you sell there so here you can see this button is is not only green and look at our code we don't have to repeat ourself like we don't have to copy all of that code and we have to just tweak things around and we would still have All of these properties and values but instead of writing all of that

clutter code we now just refactor our code to just this simple oneliner code right here and I cannot show you all of the ways in this video because it will take a lot of time but this is just a one scenario in which you just repeat yourself so so always keep dry principle in your mind so whenever you are just repeating yourself so whenever you are copying your code from one place to Another or you are just duplicating your code in one or two ways so you just keep that dry principle in mind like do

not repeat yourself okay so there will be situation you repeat yourself so I want you to just keep in mind this dry principle and dry just simply stand for like do not repeat yourself and there's one more acronym called kiss and kiss means like keep it simple stupid okay so we are not going to be learning that because it's a programming related Acronym anyways so this was it about a dry principle and now let's get into a new section of Animation transformation and rotation and all of this kind of a good stuff all right all

right so welcome to a new section in this section we are going to be learning about transformation transition and animation so to learn about that first of all we have to delete everything which we have ins inside our stylesheet and we are going To be also deleting this section and stuff from our body so what do we have to do inside our body and in this specific section we are going to be first of all starting with a transformation so we are going to be first of all just writing a section with the class of

container so inside this container we are going to be just writing div and now if you save that and go into our style sheet right here so let's just start working on a transform Property so what is a transform property a transform form property applies a 2d or 3D transformation to an element and this property allows you to rotate scale move and scale which we are going to be learning in this section just in a second so first of all what do we have to do first of all we just have to select our container

we have to give a height of 100 VN so that we can see everything in totally Center so we just have to use display of flex justify con Of Center align items of uh Center so zoom out s file and we can also see something because we don't have any content and stuff so now let's just get our container and select our div inside that container now let's just provide a width of like 300 pixel and also the height of 300 pixel so now let's just give him a background of science or S whatever you

want to call it so if you s that and now here you can see we now get totally a rectangle right here at the Middle of our viewport so now if you want to transform that so for that we can use a transform properties so as the name Mees that it allows us to transform or provide us with a transformation so now that we use a transform property and we have a lot of values in their transform properties so we are going to be starting from the first one which is translate so if you just

use like translate or you know we are going to be starting from this Translate Y function Right here and here we have to specify how you want to translate or how you want to move around your element from one place to another on a y AIS so now we select or Translate Y right here so we just have to specify the amount so we are going to just you know I'm going to just go with like 200 pixel and the 200 pixel will be fine and now if you sell that and boom so it will

not push or container or that box from one place to another so we just use a positive value So it will not just push it from top to bottom but if you just use like negative value like netive -200 pixel and now if you save that and boom it will now push it to the top right here so you're not limited to just write like 200 pixel so you can also write like 100 pixel if you want to and stuff like that so this is the first value I'm going to duplicate that and I'm going

to comment that line out and now let's just learn about xaxis so we have translate X so instead of Writing negative value we would just provide a positive value but before I show you all of that let's just comment this line out and if you save that and this how currently or container or box whatever you want to call it this is how it looks like you know I'm going to just uh shrink the size to maybe like 200 pixel save it and that's looking better all right so now let me just use this translate

on the x-axis so if you save that so it Will now just push it to the x-axis like 100 pixel and we can also just go with 200 if you want to you can go 300,000 however you want so I'm going to just use a negative value in this case so if you save that and boom it don't not push it to the negative U 100 pixel so if you just use like -200 pixel so we'll just push it around by using this transform of translate x-axis and Translate Y axis so now let me just

comment this line out now let's just use that transform same Property but instead of translate X and Translate Y we can just use a translate function word here and now the first value which you have to provide for the xaxis so we going to be providing a value for the xaxis like 100 pixel and then we have to put a comma in there and then we have to specify the value for the Y AIS so I'm going to just put like 200 pixels if youself there and it will now push our item from left to

the right like 100 pixel and from the top to the Bottom like 200 pixels so we can also use uh you know what I'm going to just uh push it to the 50 and we can use a negative value for that and if you save that so we now just push it a little bit if you just use a positive value so it will just push it from top to bottom if you just use a negative value so it will now push it from left to right like so and you can play around with this

property if you want to I'm going to comment this line out now the next value Which we are going to be learning about inside this transform property is a rotation and this rotate property will allows us to rotate or element so in this case what do we have to do we have to just specify the rotation how many rotation we want so in this case I'm going to just provide like 20 and D EEG for degrees so if you save that it will now just rotate our element on a 20° so we can provide more

degrees if you want to like 40° and boom it will now just Rotate it on a 40° we can provide like 180° if you want to so if you just specify 180° and save that so you'll just get a default result right here and we can play around with there like maybe I don't know 60° and this how it looks like we can just move it to like 10° 20° 40 Dees how many you want okay so this rotate function allows us to rotate our element I'm going to comment this line out as well and

now let's just use a transform of scale and this one is my Favorite one and as M suggest that it will allow us to scale or element so we can just specify the values do not provide two or 200 or stuff like that so in this case if you want to scale our element from zero to one maybe so we can just specify one and if you sell that and okay so the one was the default one so if you just write like two and sve that it will now just scale it two right here

okay so the default size we provide like 200 and 200 and it will now convert It to maybe like 400 width and 400 height and it will now just scale or element on two so if you just write like maybe four and if you sa that and boom okay so it will now scale it like four time of the current size so we can just use like one or we can also just decrease that if you want to so we can use like 0.5 and save there and boom it will now just decrease it 0.2

and it will now decrease it how however we want so it's kind of like a smaller container Box right there and this is how we can increase or decrease our element by using a transform of scale value and we can also provide a value for xaxis and y axis so now let's just uh put our five in there back and if you just put a comma and if you put one and sve that so this value will be for the xaxis and this value will be for the Y AIS so anything we put inside the

like two and if we s that so it'll just increase the size of the x-axis if we Just set this one to two and if we sell there so it will now just increase the size of the height like on the Y AIS so this is how you can play around with that if you want to and I just show you that so now the next value which you're are going to be learning about is something called a skew and it will just kind of uh tell Tech put that in words like a skew what

is you a skew so you can just PR for degrees in there and if you s that so it'll just skew it up like So if you just put like maybe 20 value and it will just skew it to the x-axis and we can also put a y axis so if you just save that so this for x-axis we can just use like negative value and it will now just totally convert the shape off there so this is how we can use a transform property and transform property can do more than that but this is

just introduction of that so in this section we just learn about a transform property and its different values so we Learn about Translate Y translate X translate and rotate scale and skew okay so I guess that would be it for this section about the transformation and now let's just learn about transition in CSS so for that I'm going to remove everything from my container and I want to also remove these Heights and widths or you know I'm going to delete this container just leave this height and display of flex and stuff I'm going to go

to my HTML and I want to change this D from diff to Anchor tag it will go to nowhere and it will just say like click me and if you save that and we will just get or click me button at the center of our viewport so now let's just start working on our container so first of all let me just select my container and inside that container we are going to be selecting our tag and now let's just remove that text decoration of none uh okay not text line but text decoration of none now

let me just provide a border Of 2 pixel uh solid totally red and I'm going to also provide a padding of 10 pixel and 20 pixel 10 pixel for the top and bottom 20 pixel for the left and right color will be totally Brown uh Brown and now let's just work on our transitioning so transition I guess I spell it correctly so what in the word is even a transition even mean so CSS transition allow you to change property Valu smoothly or a given duration so you have to specify some sort of a duration So

we can change whatever you want totally smoothly so I'm going to just show you that and then you'll get to know what is that transitioning you mean so now if you want to work with a transition first of all we have to change something so if you want to change something so for that we can work with or how uh to selector as we learned the beginning of the video so if you just write like anchor tag and how and now let's just use like a BG of color And maybe it will be set to

like brown in this case and now let's just provide a color of only white so if you save that and now if I have my mouse over to it so here you can see it's now changing its color very quickly right here so if I have my mouse order here so it's now changing this color in a second or maybe a half a second and stuff like that so if you want a little bit of transition to happen like if I hover my mouse over to it so we want a little bit of delay In

there so we can do that by using a transition property so now let's just start working on our transition property so for that we can just use a transition property like a transition property simply means like what do you want to change okay so we want to change everything so now in this case it will accept this background color property and also this color property so if you just provide like border radius or any other property so it will also accept That and if you want to accept like a specific things so for that you

can just provide the name of the property in this case if I just write like background color so we can also work with that so if you want a transition to just only happen for a color so we can also specify a color so now in this case I'm going to put everything to all and now the next thing which you are going to be learning about is something called transition duration property and as the Name suggested it will just wait for that much duration we provide right there so in this case we are going

to be using like 1 second and now finally we are going to be using another property called transition timing function I know this property is a little bit long but there are a lot of transition timing function out there but in this specific video we are going to be using something called e uh out maybe and now if you s file and now if I hover my mouse over to It and here you can see this transition if I hover my mouse over to it so a few things happening first of all the background is

changing and also the text color is also changing and that's because we put this background property of all to all of so that's why if you have a mouse over to it so everything is taking a little bit of time and everything is taking a little bit of time that's because of this transition duration property okay so if you set That to like 2 second maybe so if you save there so now if I H my mouse over to it so it will now take 2 seconds to apply that kind of a transition to it

okay and then we have a transition uh timing function and we have different kind of values for that which we are not going to be getting into you because it will just waste your time and you can explore like countless properties and I guess somebody made a whole website about transition timing function let me Just check that real quick uh transition timing function uh website so I'm going to just search for that okay so we have W3 School M developer and then we have the art of web transition timing function CSS tricks blog okay so

Cube Blazer I guess that's the website I was looking for all right so here you you can see we have different kind of transition right here that you can play around with that so um let's just see here is the code you can copy that and You can put it in your CSS file I didn't play around with this website but I knew there's a website who allows us to put a transition so we have different kind of transition right here we have a ease we have a linear is in is out is in and

out so now let's just use that real quick so instead of using ISE uh in and out like ease out we just provide there we can just use like e in and we set that to like one and if you save that so that transition will apply in that fashion so If you have our Mouse order so first of all it's just a little bit slow and so then it went through a bit fast so now let's just copy uh okay so now let me just show that linear one real quickly instead of using ease

in and out so we can just use a linear and if you sell that and if you hold a mouse over to it so here you can see it will now that transition will now apply linearly so we can play around with this proper if you want to maybe like if you select this Kind of transition like so and I'm going to just click on the copy it will now copy that code to our clipboard and if you just pass it right here so it will now use this cubic Bas year uh function right here

and it will just provide a transition timing function on that so if you save that and now if you have our Mouse over to it so here you can see something weird is happening first of all if I just hold my mouse over to it so it will take a little bit of time and Then it will just push up all of the content at once right here okay so you can play around with that if you want to like maybe I'm going to select everything like so and I'm going to make that a bit

slower at the beginning and then we want that to happen a bit fast so we can play around with that like so I'm going to click on this property or this copy button and then let's just replace it right here and if you save that and now if you have our Mouse over To it so it's taking a bit of time and then it will just blink it up so you can play around with these properties if you want to but my job was to show you all of that stuff and now you can play

around with that if you want to so first of all if you want to use a transition for that you need some sort of a changing things so in this case we are going to be changing or things by using a how uh sudo selector so then we can use a transition properties so we can Just change the transition of one thing or we can change everything by using a all value then we can also specify a duration for our transition like the this will be the time of our transition and we can also specify

different kind of function for our transition so now we are totally done with the transition side of this video now let's just learn about finally something called animation in CSS and we are not going to be building awesome animation but I just Kind of want to show is that how you can create animation just a basic syntax of Animation so now if you want to learn about animation so I'm going to remove this cing from here and I'm going to also remove all of this transition stuff from there there and you know what I'm going

to also remove this container and anchor tag and also remove that anchor tag from there and I'm going to replace it with div and now we are totally good to go for now all right so now let's Just select our container real quick and then everything inside that container like all of the div which are currently available inside that container let's just give a width of like uh let's just Pro like 300 pixel of the width and let's just duplicate that to the height as well and I'm going to give him a background color of

like dark blue color and now in here we are going to be starting or animation so before we start animation Now let's just learn that what in the world is an animation so animation lets an element gradually change from one style to another this is what animation is you can change as many CSS properties you want as many time you want in a key frame so what are key frames so anytime you want to create your animation so for that you need to work on a key frames so we are going to be using our

animation stuff or animation property in here but first of all we have to create our key Frames for that I'm going to zoom in a bit and now if you want to create an animation first of all you're going to be writing add symbol and then key frame okay so if you just write a key frames in there then provide a name for your animation so in this case I'm going to just give a name of like uh I don't know I don't have any animation in mind so I'm going to just give him like

a random word like in and out and you can give any name you like you can give him hosan Animation if you want to hen is my name by the way and so here we can specify that from where our animation should start so we can just write like a 0% or we can also use like uh to and from keyword okay so you can also learn about that if you want to but we are going to be just using like 0% so animation will start from 0% and you know what what should we do

in this 0% I'm going to just use like maybe a transform of scale something I'm not Sure what I'm building right now but I'm just showing you what animation is and how to work with that if my animation was horrible or and awful you can create your own animation awesome but mine will be awful so we can work with like 0% 25% 10% 20% th% however you like but in my case I'm going to just go from 0 to 25 to 50 okay and I can also go like other direction if I want to so

this one will be this one is the first frame right here and this one is now the second Frame and you can create as many frame as you want so I'm going to just use like transform in this case and I'm going to just provide a scale of 0.2 and then background color I'm going to change the background color to be like uh I don't know I'm going to write like teal maybe in this case and now let's just use a transform of skew and will just SK up or animation I know this animation will

be totally awful and now let's just use 50% in there and now Let's just use background color to be like uh I don't know uh totally blue in this case like in this Frame and now let's just use our transform and ski it up one more time to the 40° and Border uh radius will be 50% so if you just use that now if you sell our file and here let me just say that now we totally create our animation right here so this is how we can create our animation so how can we use

this animation so now if you want to use our Animation so first of all we have to provide the animation animation name so what is the name of your animation in this case my animation name is this in and out so I'm going to just copy that and I'm going to paste it right here what else do we have to do how much time or animation would take so we are going to be just specifying like animation duration of 4 second would be fine so I guess that would be fine so I'm going to just

save that for now and here you can See my animation it's horrible I know uh you can like create crazy kind of Animation if you want to but in my case uh I just create this 041 so I'm going to just refresh my browser and by default everything looks like that if you just refresh it one more time so this is how we can play around with our animations so instead of providing like four second of duration we can also make it faster by just writing like two second and if you just refresh that and

Our animation will happen in 2 second we can also write like maybe 10 seconds so if you save that and now our animation will just happen slightly slow you can just play around with these properties if you want to so now the next property which you are going to be learning about in this section is something called animation iteration count and it allows us to run or animation the amount of time you want so you're going to be just using like Animation uh animation iteration oh my goodness anation iteration and count all right so this

is what I meant and here let's suppose if you just specify like two times and if you sell that so it will just run our animation the first time so let's just save that and refresh so this is the first time of running our animation and this is the second time and it will just stop okay so we can specify how many time we want like we Can provide five thousand how many we want and so if you want to run this animation like infinitely so for that we can just use like infinite right here

so if you just specify infinite and save it so this animation will just run again again again and again like infinite time okay so this animation will run like infinite time and this is how we use animation iteration count all right so now the final property which we are going to be learning about is something Called animation animation uh timing function oh my goodness let me just write this timing function real quickly and here we can just use that is in is out is U whatever is in and out we can also use that linear

if you want to but in this case we are going to be just working on ease in and if we sell that so your animation will happen slowly and it will just um go fast like so and then we can also just play around with this cubic BSA if you want to and now let me just pass that in here and if you s that and boom boom so animation will happen like strangely we can work with that cubic B here a little bit more if you want to and I will never recommend you to

spend a lot of your time because you're not going to be spending a lot of your time of k b in a real world project so I'm going to just past that right here and if you saell that and this is how it will look like first of all start very Quickly and then slow it down like so or slow down very quickly and fast I don't know what's happening in this animation and by the way it's a awful animation which I created you can create awesome animation for your project but now we are totally

done with animation and everything so I guess the final Topic in this course is left which is called media queries and which we are going to be talking about next all right guys so if you're already Here then congratulation you're now at the end of this course so now there is just one topic left which is called a media queries which you're are going to be learning in this section so now what in the world is a media queries so so media query allows us to provide different kind of styling for different devices depend on

their featur so what do I mean by all of that Gib I just said you know what I'm going to just go to the W3 landing page right here and then I want you to just right click on somewhere and then click on this inspect area so if you do that here you would find this uh tablet and this iPhone kind of a Toggler so if you just click on that so it will now allow you to check this side on a different kind of screen sizes right here okay so we can just check for

I don't know like for iPhone SE and this is how it will look like on this iPhone this is how it will look like on iPhone XR and a lot of different Kind of devices we have right here we can check out for a lot of different kind of devices and this W3 side is totally responsive so that's why we are seeing like everything in just one page right here so if this side was not responsive then we would just see like a clunky weird thing okay and by the way you never found any website

online which is like like not responsive nowadays nowadays if you want to push your s into Google and stuff so you have to make it Responsive so that it will work on a different kind of uh screen sizes like mobile tablet uh iPhone and a lot of different kind of devices so you can just click on that and click on this responsiveness right here and here it will allow you to just check it on a different kind of screen size right here here you can see we have different kind of uh icons like a tutorial

references and exercise if you make that smaller so that will be Gone so we have menu right here and so on and so for so this you can check it out different kind of websites and different kind of things by using just these uh developer tools so this is what we are going to be learning we are going to be making our sites totally responsive you can either make your website responsive by using a media queries and you can make your site responsive by using Advanced units like rim and percentages signs and stuff like That

so what do I have to do I'm going to remove everything which I have inside my HTML file and I'm going to remove everything which I have inside my CSS file for this tutorial all right so what I'm going to do is that I'm going to just hold shift and then I want to just hit one so it long uses this explanation mark and now if you click on that so here you can see it long uses metadata and all of the structure of HTML so I'm going to just change the name to like CSS

right here and you should do the same so the it will us that metadata right here so if you just make that a bit smaller and now what do we have to do so for this section I'm going to just write H1 of media queries so now if you s that so here you can see all right so something went wrong okay so it's working let's just remove this media query okay so it's working all right so now let's jump into our CSS style sheet right here and now let's just start Working on a media

queries so first of all I'm going to just write a body of background color and it will be now totally set to like Coral maybe and I'm going to also you know I'm not going to change any font style and stuff so this is how currently things looks like okay we should also have to link or css file as well and now let's just uh provide that link and now we totally link and if you s file and this is how currently things Looks like now if you want to provide a different kind of media

queries for a different kind of screen sizes so for that first of all you just have to write a add symol and will you you a l not a lot of properties right here you don't have to worry about any of them for now you just have to either click on that or you can write it manually if you want to but in my case I'm going to just click on this media and screen right here so what is that even mean like a media Screen so this means that we are going to be writing

a lot of word styling inside there and this styling will be only for the screen size we can also write a different kind of styling for a print which I'm going to show you just in a second so you know what let's just start working by selecting our body right here so if you now select or body let's just write a BG like a background color and now let's just change the color to be like blue and now if you Save that so what's happening right here we now just change this coral color to this

blue color right here so why is that that's because we use this media of screen right here and we can specify a different kind of Medias for a different kind of viewports or a different kind of screen sizes if you want to so to do that first of all we just have to write and in here so we just write and then write opening parenthesis and closing parenthesis and now inside these Parentheses then specify the vboard width right here so let's just write like uh I don't know I'm going to just write like Max width

of uh 1,000 pixel right here so if you just write 1,000 pixel so what is all of that media query even mean so this media query means that we are writing some style like this body in this case we are writing some style for the screen size and that screen size which Maximum withth is like th000 pixels now if you sa our file and here You can see we are now get back to our coral color right here so where is that blue color which we wrote inside this media queries if you just um make

our screen size a bit like smaller like so so here you can see don't log uses their blue color right here why is that that's because our current viewport is maximum than th000 pixel let me just show you how is that I'm going to make that a bit bigger so here you can see L uses that coral color right here I'm going to Right click on that and then just click on this inspect area and I'm going to set that to the bottom and I want you to just focus on this area so if I

just either increase it or decrease it so here you can see there screen sizes and I guess you cannot see that in a recording but if you're writing this code for yourself so then you can see it a bit better anyway so if you just make that a bit bigger so here you can see we get like 1,054 pixel right there so if you just make it a bit smaller so here you can see that media query does not match because here we just show or media queries I mean like we want to provide these

styling once our media query hit like a maximum width is like th000 pixel so if you just uh make that a bit smaller so here you can see like we have like uh 9,000 And1 uh not not 9,000 but 910 pixel so what media query did match so here you can see it don't not change The color to Blue and you not just limited to change the body color you can do a lot sort of stuff with there like you can use a display property and the background color the font sizing the transformation animation and

all kind of that good stuff you just learn in this video so you're not just limited to background color and you're also not just limited to write like a th pixel right here you can write uh I don't know you can write a media query for like 700 Pixel if you want to so now if you s file and we not getting that coral color right here so if you just make that to 700 pixels if you hit that media query okay so here you can see what maximum withth is now like 700 pixel or

below that so here you can see it just gives us that background color of blue right here and we can write different kind of media queries if you want to so I'm going to just change that to like th000 pixel and now let me just write a new Media query so let me just write media query 4 like a different kind of screen size if you want to you know what I'm going to do I'm going to just write a media query 4 let me just write a Max withth and you can also write a

minwidth if you want So Max width just means like the maximum width and minan width just simply means like the minimum width okay so we can just write like I don't know 700 pixel in here and now let's just get our body and you know what in this case I'm going to change the color to be like a steel blue and I'm going to also change the font size uh to be like I don't know font size to be uh five R would be fine so you can see the difference if you sell file and

here you can see it now first of all change the background color to be that steel blue and it will also increase the font size to be five frames right here that's because our media query match so we are now getting these styling so if you just Make that a bit smaller and here you can see the font size is normal and the background color is changed to totally blue and you know what these colors are kind of the same so I'm going to just change that to Crimson and if you have that and now

if you just make that a bit smaller so here you can see now the difference okay so this is how you can provide different kind of style and different kind of media queries I'm going to just zoom out a bit so you guys Can see everything a bit clear and this one is the First Media query this one is the second media query and we can just go below there if you want to just write a media in here for the screen size and let's just write and symbol and Max width will be like I

don't know maybe for 400 pixel but you know what 400 is just a little bit smaller I'm going to just go with a 500 pixel and what I'm going to do I'm going to just um you know what I'm going to just WR select This H1 right now I'm going to select that H1 and I'm going to just provide like a border or of two pixel or not two pixel but four pixel dotted and then I don't know um what should I give a color to be uh I don't know golden would be fine or

deep pink would be fine in this case if you save that and if you just make that a screen size a bit smaller okay so it's not showing up in here that's because our screen size is uh huge let's just write a font size of Maybe one rim and sell file and now let me just make that a bit bigger okay and let's just click on these three dots or you know what not we are not going to be clicking on these three dots we going to be clicking on this kind of a screen so

I'm going to just click on that make it a bit smaller and here you can okay you cannot see that difference I'm going to change that to maybe blue and if you save that and here you can see now where H1 have the border of Four pixel dotted Uh blue uh kind of a um border right here here you can see the difference and I guess you cannot see that you know what I'm going to change the background to be something else let's just write a Bor and change the background to be something else like

I don't know um you know I'm going to go with a totally white color why not so I'm going to just go with a totally white colored sell file and now you can see the difference right here okay so this is how you can Provide a lot of different kind of media queries and by the way we are not totally done with a media queries there's a lot of things you can do by using a media queries but but this was just kind of a teste so that you can work on your projects and I'm

going to make a huge uh guide on media queries but I cannot promise you that right now but I'm not sure but by the time you are watching this video I guess I will already provide the video but if I Didn't provide it already so then you have to wait for the a little bit anyway so we are now totally done with the media queries and now let's jump into building a projects or you know what first of all we have to learn uh um uh what do we call it image or you know we

are not going to be providing any image I'm not going to provide any image I'm not sure I will or I will not if the next topics was on about image so congratulation you got a Bonus image are not related to HTML and CSS it's kind of a other topic to learn if you didn't see the image section after this well then you have to check out my video I have entire like I don't know half an hour video on image you can learn a lot crazy stuff about image on that video you can check

it out if you want to uh and I guess I'm going to go into the projects so I'll see you in the projects I don't want to waste your time and mine as Well all right so now that we learned a lot of shortcuts in visual story quarter so the next thing which you have to learn is something called image in visual story corders so what in the world are image first of all I'm going to remove everything from here I'm going to make this screen size a bit bigger so you guys can see everything

a bit better so what in the world are imits in Visual Studio coders so imits are abbreviated code that follow the same Convention as HTML and CSS and we can use that convention like we can just write like I don't know explanation mark and then hit Tab and it will just generate this stuff for us so it allows us to write our code very very quickly so in this section we are going to be learning a lot about image and I'm going to show you different kind of image in HTML and also in CSS so

let's just start from the first one which is a boiler played image so what is a boiler played image first Of all if you want to get a HTML structure in visual story CER so that you don't have to write like HTML like HTML opening tag then the head opening tag and closing tag then the uh I don't know like a title opening tag and closing tag then the body so you don't have to waste your time in that and by the way I also forgot to mention like you can also provide a metad datas

right here you can also link it with your CSS file but it will waste a lot of your Time so what's the best way well we can use something called image so so we can get the same result by using our image so the first way is to just write explanation mark and hit tab so how can you get this explanation mark I want you to just hold shift and hit one so it will now give you that explanation mark right here so if you are hitting Tab and it's not working so then you can

hold control and hit space and then you can hit enter so here you can see it will Now give you that HTML structure right here and then you can hit Tab and hit tab one more time and you can change the title to like uh I don't know my own name like Huzan web dev and then you can hit Tab and then you can write your code like so okay so this is the first way we can get our HTML structure so what's the next way the next way is to just write D or c

for Doc type HTML and now if I hit Tab and here you can see it will now also gives us that same HTML structure Right here okay so both of them will work the same so you can either choose like dog or you can also just choose like explanation mark and both of them will work the same all right so let me just remove this metad datas from here because I don't need it right here okay so what else do you have to do so now let me just show you a shortcut for linking with

CSS so instead of writing like link and then real style shet and stuff like that you can use image so you Just have to write like l i n k and then hit so here you can see it will now gives us that link and it will also gives us that relationship with stylesheet and we have HF and we can just hit control and space and then we can link it with any file we want okay so that was the first so you just have to write link and hit Tab and here you can see

it will just fill it out for you I mean like it will just give the boiler player for you and you can also choose Like link and then colon and then CSS and now if you hit Tab and here you can see it will also fill it up with this tile. CS this is file as well and now here if I just sve my file so everything will work but if my file name is changed to like something else like Main and if I here enter so then it will not work it will give you

that style. CSS but it will not work like it will not choose this m CSS by default so I want you to notice that one as well so I'm going to Set that to style one more time and there we go okay so that was it about a link and also the link colon CSS and now if you want to uh link it with faon like if you want to provide some sort of a favon for your project so you can also just write link and then colon and then fav icon okay and now if

you hit Tab and here you can see it will not give you all of these stuff which you need for a fav icon so we have a link then we have a relationship with shortcut icon and Then we have icon and then we have Ty which will be now set to image and X icon so this is how it looks like and you can just provide your uh what do we call it you can provide your fav con link right here I don't have any faon links so sorry I can't show you that right now

I'm going to remove it from now anyways so that was how you can link it with your CSS and now let's just learn about styling so now if you want to provide internal Styles so you don't Have to WR like less than sign and then close it right here and usual recorder will also help you with that but you can also use image for that you just have to write style and hit tab okay so here you can see it just Auto completed for you then you can choose anything you want and then you can

provide your own styling to it okay so this is how you can also provide internal styling and now let's just learn about how we can link it with our Javascript file so we Can just use like script and then colon is RC for source and if you hit Tab and here you can see then we can use control space and then we can choose our Javascript file right here okay so that was just a basics of image so I'm going to remove all of that from here and now let's just learn about the basic image

so we just learned about a boiler plate image so now let's just learn about basic image so instead of just writing like uh less than sign and then H1 and Then it will just close it up for you and then also instead of just writing like less than sign and section and all of that and then it then you have to close it so instead of doing all of that you can just use your image so just write H1 and hit Tab and now here you can see it will now just fill it out for

you okay so you can use H2 H3 and hit tab H4 and hit tab H5 and hit tab H6 and hit Tab and here you can see it we just fill it out for you you don't have to Write like less than sign and then H1 and then close it right here you don't have to do any of that stuff okay you are now using Emit and emit will give you a super power and you can also just omit by just writing like a whole section you can also omit that too just like SEC and

not SEC but SEC and now if you hit Tab and now here you can see it will just Auto complet it for you and then and you can also just write HDR and then hit Tab and here you can See it will now uses header and you can also just write art and hit Tab and it will just give you article and you can also just write like f o t and hit Tab and here you can see it will also give you the same results so you can also just write like um NV NV

is a symbol so you just have right now and then will work then you hit tab all hit tab anchor tag hit tab and here you can see you just have to write the first word and hit tab it will just auto complete it For you okay so that was just a basics of image so now let's just learn about uh CSS selector image so what do I mean by that so if youve previously work with CSS so you already know how IDE Works how the classes work and how you can select that so if

I ask you like how can you select uh this section by ID in CSS well you would just say like uh you will just go to your stylesheet and you just provide a pound symbol and what was that the section so you'll just Write a section and then you can provide different kind of styles to it so if you already work with CSS so this is how you can use that like first of all you just write a pound symbol and then the section name and then you can specify your colors and styling okay so

now if you want to provide ID to something so you don't have to just write like section then close it then hit space and then provide ID and then just give him some sort of ID so it will a lot of your Time so instead you can just write the element name like section or SEC SEC and then write a pound symol and then you can just give a name of whatever you want and hit Tab and first of all it will just autoc complete your section or whatever the element name was and it will

also give you that ID and then it will also fill it out with the name you specified right here so if you don't want to provide any elements whatsoever so you can also just use a pound symbol I mean like yeah pound symbol and then you can just give any kind of ID name you want like I don't know Apple would be fine and if I hit Tab and here you can see it by default gives us a d and it will fill it out with the ID of Apple okay so this is how we

can provide IDs to something and now if I ask you to select this article uh how can you select this article uh in CSS by using a class so you would say like first of all we have to give him some sort of a class To it like CLS name and then if you want to select it in C so so first of all you just write a period or dot whatever you want to call it and then the class name you you'll select that and then you can specify your styling and whatsoever right here

so the same will go to the HTML so you don't have to write article and then just write like article and then write a space and then just write a class and then you can give whatever the class name is so instead of Doing all of that like instead of writing article then class and then yeah spacing as well so instead of doing all of that you just have to write like a r t and then write a period and then you can give any kind of class name you want and then hit Tab and

here you can see it will just fill it out as article it will give you the class and the class name will be fill it out with whatever you provide right here so you can also just give my own name and here you can see it Will just fill it out for you and you're not just limited right article but you can just write like section and then just give some sort of a class name and it will just give you that class name you can write a navigation with the class of like I don't

know logo you can also just write UL of list and it will just fill it out for you you just have to write first of all the element name and then the period and then the class name okay so this is the basic syntax of So I'm going to remove all of that from here so now they we learn about how you can select something by ID and how you can select something by classes and we already learned about how you can select something by the element name so you just have to write H1 and

boom okay so that was that now let's just learn about nesting in image so what do I mean by nesting so in some situation you would have a lot of nesting like you would have a header and inside this Header you would have some sort of a navigation and inside that navigation you will have a UL inside that UL you will have a lii inside that lii you will have or your anchor tag and this structure will look like this right here so instead of writing like herard then navigation then UL then lii then anchor

tag instead of writing all of that so for that you can use image so how can you write that well so you just have to write header or you can also shorten it To like HDR if you want to and let's just see what was the next one the next one was NV so if you want to provide nested element inside that header so you would just write a greater than sign and then you can specify another element so in this case I'm going to just write nav and now if you want to provide another

one so you can also just hit uh greater than sign and then you you can proide another one Like Ur let me just give you a quick example of that and then I'm Going to write that header and stuff like that so first of all let me just write HDR and inside this HDR if I want a nav so I'm going to just write gr and sign and then nav and if I hit Tab and here you can see it will now gives us header opening tag header closing tag and nav opening tag and nav

closing tag so this is how you can work with that so I'm going to remove that and I'm going to write an image for all of these codings so what do I have to do I'm Going to write HDR for header inside this header I want navigation inside that navigation I want my UL inside that UL I want my li and inside this lii I want my anchor tag okay so now here you can see the preview of that coding right here so if I just make it a bit smaller so first of all we

have a header then we have our navigation then we have our ul and inside this UL we have our Ali and inside this Li we just have one anchor tag right here and now if I hit control Space and hit either either click on it or hit Tab and here you can see now gives us the same result like this one so first of all we have our header then we have our navigation then we have our UL then Li and then anchor tag okay so did you saw how simple that was you don't have

to write complex things you just have to write HDR and then gra then sign and nested element then nested element one more time and so on and so forth so that was it about nesting let Me just remove this coding from here and now let's just learn about multiply if you want to repeat some code like a lot of time in HTML so instead of writing like uh let me just give you example of H1 so instead of writing like H1 of hello you already know like if you want to duplicate this you can use

a few shortcuts or if you don't want to use a shortcuts so you can just hit contrl C and then control V so it will just past it right here a lot of time so it will Waste a lot of our time so instead of doing all of that uh you can also use that same shortcut like art and then share and down arrow so it will also duplicate for you but instead of doing all of that you can just use a image so you just have to WR H1 like the element name and then

the opening curly brace and then the closing curly brace and inside these curly braces we are going to be writing our text so anything we write inside there it will be your text So I'm going to just write hello and now if you want this H1 inside this H1 we have a Hello if I want this result to be like I don't know to render like 50% so if I just write 50 and now if I hit tab so now here you can see we have H1 with the text of hello 50 right here so

now here you can see if I just cut it from here I'm going to remove everything and I'm going to pass it right here and now here you can see we have this H1 from one through uh 50 right here so did you Saw how powerful that was I'm going to remove these H1s from here we can also just write like uh let me just give you example of uh UL Allin very quickly so if you want something to repeat like a lot of time so let's suppose we have like UL inside this UL I

have L right here and I want this L to be like 50 so if I just write 50 and hit tab so here you can see first of all it will gives us ul and inside this UL we would have Li 50s right here like 50 times right Here so I'm going to remove this coding from here and I'm going to also remove this UL from here as well now let me just give you example of binding so let me just write your code like we have first of all navigation inside this navigation we have

a UL inside this UL we have our lii and inside this Al we have our anchor tag right here now if you want to repeat like uh this Ali and this anchor tag like a lot of times so first of all if I just write like let me Just give example of the if I just write like 10 right here and if I hit Tab and here you can see it will now gives us 10 anchor tags right here but if you also want to repeat this uh Alo with it so you you would just

wrap there first of all you just have to write opening parenthesis and then the closing parenthesis okay so this one will be the opening parenthesis and this one will be the closing parenthesis and inside these parentheses we put our elements right Here so anything we put inside there then you can use that expression with it so if I hit control space and if I hit enter and now here you can see we are now getting these allo and that anchor tag like 10 times right here if I just undo it one more time let's suppose

if we also want this UL to be print it like 10 times so I'm going to cut that from here I'm going to pass it right here and control space and hit enter and now here you can see it will give us UL Li anchor Tag UL Li anchor tag and so on and so forth okay so I'm going to remove that so we learned about a boiler Play Image we also learn about a basic image we also learn about CSS selector image we also learned about nesting multiply binding so now let's just learn about

siblings so sometime you would want to proide a sibling inside your image so how can you go about doing that so let me just write some sort of a code so if you want to write a sibling so for that You're going to be using the plus symbol okay so you know what I'm going to just write H1 plus H2 plus H3 plus H4 plus H5 and also plus H6 and now if I hit Tab and here you can see it will now gives us H1 and H1 will have the sibling of H2 H2 will

have the sibling of H3 and so on and so forth Okay so then you can just provide like I don't know heading uh one and tab heading two and tab and so on and so forth okay the heading the I'm going to remove that from here so now Let me just write HDR like first of all you have a header and you want to provide a sibling of navigation to it and then you hit enter so here you can see it will now use us that header and The Sibling will be navigation word here okay

so I'm going to remove that and now let me just give you a real word example of that so we have a section inside that section we have our navigation inside the navigation we have H1 with a class of logo and we want to provide the text To be like uh hello and now if you want to provide a sibling of paragraph to it so we can just write p and then with a class of info and then we can specify our text right here and now if I hit control space and hit enter and

now here you can see it will first of all gives us a section inside this section we have our navigation inside this navigation we have a H1 with a class of logo with a text of hello and then we have our paragraph with the class of info and the Text of text right here I mean like the text of text yeah that's what I meant so you can use crazy stuff like that if you want to and I even build a project by just using image I didn't write like uh H1 and H2 and so

on and so forth I just use image and I built a whole HTML and CSS project by using that anyways so that was a sibling now let me just talk to you about how you can go up a level so in some cases you want to go up a level in image so you just have like let Me just give example like uh you are now inside a header inside that header we have a navigation inside that navigation you would want like U and now you want to go up a level so you can just

write a carrot symbol right here this is known as a carrot symbol and then you can just write like I don't know H1 with a class of uh I don't know logo would be fine and now if I hit tab so here you can see we have header inside this header we have our navigation inside this Navigation we have a ul and then outside from this navigation we have this H1 with a class of logo right here so this how you can go up level so now let me just give you example of that very

quickly so first of all we will just write like HDR or header and inside that header we want our navigation inside that navigation we want UL inside that UL we want our Alo inside that allo we want our anchor tag and we want to go up level and we want to write H1 with the Class of not class but with a text of text and now if I hit control space and enter and here you can see we have header navigation UL anchor tag and we go up a level and then here you can see

we have our H1 right here I'm going to remove that very quickly and that was it about how you can go up a level now let me just talk to you about numbering so we can also work with numbering in image so what do I mean by numbering IMS let me just give you example of that so we Have H1 right here and if I want to render numbered so I'm going to just write a dollar sign and hit control space and enter and here you can see we have one right here so now if

I want to repeat it like 10 times so I'm going to just write this s symbol and then 10 and if I hit Tab and here you can see it will us us all of these numbers starting from one through 10 right here so these numbers can be very useful so for that you just have to write this pound symbol And if you want to write like z0 so you can also do that so you just have to write H1 and then like dollar sign dollar sign and then let's suppose if you want to repeat

it like I don't know uh five time maybe and if you hit Tab and here you can see it l us 01 02 and so on and so forth so I'm going to remove that very quickly and now let me just show you one another example by using number you can even use it with element names if you want to so we have Like H1 and then I'm going to use a dollar sign and then I'm going to write my text area and I'm going to also put my dollar sign in it and now let's

suppose if you want them to be like six so I'm going to just write six and hit Tab and here you can see we have H1 H2 H3 H4 H5 H6 and also the TT from H1 through H6 right here so did you feel the power of IMS and I know I show you a lot of IMS and you can also found a link in the description below which will Bring you to my gab repository and you can also get all of their cheat sheet from there if you want to all right so let me

just talk to you about a very useful feature of command pallet is especially in uh HTML files so let's suppose we have some sort of a header inside that header we have a navigation and now we have a UL inside there so now if you want to WRA this navigation in some sort of element so instead of doing like uh I don't know Writing a section and then cutting it from there and then pasting it right here and then providing your nesting in it instead of doing all of that process you just have to remove

this section from here remove that section and let me just undent it back or indented back undent okay let me just indent it back and then I'm going to first of all select this element and I'm going to just use a f so it will just open our Command pet right here and what do I Have to do I'm going to just write like uh W with abbreviation here you can see W with abbreviation so I'm going to click on that and then I have to just write some element right here so now I'm going

to just write section so here you can see it will just wrap it with Section right here and I can also just provide like I don't know some sort of a CLA to it so the class will be like uh I don't know wrapper would be fine and now if I hit enter so here you can see it Will just do it like that it will just do it very very quickly so that was just a very handy feature of uh what do we call it command pet inside HTML file so I'm going to remove

that and let's just write H1 let me just write H1 of hello and then we have some sort of an uh span and yeah inside this you know let me just write section and let me just write article inside that section article this one and now inside this Article we would have a section inside this section we would have or a side and now let's suppose if you want to wrap this aside with something else so we can just hit F1 and we can just write uh rra it with abbreviation and then we can just

write like anything we want so we can just uh wrap it with anchor tag with the Clause of nothing okay and now if I hit enter so here you can see it will just wrap it with this anchor tag and these things are very very useful in HTML file so now let me just put all of that together in one image so let me just write MN for the main then inside there man I want to write a section inside that section I want to write article inside that article I want to write header inside

that header I want my UL inside that UL I want my lii and inside that Li I want anchor tag and I want them to be uh I don't know maybe three times so I want to just repeat it three times and then I want to go Outside so I'm going to just write a carot symbol to go outside from there and then I'm going to just write a section one more time and inside this section we will have our H1 and I'm going to just write a text of like welcome in it and then

plus and then P for the paragraph and then I'm going to just put my Lam in it okay so if I hit control space and enter and now here you can see we have first of all let me just zoom out first of all we have our main Inside that main we have our section then article header ulli and then we have our section and then we have H1 with the text of welcome and then underneath this H1 we have our paragraph with the class not a class but with a text of L right here

so this is how you can use emits inside your projects and by the way I forgot to show you the CSS emit I already show you the HTML emits but I forgot to show the CSS image I very sorry about that so in CSS we don't Have built-in image so uh we can write our code a little bit faster but we don't have a built-in uh what do we call it image so I'm going to remove this coding from here and let me just write some sort of a selector right here and then let's suppose

if you want to provide a padding so you just have to write p and hit Tab and here you can see it will just autocomplete it for you and let's suppose if you want to provide some sort of a value inside their pading So you just write a p and like 10 or 20 and you can also specify the um what do you call it the unit if you want to and here you can see it will just provide that unit if you want to get a margin so you just have to write the first

letter of anything you want to write so I'm going to just write like margin like M and if I hit Tab and here you can see it will just autocomplete it for me and also uh if I just write like I don't know if I want to get a background color Or background image rather so I'm going to just write b g for background and then I am mg and if I hit Tab and here you can see it will now just autoc compl completed right here and we can also just write a color so

I'm going to just write BGC and if I hit tab it will just auto complete for me and it will even give me that totally white color so if you want to get a text color so we can just write C and hit Tab and here you can see it will now gives us that color And it will just fill it with this totally black color okay so if you've watched my uh HTML CSS course so you already know these stuff but if you down in case so here I'm showing you right here so if

you want to just write like uh I don't know uh display of flex so you just write DF and hit tab it will give you display of Flex if you want to get a display of grid so you just write DG and hit tab it will just write display grid for you if you want to Write display blocks so you just write DB and if you want to get like display in line so you just write Di and for this display in line so nothing special so if you want to get something so you just

write the first letter of it and hit Tab and it will just auto complete it for you okay so like colored so C hit tab background colored so BGC hit Tab and boom this is how the CSS emits work all right guys so welcome to your first project attach to this video you Will found a link to my gab repository and if you want to follow along with this project so you can use these images or you can use your own images if you want to so I just kind of want to mention that in

the first place so what do you have to do we going to start working on our first file so I'm going to just create a first file index.html now let's just create a new one which is style. CSS and now let me just make that a bit bigger and hide that other bar and Now we are totally good to go so what do we have to do first of all we are going to be just writing a doc type HTML and I'm going to change this to like a title to be like a coffee let's

just link it with our CSS file and I'm going to just hide this metadata from there and s file right click on it and open it with live server so don't open our project in a live server all right so now let's just start working on our navigation so I'm going to write a Nav in here I'm going to write a nav opening and closing tag and then I'm going to write like H1 off with the class of logo and I'm going to just put a logo in there I'm going to zoom out a bit

and here I'm going to write like a UL then Li and then anchor tag and I'm going to just uh write like I know maybe four of them I'm going to just put a four in there it will not go to anywhere so you just write like a home then about then it will go to the menu and then Finally we have our contact Section right here okay so now if you sell a file and I know currently things totally awful so now let's get into our CSS file and now let's just start working on

our styling so before we do first of all we would need a font to grab from a Google font so we are going to be using a font called play fire or play fa whatever you want to call it so to grab that first of all we have to go to our fonts. goole.com so if you go to this fonts. Goole.com then we can search for that font okay so my internet connection is totally awful in this video okay we have to wait for that so what I'm going to do I'm going to just remove

all of the styling which I have for my previous project and I'm going to just type like a play fire and display so okay so I just have to write a D in there and I'm going to choose this one because I guess we use this font uh yeah I'm going to just click on the first one The other one is a and now let's just select word 700 width right here so I'm going to just click on this 700 width plus then click on that click on this import you already learned all of that

stuff I don't have to rewise myself but I'm speaking I don't know why and what for because I have already teach you everything which you need to know to build this project but anyways I'm going to be talking and you have to listen to me or if you don't Want to listen to me so click on that mute button and you can listen to your favorite music while writing your code anyway so what do we have to do first of all let's just create a few variables I'm going to just create a variable for main

color and the main color we are going to be using is d e a b 5f so this is going to be our main color for this project and now the primary color we are going to be using is that uh three or one to e 2 e so this is going to be our Primary color for this project so if you save that now let's just also write our utility uh UTI i l Ty classes as well or styles to be precise I'm going to just write a buttons I'm going to just write a

class for a button first of all and now let's just provide a padding of 10 pixel to that button and also the 30 pixel bottom like 10 pixel will be for the top and bottom and 30 pixel will be for left and right and we are going to be using a background color of that main Color which we just declare and now let's just remove that border from all of these buttons and the cursor will be by default pointer all right so now let's just write a reset uh for ourselves so if you want to

write resets so it's not a crazy resets we just have to provide a pading of zero margin of zero and box sizing will be totally border box all right so now let's just get into to our body so what do we have to do I'm going to just um change the Background color to be like uh I don't know I'm going to write 100 e and then Zer F it's not o f it's zero if you sell file and this is how currently things looks like all right so now let's just work on our navigation

so I'm going to write our navigation start in here navigation start and now let's just start working on our navigation so I'm going to just select my navigation first of all write a display of flex in it justify cont Will be space around because we want these items to be like uh all around each other we don't want any spaces and stuff so I guess we do want a spaces that's why you just write space around in there so now we are going to be using align items off tot Center and now let's just write

a color to be totally Pure White font family will be totally send surf in this case and padding to the top I'm going to just give like padding uh top my goodness ping top will be 15 Pixels so now if you save that so now this is how currently things looks like now let's just select this Ali right now and provide a display of inline to it so I'm going to just select that um Aline right now and I'm going to just provide display of inline to so now let's just remove that ugly list style

of none so if you sell file and boom this how currently things looks like and now let's just select our anchor tag which is these anchor tags okay so now let's Just select that real quick uh I'm going to write like Li and then a we want to select all of the anchor tags which is inside the Li and we want to change the color of them to be like um let's just change the color to be like totally wi color and I'm going to also Prov text decoration of none because we also want to

remove this ugly line right there so I'm going to make that to 100% And margin to the left will be like 40 pixels so now if you sa that and this is how currently things looks like so you know what I forgot to include that how effects so now let's just also provide that how effect on it so if you how over to our uh anchor tag so what do we have to do we just have to provide a border bottom of two pixel solid of that kind of a d b five uh you know

we can use that primary color uh so if you save that and now if you have our Mouse overturn this is how Currently things looks like but we can also go a little bit better so I'm going to write like B bottom of like 10 pixel and now if you have over so this is how currently things looks like if you make it smaller like so so there to responsive by the way by not using a what do we call it a media queries so now we are totally done with our navigation someone just write

a comment for myself okay I can't get my comments uh NV end so this is the end For our navigation so now let's just start working on the header area so if you want to start working on our header area so for that we just have to write a header with a class of all header and inside this header we are going to be using H1 with the class of main headings okay so I'm going to just write like a start your day now let's just select our H1 off with the class of primary heading

and now let's just write with or Cofe so now let's just create our button Right here and with the class of uh oh my goodness BT b t n with a class of main BTN and now let's just write like shop now and now if you save that the button will have these classes that's because we write these classes inside or utility classes right here but the other content will not be styled by default because we don't write any styling for that so now let's just provide a styling for or header area so we are

going to be writing our header start in this case so What do we have to do first of all we just got to select our header first of all which is the header with a class of header as well so we now selecting that by using our classes so now what do we have to do first of all we want to attach some sort of a background to it so I'm going to remove that real quick and let's just write our URL select or images and I guess the image was um this one the last

one I guess so if you set that and yeah we cannot see That so now let's just make our uh positioning to the center so I'm going to just WR background position of to the center and I'm going to also provide a background size to be covered totally and I'm going to also provide a height of 100 VH to it and what we have to do we are going to be using that font which we grab real quick so I'm going to just copy this font family from there and copy there and pass it so

if that font is available use this font if that font Is not available then use use this serap one so if you sell them and now here you can see this not only at the center right here and now let's just use our font we already use a font family on there but it's not looking that much awesome so for that we have to Center there and stuff so we are going to be using a font we of totally normal and let's just write our uh Flex box in here let's just do our Flex boox

magic so if you want to make that like toally at the Center so for that we can use display of flex and now let's let's just use a flex direction to be totally column and now let's just try a justify content to be totally at the center align items will be also Center and now let's just write a color to be totally white and let's just write a position of relative to it we not going to be worrying about a responsiveness just right now but we will take care of that once we jump into the

end of this project so if you save There and now currently things looks like these I know it's awful so now let's just start working on our main headings right here like this one so now let's just select that main headings right now so this one is a position relative right here I'm going to set that to at the end so you guys can see everything if you're reading this code and now let's just provide a position on absolute on there and now let's just use a top it be like sound Rim I know for

a Fact that it will be required like a seven rim and now let's just use like font size of four rim and if you want to work with this image so you just have to figure out like how much of uh positioning I would need so in my case I just provide of sound of positioning and now let's just also do what do we call it that word spacing I'm going to provide 10 pixel of word spacing in each and I'm going to provide a margin bottom of minus 40 pixels so so if you sa

that And this is how the first one look like all right so now let's just work on our primary headings so that was for the main headings now let's just work on our primary headings so uh okay so it's heading or headings it's singular it's not plural okay I can't pronounce that plural anyways so now let's just write a position position of absolute right here and now let's just provide a bottom of for of Positioning and what else do we got to do we are going to be using the font size of for R we

want to increase the font size now let's just do the word spacing of 10 pixel in here now let's just provide a margin of bottom okay so we already write that style okay my bad my bad uh what do we have to do we have to select or yeah everything is cool but you know what I did mess up something right here so for uh main headings we have to write a Position of absolute we have to write a top and then font size we don't need these uh world world spacing on okay we do

need that but we don't need that margin bottom so if you save that and finally we just have toide the margin bottom right here like 40 pixel so KN you s there and this is how currently things looks like so now let's just take care of this button and then we are going to be at the good shape so uh what was the class we gave to that button Which is that main button so now let's just select that real quick so I'm going to select that main BTN and now let's just use a position

of absolute on and a bottom value will be two Rim padding we are going to be providing is like 10 pixel for the top and bottom and 30 pixel for the left and right and now let's just use that margin top of 20 pixel and now let's just change their background not bottom but just a background to be totally Transparent okay and now let's just use a background color of that main color which we already declared and the Border will be also none because we want to remove that border and cursor will be already pointer

you know what we don't need these properties I'm going to remove that because we already WR there and transform or translate it to the Y AIS and here we are going to be providing a positive value so if you save that and yeah it will excuse me it Will not push it to the bottom right here so this is this is how currently or header area looks like I know you really like their ha and now we are totally done with this header area right now so now let's just take care of that um or

story and all of that kind of stuff so what do we have to do here we are going to be doing is that first of all we going to be creating a section with the ID I'm going to just provide ID specifically or story okay so inside This ID we are going to be just using a div with a class of image container so this container will be for our image because we are going to be rendering our image inside that container so we are going to be using a IMG class for our image right

now okay so we are going to be using a display Flex on this one and this is our first item and now let's just write our next item which will be a section and content content and inside this section content we are going to be Using our title style first of all okay we need to write a style and now let's just write a 10 for the line so this is going to be your line and now let's just write H1 with the class of title and the title will be or story okay so now

we are totally done with this section now what else do we have to do underneath this div we are going to be just using a P with a class with no classes whatsoever so we going to be just writing a lurm ipsum of whatever the Text it gives us a s file and we can all see that because we have to provide a height for it so I'm going to just do that in a second first all let's just start working on or story section so I'm going to just select or Story by using a

ID selector I'm going to give him a height of 100 vs so that you guys have a little bit of space so that we can see everything a bit clear all right so that's for the height so now let's just write a margin of top of 15 percentage And now let's just use their display Flex because we want to Center everything and flex WRA in this case will be also W because we want our items to W for responsiveness reasons so let's just write a justify content property or space around let's just use align items

of Center in in this case as well so if you save that and yeah here you can see we have all of this text right here but we cannot see it clearly because for that We would need to provide a color and we don't want to do that right now so what else do we have to do we have to select this IMG right now and provide our image in it so we are going to be using IMG let's just give a width of like 400 pixel and also the height will be 400 pixel as

well so now let's just use our background uh of URL not a color so I'm going to just remove that and change it to like URL and we are going to be going to our images and now let's just select This image right here this second one and uh you already notice that I'm using uh remove BG which is a soft which allows us to remove the background from our images and stuff I'm going to show you that maybe I'm not sure but so if you just write a background position of totally Center and now

let's just use a background size of totally covered so not content but cover and if you sell that here you can see we have our Cup right here fill with t all right so now We have our image right here now the next thing which you have to do is that we have to start to styling this uh style um title style to be precise so I'm going to just get there real quick I'm going to write like a title and style and I'm going to just provide a display of flex on it and now

let's just use align items of list Center and you s that okay we cannot see that I don't know I guess I must up something in uh HTML I guess so we have our story then We have our image container then we have our image inside there then we have our section content then we have title style line tile and finally we forgot to include a button outside from this paragraph so we are going to do that just in a second I'm going to just put like a learn more in it and now if you

save that we will get or button right here all right so this is going to be it for the styling of that title now what else do we have to do we have to get a Specific title which is that title right here so now let's just get that and now let's use our font family uh oh my goodness it's not helping me I don't know okay I just order a Fong instead of a f f family will be that F family which you just copy of Play Fire display let's just search for that okay

this's the second one third one okay we have display yep there we go copy there and go to the end and past it in here save that and you Cannot see that real quick what else do we have to do we are going to be using a font size of 4M and we are going to be changing the color to be totally white and also the transformation will be like to translate to the xaxis so we are going to be using minus 100 pixels so if you save that and you cannot see that that much

clearly but you will see that just a second you know what I'm going to have to comment this line out okay okay so that's fine now let's Just start working on that line which we create right here so we have that span with a class of line now let's just select that real quick I'm going to select that line and provide a width of like 100 pixel and also the height will be two pixel uh yeah two pixel will be fine and now let's just use that background of totally white color and let's just use

not a background color but the transform of the translator to the Y AIS not a y AIS but the x-axis and now let's just use 120 pixel and if you sell that and this is how our line looks like but you cannot see that right away you'll see that just in a second now let's just start working on our paragraph so our paragraph is looking totally awful and now let's just style theit so what we have to do we have to first of all select our section content which is that section uh content let me

just grab that I guess I misspelled it in my CSS grab That and past it in here all right so now let's just select our paragraph right here oh my goodness what's wrong in my keyboard let's just select that paragraph in there and now let's just provide a Max withd of like 500 pixel in this case and the color will be totally white and also I'm going to use a font family of sensor in this case we don't need that play Fire display or play fa display line height will be 20 pixel and margin will

be 20 pixel for the top and Bottom and zero for the left and right and now if you sa that and yeah this is how it looks like so we are now totally done with this section as well so you can increase or decrease the sizes if you want to and this is all line this is our story and this is our ha area this is our or story area right here so you can play around with the styling but uh I guess that would be fine for me and I wrote a comment for myself

I guess or de and I you have a man headings then we Start working on our story but I forgot to write a comment for myself so I'm going to just write like or Story start I'll just go to the end and here I'm going to just write uh or story end okay so now let's just work on our new section which is called that U coffee container section so now let's just work on there real quick so inside my HTML outside from this section what do we have to do we have to create a

new section with the class of coffee Container container I know it's long but you have to remember that now inside this coffee container we just have to write a Content section and inside this content section what do we have to do we are going to first of all writing our title style right here inside that we are going to be using new div with a class of title two this is going to be our second title and now inside this title two we are going to be writing like a perfect place and then BR for

Breaking and now let's just you know we're not going to be duplicating that I want to write every single thing so to enjoy your BR and coffee c o f we e okay so outside from okay I messed up something uh it shouldn't have to be a div it should have to be H1 this one will be also H1 and I guess we are fine so outside from this uh div right here we have to just write a paragraph the Clause of lurm inside that and outside from this lurm We are going to be using

a button right here and I want to just put like uh I don't know I want to put like Le learn more in this case and now if you sve file and now we are done with this section but we also have to write a labit of code for our image and container and stuff so outside from this div what else do we have to do we have to create a new section with a class of IMG container okay so now inside this image container we have to render that Image which we have somewhere just

hit control space go to images and select that second image right here and as alt tag so I'm going to just give like uh I don't know you know I'm going to not I'm not going to be putting any All Tex I'm going to just give a class of img2 and sell file and this is how currently things looks like right now I know it's messy and long and stuff so now let's just work on this section first of all we have to go to our CSS and now let's Just write or uh coffee uh

yeah coffee star would be fine now let's just get our container uh not container but coffee container which is that coffee container which you wrot here so we have this copy container and we selected that now let's just use our magic of display Flex justify content will be space around in this case and we are going to be using align items of okay I just use align cell so we have to use align items of what Aline it of Totally Center and I forgot to include something called a flex a wrap off wrap so if

you sa there and now I also forgot to include a margin top of 10 Rim in this case so we going to be using 10 RM and this is how currently things looks like so now let's just get into that image container and provide a little bit of width and height for that so you guys can see everything a bit better I'm going to just select that image two I guess I give a a class of image two yep Image two I'm going to just provide a width of like 400 pixel and also the height

will be 400 pixel so if you sell that and this is how currently things looks like right now so now let's just make it a bit better by first of all selecting our paragra which is that paragraph So we have a lot of content inside there and we can decrease that if you want to so I'm going to just select my uh content section and now inside this content section we want to get our Paragraph So we are now selecting our content section inside this section we just have one paragraph right here if you have

more than that so it will also select it there as well so in this case we just have one paragraph so it will now select there and I'm going to just put a Max width of like 500 pixel and if you sell that and it will just shrink it down to 500 pixel size right here anyway so that's it for a basic styling what else do we have to do we are going to be Selecting now in this case our title two so let me just show you that title two right here so we have

the title two and now let's just use a font size of three uh Rim right here so the font size font size will be totally three rim and the color will be totally pure wide now let's just use that font family of um play uh Fire display uh okay playay go to bottom bottom bottom bottom and bottom Yep this copy it and I'm going to paste it at the end so I'm Going to paste it right here and sa file and this is how currently things looks like right now you know what the font family

is just a little bit huge so I'm going to just set that to like font uh weit to normal so now if you have that and yeah we just have one F family so I'm going to remove this one family from there uh I mean like font word from there now what else do we have to do uh we already select this so you know I'm going to cut that from here and I'm Going to pass it right here and I'll just write like margin of top of 20 pixel and font family in this case

will be just totally sender so save that and you cannot see that because the color is totally black um so I'm going to just write a c uh of colored and sa it and we have a lot more content so I'm going to just remove some of this content from here okay not that much but I guess that would be fine two lines you know what all of them are fine but I'm going to Just provide inline styling here I don't want to provide a new styling for this one so I'm going to just write

like style and let's just use inline style of margin top let's just use margin top to be like 20 pixel in this case so if you save that it'll Lo use a little bit of margin in there so we are not toly done with the header area navigation header area or store and perfect place for a coffee and stuff so now let's just work on our product section so what do we Have to do I guess I didn't write any comments in HTML file so we have a nav then we have our uh header uh

header right here then we have or story or story and now then we have another one or story then we have or coffee coffee section and now let's just work on a new section which is the product section so I'm just write like a product in here so for this product section we have to first of all create a section with a class of Products and inside this section we are going to be writing our H1 with a class of title and another class of title 3 because this is going to be our title three

and now let's just put our products in there and now let's just create a section for our cards so we going to be writing a section for cards and inside this card section we are going to be creating a few cards we going to be just writing card one and now let's just give a class of card IMG And then img1 so this is going to be tagging our image and then let's just use our card title and inside that we are going to be using our mocha card and now outside from this Dev what

else do we have to do we are going to be writing a items container so this is going to be our items container which will take a lot of our items so I'm going to just write like uh different kind of names all right so now if you save that and now let's just style that and we are Going to be duplicating that just in a second but first of all we have to style that and I guess something is wrong you know what first of all let me just write all of the HTML code

then we will style that so we have our card section right here now we have to start uh copying from this area because this our first card and now let's just start duplicating there so this is our card one and now I want to duplicate to card two then we have our card three all Right so now let's just change our stuff inside that so this our card image card image one this is going to be our card image two and this is going to be our card image three and by the way you can

also change this text if you want to but I'm not going to so if you save that and we will see this card right here but they aren't style that much well so we have triy a little bit of coding for that so we have to just first of all get this comment from here and I'm going to Put it right here and put at the end and the end so I'm going to just uh zoom in a bit first of all and now let's just start working on our product section so I'm going to

just select that product oh my goodness product section right here and margin will margin of top will be just five frames now let's just select our tile three in this case because we provide this specifically T three right here all right so now let's just style That so font size will be just four rim and margin to the left will be 10 RM and margin to the top will be also 10 RM and margin to the bottom we could have also used we should have used that short hand but anyways it will it will do

the work so if you save that and this is going to be add for our product section right here so now what else do we have to do now let's just start working on our card section a plural card section not a singular so we going to be selecting our Card section and the display will be now set to totally Flex Flex WRA will be now set to WRA Flex direction will be set to row in this case not column and justif I content will be space around and final property I'm going to use for

Aline item items of Center and if you sell that so here you can see you're now getting our cards right here but they aren't style well so now let's just style that a bit so what do we have to do we are going to be selecting our card in this case not Cards but just a singular card right here all right so now I'm going to just do I'm going to provide a border of like two pixel solid and that kind of a main color and if you sell that yep that's cool uh I guess

that's Co you know I'm going to remove that I'm going to change it to some let me just write like uh d e a b okay so that's the same color I'm going to just change that to our main uh color right there anyway so we can just provide a padding of zero for the top And bottom and 20 pixel for the left and right height will be totally 400 pixel the width will be just a 300 pixel and display will be totally Flex justify content will be column not justify content Flex direction will be

coling in this case and now let's just use our justify content of space around and now let's just use our align items of Center and Border radius will be now set to 5 pixel and position we are going to be applying For it so like relative positioning and then let's just use our margin bottom of four R so now if you sell that and this this is how currently things looks like but now let's just style our card title and card info or paragraphs whatever you want to call that so now we are to it

done with our card section so now let's just use our card image first of all we have to specify image for our card so to do that we going to be writing a width of 100 pixel and height will be also 100 Pixel let's just use a position of absolute on it and the Top Value will be like 60 pixel in this case and now let's just start working on order uh different kind of images but before we do first of all let me just show you how it will look like so I'm going to

just write a border of two pixels solid in that a war of main colors if you sell that and this is how it will looks like by default so we can style that manually if you want to so You know what I'm going to remove that and now let's just start working on our different kind of images so for this first card we provide a class of img1 like image one this is going to be our image two and I guess that would be it okay so now let's just select our image one so I'm

going to just write like IMG and one now let's just use a background color of URL in here so I'm going to just put a URL go to the images section uh I mean like images folder and select Our first image so what else do we have to do we have to use a background positioning of Center and now let's just use a background size of totally C so if you save that and here you can see we have our first kind of image right here so now let's just duplicate this SC two times so

this is first and this is the second one so we have our image two select our image two and this is going to be fine so then we have our image three and now let's just select our Image three and now if you sell that so we have all of these images right here okay so now let's just style these titles and stuff so first of all we are going to be using a card- title so which is that card uh title right here this one so we are now going to be styling this one

so what do we have to do for that we are going to be using a color of totally white and now let's just use a font family of sens Sur in this case and the Margin top I'm going to give like 50 pixel and now if you save that and boom and this is how everything looks like and you can just change these name if you want to and now what else do we have to do we have to also style these paragraphs real quick so we can just select our card and then items inside

that card and now let's just select our paragraph it t e Ms Y correct so now let's just change the color to be totally wide margin for the top and Bottom we have is a 20 pixel for the left and right we have a zero pixel for family will be totally sensor any if you sa that and this is how our card section looks like okay so if you just make our screen size a bit smaller it will just push it to a new line and this is how everything looks like for now I know

it's not responsive we we are going to make that responses just in a second but for now everything's looks cool all right so here we have to just write or Uh products products uh section n or I'm going to just put an n in there okay so now let's just start working on our folder area and that's going to be it for this project all right so outside from this section we are going to be using first of all you know I'm going to just write a products end and now let's just use our folder

start and folder and so we are going to be using HR for horizontal line and now let's just use Our fold and inside this P we are going to be writing our container inside this container we are going to be using our heading info first of all so we are going to be writing our about right here and then for the new color we are going to be using a span of a okay so if you save that so this is how it will looks like and underneath this H1 we are going to be writing

a paragraph with a lot of lurm ipsum inside there and I guess that would be fine and now underneath this Div uh what else do you have to do underneath this div we have to you know I'm going to do duplicate that a few times why not or can't I you know what let's just see I'm going to duplicate this two times so one two so we have container and heading info now let's just change the title to be like something else maybe contact in this case so contact us uh about us and opening Howards

would be fine so o p e n i n g and then Hearts okay so uh we are Now totally done with this container section then outside from this div what else do we have to do we are going to be writing um HR One More Time HR with a class of hr2 and finally let's just write a credit section so I'm going to just write a paragraph with the class of par or credit wouldn't it be fine if you just write a class of CR you know I'm going to go with a um par

CLA I'm going to just like a copy right and then add Symbol 200 uh 23 in this case of husan uh web dev and you can write your own name if you want to because this project is not totally yours what will I do with this for project so provided by span of hen web dev so if you sell a file and this is how fur looks like right now I'm going to jump into my style sheet right now and now let's just style it a bit so first of all we are going to be

styling our fot area I'm going to give a height of like 500 not 500 but uh 50 VH and Display will be uh totally flex and flex wrap will be set to wrap align items will be now set to totally Center justify content will be now set to totally Center color will be totally set to White and font family I'm going to set that to like s Sur in this case so if you save there and boom everything is now magically in here so now let's just take care of the alignments we are going to

be selecting our footer and then let's just select our container inside That footer we are going to be providing a margin of 20 pixel the max width I'm going to provide is like 300 pixel and also the text alignment will be set to Now set to Center so if you s that and this is how currently things looks like right now all right so it's looking moreful I know that but what else can we do we can just improve that uh heading info class which you provided so you're going to be selecting this fotter and

then heading And then info so let's just select this header and then heading info real quick and let's just provide a margin of bottom of 20 pixel in this case Just One X would be fine and finally let's just select our folder and paragraph and we are going to be using a line height of 25 pixel in this case and also select or span which we provide for a new color which is this color right here so we are going to be g a class of not a class but a color of That main uh

color and finally you know I'm going to save this file so this is how currently things looks like and I know this is a lot of text so we have to just uh a few of them so I want to select this portion and hit contrl dtrl D and bye-bye and so that and this is how things looks like I know it's a lot uh you know what I'm going to select that place placent and let's just remove that and save it yep that's cool anyways so let's Just take care of that horizontal line which

we provide right here so we have HR here and then we have that HR two right here so now let's just take out of there real quick so we are going to be using HR and let's just write a margin bottom for it like 20 pixel and Border color I'm going to provide is the totally main color which we just provide and then width will be 500 pixel and I'm going to give a margin of zero Auto so it will be now totally at the center Okay so what's wrong oh my God uh something went

wrong so it's now taking this area you know what I'm going to style that a bit just in a second so let's just select that pair which is their parac CLA and now let's just take care of there real quick I'm going to select their parac CLA the color I'm going to just write a color will be totally White and the font family I'm going to set that to like Senter of text align will be now set to Center and margin uh at the top I'm going to just give him like 20 pixel and knife

you sell that yeah this is looking cool but I don't know what's happening to that HRS we have hr1 and then we have hr2 but I don't know what's happening to that HRS it's looking awful or what if I just remove these HRS you know what if I remove that that would be cool so we have a width of 500 pixel in there we are not wrapping Vortex inside there do we uh you know I'm going to remove this HR and I'm going to also remove this HR from there and yep that's looking cool if

you want to Pro a line so you can but I guess this UI is looking cool but now we are totally done with our project but here's the thing it's not responsive so for that we have Tri a little bit of media queries in here so you can see this text is huge this section is not uh looking better and now let's just take care of That by using media queries so I'm going to just write um U project n and now let's just write like uh responsivness okay I guess I misspell it but you

know what who cares you get the idea so we are going to be using a media for only screen and also for the max width of 700 and 68 pixels so inside there what do we have to do we have to first of all get our main heading uh is there a main heading or man headings I'm Not sure I'm going to have to check it out so I'm going to just go with a man heading let's just see uh man headings okay so it's plural so we have to provide that s in there and

you know what I'm going to also select that primary headings as well is that a yeah that was a heading I'm totally sure it's a heading not headings all right so now let's just use a font size of 2.5 rim and save there and boom this is how it looks like right now all right so now Let's just take care of this section area so for that we have to select it by using or story and now let's just use a text align of Center and also take care of their title real quick so I'm

going to just select or story and then title of transform uh translated to the XX is of 50 pixel so now I'm going to save that for now and this is how it looks like right now and you know what this line is not looking better so I'm going to remove this line real quick uh I'm going to write like or story and then let's select or line and write a display for there like none so save it and yeah this is looking a bit better in the prev version anyway so now let's just take

care of that content section which we have right here so now let's just take care of that I'm going to just select my content section right here and text alignment I'm going to just set everything to be centered so if you sve that it's looking horrible now let's Just select our image section so for that we are going to be first of you know what first of all let's just select our story select our image container container and now let's just select our images inside there and I'm going to provide a width to be like

70% and I'm going to also provide a text alignment which will be now set to Center margin will be set to zero in Auto and now let's just take care of that image container so I'm going to select the Coffee container and write an image container right here and I'm going to put a margin of top of five frames and the width will be 50% and now if you say there okay so it's looking better I don't know what's happening to this one you know what you can play around with that if you want everybody

in my case I'm going to just make it so that we don't have any scroll bars and stuff we can change this title what is even the class of this perfect plus uh perfect Place so we have title two and if we select like uh I don't know is that title two title two of Border 10 pixels Sol red and if you s that yep that's it use a margin uh margin of zero or on it art not perfectly at the center it's looking better right now or story uh or story and now let's just

select there real quick that uh class is title so we are going to be using a title of margin zero Auto in this case as well so yep everything is better looking right now And you can just streak around it if you want to but in my case this is looking better now let's just take care of uh okay so this is looking bad now let's just select our product section so we have title three for that so we are going to be copying this one and let's just uh select that title three like so

I'm going to copy there real quick and I'm going to paste this margin zero Auto in there so it's looking better okay so it's still looking wful so you know what I'm going to provide a margin for uh like maybe 20 pixel so save that okay so it's not working you know I'm just I'm going to just like border of 10 pixel solid red right here so if you save that so it will now do select it so I'm going to just use like a margin of zero Auto and if you s there it's not

working I don't know why you know what instead of doing all of that I'm going to just use like a display of none so if you save that yep that's looking better and we Can also provide uh spacing and stuff if you want to but uh I guess everything is looking better right now if we just make it a little bit more smaller and now let's just check him out make it smaller so we do have that scroll bar right here so now let's just take care of that per real quick so what do we

have to do I'm going to select my par and I'm going to provide a margin of a top of like 10 Rim so if you save that and I'll push it to the bottom uh we don't want that we Don't want this to S it you know I'm going to also remove this par class as well so display will be n so if you sell that and yeah that's looking better for now I don't know why we are getting this scroll bar from but we are not toly done with this section I'm going to make

it bigger and yeah congratulation we now successfully build our first project all right guys so if you want to follow along with this video first of all you will find a link in the Description below which will bring you to my gab repository and in my gab repository you will found this uh images. txt file these are nothing more but all of the images which you're going to be using in this project so let's just get into it first of all we have to create a file give a name of like index.html now let's just

create another file give a name of like style. CSS and now let's just write over do type HTML in it so what do we have to do I'm going To just give a name of like the art and I'm going to also link it with my CSS file okay so I'm going to hide this uh head area from there right click on it and open it with a live server so it will not open or file with the live server right here okay okay I'm going to zoom in a bit so first of all we

are going to be starting from our na bar so what do we have to do first of all we just have to write our nav with a class of wrapper uh container okay so we are Going to be doing that so inside this uh wrapper you know what we are going to be changing that to like some sort of a section I guess I'm going to change that to a section and inside this section we are going to start working on or navigation so we are going to be writing our nav opening tag and closing

tag inside this nav we going to be writing our UL then Alli and then our anchor tag and it will go to nowhere and here we're going to be placing our logo right there And underneath this Ur right here we are going to be writing our uh Burger menu right here okay so we are going to be writing our span and we need three of them so if you say our file so this is how currently things looks like and we don't have that burger that's because we don't have any content for that anyway so

now let's jump into or stylish she and now let's just start a bit of styling for our project so first of all we going to be writing our resets for Our project so what do we have to do we have to select everything and remove the margin not a max resolution but now let's just select our margin and it will be zero and padding will be also zero not Pad but just padding will be also zero and box sizing I going to set that to like a border box so if you save that everything is

working the way we expect him to work all right so what else do we have to do we have to go to our fonts. goole.com site and here we have to grab A few font the first font we are going to be getting is something call open sense so I'm going to just search for open sense so let's just click on this one and get the font we of that is like 300 pixel font W all right so I'm going to just select this first one yeah I'm going to just select this first one not

AIC version but just a regular version so now what I'm going to do I'm going to click on this import right here and I'm going to copy that and I'm going to Paste it at the top of the file right here and I'm going to also copy the font family of them that so I'm going to copy it real quick and I'm going to paste it right here and I'm going to comment it real quick all right so that's just kind of a basic setup so now let's just start working on our body so we

going to be first of all writing a color for our body let's just write a BG and C for background color and we are going to be started working on EB E A E9 okay so This is kind of the color which we going to be using for our body and now let's just provide a margin or yeah I I'm going to go with a margin real quick so I'm going to just provide a margin uh let me just start a margin of one Rim right here so if you sa a file uh so this

is how currently things looks like for now so now let's just start working on our HTML so I'm going to just select their HTML and I'm going to uncom this line and I'm going to copy that and here What do we have to do I'm going to just write like a font family of there so if you sell a file and this is how it looks like for now anyways so now let's get into our navigation so I'm going to just write like a na start okay start and now inside there we are going to

be select or navigation first of all let's just WR a display of flex on it justify content will be set to space around uh not around but between because you want a little bit of spacing so align items Will be now set to Center and color will be set to totally white and also ping I'm going to give like 20 pixel all around and Marin bottom will be just five frimes so if you out that and this is how currently it looks like right now and here you can also see that bullet point anyway so

if you want to remove them and we want to provide all the for styling so so first of all let's just select our UL inside this navigation so we are going to be selecting that and Now let's just write margin left of five frame and list stle will be now set To None So if you save that and this is how it looks like for now now let's just remove this ugly border border from it so now let's just remove that real quick so I'm going to just write like Ali and then anchor tag so

we are going to be writing a text decoration of none so that you want to remove that decoration and color will be set to totally black and if you sell that And this is how currently it looks like anyways so we are now totally done with that now let's just work on our Burger menu so I'm going to just write navigation and I'm going to select my burger which is this class right here and here inside this burger we have three spin right there anyways so now we select that here we are going to be

just writing a margin right of fire frames and cursor will be pointer for all of the burgers or the span to be precise we Going to be using navigation first of all now then we have our burger and now let's just select our Spin and here we are going to be g a little bit of height like 400 not 400 but just a four pixel and now let's just write border of two pixel solid and totally black and now let's just give a little bit of margin all around like four pixel and background will be

totally black so now if you sell there and I guess you cannot see that I don't know what's going on All right so we have our navigation then we have b g e r and now if you sell that yep we are getting it and this is also a Burger yep both of them are now currently working now the next thing which we are going to be doing is that we have to start working on our header area so here I'm going to just write like a navigation n and yep sa that and here I'm

going to also write a navigation end nav end yep that's cool so for header now let's just start Working on our header area so I'm going to just write like a header area in here or heer area whatever you want to call it so here I'm going to just put like header opening and closing tag and now let me just write H1 with a class of main headings okay so inside this H1 we are going to be writing first of all what and then BR and then underneath this BR we are going to be writing

is car and then art okay question mark Underneath this hedge1 we are going to be writing our paragraph with a class of primary headings okay so inside that we are going to be writing art this text which I'm writing is come from a Google so you can also search there if you want to or you can type it right here comma a span and now I'm going to give him a class of BG of gray okay so visual object or experience and yep our span will end in Here and Now let's just write concisely Created

through and not part but through an expression of scale or imagination okay so now if you sell that this is how it looks like I know sful now what else do we have to do now let's just go towards styling and now let's just style that a bit so here what I'm going to do I'm going to just write like a header start and now let's just write or header and I'm going to give him a Little bit of first of all let's just select it correctly I'm going to give a margin of six Rim

from all around and now let's just select our main headings okay so now we selected that width will be just a 50% font size I'm going to just increase that to like three rim and yeah I'm going to also select my primary headings right now and I'm going to give him a width of like 50% in here margin top I'm going to give him like like three rim and font size will be Just like 1.5 rim and line height I'm going to give him like 30 uh pixel just a 30 pixel will be fine so

if you sell there and this is how currently things looks like so if I want to make The Bard you know what I'm going to also get some sort of a Bard version of it so I'm going to also click on that and yep now I'm going to copy this one copy that and go to the top replace it with the other one now now go to the bottom and change this one font weight to be like uh which One was there just select like uh 600 so I'm going to just write 600 so sa

file and this is how it looks like so first of all save it Yep this one is a little bit darker than this one and this one is looking cool all right so now let's just write there BG of gray uh which is the spinoid here so it will just change the background color to be like some sort of a grayish color so I'm going to just give a background color of RGB let me just write it RGB of 53 uh not 50 but just 53 and 53 and 53 okay so this is the background

color which we going to be using and color will be now set to like totally white and padding I'm going to give like two pixel for top and bottom and 10 pixel for left and right and I'm going to also change the font weight to be totally bold so if you save that and this is how it looks like right now and you can play around with that if you want to like so I guess that would be Fine yeah oh you know what I'm going to make it a bit subtle like so yeah that's

fine you can play around with that if you want to but that's kind of a call to action so here I'm going to just write like header n and here I want to also put a header n comment in here so let's just write a header n and now let's start working on or main area so I'm going to write a main start and now let's just select our main area and inside this main area we are going to be Just placing our images so I'm going to just write image and now let's just select

all of our images from here uh okay so it's looking a bit clear I'm going to go ahead manually like I'm going to just open my HTML and CSS click on that and I'm going to select our images from here all right so I'm going to select my first image I'm going to place it right here and we going to be removing this all attribute from there and I'm going to also G the class of IMG Or you know what first yeah I guess that would be fine I guess that would be fine so let

me just write IMG one more time with the class of IMG okay so I'm going to remove this alternative text from there and I'm going to duplicate that a few times like so and now I'm going to just replace it with these images so I'm going to copy that past it and copy that and past it right here let's just copy that other one I guess this one the fourth one and let's just past it in Here and by the way if you're wondering like where am I getting these images from so I get all

of these images from unsplash.com I don't own these images so if you want to get all of these images which I'm using for this project so you should either go to my gab repository and download it manually or uh you can just go to uh the description area you and you will also found their images out in there and now here are my images so these are the images which I'm going to Be using for this project so now let's just style that a bit so I'm going to go to my Styles shet real quick

and here here I am going to write my main start so I'm going to select my main and now let's just write a margin 0 for top and bottom and fourm for left and right display will be totally flex and flex WRA I'll Now set W justify content uh just ay content will be now set to Center and margin I'm going to give a little bit of margin of 40 Rim not Rim But pixels if you s there and this is how currently things looks like clut uh so now let's just select that image so

I'm going to write uh Main and now let's just select that image so IMG and all of these images have this class of IMG right here so now let's just select that and give a width of like 40% and I'm going to also provide a margin of 10 pixels so if you sell that and yeah that's looking better right now okay so if you just make our screen size a bit Smaller it will still look good on a smaller screen size because we provide a width of 40 pixel not 40 pixel but 40% and we

will take care about these once we jump into the media query section so I'm going to make that a bit bigger and now we are totally done with our um main area so we are going to be just writing our U main uh Main and so and now let's just start working onward section three but section three will be a little bit long okay so I'm going to just write a Section with a class of section three okay so inside this section three we are going to be writing H1 with a class of main heading

so we are now reusing that class again so seven uh types of art and so now let's just write a paragraph with a class of uh primary headings okay and here we have to write all of that uh Gib so you know I'm going to just fast for all right so now if you see our file so here the text I write and now I want you to notice this so we are using that Uh background gray class on this padding and this uh kind of description area right here so I want want you to

just notice that real quick and this is all of the text which you need for this project so now here we are going to be rendering our list I'm going to just write a list right here and inside this list we going to be rendering different kind of items so I'm going to just write item inside this item I'm going to just write H1 of painting So painting and now Let's just write our image and I'm going to grab this image which I have already right here I'm going copy that and P right here and

we we are not going to be providing any alt and stuff so I'm going to just duplicate this item real quick so this one we have is our item one then we have our item 2 three 4 five okay so now let's just change that real quick I'm going to change this painting to the sculpture and let's just um sorry I can't pronounce that name but uh I'm Going to change it anyways copy it and let's just paste this link and yeah I also have to change that one so I'm going to change this heading

from from painting to literature so literature and let's just copy that third image right here copy it and I'm going to paste it right here and now let's just change this painting to architecture so architecture and I'm going to copy this image and I'm going to past it right Here let's just change this painting and now let's just write a cinema C in here let's just copy this image and I'm going to paste it right here and let me just make sure that I didn't mess up something so okay so we have two other left

so I'm going to copy that two times one and two so change this cema and copy this text not text but copy this image URL and I'm going to pass it right here and then finally let's just change this Cinema to theater And let's just copy this final image and we are to it done so say bye-bye to this one save it and I'm going to paste this image link right there so now if you save that and here you can see we have all of these images and we have all of these titles right

here so now let's just get into our style sheet and now let's just style that a bit all right so I'm going to write a comment for myself and I'm going to just write like section three start all right and now let's just Select our section three right here and now here I'm going to just give G margin left to be like five frame and also let's get it over section three and primary headings okay so let me just write margin of bottom of 10 rims in here and now let's just select our list which

is that huge list which we have right here let me just see yeah there we go select that list write display of L link WRA will now set to wrap because we want all of our images to wrap and Justify cont will be Center align items will be also Center so if you sa our file and we can see some of the images but a lot of images are really huge and we cannot see that once so now let's just change its Heights and stuff uh let me just get my section three and all of

the images which we have inside that section three so I'm going to just give a width of like 400 pixel and height will be just 500 pixel and I'm going to also give a margin of 50 pixels if you Sell them and yep that's looking better and you know what this text are looking a bit weird so let's just take care of them so what do we have to do let's just select or a section three we got to select our item and we want to select all of that edge so we have this item

then we have our heading then we have another item and it's heading and so on and so forth so now we selected that now let's just increase the font size to be like two RAM and I'm going to give a Color of like R GB of that kind of 53 color but you know what I didn't like that I'm I'm going to copy this from here let's just cop oh my goodness let's just copy it manually by using our keyboard it will not allow me to use my mouse so I'm going to just use my

mouse in here past it so now just change the color of that heading and that's awesome so we are also done with our section uh Section 3 n and I just write a SE yep that's also section seven if you make it Smaller and yeah this is also responsive but we can take care of that later if you want to but it's already responsive but you should have to take care of these headings and stuff anyway so we are not totally done with the section three now let's just work on our folder area so if

you want to work with the folder area first of all and let me just write a comment for myself like um section three ended or section three and whatever you Want to call it now let's just start working on our folder area folder start I'm going to just write like a folder opening and closing tag now let's just write a logo uh logo oh my goodness logo container inside that fold and write H1 with a name of logo and write a lurum and just write laurum okay so then outside from this div what do we

have to do let's just write over div with the class of about company it's not our company but you know what we'll just go With that so let's just create our container and inside this container we are going to be writing H1 with about then paragraph with um I don't know uh news and blog would be blog would be fine uh yeah let's just create a new paragraph the class of not class but a featured text and then we have or about us okay so we just have that section let's just duplicate that a few

times you know what I'm going to duplicate that three times and now let's just Change this headings from it so I'm going to write a comp company select that and write how we work uh we work question mark and let's Okay so I'll leave this uh feature you know I'm going to change that to like Capital uh cap tall and also let's just remove that to security and this one will be now support and we have a fa cues like so or you Know I'm going to remove that comma from there and this is how

it looks like and now let's just write our support in here and then let's just write contact us so if you sell our file and this is how our folder look like right now anyway so now let's get into our styling and now let's just style that a bit I'm going to write a folder start St a r t yep let start so let's just get our for area right here I'm going to give a margin top of like 10 RAM and display will be flexed Because we want everything to wrap up so for that

we are going to be using a a flex wrap of w justify cont will be space around in this case and I'm going to also provide align items to be Center okay so give a height of 100 VH in this case I'm going to bring that to the top and now let's just write a color to be like totally white and here we are going to be using a background color of like a RGB of 144 then 1995 and 200 would be fine yep and now Let's just uh you already G heart of you know

what I'm going to change the heart to be like instead of 100 so I'm going to just change that to 50 V and this is how currently it looks like and yes something is wrong something is not working the way I expect it to work but we'll figure it out just in a second anyway so this is the first area and now what else do we have to do uh we have to start working on our folder logo so let's just select our folder and then Logo container and you want to select our H1 from

there so let's just provide a font size of four Rams and font family will be that uh okay so we didn't have any so I'm going to use that font family real quick I'm going to find that F family and yep this that open sense font family I'm I'm going to copy that and I'm going to pass it right here that open sense kind of a font and now let's just use or you know we can also Go with a sensor if you want to so I'm going to just WR margin bottom of 20 pixel

and this is going to be add for the logo and now let's just select our folder uh logo logo container and paragraph inside the logo container you're going to be giving a mix width of like 400 pixel and form will be now set to S surve line height I'm going to provide like 25 pixels you have a logo container do we have a logo container yep we do have a Logo container right there and yeah this is looking better but these are looking awful now I'm going to also change the direction of our Flex box

so Flex direction to be column so if you set that to column and yep nothing will happen in this case so got to do some about there all right so now let's just select our fotter and then let's select our logo container not logo container but just about company which oh my goodness it is about company which is This one right here okay so let's just write a display on Flex on there and flex W will be now set to no R not no rep but just rep justify content will be now set to Center

align items items will be now set to Center as well and I'm going to also select my fotter area from there and now let's just select our uh about company and select that container uh con oh my goodness con container like so and provide a margin to the right maybe 40 pixel and margin To the top will be 20 uh margin top of 20 pixels so if you save that and these are looking better but we have a huge problem which we need to solve let's just style these and then we will take care of

there just in a second let's just select about company and select our container let's select our heading and I'm going to give a margin of uh bottom of 50 pixel will be fine let's just select our about company and let's select our container and paragraph and Here I'm going to just write a font family of sens Sur and margin bottom will be 20 pixels if you s a file and this is how it looks like it's looking better but uh you know what we have a huge problem why it's not giving us that background color

I guess we forgot that in the first place so so we have everything we need we have HTML we have UL Eli Burgers we have everything but something is not right okay I just remembered that we forgot to Include that closing tag of the div so now let's just do that real quick so if you sell that all right so let's just see we have our section wrapper our wrapper container to be precise and where did I close Okay so we have a section at the end we don't have any diffs let's just close this

section right here see if you have that right now okay so nothing's happening and that's a huge pain so I'm going to zoom out a bit a lot so I can see the coding So what do we have we have our um section wrapper we have a body and then we have our section wrapper something is not right I'm totally sure about that yep we did close it right here yep we did close it right there so now let's just create that section I'm going to zoom in a bit for now section with the class

of uh container wer what was that let's just um undo it so now let's just create this section one more time or you know I'm Not going to create any section so I'm going to just write like a wrapper container okay so I'm going to close that from there and I'm going to past this one right here underneath this footage so I'm going to pass it right here and now it's looking better but the thing still is that we didn't change the background color of it so we have to change the background color to something

else and let's just select that wrapper container Which we forgot to include right here so uh let's just select it I'm going to zoom in a bit uh this wrapper container copy it and past it let's just change the background color of it to that background color which we just provide RGB of this one so if you save that and now it's looking a bit awful we don't we don't want that uh you know what this is awful so I'm going to cut that from there and what should we do I'm going to Pass it

right here and I'm going to cut that color and I'm going to pass this one right here yep that's looking better so you can provide JavaScript for that if you want to but I guess we are totally done with our project but the next thing which you have to take care of is the what do we call it a media queries and responsiveness so now let's just take care of that I'm going to go to the bottom yeah I'm going to just write like Uh project end and now let's just WR responsivness yeah zoom in

a bit zoom in a bit not out okay so media let's just create a media for that we are going to be writing an end Max with uh W dth is over like 7 140 let me just get my keyboard 7 and what 740 pixels so what do we have to do we have to select our header we have to write a main headings select that and we have to give a width of 100% so if you sell that let's just make it smaller so it will Take 100% of its space so uh okay it's

not working let's just write a border of 2 pixel solid toal okay so it's not taking it area right here and it's taking 100% of your space that's looking better all right so now let's just select our header and select our primary headings in this case we going to be also changing the width to be 100% And the font size I'm going to just change that to 1.5 Ram so if you Save that and yep that's looking cool and everything is totally responsive but now let's just take care of this area as well so for

that what do we have to do I'm going to just uh duplicate oh you know what let me just write a manual then you might be complaining like you just duplicate your code let's just select word section three and Main headings and we are going to be writing over width of 100% in this case and then let's select what section three of Primary headings of with let's just get 100% withd font size of 1.5 frame and finally let's just make these images a bit smaller so I'm going to just select my section three let's just

get all of the images and uh let's write a margin of zero so if you save that and this is how word side looks like for now it's looking totally responsive and awesome and we are now totally done with our second project as well so I guess that will be it for now and I'll see you in The next project all right so if you want to follow along with this video you will find a link in the description area which will bring you to my gab repository and you can download all of these images

from there if you want to use these images so if you want to use your own images so feel free to do that if you want to use my images so you will find the link in the description below so what do we have to do first of all we Have to create a new file with the name of index.html let's just create a new one with a class not class but the name of style. CSS and now let's just make everything a bit bigger so we can see everything a bit clear right do type

HTML and the name will be hoodie in this case so collapse this hoodie from there and you know what collapse this hoodie collapse this head area link it with our CSS Ser file right click on it and open it with the live server so that Everything works the same and we can see everything a bit better all right so what do you have to do for our navigation so we going to be starting from our navigation so I'm going to just write like nav start and now let's just write our navigation and inside this navigation

we will have a de with the class of logo inside this logo we have our H1 with a text off logo so outside from this Dev what do we have to do we are going to be creating our Burger menu So we are going to be just writing a name of burger and inside this burger we need three spans so if you sa a file you will just see a logo right here but we will not see this um Burger area that's because we didn't style that and we don't have any content for that anyway

so now let's just get into our CSS and now let's just style that a bit so for CSS first of all let me just write a resets for myself so I'm going to select everything and I want to just provide a Modu of zero and padding oh my goodness not Pad but padding will be also zero box sizing will be set to totally Bard box and now let's get into their fonts uh. google.com and just grab our fonts so for this project we would need two fonts so I'm going to just write Play Fire display

or play fair display whatever you want to call that so I'm going to just click on this one now the other one and we would need the font word of that I don't know which kind of Font word should we grab and I'm going to just scroll down and I'm going to click on that 700 not italic one but this regular 700 so I'm going to click on that one so choose that one and what else do we need so we are going to be also searching for Roboto one so click on that search for

Roboto font and yep I'm going to click on this first one and the font family which I'm going to be choosing is 10300 so 100 will be the first one the thin one and then we have A 300 regular not italic one so now let's just click on this import button right here and copy this import URL and past it at the top of this file and we are going to be also copying these links so let me just grab there and you know what let's just create a variable real quickly so we can store

our data inside there so I'm going to just write like a root inside this root let's just create our first variable which will be like uh you know what let's just write our main Font so before we do that let's just write two dashes in there and I'm going to past this uh Link in there let's just create a new font like primary font and grab this link which is the Roboto one and I'm going to pass it right there and you know I'm going to also create a class for not a class but a

main color variable so I'm going write 2 three9 and B7 uh B7 e okay so I'm going to just sell that and yep we are totally good to Go so now that was just kind of a setup so now let's just start working on our navigation so we are going to be writing a comment for ourself like now start and let's just start working on our navigation so the first thing which you do is that we going to be just writing a display of flex and flex rep will be now set to W and then

justify content will be now set to space between let's just right align items will be now set to set Center and padding I'm going to give Like 20 pixel all around font family I'm going to be using a main not main but primary font and then font weight I'm going to set that to Bard so now if you save this file so here you can see we are now getting this logo but we cannot see the other stuff like Burger menu and stuff like that anyway so let's just give him a little bit of margin

to this logo so logo margin from the left we are going to be providing a five Fram so if you sell that and yeah we got a fir Frame of margin now let's just start working on our Burger which is that burger right here okay so what do we have to do we have to just write a display of flex Flex direction will be now set to column and justify content will be now set to Center align items will be now set to Center cursor will be now set to pointer and finally let's just give

a margin to the right of five frames so if you save that we can still see nothing right here that's because we Didn't select and we didn't style that spans which is inside this burger area so let me just get these SP p real quick and I'm going to just write a spin burger and spin and let's just give him a border of two pixels solid of their War which we created that main variable and let's just give a width of like 40 pixel height will be just one pixel and margin I'm going to give

him like not 20 but just two pixels so if you sell a file and this is how it looks like right Now okay so you can change that if you want to but in my case that's looking better if you comment this one out nothing will show up yep that's looking totally better anyways so now what else do we have to do so now let's just start working on our header area so I'm going to just write first of all uh n ended or end would be fine so underneath this navigation area what do we

have to do we going to writing a header opening and closing tag then we have to just write a Header content and then inside this header content we have to write H1 with a class of main headings and then new cocktail and then BR and now let's just write a span of hoodies underne these headings we are going to be writing a paragraph with a class of uh primary headings and now let's just use or LM ium inside there okay so underneath this paragraph what do we have to do we have to create a container

for buttons because we are going to be using a flex Box so we need to create a container for that let's just use a button bu u t n and BTN fail okay so let's just write shop now this is going to be our first button let's just create another one which will be 50% off okay so this is going to be a Buton outline so let's just write a button outline and active this one will be active the other one will not be active so this is how everything looks like Right now underneath this

div what do we have to do we have to create another container for our image so I'm going to just write image container and we are going to be storing our image inside the container so we going to be writing her IMG for image okay so now we are totally done with the HTML side now let's just get in to the CSS side and now let's just style that a bit and let's just write header start uh start would be fine let's select for header display Will be totally Flex uh Flex W will be now

set to WP justify content will be now set to not space yeah I'm going to just set that to space around align items will be now set to Center and let's just use a height of 90 VH and margin top will be just two rims okay so if you save that and this is how it looks like right now okay so let's just select our main heading real quick main headings and font size I'm going to give like 4 and font family I'm going to use That same variable which is that main font and also

use a transform and translate it to the Y AIS and minus 40 not 500 but minus 40 pixel and now let's just use kind of a orangish black color I'm going to select that I'm going to change that to hexad decimal values and the last value I'm going to give is like 97 90 oh my goodness uh 1 2 3 4 5 6 and then we have a nine uh seven this is going to be the color and let's just write a line height Of five frames so if you sell that and this is how

it looks like right now okay so we just increase the size and stuff let's just work on our um main headings of spin which we provide right here where is that this span which we'll just select that hoodies and let's just change the color of that to be like totally black so if you save that and this is how it looks like anyway so now let's just start working on these primary headings real quick so we are Going to be selecting our Prim uh primary headings uh did I spell it correctly p r i m

a r y yep perimeter heading so max with I'm going to give him like 500 pixels font family will be totally war and then uh primary font let's just write a line height for there as well so 25 pixel would be fine and margin bottom I'm going to give like one rim and the color which I'm going to be using is 7 1 6D and 6D one more time so this is going To be the color so save it and this is how it looks like right now so now let's just start working on these

buttons as well I'm going to select my buttons so just write a BTN of fail and background color which will be set to totally main color that we just selected there and color will be totally white the text color will be totally white I'm going to remove that border from him as well so padding will be for top and bottom 12 pixel for left and right 20 pixel so I'm Going to also provide a margin right of 10 pixel as well cursor will be pointer always and transition I'm going to just prob like for everything

0.5 second e and out okay so let's just use how effect on that so button fill and once we have over so what do we got to do we want to change the color to totally white and Border we want to provide a border as well so one pixel solid and then totally a main color and color I'm going to change that to like that main Color as well so if you save that and here is our button so now if you have our Mouse over to it so here you can see it will first

of all remove their background color it will now change it to totally white color and we have that one pixel of border on it and the text color is also changed that kind of a greenish color which we are using kind of a main color or primary color whatever you want to call it now let's just style the other button which is the Active button so I'm going to just use BTN outline and active if that's active so what do we got to do we want to write a border of two pixels solid and then

use our main color and let's just also use their main color on this button as well and background will be now in this case totally transparent okay so padding I'm going to be providing padding for a top and bottom of 10 pixel for left and right 20 pixel cursor will be pointer and we can Use the same transition copy it and paste it right here as well so that's it so now let's just use our how effect on that so BN uh outline of that active and once you have our Mouse over to it the

background color we want to change is that to main color which we have as a aable so we want to change that color of that to toly White so if you save that and this is our active kind of a button right here okay so I guess that two B Bor two pixel is a little bit high but You know what that would do so we are not totally done with this section now let's just select our image container real quick so I'm going to just use like image container and what do we have to

do I'm going to just WR a border radius of 50 uh 50% and I'm going to also put a box Shadow not sizing shadow of 4 pixel 7 pixel and 5 pixel 2 pixel and then uh BCB ba s file right now but we will see that just in a second so container we have our image container where is the we Have our IMG container IMG container yep we have that and we cannot see that so now let's just select our header image which is uh header IMG so now let's just select the I'm going

to use a header IMG and I'm going to provide a border radius of 100% on that and I'm going to use a background of URL in this case so I'm going to go to the images section and I'm going to select this uh image right now and use a background position to top and also background size Will be now set to totally cover now contains I'm going to give him a width of like 400 pixel and the height will be also 400 pixels so if we save that and here you can see we have this

image right here and that box Shadow so if you just comment this box Shadow out save it and this is how the image looks like if you want to use it so you can if you like it if you don't like it so you can just remove it from there anyways so we are now totally done with our header Section so header end in this case so now let's just start working on our section one which is outside from that header so what do we have to do first of all let's just write a comment

for ourself like header and uh yeah header end would be fine and now let's just write word section one start and here we are going to be creating a section with the class of section one okay so inside there let's just write IMG and container like a image container and inside that Image container we going to be creating a new section one and then IMG and now let's just give another class of header IMG so we going to be using that classes and now let's just outside from that div we going to be creating a

new div with a class of section content so we are going to be using all of our content or we are going to be placing all of our content inside the section container or section content why what am I even saying so H1 main Headings and let's just write summer and then write a Spain with a no classes whatsoever so sell and BR and now what else do you have to do just write offer in there okay so outside from this h right here what do we have to do we have to write a paragraph

with a clause of primary uh headings so primary headings and we are going to be placing our LM ipsum inside there but not that much so I'm going to just write like maybe two lines of lurm ipsum would be fine I Guess that would be fine so now outside from this paragraph We have to just write a button with a class of BTN and fill and let's just trite learn more so if we sell a file and this oh my goodness something bad has happened in here you know what we will take care of that

once we jump into our CSS I guess something is wrong so we have our section one and then we have our image contain section one image header image section content we have our main Headings we have primary headings and then finally uh we have our button fill let's just get into our CSS and now we will take care of that in a second all right a section uh one start okay so you going to be just writing a section one and write a display of flex in here Flex WP will be now set to wrap

uh justify content will be now set to space around okay so align items will be now set to Center and margin top I'm going to give like seven uh seven let me Just write oh my goodness seven rims so if you sell file and this is how it looks like but we just have to change this image to something else so you know what I'm going to get into that image container and what should I do we are not going to be selecting that let's just select for Section one- IMG and change the background image

to be like something else so we are going to be selecting or this second kind of a image right now and the background Position Will be now set to top background size will be now set to totally covered so if you sell a file and now here you can see we are now getting another image and this is our text and stuff so now for the head headings I'm going to select my primary headings right now and I'm going to give him a Max withd of like 500 pixel and I guess I wrot all of

these code uh right here up above so let's just search for that primary headings we got a m headings and We have primary headings of uh okay so we don't have to write any primary headings one more time I'm going to remove that and here let me just write like uh what what do I have to write um section one end uh or end it would you know end is fine anyway so now let's just get into the product section underneath this section first of all let's just write a comment for ourself which will be

like section one end and let's just create a new comment for Itself like products section start and write a section with the class of products and inside this product section we going to be writing H1 with a class of products uh heading and let's just write or products p r o d u CTS or products so let's inside there we are going to be writing a section with a class of product categories inside this section we are going to be creating a button with a class of BTN outline and this one will Be now active

the first one will be active and new arrival the then let's just create another button so I'm going to create a button with a class of BTN outline of what top rating and let's create another button with the class of BTN outline and what best uh seller okay so we are going to be saving a file for now but underneath this section like this button section what do we have to do we are going to be Writing all of our products item container so let's just write like product uh items container so inside this container

we are going to be rendering uh all of our items so I'm going to just write item inside this item we are going to be first of all writing item uh layer and inside this item layer we going to be placing our image right here okay so uh let's just remove this R tag from there and inside this SRC right there we are going to be Using our images and let's just use our product one okay so we have our product one underneath this div we have right H4 with a class of item name so

write a red hoodie hoodie and let's just write a paragraph the class of item price uh it should be item price and I'm going to just give like uh I don't know which kind of price would be fine $52.99 would be fine and let's just Write anchor tag which will go to Nowhere with the class of view products uh yeah our product will be fine view product now if you sell that and here you can see we have a red hoodie right here and we have all of these kind of gibberish stuff but before we

take care of that let's just duplicate our item container so we have this item container starting from this area so we have one and let's just create another one so we have two three Four um and then five and let's just duplicate one more time like six all right so now let's just change the value of them so we have that red hoodie and that product so all of the prices and stuff will be the same but we just have to change the images we have image one then we have our image two right here

so what else do we have we have image three I'm going to just replace that with image three and let's just use that image two Right here as well because we have a lot of images to work with so I'm a lazy person that's because we don't have a unique uh data anyway so we have three let's just start working on this one so this this is going to be the first one so if you save that we have red hoodie black hoodie greenish or tealish kind of Hoodie then we have another black and teish

and red one anyway so now we are totally done with this section I mean like the HTML side of this section so Now let's just get into a CSS and now let's just start working on that so we are going to be writing a products uh start and inside that let's just start working on our products in here I'm going to put a module on top of 10 RM display will be now set to flex Flex W will be now set to W Flex Direction I'm going to set that to column and justify content I'm

going to set that to Center align items will be also set to Center so if you s there everything is now Perfectly at the center and so is these buttons as well let's just select our product headings so we going to first of all select our products and then we are going to be selecting our products heading which is the product and then product headings so what we have to do we have have to change the font family to like a war or primary font let's just increase the font size to be like two Rim

margin will be for the bottom I'm going to give him like three Rim so if You save that and this is looking cool so now let's just take care of the other button like these two buttons so let's just select you know I'm going to take the select it's kind of a long one uh cut that and P right here and instead of heading I'm going to change that to categories and select our button I'm going to give him margin right of 20 pixel and margin bottom I'm going to give him like 20 not 20

but two Rim so if you have that and yeah I guess we Messed up something c a t e g o r i e s we have products and product caror is not products category see if you sa that this is working but uh something is wrong so okay so it's working anyways um let's just check our buttons so we have a BTN o u l i n e outline outline and outline active but let's just check BTN BTN outline so if the product is outline then provide active class on there if not so what

do we have to do if it's Not you know what we will take care of that buttons later so now let's just start working on our products headings and stuff so so now let's just select our um products p r o d u c t s and let's just select our products product items and container which is that product item container which we have right here I'm going to copy there real quick and I'm going to paste it right here let's just use a display Flex on it and flex W will be now set to

W justify Conon will be set to Center align items will be now set to Center margin will be uh not max resolution but margin will be set to 20 pixel Max withd I'm going to give him like a 60 Rim so that's fine now let's just use a huge products uh I'm going to use a products and use a product uh item and container and now let's just select our item inside there and we are going to be just providing a margin of 20 pixel all around and yeah this is looking cool so now let's

just take care of that layer real quick so what do we have to do I'm going to copy this I'm going to pass it right here and let's let's just select our item mhm not item but item layer to be precise so layer and let's just provide a background color of um this kind of a different kind of background color EB F1 F0 and padding I'm going to give him is like 40 pixel and margin right I'm going to give Him like 20 pixel margin will be zero Auto so that you want everything to be

totally at the center and margin bottom I'm going to give him like 20 pixels if you sa that and yeah we have a product uh and yeah this is how our products looks like for now so this was it for a layer and now let's just decrease the sizes of that images so I'm going to use a long URL not URL but selector and we are going to be selecting that item layer in this Case and also you select our image right there okay so inside there we going to be providing a width of 150

pixel and the height will be 200 pixels so if you save there and this is how currently it looks like right now okay so we are totally done with this section but I guess we have to just St that names and stuff so now let's just take care of these names so we are going to just styling that just a little bit so let's just select Everything and use items and not item layer in this case we are going to be just selecting item and now let's just select the item name okay so what do

we have to do so I'm going to write a font family of War primary font and margin for the bottom I'm going to give him like 10 pixels so if you save that this is how it looks like and now let's just use that same um selector and instead of item layer we are going to be just writing item price P r i c e p family I'm going to change that to one of that uh not main color or primary font and the margin bottom I'm going to give him just a little bit of

margin bottom in this area as well so like 10 pixel save it and this is how it looks like anyways so what do we have to do next we have to select that item and view product okay we i e w yep the spelling is correct font family will be also using that um What is a primary font and margin bottom I'm going to give is like 10 pixel and text decoration I'm going to remove that and color I'm going to use that main color of the variable and Border for the bottom I'm going to

provide one pixel solid and then water let's just reuse our main color okay so this is now how it looks like right now okay so this looking better and I'm wondering how can we change this one to something else maybe so let me just take care of these Buttons real quick so I'm going to cut this or you know I'm going to paste this active on these as well like so and yeah that's looking better so you can just click on that if you want to or you can provide different kind of styling for that

so you can also provide different kind of styling for that if you want to anyway so we are not totally done with this section as well so what do we have to what was the name of this section uh okay so product section we are now Totally done with our product section let's just WR products uh section and and now let's just start working on our new section which is a customer reviews so customer re see USR uh reviews start y and we are going to be also writing an end for there inside there we

are going to be writing first of all our H1 with the class of customer uh heading okay so we are going to be writing or clients says what section with the class of customer Reviews and inside there we are going to be writing a customer like so and inside that we are going to first of all need a customer uh image and then we would need image image and then image one underneath this div we are going to be writing H1 with the class of customer name her name will be Anna Maria and let's just

write a paragraph with the class of customer description and let's just put a little bit of lmm Inside there I'm going to just go with this Elliot or Elite whatever you want to call there and let's just duplicate this customer a few times so we are going to be selecting that and we have our first customer and we have second and third so yep the images are the same so let's just use image two in this case and name to be I don't know let's just not worry about the name so this one will be

three so customer and customer images so if you sell that we have all Of these peoples right here but we don't have their images so let's just get into our CSS and write a comment like products section end and write uh customer uh review section start section start uh duplicate that and change that to end as well and we're going to be placing all of our customer review styling in here so customer uh okay CER customers reviews just check the classes so Customer heading customer reviews copy there I'm not sure about my spelling so I'm

going to pass it in here customer reviews margin for the top will be five frame display will be totally Flex Flex rep will be now set to R justify content will be now set to not Center but space around and align items will be now set to Center okay so that's it about that customers review you cannot see that right now let's just select our each customer c s m oh my goodness I'm going To have to copy this name yep text align will be now set to totally at the center let's just get our

customer headings so customer heading okay so font family will be now set to totally that main not main but primary font which you which you use as a variable font size will be two RM and margin bottom I'm going to give him like 20 pixel and text Al line it be now set to Center and margin for the top area I'm going to give him like 10 rims so Now if you save that and this is how it looks like right now anyway so now let's just start working on our customer reviews so uh let's

just use our customer reviews first of all and then use a customer description so font size I'm going to increase there to not increase but decrease there to 12 pixel margin margin for the top will be 20 pixel and Max width I'm going to give him like 200 pixel and text align in this case will be now set to Center and Margin I'm going to give is like 10 pixel and finally let's just use our font family of water and primary font see if you sa that and let's just make it a bit bigger so

you guys can see everything let's grab that in here yeah so now I guess that it's time to place our images in here we have our customer and then we have a customer image and now let's just get the image so what do we have to do we got a g a width of some sort like uh 200 pixel will be fine duplicate that oh my goodness my shift key is not working I don't know why and then height and then let's just provide a border radius for that 100% And background size we are going

to be using this cover and background position I'm going to give him is like center background Position will now set to Center and margin I'm going to write margin zero Auto and margin bottom uh b o t o m of like 20 pixel and now let's just use our Images so we have customer one two and three so we are going to be using customer then image one so what we have to do we have to just use a background image of URL and let's get into our images folder go back images folder inside this

images folder we are going to be selecting uh this last one image and now if you save there so here you can see this image will now take its place right here let's just duplicate that two times so this is going to be a Customer two and this is going to be the customer three and let's just change these images to something else like this George one and this one will be set to um million or whatever it so say it and yeah this shouldn't have to be an N it should be like maybe some

sort of a John do uh Alex would be F Alex meron so if you sell that we have our Alex meren then we have our Anna and I don't know this is going her name is going to be Like uh Alisa maybe Alisa Alisa or yeah Alisa would be fine so if you s them I'm not sure about this name if there's a valid name or not but I just give her name anyway so that's it yep that's it about our customer review sections and now let's just finally start working on our footer area so

this is going to be the final thing of our project so here we just have to write a fer start and duplicate that fer end let's just write our folder And inside this folder we are going to be writing our container inside that container we are going to be writing a folder heading and here it will be now set to location and then we have a folder uh primary heading okay so we going to be writing like heading I don't know you can just go with any heading like a real word would be fine so

if I just put like a real word in here and let's just write a street as well so we have another footer okay so this is Going to be our H1 and this one will be our H2 so now let's just change that to H2 H2 in here as well and this one will be or H3 let me just get third button otter primary uh headings as well so we have primary heading so we have four 2 1 three and this is going to be our straight sum where on Earth back now let's just duplicate

There two times so we have a location then we have like a working hour so a work freaking hards and it will be now set to I don't know Monday Dash Thursday and also Dash Friday and Saturday there Sunday and let's just change this one to contact us uh yeah that contact us would be f Co and I'm going to remove that and change This one to my email so webd Academy 6 gmail.com so if you s that and this is how the folder looks like now let's jump into our CSS and fer start and

fer end okay so zoom in let's just select our folder area right here and we are going to be changing the background color to be like 1 F1 uh e 1 e one more time so this this is going to be the background color let's just provide a margin top of 10 RM and the color will be totally white and let's just use our display Flex because we want everything to be wrapping so for that we can use a flex wrap of rra justify content will be also set to space around align items will be

now set to Center and give him a height of 100 VH and font family will be that one of our primary font so if you s there and this is how it looks like but now we have to tweak a little bit more things in there so let's just get our footer footer and then container inside this container we want to get our footer Heading so what do we want to do with this we are going to be using like a margin bottom of maybe three rims so let's just put three rim and use or

footer let's just provide our container and I forgot to get my footer heading uh not footer heading but for a primary heading the font we will be now set to to it normal font size I'm going to be using is 15 pixel and the margin bottom will be now set to 20 pixel so if you Save that and this is how it looks like okay so if you just make it smaller I know everything is looking weird because we didn't use any media queries for that so now let's just use our media queries and and

this is going to be the end of our project so let's just use like a media queries I'm going to write add media for uh only the screen size and also the max width will be set to 900 pixel okay so what do we have to do we have to just write a Header area the height I'm going to give like 120 viewboard height text line will be now set to Center so if you s that make it smaller and this is how it will looks like on a smaller screen sizes all right so now

let's just get over section one uh and we are going to be writing a section one and height will be now set to like 120 view per height and text line will be also set to Center as well okay so let's just get our header image so I'm going to write header IMG and Width will be now set to like 250 pixel and height will be also set to like 250 pixel if you save that so it will now just uh decrease the size of both of these images right here okay so we are not

toly cool with this section and now let's just write or let's just work on our main headings real quick so we have our main headings and font size I'm going to be us using is like three rim and margin top I'm going to be using is like two Rim so if you sell that and yep That's about our headings like main headings so now let's just take care of our primary headings which are these primary headings so let's just take care of that real quick so what do we have to do we have to just

write a primary headings and the width will be just 400 pixels so if you sve that and yeah that's looking a bit better and these are also looking better so final thing which you have to do for this project is to just select our Customer and select all of the customer images and select our image let's just decrease the sizes of them like 100 pixel width and 100 pixel height so if you save there and check them out so this is how it will look like and everything is working the way we expect them to

work I'm going to make that adjust a little bit bigger and this is how everything looks like so if you just see that in a bigger screen this is how it will looks like like on a bigger Screen so if you want to provide a lot of styling so this project is now yours if you want to find the coding so you will find the link in the description below you can click on that and you can grab the code from there anyway so thanks for watching and I'll see you in the next project all

right so before getting into the project first of all I want to mention one thing if you want to use the same images which I'm going to be using In this project so I'm going to give you the link in the description below you just have to click on that and it will bring you to my gab repository and you can download all of the code for this project and all of these images which I'm going to be using throughout this project and if you want to use your own images so feel free to do

that so now let's just begin U by writing some code so first of all I'm going to just create a folder give name of like Index.html and I'm going to just drag it to the root and now let's create a new file give name of like style.css and we are good to go so now let's just write our doc type HTML in here and yeah that that's going to be fine and I'm going to just change the name to the bar birs I guess so now let's just link it with our CSS file as well

okay so now let's just link there real quickly and I'm going to just uh hide this head area from there right click on it and open it for the Live server and now we can see everything a bit clear so it will open our file in a live server right here and here you can see the title all right so that was the first thing now the next thing which you have to do is for HTML we are going to be writing our header area so if you want to work with the head area so

we are going to be first of all writing a header and we are going to be also g a class of header so inside this header we are going to be using our Navigation and I'm going to also give him a class of navigation so inside this navigation we going to be writing H1 with a class of logo so just write a logo and I want to just put like bar Birds inside there underneath this H1 we are going to be using ul and then Li and then anchor tag and we want that to be

like uh I don't know four of them so I'm going to just start four it will go to nowhere so the first one we have is a home the second one we have is Experience so experience and now the third one we have is about section and the fourth one we have is a Services services like so all right so now we are totally done with this header and navigation area so now if you s file and this is how it looks like right now okay so I'm going to just zoom in a bit all

right so we are totally done with the header HTML so now let's get into our CSS and now let's just style that but before we do first first of all we would need a few things so let's just get a fonts first of all so I'm going to just write like fonts. google.com and here we are going to be grabbing two fonts so I'm going to remove both of them and let's just search for the first one which is that play uh fire or fair whatever you want to call it f a iir okay so

I just messed it up something and I'm not sure okay so Fire display is That a fire or Fair mhm let's just see Fair display yep okay so it's not giving me any hand so play and if okay let's just write it manually like so all right so now let's just select the second one uh I mean like the first one and we would need the weight of like 8 not 800 but 900 would be fine we want a huge bold one so I'm going to just click on this 900 font wait and now I'm

going to just go back and now let's just search for a font Called robotto I'm going to just search for robotto like here and I guess we're not going to be using that borrow that much but we will just um grab it anyways uh and I'm not sure about the font we of there so I'm going to just like grab all of these fonts so 300 regulars one not a holic one so we are going to be selecting all of them all right so now we are totally good to go so let's just click on

this import and copy that so I'm going to copy that and I'm going to Paste it right here and also let's just grab that and now let's just create our variable first of all so we going to be writing a root and then just write a main color or you know what we are going to be writing main color just in a second so first of all just write a main um font so I'm going to just place this play fire or play fair whatever you want to call it and I'm going to create a

new variable given name of like secondary font or you can also call it um Custom Custom values or whatever and I'm going to now put these uh font value in here and now let's just create a variable for our main color so we are going to be using this main color like 3 7 oh my goodness 3713 and 2D I guess this is going to be the color which you're going to be using throughout if you want to choose your own color so feel free to do that and now let's just write our resets so

here we're going to be just placing our Resets so we are going to be starting from uh piring will be totally zero margin will be also zero and box sizing not box Shadow but box sizing will be border box all right so now if you s file so currently things looks like this so now let's just start working on our navigation so I'm going to just write like nav in here or you know what nav start would be fine so if you just write so this is going to our nav start and then we going

to have our nav end so Let's just start working on our navigation so we just select this nav by using our classro here and we going to be using a display of FL justify content will be space around because we want a little bit of spacing around that item so we are going to be writing align items it will be now set to totally Center so now if you save that and this is how currently things looks like so if you just provide a background color of black and if you s file and this is

how It looks like or you know what you're going to be making the a little bit of subtle like so so save it yep that's looking awful I know so now let's just use that un and Ali so we are going to be selecting this Ur and Ali and which is this Ur and inside this Ur we're going to be selecting all of these allies so now let's just select that and what do we have to do first of all we want to remove that list tile from there and also we want to use a

dis lay off in Line so if you save that and this is how it looks like right now okay so we have to provide a little bit of spacing or padding in there so we are going to be using padding of like I don't know 30 pixel will be fine so let's just check this out if you save that yeah that's cool so now we have to remove this background from now and this is looking better all right so now let's just style uh these anchor tags right here so all of these anchor tags which

is inside Each of these Ali right here okay so we have to first of all select a ul and then Ali inside that and then select or anchor tag and now let's just select that and use a text decoration of none so if you just save that and here you can see it will now remove that uh ugly kind of Border or line whatever you want to call it so we'll now remove that now let's just provide a margin for all of that so I don't know like maybe 10 pixels margin will be fine see

if you Save there yep 10 pixel margin is okay so let's just see what else do we have to do I'm going to change the color to totally black so I'm going to write like totally black color yep and also so the font's family is totally ugly so I'm going to use that uh secondary font in this case so if you s that yeah everything is looking totally okayish so we are totally done with this um navigation bar in here and you know we can also increase this margin if you Want to so let's just

increase that real quick sve it that's looking okay but if you want to decrease this so that's on you if you want to okay this is looking ugly let's just write 10 pixel and now this is looking better anyway so I guess that 10 pixel will be fine if you want to increase or decrease there so feel free to do that by yourself and now let's just write a comment for ourself like navigation and and now let's just start working on our first um what do we Call it header area so we already work with

the header area so now let's just start working on our first section to be precise so we are going to be using a section with a class of content and then Dash Dash and then container okay so inside that we are going to be using a new section so we going to be g a class of like Herer and D DH content oh my goodness c o n t e n t like that now inside there we are going to be using our header and then heading okay so Inside there we going to be using

like the and then BR for breaking and now let's just use bar Birds okay so if you know what we not going to be saving that right away because that's going to be looking awful let's just write our paragraph in here and we have to give a CLA of header sub and headings okay so now let's just use like uh I'm going to you know what I'm going to fill it out and then I'll just see you in a second okay and what Chef men's and Boys H and by the way this definition came from

uh I guess that came from um Google I'm not sure about that but I just get there I guess from Google so let's just write a container for button so we are going to be using button contain container and inside the button container we are going to be just placing our one button with the class of main BTN and it will not go to anywhere so now we are going to have to give some sort of a label like uh learn more and Now if you just go back and this is how our HTML coding

looks like so I'm going to save my file and this how it looks like first of all we have a section with a class of content container then we have a section header container and header content to be precise then we have a header headings then we have a header uh subheadings after that we have a bons container we just have a new class of main bdn so now let's just get into our CSS or you know what first of All let's just write or section one uh start would be fine section one start and

this is going to be header and and also let's just use nav and uhuh you know what I'm going to also put a comment in here just for you guys nav start and nav end underneath this section I'm going to also put like uh section one and and let's just go to our CSS right uh section uh one start and also let's just duplicate this line of Code and this is going to be section one end all right so now inside this section we are going to be writing our code so what do we have

to do first of all first of all let's just select our content and then container c o n t a i n e r like so this is is going to be that container let's just see this content container and I'm making sure that I copy the exact same style or class to be precise not style and now let's just use a display of totally flex and flex WP will Be now set to wrap because we want our items to WRA so we are going to be using justify content of Center and also align items

of Center because we want everything to be perfectly at the center and now let's just give a little bit of highight like I don't know maybe 80 viport he would be fine so if you save that and this is how currently things looks like all right so now let's just get into this header content so I'm going to Just copy that from here and what do I have to do I'm going to just write dot or period or whatever you want to call it and now let's just use a display of flex in here Flex

wrap will be wrap Flex uh wrap will be WRA as I said and flex direction will be now set to columns and justifying content will be now set to Center and I'm going to give him a width of like uh I don't know 40% would be fine so if you save that and this how it looks like I know it's ugly but guess What we going to be styling there a bit more so now let's just get or header and what header heading which is this class by the way so we going to be now

styling this class all right so what do we have to do in this class so we have to give a width of like 70% and now let's just use our font family and give that uh what do we call it a secondary font family there we go and we are going to be using a color of RGB which is 82 uh yeah 82 I guess so not 81 so 82 82 and 82 all right so I'm going to give him a margin of 20 pixel for top and bottom and for left and right we would

have word zero all right so this is how it looks like and we selected that as a header heading uh but I'm not sure it's a header heading I guess it's a header headings uh I'm not sure about the all Right so this is a header headings and this one is a header head subheadings so I'm going to copy that one for now and now let's just select that and what do we have to do we have to g a width of that one you know I messed it up something I messed it up this

styling I'm going to copy or cut all of that styling and this styling will go up here and what else do we have to do we have to just increase the font size to just like 4 R and font family this is going To be the font font family of War of main font so we are going to be using our main font in this case so if you save that and this one is looking massive and the other one is looking totally cool and now let's just work on our header image so you know

what for that we have to write a little bit more coding inside our HTML so we are going to be writing not outside from the law section but inside the law section I mean like inside this section but Outside from that uh other section which is called like a header header but header content section so so outside from this uh header content section we are going to be creating a new section called header image so we are going to be placing our image in here so I'm going to just create a section with the class

of header and then D- IMG and then container so we are going to be selecting there but before we do we have to render our image in here so I'm going To just hold control and hit space and I'm going to go to my images folder and now let's just select that Jacob uh person so I'm going to select this image and by the way all of these images will be inside uh my gab repository if you want to check that out and I'm going to also give him a class of what class of header

and then D- IMG and also img1 okay so this is going to be our image one and now uh underneath this image let's just create a new image so I'm Going to just write image and now let's just hit control space go to the images and now let's just select that stepen uh Lou or whatever the guy name is let me just WR WR a class of header D- image and also img2 okay so two and now let's just start working on that so before we do look at these images these images are supremely long

so supremely high quality images look at this guy so now let's just start working on our CSS and then You'll get to know what can we do with that so now let's just work on this section so first of all we have to select that header and then D- IMG so which is uh this header IMG where are you header IMG so we have header IMG right here and we have header IMG class right here now let's just select that give him a width of like 200 pixel and height in this case I'm going to

give him a height of like uh 300 pixel maybe so if we save That and let's just wait for it so this is how currently images looks like all right so now let's just select our header image container first of all or you know what we are going to be selecting the above because this is is the main header uh container so let's just select that and I'm going to pass it right here so we have header image uh containers so I'm going to give him a width of like maybe 30 let me just write

30% in here and I'm going to also give Him a height of like 50 VH and the position in this case will be relative okay so now what else do we have to do now let's just select our image one so img1 which is this class right here okay so now we selected that image what do we have to do with that so we are going to be using a position of absolute in this case and now let's just write a left to 10 RM okay so this is going to be the first image so

if you save that and this is how it looks like right now okay so Now let's just work on that second image which is that img2 class so let's just select that IMG and then select or two and let's just use a position of what position of absolute in this case and WR a left to 30 not 30 rim but just PR and Top Value will be just add Rim so if you s file and boom this is how it looks like but if you just give a little bit of margin not margin but height

of like 100 vs so it will look cool you know what you will see that in a second so Now let's just style this uh button real quick so we are going to be selecting the button first of all which is the main button B Class of main BTN I'm going to copy that and I'm going to select that right here so what do we have to do with this so we are going to be using not a padding in line but padding so padding 10 pixel for top and bottom 20 pixel for left and

right and text decoration we want to remove the ugly border the background color we are Going to be using or on oh my goodness BG God damn so war will be now main color and let's just remove that and color will be now in this case totally white I'm going to use a font family of water and totally secondary fonts if you have that and this is how it looks like right here I know we can provide crazy styling in here but for now this is totally looking better anyway so I guess we are totally

done with this header section and now let's just get into the Experience section real quick all right so outside from this uh section one I'm going to create a new comment for myself which will be like experience experience section start and now let's just write first of all a section with the class of experience and now inside there we are going to be creating a new class not a class section with a class of experience and D Dash contents so inside this experience content we going to be using H2 in this case and which will

be like uh I don't know gray and heading so let's just give him a value of 30 years 30 years and now let's just use our H1 with a class of uh header and Das Das heading so we are going to be using this class which we style right here so we have that header heading uh class right here so we are now reusing all of their styling right here so we have a heading not heading oh my goodness what the hell is wrong with me header heading So now let's just give him another class

of experience heading so exerience and then not dash dash but just a single Dash would do so experience heading now inside this class we are going to be just using experience in uppercase underneath this H1 uh you know I'm going to just zoom out a bit so you guys can see everything a bit better and now let's just use a paragraph with a clause of so lower case par graph with The class of header and then subheadings we are reusing that class which we selected above and then experience experience e exp p e r i

e n c e there we go and then experience subheading or S to be precise so headings PL plural whatever so Barber is a person who you know I'm going to copy that I don't have to rewrite it again and again I'm going to copy that real quick and I'm going to past it right here yep uh that's cool now underneath This paragraph what we have to do we have to write a section with a class of BTN container so we are going to be reusing the bdn container class which we use Above So now

let's just create an anchor class uh I mean like anchor with the class of main BTN and we are reusing that button right here one more time so learn more in this case l e a r and yep that's fine underneath this section or you know underneath this section like all of the Above all of the underneath so we are going to be using div with the class of experience IMG ex ex p e r i e n c e yep that's cool all right so now let me just show you everything and then you'll

get to know what I'm talking about so first of all we have a experience section right here then we have a experience content section then we have a gray heading so these will be a gray heading so that's why I provide a class of gray heading and then we have then we are Reusing this class from above like header heading and then then we have a new class for this experience then we have a then we are reusing this class one more time and then we have a new heading uh or new subheading class right

here then we have a buttons container we are reusing this totally same clause and then we have a new day with the class of experience image all right so now let's just get into our CSS and now let's just tile that a bit so I'm going to zoom in A bit first of all I'm going to write a comment for myself like experience section start and now let's just duplicate that and change it to experience section end and inside this experience section first of all we have to select our experience oh my goodness x p

e r i e n c kind of a long spelling for this one let me just double check so we have this class experience yep both of them are fine so first of all what do we have to Do I'm going to give him a height of like 90 uh VH like a vort height and now let's just give him a margin from a left so like fire fre would be fine I'm going to give a display of totally Flex because we want everything to be flexible so Flex WP will be set to wrap justify

cont will be now set to Center and align items will also be set to Center so I'm going to just also provide a margin top of like 10 RM because you want a lot of huge spacing in there C if You s file and it will take a little bit of time and this is our experience section right here so now let's just style that uh experience image which we provide right here so we have experience IMG right here so now let's just style that a bit so we are going to be using exp all

right auto complete is super awesome in visual story coder and we are going to be not using a background color but a background image of URL and then let's Just go into an images folder and we are going to be selecting that EU sorry I can't pronounce your name but I'm going to select this image and now let's just use the background size of totally covered and also provide a width will be like uh I don't know 300 pixel would do and duplicate that and change this one to 350 and this is going to be

for our height and now just put a margin to the left not to the top but to the left of 50 pixels so now if you s file and let's Just wait for it so this is our guy right here and this is how his image looks like all right so what do we have to do so let's just style this gray heading so we forgot that let's just copy it and I'm going to paste it right here select it right here to be precise and let's just write a color of only gray and also

the font family will be just a main font so if you save that and here you can see this is how it looks like right now okay so what else Do we have to do we have to select the Buns container which is this uh button container right here in this case I'm going to copy that and here I'm going to select it real quick and now let's just provide a margin for the top to be like I don't know 30 pixel will do and if you save that yep that's awesome and this is how

it looks like and for now this will be not responsive if you check it so this is not respons I mean like it is responsive but it's not looking that Much great so once we jump into media queries we are going to be making that responsive so this is the end of our experience section all right so now let's just get into a new section called what so this is section is called as social media or whatever you want to call it so you're going to be creating a section or you know what first of

all let's just write experience section and all right and now let's just write uh social s o c i l Media um section start duplicate that and this is going to be the end of that social media section I wish all right so let's just write a section with a class of social media inside that we are going to be using UL with a class of SM and container and then let's just use our div with a class of follow so this is going to be that kind of a uh grayish or whatever you want

to call it that color so this is going to be that follow huge button so we going to be using Ali of List items so inside each of these list item you will have our anchor tag and we want them to be like uh I don't know so I'm going to use my imit real quick and by the way if you don't know what a imit is so you can check out my video on there and we want them to be like four of them so it will go to Nowhere first of all we have

a YouTube and then we have Instagram it will go to a Facebook and then finally we have for Twitter all Right see if it's our file and we cannot see that coding right away because it's hidden so now let's just get into our CSS and now let's just tile that a bit right so I'm going to just WR a social media section start and then this is going to be the end of that social media section all right so what do we have to do in this case first of all we want to provide a

margin so social media let's just select there which is this social media media let me just double check so That I didn't mess up with the spelling and let's just write a margin margin all around like fir frame would be fine and I guess that would be fine so this is how it looks like for now I know it's looking awful so we are going to be selecting there or we are going to be making cool there just in a second so first of all let's just select our SM container which is that SM container

right here okay so let's just use a display of totally Flex Flex wrapping Will be now set to WRA and justify content will be also set to Center align items will be also set to Center and then text align we are going to be using Center and margin for the top we are going to be using turn Rim so now if you s file and this is how it looks like for now okay so everything is perfectly Center and so on and so forth okay so now let's just style that follow button which we provide

right here so now let's just select that first of all and now Let's just style that so I'm going to use a padding of 20 pixel and I'm going to also provide a background margin to be that Main color which we've uh declar above so we are going to be using a color of totally white a text color will be totally white so we are going to be using a font family of that variable as well which is that secondary variable or Roboto so font we will be now set to totally B and margin I'm

going to give like margin for the right so 30 not 30 But three why am I saying 30 all the time so text alignment will be now totally set to Center and if you save that and this is how our button looks like for now okay so this is not a button but it's kind of a label for social media anyway so we are totally done with this section as well if you want to change around so feel free to do that and we are going to be using media queries for that as well all

right so we Are totally done with the social media section what else do we have to do now let's just work on our hero area so I'm going to make it bigger and here we have to just write a section for or hero so let's just write a comment for myself like a hero oh my God why is this getting replaced in here so let's just use or hero section start duplicate I want to cut that from Here and I'm going to paste it underneath this section so hero section n all right so n and

start so inside this section we are going to be using uh div with the Class of Hero container I messed it up container like so inside this hero container we going to be creating a new D with a Class of Hero and then content content so all of our content will goes inside there and we are going to be using H1 with the class of Header d d heading and we're going to be also using hero D DH um what headings in this case so we have a header heading and we have a hero headings

all right so let's just write a meet and BR or hero so or uh hero okay like so and under them we are going to be using a paragraph with a class of header and then D- sub and headings so we are going to be also using header and D Dash D Dash subheadings so inside this class we are going to be reusing that text again So in start of writing that lur if I'm going to be using this text throughout this project okay so I'm going to past that right here and outside from this

paragraph what we have to do we have to create a new container with a class of BTN container and we are reusing the that one more time so we have a main BTN and learn uh learn more and it will go to nowhere okay so nowhere so if you sa that Zoom back and this is how all of the coding looks like so I'm going to Zoom in a bit one more time so we have a section with a Class of Hero then we have a hero container inside that we have a hero content container

then we have a hero heading then we have a hero headings and we also have her subheadings and stuff like that then we have a b container all right so now let's just start working on that so I going to zoom in a bit so let's just select first of all or hereo section and what do we have to do I'm going to give Him a height of 100 VH so we are going to be also using a display of flex in this case justify cont will be now set to Center align items will be

now set to Center and sa file and this is how currently things looks like all right so now let's just select that here container real quick which is this hero container so I'm going to copy that and I'm going to just select it in a second and let's just give him a width of like uh I don't know 70 70 oh my goodness not 79 70% and I'm going to also give him a display of flex and justify content of Center align items of toally Center and yeah I guess that will be fine for now

and also the flex wrap will be now WP in s file nothing will happen for now anyway so now let's just select our hero image container so we are going to be writing a hero then image then container so do we have a hero image container did I just put a hero image container I Guess I forgot to include that uhhuh so we are going to be using this hero image container uh underneath this header uh this hero container so we are going to be creating a new container for a hero IMG and then container

so this is going to be or hero image container so now let just style that a bit so first of all I'm going to use use a background of our URL function and let's just go to our images and select our Albert this kind of person so now Let's just WR a background size of what cover totally and background position uh will be now set to what top and now let's just give him a width of like 300 pixel and I'm going to also give him a height of 400 pixel in this case so I'm

going to just change that to a height and also let's just select or hero and Das Das subheadings which we provide right here so we give this hero heading Clause not this one but we we Give a hero subheading CLA and we also give a hero subheading I guess we have so we have hero subheading CLA and we have hero of heading class right there all right so I'm going to just give a width of like 400 pixel in this case so now if you save that and this is how it looks like so you

know what we need a little bit of margin for the left so let's just select or uh hero d d content so hero D- content I'm going to just use margin for the left like six rims so if You save that and this is how it looks like right now okay so we are getting there so now we are totally done with this hero section so now let's just write our comment for ourselves so I guess uh social media section n and let's just write hero section SCT and then start copy that and go to

the bottom and I want to past it right here and this one will be end so now let's get into a new section called Services allart right underneath this Section or hero section and we going to be creating our new section with a class of services so section services so inside the services section what do we have to do we have to just write H2 with a class of gray heading and also services- G but not just- G but D- G and then heading okay so we to be using like a top quality in this

case and underneath that we going to be using our H1 with the class of header Das D heading and in this case we are going to Be also give a class of services and then Services heading all right so now let's just put a label of services in here anyway so now underneath this H1 I'm going to just zoom out of it so you guys can see everything a bit better and first of all let's just create our card section so section uh with a class of cards like a plural cards not a singular so

inside there we going to be using a few cards so we have a card container one then we Have a div the class of card IMG and then img1 okay so this is going to be the image forward card and now let's just use a card content so this will be the content of our card so we going to be using like H1 with the class of card title and this is going to be the title of our card so I'm going to use like a hair h a i r of cutting and now let's

just write a paragraph with the class of card info and inside that you're going to be using or reusing That info one more time so I'm going to copy there real quick and I'm going to paste it right here okay so groom style would be fine so instead of writing and shaving and stuff I guess that would be fine and underneath this paragraph you're going to be using anchor tag with a class of what main BTN and also the car BTN so here you're not going to going to anywhere so let's just put a LM

not if somebody learn more and if you s that so this is going to be our First card so let's just click on here so it will now select it right here I'm going to select this first card and I'm going to use it like two more times so this is going to be the second and then the third and now let's just change the content inside there so this is going to be for hair cutting and this is going to be for beard trimming so beard treaming like so and I guess the other stuff

will stay the same and this is going to be for what this is going to be For smooth shf so smooth shf like so so if you s there and this is how currently things looks like right now I know it's ugly now let's get into our CSS and knowled let just style or Services section uh section start duplicate then this is going to be the end of word service section all right so now let's just start working on our styling so what do we have to do first of all I'm going to select my

services section Right here for the margin top I'm going to give like 10 Ram okay so let's just write our code a little bit fast because I know this video is getting longer so services and also that g so I guess that was a D- G of heading I'm going to give him a margin for the left and margin left would be now set to five frame and now if you save there this is how currently things looks like and now let's just select our services section heading so services- heading I'm going To give a

margin left for like fir frame and also the margin bottom will be now set to 20 pixel all right so now this is style or card section so first of all I'm going to select my card just a regular card or you know what we are going to be first of all selecting our cards like a plural uh which is this one let me just show you there real quick so we've got one card two card three card we have this card section right here not a card but a card so now let's just Select

that and now let's just style that up so what do you want to do with this so first of all we are going to be using a display of flex on it and then Flex WRA everything we want them to be WRA so justify content will be now set to toally Center and all items will be also set to what center now if you s file and this is how currently things looks like all right so now everything is now totally at the center now let's just select each of the card I'm going To give

him a width of like 300 pixel duplicate that and change that to like he will be also 400 pixel and position in this case I'm going to give him like relative and box Shadow uh not sizing but box Shadow so it will be one pixel one pixel one pixel one pixel and RGB and I'm going to just give him a little bit of like a subtle kind of a shadow so 223 22 3 223 would be fine all right so I'm going to just provide a margin of 20 pixel all around and now if you

sell That and this is how you can see there so so width will be 300 pixel and height will be 400 pixel and we just provide a little bit of box Shadow to it anyway so now let's just select our card image so which is that card image so we provide that class to each of the card we are going to be g a width of like 100% and height in this case will be now set to 200 pixel Position will be now set to totally absolute and top will be zero left will be also

zero so I'm going to Just provide a background size of totally C and background position in this case will Me Now set to top and if you save that let's just see all right so we cannot see anything so now we can select each of our card and we can specify different kind of images for that so first of all what do we have to do I'm going to select my image one so I going to just write like img-1 so if you just write that then I'm going to just provide a background not a

Color but image so background image I'm going to provide a value of URL I'm going to go to the images folder and we are going to be selecting our John and that first image so now let's just duplicate that three times and not three but two times and this is going to be now now the second one change the image to something else so uh let's just select like Al if or whatever the name is and now let's just select the other one and this one will be now Christi sorry I can't pronounce the name

of it so now if you save that and now let's just wait for it so here you can see uses all of these images right here and I'm not sure if all of them are same images or what's going on so we've got image one two and this is going to be the three so image three let's just wait for it to render uh okay something went wrong so we have img1 img2 this is going to be the what is That img1 img2 and img3 let's just see so we've got we didn't change that so

this is going to be uh image one this is going to be the image two and now let's just check this one out and this is going to be the image three so now if you s file so we will now get totally different results right here all right so now let's just get into it one more time and now let's just select that card content first of all so we going to be selecting that card content and now Let's just provide a transformation and it will just trans it will not just translate itself to

like the YX YX is uh will be 200 pixel and the text alignment will be now set to Center and Marin I'm going to just give like 10 pixel and know if you sell that and this is how the content looks like right here inside these cards so what else do we have to do now let's just style that card title real quick so we are going to be just selecting card title and let's just Provide a font family in this case so we going to be just providing like a sensor would be fine and

font weight will be now set to totally normal I'm going to g a margin for the bottom like 20 pixel for top and you know what uh I'm going to just give margin of 20 pixel and color will be not totally black and if you save that and this is how it looks like right now all right so that was a s car title now let's just select the card info like these info these text right Here so now if you just write like card info inside that we are going to using a font family

of water or secondary font and the text alignment in this case will be now set to Center and I'm going to change the color to be like um R GB of 109 and let's just write 109 and 109 in here come on 109 and this one will be also 109 all right so now let's just provide a margin for the top and bottom will be 30 pixel and for the left and right let me just select there for the Left and right will be 40 pixels now if you s file and this is how it

looks like right now so we are now totally done with the services section as well so now let's just start working on our for area so this is going to be the last area of our project so we are going to be working on a pH all right so for HTML I'm going to just come here and inside that section I'm going to just write a comment for myself like uh services section s c o n n n I guess I write that Somewhere in here you know what this is a here section so let's

just write a Services section s e c t i o n and then start go down and now let's just start working on our folder area so I'm going to write a folder uh section start and now let's just duplicate there and end so what do we have to do we are going to be writing a folder with a class of folder and inside this we are going to be writing a d with a class of f D- card so lowercase Card and now inside that we going to be writing H1 with the class of

f D- card and then Dash title and the title will be about in this case and now let's just duplicate that or you know what we are going to be first of all writing a fter and then D- card I'm going to have to write a comment in there not a comment but period so card and then Dash info and hit tab so this is going to be like a general duplicate there uh this is going to be g n e r a l like A general uh all right so now let's just write a

traffics uh duplicate this one more time and Fa AQ okay so what do we have to do we are going to be duplicating that one and two so we are going to be duplicating that two times as a title I'm going to change that to like legal and then we have a privacy and policy is p r i v s c y and p o l i c y so PR and policy so terms uh of uses Us lowercase uses oh my goodness I guess something went wrong in my shift key so use this uh

all right so then finally we are going to be writing a payments okay so underneath all of them now let's just change the title to be a contact and also this General will be now set to Twitter and also this is going to be Instagram if you want to follow me on let's just write that to Facebook so if you save that and oh my goodness and this or photo right here so now let's Just get into the stylesheet and now let's just style that a bit so first of all let me just write a

comment for myself uh folder section start and duplicate and this is going to be the end of that F section so what do we have to do we are going to be first of all selecting our folder and now let's just change the background color to be like one of that main color which we already choose and display be set to totally Flex justify con will be now set to Space around because you want everything to be I mean like you want a little bit of spacing in there and text alignment will be also set

to Center okay so what else do we have to do you want the color to be totally Pure White and height will be now set to five or 50 VH margin top I'm going to give him like 10 RS so if you s that and this is how it looks like for now I know it's ugly now let's just style that titles and stuff so first of all we have have to select that um what Do we call it folder D- card and then Dash title okay so inside that we are going to be just

changing the font family to like a main font not main color but main font okay so underneath that we are going to be using fter D- card and then Dash what info let's just select that and we are going to be changing the font family to like what secondary font and also the line heart will be now set to Two Rim so if you sell that and this is how it looks like Right now so I guess we messed up something so we have for card info copy that in here and I want to pass

right here I guess both of them was fine anyway so now we get that I guess a card we have to put a card in there so this is going to be the D D and D let's just for a d for them my apologies and d and d so save that and this is how it looks like for I guess uh something is wrong card and Also save this file all right so now it's looking better so now we are totally done with our project but the final thing which you have to do is

that we have to write a media queries to make the sign totally responsive so I'm going to just make that to smaller screen size and you can see like it's not that much horrible but if you just go a little bit more smaller so everything just looking a bit awful so for that we have to write media queries so I'm going to just write Finally the response sess I guess that's the spelling I'm not sure but first of all let's just write add symbol and media for only screen and what and Max width if the

media query Max width is like 600 pixel so you want to select our header D- content first of all the header content so what do you want to do with that I'm going to select that and align items I'm going to set that to Center and text alignment I'm going to also set that to Center okay so The width I'm going to give like 70 uh% in this case I'm going to write 70% and if you sell that and this is how it looks like you know what let me just show you uh okay something

isn't working so HR header content z n NT T line is Center uh you know what I'm going to also take care of these images so that they look a bit better I'm going to select my header d d image and then container like so and just write display of n so we are going to be also removing That and this is how it looks like for now okay so everything is perfectly centered and that's done now let's just take care of these section like uh what do we call experience section so first of all

we are going to be writing exper experience right here and height I'm going to give like 100 VH and margin will be zero Auto so that everything is now totally at the center so sve there and this is how it looks like right now okay so I guess we messed up something In here which is um Twitter uh which is experience heading I guess so let's just select there real quick um experience and now let's just select our headings experience headings and I'm going to just increase the sizing of font size to be like three

and if you sell there uh okay something isn't working that we expect them to work so what is in this CL class card so we got to go to uh experience and then we Have our subheadings I guess so subheadings or you know what experience subheadings I'm going to select that and what else can we do with that I'm going to write a text alignment of Center seven I'm going to write a border of like five pixel solid red and if you sell that I so that's that what can we do with that margin is

zero Auto so what else does that one from us If you just WR margin zero Auto in this case all right that's looking better yep that's looking better anyway so you can provide margins in there if you want to so if you just remove that text alignment is still working and yeah that's cool now what else do we have to do let's select that image or you know what that's fine but you know what I'm going to select it and change the size of it so experience uh what experience IMG so now let's just Select

that and the width will be 200 pixel the height will be just 300 pixels okay so now let just provide uh I guess that would be fine so if you sa that you know what that's looking awful so I'm going to remove this experience image section from there and let's just work with that subheadings um now let's just work with these buttons and stuff like these so first of all I'm going to just write like a buttons container let's just select that and I'm going to use a Margin top for all of these um buttons

container and I'm going to provide a margin margin top of 30 pixel for top and I'm going to also provide a margin for the bottom like 3. five Rim so if you sell that and I guess that's looking better right now okay so if you want to change it more you can also change that if you want to and now let's just style or you know what let's just remove this follow button because it's looking awful so I'm going to write like a follow in Here and if you want to leave it there so you

can also just tweak around the things but I'm going to just remove that so if you save it and this is how currently things looks like right now all right that's looking better and we are totally done with this card SE because there is nothing to change in this card section um there their areas there I guess that was SM container or what SM container let's just select that and what do we have to do with that so We are going to just using a flex direction of column see if you save that and yeah

that's looking better anyway so now let's just select our list items so where is our list item and here here is so now let's just pour a little bit of spacing in there so I'm going to just write like a list items and margin I'm going to give him like 10 pixel all around and I guess that's looking better if you want to change it on other ways so you can totally do that if you want To but in my case that's looking totally okay and hero image container so let's just work on this hero

image container like so so I'm going to just select that first of all uh we have our hero then image uh all right so we have image and then container so what do we have to do I'm going to just give you know what that's looking that's looking fine I'm not going to work with that uh hero image container because this is looking totally okay if you want to Change that so you can totally do that if you want to but in my case it's looking better and then we have a hero um what hero

headings not subheadings but we have a hero headings so we are going to be just writing a font size of three rims so if you sell that and this is a little bit smaller than usual so I guess that's looking better if you want to leave it the way it is so you can just uncommit it and this is how it will look like if you want to I guess this is How it looks like and I guess I'm going to go with this style I don't have to increase or decrease the size of them

and let's just write over hero D- content c o n t n t and I'm going to provide a margin of zero Auto so that everything is not totally at the center uh-huh that's not working for the left and right it's Auto uhuh you know what this going to be zero for the left and right I'm going to give him like 20 Pixel maybe oh so I'm going to remove that that's looking okay in this case we can also we can also decrease the size of this container if you want to but for now it's

looking totally okay and services section so what about it this is also looking better so I guess this now like totally responsive if you want to play around with this side so totally do that if you want to okay so in my case it's looking better in my machine To be precise uh okay so everything is working the way we expect him to work so now we are totally done with this project and I will see you in the next project so bye-bye for now all right so before getting into the project first of all

let me mention one thing so if you want to use these same images which I'm going to be using throughout the um project so you can just click on the link which I'm going to give you in the Description below and which will bring you to my giab repository and you can download all of these images from my GitHub repository and if you want to use your own images so feel free to do that so I'm going to just create a new file let me just zoom in a bit I'm going to create a new

file given name of like index.html and now let's just create another one given name of like style. CSS for styling all right so in this index. HTML file I'm going to just Create a doc type HTML first of all so doct type HTML so what do we have to do I'm going to give a name of like chairs and I'm going to also uh link it with my CSS file as well so I guess I messed it up something so c h a i r s I guess that's fine so now I'm going to just

hide this heading area or head area now I'm going to right click on it and open it with the live server so it will now open it with a live server all right so we have nothing Inside our body and stuff so now let's just get in toward first thing so the first thing which we are going to be start working on our nav uh section start so we are going to be start working on our navigation area first of all so I'm going to write like N St oh my goodness St a start all

right so now let's just duplicate that and change this one to nav section n and inside that we are going to be just writing our navigation Inside this navigation we are going to be creating a div with a class of logo because we are going to be putting our logo inside this div now inside that we are going to be just writing a one with a class not a class but has a label of logo all right so outside from there I'm going to write a ul and then lii then anchor tag and now let's

just duplicate there uh I guess four time would be fine so I'm going to just duplicate there like four time it will go to nowhere so First of all we going to writing like Furnitures furniture will be fine and the second one will be project the third one will be I guess like a product will be fine and now let's just write over about a section or it should be like a you know what uppercase would be fine so now if you s file so that's it now underneath this Ur first of all let's just

try our button so underneath this here let's just create our button with the class of um BTN and fill so learn Not learn more but just a register will be fine uh register okay so if you sell a file so this is how currently things looks like so now let's jump into our CSS and now let's just style that a bit so what we have to do I'm going to remove everything from here and now let's just start working on our resets so I'm going to write a comment for myself like a resets and let's

just start working on our everything select margin will be Zero padding will be also zero and box sizing will be now set to border box so this is going to be it for the resets so what else do you have to do we have to get a fonts from our um fonts. goole.com so we have to just go to this fonts. google.com and here we are going to be just getting one font called a play fire or play fair whatever you want to call them I'm going to remove these uh other fonts which we use

in our previous projects so now in this case what I'm Going to do I'm going to just search for a play fire or play fair display whatever you want to call it so I'm going to just click on this um this first one and now let's just select I guess I'm going to select everything all of its styling but not italic one but the regular one would be fine so 500 then we have 600 700 800 and 900 so now you have to just click on that and now let's just click on this import and

let's just copy this link and I'm going To put it above and now let's just copy this Play Fire display or whatever you want to call it and I'm going to put it inside my root or you know I'm going to past it right here and I'm going to comment that for a second and now let's just start working on our variables so the first variable which I'm going to be creating is a main color so we are going to be using this color throughout so which is E3 e uh 8 E4 I guess that

was the color and kind of a grayish color so Now let's just create a new color which is a primary color so this is going to be now like 36 36 and 36 yeah that's going to be fine a little bit darker gray then we have a main font so main font which will be that font so I'm going to comment that I'm going to cut it from there I'm going to past it right here so if it's s file so these are it for variables okay or custom properties whatever you want to call that

now let's just start working on our navigation but Before we do I'm going to have provide a comment for myself of like a nav section start okay so this is going to be the comment and now inside that what do we have to do we are going to be first of all writing a display of flex justify content will be now set to not Center but just a space around and now let's just write align items and it will be now set to Center and text align will be also set to Center okay so font

family I'm going to change that to like not war But I guess I'm going to just change that to sensor would be fine you can choose whichever kind of font you like but in my case sensor would be fine so ping I'm I'm going to give like 10 pixel all around and now if you save that and now let's just preview it so it's looking cool but we have to take care of this so we want to set that to the inline style so what do we have to do for that first of all we

want to select this UL I mean like this Li which is Inside this UL so we want to select that so for that first of all we are going to be writing a UL then inside this UL we have our allies so now we select that now let's just WR display of inline okay so if you just sell that you know I'm going to just sell this file and now it's looking cool but now also remove that list style and now let's just set that to non and if you s that that wasn't showing up

but we still remove there anyways so now let's just start Working on our each of these anchor tags which is right here so now let's just select that so if you want to select that first of all we are going to be using a UL then Li and then anchor text so now I'm going to just write a text decoration and none so it will now remove that text decoration from this uh anchor tags and what else do we have to do we going to be also changing the color to be totally black and margin

for the lift area oh my goodness what am I Even doing so margin for the lift uh I'm going to give him like four R be find and now if you sell that and these are looking cool you know so these are looking cool now what else do we have to do I'm going to also provide a how effect on that as well so for that let me just select that UL Li and anchor tag one more time and now let's just use that how effect on there so once we H our Mouse over to

it so we want to provide a border for the bottom to like Two pixel and solid and now let's just use our what let's just use our primary color so padding for the bottom I'm going to give like 10 pixel and now if you s that and now if you have our Mouse over to it so here you can see we are now getting that border bottom right here okay so now let's just take care of this register B real quick so what was the class the class was BT and fil so I'm going to

copy that from here and I'm going to just paste it right here so Let's just select that ptn fill and I'm going to just provide a pading of like 10 pixel for top and bottom 30 pixel for the left and right and I'm going to also change the background color to be like a water of their primary color which we declare and also let's just use a border to be like none because we want to remove their ugly border and now let's just set the Border radius to be 100 pixel and color not columns but

color in this case we Going to be setting that to like totally Pure White and cursor will be pointer so if you save that and here you can see this is how our button looks like so if you have our Mouse over it so we are just getting that cursor button cursor appointer to be precise so now we are totally done with this navigation as well so now section end so now let's just get into our HTML and start working on our header area so that was just ACC cording for navigation So now let's just

start working on our header area so I'm going to write a comment for myself like a header uh section start and duplicate that and this is going going to be the end of that heror section so what do we have to do first of all we are going to be writing a Herer and we're not going to be giving any classes in whatsoever so then we have to create a content content and then container so inside this content container we are Going to be writing H1 with the class of main headings so these are going

to be the main headings of our web page so the most and then BR and now let's just provide like Span in here and we're not going to be giving any classes whatsoever so comfortable com for table okay and also Prov a be in here and now let's just start working or you know I'm going to write like a chair for you for you in a capitalized cases and Now underneath this H1 what do we have to do we are going to be writing a P with a class of primary headings okay so inside that

I'm going to put auram Ipson just like so oh you know what I'm going to remove that oh my goodness I didn't mean to do that this's just remove these um two lines from there and underneath this paragraph tag we have to create a buttons container so that we can reuse that again and again so now let's just Use our BTN or you know btns would be fine in container inside that we are going to be creating two BNS with a class of BTN fill so it will just fill that b and it will take

the styling which we just put right here so now let's just write like a register and now let's just start working on our new button so let's just create that and this is going going to be it for the BTN outline so it will just say like learn more I want to just Zoom out a bit and this is how it looks like so if you server file so these are the HTML coding for header area all right so now let's just get in toward CSS and now let's just style that a bit all right

so here what I'm going to do is that I'm going to first of all start from that button so so that we can put our buttons in one place so you know I'm going to just start working on our BTN and outline so which is the Buton which we create right here so this ban outline All right so I'm going to provide a background color to be totally transparent because we want to remove that background and also that border okay so I'm going to just give a margin for the left like 20 pixel and now

let's just increase the font we of that or not increase but uh just Pro a little bit of boldness to it so a cursor will be poined if you sell that and this is how it looks like for now okay so just actual tech tech text to be precise not Tech uh you know what I'm going to put it right here so now let's just create a new comment for myself like uh header section start and I'm going to just zoom out a bit so you guys can see everything a bit better and we are

going to start working on our headers so I'm going to give a height of like 100 VH display will be now set to totally Flex because you want them to be like totally flexible and flex wrap will be now set to W justify content I'm going to set That to like space between in this case and align items will be now set to totally centered so if you save that and this how currently things looks like all right so what else do we have to do we have to select that content container which is uh

this content container right here so I'm going to just copy that and I'm going to select it right here so I'm going to paste it and let's just provide a margin for the left to be like six rims and also let's just start working On our headings so these headings so I'm going to just make that a little bit bigger and stuff so the class was like main heading I'm going to copy there real quick and I'm going to just space it right there so I'm going to just write a font size of like four

Ram font family I'm going to change that to like one of main font so which we declare above and color in this case is going to be like uh 1 2 3 and four five 6 and four F okay so this kind of a bluish Black color whatever you want to call it and then we have margin for a bottom of two rims so if you save that and this is how it looks like right here now I'm going to just take care of that and I want to make that to like totally pure black

colors so I'm going to just write like a main headings and now inside this main headings we have a span let me just show you that real quick so now we want to select that one and you want to just provide a totally black color on it so If you save that and boom this is how it looks like all right so now let's just take care of these primary headings real quick so I'm going to just select that from here I'm going to write copy there to be precise not right and let's just provide

a Max uh width will be like I don't know 500 pixel will be fine and font family will be also set to send Surf and line height I'm going to just pour a little bit of line height to get like I don't know 25 pixel will be fine And margin for the bottom I'm going to give him like two rim and now if you sell that and this is how it looks like for now anyway it's looking better now let's just take care of that image container first of all so uh we have to write

HTML code for that so let me just get into it and underneath everything so underneath this div and stuff so inside a header area but underneath these buttons and all of that containers so we have to create Another D with a class of IMG and then container uh container like so and let's just render our image so let's just go to our images so so I'm going to hit control space select this images folder and I'm going to just select that Daniel or uh I guess which one should I choose uh okay I'm going to

zoom out a bit first of all let's just zoom out a bit so you know I'm going to select this one and remove BG one so I'm going to just Select this remove BG and now if you sever file Ser long gives us this image right here with the background removed so I've already removed the background from this image so that's why we can see that uh without any background and stuff so now let's just get into our CSS and now let's just style that a bit so what I'm going to do first of all

let me just select my IMG and container so container like so which is this class like IMG container I want to copy it From here I want to paste it right here so I want to make sure that we select the same D so let's just provide a width of like 500 pixel and I'm going to duplicate then I'm going to change that to like height and let's just use a background color to be like totally main color okay so I'm going to also provide a border radius to be like 100% And now if you

s that so this is how it looks like right now for now it's going to be like Totally totally unresponsive like non responsive so we can make that responsive once s jump into media queries but you don't have to worry about their responsiveness and all of that stuff for now so what else do we have to do let's just take care of that image because it's looking a bit smaller and let's just take care of that real quick so image container so I'm going to select my image container and inside this image container I'm going

to select That image and I'm going to just provide like a width of 400 pixel and height will be 500 pixel and the margin for the left will be just 20 pixel and margin for the bottom will be 40 pixels knif is Ser file and this is how it looks like for now okay so it's looking better like so anyways so that's looking cool if you want to change that around so feel free to do that so what else do we have to do let's just start working on our popularity section so I'm going to

write A comment for myself like um header section end okay so now let's just get into HTML and here I'm going to write a comment for myself like uh what popularity section start popularity section start would be fine and I'm going to duplicate that and I'm going to set that to like n and inside that we going to be creating a section with the class of popularity inside this popularity section we are going to be creating a New container with the class of popularity one inside this popularity one I'm going to write H1 with the

text of 12K plus would be fine and now let's just square a paragraph with a class or not a class but a text of a premium product okay so I'm going to just duplicate this one two times so this is going to be the popularity 2 and this is going to be the popularity three okay so let's just change this text to be like something else uh I don't know 21 uh 21k Or k would be fine K plus and also happy customers custom merge all right so also change this text to be um what

uh 28k Plus Award winning okay so this is going to be it for our popularity section so we have one div with a class of popularity inside that we have three more Dives so with a class of popularity one two and three and then we have a lb of text inside this now let's just T that a bit And let's just write our comment first of all I'm going to write a comment for myself like uh popularity p o p u l a r i t popularity section start and I'm going to duplicate that and

I'm going to change it to popularity section n and first of all let's just start working on our popularity section and let's just put display of flex on it justify content will be now set to flex and because we want to push there to the end and align Items will be now set to Center so if you sve there and we cannot see there why not let's just see why can't all right so we can see that right here uh underneath so what do we have to do let's just select our div inside that popularity

section which is uh this div like uh popularity one two and three divs so let's just select that I'm going to write a popularity and let's just select all of the divs which is inside there I'm going to write a margin right For them like five room would be fine and now if you save that and this is how it looks like or you know what first of all let me just give height of like 100 V so you guys can see everything a bit clear now it's here but it will just take its place

once we remove that 100 pixel of viewboard height so I just want to show everything in one viewboard so let's just select our popularity not primary headings but um popularity and inside that we going to be selecting Each of their H1 so we are going to be just increasing the font size to be like I don't know three RAM and text alignment will be now set to totally Center and I'm going to also change the color to be 36 36 and 36 uh let's just remove that period from there and for family I'm going to

change that to my main uh F this one so that was it so if you save that and this is how it looks like for now anyways so it's looking a bit awful you know what That's looking awful uh what can I do you know I'm going to just stick to there if you want to choose your own kind of a color so you can also provide there now let's just select all of the paragraph which is inside that popularity p o p u l a r t y d and all of that popularity paragraphs

so now let's just select that I'm going to copy this color from there I'm going to past it right here and I going to also change the font family to Be senser so if you sell that and this how it looks like for now okay so now I'm going to just remove that height from there so let's just remove that height save it and this is how it looks like you know I'm going to change this color to something else it's looking awful so if you s that yeah this color is fine H not that

one let's just copy this color I'm going to paste it in here as well uh like so so I'm going to paste it Yeah it's looking better anyway so we are totally done with this popularity section as well so what else do we have to do now let's just start working on our products container section so let's just write a comment for ourself like products um what product section start start and duplicate there and product uh section and okay so inside there we are going to be writing a lot of HTML so we are going

to be writing a section first of all with the class of products Products and then container inside this products container we going to be writing H1 with the class of products heading and also the main headings okay so inside there I'm going to zoom out a bit inside the H1 we are going to be writing not H one but sh a popular p o p u l a r like so and I'm going to put a br in there and now let me just put a span in here and categories like so underneath this H1

what we have to do we are going to be Writing each of the products container so products inside that we going to be using just a regular product singular product to be precise inside that we going to be using a product image uh layer okay so this going to be the layer for image inside that we going to be using an image and then img1 so this is going to be the first image anyway so what do we have to do in this case we want to duplicate the so so underneath this D we going

to be creating a new D With a class of product content so inside this product content we are going to be writing H1 with a class of product name so I'm going to just write like Workshop chair okay so Workshop chair and I'm going to duplicate this line of or you know what I'm not going to be duplicating anything so paragraph and then then product quality uh q u l i t y like so and indoor Chair chair like so so if you sell that and this is how it looks like so now I'm going

to just duplicate this product content two times so this is going to be the first time or you know what we're not going to be duplicating there so you know what I'm going to duplicate this product from here to here so this is going to be the first product then we have a second one and the third one okay so this is going to be the first one and we are totally done with that right here So this is going to be the second one and then we have to change this one from image one

to image two okay so we also you know what this is going to be the same like um Workshop chair and indoor chair let's just also change this image uh one to be image three in this case okay everything is now fine so underneath this div what I'm going to do is that I'm going to just create a section or you know what outside from that Dev but inside that uh section so We are going to be creating a new section or div with the class of B and then container for buttons container so we

going to be just placing our button here we are going to be placing our HTML entity so first of all I'm going to just write an and symbol and oh my goodness so we are going to be writing an and where is my end symbol yeah there we go so we going to be writing an end symbol and then the pound symbol then x21 90 okay so this is going to be the first Arrow and now let's just write a new button so I'm going to write a button and let's just provide our end symbol

and then r a r and then just close it okay so I'm going to also close the other one right here so if you s file and long gives that Arrow which you cannot see right away but this is going to be it for our HTML so now let's just style that a bit so first of you know what let me just write a comment for myself like products section start okay So this is going to be the start and this is going to be the end of that product section I'm going to zoom in

and first of all let's just start working on our products heading so I'm going to write a products and then heading okay so inside there I'm going to just set that to text line of Center and margin for the top I'm going to give him like uh margin top I'm going to give him like 10 rim and margin for the bottom I'm going to give like five frame and font Size will be now set to four R and color will be now in this case set to like uh three zeros and then four 5 6

and 4 F kind of that bluish kind of colors if you sell them and this is how currently things looks like all right so that was it for our products heading let's just start working on our Spain so we want to make that blank I guess that's already blank uh or no yeah that's already blank so we don't have to play around with that let's start working on our products So each of the products I'm going to use a products in this this case and display will be now set to totally Center Flex ramp will

be now set to ramp and justify cont will be now set to uh space around and align items I'm going to set that to Center and sell file and this is how it looks like for now okay so you know I'm going to just put a height of like 100 VH in this case if you sa that this is how it looks like so we will remove this uh 100 VH height from there just a Second but I just kind of want to show you everything so let's just see what will be the container so

produ container I'm going to copy that and I'm going to just paste it right here and let's just provide that heading or not heading that height from there CCT from there pass right here and this is how currently things looks like so we have these kind of two buttons right here and we have two rows uh or arrows right here so anyways now let's just start working on Our each product so I'm going to just select that first of all product so that was a plural products and this is a product right here okay so

let's just use a display flex and a flex Direction in this case will be now set to column and justify content I'm going to use like Center align items I'm going to also use Center and margin for the top uh margin top we we just set to 50 pixels so if you s our file and this is how it looks like for now anyways so now Let's just start working on our uh product image layer so I'm going to first of all select my product and then we have a product uh IMG and layer Okay

so so this class let me just show you so we have these class for all of their layers so I'm going to just provide a background color and now it will be set to totally that main color which we declare up above and here we are going to be using a B for top left radius I'm going to give him like 200 pixel Duplicate that one more time and this is going to be it for the uh all right so top left right and top top left right uh border top left radius and then we

have border right radius there we go so padding I'm going to give like 20 pixels so if you sell that and here you can see this is how it looks like for now anyway so now let's just start working on our image and then you'll get to see that will grow just a second so first of all let's just start working on our product Let's just select our product right here and inside that product we are going to be selecting our image layer so product image layer and now let's just select all of our images

so I'm going to give a width of like 200 pixel and he will be also set to 200 pixel so now let's just apply new images for all of that image one image two and image three Clauses which we provide right here so this is going to be image two and this is going to be image one and that one is going to Be the image three right here anyway so now let's just start working on that real quick so what do we have to do first of all you know what I'm going to copy

all of that selector from there it's kind of long to write it and I'm going to pass it right here so instead of writing IMG so I'm going to just just write img1 and let's just change the background to be uh not a color but just a background short hand and I'm going to provide a URL of images so I'm going to Go to the images and I'm going to also provide that Bruno or whatever the name is I'm going to just select that image and I'm going to be providing a background size of totally

covered and I'm going to also provide a background position of Center not call but Center okay so let's just duplicate that two times so one and two and this is going to be now it for image second one like two and this is going to be the image three okay and now let's just reuse this Or you know what let's just remove these images from there so the second image I'm going to be selecting is that you know what the first image will be for um Daniels so let's just REM not Daniel yeah Daniels or

whatever you want to call it so I'm going to select that and now let's just select word second image and provide the Bruno or whatever the guy name is and then we have a Scot so let's just remove that and write a Scot and now if You save that and this is how it looks like for now okay so everything is looking perfect the way I expect them to be looking so now let's just take care of all this other stuff right here so what do we have to do let's just start working on our

products uh content so we have product content so like so I'm going to write a background color of totally one of primary color Okay so so let's just provide a padding of like 27 would be fine so 27 pixel and also the padding for the bottom I'm going to provide like padding bottom of 50 pixel and text alignment I'm going to set that to Center and color will be now totally white so if you sve that and this is how it looks like okay so if you zoom in a bit all right so I guess

we have to prob a little bit of spacing in there and then it will look a bit fine or we can just shun down the images or not image just side by the font size Let's just select that product name first of all I'm going to use a product content and inside this product content we want to select our product uh name okay so I'm going to just provide a font family of that not word but send Surf and margin for the bottom I'm going to provide like 10 pixels so if you sell that and

this is how it looks like right now okay so it's kind of a increase a bit now let's just select our B container or buttons container and text Alignment will be now set to Center so if you sell that it will push that buttons to the bottom you know I'm going to remove that height from there we don't need it anymore so height of 100 VH so I'm going to remove that sell file or you know what not that one come on man uh select it one more time height of 100 VH uh all right

so this is the first one this is the first one and this is the second one so let's just remove that Seven and yeah that's looking fine so that's there now what else do we have to do we have to select the B and not just buttons but just B and container and we want to select both of those buttons I'm going to remove that border set that to none and also the background will be transparent in this case and the font size I'm going to increase that to two RAM and cursor will be Pointer

I'm going to give a margin of zero Auto and margin for the left will be set to 20 pixel and margin margin for the top I'm going to set that to 10 pixels if you sell there and this is how it looks like I guess you canot see there let me just show you there real quick uh okay so we have product name we have a product blah blah blah H let's just provide a hard to not the images not the layers but I guess to the product would be fine or products Would be fine

I'm going to put a height of 100 V in there if you save that and you cannot see those button but you will see that just in a second anyways I'm going to remove that height from there and we are totally done with or um what do we call it our product section now let's jump into a new section called why choose us or Why Us let me just write a comment for myself like uh Why Us question mark section start and then duplicate and section end Okay so first of all I'm going to just

create a section with a class of Y us inside this section we going to be using a d with the class of section IMG and container inside there we going to be creating a new div with a class of image layer and inside that you're going to be just specifying one image okay so outside from all of these div but inside this section we're going to be creating a new div with a class of content container inside this content container We are going to be using H1 with a class of main headings and let's just

Pro like y choose uh yeah that would be fine and now let's just provide a span in here with no classes nothing inside there but I'm going to just put Like Us in here so us and question mark and underneath this uh H1 what do we have to do I'm going to just write a so I'm going to Prov primary headings so we are now reusing that class so let's just copy that Content from here as well uh yeah I'm going to copy all of that content so go to the bottom and I'm going to

P it inside this primary headings right here so outside from this paragraph what do we have to do uh I'm going to create a new div with a class of you know what outside from this div even so uh I'm going to create a new paragraph but not out you know what outside from this paragraph I'm going to create a new div with a CLA of cards inside these cards We're going to be creating a card with a class of card and then fill okay so let's just zoom out a bit and s file and

this is how currently things looks like but now let me hit enter let's just create a new car with a class of star and we are going to be placing our HTML entity in here so we have and symbol first of all uh yeah Ern symbol then we have a pound symbol and then we have 97 33 and now let's just close let's Just write H1 with the Clause of card title let's just put our title in there and write a paragraph for card info this is going to be the paragraph not a diff so

let's just change that to paragraph and yeah I'm going to past that LM LM off a few lines not that much uh Elite would be fine so yeah I guess that would be fine or we can increase the lat if you want to underneath this paragraph and div let's just create a new card so this is going to be a de with a class of Card then we have H one with a class of card title let's just provide a title to it like quantity or quality would be fine and let's just reuse that paragraph

copy it from here and I'm going to pass it right here so if you sve that let's just reuse this card one more time so I'm going to just duplicate that so then we have a card title to be like something else maybe Heritage and the other stuff would be fine the way it is now underneath This card first of all let's just create a new div with a class of card and also card uh fill inside there what we have to do we are going to be writing our star one more time so we

have what with a class of star not start but just a star did I just spell that start or Star it's not a start it's just a star and I'm going to also copy that from here and I'm going to pting right here let's just proide H1 with the class of card title and let's just proide some title To it like Community would be fine c o m u n i t y Okay so let's just provide a paragraph you know I'm going to copy this paragraph from there I'm going to pass it right here

so if you sell file we are totally done with this card section so now let's just get into our stylesheet and now let's just style that I know there was a lot of talking a lot of typing so this is it so if you want to check it out so this is how it looks like for HTML and this is how it looks Like in the browser for now all right so now let's zoom in toward CSS and now let's just style that a bit I'm going to zoom in a bit and let me just

write comment for myself like uh what why choose ask question mark section start okay so duplicate that and this is going to be the end of that section so inside that we are going to be selecting our Ys container and display will be now set to totally Flex Flex W will be now set to wrapping and justify cont will be now Set to space around align items will be also set to Center margin for the top will be now set to 10 rims and now if you s file and and nothing is working the way

we expect him to work let's just see something is wrong so we have popularity product and then we have our container why oh my goodness not y use but just y us and this how it looks like for now my bad sorry and now let's just start working on our image layer so why Us in this case not why use don't be stupid like me and then image layer and with I'm Going To Give like 400 pixel and hard will be also 400 pixel background color will now set to like main color c l o

r and Border radius I'm going to give like 100% And if you sell that and this is how it looks like I'm going to zoom out and now let's just take care of that image layer and that image inside that layer so I'm going to write it Ys then image layer And then IMG class so I'm going to provide a width of like 400 pixel and the height will be also 400 pixel background color not color but a background image will be URL go to the images and check out that sc one so I'm going

to just select that one let's just provide a background size of totally cover and the background Position will be now set to to L Center okay so if you s that and this is how it looks like right now okay so now let's just take Care of this area like a cards and stuff so first of all let's just select our cards not buttons card but just a card is and let's just put display of grid on it and grid template uh columns so we want two columns of two FR and two FS if you

sell that uh okay and this is how it looks like right now so now let's just take care of this each card inside that card section so I'm going to just write like a card and let's just provide a Width of like 200 pixel and height will be 150 pixel ping I'm going to give him like 20 pixel all around and margin for the top I'm going to give him like 40 pixel let's just provide a border radius of five pixels if you have there and this is how each of the card looks like right

now okay so what do we have to do we are going to be using that card fail and let's just use card and then card and fail if the card is fill so we want to change the color of that to be Like uh I don't know E3 e uh not three again but just and kind of a long color so and oh my God uh E4 90 so this is going to be the card color and Position will be now set to relative so if you save that so here you can see both of

them will have the class of card fill so that's why we are now getting that color anyways so now let's just take care of that card uh fill and then that star which we provide right here so I'm going to just write like card and Then card if that card is filed so we want to select that star okay so we want to provide a width of like not 100 but 10 pixel and the height will be also not 100 pixel but 10 pixel and padding will be 15 pixel and Border radius will be 100%

and let's just use a background color of that same background of like primary color Okay so let's just use a position of absolute the other one was relative so this one will be now absolute so 15 pixel for the top for the Left you want - 10 pixels so display will be now tot the center justify cont will be Center uh align items will be now Center and font size let's just increase that to 15 pixel and color will be totally white can see if he s file and let's just see what's going on so

we have a card then we have a card fill so let's just remove this card from here so if you sell that okay something is not working this is not a start Man start Say7 and now here you can see why am I getting why am I writing star it's it's just a star all right so now here you can see it's working the way exp to work now let's just take care of these um what do we call it the H1 so let's just write uh card and H1 so we going to be changing

the color to be totally black and the font family will be now set to send surf the font size I'm going to increase that to like 70 pixel so if you sve that and this is how it looks like Right now so now let's just take care of that paragraph as well so we going to writing a card and then selecting that paragraph and let's just change the color to be like uh 99999 999 like so and I'm going to also provide a font family of s and font size will be 12 pixel okay so

I'm going to also provide a margin for the top of 20 pixel and now you save that and this is how it looks like right now okay so if you want to provide a lot of text in There so you can or you know what I'm going to just leave it the way it is so if you want to provide a lot of color not a lot of colors but a lot of text so you can also provide there anyway so that was the end of why choose Us section so I'm going to just go

to the bottom right here and now let's just take care of that features section so features section start duplicate that and then this is going to be the end of that features section so now let's just Write a section with a class of features and now inside there we are going to be creating a div with the class of content container okay so let's just write H1 with the class of main heading best span it to let's just zoom out features okay so if you s that this is how it looks like underneath this H1

we're going to be writing paragraph with a class of primary heading or headings to be precise and I'm going to be just Getting that primary kind of a heading from here copy that and come to the bottom and I'm going to pass it right here inside this paragraph and now what else do we have to do now let's just create that cards one more time so H what can I do you know underneath this paragraph I'm going to be writing a card uh yeah D with the class class of cards inside there we are going

to be placing our different kind of cards so we have a Card and then card fail so this one is going to be the card of fail and now let's just write a day with a class of star so we are going to be also reusing that star uh I'm going to copy that from here it's kind of a lot of uh sampal St so I'm going to just place it right here and let's just write H one of delivery let's just use that paragraph one more time I'm going to copy all of their text

I'm going to past it right here or you know what uh that text would Be fine so I'm going to copy that from there I'm going to P it right here okay so this is going to be the card fill and let's just duplicate that a few times so I'm going to just uh duplicate that one time and two times so let's just change these titles to be like something else guarantee and then free repair free repair like so so if you sell that and this is how it looks like for now I know it's

looking awful so now let's just take care of that real quick but before We do we have to also write image container as well underneath all of these Dives now let's just write a div with a class of IMG and container and also display will be none so n o n so once we hit get some sort of a certain media query so we want to remove that so now let's just get that image and which is that Bruno or whatever you want to call it so if you save that and this is how it

looks like right now okay so now let's just get Into our CSS and now let's just style that a bit I'm going to write a comment for myself like features section start duplicate then featured section n and now inside that let's just select our featur section I'm going to give a margin for the top like 10 RM and display will be to flex uh Flex R will be now set to WRA and justify content will be now set to space around align items will be now set to totally Center and now let's just start working

or you Know let me just save there and this is how currently things looks like and I guess that's looking awesome I don't have quite a lot of uh other things so I guess that's looking awesome you know I don't have to do anything else for this feature section or we can decrease the size of the images if if you want to but I guess that's looking cool so finally let's just take care of the forward section all right so now let's just start working on our for Section start duplicate then forward section end and

so let me just write a folder inside this folder we going to be writing a div the class of logo container inside that we going to be using a logo like so and lauram epsom of that lot of lurm Epsom I'm going to copy that there from here come down and P it right here okay so this is going to be our first div underneath this div we are going to be using or about company company like so and let's just write a Div with the class of container and let me just write H1 of

about in here and then paragraph of news and block and let's just write a paragraph of features and paragraph of about us okay so in this case I'm going to duplicate this container two times and let's just change this title to be like something else maybe like company and also this blog and stuff to be uh how we word how we work question Mark let's just change this features to be capital and also this one to security this one to support uh this one to fa AQ FAQ okay and then support one more time uh

support and this one will be for contact us so if you sell that and this is how it looks like so now let's jump into our CSS and now let's just style that a bit let me just write a folder uh styling Start uh start duplicate there and this is going to be the end of that styling let me just get my fotter background color will be now set to totally primary color and let's just use a margin for the top of 10 RM and display will be totally Flex Flex rep will be now set

to W justify cont will be set to space around and align items I'm going to be using like Center and height I'm going to give like 100 VH and color will be totally white so if you Sell that and this is how it looks like for now and now let's just take care of the um H1 or footer uh then logo con uh container of that H1 and font size I'm going to increase that to like 4M and the font family will be now set to like main color not main color but main font and

the margin for the bottom I'm going to give like 20 pixels so if you s that and this is how it looks like right now okay so these H1s now let's just take care of that paragraph real quick so order and then logo and container and take that paragraph from there and I'm going to give a Max width of like 400 uh pixel will be fine and font family will be now to Sender line height I'm going to give like 25 pixels if you save that and this is how it looks like so now let's

just take care of these uh I'm going to write first of all a fotter and then about company so which is about company let me Just copy that I'm not sure about uh if I just type it correctly or not so I'm going to past it right here anyway so let's just WR display a flex on it and flex W will be now set to WP and justify cont will be now set to toly Center align items will be also set to Center so if you s that and this is how it looks like so

now let's just pour a little bit of spacing in there I'm going to select my folder then about company and then container uh just container Okay so let me just provide a margin margin for the right will be Now set to 40 pixel margin for the top will be now set to 20 pixel sa that and now we get a little bit of margin in there so now let's just start working uh you know what let's just SP a little bit of spacing inside these H1s and stuff so what I might so I'm going to

just write about about company uh yeah AB you about company let's just get our container NH H1 and I'm going to give a margin for The bottom of like 50 pixels if you sell that there's a little bit of margin and now let's just use a margin for about company and then container and that paragraph as well so I'm going to just provide uh what I'm going to give a margin of like margin bottom of 20 pixel and I'm going to also change the font family to be like sensor so if you s that and

this is how it looks like right now okay so you can play around with that if you want to in your spare time But in my case uhuh okay okay it's looking cool but now we have to take care of that by using a or media queries so now let's just right or responsiveness in here so responsiveness I know the spelling is wrong but I'm not going to waste my time writing a spelling so what do we have to do in this case let's start working on our first media queries I'm going to zoom in

a bit and let's just write a media for only a screen and also if the Max width is what 1150 pixels so let's just get our image container first of all and let's just provide a width of like 340 pixels and this is going to be the it for the height as well and this d none class which we provide right there so we going to be using display of none in there so if you save that and if you make it bigger like not that much so let's just see so here you can see

everything is working that way expect Him to work and this is going now I want you to watch this so if you hit that 1150 and that image will be gone from the viewport right here here okay so now let's just create another media query so let me just write a media only for screen and the max width is just like 900 pixels so let's just select our header a lowercase header in this case and this is going to be also a px for lowercase so let's select our header and height will be now set

to 120 view board Right and text alignment will be now set to totally Center justify content I'm going to give him like Center in this case as well so if you s there let me just see if you make it a bit smaller yeah it will push it right here so let's just see right click on it and push that to the bottom so if you had like 900 pixel yeah this is how it looks like right now what else do you have to do I'm going to cut that from here now let's just take

care of that by using Our header content so let's just select our header and then content uh container so let me just provide a margin for the bottom um margin bottom of six room and margin for the top I'm going to use like fourm and margin for the left I'm going to give him a zero now if you save that and this is how it looks like right now okay so kind of a good to be precise and now let's just take care of that popularity section as well let me just take care of that

real quick so if I Just write a popularity not product p o p l a r like so and I'm going to give a margin for the top to be like 22 rims kind of a long one and TT alignment will We Now set to centers if you sell that and that's a lot of so yeah now it's looking better yeah that's looking better so if you just remove that 22 margin and it will now just squanch together right here we do need that margin for the top so if you save that now everything is

working the Way we expect him to work anyway so let's just also take care of we don't have for the display of none for this one because we already take care of that right here inside this med media query to be precise now let's just write a final media query for a 600 pixel so media for only screen and for the max width if the max width is like four not 4 600 pixel so you want to just uh change their primary Headings to be like let me just give a width of like 350 pixels

if you sell that now let's just make that a bit smaller like so so it will now take uh that 350 pixel right there so if you just comment out save it and if you just uncommit it and now if you sa there it'll not just take like 350 pixel of the width anyway so now let's just take care of the image container so let me just write IMG and then container and Inside there I'm going to put like a width of like 300 pixel 350 pixel to be precise and duplicate that and same well

goes for a height as well so if you s there so the image container is now totally small right here okay so if you just uh come this line out and if you sell that it's kind of a little bit big you know what that would do that would do it's kind of fine but I'm going to also proide anyways if you want to play around with that so you can and now Let's just take care of popular popular popularity and d and now H1 so we want to take care of uh where is our

popularity want to take care of that real quick I'm going to just use like a font size of two R so if you sell that and this how it looks like right now and it's looking better and now what else do we have to do now let's just take care of that popularity div popularity and div so we have to just Provide a font size of like um 0.9 rims so let's just write a text alignment to be totally Center and also the margin will be zero Auto so that so that everything is not totally

at the center and I'm going to also provide a margin for the top to be like seven rims so if you sell that and this is how it looks like right now so popularity section is totally responsive if you want to play around with that anyways so now let's just take care of our main Headings so these are looking totally big and this one is also looking totally big so now let's just decrease the size of that so what I'm going to do is that I'm going to just write our main heading not primary one

come on Main headings let's just select that and font size will be now three rims so also text alignment will be set to Center okay so if you s that and yeah that's looking totally fine totally fine so you can play around with that if you want to but In my case that's going to be fine but let's just provide a little bit of margin right on that cards right here so I'm going to select there real quick uh what cards and margin for the right will be just like five frame would be fine so

if you sell there and now they're looking totally cool and also for the fill these one as well so now let's just take care of that and this is going to be our final step for this Project so card fill and margin for the left I'm going to give him like 10 pixels if you sell that and yeah they are looking totally gorgeous anyways so congratulation and we are now totally done with our project we make it bigger and this is how it looks like on a bigger screen and you already saw on a smaller

screen we are not totally done with this project so I will see you in the next video [Music] Bye-bye hey guys hus and welcome to the first project of this course so in this video we are going to be learning about how you can create a background video by just using HTML and CSS so this is what we going to be building in this video so now let's jump right into the code and write our code in the previous video you make a setup for our coding journey in this video we going to be creating

our first project which is how we can add a background video by using just HTML and CSS Okay so we've created the gab repository right here and we also create this folder right here but now what I'm going to have to do now I'm going to right click on it and then click on give B here and then I'll just write code and Dot and once I hit enter right now so it will automatically launch your visual story coder for us okay so then I'll remove this um terminal from there and then I'll create a

new folder given name of o1 BG V okay and I guess that will be Fine and if I hit ENT right now then inside this folder I want to create two files and the first name will be index.html and the second one will be style.css okay so now I'm going to just pass this video right here because I've already downloaded this video but if you guys didn't download this video so I'll also proide the link uh in the description area so you can click on that link and it will bring you to this page right

here this R page right here So you can download from there and by the way shout out to this person I can't pronounce his name but you can just click on this free download and it will start downloading okay so it's free to use so that's why I'm using this video right now all right and now we are good to go so here you can see we have this assets folder it should be a lower case as it's not uppercase okay and then I'll also hide the sidebar or you know yeah I'll just go with

that and then I'll Just write like Doc and if I hit tab right here so it will create our boiler play right here and then I'll just write like uh video background or you know background video will be fine and then I'll link my CSS really quickly right here and we don't have any scripts so we are not going to be providing any scripts so I'll just save this file and then I'll right click on it and then click on this open with live server so if you already installed a live server So it will

open it for you if you didn't install a live server so go to your extensions and then just write like live server server and then click on the first one and then just download it so here you can see if I can make it so then click on this live server and then just click on the install and here you can see I've already installed s and have to install it reinstall it again okay so now I'll hide this metas and head data from now and now the first Thing I'll do is that I'll just

create a section and give class of here right here inside this here class we going to have to provide first of all the value so just write like um value here or this video will be fine oh you know I'll just remove this comment because we going to be writing our video right here and Source will be outside so we will just provide like a source of um SRC and then I want to hit control and space and here you can see We have our assets folder because we have this assets folder right here so

inside we are now inside this BG video inside this BG video folder we have this SS folder inside This Ss folder we have this CR of this video like the guy name is this one and here is the link um of the video so if you want to download it for yourself and here is the video okay then I want to hit control and space and go to the SS folder inside This Ss folder I want to go with uh this video Okay and then I'll collapse my sidebar one more time and save it okay

so here now for this video I'll provide a few attributes the first one will be aut play not optimize or sorts H I don't know what type so just WR like auto play come on auto play and the second one will be Loop and the third one will be muted and then I'll just write like plays in line and I'll also give a class of like back video okay so once we s file inside this hero Section we are going to be just right underneath the video we're going to be providing the content section so

I'll just write a section and give a name of like not name but class of content and inside this content section I'll write like H1 of Journey or you can write any text you like but in my case I'll just write like joury did I spit it correctly yeah I did and then I'll just write anchor tag and it will go to nowhere and I'll just write explore okay so once we Ser a file so here you can see we have our video right here and here you can see we have our text right here

okay no styling whatsoever it's looking ugly all right so the first thing I'll do is that I'll remove these empty spaces from here like here you can see these empty spaces so for that we have to write our resets so I'll just go to my CSS file yeah I link it I guess I yeah I link it right here so I'll just collapse this meta from now and then I'll go to my CSS File and the first thing I'll just select everything and I'll put a padding of zero and then margin of zero box sizing

sizing will be B box and font family will be sent surf okay and once we set file so here you can see that empty space is gone all right so the first thing which I'm going to uh style is the hero section so I'm going to select this hero right now I'll just write here and then I'll write a width of 100% and height of 100 VH and once is s file so everything is 100 by 100 okay and the next thing I'll do is I'll just provide a linear gradient so I'll just write like

BG image or you can also just write like a background if you want to but that background image will be a little bit precise and then I'll just write like linear gradient okay and the first linear gradient I want to provide is like ogba 12 and then 3 comma uh 51 comma 0.3 okay one three then I'll copy this from here and I'll also provide a comma right there and I'm going to paste it one more time okay so this is our linear gradient and then I'll just write a position to relative then I'll write

a padding of 0 and 5% and then display will be Flex justify counter will be Center align items will be also Center once we s file and we will still see nothing right here because we perfectly Center this video So now let's do that the next thing I'll style is this back video really quickly so I'll just write like back back and then value okay and then inside this back value I'm going to just write like position position of absolute and then right will be zero uh bottom will be zero and Z index will be

minus one and once we Z file so here you can see our text is now perfectly centered in this video or in this background right here okay so now let's style this uh text in This D right now so I'll just try like uh select this content container so I'll just select that so I'll just write like content content and then here I'll just write like text a line of Center and once we set file so everything is now perfectly Center okay so the next thing I'll do is I'll select this uh H1 which is

inside this content right here so I'll just select this content and then H1 uh and then I'll just provide like font size of 160 pixel color will be Totally and font we will be 600 and then you know what yeah I guess font we will be 600 and then I'll just provide a transition of 0.5 second because I want to provide a how effect to it so that's why I'm writing a transition and it will take 5 seconds and 0.5 seconds to be precise not even a 1 second and then I'll just select this content

and then H1 and once we hover over that H1 so we want to provide like web kit Dash text Just one uh Dash not DH Dash and then I'll just provide like stroke and it will be now equals to 2 pixel totally white okay and then I'll provide a color of transparent and once you s file okay so here you can see this is now our text and once we have order it so here you can see it will be now transparent and this is how it looks like all right so now the next thing

which you have to style is this explore button so I'll select this anchor tag which is inside This content section right here so I'm going just select this button right now so I'll just write like content and then anchor tag okay inside this anchor tag I'll just first of all remove that text decoration of none so here you can see that decoration is gone so once I uncomment it so here you can see we have this decoration right here like underline decoration and once we uh remove there so here you can see that's remove display

of inline block And then I'll just write a color of totally white and font size will be 24 pixel by default it will be 16 so now we change it to 24 and Border will be 2 pixel solid wide and padding will be 14 and 50 pixel and then margin top will be 20 pixel and once we Seri so here you can see we have this button right here okay I don't know why it's not Hing okay we didn't provide any H effect I'll just select this content and this anchor tag and once you H

over to it so you want to Provide a background color of totally White and the color of totally black and once we have altered so here you can see the background is now becoming White and the text color is becoming totally black right now okay and it's taking one t okay we have to change that really quickly I guess uh I have to put a transition to here I want to copy this transition from there and test it right here once we s file and once I have my mouse over so here you can see

it's now Taking 0.5 seconds okay so the design is complete so now what about the background uh video now let's change the background video so for that I'm going to have to write a media query so I'll just write like media and it will be just for men aspect ratio of 16 sl9 and then we will select this back back video and and then we will just provide a width of 100% and height of Auto once we s file so here you can see this is now perfectly Center and we can See our video right

now okay and now let's write another media query so I'll just uh duplicate this one and then change this one aspect ratio that's correct and then I'll just write like the first width will be Auto and the height will be 100% okay so once we s file and then I want change this Min to Max and and once we set file so here you can see everything is now perfectly Center and this is our first project so now we successfully created our first Project in this course hey guys H and welcome to the second project

of this course so in this video we are going to be creating this creative loading animation by just using HTML and CSS so no JavaScript no nothing by just using HTML and CSS so now let's jump right into our codor and write our code in the previous video we've created our first project in this video we're going to be creating our second project which will be Creative uh loading animation okay and then inside this folder I'm going just create two files give a name of like index.html and the second one will be style.css okay so

now I'll just write my doc type HTML very quickly so I'll just zoom in a b so that you guys can see everything a bit better and then I'll just write Doc and then here I'll just write like loading animation and then I'll link it to our CSS file okay and we don't have any JavaScript so you're not going to be providing any script whatsoever and then finally I'll just right click on it and then click on open with the live server so it will automatically open with our file with our live server okay all

right so here is our file right now so in HTML so we are going to be just writing a section with the class of wrapper and then inside this section we are going to have um loader of div and then inside this loader inside this loader we are Going to have four um circles I'll just write like a loading and then I'll give a NE class of one and then just duplicate it four times and it will be now equals to two and this one will be now set to three and this one to four

and once you s file so you will see nothing inside our browser because we didn't style anything whatsoever okay so the first thing we have is a section with a class of wrapper ins this section we have a div with a class of lader and Inside this lader class we have this uh four items right here and we give each of them to like loading class we're going to style that and we're going to style specific of them like 1 2 3 4 okay so now let's jump right into our CSS so the first thing

that you have to do is to just write a resarch for itself like margin will be zero pairing will be zero and box sizing will be B box okay and now the next thing which you have to do is to just write a body in ins sign this Body we are going to be just writing a background of 0 0 0 and one more time zero like four zeros and then I want to just write add BCB and once see s file so this is what blue right here okay so the next thing which we

have to style is this wrapper section right here so I'll just select this wrapper and then uh I'll just write like a display of flex because all of our item will be inside there and then we are going to just perfectly centered there like Aline Items will be also set to Center and Main height will be 100 VH okay so we currently you will not see nothing right here because we in style or loading items if you guys don't know about a flexbox you can check out my video on a flexbox and then I'll just

write a wrapper and then I'll select this loader class right now so I'll just write do loader and then inside this loader class I'll just write like display of flex and uh justify content will be set To space and then I'll just write a padding of 0 and 20 pixel and now I want to select this loading like each of this loading class right now K so I'll just write like um a loader and then inside this loader we have this loading class like loading okay and then inside this loading class I'll give him a

background of poorly white like pure white and then I'll just give him a width of 30 pixel and the height will be also 30 pixel Okay and the Border radius this will be 50 pixel because we want them to be like perfectly uh Circle and margin not max resolution but margin will be zero and 10 pixel and then animation uh we will leave there so once we save our file so here you can see we have these four um circles right here and which are perfectly center right here and here we are centering it and

here we are just justifying it to just like uh to go in line and then this class is used for Each of these circles right here okay okay so the next thing I'll do is to create animation so I'll just write like a key frame and the name will be load and then here I'll just start from zero and then I going to give width of 30 pixel uh I'll also give a height of 30 pixel as well this is a starting point when it reaches to 50% then you want to just provide like a

width of 20 pixel and the height will be also 20 pixels so this is just a simple loading right here And now we have to provide a name of that load loing animation so I'll just write animation okay so it will gives us a lot of properties the name will be load the duration will be 0.8 second and it will be ease and we want them to be like delay will be infinite so I'll just write like in finite and then I'll remove all of them okay so it will not work it will just work

like that it will just bounce in and bounce out okay like zoom in and zoom out so for that we have To select each of these classes like 1 2 three and we have to p a specific animation to it a specific delay to it excuse my language and then I'll just write like loader and then I'll select my loading and number one okay so you are now selecting this first one right here and we going to just provide like animation delay not duration but delay of 0.3 Seconds 3 seconds and once we s file

so here you can see this one is now taking a little bit of time and now let me just duplicate it four times maybe three times okay and this one will be now set to two and this one will be now set to three okay and now this one will be now instead of three I'll just set that to four and this one will be set to five and once we sell file so here you can see the first one will take a of time and it will go on and on okay so this Was

our second project of this course which is just like a simple animation by using just HTML and CSS so here you can see the full Cod so here you can see we have our section then we have loader then we have loading items and then we just first of all we have research then we have background color and then we are centering it then we are just uh inlining the items and then we are providing a little bit of staring to loading and then we are selecting that And finally we have this animation right here

okay go and welcome to a third project of this course so in this video we are going to be creating this custom scroll bar by just using HTML and CSS so no JavaScript no nothing so without wasting any time let's jump right into our codor and write our code in this video we are going to be creating a third project in this course so I'll just give a name of like o03 of Um custom scroll bar okay and inside this folder I'll create two files given name of index.html and another one will be style. CSS

okay and now here I'll just write a doc type HTML and then I'll go there and then I'll just write custom scroll bar and then I'll link it with my CSS file and now we are good to go and then I'll right click on it and then I'll launch it with live server and I'll Close this matter as and now we are good to go so for HTML I'll write a simple image so we have like a section and inside this section we have our inside this section we have our card and then inside this

card uh we have this H2 with a class of card title and then we have like plus paragraph and we want them to be eight times okay so remove that and you want them to be eight times or 10 times how many you like and I'll just write like title one and then as a Paragraph I'll write a lauram let me just click somewhere else and then here I'll just write like LM and it will agre us all of there and you know what I'll just copy all of them and then I'll past it right

here control I'm going to hit contrl D to duplicate another contrl d contrl dtrl d control or command D and then I'll P all of them right here okay and once we s file so here you can see we have this title one title one and all of them right now so now I want to Change the second one to two then we have uh title three then we have four uh five maybe I'll justs forward six 7 and finally we have a add one and one we 7 file so 1 2 3 4 5

6 7 and 8 okay so now let's begin with the styling so first first of all we have our resets so I'll just put a padding of zero and then margin will be also zero and box sizing will be border box for family will be S serf and then I'll just Select the body and background will be crimson and once we s file so here you can see it looking ugly now we have to select this card and we have to style this card manually so I'll just select this card and not CED but card

and inside this card I going to give a width of like uh 700 pixel and background will be totally CCC and padding will be 20 pixel and margin from all of them will be also 20 pixel for family will be S serf and line height I'll just provide Like 28 pixel and once we set our file so here you can see here are our cards right now okay so we have this scroll bar right here the main focus of this project will be on this scroll bar right here but we are just writing some text

so we have something so that we can scroll through okay so we are now getting into like title A maybe I will just write a few more of them I'll just duplicate this one a few more times and we shouldn't have to change them or yeah I I'm I'm not changing there but now here you can see we have a lot of area to scroll through so now we can focus on this scroll bar right here here you can see that I'm talking about this scroll bar right now okay so how to work with that

scroll bar so for that we have to go to CSS and now let's work with a scroll bar okay so first of all we have to just try like uh colon colon and then we have to write a web kit and then Dash scroll bar okay and so it allows us to Work with that scroll bar like let's suppose if I want to change the background color to something else like a background color to like teal maybe and once you s file so here you can see that background color is now changed to teal like

all of the scroll bar color change to now teal and now if you want to change that to like transparent so I'll just write transparent and I'll just give him a width of seven pixel once we s file so here you can see the Scroll bar is totally gone because we just WR the background to transparent so now let's select that scroll by thumb so for that we have to just write like um uh let me just write it like uh webcad um webcad then I'll just write a scroll bar and and then here I'll

just write thumb okay so it will allows us to access that thumb so I'll just write like a background color of uh I don't know black will be fine and once we s file so here you can see it will now Gives us this black scroll bar and if I want to change it to something else like totally white s file so here you can see we have this white scroll bar right here so now let's suppose if I want to change the width of that scroll bar so for that we have to just write

like I don't know 20 so once we sell file so here you can see we have this massive uh scroll bar right here okay and so I'll just write a seven and S would do thing so now we want it to be Like rounded so for that we can just provide like a border radius of 100 pixel and once you s file so here you can see now this is totally rounded so let me change the width of it to 10 so here you can see this is now totally rounded right here so now let's

suppose if you want to provide a linear gradient to it so we can also provide a gradient to it so for gradient we have this awesome side let me just uh make this screen size a bit bigger and I'll just Write like uh Grant uh. okay grant.com not gradient and once we hit enter so it will brings us to this side right here so here we can found lots of uh cool gradients right here so I'll just click on this one and let me choose a perfect gradient for myself uh let me see I want

to select the second one and I'll go with that one so I'll just copy this one and instead of background I'll just write background one more time and then I'll Write a linear gradient and then I'll pass this one and then I'm going to hit comma and then copy this color and I want to paste it one more time right here and once we s file and go to our scroll bar bar so here you can see we have our scroll bar right here okay so this is how you can work with the scroll bars

in HTML and CSS so if you want to change the width of it if you want to change the color if you want to change the style of it to something else like Maybe I don't know if I want to to provide border of um two pixels uh not solid but Dash white and once you s file so here you can see we can also provide a border to it right here okay but it's looking a bit ugly so I'll just remove it from here okay so this is how we can work with a gradient

I mean like this how we can work with the scroll bar by using just HTML and CSS hey guys and welcome to the fourth project of this course so in this video We are going to be creating this Crea image effect by just using HTML and CSS so no JavaScript and no libraries and no nothing so just by pure HTML and CSS okay so this is what we are going to be building in this video so without wasting any time let's get into our decoder and write our code in the previous video we've created this

third project in this video we're going to be creating our fourth project which is what do we call it Creative Image uh effect yeah I guess that would be fine and inside this folder I'm going to create two files give name of index.html and just style. CSS okay so now we have these two um files right here inside this folder and then I'll just write like Doc type HTML and then here I'll just write like Creative Image uh how effect I guess I misspelled it right here Creative Image uh how effect would be fine instead

of uh that just effect okay and Then we will have to link that to our CSS file and now we are good to go so now I'm going to right click on it and open with live server so everything is working the way we expect him to work and now I want to collapse this meta data Etc and now here I'll create a section given name of like container inside this section we have a few Clips so just write like clip and then clip uh clip one and then I'm going to just hit Tab and

duplicate it three times this One will be two and this one will be three okay so this just a simple HTML right here so we have a section with a class of container then we have a clip class to each of these items right here and then we have a specific class like clip One Clip two and clip three right here okay so this is quite simple and easy so the first thing I would do is just um start from the body so I'll just write like body margin will be zero pading will be also

zero and background Will be just 555 so it will be totally gray right here okay so I'll also put a high of 100 VH so that we can have like a 100 viewport height right here and then I'll just provide a display of flex so that we can Center everything justif I content of Center align items of Center and then I'll select this container and inside this container I'll just write like a position of relative and this width will be at 100 pixel and then the height will be also not also But 500 pixel and

then the background will be 222 and now we we are selecting this uh container and we are just tying it right here and once we save a file so here you can see this is our container right here this is our body and this is what container inside the body so now let's select this clip and then Styler so I'll just write clip and then Position will be absolute uh absolute because this is a position relative so we want this clip To be inside this container so for that we are going to be writing position

absolute okay so then we have a top will be zero and and the left will be also zero and the width will be 100% And the height will be also 100% now we Edge per percent okay and now once we s a file so nothing will shows up because we don't have any content we don't provide any background color so now let me provide background color to like CCC so this is our clip right here okay so now let's Select each of the clip and then style it like clip One Clip two and clip three

so we going to have to provide a background images and we have to Center those images and we also have to just clip it out okay so for that we are going to be using clip path and polygon property okay so now first of all I'm going to select this clip one just a clip one and then inside this clip one we are going to be providing a background image not just um not color But image so here I have a few images right here so you can also find that in the description area I'll

also provide that in description area and I want to pass this in the URL so this is our first image and then here I'll just write like a background size of color okay and then I will just write like background um position of Center okay and once we sve a file so this is our image okay so this Is our first image so now let's duplicate that a few times so I'll just duplicate this one this one and change this one to like uh clip two and this one to clip three okay and also let

me change the images so again you can found these images in the description area or you can also go to my gab account or and you can pull that out from there as well so this is our second image and this will be our third image so let me copy that and let me paste that right here And the rest of them will be fine like C Center Center cover Center Center will be fine okay so here you can see we cannot see this different girl right here and this like stack at the top of

each other so now we want them to be clipped right here so how can we clip there so if you want to clip an image so for that we have this website right here so if I copy the link of it and now here if I click on that I don't know sorry I can't pronounce the name of it but this Is the website you can also find this website in the description area and here we can see it have a lot of uh clipping properties like if you want to clip your image like um

hexagon uh heptagon octagon you can do a lot sort of stuff with there like you can just do it like so let's suppose if I want to make it like so and now let me copy this clip pth from there and then go to my visual story coder and I want to past this link right here like we have a clip path and Then we have a polygon and once to Ser file and here you cannot see the uh let me just coming out these images so here you can see this image right here this

image is now clipped like this here you can see that so if you want to clip it like I don't know like a right arrow you just have to copy this property right here and its value and then go to your side and then go to your terminal uh I mean like go to your reg recorder and just pass there and once you s file so Here you can see it will now uh clip it like the right arrow right here okay so you can play around with that so I have specifically created a few

properties for that so I'll just remove all of them then I'll just write like clip path and will be set to polygon so I'll just write like 0 0 for the first side and then 46% for the second side uh just a percent not a dollar sign and then I'm going to hit and then zero for the Second side and then 39 for the second for the third side 39% and 100% And then we have a zero and 100% for the right side so once we s file so this is our first image so now

if I uncomment these two and and then I'm going to copy this one from there and C paste right here and now let's change the properties of it to like uh I don't know I'm going to change this one to 19% I've already set there so you can play around with there like if you want To and then it will be now set to 87 and this will be zero and then the third side will be 64 and 100% will be fine and then 33% and 100% And once we sell file so it will gives

us the third image because we in set up this third image so I'm going to also past it right here and now let's change this to like I don't know I'll just change it to 87% not 87 but 82% and zero and then we have like 100% cover and 100% and zero And then finally we have 100% And 100% And then we have 63 63% and 100% once we s file so this is current now it's looking like so now we have to provide a how effect so it can do its thing so I'll just

write a container uh I'll just write a container and then once we hover over that container and we want the clip P property and then we want to clip path of uh polygon so the first property will be 100% and zero and all of them will be 100% And Z so I'll just copy that from there this is the first one this is the second one then we have the third one and it will be now equals 100% okay and then we have a fourth one which will be also 100% okay so once we sell

file so we cannot have R to it right now all right so it's now taking all of the space so now let's select that other container and once we hover over that container uh not H but once we H over the clip of that uh container and then We have to just write a clip path of polygon and then 0 0 comma 100% comma not comma but 0 comma 100% And then also 100% comma 0% and 100% okay so now we have to add that right here or transition so I'll just write like our transition

to this clip property so I just write transition not duration but transition of O 0.5 second and once we save a file and now once we have U to this girl so it will take the entire Space once we H over at the middle of the go so it will also take the entire space and once we hover over to this girl so it will take the the entire space to be precise I can even speak now anyhow so now you get this clip property you don't have to swear about this um property you just

have to mess around with it like I don't know just grab these corners and then just like mess around with it so you'll get what's going on okay so I I Would recommend to just take a little bit of time with that uh it's kind of like a Twitter I don't know all right so that was it about today's project hey guys H and welcome to the seventh project of this course so in this video we are going to be creating a Creative Image Effects by just using HTML and CSS so the first one will

be this one so once we have our Mouse over to it so we would get this kind of Animation right here and if we move it so we'll get our image right here so now the second one which we are going to be creating is once we have our Mouse over trade so it will now give us this uh container right here at the bottom and now if you move it so it will not gives us our image so now the third one which we going to be creating is once we have our Mouse over

so this container will take its entire space and we will have this content right here so if we take Our Mouse out so it will now just collapse right here so we are going to be creating these three animation in this video so now without wasting any time let's jump right into our codor and write your code in the previous video we've created this creative menus in this video we going to be Crea in this uh image Effects by just using HTML and CSS no JavaScript no pre-processors like SS Etc but just HTML and CSS

so in the description of this video you will found A link to my gab repository so I want you to go to that repository and download this folder inside this folder you will found three nested folders and no code whatsoever I have like this H index.html file install CSS file but no code whatsoever in all of these files okay so no code nothing inside this file you can create it by by your own but the thing I want you to grab is these three images like the first image will be this one the second will

be this one and the Third one will be this one and again you are totally free to use your own images if you want to follow along with this video so you can just uh download these images from my G repository okay so starting from the first one which is that effect one I'm going to just open my index.html file and start. CSS file okay so now let me zoom in a bit so that you guys can see everything a bit better and then I'll just try duck and here I'll give a name of like

Effect one and Then I'll also link it with my CSS file right here okay underneath this image we can write our article and this article will have the class of content okay and inside this article we will have like H1 which will say like welcome to the uh the real world and then we will have our H4 and which will say like write your uh content here um content here or you can choose emojis if you want to grab Emoji you just have to hold the Windows button Or I don't know how to work with

the Mac but in Windows you can just hold the Windows button and then just hit period or dot so then here you can choose like whichever Emoji you like in my case I want to just search for like uh I don't know s would be fine and then I want to click on that I'm going to choose that one and then this glosses will be fine so once I save my file then I have to launch it by using a live server so here is my image right here really massive And here's the content all

right so then I want to go to my stylesheet and first of all we going to be writing our uh resarch so um you know I'll just leave the resar for now then I'll just write body and height will be 100 VH display will be Flex justify content will be Center align items will be Center and farm family will be sentor you can choose which ha forarm family you like but in my case I just choose like sensor because it's simple and it will just Remove those servs okay so and I also want this to

be like 100 VH and I want everything to be Center perfectly Center okay so everything is now perfectly Center and this image is really massive so first of all let's style this container and then we can take care of the other stuff so I'll just write a width of 30 rim and then I'll also duplicate it and change the height with 30 rim position will be relative and overflow will be hidden so on I semi File so here you can see we've got this box but it's containing all of our image and all of our

cont the Overflow is hidden so that's why we are getting nothing so here you can see if I delete that overflow so here you can see that it will gives us that massive image right here okay so overflow will be headden for this case so once I save it we've got our perfect box right now all right so the next thing which I'm going to do is I'm going to select this image For now so inside the container um inside that container we have the image so now let's select our image and we want to

give in a width of 100% because you want to take all of the entire space of the width and then transition will be one uh all uh 1 second once we s our file so here's our image and we did provide a transition to it because whenever we are hovering over through this image uh we will have that other slide effect so we want the transition To happen smoothly okay so the next thing which you have to is this content area so I'm going to just select like content and then inside this content Position will

be now absolute this one will be position relative and this content will be absolute to this uh container okay which means like this content whatever we do inside this content this content will be nested inside this uh container okay so this is position relative and this is position Absolute and now inside the top will be zero left will be also zero and height will be 100% and the width will be also 100% okay so this is our content right here and we don't have any how effect so that's why we are seeing that right here

and uh the next thing which I'm going to do I'll just Center the text inside this box right now so I'll just write like display of planks justify Corner Center align items of Center okay and color will be totally White and then what I'm going to do do is I'll also provide a transition to this one as well because we will also provide a how effect to this one and uh background will be RGB and I'm going to change this one to 23 comma and you know what I'm going to copy this one and pass

it three times right here okay so this will be my primary color and then transform will be just translate x minus 100% okay so now let's add our how effect so like content how and then Uh I mean like container how and content and then transform will be translate um X Zer so once we sell our file and once we have our Mouse over to it so here you can see our content is showing up but this is looking a bit messy so now let's Center that okay so let me just provide a justify not

justify but FX um direction to column and save my file and whenever we have our Mouse over so this is how it looks like okay and the last thing which I'm Going to do is I'll also provide a how effect to this image so I'll just write container how image and then transform um transform to just translate X 100% and S our file so whenever we have our Mouse over to it this image will be gone and that other slide will take itpl okay so if I just comment that out so it will just happen

smoothly and this will not push push up to the right if you uncommitted and sa file so it will now Go to the left and this one will also take its place okay so this was the first effect we just style the body we just style the container we style the image it's smaller and we just provide a bit of transition to it and then we just set this position to Absolute top will be zero left will be zero we provide the width as same as a container and we just Center all of our content

so this was the second slide and then we just provide a bit of how effect to it so That was quite simple easy so now let's jump right to the next effect which is the second one okay so I'll open both of these file and here I'll just try like Doc type HTML and Effect 2 and then I'll also link it with my CSS and I'll also open it with the live server and now here for the HTML side I want just WR like um it'll be the same as the other one like section we

have a container and inside this section we have a image which will be this girl image or the boy I can't even remember and then we have article and inside we will give a class of content and inside this article we will just write H1 of card title and then uh I don't know your card title maybe this Emoji will be fine and then we have H4 which will say like content and goes here and then we'll just choose this GL loses Emoji s file and this is our image and this is our content right

here okay so now let's jump right into the CSS and sty it a bit so first of all I'll just do like uh perect centering like body will be 100 VH um and then we have a display of flag justify content Center a line item Center uh font family s surf you can choose whichever font you like then I'll select my container which will be 30 rim and height will be uh also 30 rim and Position will be Position will be relative and overflow will be hidden as we saw just in a second ago so

it will gives us this box right here so now let's uh select our Container one more time and image inside that container with will be 100% And transition will be all 0.5 second and once you save it nothing will shows up except this image will be perfectly centered inside this box all right so now let's jump right into the content area which is this content area like we going to be selecting this article and this content inside this article so I'll just select this content and inside this content Position will be absolute Because we want

them to be perfectly Center inside this container okay so this is a position relative and we want them to be like position absolute and then bottom will be bottom will be zero and also uh left will be also zero and then we have a height of 25% and then width will be 100% okay so once we save it nothing is going to happen and then let me Center the content okay or text whatever you want To call it and then just write a display of flex justify Corner Center align um okay a flex direction will

be column justify content Center align item Center and then color will be totally White and also we have to for a transition trade um all 0.5 seconds and then um background will be just RGB RGB and then uh 23 comma and let me just copy that and pass it one more time and one more time and remove that comma from the end and then Transform Translate Y XIs and 100% so save it and this is our content right here okay can't even see okay let me just wait a bit all right so content is gone

from there so now let's provide our how effector so container and whenever we H over to this container in content not container but content and here we'll just provide a transform of translate to the Y AIS and 0% so once we have our over to so here now you can see we have this card title Right here and you can just write your own content right here here okay so but this image is not going up above so we want this image to go a little bit above and also this uh this content container as

well so now let's do that so for that we going to be using container and then how image okay so whenever we how or through this image so this image will just push itself to a little bit above so you just write transform translate to y - 30% and save our file and now once We have over to so here you can see this image is getting above and also this content area right here okay so this was the second effect so now let's jump right into the third one let me riew all of this

code as well so we are just providing 100 VH height and we are just perfectly centering our container inside this container we give him a 30 VH height and width and Position will be relative and overflow will be hidden and then we have a container we select image We give like the same width and height like take the same width and height of this container and we just put a little bit of transition to it then we have our content the position will be absolute bottom left everything will be zero and then height will be

25% and width will be 100% then we Center all text inside that uh container inside this little container here you can see that and then we just give a color of white transition and then we just give a background of That kind of black color right here and then we also Prov to transform trans that y so whenever we have over to so it will just take its place to from 0 to 100% And and then we provide that same transition to the image so once we have over to it so it will just translate

to the Y AIS for likeus 30 okay so this is how it looks like all right so now jumping into our third effect so I'll just close the other one open my HTML and CSS just write a doc type HTML Effect and number three and then I'll link my CSS file to the and now we are good to go and now let's open that file inside live server and this one is going to be a little bit tricky one so for that we going to have to write a section with a class of card and

inside this card section we have to provide image container first of all and then we have to just specify our image this is our image now remove that all tag from there inside this section or You know what not inside this section but outside from that section we have to provide another section with the class of content and inside this section we will just provide like H3 H3 of card title and then we have a paragraph of L just how many you want I'll just remove a few of them like so and then I'll just

provide an anchor tag and it will goes to Nowhere except it will say like learn more okay so once we s file so this is our massive image And this is our card this is our description and this is our button right here okay so uh now let's jump right into a CSS and style it a bit so let's starting from the first one which is a body so background will be that RGB not a but 23 copy it paste it paste it and then height will be 100 VH the same as the other one

display will be Flex justify con will be Center align item will be Center for Family will be S ser and now Save it so everything is perfectly Center all right so now let's select our card and then just provide a position of relative to it and width will be 30 RM and height will be in this case 35 R okay and the background color will be just totally black and then finally box Shadow we going to have to put a box Shadow to it like0 pixel and then 30 pixel 30 pixel one more time and

then rgba 0000 .5 okay this will be our shadow just a Little bit okay so our images are really massive so now let's make our image a bit smaller inside that box so now let's select our content and we have to provide a position of absolute turn and bottom will be zero pixel and then width will be 80 not percent but pix yeah it was person not pixel and then height will be just 10 pixel and background color will be crimson and left will be just 10% and also text along L will Be Center and

transition will be 0.5 second overflow will be hidden as always and display will be Flex now we are centering our content in Center Aline item will be Center all right so now let's select our image and just make it a bit smaller like width will be 100% and height will be also 100% object fit will be cover not contains but C and then we have a transition of one second so once we save it all right so here's our image and here is our content inside This image so it's looking a bit weird so I

messed it up so uh I'm going to cut this coding from there and paste it inside this section right here so this is now looking good okay instead of just taking it outside so now let's select our um H3 right now so I'm going just select my H3 and then just provide like font size of 30 pixel and text transform will be uppercase no yeah upper case will be fine and margin will be 25 pixel color Will be totally white so once we save it uh we can't even see our content right now so now

let's uh give a little bit of high to it uh not instead of 10 I'll just give him 100 so we can see our content right now maybe 200 will be fine we will just change that in a second but now let's first of all format all of them and then we can change it to 10 all right so this was H3 the next thing I'm going to select this paragraph and give a width Of 80% margin will be 10 pixel Auto and then font size will be 18 pixel and then transition will be 0.5

seconds and then opacity will be zero because we want to increase there whenever we have our or or Mouse over3 and then line height will be 25 pixel and color will be totally White okay so save it and this is our text but let me comment this opacity for now and this is now our text so now let's make it Perfectly Center okay I should have to pour display um where are you inside a Content where is our Flex box okay so here I'll just add like Flex Direction column so save it and now it's

looking a bit cool so now let's format this button very quickly so here now I'm going to just do is it will be also 100% for now because we want to format everything and now let's format this button so I'll just select that button really quickly so I'll just select that Anchor tag inside this anchor tag text decoration will be none uh background color will be black and then color will be uh totally white and then a padding will be 10 pixel and 15 pixel and then display will be inline block okay and and then

margin top will be just like 10 pixel and then transition will be 0.5 pixel not pixel but just a second and then opacity will be also zero and line height will be 25 pixel color it be totally wide and let me comment this Opacity save it and this is how our button will look like okay so now it's looking a bit cool all right so now let's add our how effect St so I'll just uncom this opacity and also uncoming this opacity as well and now let's change this to just like uh 10 pixel again

save it and this is how it looks like right now okay so our content is not showing nothing is showing because we just provided the height of 10 pixel so whenever we have our or through this Uh card so it will take the entire space like width will be 100% and height will be 100% And opacity will be just set to one so it will just show up that's why we provide this opacity is like uh where are you opacity so here is the opacity and here is also the opacity so now let's change that

so whenever we have over through discard content so we want the height to be 100% we also want the width to be 100% we want the left percent to be 0% So whenever we have our Mouse over to it so here you can see the card will take it totally placed and we cannot see the order C because we just provided opacity of zero so now let's change that to like something else maybe uh I don't know card will be how uh now let's select our paragraph comma let's also select our how uh anchor Tex

so um opacity will be one and transition delay will just take a bit of time like 0.5 seconds so now once we have our Mouse over to so here Now you can see our cont is back so it's St a bit of time but that's cool that's why I Prov this transition deler here now let's select this image container so what I'm going to do I'm just write image container and then just provide a position of absolute here top will be zero left will be zero width will be 100% because we want this image to

take this entire place and height will be also that and then transition and of 1 second okay so now our image is looking Like that but if we have our Mouse order to like card power image so once we how Mouse over to that image so the opacity will be zero okay so now let's do that all right so that image will be gone here you can see the opacity like just focus on this image it's just like decreasing the opacity is just becoming 0% this card is taking displays okay so that was quite simple

and easy I talk a lot oh my God I can't even speak no more all right so now let me RW all of the Code not all of the projects but just this code okay the first thing we did is we just Center everything and we provide a height R of 100 VH and then we create our card and we provide a position relative to it we give width of 30 and height of 35 background color is totally black and box Shadow we just provide this a little bit of box Shadow here you can see

that if I change the color of it to like uh I don't know blue maybe and here you can see that box Shadow right Now so let me just change that to that so here you can see we just provide that box shadow then we have our content container like this content where are you this content right here so this content is position absolute bottom is 0% width will be 100% height will be uh 10 10 pixel because we just want them to be look like this so whenever we have our Mouse over so this

code will happen where are you so this uh code will happen so whenever we have Mouse over so The height will be 100% and the width will be also 100% so like this okay and then we pour a transition delay to it so this text will take a little bit of time so this text will take a little bit of time and so is this button so focus on this area and this is what's going on anyhow then we just check our container so whenever we have a mouse ordered so that container that image will

be just uh gone that's because of this opacity right here it will take one second to Happen hey guys Su and welcome to the ad project of this course so in this video we're going to be creating a cards animation by just using HTML and CSS so now the first card which you're going to be creating is once we have our Mouse Ed so this container will take its entire space and if you leave so it will just decrease so the second creative card which you're going to be creating is once we have our Mouse

over to this Picture so we are going to be using before and after selector so we would get this kind of animation and also this um this background container right here like background cards all right so this is we are going to be building in this video so without wasting any time and now let's jump into our code edor and write our code in the previous video we've created this uh image effect in this video we're going to be creating a cards by just using HTML and CSS not JavaScript no CSS preprocessors like SS Etc

so I'll just give a name of like 08 creative cards okay so then I'm going to just write two folders card one or just a one of card one and then O2 of card 2 not Car 2 but card 2 then I'll create a file index.html create new file style.css then I'll just write my doc type HTML in it and now here I'll just change that to like uh create creative card um one will be fine then I'll link It with my CSS file and now I'll just cut both of them copy both of them

and paste it inside this project as well so now let's start from the first one zoom in a bit so that you guys can see everything a bit better and now let's uh right click on it go with the live server okay so for HTML we not going to be writing crazy HTML but we are going to be just writing a simple amount of HTML so the first thing is I'll just close that metas from now and now Section will be card container okay and then we are going to be writing article the class of

content inside this content we are going to be writing H2 just set title and then we have a paragraph so I'll just write lurm one time and hit tab then uh lurm one more time and hit tab so will gives us double LM right here and then I'll just provide anchor tag which will go to nowhere and read more and sell file and here is the result of our HTML code okay so now Let's begin to styling so I'll just start a body display with flex because we want everything to be perfectly Center so that's

why we are using Flex box and we will just give him a font family on sensor you can choose whichever phone you like and then background color will be just RGB and then 10 comma 10 comma 10 and then height will be 100 B in and once we s a file so we cannot see nothing but everything is perfectly Center okay so now let's begin styling this content container or uh I mean like uh this card container right now so I'll just write like card and then container okay so inside this card container I'll just

write position to relative because you want the other stuff to be position absolute so this one will be position relative and the width will be 320 pixel and the padding it be just 40 pixel padding and background color will be totally white and then overflow will be Hidden and once we save it and this is our card right here okay so now we have our first card and now we want this other content to take its place so let me show you that just in a second so for that we have to use um before

selector so just write like card container and then before and then content will be just empty content we don't have to provide anything to it and Position will be absolute because this is position relative and we want this one to be Position absolute because we want this before to be inside of this card container okay so position uh absolute then left will be zero and then bottom we are going to be using something called C which allows us to do calculation and then I'm going to just use like- 100% plus 5 pixel okay and then

width will be 100% And then um height will be also 100% okay and then we have a background color of blue uh what was that blue violet or whatever You want to call it and then Z index will be one uh just minus one no not minus one but just one and then transition will be 1 second because you'll have a how effect for this um before selector so that's why we are providing a transition to happen smoothly okay so once we sell our file so here you can see we have this like border bottom

right here because we have a WID right here and we also have a height but we don't provide any how Effect to it so now let's provide a how effect to that like car container once we H over to the before selector then we have to just provide the bottom to zero so now here you can see whenever we have our Mouse ordered so it will take the entire space right here okay so this is what's happening behind the scenes all right so that was the first one so now let's style our content right here

this content container right here so now let's just style that a bit so then I'm Going to have to select that content so I'll just select this like content inside this content Position will be relative like outside of that container color will be totally black Z index will be in this case two the other one was one so this one will be two and then transition will be 1 second because for that we want to provide um the what do I for that we are going to be using a how effect and here you can

also see like whenever we have our Mouse ordered so Here you can see the text is appearing so if I just remove all of them save it and now here you can see the text is not shown and if we just undo it and save it and here you can see the text is now here uh all right so now let's select our H2 very quickly and now let's format it like font size will be 30 pixel um yep and S our files so here you can see the H2 is a little bit bigger right

now and now let's select for paragraph and line height will be 25 pixel and then we Have like a padding will be 20 pixel and zero 20 pixel from top and bottom and zero for left and right margin will be also 20 pixel from top and bottom and zero for left and right and here you can see we have this a little bit space right here okay so uh we can just I guess I'll go to 202 this is looking a bit cool uh if I don't provide any line height to it so it's looking

a bit ugly yeah I guess that would be fine all Right so this was about the paragraphs now let's format or anchor tag this one right here so for that we going to have to just select it and font size will be 12 pixel and then color will be toally white and text decoration will be none and then we have a background color of RGB 22 comma 7 comma 7 and then we have 35 all right so this is our color then we can proide padding of 0.6 Rim from top and bottom and for left

and right one Rim okay so this is Our button right now and now what else do we have to do is whenever we have our Mouse Ed so you want to just change the color of this text to be just like white so we can also do that that's very simple and easy so we you just use like card uh container once you have order so you want to select the content and you want to change the color to totally Pure White all right so once I have my mouse ordered and this is what's going

to happen I guess I should have to provide A little bit spacing in that one so now let me select that I guess that 25 was correct but I just changed it to 22 I don't know all right so now I guess that's looking cool much cooler than I was expecting all right so now this was the first project so now let's jump right into the second card so now let me R the card a little bit so the first thing which we did we select a body we just Center everything we change the font

family we provide a background Color we just provide a height to it and this is that background stuff right here then we select our container and then let me just zoom out a bit so that you guys can see the HTML and CSS together then we have like uh okay that container this container which I'm talking about so now the position will be relative because we want to use a before select and inside this before selector we going to be using position absolute so that's why we provide a position relative to it And we also

G the width of uh 320 so it will just take that much width and then we provide a pading to add 40 pixel and we give a background color of totally white so that's why we are getting a totally white background and if you just uh come in this overflow head and save it and this is what's going to happen all right so this is what's going to happen so if you just provide orl of hidden so this is our card looking like all right so then we have like we just Uh provide a before

selector trade and then we provide absolute left will be zero we just use this uh call function right here and if you guys don't know about call function I guess I have to make a video on that one because I didn't explain that call function in my course HTML CSS course anyhow I don't know I'm going to just make a video on that it's not that much difficult thing then we have with and height and it will just take the entire width and height Right here we give a color of this uh blue Viet color

you can give a name of like color of crimson if you want to so whenever we have our Mouse order so this looking a bit ugly then we have a z index uh of one right here and we also just provide a transition of 1 second because we want this animation to happen smoothly so like let's suppose if I just comment this animation so here you can see it's going to happen like uh it will take more than a half second so that's Kind of ugly so you want our animation to happen a bit smoothly

so that's why we provide a transition of 1 second so here you can see the transition of 1 second all right so then we have a card container and we have a before selected so the bottom line will be just taking the zero space so whenever we have our Mouse ordered so we will take the entire space then we have a Content container the position will be relative the color will be black Z index 2 transition one And we just formatted all stuff right here and then once we have our Mouse over to it so

it will just change the color to white Pure White right here okay so this was the first card so now let's jump right to the next card which is this this uh other one so now let's just uh open this and this one will be card two Zoom init so you guys can see everything and now let's start working on our HTML all right so the for HTML I going to just write a section section With a okay section with a class of card inside this card we're going to be just writing like a section

with the Clause of image box okay inside this image box we're going to have to have an image I'm going to just remove that and by the way I'm going to place an image right here and you'll also find this image in the description area so just click on that uh link and it will bring you to my giab repository and you can just download this image from there or you can just go To this link right here and like go down Splash and then just pass this name it will give you this image right

here or you can just place your own image if you want to but I have this image so I'm going to use this one so I'm going to cut that from there and paste it in the card too okay so now I have access to that image right here so I'm going to place it right here okay outside from this section I'm going to use an article and with the class of article Article with the class of details and we would go to H2 of like uh I don't know Olivia would be fine okay so

we have this go image right here okay and then we have her name right here Olivia or whatever her name is so now let's jump right into the styling so first of all let's select the body margin will be zero uh height will be 100 pixel 100 VH background will be linear and gradient linear linear gradient and then I'll just put linear gradient of like I don't Know I have already set a linear gradient right here so I'll just use like 09 um three and then E9 E9 yep and then we have another gradient which

is like 0 d0 uh C7 okay so this is the linear gradient kind of OD uh then I'll just for display of flex you want everything to be perfectly Center so that's why we are centering it and then the I'm going to choose the font family of sensor and You can choose whichever font family you like okay so now we select our background we change the color here and now let's select our card which is this card okay so the position will be relatively because you're going to be doing a before and after selector so

that's why you are we are providing a position relative right here the width will be 30 rim duplicate and the height will be also 30 rim and the background will be white um white white and then The Box Shadow will be just 0o 1 pixel 5 pixel rgba 0 0 0 and 0.5 okay save it and we cannot see that because her image is really massive now let's change the image to like a little bit small so image will be position position Rel not relative but absolute because we want this image to be inside this

card and now let's make it like uh top will be zero uh left will be zero and then width will be 100% And Then height will be also 100% and final thing which you have to do is to just write like object fed it just cover it it and now here is our image right here and here is the linear gradient which we provide right here okay you can choose whichever linear gradient you want and so if you go to this side it will give you a lot of gradient cool gradient so you can just

click on that and this is the first color this is the second color or you can even go nested colors like Three colors like one two and three you can choose a lot of colors uh gradients from here so here is the gradient like you can just choose whichever gradient you like I guess this is a open source you just have to give a or if you want to you have a GitHub repository you can give a start by sharing you can share it by Facebook you can just Twitter you can do whatever you want

with it anyhow so I've choose this gradient from that website so that's why I'm shouting out To that website so this is the image so now let's start to do or before and after selectors all right so I'm going just do like card before and then I'm going to duplicate it and card after remove that column from there comma and cont will be nothing Position will be absolute so top will be zero and the lift will be zero and the width will be 100% And then the height okay I just messed up a bit height

will be also 100% And then the background color will be Tally White and the transition will be just 1 second and the Z index will be minus one save it and nothing's going to happen because we didn't provide any how effect to it so I'll just write card how if we how or to the before selector so you just provide a transform of rotation 20° you'll just provide a rotation of 20° and box Shadow 02 pixel and 20 pixel and rgba 0000 0.2 save it and now let's check it so here you can see here

we have the first Card and now we also want to do with After Effects not adop after effects but the after effects so now here if you have over we get a single col right here but you want to duplicate it so I'm going just duplicate it and change this one to like after and the rotation will be 10° instead of 20 and yeah I guess the Box Shadow is fine save it and now if you have a mouse order so now we we are getting two uh cards beside this go Right here okay so

now let's format this image box right now so go to there and now let's select or image box and now we have to just provide a position position of absolute and then top will be 10 pixel uh left will be 10 pixel and bottom will be 10 pixel and right will be also 10 pixel background color will be just this 222 and then transition because we want to provide a how effect to it so we have A 1 second transition Z index will be two and save it and now you want to also just put

a how effect to it so like I'll just use like car once you hover over the image box so you want to just get the bottom to like 80 pixel save it and now once we have our Mouse overt so here you can see it will gives us the effect but here you can also see the text which we wrote inside here her name so now let's just Center this details container so now let's format this detail Container so I'm going to have to go a little bit down so I'll just use like d Tails

was that correct yep details details both of them are fine position of this one will be also absolute and left will be 10 pixel right will be 10 pixel bottom will be 10 pixel and height we will give is like 60 maybe 60 pixel and text align will be also Center save it and now once we have ordered so here you can see we are now getting her name and these three cards Right here so this is before the other one is after and this is her actual card and this is her name which is

Center by the way there was a lot of talking I want to talk no more I mean like my throat is s all right so that was the first project so now let me just review all of the code one more time and then we are going to be good to go so by the way you want to use your own image so you can also use your own image just um take this image from unsplash.com Shout out to them as well so the first thing we have is a card container then inside a card

contain we have a section with a class of image box then we have a image inside it then we have a article of with a class of detail and then her name okay so the first thing which we did is we just provide a linear gradient to it and we just Center everything and we change the font family to send SF and we give him 100 VH he to it okay then we select our card we provide a position Relative to it we give width and of 30 rims we give background color of white and

then we also provide a background the Box Shadow this is the Box Shadow let me just show you the like uh I don't know blue it be fine and you cannot see that blue let me just change this to like red save it and now here you can see that box Shadow is just like light box Shadow right here so if I just undo it one more time so this is our box Shadow here you can see that all right Then we use a before and after selector we forward a position absolute top left will

be zero and width and height will be the same as this card and then we have a background color of white transition will be 1 second because we want the transition to happen smoothly save it and then it will going to happen like this and this is not looking cool this looking more than ugly so you want this to happen a bit smoothly so that's why we provide a transition of 1 second Thir then we have a z index and which will just show everything at the top then we have a card how effect we

just rotate this first car to 20° and we rotate the after car to 10° so that's why we are getting this uh first and second card right here then we have image box right here and we provide position absolute to it and we just format it a bit and then we just provide a how effect so whenever we have over T so it will give us that much space and It will take this image okay then we have this details container it allows us to just Center our name right here and then we have a

image we should have to tag this image from there and pass it somewhere right here so once we format our card um I guess I should have to just put it right here both of them will work I don't mean like it will not work both of them will work but this is just a good style to do it anyhow so you get The idea all right so that was the second cards go and welcome to ninth project of this course so in this video we going to be just creating this simple tool tip by

just using HTML no ncss no JavaScript no nothing so if you have our Mouse over to it so we would just get this tool T text right here and if you want to place your own text so you can also place there but in my case I just write like tool tap text right here so this is going to be The easy project of this course so without wasting any time so now let's jump right into it and now let's just create this tool tab in the previous video we've created this creative cards but in

this video we going to be creating a tool tip by just using HTML and CSS no JavaScript no pre-processor like s no whatsoever just pure HTML and CSS okay so what I'm going to do I'm going to create a new folder give a name of 09 and then tool tip okay and then Inside this tool tip I'm going to create two files like index.html and then another one will be style. CSS so let me make it a bit bigger so that we can see it a bit better okay so the first thing I'll do is

I'll just create a doc Tab and give a name of like tool tip and then I'll link it with my CSS file save it and now let's launch it with live server so I'm going to right click and click on the live Server the first thing I do I'll just provide a div with the ID of container okay just container inside this container we will have like spans two spans so the first one will be uh idea of like tool tip and also tool tip content content and I'll just write like two tip text and

then we will have another span so I'll just write span how me okay so this is just a HTML for this tool tab so the first thing we have is a div with the class of uh with the ID of Container and then we have a ID of tool tip content and then we have like how me okay so now let's jump right into a CSS and the first thing I'll do I'll just remove that padding and that margin just a bit of resets and then box siding of box sizing of Border box seven and

here's our tool tpe text right here okay so now I'm going to jump right into the body and I'm going to give him a width of like 100% And then I'm going to also provide a height of 100 VH display Will be Center because we want everything to be Center uh display will be flex and justify corner will be center line items will be also Center and background color will be linear gradient so I'll just write linear gradient and the first one will be uh add BC um 6 EC and then comma 95 uh 99

E2 okay so this is the color and now let's jump right to The Container so I'll just select that Container which is this container right here okay and then I'm going to give position of relative to it and then the cursor will be pointer and inside the padding will be 7 uh pixel and then font size I'm going to make it just a bit bigger so that we can see it a bit better so so 25 pixel and font weight will be Bard so on see s file and this is our tool tip right here

okay and it's now saying like how are me and whenever we have over to and so our cursor change To like pointer right here okay anyhow so now let's select this to tip content right now so now I'm going to just write like two tip and then uh content not container but just content inside there I want to write position of absolute and then I'll side there left 50% and then top will be zero and transform uh not transform origin transform just a simple transform will be translate X AIS and we want them to be

to go like minus 50% and Then we have a background of totally black and then we have a color of pure white and then we have a wide space of no wrap and then we have a ping top and bottom will be 10 pixel and left and right will be 15 pixel and it should be no WP okay and then we have a border radius of 7 pixel just a little bit of border and then we have a visibility hidden currently it will be Now hidden and we have opacity of zero so it will be

totally hidden and then we also want To provide a transition to it so transition to opacity and 0 .5 seconds e okay so that's because we are going to be working with a before selector and we're going to be also Hing over to the content so that's why we are using this uh transition with opacity of like 0.5 seconds because we want our transition to go a bit smoother so tool tip uh content now we are using a before and then we have to provide a content of Nothing and then we have position of absolute

and then the left side will be 50% and then the top will be 100% And then we have a transform of translate X XIs and then we have a minus 50% okay and then we have a border of 15 pixel pixel solid so you just go with a 15 pixel solid and now let's change the Border color to like um 1 2 3 and now change it to 1 2 3 4 and now change it to 1 2 3 4 one more time and then 1 2 3 4 this last time okay so nothing is

Going to happen because our tool TP is gone that's because of this um opacity and visibility hiden so whenever we have over this Tex so it will just giv us our tool tip okay so now let's select our container and once we have over to this container and we want to select this two type of content and then top will be minus 130% and then we have a visibility will be now uh visible instead of hidden and then we have opacity will be one so once We s file and now if I hover over to

it so here you can see it will now gives us these tool tip right here and if you want to change the font family of that you can also change the font family of that one as well so maybe I should just provide a font family right here Sor you can choose whichever phone you like so when I have on my mouse overed so here you can see we've got a simple tool tip right here and by the way if you are wondering like where I get this um Background color so I get there from

this side which is like if I go to this gradient.com so here you will find lots of gradient so here you can see I guess I choose like one as there I guess I choose this one I'm not exactly sure but you can choose whichever you like from there okay so now let's suppose if I want to just like um maybe grab this one so if I copy there and now let me change this one let me duplicate and come in this line of Code and now let's change this one and now let's grab the

second one from there copy it and now let's change it to this one and then finally we have this one so let's copy this code and sa file and now here you can see that background is changed so I don't like that if you like this you can choose whichever gradient you like and here's my gradient hey guys husin and welcome to the 10th project of this course so in this video we are going to be creating This accordians component by just using HTML and CSS no JavaScript no nothing so if you just click on

this one accordian so it will collapse the above and it will open this one that's because we are going to be toggling or active class so you are going to see that just in a second so if you click on this one so it will hide this one and it will open this one okay so this is how it looks like so without wasting any time now let's jump right into our coder and write our code Now in the previous word we've created this tool tip by just using HTML and CSS in this video we

are going to be creating an cordian component by just using HTML and CSS JavaScript no CSS preprocessors like Sans and Etc but just HTML and CSS so later on in this course we are going to be also creating an according component by using HTML CSS and JavaScript but in this specific video we are going to be just building it by just using HTML and CSS so Starting from the first thing which is out 10 project and now we have to do we have to give a name of like accordian and now here iner inside this

folder I want to create two file the first one will be index.html and the second one will be style style. CSS file so now let's write our HTML code so I'm going to write doc type HTML and here I'll just give a name of like accordian and I'll just link it with CSS okay so so now let's open it in Our live server so I'm going to just right click on it and go with live and now let's collapse this metadata as well okay so the first thing which you have to do is that we

have to just write a UR with the ID of accordian okay inside this UL we are going to be writing our lii inside this Li we are going to be writing our label and the first four we going to be writing a first and what is HTML you can put whatever question you like and then We're going to be writing our spanid here and then here we are going to be using an HTML entity so if you guys don't know about HTML entity you will just see that just one a second so the first thing

which you have to do is to just write an and symbol then pound symbol then write X and then 39 then 3 e to be precise not nine and now let's close it by just writing a column right there and then the next thing underneath uh the label we have to just write input And it will be a radio and now let's give him a name of like accordion and now the finny thing which you have to do is to just provide an ID to it so I'll just give an ID of first and then

we have to provide attribute of checked and this will just go for the first one now all of them underneath this input box we have to also create a div with a class of content okay and then here inside this content we are going to be just writing like uh let me Just go to uh Google and just search for like what is HTML okay so then we have to just copy this text you can just provide a l if some like a random text if you want to but in my case I'm not going

to go there so I'll just duplicate a few times like what is HTML what is CSS what is Javascript what is react and what is nodejs so now let's change this text to like what is um first of all let me change this uh for and this ID so this one was first one and this one is Now the second one so just close that second and then this one is third and then this one is fourth and the final one we have is a fifth okay so now let's change the text to like what

is CSS and now let's ask a Google like what is CSS so it will giv us this resal now let me copy that from there to this place and now let's just HTML CSS past it right here what is uh JavaScript uh JavaScript and now let's past this text right here and then what is react our react just so come on missp it copy this text and I'm going to paste it right here and then finally what is node.js so let's ask Google like what is uh node.js so it will use us this result nodejs

is an open source crossplatform EXC Etc and then we will pass that here all right so now we are good to go so we've changed The IDS and we have to change the names as well now we should have to change the names but we just have to change the four attribute and the ID as well and now we have to just remove this checked from all of them except the first one so I'm going just select all of them except the first one and now I'm going to remove it okay so this was it

about HTML so now let me zoom out a bit so that you guys can see everything a bit clear so here you can see we have a UL with the Class of with the ID of a cordiant then we have a lii and then inside this lii we have a label and then inside this label we have this spin right here which will just show us this error right here this is known as a uh error but this is coming from HTML entity okay so if you search for HTML entities so there is a lot

of symbols you can use that you shouldn't have to just like um copy the library like uh for awesome or there's a lot of them so you can also choose this Icon if you want to so then we have a Content uh container inside this content container we have this paragraph which will just render these text right here okay so now let me zoom in back and now let's jump right into our CSS and just start from the resarch okay so I'm going to just write like padding of zero margin of also zero and box

sizing of Border box and now let's select our body and now background will be Crimson you can choose whichever Color or whichever um font you like m guess I'll just go with the background color of crimson and for family of s Surf and now let's select that accordion which is right here and now let's provide a margin of 100 pixel and auto and the width will be just 600 pixel so once we save it and this is how it looks like currently right now okay so now let's select our accordian and also lii so now

we have to provide a list style of none style of none because we want to Just remove those uh Styles and now let's just uh form a bit so I'll provide a width of 100% and I'll just put a margin bottom of 10 pixel and the background will be totally Pure White and padding will be 10 pixels so save it and this is how it looks like currently right now so we have to just provide a bit of padding Etc right here so now let's select that or you know want let me select all of

that and past right here and also select that label and and Here I'm going to provide a padding of 10 pixel all around display will be Flex justify content will be space between and align items will be Center and font family uh not font family but uh font size will be just a little bit bigger like 18 pixel and font weight will be 500 and we can change the color to like doger blue um doger blue or yeah I guess that would be fine and c will be poed so once you save it and this

is how it looks like currently right now and we Can also see this um this radio button right here so now let's just remove that okay so I'm going to select that first of all I'm going to provide all of that and then label uh or you know plus input with the type of radio and we want to remove the display of none save it and that's not gone yet something is wrong we've got a according we''ve got a label label save it and that is gone now let's rotate this one to like 90° so

we can also do That by just writing like a cordian and lii and then we have to just write like label and span and now just PR transform of rotation a little bit like 90° would be fine 90 deeg and then the font size will be 22 pixel and then color will be that do blue do blue save it and this is how it looks like right now okay so now let's just style these text so that's that and then we have to select this accordian and now let's select that Content which is right here

inside this content we have this paragraph So now let's change that to padding will be Zero from top and bottom and uh 10 to left and right and line height will be just uh 26 pixel will be fine and then Max height will be zero for now because you want to increase that once you have over trade or once we click on the button and now we provide overflow of hidden and then the transition will be for Max height and also from 0.5 seconds So this is how it looks like right now so once we

click on this button or each cordiant component so you want to provide a little bit of Max height to it so this is what's going to happen right here so now we select our label and then also our input with a to type okay type of radio and now let's select that if that's checked if some input is checked so we want the content to just provide a Max height of 400 pixels save it and let's suppose the first one was checked By here so this one was checked so let's suppose if I click on

this one okay click on that one is going to happen I don't know why we've got our level we've got our input everything is fine all right so everything is working like this one is working this one is working everyone is working except this one so I guess there will be a little bit mistake in the HTML code so second and second yeah SEC save it and now it should works so if I click on that yep it's working All right so that was a little bit of HTML and CSS so now let me zoom

out a bit and show you both codes side by side and what we are doing all right so we are just providing a background color and for family and then we are just centering everything and we are just providing a little bit of width to it and then we are selecting that Ally like which one are you we are selecting that Ally and we just providing a list stle of none and we are providing 100 percent Of with and we are just providing a margin bottom of 10 pixel and background will be totally wide and

padding will be just 10 pixel then we are selecting that label which is right here and then we have we are providing like 10 pixel of label we are centering everything not centering but just spacing around like this one will take that place and this Arrow or HTML entity will take this place and then we are centering in this component and then we have a font size And then we provide a little bit of weight to it we change the color to Door blue which here you can see there and we just provide a cursor

pointer to it so like whenever we have over to it so that mouse cursor will be changed and then we have uh Accord and we select this span which is this span right here and we just rotate there like 90° so here you you can see that if I just remove that so here you can see this is going to look like that and if I just uh rotate It rotate it so this how it looks like all right so then we just select our radio button and we just remove that display of we just

remove that radius from there and then we have our content we are just providing piring and line height Max height and overflow of hidden and we are providing a transition of 0.5 second seconds on Max height so whenever we are providing a Max height to it so it will take like 0.5 seconds so if I click on that it will take 0.5 seconds If I change this to like uh I don't know like maybe 2 seconds save it and now if I click on this accordian component so it will take a little bit of time

right here so here you can see that this is looking quite ugly so maybe I should just go with 0.5 and now if I click on that everything is cool guys and welcome to 11th project of this course so in this video we are going to be creating this scroll bar by Just using HTML and CSS no JavaScript no nothing so a lot of people ask me about like how to create a scroll bar in our project so this is what we going to be doing in this video by just using HTML and CSS so

without wasting any further time now let's jump right into our Cod eror and write our code in the previous video we've created this according component by just using HTML and CSS in this video we're going to be creating a scroll bar by just using HTML and CSS All right so I'm going to just WR like o1 and then okay I should have have to give him some name o11 and then scroll bar and inside the scroll bar um folder I'm going to create two files given name of index.html and style. CSS this zoom in a

bit so we can see it a bit clearly do typ HTML and then scroll bar and Link it with my CSS file right here then I'm going to right click on it and go live and also just hard this meta data for now all right so the first thing which I'm going to do is that I want to just create a section with the CLA of container you have a scroll live and inside the scroll Dev you'll have a scroll object like a scroll Das object okay and here inside this scroll object we're going to

be writing a lot of text so I'll just write like lurum of um I don't know maybe I'll just write like 500 text and semi file so it will giv us all of these text right here okay so this is quite simple and easy so know Let's jump right into our CSS and start styling so the first thing I'll do is I'll just zoom in a bit and then select my body and then the display will be Flex because we want everything to be Center justify corner will be Center align items will also be Center

font family you can choose whichever you like and the text will be totally white okay and now we have to select this scroll container container which is right here the scroll container okay I forgot the Name to like scroll container so this are scroll container so now we have to give them a background color of uh RGB and then the first one will be 777 and now we have to give him a width of 75 not 75 25 RS and then padding will be 30 pixels once we s a file so this is how it

looks like right now super super ugly okay so now let's start work with this uh scroll scroll div so now we have to select that let me just copy it copy just a scroll div and now let's select There scroll div Right Here and Now style it so width will be 400 pixel and height will be 500 pixel and background color will be is the same of the above so RGB of 7 7 and 7 okay and then we have to just provide overflow uh of hidden and then we have to just provide like overflow

um of y-y and it will be scroll so once we save file so here you can see now we get This scroll bar right here and we can scroll through right here okay this was quite simple and easy and the last thing which we have to do is we have to just pour a little bit of pading to it so I'll just select this scroll object I'll just copy it and then just write a DOT and scroll object pading will be 20 pixels save it and now we got a little bit of pading right here

so you can change a color you can change whatever you want inside this project but a lot Of people DM me and tell me like how can we create a scroll bar so that's why I'm putting this project in my course so there that guys hin and welcome to project 12 of this course so in this video we're going to be learning about how we can clip a background image as a text so this is what we are going to be doing by just using HTML and CSS no JavaScript no pre-processor no nothing so without

wasting any time now let's jump right Into our codor and write our code in the previous video we've created this scroll bar component by just using HTML and CSS in this video we're going to be creating a background image Clipper so I'll just write like O2 and then I'll just write like image and then BG or yeah BG uh text will be fine and inside this U folder I'm going to create two files give a name of index.html and then style.css okay and then I'll just write My doct type HTML and then image bgbg text

and now link it with CSS and then write click on it and open with live search so everything is working the way we expect them to work all right so the first thing which I'm going to do is there I'll write a lot of HTML codeing this project which is just right like heading and then I'll just write my name you can write your own name like hen uh web dev Dev zoom in a bit save it and this is at about HTML so now let's jump Right into a CSS and then in CSS we

going to be just writing a margin of zero padding of zero box sizing will be Bard box and then we are going to be selecting the body and then we have tojust for 100 VH he and font size will be I don't know like um I don't know one Rim will be fine it's already by default one Rim so we have to just leave that the way it is and font family will be send Surf and display will be Flex because we want them to be Center and Aline item will be also Center okay so

this is our text and no background whatsoever now let's just provide a background color of totally black so I guess that was going to be looking a bit cool and then instead of providing any color so you're going to be just selecting our heading which is right here and now we have to just provide a bit of styling like font size will be 10 rim and then font weight will be 900 or yeah I'll go 9 100 and then background Image let's grab a background image from somewhere like unsplash.com not girls but nature I'm a

nice guy let's grab this um which will be fine let me just check I don't know I guess that would be fine just click on this one and let it render and then right click on it and copy image address and then paste it inside a your L and then pass it right here and what else do we have to do we have to just provide a background uh Size of c and then we have to just write a background clip of text because we want them to be a uh text and then we have

a web C background uh clip and we want them to be text as well and color will be just transparent and sell file and this is what we get this is our background image right here and you can also change the phone if if you want to so let's go to uh fonts. goole.com really quickly so let me delete my old one Clear it out and I don't know which kind of pH will be fine for this project all right almost before that's not s serve that's not serve to be precise you already get the

idea but let me just choose okay this F will going to be fine so yeah it has just one face so shout out to this person about the phont just let me grab it um click on it and this is the font family so now let's import it in at top of the file and what will be the F Family copyed instead of send surve where are you sve where are you just paste it here save it and it will render so this is how it looks like my phone and if you want to change

something else like if you want to P some other image so you can also choose that let's suppose if I just choose that and then right click on it and copy image address and then just change this image to that image in s file and this is how it looks like right Now you know what the other image was fine so let me just back to that yeah that's going to be fine all right if you guys don't know about git and GitHub so feel free to skip this video and jump right into the next

project and if you guys already know get and GitHub so if you want to watch the rest of the videos I'm going to push my code to my GitHub repository which is right here clear it get status so we have this out 12 so get add everything and then we have to just For get commit DM image BG background um yeah I'll just WR there and then give push origin to Main and now we are live everything is pushed up so let me refresh my browser and where is there okay so o12 this is my

HTML code if you want to check that out and this is the CSS code all right so I guess that was about today's video and I'll see you in the next video bye-bye