hey guys i hope that i'm live right now
if you guys are able to listen to me
properly as well as there's no issues
with the audio or the video please do
let me know
hey guys i
hope that i'm live right now
if you guys are able to listen to me
properly as well as there's no issues
with my audio or the video please do let
me know
good evening everyone good evening good
evening
leo am i clear to everybody please do
let me know
great
so how was your day guys uh is
everything all right with everybody
please do let me know
is also there with us right now one of
our old students that we have
great to see you guys yeah
okay great no issues amazing amazing
okay so let me know guys uh
what we have studied in our yesterday's
class and somebody remind us what we
have studied in our yesterday's class
hey guys can somebody remind me what we
have studied in our yesterday's class
css okay so we started out with css and
in that we studied about which are what
are the three types of css guys
inline internal and external css and
which one should you prefer the most
okay which css which type of css should
you prefer the most guys please do let
me know
external css okay great amazing guys
amazing
so from today onwards we will be
continuing with our css
we will start learning the
extra information that we need to build
up upon the current that we have
so we will look at some of the projects
and some of the mock-ups that we have to
build up i will be proceeding from right
over there it would be very easy guys
don't worry about it okay i'll try to
keep it very easy and i have a small
assignment for you guys as well uh of
course i'm not going to check this
assignment okay there's no submission of
this assignment but still i will suggest
you guys to try
and practice this how would you be able
to create this entire website okay uh
using html and css that would be your
aim of the end of today's class
because see any type of web development
or you are doing dsc cp computer
programming anything that you are doing
at the end of the day or even data
structures algorithms or data science as
well
everything is
dependent only upon how you are able to
practice this how much you are able to
practice it okay
so
that is the reason why i have kept a
small assignment for you guys again you
don't have to submit it okay you don't i
will not be able to take up the
submissions i will not be able to check
it it's totally up to you if you have
that drive
then you should definitely try to do
that okay
uh please tell how to redirect uh using
button okay so just use the href uh
link itself inside and you will be able
to redirect it as well okay
okay
i haven't shown the attendance link up
till now guys we have just started out
with our today's class i'm just waiting
for everyone to join the class itself so
we will be waiting for one or uh two
minutes more and then we'll start off
with our today's class okay don't worry
whatever i've said up till now we will
be repeating it in the future as well
okay so
don't uh worry about that okay
this is one more t-shirt of def town
that i'm wearing right now
so yeah
are you a web developer so i have been a
full stack engineer i have been a data
scientist a data engineer a software
engineer as well in many companies so
yeah one of the roles that i had was
that of a full stack engineer
is everything all right with your throat
i i think so like uh
some issues with the throat as well
it will take one or two days to resolve
that but no issues we'll just continue
without today's class okay
uh
okay i need to get one more device so
that i'm able to see your uh
screen as well your life's uh chat as
well so give me a second guys give me a
second i will come back in a second or
two okay i will just get something to uh
watch the live chat okay give me a
second
okay yeah i'm back so i brought in the
device to watch the live chat and then
we'll start off with our today's class
okay
yeah so we don't sell depth on
merchandise
okay
uh it's just for us but yeah we will be
providing the t-shirts and the
other things that we have created to our
campus ambassadors so we have a campus
master program and we send these
t-shirts shirts and other goodies as
well to our campus ambassadors
so yeah i've opened up the live chat as
well and now we can start off with our
today's class
uh no the training program that is full
stack engineering program happens on
zoom not over here
okay so can we start off with our
today's class guys please do let me know
can we start off with our today's class
guys uh can uh do let me know
great so let's start off with our
today's class guys okay
the first question that we are able to
have right over here is we need to style
an image okay
we need to take an image we need to add
a border to the image we need to add a
cursor change to the image and box
shadow so what we want to have is an
image right over there and we need to
have a border around the image like a
frame okay we need to have like whenever
our cursor so the mouse cursor that you
are having right over here when you are
hovering over the image itself the
cursor should change from the normal
arrow that it is to a pointing finger
okay something like this a pointing
finger
and i need to put some shadow to our
image as well okay we need to put some
shadow to our image as well now i know
i'm able to understand that not many of
you know css properties so what to do in
that particular case for example i need
to put a border around an image okay i
need to put a border around an image
what i will be doing is i will go back
to my screen okay this is the html piece
that we are using first let us have an
image right over here let's remove
everything
and to put them an image uh how to put
an image in html guys can somebody
remind me the name of the image is
favicon144
dot png how to put up 144. png on our
screen guys can somebody remind me
please let me know
how to do that guys can somebody let me
know
and somebody let me know guys how to
insert an image in html we have already
done that while studying it
uh in our just in the yesterday's class
or day before yesterday's class can
somebody let me know how can we insert
an image
using css can somebody remind me that
using html sorry the image stack that's
great so img that is the tag that we are
going to use
and inside of that the source file would
be favicon 114 okay so we will just
select favicon144.png
and for the alternate text we are going
to have mdn logo okay we're going to
have mdn logo as our alternate text
let's save this right over here let's
open up our website in a new window and
just let's scroll this off from right
over here we don't require this
okay so right over here as you're able
to see this is our website with the
image now i want to have a border around
it i want to have a border around this
image so what is the property what is
the attribute of html that i should use
to put up a border put up a frame around
it so i know that we need to use border
uh category like
attribute itself but what if you don't
know okay so what you can do is just do
a simple google search okay just do uh
image okay
b img
r d e border
uh
css okay let's let's do our image border
css okay so as you're able to see we are
getting the first link of css border
images using w3 schools as you're able
to see so just read through the entire
thing okay just read through the entire
thing how you are able to put up a
border to a particular image and so on
and so forth okay just read through the
entire thing what are the different
properties that is asked what are the
different things that you can apply to
it and so on and so forth
so just read through the same and it
will be very easy what we need to do
right now is we are having the image
source alternate um text as well now if
you want to provide if you want to put
up a border around it using css what is
the first thing that you are going to
use what is the first thing that you are
going to use can somebody remind me
please remind me what i have told you
guys whenever you are putting up css
what should be the process that you
should be following can somebody remind
me please let me know
no not border tag okay can somebody
remind me not id okay class other gotham
you are absolutely clever guys class is
what we need to assign to image never
use directly the image tag never use id
try to use classes wherever possible so
this particular image tag i'm going to
assign a class and the class i'm going
to name it as mdn okay that is the class
that i am currently naming it as mdn
right over here let's save this now we
have already linked our style sheet as
we are able to see so style.css
we are going to go into our style.css
how are we going to select a class guys
can somebody remind me how are we going
to select a class can somebody remind me
guys
what is the process of selecting a class
guys can somebody remind me what is the
selector
that's absolutely clever guys dot mdn
okay dot mdn right over here that is how
you will be able to select the class now
what are the changes that you want to
apply to it we want it to have a border
okay so let's have is this border okay
and uh
let's keep the border how thick the
water should be so let's keep it as 10
pixels uh all around okay so it should
be 10 pixels all around uh the color
let's say it should be salmon
okay we are keeping the color as salmon
and the pattern let us keep it as dotted
we want to keep the pattern as dotted
okay so let's let's first keep it let's
not advanced it okay let's just keep it
as 10 pixels itself okay so border is 10
pixels as you are able to see right over
here we are using dot mdn which we have
studied yesterday border is the property
that we want to apply to create a border
around our mdn class and the thickness
of that border okay that thickness of
that border all around the image the
frame thickness should be of 10 pixels
let's go back to our website let us
reload our page as you are able to see
there is no
okay did i make some error right over
here let me just check
okay so i think so the it has it has a
border but it has become invisible so i
need to have it as a solid border itself
let's keep it as a solid border right
over here let's go back to our screen
reload the page
okay so what happened previous to that
is although i had a border i hadn't
specified what kind of water it is so it
created an invisible border for us okay
we will be understanding what border
means and so there is padding this
margin this border so these are the some
of the concepts that we will be looking
at so when i wrote just 10 pixels border
so it created an invisible border around
our image but we wanted to see it so i
have written solid right over here so
that i'm able to see the border as well
so as you're able to see we are having a
black colored border all around our
image i don't like this color i want to
change the color of this border so what
i can do is i can come back to my code
and it's after solid i can just write
maybe let's say salmon okay maybe let's
say salmon right over here i want it to
be salmon color now salmon color the
salmon is a fish the color of that fish
when you eat that fish is basically
salmon so it has the name is right over
there so it's like a baby pink sort of
color itself if you go back to your
website and reload the page as you're
able to see the border becomes um
salmon in color instead of black now i
don't want it to be let's say i don't
want it to be like solid i don't want i
want some pattern around it i can use
instead of solid i can use dotted okay i
can use dotted as you're able to see let
us take up dotted right over here so
border is 10 pixels uh wide i want it to
be dotted in uh
like the
type itself and i want it to be salmon
let us run this little line of code and
as you are able to see the entire uh
dots are there around our image itself
and this is how you are able to create a
dotted uh
layout around the image okay so now you
are able to create a dotted border okay
so you can still explore a lot with the
css border as you are able to see right
over here
think about what are the different
things that you want to apply just read
through them
and you will be able to understand it a
lot okay there's a lot of different
things that you can explore from right
over here do give it a try okay it reads
your documentation properly it's really
very important okay how you are able to
um
like
reading a documentation at the end of
the day is very very very important okay
so do go through documentation anything
that you want to do so for example uh if
you want a circular border instead of
having it instead of making the border
go around in a particular shape of the
image itself that is in a rectangle if
you want to have a circular image okay
if you want to create a circular image
what should you do okay what should you
do at the end of the day for that just
search for it it's very simple okay um
image
sir
css okay how to create rounded image and
you are able to see right over here you
are using border radius so for that your
body will be going back to our code and
including one more thing called as
border radius obr the border
and then radius right over here and that
will be 50 okay that is the radius of
the uh
image should be 50 that is the radius
should be 50 of the width and height of
the image so right over here if i'm
saying this going back to my screen as
you're able to see right over here we
are able to create a circular image as
well so you need to understand these are
some of the techniques that you need to
understand you need to be good at
googling itself at the end of the day
you need to have to be good so for
example like i said you don't need to
know everything from the start you don't
need to know everything from the start
you cannot remember everything as well
even i have sometimes some problems
remembering stuff that is all about
practice the more you practice the more
you will be googling stuff you will be
knowing stuff you'll be implementing
things and slowly and slowly you will be
able to build your knowledge
okay so that is the main thing that you
need to understand right over here are
you guys able to understand right over
here okay why did we use 50 percent
let's try to understand that
okay so fifty percent is basically fifty
percent of the width of the image
if you are having an image right over
here then suppose you are having an
image right over here
let's say this is your image okay this
is your image right over here you want
it to be becau you want to create it as
a circle okay you want to create it
convert it into a circle itself so this
radius this radius of this image what
should be the radius of this image the
radius of the image as you are able to
see if you want to convert this into a
circle draw a circle inside of it the
radius would be equal to 50
of the width of the image the radius
would be equal to 50 of the width of the
image that is why you are keeping the
border
radius
as 50
to be able to convert a square image to
a circle right over here okay
okay so let us look at the next question
that we are having let's go back to the
ppt
next we want to apply a cursor change on
the image if you are hovering over the
image the cursor should change so what
should be the uh
css code that we should use again very
simple never be afraid to
google search it a simple google search
will result to you
change you are sorr on hover image
uh css you wanted to be a css property
okay so again you will have like
programmers portal you are having uh
stack overflow tutorial republic so you
can go to any of them okay you can go to
any of them uh so as you are able to see
we will be opening this and you will be
able to see a lot of examples right over
here yeah you will be able to see a lot
of examples now if you are not very so
sure that okay this is what you want to
do and just click on try now so they
have that option to basically uh look at
how will it uh
look at at the end of the day as you are
able to see when you are hovering over
the cursor okay so you can even put up
your own image for the cursor as well
you can even put up your own image for
the cursor as well so for that you are
having this cursor uh property okay
what is cursor so kill pohit i think so
you should go back to first standard uh
cursor is the pointer that you used to
point out to different objects the
cursor okay so i need to show it to you
guys i guess
okay so as you are able to see from the
image itself this is a cursor okay this
is what a cursor looks like okay are you
able to see this guys please do let me
know
i hope that you guys are familiar with
cursors now
okay great then go to the cursor
documentation as well you can
just see what are the different cursor
movements that they have weight
crosshairs as what is the syntax what
are the different things that you can do
now for example if you want to convert
it into a pointer then the example is
use pointer itself so what we are going
to do right now is we are going to have
a simple
stuff okay we are going back to our code
we are going to have another that is
called a c u r s r cursor and we are
going to put it as a pointer now that is
a logo like this this is what you want
so let us save it right over here go
back to our website so the code that i
put up is cursor pointer okay we are
going back to our website reload the
page and as you're able to see right
over here when i'm hovering over the
image itself my cursor becomes a pointer
are you guys able to see the pointer
please do let me know as soon as i am
hovering so it's an arrow as soon as i'm
hovering over the image it becomes a
point as soon as i'm hovering over the
image uh it becomes a pointer
are you guys able to see this are you
guys able to understand please do let me
know guys
are you guys able to see this are you
guys able to understand please do let me
know
amazing guys amazing you guys are so
clever okay so let us look at the next
property that you want to change
box shadow we need to provide some kind
of shadow to the box itself for that
first of all we need to need it to be a
box we are going to remove the reborder
radius property this is a simple border
that we are having right over you let's
go back to our website reload the page
as you're able to see a simple border
that we are having right over here
now what we need from the same is that
we want to provide a 3d sort of
structure we need to show that the image
is coming up a bit above the normal
website itself so we need to put up some
shadow behind it how to put shadow to an
image again very simple just go back to
the website just search for s-h-a-d-o-w
shadow
css okay
and uh property just search for that so
you will be able to see uh css shadow
effects that you are able to see right
over here
now you want to have you don't want to
have a text shadow you want to have an
image shadow a border uh shadow itself
okay so what you're going to do is again
search for that so image and search for
image shadow css property okay
again uh box shadow property that is
what we are going to be using so we will
be using the box shadow property just
look at the properties try to understand
how these work okay so for example let's
try this out
so we are having the example as 5 pixel
10 pixel and then eight pixel right over
here okay for the first uh image okay so
example one
uh as you're able to see it's five pixel
uh eight pixel and ten pixel uh that
the five pixel and ten pixel is what
goes around in a clockwise direction
okay so let's let's try to understand
this from an example right over here
so this is your box okay this is your
box right over here
this draw box right over here now you
need to provide a shadow you need to
provide a shadow around it so you want
some shadow right over here
you want some shadow right over here as
well so what should be the thickness of
the shadow okay what is the thickness of
the shadow so it will be
box shadow that is a property uh sorry
border shadow
that is the property that you are using
right over here and then whatever
numbers that you're writing okay
whatever thickness that you're writing
you are writing the thickness in a
clockwise direction so if you're writing
5 pixel then 10 pixel right over here
that is what you are writing that okay
this the width is 5 pixel right over
here the width of the shadow is 5 pixel
right over here the width of this
particular shadow is 10 pixel right over
here okay if you're writing then again
uh if you're not writing anything then
only these two sides will get the shadow
only these two sides will get the shadow
if you're writing anything else right
over here let's say uh six pixels and 20
pixels so that will be a shadow right
over here for six pixels so this shadow
would be of six pixels and this entire
shadow would be of uh 20 pixels in the
width okay so the width would be 20
pixels and so on and so forth so right
now we don't want that we just want so
when you have you are creating something
that is 3d you only want to have the
shadow on two sides so that you are able
to give that 3d sort of effect right
over there so we are only going to have
5 pixel and 10 pixel right over here now
if we are putting up another number that
is how blurred that shadow should be it
shouldn't be like a hard box it is a
shadow so you need to spread that shadow
as well so i'm putting up eight pixel
right over here
i'm putting up eight pixel right over
here and then the color of the shadow
that i want and as you're able to see
this this will be then blurred out okay
this will be blurred out a bit for eight
pixels this will also be blurred out by
eight pixels right over here so let us
go and write this video code okay
uh we will go back to our screen we are
going back to our code right over here
and we are going to have another
property that is the border
and shadow
box shadow sorry
so we are going to have the box shadow
inside the box shadow we are going to
have it as a bit 3d so let us keep it as
10 pixel 10 pixel
and then pick uh
unless they have the spread by let's say
12
5 pixels okay let's have this spread by
5 pixels so on the right hand side you
are having 10 pixels of shadow on the
bottom you are having 10 pixels of
shadow you're having five pixels of
spread as well and again the color
should be in salmon because of course we
are using salmon right over there let us
keep the color as salmon let's see if
this right over here go back to our
website reload the page
as they're able to see you are able to
get that shadow around the image okay
you're able to get that shadow around
the image let's change the dotted to
let's say solid itself
and change the order to solid let's
reload this
okay as you're able to see you are
having the image and then you are having
the shadow around it with some uh
like blurriness as well let's try to
understand that blurriness let's change
it to black
let's change this to black let's remove
the five pixel from right over here okay
let's have it just as 10 pixel uh 10
pixel and
just save this go back to our website
reload the page
okay as you're able to see you are only
getting the you are getting the shadow
but it's like you are getting solid
shadow right over there okay you are
getting 10 pixels on the right hand side
what code i have written right over here
is 10 pixels on the right hand side 10
pixels on the bottom 10 pixels on the
right hand side 10 pixels on the bottom
okay as you're able to see you are
having a solid uh
shadow a solid shadow of 10 pixels by 10
pixels that you are able to create but
does a shadow look like this does a
shadow look like this guys please do let
me know
does a normal shadow look like this
please let me know guys
does a shadow look like this guys please
do let me know
is this how you guys see a shadow
exactly you never see a shadow like that
okay so the shadow needs to be a little
bit blurred out okay it needs to be
spread out a bit and that is where your
third property comes into being that
you're writing right over here by how
much you want to spread it okay i want
to spread it by 20 pixels let us write
20 pixels right over here save this go
back to our website reload the page and
we'll save it will spread it for us by
20 pixels it will just spread it it's
like whenever you are doing a bit
painting you're is spreading it a lot
okay the higher the spread is okay the
higher the spread is the more it will be
like diluted okay if i wanted to be less
diluted i will put it something like
five pixels okay i put it something like
five pixels right over here so i'm going
back to my website reloading the page
now that blur would be a bit less as
you're able to see that blur is a bit
less okay so you can tamper with it
are you guys able to understand please
let me know guys
are you guys able to understand please
let me know
are you guys able to understand please
let me know guys
if you want to have like let's say a
third side as well then you will have to
specify a third file right over here and
if you don't want a spread then you will
have to write zero pixel
right over there to specify your third
site okay that is how it works uh
because usually you don't have a third
site that is the reason why we have it
like that okay so let's give this as 10
pixels 10 pixels 10 pixels right over
here let's go back to our website reload
the page okay so as you're able to see
you are having a bit of the shadow on
the top as well it is getting cut it out
because there's nothing on top of it
okay on the left hand side you are able
to see like on all the four sides there
is some shadow and it is using the last
to spread it out as well that is how you
need to experiment out a bit okay you
need to experiment out a bit now if i'm
just keeping it as just 10 pixels right
over here nothing else is 10 pixels box
shadow let's see what happens okay let's
see what happens
okay are you're able to see nothing
happens because you cannot have a shadow
on just one side okay so just experiment
out with it a bit okay you guys will be
able to understand and there will be no
issues experiment a bit how much you are
able to understand
look through the documentation properly
go through the documentation try to
understand the documentation as well how
to create multiple shadows this is a
question that a particular person asked
so go right over there learn it from
there it is very easy okay don't worry
about it
let us look at the next particular point
that we have
okay
uh the next is styling of font okay so
you are having any type of font that you
are having you want to font family to be
helvetica or ariel or sans serif uh this
is what we want to have so uh let's do
one thing guys let's go back to our
website let's remove the image
and let's put up a small uh paragraph
tag okay let's remove the image from
right over here let's put up a small
paragraph tag okay inside the paragraph
tag what we want to do is we want to
have a text let us keep the text as
hello world
it's sure
and huh
right
here
you're having a small paragraph as
you're able to see right over here okay
and uh we will be reloading our website
and we are able to get hello world
destroyers right over here okay so this
is the basic okay this is the basic
thing that we are having
right now okay now what we want to do is
we want to go back to our website the
first thing that we want to change is
the font family to helvetica aerial or
sans serif so for that you have a very
simple css property that is font family
itself so first of all we need to assign
a class to it class let's say that txt
we are going to use the class as txt we
are going to go back into our sites.css
remove everything from right over here
and we are going to use our
tag as dot txt
and we are going to write our first
thing as font
a family that we want to have right over
here and we want to have the form family
as ariel helvetica or sans serif so this
is how you are able to include the font
family now why are they three front
families right over here i hope that you
guys are very familiar with google
documentations
how many of you have are familiar with
what a font family is
okay how many of you are familiar with
the font family guys please do let me
know
how many of you are familiar with font
family guys please do let me know
hey fern family you have already used
google documentations and in google docs
you are having that uh you can change
the font of a particular text that you
are writing at any point of time the
same thing you want to want to do it
with the text on your screen as well so
now why are we having three different uh
fonts why are we using three different
fonts right over here now maybe some of
the browser might not be able to render
aerial maybe some of the browsers might
not be able to render albedica some of
the browsers might not be able to render
sans serif so we are providing three
different this is a font family guys
providing three different forms that
look a bit similar to each other so that
if the first family the first of uh like
aerial font is not supported by the
browser in which your website is
currently rendering in that particular
case it will render helvetica if
helvetica is also not supported in that
browser it will render sans serif even
if sans serif is also not present in
that browser then it will default back
to the normal uh like paragraph tag
that is
currently there okay so
right now i'll be saving this going back
to my website reloading the page right
over here as you're able to see the font
uh changes okay the font basically
changes from the normal paragraph tag to
basically the arial font family itself
okay and that is how you are able to
uh
use the font family okay the next thing
that we have in our question is we want
to have it uh font size to 60 pixels
okay we want to have the font size 260
pixels so let's go back to our screen
again code and we will have another css
code that we have that is font
size i will set the font size as 60
pixels right over here
so let's save it right over here go back
to our website
let us just
reload the page so this is the original
size of the code we are changing into 60
pixels and this is the new size of the
paragraph tag okay as you are able to
see this is the new size of the
paragraph tag okay the next that we are
having right over there is we want to
change everything to uppercase okay we
want to change everything all the
letters in our text to uppercase
everything that is present right over
here to uppercase how to do that again
if you don't know just google search for
a css to upper
case
um as you're able to see text transform
is the property that you will be using
so we'll be using text transform right
over here as well so text transform
and we'll be using uh
upper keys right over there we'll be
using upper keys so i'm saving this
right over here we're going back to our
website
reload the page as you're able to see
everything becomes uppercase everything
becomes uppercase right over here you
can use capitalize as well to capitalize
everything so we can use capitalize then
everything would be capitalized it's
able to see right ratio it would be
hello world it's sure
right over here
the first letter is always capital so
you can use text transform to do that as
well okay using just css
now uh what is the next thing that we
are having
underline the text how can we underline
the text there are two ways of going
about it you can of course use the you
tag you can go to your index.html
and use the uh you tag right over here
okay
so this is the you tag as you're able to
see inside the paragraph tag i'm putting
up my u tag
and i'm closing the u tag as well so the
u dac basically is used for underlining
the text okay the you tag is basically
used for underlining the text i'm really
reloading my page as you're able to see
we are having we can use
you to underline the text as well but
what if i don't want to use html i don't
want to use html for that in that case
there is text declaration that we'll be
using but again we don't know that we'll
again be you doing a google search
underlying
uh css okay let's take a bundle integra
css that you are having the text
decoration property and you will have
the underline right over there again go
back to your website go back to css use
tech decorations or text
decoration and you are going to use the
underline property right over there
let's save this go back to our website
reload the page and this underline that
we are able to see right now is using
css okay
let's look at the next property that we
want to change change the color to rgb
19 11 22
30 this is the color that we want to
change it to okay so are there two
things that you can do okay you can just
copy it or if you don't know how to
change the color of a particular text or
you can just search for it uh css
uh
text
color
change rgb okay just search for it okay
so color property that we'll be using
and you can directly specify the rgb
values right over there you can just
come back to your code and just have
another property color right over here
okay and i just clicked on something
else
so you can generally use the color
property right over here and for the
color you want it to be an rgb value so
rgb value that you want to do the rgb
value has been seated as 19 11 to 30
okay so 19
then you want to have 11 then you want
to have 230 right over here okay so this
is the color that you want to have
let's save it go back to our website
reload the page as we're able to see now
the color has been changed to our rgb
rgb values that we have been provided so
again down these css properties you
don't need to remember it you don't need
to remember it again like i said with
practice you will be able to remember
start to remember stuff as well and it
will become much more easy for you you
just need to understand that if
something has been written if you want
to do something how to search for that
what should you write for that how
should you use it right over there are
you guys able to understand this please
let me know
you guys able to understand this please
let me know guys
you guys able to understand this please
let me know guys
see life is not an exam in the interview
as well nobody is going to expect you to
remember everything now yes the basics
you should be able to know what it is
decoration what is black shadow
properties all these are basics of css
you need to remember that of course
because when you will be coding a lot
when you will be making projects like
you have said that yes i'm making
projects and these are on my resume then
these basic stuff of course you need to
remember because with practice you will
be able to remember it as well but yes
advanced concepts people just want you
to understand whether you know the
concepts or not how does css work what
is the like hereditary in that css and
all those kind of stuff so they want you
to remember that of course but nobody is
going to do that with you in an exam
okay
okay let's move on to the next
particular project that we are having uh
let's style a page so what we want to do
is we want to create a small page like
this i want to say to be styled
something like this as you're able to
see there's a bit of radius around the
image so the original image is a bit
sharp as you're able to see okay this is
the original image it's a bit sharp now
the new image is a bit rounded from the
edges okay
the next thing is that the text is along
with the image right over here from the
start we want it to be changed to so
that the text is almost in the middle of
the image now the text right over here
is normal okay we want it to be changed
to a bit of italics
similarly the title as well as you're
able to see is from the start and is of
black in color we want to put up the
title as red in color and exactly in the
middle along with the text at the bottom
this is what we want to do let's first
start by creating the html let's first
start by creating the html right over
here you want a paragraph tag right over
there you want an h1 tag as well
let's create an h1 tag let's
name the h1
chicken clay pot okay so c-h-i-c-k
clay
pot right over here okay the next thing
that we want to do is we want to have an
image so for right now let us take an
image from the internet
so
can
clay
hot rice let's stick up chicken clay pot
rice let's take up an image
uh i like this image let's take that
image up
copy image address let's take up the
address of the image directly so img
source this is the source image
alternate text we want to keep the
alternate text as i see in chicken clay
pot
rice okay
uh we want to save this right over here
we also want to have
the css attributes so the class
attributes with each of them the class
uh heading
then you want to have the class for the
image as well so class i will assign
this as a class of of
image image
we want to have a paragraph text it
already has a class of txt as well it
already has a class of txt and what we
want to do is uh let's look at the image
crispy rice baked in clay pot topped
with chicken and vegetables i'll be able
to find something like that on the
internet let's see
let's let's just take it from right over
here let's just take up the text from
right over here
let's go back to our website and paste
it here inside
ctrl v
uh let's keep it a bit short let's keep
it as a recipe for clay pot chicken rice
this is
good okay
a bit of smaller paragraph tag right
over there let's save this let's remove
the
everything from right over here again
save this go back to our website reload
the page so this is the original image
that you are able to see now the image
is also huge
we will have to resize the image as well
now we cannot use such a big image are
you able to see this guys you cannot do
such a big image right over here you
need to make the image a bit smaller so
what we are going to do right over here
is we are going to
resize the image as well we cannot use
this image so let's go back to our
website okay let's go back to our
website let's first start off with the
first text okay let's first start off
with the text itself we need it to be
centered and uh we need it to be uh red
in color now how to center a
image okay how to center a text how to
do that okay how to center everything so
for that we can again go to our website
just search for it
center element
uh css
okay so you will be able to see the
layout function right over here
and you will be able to see uh how to
center a particular item so text align
center okay so text align center right
over there
so what you want to do is you can just
go through the entire stuff how to
center different stuff together you can
just read through them properly okay try
to understand see everything that you're
going through don't do something like
this okay so for example you wanted to
just uh center it okay so you got to
know from the very first line that okay
and just use text align right over there
and i will be able to do this and move
further with that just go through just
take some time go through the entire
documentation read it see going through
documentation sometimes will increase
your knowledge as well okay slowly and
slowly will increase your knowledge as
well and you are here to increase your
knowledge okay you are here to increase
your knowledge as well so please always
try to do this read through as much as
you can okay read through as much as you
can so let's go back to our website
let's use text align so we want to do a
dot
heading
that is the h1 tag that we have we want
it to be text align
and then we want it to be at center
let's see if this right over here
go back to our website reload the page
as you're able to see now the chicken
clay part is in the center of the entire
thing okay in the center of our website
as well now for we need to change the
color so for the changing the color it's
extremely simple color we want to change
it to red because it's assigned red
right over here save it go back to the
website
reload the page okay you're able to see
we have changed it to red right over
here okay
um
next thing that you want to do right now
is you want to make the image a bit
smaller okay you cannot use this
particular image we cannot use this
particular image you want it to be a bit
smaller so what you will be doing is you
will be going back
uh you will be using the dot image right
over here
okay
and uh in the image tag in the image
class that you are having you need it to
have a height and width of let's say uh
let's say 800 pixels that have a width
of 800 pixels guys so the width
i'm keeping it as 800 pixels
the width of the image i'm keeping it as
800 pixels okay
so we will go back to our website reload
the page
and they're able to see the width of the
image right now is 800 pixels okay but
is this something that is appropriate
enough no i don't think so i should it
decrease the size a bit more so i need
the size to be let's say of 600 pixels
okay let's try to keep the size as 600
pixels right over here let's go back to
our website and reload the page
as you're able to see we are getting the
size of the image at 600 pixels right
over here okay the width is 600 pixels
the height will automatically adjust
itself because you don't want it to be
like 600 pixels of width and height of
like 1000 pixels it will look just like
very stressed out and you don't want
that so it automatically decreases the
height along with the width itself so we
are just adjusting the width so uh
what you want to do right now is
uh
we want to decrease the size okay we
have decreased the size now we also want
it to be centered okay we also want it
to be centered right now so what we'll
be doing is we want it to be centered so
what is the uh can somebody google it
and let me know
what should the image what should be the
uh css property that i should use i
don't show so i'm able to center the
image what should be the css property
that i should be using right over here
to center the image guys can somebody
let me know
can somebody let me know guys
if you don't know again what you want to
do is you want to just search for it
okay just go to google where you want to
center an image
okay and css you want to center an image
in css how to center an image you will
be able to get that from right over
there just just go through the entire
stuff okay try to read it okay try to
understand it as much as possible okay
so
what should we do guys please let me
know
many of them are saying display flex and
all this kind of stuff
think about it guys
so many of the people right over there
said that we could directly use text
align okay we directly use text align
and put it up as center now this won't
work okay there's a very big problem
right over here and this won't work and
this is a concept that i wanted you to
understand that is the reason why i had
it right over here although you can use
the text line on your uh text itself and
it was able to center the text for you
but for the image it you are not able to
do that why is that the case why is this
the case guys
okay now this is the case because the
image and you can just go through and
read through it as well you can just go
through different stuff and read the
entire thing okay so all these different
elements that you have on your screen
right over here so you are having a
chicken clay pot you are having the
image right over here there are various
different types of elements as well
there are different types of elements i
will be discussing two of these types of
elements that we have okay why why this
won't work why text align center won't
work we are going to understand that
okay right over here let's go back to
our drawing board let's try to
understand this stuff okay
so
whenever you are having okay whenever
you are having a text okay whenever you
are having a text for example an h1
element you are having an h1 element
this element is usually referred to as
an inline element
sorry sorry block element this is
referred to as a block
element okay this call is a block
element why is the h1 element called as
a block element guys why is h1 element
called as a block element whereas the
image element is usually referred to as
an inline element
what is image element referred to as an
inline element with an h1 tag referred
to as a block element let's try to
understand that so let's go back to our
website if you are clicking on our h1
element and going on to the inspect
option right click on the h1 element and
go to the inspect option right over
there okay inside the inspect option if
you are hovering over the h1 element as
you're able to see if i'm hovering over
the code for the h1 element
the entire line the entire width of your
screen gets highlighted okay the entire
width of the screen gets highlighted
except h1 element nothing else can come
up on this particular line of line
itself only the h1 element takes up the
entire width of the screen the h1
element tries to take up the entire
width of the screen and that is why it
is referred to as a block element it's
like a block if you are inserting it
right over there you just expand itself
to take up the entire width of the
screen now when you are using text line
center on it then it is able to center
it with accordance to the width of the
screen itself is able to center itself
in accordance with the width of the
screen itself whereas if you go to the
image element if you're hovering over
the image element right over here you're
able to see that only the image gets
highlighted nothing else only the image
gets highlighted because image is an
inline element so you can have multiple
images in the same line you have two
three images in the same line because
these are inline elements they only take
up that much space in which they exist
whatever is the height and the width of
the image it will take up only that much
particular space and hence it is called
as an inline element you can have
multiple images in the same line because
they don't take that much space they
don't take the entire width of the
screen itself whereas your h1 element
whereas your h1 element is your
box type okay it's
it's your blog type so you take the
entire width of your screen it takes up
the entire width of the screen are you
guys able to understand this please let
me know
you guys able to understand the
difference between a
between the same please let me know guys
guys able to understand the uh
difference between the same guys please
do let me know
now what we need to do is in order to
use text align center we need to change
the image from a inline element to a
block element we need to change the
image from an inline element to a block
element for that we are going to use
okay let's just remove this text line
for right now let's comment it out okay
we are going to use display property
okay we are going to use the display
property right now we're going on the
top display and we are going to change
the display to
a block okay we are going to change the
display to
block element okay let's save this go
back to our screen reload the page okay
as you're able to see the image itself
i'm hovering over it right now if i'm
hovering over the image right now as
this is now a block element okay
um
as this is now a block element it's
taking the entire width of the screen
you guys able to see this as now the
image the block element is able to take
the entire width of the screen
now what happens is if i'm putting up
now let's see what happens if i'm
putting up text line center okay
let's go back to our screen reload the
page okay it's still not be able to show
me detects align center why is that the
case again i'm getting some issue okay
again i'm getting some issue right over
there let's try to understand this why
is the center element not working
properly
okay why is text align center not
working properly for our image stack
okay as you're able to see we are able
to see that we are having the display as
block we are having the width and 600
pixels we are having the text align as
center as well but he takes that is the
image is not getting aligned to the
center why is that the case we need to
understand that again we'll search for
it again we'll go through the things
we'll try to understand it and we are
able to see margin as zero
many times we are able to see this
margin as zero
so let's try to explore what is the
margin for our element okay let's try to
understand what is the margin for our
element okay let's increase the size of
the element okay let's go down below
right over here and what is the margin
okay so we are not able to see the
margin
we need to create a margin itself as
you're able to see the margin
if i'm highlighting the margin so there
is some property so we will be
discussing about it every element has so
we have seen the border property okay
every element has some padding some
border and some margin around it we will
be saying what this means right now so
think about an element okay think about
analysis right now as well when we are
using our property of text line we have
used display as a block but what is the
problem right now why are we are still
not able to center the element using
text align so we need to understand that
so just think about every element on
your screen every element that you are
able to see on your screen as your house
now i'm talking about a very very good
quality house i'm talking about a
bungalow inside like a good space
uh
uh like area itself just think about it
in such a way so right over here you are
having the house okay this is your house
let me draw the house for you guys so
this is your house right over here let
me just fill up it with the black color
as well so this is your house okay
inside the middle think about it as the
element as well okay it can be the text
it can be the image it can be anything
so if it is a text and this is like
a
and
d okay so this is your element okay this
is an element called as a nd right over
here and this is your element okay this
is your house itself now whenever you're
constructing a house what are the
different things that you keep in mind
while constructing a house itself okay
try to understand this what are the
different things you know keep in mind
while you're creating a house first of
all whenever you are creating a house
you want some area to walk around the
house as well okay you want some so you
won't do something like this you won't
do something like this that you are
having a area let's say you are having
some area on which you can build a house
so this is the area that you have and
people have said that okay you can
utilize this particular entire area to
build your house now you don't do
something like that okay this is the
entire plot that i bought i built the
house on the entire stuff i built the
house i will not even leave a centimeter
of space around the house i'll build
everything on the house like on the plot
itself you don't do something like that
you first create a particular uh house
okay
around that house then you create the
lawn okay you create the lawn around
that house you will utilize some of the
space around that house to create a lawn
itself
some free area whether you want to
create a pond you want to create a
like vegetable garden or something like
that or diet or something like that so
you are creating some space although you
own that plot this is your plot itself
you're using that
plot right over there to construct some
kind of garden some kind of padding
around the house itself now the similar
way this is called this green space the
garden itself which is owned by that
house by the owner itself is called as
the padding
okay you're creating a padding inside
the house so if this is your house right
over here okay let's see
uh you will create a padding around the
house
let us take up a rectangular green
rectangle and you will create a padding
like this around the house itself
right over here and you will just let me
color this as well so this is your
padding this is your grass that you have
created and the middle of it you are
having your element okay in the middle
of it you're having your house or your
element okay so this is how you
basically create your house okay so this
is your element right over here and let
me just recolor this so that we are able
to see the house now once you've created
the uh house once i've created the
garden around it what is the next thing
that you'll be creating you need to make
sure that your house is safe you need to
make sure that your house is safe so for
that you create a border around the
house okay for that you create a border
around the house as you're able to see
right over here you're able to create a
border around the house itself okay you
are able to create a border around the
house okay so you're having the image
you're having the padding and then you
are having the border as well okay
similarly the
element as well has the element it has
some padding it has some border around
it as well now after that after creating
a border if this is the house number one
and house number one and this is the
house number two
will the houses be made in such a way
that they are just like they're just one
of the border is just sit touching the
uh border of the other uh house okay you
don't have any place to walk around it
you won't be creating a house like that
you won't be planning your society like
that you won't be creating a house this
is the house this is the border of the
house one this is the border of the
house too and you're just like
there shouldn't be a single centimeter
of gap between the two that isn't just
possible you need to have some roads
around the house itself but you won't
give your land to create that road why
would you give
your land what you have bought to create
that road itself so you have some margin
around the house that is by the
government now this land that is the
margin is by the government itself is
the browser itself it's not belonging to
that element it is for the browser
itself so right over here you can create
a margin around the house as well so
this would be your margin so this is the
margin for the house one this is the
margin for the house to right over here
so this basically ensures that both the
houses are separated from each other
both the houses are separated from each
other the elements are separated from
each other that is the duty of margin so
are you guys able to understand the
concept of padding border and margin
guys are you guys just think about it as
a house think about it as a society you
will be able to understand it are you
guys able to understand the concept of
ma padding border and margin please let
me know guys
you guys able to understand the concept
of padding margin and border guys please
do let me know
great amazing guys amazing so now that
theme thing is happening right over here
as well the image that you have created
margin is basically
yellow in color as you're able to see
it's a yellowish orange in color right
over here so the margin of the image is
pretty huge the margin of the image is
pretty huge as you're able to see this
is the margin the orange part is the
margin so it is taking up the entire
width of the screen itself and the
reason due to that you are not able to
center your image due to the margin
being so huge that there is no space to
center the image right now so what you
want to do is you want to create the
margin to be zero you want to create the
margin to be zero you cannot have such a
huge margin the orange portion the blue
portion is your image that's your
element okay that is your house and the
yellow portion that you are able to see
highlighted on the screen is the margin
you don't want a huge margin like that
how will you center the image then this
is the reason why you will go back to
your code and you will have another
property right over here margin
and i want to keep the margin from all
the sides as zero pixels yeah i want to
keep the margin from all the sides as
zero pixels i'm going back to my website
reloading the page right over here
it should have
done that let me just change this
xp control s
i reload the page
see if i'm making some error or
something like that
okay
it should have worked i guess there is
some problem that has been made right
over here let's change this to auto then
let's see
i'm putting it about zero pixels that
change this to auto let's keep the text
align as well uh is this working right
now
yes
okay so right over here what i've done
is instead of putting up the margin as
zero i think so there were some issues
with zero as well so it is basically
taking it up that's the left hand side
margin should be zero so it is again
taking the entire image and pushing it
towards the uh left hand side of the
entire screen to keep the margin zero uh
right over there so what we want to do
is we want to change the margin to auto
want to change the margin to auto so we
because we don't know what the margin
should be we don't know what the margin
to the left hand side should be what is
the margin should be right hand side
should be so due to that reason it will
automatically assign to keep the image
at the exact center it will
automatically assign the margin for us
on both the sides as you're able to see
is automatically assigning us the margin
on both the sides on the left hand side
of the image as well as on the right
hand side of the image okay so it's
automatically assigning that and that is
the reason why we have used auto that
you decide what the margin should be the
next thing that we want to work upon is
that on the image that we saw we want it
not to be cornered we don't want the
corners to be very sharp okay we don't
want the corners to be extremely sharp
we want the corners to be a bit
rounded from the edges so for that again
we'll be using our border radius
property we will be using our border
radius property so border
radius and we want to set the radius
let's take it as uh 50 pixels okay let's
take the border radius as
50 pixels so it will be a small radius
around the border of 50 pixels itself so
let's go back to our website
reload the page
has been able to see that the border has
become pretty huge i will have to reduce
the border pixels but as you're able to
see so we are having circles of 50 50
pixels on all the corners we are having
circles of 50 pixels radius on all the
corners right over there of course we
don't want it to be so rounded so let's
just reduce this to let's say
15 pixels i guess
let's reduce this to 15 pixels let's
reload the page
and this looks appropriate enough okay
this looks appropriate enough let's
leave it as 15 pixels right over there
the next thing that you want to do is
for the paragraph tag the paragraph tag
also needs to be at the center so again
for the paragraph tag we are having dot
txt
and in that we want to have the text
align as center
let's run this let's go back to our
website reload the page
we're able to see the text is now in the
center itself but we want it to be
italics okay we want it to be italics so
of course we'll be using text decoration
you can search for it as well so you can
just use
text
decoration and
you can use text decoration or
italics
uh css
so we are going to use let's see what we
are going to use right over here
we are going to use font style as
italics so right over there we are going
back to our code and we are going to use
font style as italics so font style
we'll be setting it as to italics
let's save this right over here let's go
back to our website reload the page as
you are able to see our font is now
italics in the paragraph as well so this
is how you are able to recreate the
image like the entire thing that we
wanted
using your entire like css as well as
html properties together so and that is
how you need to proceed further as well
slowly and suddenly change things
experiment with different things search
for different things and try to
implement as much as possible okay
when you go back to the ppt as you're
able to see right over here you are
having this uh
assignment as well so i will be sending
this to the discord channel i will be
sending this ppt to the discord channel
itself uh you guys have to
try try to complete this assignment okay
uh we will not be we will not be
checking this up okay but i hope that
you guys will be taking some time to
implement this entire uh thing you just
search for it okay if you're not able to
understand it how to just cut particular
stuff so you can use text decoration for
that how to change the background
background color so all these properties
use that search for it and try to
implement it it will be very easy guys
okay it will be very easy don't worry
about it everything we have already
learned everything we have already
learned okay we'll be sending it only to
the discord channel all the ppts will
make sure that everything is being sent
to the discord channel guys okay
okay
so why do we use a style sheet okay
there's one more reason to use a style
sheet okay that is why we use external
css itself one of the main reasons is
that you have multiple html pages okay
you will have an about us page about me
page you will have a contact us page a
home page you'll have multiple pages
even def town if you go to devtown's
website right over here let's go to
deaftown
dot in
i was able to see this is the diff down
not in website it's not just one one
page it's not just one page you can go
to like maybe different bytes okay let's
go to road maps so you are having one
more page right over here you can just
go to courses so you can go to like the
full stack web development training
program so you are able to see the
entire webs and you can go to events
okay you can go to a particular event as
well so example if you want to check out
the back end web development program so
you are able to see a particular event
as well you can see the x explore page
the events page so all these different
pages that you have up to this point of
time
they all have the same uh design pattern
all these image all these pages all
these different pages have the same
design pattern that is they have the
same css file you don't have to create a
new file every time you are having a new
html file every one of them will have a
new html file but the css file remains
the same you can create just one css
file and link it to all the pages and
just create one css file and just link
it to all the pages and that is where
your external css file excels your
external css file excels at the end okay
are you guys able to understand this
please let me know
are you guys able to understand this
please let me know guys
guys able to understand this please let
me know
great so now i'll show you the
attendance thing for today guys
the attendance thing is on the screen
okay
okay so let's move on
are you guys able to understand
everything that we discussed in today's
class guys please do let me know
are you guys able to understand
everything that we have seen at uh like
learned in today's class guys please do
let me know okay the attendance link is
not visible
are you guys able to understand
everything that we have seen in today's
class guys please do let me know
great guys amazing amazing amazing so
we'll meet tomorrow again at the same
point guys do you have any questions for
me please let me know i will try to
understand
okay if you have any questions for me
please do let me know how to give page
color the property that you will be
using would be background color guys
for putting up an image as a property
then you will be using images the
background you will be using background
image okay
so how to let me just
download over here
okay so i
so this is
slow i guess i don't know if you guys
have any questions i'm sitting right
over here also please guys do like the
video it really helps us a lot uh
it will be great if you guys are able to
do that
uh
yami
i've already shown the attendance once
again i understood that the attendance
link was not visible so i showed it once
again later on as well if you're not
there in the class
then there's nothing that i can do again
like i said i've shown the link once
again i understood that the link wasn't
visible so i showed to it once again
guys okay i've shown the attendance link
once again i understood that it was not
visible so i've showed the attendance
link once again the discord channel link
is down in the description of the video
guys okay
i understand that the last word wasn't
visible so i've showed the attendance
link once again guys okay
how to use discard sir please teach us
rahul for right now just join the
discord channel from down there in the
description of the video you will be
able to join it okay
i'll just show it to you guys once again
again i'm showing it to you guys
so that people are just silent okay
okay
if you guys have any other questions any
other doubts any other queries please do
let me know guys
if you have any questions so i forgot to
mark it yesterday's attendance so i
marked it on today's is it okay i can't
share the it in yesterday's attendance
is still open i haven't closed it you
can still go there and mark your
attendance okay so please do that
immediately yes the class is over guys
you can uh leave okay
uh i can't afford laptop but i want to
learn web development completely is it
possible to learn on phone any other
method
yes you can learn it on your mobile
phone as well in the initial days use
code sandbox once you have used code
sandbox to learn as much as possible
then you can use uh the aws also
provides virtual machines which you can
use directly from your mobile phone it
will connect to you to a laptop or a
computer which you can use from your
mobile phone directly okay i will be
sending the notes today on the discord
channel okay
the link always works guys there's never
a problem when the link isn't working
okay
we'll be starting with bootstrap for
tomorrow guys okay we'll be starting
with bootstrap from tomorrow so please
be ready about the same okay please be
ready about the same guys
if you're getting a dynamic link not
found that means that you're making a
spelling mistake okay
uh in certain code sandbox it isn't
making changes to the website like it's
supposed to
ishida i don't know like for me it was
working properly there was no problems
right over there
i've already shown the attendance thing
guys
will the youtube video be there i can
reference it later yes jiren it will
always be there for the next eight to
nine months i guess hey don't worry
about it
okay so i think so that would be it for
today's class we'll again meet tomorrow
at six o'clock please uh be on time the
notes will be provided to you on the
discord channel guys so the link for the
discord channel is down in the
description of the video please join us
right over there thank you so much guys
thank you