🔥HTML Full Course 2023 HTML Tutorial For Beginners 2023 Learn HTML in 8 Hours Simplilearn

foreign
HTML or hypertext markup language is the
foundation of every website and an
essential tool for web developers it is
a markup language that enables the
creation and display of the content on
the internet
HTML has played a critical role in
shaping the online world as we know it
today HTML5 the latest version of HTML
includes new features enabling
developers to create more interactive
and engaging web experiences including
audio and video playback and offline
storage support So in summary HTML is a
fundamental technology that powers the
web and is essential for anyone
interested in web development or online
content creation so hey everyone here I
am with a new video of Simply learn on
HTML full course that will help you know
everything you need to know and learn
about HTML to start your web development
Journey today we'll take you through the
basics of HTML and by the end of this
tutorial you will be able to understand
what HTML is and why we use it but
before we begin let me tell you guys
that we have regular updates on multiple
technology videos so if you are a tech
geek in a continuation for the latest
technological Trends then consider
getting subscribed to our YouTube
channel and press that Bell icon to
never miss any updates from Simply low
also if you are looking to deepen your
understanding of full stack web
development or want to become a full
stack developer in a short amount of
time the Caltech coding bootcamp is an
excellent option with this program you
can learn to code and become a full
stack developer in just six months of
time
this state-of-the-art bootcamp will
fully immerse you in accelerated coding
training helping you become a valued
software engineer ready to take on any
challenge in the industry
during this boot camp you will Master
both front-end and back-end Java
Technologies starting with the basics
and progressing to the advanced aspects
of full stack web development you'll
also learn angular spring boot web
services gsps and mongodb to help you
launch your career as a full stack
developer so let's go through the agenda
for this full course tutorial we'll
start this video with an introduction to
HTML in just 10 minutes followed by
essential HTML topics like HTML tags
HTML elements and attributes in HTML
will then go through some topics which
are quite helpful for the structure of a
web page we'll cover HTML images tables
HTML classes and IDs and the style tag
in HTML all these HTML elements are used
to make a web page visually appealing to
the user then we'll see how JavaScript
is used with HTML to make a web page
responsive to the user once we finish
with these topics we will take you
through HTML layouts here we'll see how
HTML is used to create the whole layout
of a web page after that we'll create
some basic HTML projects like content
boxes and image sliders and we'll see
how to take users input in HTML
following that we'll go through HTML
forms and will create the login and
assign a form using the HTML form tag
will then take you through the most
frequently Asked HTML interview
questions that will be useful while
appearing for web development interviews
and it is rightly said that you can
Master any language only after creating
projects so towards the end of this full
course we'll create some fun and
exciting projects like the front end of
a website and a quiz application using
HTML so I hope you guys are ready to
learn something new so without any
further delay let's hand over this
session to our training experts now what
exactly is the basic web architecture
now web architecture is made up of three
essential elements that's the website
that is the front end of a web
application that is visible to the user
then there is the server which
constitutes the back end of a web
application and holds and manages all
the data and finally there's the IP
address that is the address assigned to
a website in order to be accessible on
the internet
first up let's have a look at what
website is so your browser starts by
loading the main HTML file and then the
CSS and JavaScript
the user interacts with the website and
is not concerned with the backend of an
application now secondly we have the
server once you've developed your
website you'll have to host it on your
server to make it accessible on the
internet
server along with the database contains
all the data of a website and
facilitates user interaction
lastly there's IP address which is the
third element of the web architecture
now website is hosted on an IP address
we put a domain name over that IP
address the same way we put names over
people's phone numbers
when you type a domain name in the
browser it will give you the server call
the server will then send over the
website to you
next what is HTML HTML is the most
widely used markup language for
developing and structuring web pages on
the internet
it defines the structure of websites and
formats these web pages
so what exactly is CSS then now CSS is a
simple design language used for making
web pages look more beautiful and
presentable
it can be attached to any HTML element
to style it or even position it
according to the developer's choice
then you must be wondering what exactly
is Javascript
now JavaScript is a powerful interpreted
language targeted for web development it
is used for making web pages interactive
and bringing the web pages to life
so now let's create your first website
now HTML short for hypertext markup
language is the coding standard for
documents designed for web browsers
consisting of a series of elements or
tags and which can be used to structure
a web page right so these elements can
include headings paragraphs div
containers tables and more HTML tags are
nested meaning there are opening and
closing tags with the content in between
those tags so now let's write a simple
HTML code that will help you understand
the basics of the language so for this I
am using the text editor that is Visual
Studio code you can go ahead and
download this text editor from their
official website so here I've created a
simple dot HTML file in my vs code and
I've added the initial HTML files
now let me explain to you uh one by one
now doctype is not so much of a tag but
it is more of an instruction now this
indicates the browser that the document
type to be served to the user is in fact
an HTML document
now this doctype instruction should
always be included at the very top of
your HTML page next up you have the HTML
tag that is used to contain all the web
pages HTML code
right so it contains an opening and
closing tag with contents in between
them
the HTML tag can also have attributes
now for example there's the Lang
attribute allowing you to specify the
spoken language of the contents of the
page followed by the HTML tag there's
the head tag now this is the first
section of the code that contains all of
the information about the web pages
properties links and more it could have
Pages title description additional meta
tags and CSS code so here I've used the
title tag and let's give a title say
HTML
in 10 minutes
all right you can also add CSS to the
Head tag by using the style tag and
change the display styles of HTML
elements that are being used the next
section is the body tag now the body tag
contains all the displayable contents of
your web page including headings
paragraphs div containers tables and
more
now the HTML header tags are used to add
headings to a web page there are several
types of headings available for
developers to add to a web page right so
first off let's have a look at them I'm
going to create a simple H1 heading tag
and the message I'm displaying is this
is
the first heading
all right
after this I'm going to add a paragraph
tag which creates padding in the top and
bottom of the element to help separate
the text between each paragraph
right so I'm gonna add a P tag and Save
this is the paragraph tag
[Music]
after this let me add a simple h2 tag
which is
another heading Tab and say this is the
second heading
[Music]
and also add line breaks which are
helpful from time to time if you want to
provide a single line break in your
content you can do so by adding the BR
tag so here let me just add one for
better understanding
now the HTML div tag defines a division
or a section in an HTML document that is
used as a container for other HTML
elements now these elements can include
content areas sidebars page bars page
headers Footers Etc
this tag is used to apply styles to HTML
elements that cannot be added otherwise
you can also make use of the HTML image
tag to add images to a web page now
these images in a web page are a very
common site and they can make the
website look more attractive so for that
we can use the image tag so say IMG
within which I mentioned the source
I'm adding the HTML logo so let me just
mention that here
and then I'm gonna provide width for it
and then a specific height
all right so when you save the file and
when you look at the browser
you can see that uh the first heading is
displayed then your paragraph tag is
displayed followed by the second heading
and then the image now let me show you
how you can add styles for some of these
uh headings and paragraph tags so here
in back in my first heading tag let me
just say styles
and let me change the font
of the content that is being displayed
I'm going to change it to Career new
and for my paragraph tag let me display
the content in italics so I'll say font
style and make it italics
so let me save this and when I look at
the browser
you can see that the font has changed
and so has the font style here
before we go through the different tags
present in HTML let's discuss what are
Terriers a tag refers to a special word
wrapped in angular brackets which are
used to define a particular type of
content on a web page after using a tag
in an HTML file the browser decides how
to render or display the content on the
screen the list of tags present in HTML
is pretty huge we'll go through some
basic tags in today's video and we'll go
through the remaining tags while working
with them so let's start with the most
basic tag we have in HTML you can see
here we have a basic program written
over here all the tags mentioned over
here are mandatory for all HTML programs
the first thing we have here is the
doctype as HTML you can see it over here
we have written doctype HTML so this is
not an HTML tag but an instruction for
the system about the type of document
basically we are telling the system that
this is going to be an HTML document so
that all the browsers can know that this
particular document is an HTML document
and work accordingly
the next tag we have here is the HTML
tag you can see the HTML tag starts from
here and goes till end right we have
ended this HTML tag at the end of our
HTML document
now this tag is necessary for all HTML
documents if you are working on an HTML
document then this tag is what we are
going to need the HTML tag represents
the root and the end of the whole
document
this is a container tag that contains
all the other tags within it so this tag
is pretty mandatory in all HTML
documents
now the next tag we have here is the
head tab you can see the head tag over
here and the ending of this head tag is
present over here we have certain tags
present inside this particular tab now
you can see that this head tag contains
meta tags and the title tag right you
can see the meta tag over here we have
three meta tags and then we have a title
tag as well
Now The Meta tags doesn't appear on the
page itself but only in the pages source
code meta tags are essentially little
content descriptors that help search
engines what a web page is all about now
the next tag we have here is the title
the title tag is used to define the
title of a web page basically we write
the name of our web page inside this
step for example if we see here the
title of a web page is document formula
if we change the title of this HTML
document and write here something like
first document
fine now save the program open it with
live server now you can see it over here
that the window name is changed to first
document there is no change in the web
page itself so what we are going to do
is we are going to reduce the size of a
vs code and the browser we are going to
keep them side by side here
so that any changes we made in this HTML
document are reflected in the web
browser
other tags we can use inside the head
tag are the style tag the script tag and
the link tag now the link tag is used to
link any external CSS file to HTML page
we have to provide the source of that
file and then any styling changes we
make in that particular file will get
reflected in the web
for that so let's create a CSS file
first what we are going to do is we are
going to create another file over here
let's name it as
style dot CSS now this particular file
has dot CSS as extension this will tell
the browser that this particular file is
a CSS file and we are going to use it
for styling purpose
fine so we have this style.css over here
now we are going to link this with our
HTML document for that what we have to
do is we have to write here
link so this is the tag now we have to
write a Rel and we have to write here
style sheet fine
now the next thing we have to do is to
provide the source code of this
particular file so for that we are going
to use href href is going to be styled
or css now close this link tab now this
rail tag over here specifies the
relationship between the current
document and the link document
now you can see it over here we have
this Rel as style sheet this means that
this particular file is a style sheet
and we are going to use this for styling
purpose
another important tag we have inside the
head section is the script tab this tag
is used to declare or use any script
within the HTML document basically used
for JavaScript so it's not necessary to
use this tag within the head section
only we can use it anywhere but for now
we are going to use it inside the
headline the syntax is also easy we have
to write it like
script
SRC now SRC is going to be the file name
so let's add another file over here
we'll write first
dot JS so this will tell the browser
that this particular file is a
Javascript file so we are going to write
here inside this now we are going to
write first dot yes now we have to
define the type as well so type is going
to be text and the file is a Javascript
file so we'll write a JavaScript fine
now close this tag and the script tag
will closes automatically you can see it
over here fine
the script tag is closed
keep one thing in mind that we have to
close the script tag every time but the
link tag is not necessary to close
the next step we are going to discuss is
the body tag
the body tag defines the document's body
now you can see it over here if we go
back to HTML page you can see the body
tag over here now the body element
contains all the content of an HTML
document such as headings paragraphs
images hyperlinks tables lists Etc
there can only be one body element in an
HTML document any tag we are going to
use within the body tag is going to
define the structure of a web page
now the next tag we are going to use is
the heading tag there are six different
types of heading tags starting from H1
and goes to H6 H1 refers to the most
important heading and H6 refers to the
least important one the font size of H1
is the largest and the font size of H6
is the smallest among all so let's use
them all here what we'll do is we'll
write here H1 now inside this H1 we'll
write this is
heading 1. save the program and you can
see it over here we have a heading in
our web page which says this is heading
similarly we have the h2 tag as well so
if we write here H2 and inside this if
we write this is heading
to save the program you can see the
change in the font size you can see the
difference over here the font for H1 is
greater and the font for H2 is a bit
smaller than H1 similarly we have H3
and for H3 we are going to write here
this is
heading 6. 3 fine then we have H4 as
well so we are going to write here H4
and inside this we are going to write
this is heading
4. fine similarly we have H5 and H6 as
well so we are going to mention them
first here so we'll write here this is
heading 5 and finally we have
H6
which is used for heading 6 so we are
going to write here this is heading
6. fine save the program and you can see
the difference in all the headings over
here the size for H1 is the largest and
the size 4 heading 6 is the smallest we
can use any of these headings according
to onions
similarly we have the paragraph tag as
well in HTML it is used to write a
paragraph or any content within the
webpage the syntax is simple we have to
use the P tag for that so if we write
here p and now inside this paragraph tag
whatever thing will write so let's say
we are writing here this is a first HTML
document
fine now save this program and you can
see it over here we have some text
present in the web browser right so
these are the most basic HTML tags we
discussed in today's video as we said
the list of tags is large and we'll
discuss them while working with them
a simple definition of tags states that
a tag refers to a special word wrapped
in angular brackets which are used to
define a particular type of content on a
web page
after using a tag in an HTML file the
browser decides how to render or display
the content on this screen right
now keeping this definition in mind the
definition of an element in HTML states
that an HTML element is the collection
of a start tag its attributes and antec
and everything in between the tags right
so nhtml element is basically a
collection let's understand this with
the help of an example what we'll do is
we'll right over here inside the body of
this HTML document we'll write
P fine now this paragraph tag over here
is an example of a tag it has opening
tag and a closing tag so this whole
thing is a tag this paragraph is a tag
over here
now if we add an attribute to this tag
like an ID or a class so what we'll do
for that we'll write here let's say ID
is equals to
para one fine this tag now has an
attribute within it ID makes this whole
tag unique we can access the content of
this tag with the help of ID attribute
we'll discuss attributes in detail in
the upcoming video for now let's add
some content inside this tab so what
we'll do is we'll write inside this tag
we'll write over here let's say
this is a
paragraph fine so we'll write your
paragraph
so this is the content of a paragraph
tag now we have four different parts
present over here
we have the starting tag over here so
this is the starting Tech this whole
thing over here is the starting time
then we have attribute so ID here is the
attribute then we have content of this
tag so this is the content present
inside whole time and then we have the
end part of a paragraph tag so this
represents the end part
right so the combination of these four
things is known as the HTML element
now let's talk about the case
sensitivity of HTML tags so HTML tags
are not case sensitive so you can see we
have paragraph tag over here with small
P present inside angular brackets what
we can do is we can write here capital P
as well so these two things are pretty
same so let's write something inside
this as well so let's say we are writing
here this is
paragraph two fine so this is the
content present inside this paragraph
tag with capital P inside angular
brackets now save the program and you
can see we have two paragraphs over here
the first one says this is a paragraph
and the second one says this is a
paragraph two so what we have to do is
we have to remove a from here
save it now and now it says this is
paragraph two fine
so I hope you guys got that HTML tags
are not case sensitive
fine now let's move ahead and we'll now
discuss empty elements in HTML
most HTML elements have a start tag and
an end tag that indicate where the
element begins and where it ends for
example we have this paragraph tag over
here this is the start of this paragraph
and this is the end part right so this
indicates that this paragraph tag ends
over here
now there is a group of elements that
are exceptions to this rule so these
elements are called empty or void and
only have a start tag since they have no
content present inside
so they must not have an N tag in HTML
example of empty elements are
like the Break Tag we have we have image
link and many more such tags the list is
quite long so what we'll do is we'll add
an image using the image tab so image
tag is basically an empty element
so we'll use that particular element and
you guys will understand what empty
elements are
so as mentioned earlier that empty
elements do not require any closing text
so what we'll do is we'll write here
inside angular brackets IMG is the tag
me
then we'll write a SRC so SRC over here
is attribute we'll discuss attributes in
upcoming videos so inside this will
provide the path over image so let's say
we have
this image present inside
images folder which is a folder present
in a system so where we are saving all
our HTML programs so the next thing
we'll write here is alt alt stand for
alternate so if the image is not shown
over the browser then the alternate text
will be shown so let's say we are
writing here image one
now we'll close this
image tag so that's all we don't have to
close this particular image tag we don't
have to write here like this
so you can see we don't have to write
here like this anything so if we not
write it away that's fine because image
element is an empty element so let's
save the program and you can see we have
an image over here in the browser so the
image size is quite large what we'll do
is we'll reduce the site so we'll write
here
just for now
we'll discuss all these things in the
upcoming videos so don't worry about it
for now you can see that we have an
image over here so this is our image
this particular image is what we have
added using the image tag
so this is done now the last thing we'll
discuss in this video is the nesting of
elements nesting means we can use the
tag or element within another element
for example you can see we have a
paragraph over here so this is a
paragraph which says this is paragraph
two let's add some more things over here
so let's say we are writing over here
tml stands for
hybrid text
backup language
fine
and save the program so this is the
paragraph over here you can see let me
increase the size of our browser a bit
so now I think you guys can see it much
better now what we'll do is we'll use a
particular element or tag within this
paragraph tag so let's say we want this
HTML to be cursive and bold in nature so
what we'll do over here is we'll use the
B tag over here so b stands for Bool so
what we'll do next is we'll cut HTML
from here and we'll paste it inside this
B tag now save the program and you can
see HTML is bold in nature now right
similarly what we can do is we can Nest
one more tag inside this bold text so
what we can do is we'll write here I
now we have to
put this HTML inside both these texts
save this program and you can see the
HTML is cursive in nature now so you can
see we have three different texts or we
can say we have two different tags
inside a particular text this is known
as nesting of elements so we can do it
with HTML as well I hope you guys must
have got an idea about what HTML
elements are and how elements are
different from tags in HTML
now that we already have an idea about
elements let's discuss what attributes
are
let me write the basic syntax of an HTML
element over here first so what we'll do
is we'll write over here
let's use the paragraph tag so we are
writing over here
this is a
basic example
of elements in HTM fine I hope you guys
must have got an idea about what this is
this is actually a basic HTML element we
have nothing else over here just a
simple example of HTML element an
element consists of start Tech and
ending Tech and the content within the
day right so this particular thing is an
element
now attributes in HTML refer to the
additional Properties or characteristics
of an element for example if we write
here let's suppose we are writing over
here let's say we are writing over here
ID as
para one fine now save this program and
you can see over here that we have a
paragraph which says this is a basic
example of elements in HTML now we have
this whole element with IDs parallel or
we can give any idea of our choice now
this ID is unique for this particular
element for now you don't have to worry
much about this ID or any other
attribute just focus on what attributes
are we are going through the working of
attributes basically
so we can use the ID of this attribute
to style this particular element so
basically this ID attribute defines what
this HTML element is we have to use the
style tag element or we can say we have
to use the style element for styling
this particular paragraph you will
understand it once we go through the
text so let's do it over here what we'll
do is we'll use the style tag over here
so
we'll write yes type you can see this is
a style element basically it has start
tag it has ending text now we'll write
some content inside this particular text
so let's say we are writing over here
hash
now inside this what we'll do is we'll
Define some styling properties so let's
say we are writing over here background
color is
red and we'll write here
color so this color here refers to the
font color basically so we'll write here
blue now save this program and you can
see the paragraph in a browser is
changed so what we did here is inside
this style element we access this
particular ID so ID is unique for each
element we will discuss it later on so
basically this particular paragraph tag
has an ID named parallel so we are using
that particular ID then we have some CSS
properties so these properties are used
to style a particular element so we have
used it over here you can see it over
here if I zoom out a bit in the browser
you can see the background color of this
whole paragraph is red and the font
color is blue fine what we want to say
here is this ID over here is basically
an attribute it is used to identify or
change a particular element we have many
attributes present in HTML so we'll go
through some of them let's say we are
adding an image over here so let's add
an image and you guys will understand
about HTML attributes here as well so
we'll write here IMG so this is
basically an empty element we have
discussed it in the previous part
wherein we went through HTML elements
now what we'll do is we'll write here
SRC now SRC is also an attribute this
attribute is used to provide the system
with the source of a image so if we go
back to this particular HTML folder so
here we have our HTML folder you can see
we have a folder here named as images
and we have an image present inside this
particular folder right so what we have
to do is we have to provide this path
inside a HTML file so what we are going
to do here is we are going to get back
to vs school and inside here we'll write
images so this is our folder name and we
have a file name html.png present inside
that particular folder so SRC is the
attribute and this particular thing is
the value of our attribute right now the
next thing we are going to do here is we
are going to write here alt now inside
this alt let's say we are writing HTML
over here now this alt attribute is used
when we add an image only so basically
what happens is when we add an image to
a web browser sometimes what happens is
the image is not shown over the browser
so in that case the alternate text will
be shown so if this particular image is
not shown in the browser then this
particular text will be shown so let's
save this program we'll open a web
browser here side by side as well you
can see that this particular image is
present over here in our web browser the
size of this image is quite large we can
change the size in two different ways we
can either use the ID attribute here as
well and then use that particular
attribute in The Styling tag or css file
to change the size of this image or we
can simply use the height and width
attribute in the image tag over here so
that's the simple one so what we are
going to do is we are going to write
here
height height is an attribute we have to
define the height in pixels so we have
written over here 300 pixels save the
program and you can see the height of
this image is 300 pixels now same thing
goes for width as well if we write here
width and if we Define the width Test
300 pixels as well save the program and
you can see now the height and width of
this particular image is 300 pixels
right
so guys this is all about the basics of
attributes in HTML I hope you guys
understood this if you guys remember
when we came across empty elements in
HTML there we saw the Syntax for image
tag in HTML actually the image tag falls
under the category of empty elements in
HTML that's why we saw it there as well
it means that this particular tag in
HTML does not require any closing tag to
work it has attributes we'll go through
them in a moment before that let me
clear this one thing to you guys
any image we see on a web page is not
inserted into that page instead it is
linked to a web page what the image tag
does it holds a space for the referenced
image you will understand it much better
in a while so let's go through the
syntax of adding an image or attaching
an image we can say to a web page using
the image tag is not at all a task for
the user it's the easiest thing to do in
HTML we can say that so what we'll do is
we'll write here inside the body tag
what we are going to do is we are going
to write a ime so this is the tag and we
already know that this is an empty
element so it does not require any
closing tag
now inside the image tag we have to add
attributes so we'll write here SRC so
let's discuss some important things
before we move ahead you can see over
here that we have used the SRC attribute
inside the image tag this is a necessary
attribute while using the image tag in
HTML voice this attribute specifies the
path to the image any image we want to
attach to a web page needs to be stored
somewhere either in the system or it can
be anywhere on the internet as well
so let's move back to the main folder so
what we are going to do is we are going
to move back to our main HTML folder so
here we are inside the HTML folder now
what we are going to do is we are going
to make large icons over here
so here we are in the HTML folder you
can see we have all the HTML files over
here right here we have an image named
python so if we double click on it you
can see this is an image and the name of
this image is python right so what we
are going to do is we are going to click
on it right click basically go to
properties and here you can see we have
the name of a file and then we have the
type type here is PNG
PNG means portable Network Graphics it
is basically an extension for images and
pictures so HTML do support other
extensions like jpeg GIS SVG and many
more other extensions so we can use any
of those files with those extensions
now to attach this image to a web page
we need to provide the path to the
system through which the system can
understand that this particular image is
stored in this part of the system or the
drive fine
so the path you can check here is at the
top of this window
click on it and you can see the path
over here so this is the path so this
python file is present inside the C
drive users then we have a name this
folder name as caution based then we
have desktop and HTML fine so this is
the path of a image
let's move back to vs code and we don't
need the whole path as of now because
the current HTML file we are in right
now is present inside the HTML folder so
we don't need to specify the whole path
as of now
all we have to do is we have to write
the file name here inside the SRC
attribute what we'll do is we'll write
here the file so a file name is python
Dot speed fine so this is a file name
save the program and you can see we have
an image over here on the browser the
size is quite large as of now we'll see
how to manage this thing after some time
for now let's reduce the size of the
whole webpage what we are going to do is
we are going to reduce the size and you
can see the whole image over here fine
another possibility is we can store all
the images inside a single folder so
here if we go back to HTML folder here
you can see we have a folder named
images Right double click on it and you
can see we have different images present
over here we have three different images
basically HTML CSS and JavaScript we can
use any of these images
so let's get back to vs code again and
the next thing we are going to do is we
are going to access any image from that
particular folder fine so what we are
going to do is we are going to write
here after this IMG then SRC now inside
SRC we have to write the fold and
inverse fine so we'll write here images
then we'll use slash and then we'll
write the file name so we have three
different files over here this is the
benefit of using vs code we have all the
three files we can use over here so
let's use css.png as of now close the
image tag save the program and you can
see the image over here so let's do one
thing we are going to use
the BR Tech use it now
save the program and let's use it once
again
so that it will be easy for us to
understand so here we have two different
images the python one and the CSS one so
basically what we have to do is we have
to give the correct path of that
particular image fine
so the next attribute we will discuss is
the alt attribute or we can say the
alternate attribute let's write it over
here first
what we are going to do is we are going
to write a alt press enter and write
something over here let's see we are
writing over here CSS so this alt
attribute we have here provides an
alternate text for an image if the user
for some reason cannot view it so
basically it can happen because of slow
connection and error in the source code
or in the source we can say
or if the user is using a screen reader
so it can be any of these reasons but if
the user is not able to see that picture
then an alternate text will come at
Place fine
so the value of the alt attribute should
always describe the image so that's why
we have written over here CSS so that
the user can understand that this
particular image over here is a CSS
image or it can be basically anything
that describes the image fine
so let's do one thing here what we'll do
is we'll make an error over here in the
SRC attribute let's change the file name
away let's say this is the file name
that's a simple error right nothing
major over you let's save the program
and you can see the image is not here
anymore fine
so I believe you guys might not be able
to see because I have to increase the
size for that
so
so you can see here now there is no
image present at this particular part of
a web page because the source is wrong
so this file name is wrong basically
instead of that we have text present
over here which says CSS fine so this is
how the alt attribute works in the image
tag for the end talking about the actual
size of these images over here we can
change the size of these images in two
different ways so let's start with the
easier one first
what we'll do is we'll use the height
and the width attribute just like the
source and Alternate attributes we have
these attributes are also used within
the image stack all we have to do is we
have to write here
right height is let's say 250 pixels and
then we have width as well
so width again is let's say 250 pixels
save the program and you can see the
image height and width is now 250 pixels
we can do the same thing for this file
as so what we'll do is we'll write here
width as let's say 100 pixels and
height as again 100 pixels save the
program and you can see the size of this
image is 100 pixels in width and height
now fine
another way of using these attributes is
to use them within the style tag we can
use this tag anyway in the program
although this tag is related to CSS and
we can also Define these things in CSS
files but as of now we are not talking
about that concept so we'll stick to
HTML only so what we'll do is we'll
write here to use this style tag but we
have to do is we have to write here
style now what we want to do is we want
to access the image stack so we have to
write here IMG curly braces now we have
to define the properties inside here
fine so what we'll do is we'll Define
the width over here as 500 pixels
and height as well fine
it is again going to be 500 pixels now
one thing to notice here is this image
stack or these properties will be
applied on both the text because we are
using tag over here fine so we are
changing the properties of a tag so both
the image tag will be affected save the
program and you can see the image size
are now changed both are 500 pixels so
let's do one thing
let's remove it from here and this as
well
now change the size to let's say
200 pixels and 200 pixels save the
program and you can see we have both the
images over here both are 200 pixels in
width and height so this tag is also
working fine
what we summarize from this is we can
use these attributes within the image
tag itself or we can use the style tag
to change the style of the image
so these are some of the basic
attributes we can use within the image
tag in HTML I hope you guys got it try
it by yourself and let us know if you
face any problem a table is a set of
data elements that allows us to store or
represent data into rows and columns
just like we create tables in normal
light for representing the data the same
table we create in HTML as well a table
consists of rows and columns we can
arrange any kind of data like text
images links other table Etc into rows
and Columns of cells
fine the table tag in HTML is used to
create a table so let's do it here side
by side and you guys will get a better
idea of what we are talking about here
so let's create a simple table first
we'll discuss each step here so what
we'll do is we'll write here inside the
body tag will create a new tag so this
table tag this is a table tag whatever
data we want to put in the table will go
inside the stable tag only
now save the program and you can see we
are not able to see any table here
so we'll see it in a while now let's add
some data here first we know that a
table consists of rows and columns right
the table row tag defines any Row in
HTML or in a table we can say the Syntax
for it goes like this what we'll do is
we'll write over here inside table tag
on we will write PR now this PR
represents table row fine
one thing to notice here is we are
nesting one tag inside another tag the
table tag is responsible for creating a
space for the table the table row tag is
used to add a row to that particular
table
now the next step is to add columns
inside the table each row can contain
one or more than one column the table
data tag is used to add data in columns
so it might sound a bit confusing at the
moment but let's do it over here and you
guys will know how easy it is to add
data in column what we have to do is we
have to write here simply
TD TD stands for table data and we have
to put the data inside this TD tag TD
means table data Tech and this tag
represents a column in material fine so
let's write it over here
R1
comma silver fine
let's give some space over here as well
then again we are going to use the TD
tag
so we will write a R1 comma
fine
now here we are we have added two
columns inside the first row so let's
check the output now save it and you can
see we have the data over here
this is basically the table data R1
means Row 1 c 1 means column one and
similarly R1 means rho 1 c 2 means
column so this is a single row with two
different columns fine
now we are not able to see the structure
of the table right in order to get the
structure of the table we have to
include an attribute inside the table
tag what we have to do is we have to
write here inside the table tag
we have to write here border and inside
body we have to mention the Border width
so which is basically one pixel right
now save the program and you can see
this border attribute will show the
Border all around the table and the same
fine
we can change the width of this border
by changing the value of Border over
here so for example if we write it 10
pixels and now if we save the program
you can see the Border changing
so this looks nice right so for now
we'll write here one pixel only so this
is the table border moving ahead let's
add another row over here first what
we'll do is we'll use the table row tag
again and the rest HTML will take care
of
we can add a row in a table anywhere in
the HTML keep this thing in mind until
the table row tag is nested inside the
table tag HTML will manage to add the
row in the table fine
what we'll do is we'll write here after
this table rotate we are going to add
another row so we are going to write a
TR
now inside this we have to write some
data or we can say we have to include
some columns so this is going to be the
root 2
so we are going to write here R2 C1 for
column 1. and then we'll write here TD
again
we'll write here R2 then we have
see
Phi now save the program and you can see
we have another row over here which says
R2 and C2 and R1 and C1 obviously
so adding rows and columns seems an easy
task now right I hope you guys got it
moving further we'll now discuss the
table heading type so every time we
arrange some data in the table we need
some reference to that data right let's
say we are creating a bill for a
restaurant what we need in that bill are
the name of the product and the price
fine
foreign
so we need to mention it at the top of
each column to do so we need to use the
table heading tag the Syntax for this
tag is pretty easy what we have to do is
we have to write here after the
first table rotate the Syntax for this
tag is pretty easy what we have to do is
we have to write here before the first
table rooting so we have to write here
only because this is going to be the
heading so it has to be present at the
top of the table before any row and
column we have to add another row over
here now inside this row we have to
mention headings fine so we have to use
the table heading
text so the syntax is this now we have
to write here the first heading so let's
say
first heading is item
and then we have the second heading as
price fine save the program and you can
see we have two headings over here
now let's change the tables data first
and we'll create a bill for some
restaurant let's say so what we are
going to do is we are going to add
another column over here in each row so
we are going to add a column let's say
it's
as our number so it's going to be the
serial number
then we have to change the data here
only fine
so we'll remove the data from here
from each row basically so we'll remove
this as well
and we'll remove this as well fine now
this is going to be the first row after
let's save the program once and you can
see over here we have empty cells
present over here we have three headings
serial number item and price let's work
on the first row now we need another
table data tag so the serial number is
going to be 1 for first row
let's say the item name is t then we
have the price so let's say the price is
going to be
rupees 20 save the program and we have
our first row over here
now for the second row we have to put
the serial number as two then we have
coffee or let's say
black coffee then we have to use another
table data tag now we have to mention
the price the price is let's say
34 black coffee
and we are good to go with this as well
we are going to copy this whole row from
here
and to paste it here the CL number is
going to be free the item name is let's
say
cappuccino so we'll write here
cappuccino
and the price is going to be a little
higher than black coffee let's say 64
cappuccino
and then we are going to add another
item over here fine so the serial number
is going to be 4
instead of cappuccino let's try it here
espresso then let's change the price to
90.
save the program and you can see the
table over here it looks nice right
now we have three columns the procedure
is the same and you just saw it right
just like we added the table heading
here in this table similarly we can give
a caption to the table as well like here
we can write the restaurants names or we
can write the bill or anything we want
so that particular caption will be
present at the top of the table so what
we have to do is we have to write here
at the top before this
table rotate before the first row we
have to write here caption caption is
another tag now we have to write here
let's see the restaurant name is
x y z
restaurant save the program and you can
see the caption over here as Xyz
restaurant fine
now the next thing we are going to
discuss in this video is the row span
and the call span attributes suppose we
want to merge two cells and create a
single merging two cells means let's say
we want to merge these two cells find
this one and this one so for that we can
use the
column span attribute or the row span
attribute fine
so for example let's suppose we want to
print the grand total of all the items
for that we don't need the serial number
so what we can do is we can merge the
first two columns of this row with the
help of call spec so we are going to
create another row over here and we are
going to merge these two columns fine in
the new room so what we have to do here
is
we have to write here
after this bro we are going to add
another row so for that we have to write
here table row tag and now inside the
stable rotor we have to mention the
table data tag and then we'll write a
call spent call spin is going to be 2
because we want too much
two cents fine now what we'll do is
we'll write here
grand total and we are going to add
another cell so we are going to write a
TD again
so let's add it and the total price is I
guess
200 so we'll write here 200 save the
program and you can see
we have two columns merged over here
fine
similarly we can also use the row span
attribute whenever we want to merge two
rules one thing to keep in mind is we
can use these attributes within the
table data tag only not in any other
deck for example
if we want to merge two rules fine so
what we can do is we can write here
Rose pen and we are going to write it to
save the program and you can see these
two rows are now merged fine
so let's remove it for now and save the
program again so this table looks nice
now
the next attribute we have in tables is
the background color attribute we can
use this attribute to change the
background color of the whole table or
of any particular row or column fine we
just have to use the BG color attribute
as per our requirement for example if we
want to change the background color of
the first row which contains all the
headings what we have to do is we have
to write here inside this first table
row tag we have to write here
BG color and this is an attribute now
let's say we want to color it as red
fine save the program and you can see
the the whole row is red in color now
fine similarly we can change the Border
color of the whole table with the help
of Border color attribute we have to
write here inside the table tag
so this is the main tag and we have to
write here
border color is equals to
let's say
yellow fine save the program and you can
see the border is now yellow in color
one thing I want to tell here is we can
change the background color of any
particular cell fine so let's say we
want to change the background color of
espresso fine let's do it let's change
this background color to
ground fine so here we have espresso
inside this table data Tech what we have
to do is we have to write here BG color
and we have to mention here Brown save
the program and you can see it's brown
in color
fine
so guys this is basically how we can
create and add data in a table in HTML
what is an HTML cloud
an HTML class attribute is used to
specify a single or multiple class names
for an HTML element
the class name can be used by CSS and
JavaScript to do some tasks for HTML
elements
you can also use this class in a CSS
with a specific class with a period
character followed by the name of the
class first selecting elements
so let's jump onto the demo to
understand the classes and ID better so
we are on a Sublime text Adder
let's add the standard boilerplate of
HTML we'll give the title as
classes
and ID in HTML
let's start with the basic example
we'll see how to define an HTML class
so inside the body tag
will add one H1
and will give this
a class name of
head one
we'll add some text here this is the
heading one
now you can copy this part because we'll
need it enough for the lines
so for the H2
this will be the heading 2
for H3
this will be heading 3.
and let's add one more H4
this is the heading 4.
so as you can see we have used the same
class name in all our H1 H2 H3 and H4
so if you save the file and
go to the page and refresh
you'll see the headings are there on the
page this is the heading one heading to
heading 3 and heading 4.
now let's learn how we can use this
class name for our starting purpose
so we'll open the style tag here
and you will mention the class Name by
period followed by the class name so
head one
open the parenthesis
and let's set the color to
like San
and we'll set the font family to set
quit cursive
keep the background color to Black
okay so you can see we have mentioned
the class name dot head head one for our
styling purposes and we have given the
color of Point family and background
color for it so just save the file and
go back
refresh
now you can see we have designed this H1
H2 H3 and H4 using a class tag
now let's use another example with a
Different Cloth name
so here only we'll make the changes
let's name this class as H2 this H3 and
let it be H4
now you can style them separately for
the head to
we can set the color
to say light
pink and we can set the font background
color too
red okay
now
similarly for the H3
Dot
H3 set the color to
I don't know what color this is let's
say kuchisa
and set the background color to let's
say blue
okay save the file and go back to the
page
now you can see we have designed our H1
H2 H3 and H4 using the different class
name
this is the example of using the
multiple classes on the same code
one thing you should note that these
class name must be separated by the
space
there are few points you should know
while working with the class so the
first one will be the class attribute
can be used on any HTML element
like any HTML element can have a class
name the second point will be the class
name is a case sensitive
head one
and if we change here to say
we'll keep this Edge as kept Capital so
this will be wrong the style won't be
implemented on the page now if you
refresh you can see the style is not
implemented
so the class names are case sensitive
let's change this back
refresh and now we can see our design is
back
so this was all about HTML classes now
let's move on to the idea attribute
so the HTML ID attribute is used to
specify the unique ID for an element of
the HTML document
it allocates the unique identifier which
is used by the CSS and a JavaScript for
performing certain tasks
in cascading style sheet that is CSS we
mention an element with a specific ID by
using the hash symbol followed by the ID
let's work on an example to understand
this better
so we'll use the same previous example
we'll mention the H1 and this time we'll
use the ID
so ID and we'll name it as head1
this is the first heading
for H2 also
will mention the ID name as head one
only
head one
this is the
second heading
now to style The Heading we'll go back
here will open the style tag
and we'll use the hash chamber to
mention the ID so hash
head one open the parenthesis
we'll set the color to
light green
you'll set the font family to cursive
and we'll set the background color
to Black
okay now save the file and go back and
refresh
so you can see this works a similar
manner to the class apart from it that
we use the hash symbol to mention the ID
name
so now let's change the example and use
the different ID name for different
hedge funds
so this can be H1 this can be H2
let's add one more we'll name it as ID
hit 3
.
okay
so we'll style the
head to
will set the color to red
for head 3
foreign
let's use green yellow okay save the
file
go back and refresh
now you can see we have the different
style for different IDs so in this way
you can use the different IDs to design
your HTML page
CSS stands for cascading style sheet it
is a rule based language used to
describe the formatting and looks of a
web page
CSS stands one among the top three basic
languages required for front-end web
development there are three languages
which are HTML CSS and JavaScript HTML
as we all know is used to create the
layout or structure of a web page while
CSS is used to format that web page it
means to make changes in the style of
elements of a web page JavaScript on the
other hand is used to make a web page
more responsive to a user all three
languages together are used for basic
front and web development let's not go
deep into that and we'll now go through
the different ways of adding a CSS file
to a web page we can use CSS in three
ways in a HTML document external
stylesheet define stylesheet rule in a
separate CSS file the CSS files
extension is going to be dot CSS and
then we can include that file in our
HTML document using the link tag another
method we have is the internal style
sheet Define style sheet tools in the
header section of the HTML document
using style tag
another one we have is inline style
sheet in this method we define
stylesheet rule directly along with the
HTML elements using the style attribute
remember the difference in internal
style sheet we use style tag and in
inline style sheet we use style as an
attribute so let's go through each of
them practically you guys will
understand it much better
we'll use an external CSS file first
we'll attach it to a HTML document for
that let's write something over here on
the web page first so that we can then
style that particular element so what
we'll do is we'll move to the body of a
HTML document and we'll use a Dev tag
over here so we'll write here div and
inside this let's write something over
here so let's say we are writing over
here
standing using
external CSS file or we can say styling
using
external style sheet
so this is a basic example of creating a
division save the program and you can
see here we have some text present over
here right the next thing we'll do is
we'll attach a CSS file to this HTML
document using a link tag then we'll
style this div tag in that file only so
let's do one thing first we'll create a
CSS file first so we'll go to this
section We'll add a file and let's name
it as style dot CSS dot CSS is the
extension for external CSS files
remember this guys press enter and you
can see we have another style sheet
present over here so this is empty for
now we just created this style sheet now
let's move back to the HTML file for now
now what we'll do is we'll link this
style sheet to a HTML document for that
the task is simple we use the link tag
so we'll move to the Head section of a
HTML document and we'll write here link
fine so after link what we'll do is
we'll write here a ring and well is
going to be
expense sheet then we have
type so this defines the type of a
document so we will write here Text
slash CSS and then we finally write here
href and a sheet name is
style dot CSS fine so we'll write here
style.css close it now
the Rel attribute here signifies the
relationship between these two documents
which means the HTML document and the
CSS document fine
the type is CSS and the href refers to
the source of a CSS file save the
program and you can see nothing happened
over here on the browser now what we'll
do is we'll style this div tag in the
external CSS file we just created
so let's move on to the CSS file and
what we'll do here is we'll write over
here so we are going to style a div tag
fine so for now we'll write over here
dip this is the Syntax for styling any
HTML element fine so let's style it so
let's say we are writing over here
background color is blue fine save it
now and you can see the background color
is changed to Blue
next thing let's change the font color
as well so let's say we are writing over
here
antique white as font color save it now
you can see the font color is also
changed let's add some more CSS
properties
so let's say we are writing over here
font weight so font weight is going to
be
bold then we have let's say font it's
time so font style we are going to write
here the tank fine save the program and
you can see the text is bolder and
italic in Niche fine next thing let's
add a border as well so we'll write your
border border is also a CSS property so
we'll write over here 3 pixel this is
the thickness of our border then we'll
write here solid this is the nature of a
bottle and let's say we are writing over
here the color name so silver is going
to be the color name save it now and you
can see this div tag or division we can
say now has a silver border with some
background color and font color as well
the last thing we are going to write
here is text align we are going to align
the this text at the center of a
division save it now and you can see the
text present at the center of word
division fine
you can see the change over here on the
browser we created the layout here with
HTML and then we styled our div tag
using CSS we can style any HTML tag here
either with the help of tag name or the
ID and class attribute fine
the second way of styling an HTML tag is
with the help of inline CSS this method
is used to apply a unique style to a
single HTML element
for inline CSS what we need to do is we
need to move
to the HTML file first and here what we
are going to do is we are going to
create another division now fine we
don't need any special tag or external
CSS for inline CSS or we can say inline
style sheet so what we'll do is
we'll write over here
let's use the brake tag first to make it
look more tidy so we'll use Break Tag
twice and then we'll write here div fine
so
this is going to be another Division and
we are going to write here p
so let's write here styling
a document
using
inline CSS fine save it now and you can
see this division has the same styling
as the previous one this is because we
have used the tag name over here inside
this style.css and both the tag names
are same both have Dev text right so
what we'll do is we'll remove this line
for now
now save it and you can see both of them
don't have any style right now fine so
what we are going to do is we are going
to write here again now we are going to
style it with the help of inline CSS for
that we need the style attribute so
we'll write Here style then we are going
to define the background color as let's
say aqua
then we have
so let's make it tidy so we'll apply the
font color as well so let's say the font
color is going to be black for this one
then we have
let's say fonts style font style is
going to be italic
and then we have font weight onto it is
again going to be bolder we have
discussed all these properties in the
external CSS part as well so let's
mention all of them here so we are going
to use the Border as 3 pixel again
let's say dashed for now so we'll write
here dashed and then we'll write here
the color name so let's say the color
name is gold
and we have the Border as well so at the
end we'll write here text align at the
center
fine so the style attribute plays a
significant role in this type of style
and you can see it over here on the
browser the moment we say we have
another division over here so you can
see it over here this division has
dashboard which is also three pixel
thick and it looks different from the
previous one right so let's mention the
link over here as well again so we'll
write your link
Rel is going to be
tile sheet
type is going to be Text slash CSS and
then we have href href is going to be
style dot CSS and close it save it now
and you can see the difference between
both the divisions right the first one
uses the external CSS file and the
second one uses the inline style sheet
okay
the output is almost the same as the
previous one apart from the color Center
so inline CSS is easy to use but it can
make an HTML document look more
confusing and we need to style each
element separately if we use this method
to apply as time to an HTML document it
doesn't matter if we want to apply
similar styling to more than one element
inline CSS can be tricky and lengthy in
such tasks moving ahead let's talk about
the last method we are left with for the
HTML style sheet the internal method so
it uses a style tag inside the head
section of HTML document
so for that what we are going to do is
we are going to remove both these
divisions save it now and we are going
to remove this link as well we are going
to remove the link for our external
style sheet as save it now and you can
see we have nothing over here on the
browser so what we are going to do is we
are going to create another division now
inside this we are going to use a
paragraph so let's say
we are writing over here styling a
document
using
internal
Edge node fine save it now and you can
see we have a paragraph over here
nothing else
now this method is used to style
elements of a single web page we can
apply the same styling to a bunch of
elements simultaneously with the help of
internal CSS the task is simple so let's
do one thing let's create another
division over here
so we are going to create it after the
Break Tag and
paste it here and let's write something
over here as well so let's add Here
style sheet 2 and you can see we have
two paragraphs now these two are in
different divisions so what we are going
to do is we are going to style both the
divisions at the same time or
simultaneously we can see so for that
what we are going to do is we are going
to move to the Head section of our HTML
document and we are going to use the
style tag so style can be used as a tag
or as an attribute as
if we are using inline CSS then we are
going to use style as an attribute and
if we are going to use internal CSS then
we are going to use style as a tag fine
so let's write it over here so we have a
div tag now what we'll do is we'll style
both of them so we are going to write a
background color as
let's say red for both of them then we
have color which refers to the font
color so let's say we have the font
color as black again then we have font
weight font weight is going to be bolder
then we have
font style font style is going to be
italic save it now and you can see the
difference in the browser both the div
tags have same styling as of now now the
next thing we are going to write here is
border fine so we are going to write a
border let's make it 5 pixels this time
we are going to write you solid again
and let's change the Border color to
let's say we have yellow fine so we'll
write here yellow save it now and you
can see the Border color is yellow
so the last property we are left it is
text align we are going to align it at
the center save it now and you can see
the difference on increasing the
browser's size you can see the
difference the text is aligned at the
center of both the divisions fine
this method is also good to use if you
want to style any particular web page
only
I hope you guys must have understood all
the three methods of using CSS by now
the question that arises now is which
method we should use to keep the whole
document neat and
the answer to this question is external
CSS this is because external CSS allows
us to style multiple document at once it
keeps a HTML document clean and less
prone to error as well so I want you
guys to use all the methods and then let
us know in the comments which method you
like the most or which method you are
more comfortable working with JavaScript
is a lightweight scripting language used
to make a web page more interactive and
livelier to the user it is one of the
most popular scripting languages present
in world today it's almost impossible to
cover the whole of JavaScript in one
small video because JavaScript in itself
is an interesting topic in this video
we'll go through the ways to attach
JavaScript with HTML and some basic
examples of what this language can do
so to include JavaScript in an HTML
document we can either keep the
JavaScript code in a separate file and
then include it wherever it's needed or
we can just Define functions inside the
HTML document itself using the script
tag
let's go through both the cases one by
one firstly we'll create an external
Javascript file the benefit of using an
external Javascript file is if we are
going to define a functionality which
will be used in various HTML documents
then it's better to keep that
functionality in a separate Javascript
file and then include that file in your
HTML document it will help us keep the
HTML document neat and organized as well
so a Javascript file always has a DOT JS
extension and the script tag is used to
attach a Javascript file to an HTML
document
let's move on to the programming part
directly and then we'll see what we can
do with JavaScript let's create a
Javascript file first
so we'll go here and we'll click on
create a file now we'll create a file
let's say the file name is going to be
new DOT JS dot JS is the extension here
and we have the Javascript file now
now it's time to attach the Javascript
file to a HTML document we'll use the
script tag after the body so what we'll
do is we'll move here and we'll write
here
script
now inside the script tag we need two
attributes first one is going to be SRC
SRC is going to be new DOT JS as this
file is saved in that same folder the
next attribute we need is type so we'll
write here type type is going to be Text
slash JavaScript
fine
so SRC here defines the path where a
file is actually saved and type defines
the type of file that is Javascript in
this case so we are done with attaching
the file now let's move on and make a
web page a bit interactive to the user
fine we can write small functions known
as event handlers and then trigger them
using HTML only adding responsiveness to
a web page means defining an event that
will tell the system to perform a
specific action upon calling sounds a
bit confusing right so let's understand
it with the help of an example we are
all aware of adding buttons to a web
page right so if the user clicks on a
button then what should happen we can
either create a pop-up alert on the
button click or we can do whatever we
want
so let's create a button here first and
we'll then add functionality to it fine
so here we are in a HTML document we'll
create a button over here so we'll write
over here button and let's say the
button name is going to be external for
external file save it now and you can
see we have a button over here on the
browser fine
now click on it and you can see nothing
is happening as of now so let's add some
functionality to this button now for
that what we'll do is we'll write here
inside the button tag we'll Define an
event first so let's say we are writing
over here on click and we'll call a
function on button click fine so let's
say a function name is going to be
message
and save it now fine
what we are doing here is we are asking
the system to call the message function
on clicking this particular button let's
define this message function in a
JavaScript file now so here we are in a
Javascript file now we need to create a
function named message fine so we'll
write here function
message and this is the Syntax for
creating a function in JavaScript now
we'll write over here alert
inside alert will write button
clicked fine so here we have this
message over here now this alert is a
method present in JavaScript for
creating pop-ups save the program and
now click on the button over here you
can see we have a pop-up here which says
button click you can see the message
right over here now
the number of such things we can do with
JavaScript is uncountable let's move
ahead and we'll see another method of
using JavaScript with HTML the internal
script method we can use for this this
method is useful if we want to use
JavaScript for a particular file or a
particular tag we can write a script
code directly into a HTML document
usually we keep the script code in the
header section of the document using the
script tag otherwise there is no such
restriction and we can put a source code
anywhere in the document but inside the
script tag so we'll move back to HTML
file and we'll create another button
over here this time we'll use the
internal script tag to add functionality
to it fine so we'll move to the body
section and here we are going to create
a button so we'll use the break tag
first
again a braid tag now we are going to
create a button
then the button name is going to be
internal save it and you can see we have
this internal button over here as well
click on external and you can see we are
getting a message click on internal you
can see nothing is happening as of now
now to add functionality to this button
we need to add an even first so we'll
move inside the button tag and we'll get
right here
on let's say mouse over so this is
another event we have in JavaScript
we'll see what this event can do in a
while so we'll write over here
the function name so let's say the
function name is going to be internal
for this particular button save it now
and now what we are going to do is we
are going to define the JavaScript part
fine
we'll move to the Head section of HTML
document and we'll write here
script the script tag will remain the
same in both the cases here you can see
we have defined the srcn type but here
what we are doing is we are using it
internally so we'll create the function
over here only so we'll write over here
function
internal and this is going to be the
body of this function and we'll write
something over here inside the alert box
so let's say we are writing over here
internal
Crypt tag fine
save this program and move back to the
browser now you can see the moment we
take a mouse cursor over this internal
button a pop-up will appear with the
message internal script tag you can see
the message over here fine this is
because of the on Mouse over event we
used
so guys we went through both the methods
of adding JavaScript to an HTML document
I hope you guys got it although
JavaScript is a very long topic to
discuss it is a language and if you want
to learn it then you can go through a
channel and find the JavaScript playlist
here before we move on and start
creating the layout of any web page
let's discuss what a layout is a layout
refers to the arrangement of things in
HTML a layout refers to the arrangement
of elements in a way to make the web
page look more neat and clean to the
user
creating a layout also allows us to
manage the content present on our web
page more effectively and efficiently
you can think of it right a well-planned
website is easier to manage and edit if
we have an idea about all the sections
present on a web page
we have used the header and footer text
before along with some more tags like
nav and section to create the layout of
a web page this time we are going to use
the table tag to create a layout and
then we'll use the div and spend tags as
well for the scene so we are going to
use two different methods for creating
the layout of a web page we'll use a bit
of CSS as well to differentiate between
the different sections of the web page
so let's move on to the programming part
directly and we'll create a first layout
a question May pop up in your mind why
are we using tables for creating the
layout it is because tables are already
arranged in columns and rows so we can
utilize these rows and columns in
whatever way we like
so let's understand it with the help of
an example now if getting your learning
started is half the battle what if you
could do that for free visit scale up by
simply learn click on the link in the
description to know more
so what we'll do is we'll move to the
body tag of a HTML document directly
we'll remove this H1 tag from here and
now we'll write here
table so we are going to use the table
tag first now let's style this table a
bit well right over here width width is
going to be let's say 100
and then we'll Define the Border as 0
fine
so we have used these two CSS properties
for the stable tag here now close the
table tag and you can see we have the
whole table element here now inside
table tag we need the table row fine PR
tag we can say so we'll write here Tia
now inside TR we need the table data tag
to mention the data inside the table
so what we'll do here is we'll again
style the stable data column or we can
say table data tag so we'll write calls
pen calls pen is going to be 2 and then
we'll write
time fine we are going to style the
background color over here so let's say
the background color for this is going
to be
green fine so let's use green yellow
instead of green
and now inside the table data we need to
mention a heading so we'll write over
here H1 and inside this we'll write
this is the
title of a
web
page fine now save this and you can see
over here
we have this division or we can say
block with the heading this is the title
of a web page so if I increase the size
of a browser you can see this is the
title of a webpage we have this over
here fine
now what we are going to do is we are
going to come out of this table data and
table root tag because we are going to
use another table row tag for another
section of the web page so we are going
to write here
TR
now close this TR tag let's style this
as well so we'll write here we align
and we are going to align it to the top
fine save it now now we have another
table row
so we'll write over here table data
again so we'll write here table data
now inside table data we need to style
this table data tag so we will write
over here
Style
and
we'll write
width again so width is going to be 100
for this
and then we'll write over here
background color so background color is
going to be
let's say Aqua let's change this
background color a bit from here you
know we can do it in visual code so
let's change it to this the RGB value
will change for this background color
now we have to close the table data tag
as well so the next thing we are going
to do is we are going to put the content
inside this
so we'll write over here
inside the
bold text so we'll mention B over here
let's say this is going to be the main
menu
so we have this bold over here now we
are going to use the break tag again
so we'll write over here this save it
now and you can see we have this main
menu present over here fine so you can
see
now let's do one thing what we are going
to do is we are going to mention here
100 the width and save it now let's see
if this makes a change and you can see
now both the divisions have full width
of the web page fine so the next thing
we are going to do is
we are going to do HTML and
then of course we are going to put a
break over here
then we'll write here CSS again a break
we need
then we'll write here
python let's write each of them in
capital letters so we are again for this
as well then we'll write here
Java Script
we are again so this is basically the
content of a web page save it now and
you can see we have this main menu
present over here fine
now we are done with this table data tag
as well so let's move on and we'll
create another table data tag inside
this same table row so what we are going
to do is we are going to cut this
section in two different parts the left
part is for the main menu and the right
part is for the
other things fine so let's Zoom it out
again and we are going to use
the table data tag here again
so we have this table data tag and now
what we are going to do is we are going
to style it we are going to write here
inside this style so let's say
background color we are going to mention
so let's mention any color over here
we'll write you purple and then we'll
change the color from here
let's make it light purple and save it
you can see nothing is happening over
here on the browser or you can see this
purple color over here it's smaller in
size as of now right so let's do one
thing mention the height and width as
well for this particular block so we are
going to write here after this
width is going to be
100 pixels
and then we'll write here
height as well height is again going to
be let's say 200 pixels fine for this
box and
we are done with it so let's mention
over here something
so let's say we are writing over here
tutorials
present in the website find all this
thing refers to the content we have in
our website so save it now so you can
see we have two sections present over
here in a website for this particular
section we have the main menu sections
and then we have the tutorial section as
well so now let's do one thing let's
move back here again and now what we are
going to do is
we are going to add another table Row
for the footer section for the bottom
moves section of a web page so we are
going to write here t d
again then we need call span call span
is going to be 2 again then we'll write
here
Style Style
will mention the background color
background color is going to be let's
say
red this time
let's change the color a bit because we
want light colors so let's choose this
color over here and you can see it over
here it's
not completely visible but it is here so
let's do one thing let's
mention something inside this box as
well
now what we are going to do is we are
going to write here
this and now inside this table data we
are going to use a paragraph tag so
inside the paragraph tag let's write
something so let's write copyright
because this is always mentioned over
here so let's say we are writing of a
copyright
ABCD save it now and
here you can see we have copyright
written over here let's put it in the
center for that we need to move back to
the style attribute and we have to write
here
text align at the center save it now and
you can see the text is aligned at the
center now you can see the layout of
this webpage we designed this layout
using the table tag and we have all the
tape tags present within the table tag
we have the table row table data tag and
we have the table tag as well so this is
the complete layout of a web page fine
let's move ahead and we'll create
another layout this time we'll use the
div and span tag for creating the layout
we'll create a new file for that layout
we'll create a file so we'll move here
and we'll write here how to dot HTML
save it now and you can see we have
another file over here fine let's
do this and we have the HTML code over
here the basic HTML code now we'll move
to the body section directly
and what we'll do is we are going to use
the div tag and the span tag for
creating a layout fine so let's open it
with live server once and here you can
see we have this document so let's write
the code now so we'll use the Dev tag
for creating divisions so we'll write a
depth style is going to be
the width width is going to be 100 fine
so let's write over here 100 now this is
the main division fine so we are going
to create the layout inside this
particular division all
so we'll use another Dev tag inside this
particular div we'll write here div
Style style is going to be
the background color we have to
set so we'll write your background
color so background color is going to be
it's a blue wallet let's change the
color from here
save it now and you can see nothing is
happening as of now
so the next thing we are going to do is
we are going to mention the width over
here as well it will take the hundred
percent width of
whole div tag so we'll write a hundred
percent
and we'll close this tip tag fine so we
have this web tag now we have to mention
our content inside this depth so we will
use the H1 tag again and we'll write
here this is the
title of a
back page fine
so we have this save it now and you can
see we have this division present over
here it says this is the title of a web
page
and you can see we have this whole
section present over here which
basically refers to the navigation bar
of any website so this is the layout
first now what we need to do is we are
going to create the whole layout so we
need different sections right so we are
going to use the div tag again for
creating another section present in a
web page so we'll write here diff now
inside this dip what we are going to do
is we are going to use style first so we
need to mention the background color
again so the background color is let's
see
this this is the gray color
and then we'll write here height of this
section so height is we are going to
write here 200
pixels then we have width as well so
we'll write your width width is going to
be
100 pixels fine
and we'll write here float as well float
is going to be left
now let's mention the data inside this
so that you guys will be able to see it
now what we'll do is we'll
create another division inside this
division
and we'll write here in
block letters or we can say bold letters
Main
men fine we did the same thing in the
previous layout as well now after this
we'll write here all the languages we
have so we'll write here HTML
then we'll put a Break Tag over here
then we have
CSS
then we'll put a Break Tag again here
then we have python so we'll write here
break again and then we have
JavaScript fine
so we have this div tag over here it's
almost done
now save the program and you can see
float left means the whole division will
float at the left side of the whole web
page so it's basically we are taking the
division and we are putting it in the
left hand side of a web page if we write
your float as right the whole division
will move to the right hand side of the
web page you can see it over here it's
on the left hand side we can also put it
at the right hand side as well
so let's create another section now so
for that what we are going to do is we
are going to use another div tag
so we'll write here
div
now we need
background color height width and Float
properties again fine so basically what
we are going to do is we are going to
copy it from here
we are going to paste it here close the
div tag and that's it fine
now what we are going to do is we are
going to mention something inside here
so let's take the text from the first
layout we have
so let's write tutorials present in the
website here copy it from here paste it
here
and that's it fine let's put it inside
the paragraph there so that it's not
confusing for you guys
save it now and here you can see we have
tutorials present in the website present
over here fine so before we move ahead
let's change the style of this
particular section so for that what we
are going to do is we are going to
change the height and width so height
will remain 200 pixel but the width we
are going to change let's skip it 350
pixels save it now and you can see it
over here fine
so you can see we have this
whole section present over here so we
have put a main menu at the left hand
side then we have tutorials at the
center and then we can keep something at
the right hand side as well
so let's do one thing let's move here
and we will create another section now
so what we are going to do is we are
going to copy this div tag from here we
are going to
paste it here
again now we are going to change some
style so let this time we are going to
write your float as
right
fine
then we'll change the width and height
as well width is going to be 100 pixel
and height is going to be 200 pixels
save it now and let's see the change
over here you can see we have this
layout or we can see say this section
present over here
and I guess it looks fine now at 175
percent we can also use this space as
well fine so let's do one thing
let's create the bottom side of this
layout first and then we'll discuss what
we can do fine so here we are we need
another div tag now for the bottom side
or we can say for the footer section so
we'll write a div Style style is going
to be again the background color we are
going to mention so we will write here
background color
background color is going to be let's
say
blue
blue is good and then we'll write here
here is going to be both
and then we'll write here text align
text align at the center for aligning
the text to the center of a division now
inside this we are going to use the
paragraph tag again and we are going to
write here
copyright ABCD save it now and move back
to the browser you can see it's present
over here
now you can see many things are wrong in
this particular layout so how we can
correct them what we can do is we can
increase the size according to our needs
so let's increase the size of these
sections a bit and we'll see if it works
or not so let's change the color for
this section first let's make it red and
now we are going to change the width of
this particular
section save it now
and you can see it's greater in width so
it went down now what we need to do is
we need to remove the width by F bit so
let's write here 350 pixels
save it now
let's see and it's a bit more
again and now we'll write a 300 let's
see if it's working
and you can see it works fine now it
looks fine now right so what we can do
is we can change the width of each
section according to our needs that's
how we can create the layout of any
webpage so guys here we have seen two
different methods of doing the same
thing we created two layouts one with
the table tag and the other with the div
and spend time in my opinion the letter
method we went through is a bit simpler
because the only thing we need to keep
in mind while working with the div and
span tag is the area fine we need to
keep the width and height of any
division in mind if we are clear with
that then we can create the layout very
easily so that's why we prefer the
letter method to create layouts for a
web page responsiveness of a web page
May refer to different scenarios let's
go through the meaning of responsiveness
first in web designing adding
responsiveness has two different
meanings one is done with the help of
JavaScript whenever we go through a
website and we see something happens on
a button click it refers to
responsiveness elsewhere we use events
for it right let's suppose we go through
an e-commerce website and try to
purchase a product whenever we click on
the buy now button something happens
right it either takes us to a different
web page or opens any kind of pop-up
regarding the scene this phenomena is
called the responsiveness of a web page
and we use JavaScript for that this was
for your reference that if someone says
responsiveness then you should not get
confused we are not going to discuss it
in today's video responsiveness in HTML
means creating a layout in such a way
that it will be adjusted automatically
to different screen sizes and viewports
let's take an example here to make it
easier for you guys let's say we have a
website open on a desktop
what we want to do is we want to open
the same website on a mobile device as
well but at the same time we want all
the content to adjust automatically
according to the Mobile screen in that
case we need to design a website in such
a way that it automatically adjusts
itself to such devices
we can achieve this task using two
different methods we can use CSS media
queries or we can do it with the help of
HTML and basic CSS as well
we'll be discussing the later method in
this video which is the HTML method and
in the upcoming video we'll discuss
media queries as well so don't worry
about it guys
let's move on and start using HTML to
make the content of a web page
responsive to different device screens
if getting your learning started is half
the battle what if you could do that for
free visit skillup by simply learn click
on the link in the description to know
more
reference add an image to our browser
photos
HTML document and we'll write here
IMG so we are going to add an image over
here so let's write here source
the image is present inside the images
folder and let's say we are using space
dot PNG now we need the alt attribute as
well so let's say we are writing over
here
alt and space fine
now save the program and you can see
here that we have an image present on
the browser
the image size is larger here right let
me zoom in a bit for you so you can see
this is a image so you can see the size
is quite big according to a brown
now we want this image to adjust itself
accordingly if we reduce the size of a
window for this we need to make some
changes to this picture so what we'll do
is We'll add a class here first so let's
say we are using class is
responsive fine so here we have our
class now we'll make certain style
changes in this image so we'll use the
style tag now inside it we are going to
access our image so we have a class is
responsive and inside here we'll write
width width is going to be 100 percent
and let's say the height height is going
to be
odd fine save the program and you can
see here the image adjusts itself
according to our window size so if we
increase the size of our browser you can
see this whole image over here the width
of this image is 100 of the screen and
the height is automatic fine now the
moment we decrease the size of this
window or we can say if we increase the
size the image is adjusting itself
accordingly right on increasing or
decreasing the size of a window the
image is adjusting fine we don't need
anything else to make it look more
responsive fine another thing we can do
here is we can use the max width and Min
width properties to make an image
responsive to the window
so what we can do here is we can write
here inside this
we are going to write here as 500 pixels
and we are going to Define Max width
here as well Maxwell is going to be
let's say 1000 pixel save the program
now and you can see
the image size is 1000 pixel over here
go to inspect element and here you can
see if you take your cursor over here on
the image source button you can see the
rendered size is 1000 into 469 pixels
now try decreasing the size of this
image so you can see it over here we
have this size of our window now take
your cursor over here you can see the
rendered size is 7 19 pixels now
decrease the size completely now you can
see the rendered size is 500 pixels the
image is not going below 500 pixels in
this case fine
it means that the image will adjust
itself down to 500 pixels only fine now
let's write here 400 pixels for your
reference save the program now decrease
the size of this window so it's at the
lowest and take your cursor over here
you can see the rendered size is 423
pixels it can't go below that because
this is the maximum
size we can go with a browser window
fine so this is how we can make an image
responsive to the Windows screen using
HTML and basic CSS we are not using any
advanced CSS for making an image
responsive as of now I hope you guys got
it so in this video we are going to
create something like this this is the
content box with the icon and the
description of the content box
icons here used is from the font awesome
CDN
so let's start creating
so I have my two files open which is
HTML and CSS
let's add the standard boilerplate
we'll add the content
boxes in HTML
as the title
let's link our CSS file
now inside the body let's add a div
clock container
inside the disc plus container I'll
create another div box
I will require three such boxes so we'll
copy paste this three times
on the tie sheet
let's set the margin
to zero and padding also to zero
we'll set the font family
to
Sam serif
now
for the container
class
will set the position to relative
and will set the width to 200 pixels
which is the whole width of the content
box
we'll set the height to 300 pixels
and we'll set the margin
to
240 pixels and Auto
for the boxes inside the container
will add the position
relative
and will set the width to
let me explain you what this is
this CSS type function is used to
perform a calculation to be used as a
property value
this is specifically used for the width
of the div classes
it requires a mathematical expression
the result will be used as a value
so we'll be using lot of this type
function here in this code
we will set the height to
300 pixels minus 30 pixels
one property of cat function is that it
takes single expression as its parameter
the expression can be any simple
expression combining the following
operators
plus sub that is addition minus that is
subtraction multiplication and division
thank you
we'll set the background
to Hash zero zero zero
we'll set it to float left
and we'll specify the margin to 15
pixels
and we'll set the box size into border
box
overflow will be hidden
and Border radius
let's set it to 10 pixels
just save the file and let's go back to
the page to see how it currently looks
so you can see our boxes are in the
proper places we have the background
black with the proper margin between
them okay so we have the structure
let's code more
now we need the icon for that
will require a icon from the font
awesome CDN so we'll add the font or
some CDM to our page
so we'll search font awesome
CDN 4.7.0
we are using the older version because
it is more stable
so go to this font awesome
libraries
here select the version and copy the
link tag
go back to the page and add it here
delete this Integrity part
now
here inside this class box
add one div which will be named class
icon
and inside here we'll add the link of
the icon so search here
font or some icon 4.7
go to the first one
here you can search the any icon you
want let me search for
see
information so I'll go to the
information
and I'll copy this
go back to the code and add it here
now inside this I'll create another div
which will be for use for content
so we'll name it class content
and inside this I'll add one H3
info
and inside it
I'll add some
text uh copy this much from here
to there
and delete this whole part
and put it inside
so inside the P tag
add them
yeah
so let's go back to the file and see how
it looks right now
okay so you cannot see the icon here
because it is black let's try to change
the color here so that you can see the
icon
so let's set it to ff0
okay so you can see I have the icon in
place this is and this is the text that
we have added to this content box
now let's dial this content box first
set it back to zero zero zero
now
container dot box
dot icon
will set the position to Absolute
set the top
0
left to zero
and we'll set the width to 100 percent
we'll set the height also to 100 percent
background will be hash l0
and we'll set the transition
to 0.5 seconds
and we'll keep the Z index as 1 so that
the icon will be visible
okay
it refresh yeah you can see the icon
here
okay
now let's add the whole effect on that
so container Dot
box dot over
icon
we'll set that top to 20 pixels
and calculate the left to
50 minus 40 pixels
with 80 pixels
height keep it to 80 pixels as well
and let's set the Border radius
to 50 percent
okay
so now that we have repeat
so now that we have added the whole
effect let's save and go back to the
page
now let's design the icon so container
Dot
box dot icon
dot f a
okay
also to set the position to Absolute
top will be 50 percent
left 50 percent
transform let's translate it to
minus fifty percent
minus 50 percent
um if the font size to
80 pixels
transition 0.5 seconds
and we'll set the color to
save the file and let's go back to the
page
yeah so you can see our icon has now
bigger size and with the hover effect it
shrinks so text to be visible
okay
now we need to add the hover effect to
the icon so that the font size increases
for that we'll add container
box dot over
and we'll keep the font size too
40 pixels
okay
now it's time to design the content
inside the container box so we'll set
container
dot box
dot content
all the positions are absolute
will set the top 200 percent
so that when the icon shrinks the whole
text will be visible to the text box
we'll set the height
2 will calculate it
100 percent
minus 100 pixels
extra line Center
uh keep the padding to 20 pixels
for proper spacing
box sizing as border box
transition to 0 0.5 seconds
and will keep the opacity to zero
okay save the file and let's go back
yeah and you can see the icons are in
the center of the shrinking Circle
now let's add the hover effect
now when you set the opacity to one
another text
okay we are not
designed yet S3 and P so let's start
designing it
so container
dot box
dot content H3
in pixels
keep the padding to zero
color
accepted
and let's give the font size to 24
pixels
now you will see the text will be
visible Inside the Box
so refresh
yeah you can see this is the heading of
our this content box info
now similarly let's dial the paragraph
tag
so container
dot box
dot content
e
margin will be zero
padding will be also zero
and color will be FFF as usual
if
yup we are almost there
now we will Design these two boxes with
some spacing and effects over here
now
inside this
delete them we'll copy paste the above
code here
so copy from here leave class container
will change the icon classes here so for
this let's keep search as a r c h
instead of copying the class by going
back to the font C then we can directly
add the class search here it will know
the name of the class
and here we can add
location
so the class name for location is map
marker
save the file and let's go back
yeah now you can see
these things are here it's a good
content box when you hover over this box
the
this whole thing shrinks and you can see
the text visible
now add We'll add some Styles will
change the color and we'll add one
background here so that when this
shrinks the background color of the
black changes
okay
so we'll go back to our code
so to change the color of the box
will had a DOT container
dot box
and we'll use the nth child property the
nth child
one because the first box
dot icon
so we'll keep its background to
think
okay
and Dot container
box and child
1 x color will be when it shrinks let's
keep it to Orange
yeah
so save the file
go back
and refresh
okay so you can see we have the icons in
places and when you go
click on here set the hoverfx shrinks
this and this is the pink in color we
have the background orange with some
text here
you can see
smooth transitions
so this is all for the content boxes in
HTML you can use different icons here
using this font at awesome icon there
are several icons here you can use any
of them and just make sure that the
padding and the text are aligned in the
proper places
images that I have taken for example
purpose we have this video button and
you click on the radio buttons we can go
through our images one by one also the
images will change automatically after
sometimes as you can see
so let's see how you can create this in
a slider
so here in the desktop I have created
one file where I have the required
images
and SQL and CSS file
so first investment file let's add our
review buttons
slider
inside this
slice
inside this class right we'll add the
radio buttons so input
the input type will be radio
and let's give this name
radio button
and we'll tag them with ID radio one
so as you can see
potential so we'll add three radio
buttons here
so just copy paste this four times
here use the ID to Radio 2 reducing and
video four so we can distance between
the four radio buttons
so after the creative return we'll add
crowd images so we'll create another div
and limit class
slide first
inside I'll create an image tag
and special part of the image
in a similar we create a few div tags
for four images
so just we'll do certainly another term
with class name
slide
inside this image
2.jpg
foreign
buttons we have the images so let's just
go back to our file and see how it looks
so it will refresh
we'll see we have the four video buttons
here and some distorted images
so let's just fix this images in the CSS
so inside of CSS file
will add the body
and we'll set the margin to zero pixels
adding to zero
will set the height to say 100 vertical
height
will set the display to flex
will justify the content to Center
we'll set the Align items to Center
and we'll set the background to Black
so just
refresh this file
so it's time to fix these images
so just
set the slider width to
800 to 12.
there's an error we'll say this bit not
to reduce
at the height to 500 pixels
then at the border radius
to 10 pixels
and overflow will keep as hidden
for the slides part
we'll set the width to 500 percent
High to 500 pixels
and displayed to select
so let's change the file and see how it
looks on the page
so yeah you can see the images now in a
proper size you have to pick this video
button we have the background black
so let's do existence
so for the slide input
okay before starting with let's add
common HTML content here
foreign
navigation button
so after this
has another day
class name
navigation Auto let's see
and inside this navigation Auto will add
Dev
class
or to button one
we need the all button so we'll copy it
four times
this will be my button true
this will be button free and this will
be button 4.
thank you
outside this they will create another
manual navigation button so we'll name
this
navigation
make sure it's right now we
education
manual
and inside this
book we'll add our radio buttons which
will be manual
okay
the limit class manual button m e m e
we need the code button so we will copy
it four times
we change the label to Radio 2
radio 3 and radio 4.
so I think this will work enough so here
we have the navigation
okay we have a spelling mistake here
the class and navigation manual interest
across here
so let's recheck our code
it's a good plan to reset the code so
that you don't encounter any error so
okay we have a little class slider here
images
tags with the name slide
okay
we have created a navigation Auto
the code buttons and navigation manual
to the four buttons okay
so let's save the file and go back and
refresh it and see how it looks
okay
we have to add some CSS here
so inside the slides
we protect the display to learn
for the dot slide will vector
with to 20 percent
and we'll set the transition to two
seconds
foreign
[Music]
image
we'll set the bit to 800 pixels
and we'll set the height to State 500
pieces
okay
let's save the file and let's go back to
see how it looks right now
okay so you can see the images are
properly aligned here
we have to style our radio buttons for
here so let's go back to our CSS
navigation
so just add here comment manual line and
navigation
so that we will remember the code
so we'll add the first
class navigation manual
will set the position to Absolute
then set up it to 800 pixels
will not have a height here will set the
margin
so the margin top will be minus 40
pixels
and basically keep it as black
and the justify content
will be sent out
select group a and go back to the page
to see how it looks right now
okay the images are in the center you
can see
now we cannot see our radio buttons just
as now we have to add some color to it
so that the individuals will be visible
so go back to our CSS
we'll add the manual version
we'll set the Border
to create friends
solid and red
you can take any color you want
I will set the padding to 5 pixels
uh we'll set the Border radius to say
nine pixels
we set the cursor to point pointer so
that whenever buttons the consumer hook
as a pointer
and we'll set the transition to one
seconds
save
go back and refresh
so now you can see the buttons are here
not properly spaced but yeah
so let's add this spacing and everything
else
so we'll take the manual button
will set the margin
write proof particles
now it's time to add the whole effect so
for the manual
button
now Google will be
um save background
the color
blue
just save the file and go back and
refresh
yeah so you can see our manual buttons
are in place
nothing happens right now because we
don't have in JavaScript response to
this video button we'll add them in the
end
firstly design these buttons so this has
for the manual button
now we'll add one code which will be
used when we want to select the radio
button by default
so let's understand how this video
buttons work in this
files are identified which I'm usually
exclusive and the user has to evacuate
one choice in other words click on a
non-selected email button will erase any
of the button that is selected on the
list previously
movements
so we'll add hash video
dot check
so the sign that we have added here is
more sibling combinator
it combines two sequence as simple
collectors having a field parent and the
second must come immediately after the
first
so we'll add DOT first
and for this we set the margin left
to zero
okay so this will be radio 1.
the label that we added in our manual
buttons
WE Post such
buttons so we'll copy this four times
one two three and four
this will be my for radio button
and we'll set the margin left here to
minus 20 pixels
or redo button three we'll decided to
say
minus 40 pixels
for me to add decision
and for the last button we'll set it to
minus 15 pixels
so all those photos from the manual
navigation button now let's design for
automatic navigation button
so we open Dot navigation
we'll set the position to Absolute
then set the display to flat
will set the width
to 800 pixels
uh let's justify the content to the
center
and put the margin top
60 pixels
now it's
so I'll add the file to navigation or
Twitter
so on navigation okay
then
then set the Border
to same model that we have used here
it will say pixel solid red
make sure you keep this if it's a solid
and same in both the navigation Auto and
navigation manual because if you change
the color here you will see the two
manual buttons there so for just example
let's change this to Green
so when you see it and go back
and refresh
yeah
you can see the two button there is is
it green and this is red so if there are
two colors the root of buttons will
overlap will not feel good so we just
keep it here red
let the padding to find pictures
to nine pixels
and we'll set the transition to one
seconds
now same code AS here which are added
for checking of the video buttons
so we'll just copy this whole curve
and paste it here
we'll have to pick some thing will
so the class was navigation dot Auto
so we'll add here
navigation approve
Dot Auto button one
so we'll delete this group
um
background let's say
any color pink
copy this code Ctrl C
delete this whole thing Ctrl U and just
change the radio button there this will
be radio button
foreign
okay
second
and first so if it is ready all that now
is left is to add the JavaScript code to
this image title to function in
automatic manner
so now we'll go back to this HTML file
and below this big tag
we'll open once click tab
inside the script tag
we create one
variable name counter
we'll set it to one
open we create one function set interval
foreign
okay
so what we thought specifically does is
we have created one variable named
counter and it will check against the ID
that we have created a radio then the
radio button says shed and it encounters
the counter will be plus plus that order
will increase by one
so after the counter has reached to flow
so it will get back to the starting
point that is one so
the whole point of this code is to
make the images slide in in the blue so
that's same
and go back
now when you refresh
sometimes
specifically two seconds
now when the images became last page it
goes back to the first
you can also changes like eating here
manually
whenever we go through a website or fill
out a form we see that there are certain
ways of filling a form right sometimes
we use radio buttons to select one
option from a group of options we use
passwords emails check boxes and many
more such thing while going through a
form
the input element in HTML is responsible
for adding different input types to a
web page the type attribute within the
input element determines what the user
will input in that particular input area
so let's go through the syntax of input
element first and then we'll go through
the different input types we can get
from a user now the input element in
HTML specifies an input field for the
user to enter data so let's say if we
want the user to enter his username in
that case we'll need an input field
right so what we'll do is we'll write
here inside the form tag we have the
form tag already present here so we'll
write here first
let's say first name and now we are
going to use the input element the input
element in HTML is an empty element so
we don't need any closing tag for that
save the program and here you can see on
the browser that we have this input
field present we can write anything over
here inside this input field so you can
see we are able to write anything over
here
now let's create a small form and you
guys will be able to understand the
concept of type attribute in the input
element
we'll create a form wherein will include
different types of input areas for the
user so first of all we'll write here
first name and input so we already have
this written on a program we use the
label here as first name however we use
the label tag for this task but right
now I don't want you guys to get
confused so we'll keep it like this only
here we have used the label name as
first name so the type attribute will
hold the value as text over you anytime
we want the user to input values like
name or any sort of text value we use
the type attributes as text so what
we'll do is we'll move to our input
element and we'll write over here type
type is going to be text first fine save
the program and you'll see nothing
happening over here as of now you won't
find any difference and this is the
default value of the type attribute as
well so we can write anything over here
like we can write any text value or we
can write numbers here as well so it's
making no difference over here on the
browser now the difference we'll see
when we'll go through other input type
so let's move ahead and we'll now go
through the button type first
or we can say the submit button first so
what we'll do is we'll create a submit
button first fine so we'll write over
here we are going to use the brake tag
for two times and we are going to write
here input
type is going to be submit for a submit
button
and we'll write over here value is
submit fine now save the program and you
can see the submit button present over
here on the browser so this submit
button generally submits the form like
if you are writing anything over here
like we are writing any first name
submit it and you can see the page gets
refreshed and there's no other value now
because the submit button is on work and
it submits the form fine now similar to
a submit button there is one more input
type that also creates a button but the
task is a bit different the value of the
type attribute as reset will do some
important things for us for example if
we write here the same thing so we are
going to use the input tag again and
here we'll write type as reset and let's
give the value as
reset once again fine close the input
element and save the program so here you
can see we have this reset button
present over here now write something
over here like any value or any name
click on reset and you can see the value
of that particular field gets reset fine
now done with the buttons now the next
input type we are going to see is the
password
so passwords are confidential right so
we need something which can hide the
user's password HTML has an input type
as password so let's go through it what
we'll do is We'll add a label over here
like we'll write a password first to let
the user know what he or she needs to do
so then we'll write here input type as
password fine now save the program and
here you can see we have another input
box over here
so let's do one thing let's use the
brake tag here
to keep the phone neat and key so here
you can see we have password over here
if we try to write anything over here
you can see that particular text or
number whatever we are using in password
is encoded so we can write any name here
and here we have the password click on
submit and here you can see it says
check your password so there's an error
over here so you can see the password
Here is encoded and HTML provides us
with this feature moving ahead the email
input type this type of input is used
for emails it validates the email
address whenever the user clicks on the
submit button for example we'll write
here
image so we are going to create another
input field we'll use the input tag
for input element we will write here
type as
female fine save the program and here
you can see we have another input box
over here
we'll copy these break text from here
and we'll paste them save it and here
you can see it looks fine now now write
an email over here or just try to write
a single word so let's say we are
writing over here
will provide the first name is so we'll
write here Ram then we'll write here any
password fine
so click on submit and here you can see
it says please include and add the red
sign in the email address Ram is missing
it at that so we'll include at the rate
over here click on submit again and here
you can see please enter a part
following at delete
so it will not allow the user to move
ahead until the user enters a correct
email ID so let's say we are writing
over here at the red gmail.com
submit it and here you can see the form
gets submitted
fine we have been through some important
input still now all of them we discussed
till now are commonly used in every form
we create now we'll discuss radio
buttons so radio buttons allow the user
to choose a single option from a number
of options available for example what
we'll do is we'll go through the example
directly so we'll write over here let's
say
input
type is equals to radio and then we'll
write over here
value fine value is going to be let's
say HTML and here we'll write HTML
Okay so area we have our first radio
button so we'll write here once again
input type is equal to
radio so we have done a mistake over
here we'll write over here value again
value is going to be
CSS and we'll write
CSS here as well now save it and here
you can see we have two options HTML and
CSS let's do one thing let's include one
more over here so we'll write here input
type
is equals to read fine then we'll write
your value
and let's say value is going to be
JavaScript
and save it and here you can see we have
three radio buttons present over here
we are going to use the break tag here
as well and here you can see we have
three radio buttons HTML CSS and
JavaScript now if you guys remember we
already said that we can choose any one
option out of all the available options
right so we are not able to do it here
because of the name attribute so for
that we have to include the name
attribute here so let's say we are
writing over here name as language
for
each of them so let's write here name as
language save it now and now try to
click on these radio buttons and you can
see we are able to select only one out
of all the available options we have
fine so the name attribute plays a vital
role while using radio buttons in an
HTML form check boxes also do similar
tasks but we can select more than one
option at a time with checkboxes so what
we'll do is
we'll use check boxes as well so let's
say we are using the label tag over here
we will write here label and let's say
we are writing over here choose here
quick fine now we'll move ahead and
we'll write over here
we'll use the brake tag first and we'll
write over here let's see
input type is equal to check box and
then we have to write here name is let's
say
vehicle 1
and that's it so let's use the value
attribute as well so while you are going
to write your bike fine we will write
bike over here then we'll use
input
type is equals
to check box manual
again mention
name here so we'll write your name as
vehicle so let's do one thing we'll
write here vehicle again and we'll write
your value
car and we have to mention car here as
well
do it one more time we'll write your
type
type is going to be check box again and
name is going to be
vehicle and value is going to be let's
say
fine so we'll write scooter over here
and save it now so here you can see we
have three different options for check
boxes what we'll do is
we'll put the Break Tag over here
save it now and here you can see now we
have by car and scooter although the
name attribute in this case
holds the same value for all the three
check boxes it has vehicle for all of
them so but still we can choose you can
see more than one option at a time so
this is the difference between
check boxes and radio buttons in HTML
the next input type we are going to use
is the date type this type is mainly
used for data but but you can use it for
other specific dates as well it allows
the user to select a specific date along
with the month and you so what we have
to do is we have to write here
let's write it over here let's create an
input box for date of birth for of the
user so we'll write over here
input
type as date fine save it and here you
can see we have this date of birth input
box present over here we can choose date
from this calendar so we can use any
month or we can say any year as well so
let's say the date is
17 February 2016. we can choose the date
from this calendar over here so HTML
gives us this
feature of choosing date and if you want
to select time as so then we'll have to
write here date time look fine save it
and here you can see now we are able to
select date along with the time so you
can see we can choose time as well along
with the date
so here you can see the date is 5 7 20
22 which is 5th of July 2022 and the
time is 10 43 so it follows 24 hour
format in case of time now the next type
we are going to discuss is numbers this
input type describes a numeric input for
the user it does not allow the user to
input any value other than numbers
so what we'll do is we'll go through the
syntax directly we'll write it over here
after the break tag let's say we are
writing code number
and for this we are writing input
type is equals to number and that's it
save it and here you can see we have
this option of one number so let's make
it a bit cleaner and now we'll try to
write any text over here so you can see
we are not able to write any text now
we'll try to write numbers and here you
can see it allows us to put numbers
inside this particular input box
we are not able to print text over here
so this is why the input type as number
is used for in HTML the last input type
we'll discuss is the file type sometimes
we need to upload a file while filling
out a form like a CV or something in
HTML we can use the input type as file
for this task so what we'll do is
will take you through the Syntax for
this as well so we'll write over here
select
file and we'll write
input
type is equals to file fine save the
program and here you can see we have
this choose file option present here on
the browser we can use it to choose a
file from a system so this is how the
file attribute or you can say file input
type Works in HTML now apart from all
these input types we have discussed we
have some more input types present in
HTML like range week month and many more
we can't discuss all of them in a single
video but whenever we'll go through any
of them we'll definitely take a look at
each of the input types we use so HTML
is not only used for creating the
structure of a web page anymore but it
also provides interactivity to a web
page up to some extent so I hope you
guys will learn something from this HTML
tutorial so just like my previous
example this time I would like to also
introduce you the another very
interesting application which is called
navigation look when we talk about
adjustment based development so in HTML
based development navigation is very
important where you have called multiple
Pages attached to so that when you click
on this page or click on any hyperlink
it will take you to the new page now so
that you can move back and forth so this
navigation is very essential part of any
web development so that you can offer
the navigation so this simple
application of HTML we would like to
start from scratch so let's go and
create a new folder now and give the
name called navigation
and inside this navigation we want to
create some new pages so
here I'm going to create index
dot HTML
the CSS name will be app dot CSS and
along with this we would like to also
create some new folder inside this I'll
keep all the navigation files inside
this so I can save pages
inside the spaces let me have total
number of three pages with me one is
called about
dot HTML
then we create
contact
dot HTML
then we create one more that is called
services.html
dot HTML
so these three links we will create it
one by one but first let's start with
the index.htigo so what's there in my
index.html file so first thing I would
like to start with my same HTML syntax
here
well this is my basic construct
so I will start with my link Ariel from
here so that I can have my Starship with
me link audio equal to style sheet href
equal to app Dot see you soon go I have
not written anything but I just left it
as a blank
in my body tag I would start with the
navigation so HTML5 brought you some new
tags nodes call a nav tag which is once
again
won't change anything drastically in
your browser however they are called
semantex which will help you for the SEO
that stands for search engine
optimization so I'll start with my nav
inside my nap I will start with my div
I'll say navigation bar so but before
that I say
class equal to
heading
this is my Dev tag and inside my tip tag
I want to bring my heading so I say H4
and I said
navigation bar and after the div tag I
will start with my URL tag which is the
unordered list inside my
on audit list I can set a line that
stands for list items and I can offer
lot many links inside this so you will I
just offer the class
equal to
nav hyphen
and inside this is my Android tag I say
okay which is the anchor tag
so
a link href equal to
now here I offer
the name I say index
table and that's it and this will be by
default active so we say class equal to
active
a class equal to it active and HTTP
equal to index.html file and here we
offer oh
for home page I'll copy this line
and paste it for other three urls
so
here
the active won't be there instead we say
httf equal to
the location called pages
onto these pages so we say about
dot HTML and here we say about
okay copy this
paste it
and all of this about we always say
for SS dot HTML and here we say
services
insert this we offer
contact
okay and once the lab tag is over
I will offer the tip
tip Plus
equal to constitute the name body hyphen
text
and I just say H1 tag inside this
and this is the home page
that's it so that's my home page which
is ready with me
and along with this whichever the other
pages are also available
those pages I also want to use so first
of all let me check how this page looks
like it
well it looks like a pretty basic page
so all this page is ready what I will do
is here I copy the content
and paste it here and above and let's
see what's there in my above see few
things will change number one here
this app dots uses
well here you have to just use
dot dot
there's an approaches for me
so you have to offer some title too so
after this link Guardian
we offer
title the title I can say
okay
so rest everything is fine
so H4 navigation bar nablings here I
have to offer the links for my page HTML
page so when I talk about index.html
file
foreign okay it won't come so
index or external file so I won't say it
is an active anymore I just remove this
line
plus equal to Vector it's just an normal
hrf but about would be active in this
case so
eight
plus equal to
active instead of this
Services contact
because as usual saying what I would not
be having any
Pages anymore
because we are in the same location
that's why and here I say this is a
about this is about page
about page
so that's it
I'll go back and check
if it are fine
home is active right now about you can
see it is an about page right now about
page is just appeared as it is saying
contents are more or less looks like and
same that is why you are able to see
now just like that
I will just go back and copy the others
now here
have CSS navigation bar
active
it is in contacts or make contact as an
actor
so indextual file remain same this is
contact page
so
that's how it is and it will say about
my other properties which is my
Services let me copy it sorry
copy this contact
and here
I'll be activating my
service in this case so
class equal to active I remove it from
here
make it available here this is
service page navigation index pages
about active here or looks good heading
about over here I change
service
details are changed to
looks fine
see
okay
service contact about
so far about we need to check where we
need to go
so we have got pages
about dot HTML page is also there
so
all there so we would like to see how
the about page will be activated here so
index.html file also contains an about
so here
when I
refresh
well
we have a call
index.ht Page
about
where is that about page now
services
so like this it is happening for you
okay so that's how exactly my thing is
so we're all good
and uh
Services contact
well my page is now ready and going
forward we would like to beautify my
Pages by offering the CSS well let's get
started with our CSS file so in my CSS
file I will start with my
common properties
which is margin
I'm saying 0 pixel
followed by adding
I'm making a 0 pixel again
we want box sizing
thus I say border
hyphen box
okay well going forward this is my
standard settings for all different type
of properties now I want the other
properties to be getting introduced that
is called box body text
Dot
body
iPhone
text
insert is body text I said display
Flex
now what I see where the body text is
available I'm going to find text.html
file
t x is available here div plus so here
in my CSS file I can say body text
display Flex I say font family
for family I can give anything
God want
to save it
sensory
these two we are offering it later on
align items
anal item Center
followed by justify content
and making a center
then margin top
250 pixels
these are the properties out there
followed by
okay first let's check what is an effect
here
see it looks better now
if you would like to go into the nav I
already have the snap with me
no
display
reflects then justify content
[Music]
space around
followed by align item
align items I want to make Center
and then we want to say mid height
so we say when hyphen
okay so midnight we are giving 8ph
followed by background color
same color
and same font family we just copy this
form currently and make it available
here well let's check
there we go the nail bar looks awesome
but
I still feel the links needs to be
justified we want to make it even more
better but before that I offer the nav
links so here
I say
nav links so dot nav
hyphen lens
this Naval links will have display
Flex
display
s and then justify contact
that I want to make it space around
again
followed by width
so
with
so width would be 20 percent
perfect and now the nav link Li Dot
nav links
Li
this
Style
no
let's see how it is changing
there we go that it looks really nice so
nablings are ready and I want to make it
a heading heading
I want to make it more organized so
let's see about a heading
here I say dot
heading and inside this heading I say
color
which is white
followed by text
transform
text text transform uppercase
followed by letter spacing
this letter spacing will be 5 pixels
and followed by last font size
and third font size is just 20 pixel
that's it and let's see how it is
different see
here awesome so this navigation bar is
now looking great
and it is giving me all the basic
operation whichever we have expected now
this nav links whichever we have created
okay they are working fine but I just
want to make it even more beautiful
and how I can make it more beautiful to
make it I would like to go ahead with
the nav links again
Dot
nav links off type anchor tag
now I would like to activate my anchor
type by making it color
White
okay followed by text decoration
text decoration
and followed by letter spacing
let us pressing 3 pixels
and then font fit
confit Bolt
and font size
14 pixels
and padding
14 pixels
and 16 pixels
both options
that's it and followed by we want to use
the nav licks when I will hover it so
the color should change so we are saying
Dot
nav links and here with li
followed by a DOT
active when the anchor tag is active
then in that case I want to change the
backing color
to
lights light secret I can say
lights
so
we have this option called light C green
that's a writing that looks beautiful
and followed by same
I copy this
and this active so nav links I like DOT
active background color we are using but
if it is not active then in that case
what you will use
so I can just change the small thing
here
I've changed this color
uh now let me try to copy this first I
tell you about what I want
you copy this and paste it as usual here
what I see is when it is an active
okay when it is an active I will change
the color to
I think this spelling is wrong active it
should be
active background color I want to change
this to Green so for that we are just
using the color hash
there's a green mirror when it is an
active and when this is not active
so we can just say a colon
active which you've used now now Ali
colon active or we can say equal whole
equivalent
over
a colon over and here we say colon not
Dot
act that's it
let's see how it works
awesome this looks beautiful home home
is an active right now you say it is on
a home page I can see it is an about
page
it is service switch it is a contact now
you can see it looks even more in the
most basic definition a form is
something we use to take the user's data
for example if the user wants to
register on a website then they have to
give us their names email and some more
info about them a form takes input from
the user and then posts it into the
backend application for further
processing and other stuff like
validation and all the HTML form tag is
used to create a form
it's quite simple to create a form in
HTM we'll move to the programming part
directly and create a simple form to
start with so the first and foremost
part is that we need to use the form tag
to create a form so what we'll do is
we'll move to the body of our program
and we'll write here form so this is the
form tag in HTML save the program and
you can see here nothing happened on the
browser so this form Tech created an
area for a form it basically worked like
the Dev tag we used in the previous
videos
now to include data in a form we need
text areas or we can say input boxes in
our form
there are various form elements
available like text field text area
Fields drop down menus radio buttons
check Boxes Etc
so let's start using them in the form
here first of all we'll create a text
box for the user's name for that what we
have to do is we have to write here
inside the form tag so we'll write your
first name and then we have to write
here
input so input is another tag so we have
to write a input
and then we have to use the type address
so the type is going to be text for this
text box
and we'll write here
name name is going to be
first name
fine
now save this and you can see here we
have an input box for the first name
the same code we can use for the last
name as well what we have to do is we
have to copy it from here
we have to paste it here so we'll use
the BR tag before using it again now we
have to change first here with last we
will write here last
and in name as well we'll write
last fine
so we have this last name over here save
it and you can see we have first name
and last name we have two different text
boxes present over here we'll use the BR
tag one more time save it now and you
can see it clearly now right
so here we are done with the first text
box of us now this input tag over here
is used to create these text boxes and
the name refers to the text boxes name
fine another thing we can do here is we
can write here
placeholder and inside placeholder we
can write something let's say we are
writing over here first name and you can
see first name over here
it's permanent until we write something
inside the Box the placeholder value
will appear on the text box same thing
we can do here as well we have to write
here please holder
so we have placeholder for
last name as well save it now and you
can see the value of placeholder over
here the moment we start writing
something over here you can see the
placeholder value is not here anymore
fine
if getting your learning started is half
the battle what if you could do that for
free visit scale up by simply learn
click on the link in the description to
know more
yeah text input controls we can use
check boxes radio buttons we can use
select box controls and we can also use
file select boxes so we can use radio
buttons in our form for that what we
need to do is we need to change the type
in our phone so that's the only thing
that will change no matter what controls
we are using so what we have to do is we
have to write here
let's say we are using braid tag first
so we'll use two break tags over here in
order to make the whole web page clear
and easily understandable for you guys
so next thing we'll do is we'll write
here
gender so let's write here gender then
we'll use brick tag again and after this
we'll write
input
type is equals to radio and we can write
here name name is going to be let's
email and the value for this is going to
be me again fine we can use the value
attribute here as well so
we'll use it later now the next thing
we'll do is we'll write here
input again
we'll add another gender so let's say we
have type here is
radio again and then we have name as
female and we'll write here
thanks so save it now and you can see
two radio buttons over here we can check
them in and you can see we have radio
buttons working totally fine we can use
these values later on as well similarly
we can use check boxes as well in our
form we'll see how in the upcoming video
where we'll create something like a
login or a sign up form using HTML only
so there are three different types of
text inputs used on phones we can use
single line text input controls so this
control is used for items that require
only one line of user input such as
search boxes or names they are created
in HTML using the input tag we discuss
them till now so these all are the
example of single line text input
controls which we discussed till now the
next are password input control
this is also a single line text input
but it masks the character as soon as a
user enters it they are also created
using the HTML input tag so the syntax
goes like this we have to write here
after this so we'll use the BR text
again over here
and now we'll write here
input so before that let's write
password so this password is going to be
the user's password for our website for
login or maybe for sign in so this is
the password so we'll write a input type
is equals to password and then we'll
write here name as
password fine save it now and you can
see password written over here with a
text box fine
right inside here will get masked so if
we write anything over here you can see
it in the form of password it will get
masked as soon as we enter it so this is
done to make the password a secret
now we can also set the maximum length
of a password using the mix length
attribute so what we have to do is we
have to write here max length
and max length is going to be let's say
eight fine save the program and now if
we write something over here you can see
and now we are not able to use more than
eight characters inside this particular
text box right because we have defined
the max length as a and it will allow
only 8 characters inside the text box
fine the last one we have are multi-line
text input controls this is used when
the user is required to give details
that may be longer than a single
sentence
so multi-line input controls are created
using html text area tag the Syntax for
a multi-line input is simple we have to
write here after this so we'll use the
BR tag
again for two times and then we'll write
here let's see description fine so after
description we'll use
BR tag to make it more clear and then
we'll write here
text area so this is the tags and then
we have to Define rows and columns here
so rows are going to be 5 and we'll
write here calls so these two are the
attributes we'll write a 50 this
basically we are defining the area
acquired by this text area fine then
we'll write a name
and we'll write here description
then we'll write something over here so
let's say we'll write over here enter
description here
and that's it save the program and you
can see we have a text area present over
here it's bigger in size than the normal
text boxes we had earlier so what we can
do is we can remove it from here and we
can use the placeholder attribute inside
the text area tag to write such thing
fine
the last important thing in a form is
the submit button so this button is used
to submit the form data we can either
use the input tag or the button tag for
a submit button fine so let's use the
input tag for creating a button first
what we'll do is we'll write here after
this
we'll write here the
brake tag and then we'll write
input type is equals to button and then
we have
value is equals to
submit fine
save the program and you can see the
button over here on the browser so
here's the button
we can further make this pattern work
with the help of JavaScript but we are
creating the layout only for now so let
it be this way only the next method we
can use for creating a button is by
using the button tab so what we have to
do is we have to write here just use the
BR tag once and right here button so
this is the tag and right here the name
of
button fine so we'll write here submit
save the program and you can see here
another button fine so here's the button
you can see both the buttons are exactly
same no difference between the buttons
we can style this form according to our
new whenever we go through the login or
signup portal of any website we see that
on the login page we use credentials
like ID and password name sign up page
on the other hand refers to the form we
need to fill in order to be a part of
that particular website
so what we'll do is we'll create a login
page and a sign up page in today's video
and we'll see what we can learn from
this field
so without wasting any more time let's
move on to the programming part directly
we'll start with the login page first so
first of all here we are in the HTML
file we'll start using the form tag but
before that we are going to provide a
heading for this login page so what
we'll do is we'll move to the body Tab
and we'll write here H1 so H1 stands for
heading 1. I hope you guys already know
this particular element
so what we'll do is we'll write here
login form fine so we have written login
form over here save it and you can see
we have login form written on the browse
the next thing we are going to do is we
are going to style it a bit using the
style attribute we have been through it
already so we'll write a sign now inside
style what we'll do is we'll align this
text at the center of our web page so
we'll write here text
align and will text align it to the set
fine so here we are we are done with
text aligning save it now and you can
see it moving in the browser so it's in
the middle of the webpage now you can
see it over here clear the login form is
present at the center of a whole web
page fine
now the next thing we are going to do is
we are going to use the form tag over
here fine so we'll write here
form and this is a form tag so we are
going to create the form inside this
particular tag only now let's style this
so what we'll do is we'll write here
Style again the style attribute comes
into play so we are going to use the
Border attribute now we are going to
keep the Border 3 pixel thick solid in
nature and let's use this particular
color so we'll write a F1 F1 F1 so this
is white color basically so here you can
see it's not completely right off white
or a bit grayish we can say so here you
can see the form body so I hope this is
visible for you guys
so the next thing we are going to do is
we are going to use a container so what
we'll do for that we'll use the div tag
we'll style and then we'll move on first
so we'll write here diff
now inside div we are going to use the
style attribute again obviously so we
are going to provide padding over here
now we'll write here 25 picks so what is
padding you guys repeat so what is
padding you guys might be wondering
about it
padding provides the space between the
border and the content of an element
fine
so the space between the border of that
element and the content is known as
padding so padding is going to be 25
pixel for all the sites so padding is
basically four side from top right
bottom and left fine so we can provide
all the values or we can provide a
single value for all fine so here
padding is 25 pixel now we are going to
set background color for this and the
background color is going to be
let's say like fine save it now and here
you can see we have a container which
has a border of gray color and the
background color is
sky blue or we can say light blue fine
now the next thing we are going to do is
we are going to start creating a
form so here we are inside the div tag
so you can see we have the form tag
first and inside the form we have a
particular division
fine so what we'll do now is we are
going to create a login form so we'll
use the label tag so label text stands
for the label of any form so you will
see it over here so we'll write here
user name
and we'll put
column save it now and here you can see
we have username present inside the
container or we can say inside the form
fine
so let's put a space over here save it
now and now I guess it looks fine
the next thing we are going to do is we
are going to create a text box now so
for that we are going to use the input
text so we'll write a input
type is equals to text for this username
and then we'll write here
placeholder placeholder will write enter
username fine
now after this we are going to write
here name name is going to be let's say
username again
and then we'll write here let's say
require
D so required is another attribute we
have
so what will happen now is if we leave
this box empty and if we don't write
anything over here and if we try to
submit a login form then a pop-up will
appear which says credentials required
or something like that only so HTML
provides us with this feature so save it
now and here you can see we have a label
username and a text box which says enter
username fine similarly we'll create a
label for password and text box for
password fine so we'll write here
label again and we'll write here
password
save it now and here you can see we have
a label for password as well now what
we'll do is we'll write here
again we are going to use the input tag
so we'll write here input type is equals
to password
you guys are already aware of this type
and then we'll write you placeholder and
we'll write here
enter
password fine so we'll write a enter
password then we have the name for
password will write here
name is equals
to
password and then we'll write here a
required again fine
save it now and here you can see we have
another text box
now so let me make it a little
more
here for you guys so here we are done
with the username and the password the
next thing we need is the submit button
now fine button type is going to be
submit or we can use the input tag as
well as we did in the last video so
we'll write here
login fine so this is the button name
save it now and here you can see we have
the login Button as well now what we are
going to do is we are going to create a
check box or we can say a remember me
function fine so for that what we'll do
is
we are again going to use the input tag
for that so we'll write here input then
we'll write here type type is equals to
check box
and then we'll write here after this
check check there's a property again so
we'll write here
checked as checked so then we'll write
here
remember
fine save it now and here you can see we
have a check box and a remember me
option fine
the next thing we are going to do is we
are going to create another button the
cancel button fine so we'll write here
button button and type is going to be
button again then we'll write here
id id is going to be let's say
cancel button why we are using this ID
because we need this ID in the CSS part
we'll see it later then we'll write here
the name of button is cancel fine
save it now and here you can see we have
a cancel button as well now the next
thing we are going to do is we are going
to put some links over here so for that
we are going to use the anchor tag again
we'll write here a href href is going to
be let's say hash because we are going
to write here forgot password so we'll
write here
forgot password
or we can write here forget password
fine
save it now and here you can see we have
a link present over here now what we are
going to do is we are going to use a
break over here and then we'll add
another link for the sign up page fine
so we'll write here a href again
reference is going to be
sine n dot HTML so this is going to be
the sign in file or the HTML file for
the sign up page
then we'll write here
register fine
save it now and here you can see
register written over here on the
browser so we are already done with the
login form the next thing we are going
to do is we are going to use CSS for
that so we are almost done with the HTML
part for this login page all of you guys
are well aware of the style attribute
till now right this attribute is used to
change the style of any particular
element let me tell you guys another way
of using this style attribute in HTM we
can use all these styling properties
inside the style tag as well for that
what we need to do is we need to move to
the Head section of a HTML file and we
have to write here
type fine so here we are we are here
with the style tag so what we are going
to do is we are going to Styler HTML
document inside this style tag on
fine
what we'll do here is we'll write here
body first fine so what we are doing
here is we are styling the body tag the
whole body tag now fine so what we'll do
is we'll use the font family first so
we'll change the font family will write
here
okay we are going to use Gill synth we
are going to use this then we'll write
here the background color so we'll
change the background color of this
pitch will write a RGB the RGB values
are
we have to write it in
small letters the RGB values are 1 3
4 comma 1 3 2 comma 1 3 3 fine we are
done with it save it and here you can
see the change
so the RGB values are not working
because we have written RBG over here
instead of RGB save it now and here you
can see the background color is greener
fine so it looks nice
now the next thing we are going to do is
we are going to style the button so the
button tag we have used here you can see
it over here we have used the button tag
for cancel button and for submit button
fine or we can say for login button so
we are going to style both of them
at once so we'll write here button we'll
write here the tag name basically so
button is the tag name now we'll change
the background color of this button
which is going to be let's say hash 150
5 FM so guys I'm already aware of these
colors and you can do what we did in the
background color video or you can change
the background color according to you
you can use the color name you can use
the hex values or the RGB values
the next thing we are going to do is we
are going to provide here the width
width is going to be 100 of the whole
time fine then we'll write here color
color is going to change the font color
of this button so we'll write here RGB
again
and we are going to write here 2 4 8
comma 2 4 8 comma 2 4 8. 8 fine let's
see what it is so here you can see the
login and cancel button are changed now
so the font color is white the button
color is blue
and next thing we are going to do is
we are going to write here
padding padding again is going to be 15
pixels for all the sides then we'll
write here
margin fine so we'll write a margin
margin is going to be 10 pixel and
0px fine so what is margin guys margin
provides the space between the border
and the outer l
there's a difference between padding and
merge padding provides the space between
the border and the content of element so
here in this case this is the content
and this is the
Paddy fine margin on the other hand
refers to this space between this
element and the next element fine so
margin as 10 and 0 pixel means 10 pixel
from top and bottom and 0 pixel from
left and right fine
the next thing we are going to do here
is we are going to write here border
fine so border will Define as none
save it and you can see the buttons here
now the next thing or the last thing we
are going to write here is we are going
to change the cursor to point on taking
over these buttons you can see the
cursor changed now fine
the next thing we are going to do is we
are going to style the input
tags so we'll write here input
and we are going to style it so we'll
write it type is equals to
we have used a lot of
input tags right so we'll write it type
is equals to text and then again we are
going to write here input
then we'll write here type is equals to
password fine so we have two input tags
for
username and for password so we are
going to style them at once side by side
we are going to style them
so the next thing we are going to write
here is we are going to set the width as
100 percent
and then we'll write here margin again
so we'll write your margin as 8 pixels
and 0 pixels fine
save it now and here you can see the
login form is looking more and here you
can see the login form looks much better
now the next thing we are going to do
here is we are going to define the
padding as well padding is going to be
12 pixel and
20 bits fine
then we'll write a display display as
inline block and we have
border over here border is going to be 2
pixel
solid in nature and we are going to
define the RGB value again so RGB is
going to be one zero nine
for green we have
it and for blue we have
and for blue here we have let's say 240
fine save it now and here you can see
the borders over here
now what we are going to do is we are
going to remove pixel from here and here
you can see we have the
input boxes or we can say the text box
is working totally fine now what we are
going to do last is we are going to
write here
box size you can see these boxes going
out of area so we'll write your box
sizing as
border box save it now and here you can
see the login form is almost done fine
so let me close it once
now the next thing we are going to style
is the button tag again so we'll write
here button and then we'll write here a
property it totally depends upon us if
we are going to use these properties or
not so we have to remove from here we
have to write here hover and on hovering
the opacity will change so the opacity
will change to 0.7 now look it carefully
and here you can see and we take our
mask cursor over any button there is no
change right now save the program try to
take the mouse cursor again you can see
it's still not working as of now
you have to remove this and here you can
see now it's working totally fine when
taking the mouse cursor over any button
it hovers now the opacity will change
fine the last thing we have to do is we
have to style the cancel button
so we are going to use the ID over here
so here you can see in the HTML part of
cancel button
so we have used the ID as cancel button
over here so we are going to use this ID
to style this particular button fine
we'll write here inside this cancel
button
width width is going to be Auto then we
have
padding padding is going to be 10 pixel
and
18 pixel
for top bottom and for left right fine
then we have the margin as well
and margin is going to be
10 pixel for top button and 5 pixel for
Left Right save it now and here you can
see the login form is completely done
fine now that we are done with the
styling part let's check the final
output save the program and you can see
so here you can see on the browser we
have this basic login form it looks fine
right we can make it more attractive but
we need CSS for them with HTML we can do
this only so let's move ahead and we'll
now create the registration form or the
sign up page
so let's move ahead to another HTML file
so here we are in the HTML file so this
file is for sign up page here you can
see the title for sign up so we'll
remove this contact from here it's a
mistake save it now and now what we are
going to do is we are going to open it
with live server again
so here you can see this HTML file has
no output as of so let's create the sign
up form now if getting your learning
started is half the battle what if you
could do that for free visit scale up by
simply learn click on the link in the
description to know more
so what we'll do for
you for later on now moving to the body
part what we'll do is we'll style the
body first so we'll use the style
attribute now we are going to define the
font family here font family is going to
be this one again let's say we have used
this in the sign up form or we can say
the login form as the so the next thing
we are going to do is we are going to
change the background color for this
whole body now what we are
doing here is we'll write here RGB then
we'll Define the values as one three
four comma 1 3 2 comma one three three
the same one from the previous login
form save it now and here you can see
the change in the background color of
the whole body tag fine next up what
we'll do here is we are going to use the
H1 tag again
will style it as well so we'll write a
style we are going to align it to the
center we'll write a text align
and we'll write here text align at the
Center fine so here we are then we'll
write here
registration form
save it now and here you can see we have
registration form written and the center
of a web page fine next thing we have to
include a lot of text boxes and a lot of
labels in this particular registration
form because for login form we need only
two text boxes or two labels right the
username and the password but the sign
up form is different we need a lot of
information about the user so for that
we are going to use a lot of input tags
first thing we are going to do is we are
going to use
break over here then we'll use the form
tag
and that's it inside the form tag we are
going to change the style over here only
so we'll write a style
and we are going to use the board border
is going to be 3 pixel
solid in color and or we can say solid
in nature and
off white or gray in color fine so here
you can see the border on the browser
now what we are going to do next is we
are going to use the div tag again
so we'll write here div
here we have the div tag so let's style
this div tag over here only we are going
to use the style attribute for that we
are going to define the padding padding
is going to be 25 pixel for this as well
background color we are going to use
light blue okay save it now and here you
can see the container on the browser so
it's similar to the login one now what
we are going to do is we are going to
use label first so we will write here
label then we have the label as
first name
and save it you can see we have our
first level over over here
the next thing we need is the input area
or the text box for this first name so
we'll write a input
type is equals to text then we have
name name is going to be
first name then we have
sites or we can say the length so
we'll write here
max length max length let's define it as
15
and we are done with the first text box
use the break tag again over here and
that's it so we are done with first name
similarly we have to mention the middle
name last name is when so let's define
them here so we'll write a label again
this time we have the label for
middle name
and that's it save it and here you can
see we have middle name written over
here we'll copy this piece of code or we
can say the input tag from here
will change the name to
last name
and save here you can see we have
another text box present over here fine
so one thing we forgot to mention here
is the placeholder we can write here
placeholder
enter
first name fine save it now and here you
can see the placeholder on the browser
so we'll copy it from here we'll paste
it here we'll mention for last name or
for middle name as well save it now and
here you can see something is wrong
save it again
and there's something wrong fine
okay so there's a problem with the live
server so what we'll do is we'll open it
again with live server
and here you can see it's not working as
of now
okay the Break Tag we have
something wrong over here let me check
guys
okay we forgot to mention
this over here save it now and it's
still not working
with live server again and it's working
now fine
so it's working as of now we'll do the
same thing for
last name is so we'll copy this piece of
code from here we'll paste it here we'll
change middle last everywhere so we'll
write here enter last name over here
then we have name as last name
and we have to write here enter
last name or we can say last name over
here save it now and here you can see we
have another text box and another label
present over here for last name as well
now what we are going to do is we are
going to select
or we can say we are going to use
options or we have to mention them over
here so for that we'll write here
label so we are going to mention course
over here and for code we are going to
provide drop down menus so for that what
we need to do is we need to use the
select tag in HTML so inside the select
tag we have to provide options options
let's say the value of option is first
value is going to be course and then we
have to write here course it is going to
be a drop down list so we have to
mention a lot of options over here so
we'll write your option again
and then we'll write here
value value is going to be BCA
then we have to write here BCA save it
now and here you can see we have course
over here so here you can see till now
it has two values let's add some more
values over here for options or we can
say let's add some more options over
here we'll add let's say three four more
options we'll write here BBA instead of
BCA for this
then we have let's say
B Tech
and we'll change the value over here as
well
we'll write here btech then we have
MBA as well let's say
so we'll write here MBA
then finally we have let's say
mtech as well so we'll write here M Tech
save it now and here you can see if we
click on this code you can see we have
different options available we have BCA
BBA B Tech mbn amplifier so the select
tag or we can say the option tag and
select tag both are used for drop down
menu so here is a drop down menu we have
to put a colon over here save it now and
I'll guess it looks fine now
so
the next thing we need to do is we need
to use the radio buttons for gender fine
so what we are going to do is we are
going to use
The Break Tag
and then we'll write here
gender so gender is going to be the
label so we have to put it inside label
tag so we'll write here label
and we have to put gender inside fine
save it now and here you can see we have
gender present over here
now what we are going to do is we are
going to put a break again over here and
then we have to
use the input tag so we'll write a input
type is equals to
[Music]
radio
for radio buttons when then we have to
write a name name is going to be mail
and the first value is going to be
fine then we have to put the BR tag
again
then we'll copy it from here
we'll paste it here
for female
then we have to change the value here as
well
email we have to write here we have to
put a br tag
will copy it from here again and let me
close it once we'll copy it from here
we'll
paste it here
now we have to write here instead of
female
other fine
so we'll mention other over here as well
save it now and here you can see we have
three radio buttons over here for gender
we have male female and other fine now
next thing we have to include is we have
to include the phone number for phone
number we need two input boxes one for
the country code and another one for
phone fine so we need to write here and
we'll put another break over here then
after this break we need the label for
food fine so we'll write your phone
and after phone we have to write here
input
type is equals to text for phone number
then we'll write here
name name is going to be
country code
then we have to write here the value as
well value is going to be plus 9 1 this
is the country code of India then we'll
write here
max length max length is going to be 3
so that the user cannot write anything
inside here fine save it now and here
you can see we have phone as label and
we have a text box if we try to write
anything you can see we are not able to
write
so what we'll do next is we'll add
another input box or we can say the text
box for phone number so we'll copy it
from here
we'll paste it again we are going to use
the name as phone for phone number
the value is going to be
none so we'll remove value from here
and then what we'll do is we'll change
the max length to 10 degrees fine
save it now and here you can see we have
another text box over here so what we'll
do is
we'll change the type here so you can
see we are able to write
characters here as well what we'll do is
we'll change the type as number fine
save it now and now you will be able to
see that we are not able to write any
character over here but we are able to
write a number fine
so here is
the text box of phone number fine so we
are going to use
The Break Tag again so we'll write here
break
let's use it twice
and after this Break Tag what we need is
the address so we'll write here
label label is going to be address
so we have to write here address we have
to put a colon over here and after this
address we have to put the brake tag and
the text area so we are not going to use
this text box for this now we are going
to use the text area attribute so we'll
write a text area text area columns are
going to be 80 for this area and
roses fine fine
value is going to be
let's say address over here
and we are almost done so save it now
and here you can see on the browser we
have a text area for address
fine
so what we need to do next is we need
email we need password and retype
password we need three more options
right so let's start with email so what
we are going to do is we are going to
use break over here
twice so that it will be clear for you
guys to see now what we'll do is we'll
write here
inside label we'll write email
so we have the label as email then we'll
write here
input
type is equals to email then we have
ID as
email then we can write here
name as well name is going to be email
again so save it now and here you can
see we have a text box for email as well
now what we need to do is we need
another box for password so we are going
to use the brake tag twice
and now we are going to use the label
tag again label is going to be password
save it now and here you can see we have
label as password now we'll write a
input
type is going to be password then we
have ID is equals to pass in case we
need them in the CSS part that's why we
are using the idea attribute here name
is going to be pass again and that's it
fine so we have text box for password
now what we are going to do next is we
are going to use the brake tag again
next up we need to retype password
because this is a registration form the
user needs to retype the password he
choose fine so we'll write here
label label is going to be
re-enter password
and that's it we need an input box for
this as well so we are going to use this
one only so we'll copy it from here
we'll paste it here
and we are going to use the BR tag again
fine
save it now and here you can see we have
another text box for a re-enter password
fine
the next thing we need is the submit
button the last thing so we will write
here input
type is going to be button then we have
well value is going to be submit
so save it now and we are done with the
registration formation
so here you can see we have everything
we need in a registration form
so here we are done with the HTML part
only let's style this page a bit now
we'll move on to the Head section again
and we'll write here inside the
style attribute or we can say the style
tag basically
so we'll write here
we are going to use
input
input for type as
text so basically we can do one thing
we can remove it we can go back to HTML
and we have this input one over here
we'll copy it from here
we'll come back to sign up page and
we'll save it so here you can see it
looks fine so some of them are not
working obviously because here for email
we have
use the input as email so for that to
work what we need to do is we need to
write here again after a comma we need
to write here input then inside this
brackets we need to write here
type is equals to email and for one more
we need to write a input
type is equals to
number fine
save it now and here you can see these
two are also working the text area we
can also use over here
so what we can do is we can write here
text area only and it will work as well
so we need to change the Box sizing for
this address attribute or we can say for
the text area
so one thing we are going to do here is
we are going to write here
text area as well
let's see if it works you can see we
have written text area over here and it
works completely fine now fine so here
you can see we have both the pages now
if we move back to our login form you
can see this is a login form and this is
a registration
so it looks nice so what we can do is we
can go over here login form and we can
click on register and it will take us to
a registration form because these two
pages are linked together fine
so this is how we can create a HTML
login or sign up page using HTML and a
bit of CSS we can say I hope you guys
got it try doing it by yourself and let
us know what extra you did so without
further Ado let's get started with the
interview questions based on HTML it's
the first question
what is HTML HTML stands for hypertext
markup language and it is the language
of the internet it is a standard text
formatting language used for creating
and displaying pages on internet HTML
documents are made up of the elements
and tags that formatted properly and
display it on pages
so we have our next question now what
are HTML tags so the answer for this
question is HTML tags are used for
placing the elements in a proper and
appropriate format tax use the symbols
greater than and less than to set them
apart from the HTML content the HTML
tags need not to be closed always for
example in case of images the closing
tags are not required for an image tag
now followed by the second question we
have our third question what are HTML
attributes the attributes are the
properties that can be added to an HTML
tag that change the way the tag behaves
are displayed for example an image tag
an image stack has SRC attribute with
which you can use the source from which
you have to display the image from
now the attributes are added right after
the name of the HTML tag inside the
brackets the attributes can only be
added to opening or self-closing tags
but never in closing tax
now followed by third question we have
our next question what is Mark you in
HTML Mark U is used for scrolling text
on a web page it Scrolls the image or
text up down left or right automatically
to apply for a mark you you have to use
my Q tax now we have our first question
how do you separate a section of text in
HTML we separate a section of text in
HTML using the below tags which are the
Break Tag paragraph tag and block code
The Break Tag is used to separate a line
of text it breaks the current line and
shifts the flow of the text line to a
new line followed by that we have the
paragraph line the paragraph line is
used to write a paragraph of text and
third one the block code the block code
tag is used to define large quoted
sections now we have our sixth question
Define the types of lists in HTML so we
have the three types of list in HTML
which are the ordered list unordered
list and definition list so first we'll
discuss the audit list the ordered list
uses ol tag and displays elements in a
numbered format next we have the
unordered list the unordered list uses
UL tag and displays elements in a
bulleted format thirdly we have the
definition list the definition list uses
DL DT and DD tags and displays in the
form of definition like a dictionary
next we have our seventh question how do
you align list of elements in an HTML
file we can align the list elements in
an HTML file by using indents if you
indent each nested list and further than
the parent list then you can easily
align and determine the various lists
and the elements that it contains now we
have our eighth question differentiate
between ordered list and unordered list
so the answer for this question is an
unordered list uses UL tags and each
element of the list as written between
Li tags the items are displayed as
bullets rather than numbers now coming
into ordered list so for creating an
ordered list you'll be using ol tax and
each element inside the list as written
using Li tags the list items are
displayed using numbers rather than
bullet points now we have a sample on
the screen right now so the first three
elements are a set of unordered lists
which are represented using bullet tax
and the second set which is the coffee
tea and milk is an ordered list which is
represented using numbers
now moving ahead we have the ninth
question how do you display a table in
HTML web page so the table in HTML can
be created or displayed using the table
tag
so it also uses to manage the layout of
the page for example header section
navigation bar body content photo
section etc etc so given below are a
list of HTML tags used for displaying
table in an HTML web page so we have
table TR th etc etc table is used to
define a table TR is used to define a
row in a table t h for header TD for a
cell caption is used to define a caption
and we have the call group which is used
to specify a group of one or more
columns in a table for formatting next
we have call which is used with call
group element to specify column
properties for each column next we have
t body which is used to group The Body
content in a table next we have t head T
footer which are used for header content
and footer content respectively moving
forward we have our 10th question how do
you display the given table in an HTML
web page so the answer for this question
is written on the right side part of my
screen this is the sample code which you
can use to represent or display a table
which is given in this particular format
over here now followed by this we have
our 11th question how do we insert a
comment in HTML so the answer for this
question is we can insert a comment in
HTML by beginning with lesser than sign
and ending with a greater than sign for
example as shown in the right side part
of my screen which is hello world now
moving ahead we have our 12th question
how do you insert a copyright symbol in
HTML so you can insert a copyright
symbol by using Ampersand copy semicolon
or Ampersand hashtag 169 semicolon in an
HTML file now moving ahead we have our
13th question so what is a white space
in HTML so the answer for this question
is an empty sequence of space characters
is called as white space in HTML this
white space is considered as a single
space character in HTML white space
helps the browser to merge multiple
spaces into one single space and so
taking care of indentation becomes
easier
white space helps in better organizing
the content and tags making them
readable and easy to understand with
this let's move into the 14th question
how do you create links in different
sections within the same HTML web page
so the answer is Anchor text we can use
anchor tag along with referencing
through the use of hashtag symbol to
create several links to different
sections within the same web page moving
ahead we have the 15th question how do
you create a hyperlink in HTML so the
answer is we can use anchor tag again
here the same thing we can use anchor
tag to create a hyperlink within the
HTML that links to another web page the
hyperlink can be added to images too now
moving ahead into our 16th question if
getting your learning started is half
the battle what if you could do that for
free visit scale up by simply learn
click on the link in the description to
know more
an image map so the answer for this
Quest
ion kinds of web pages using this single
image it can be used for defining spaces
in the images that are made part of the
image mapping process
moving ahead we have our 17th question
why do we use stylesheet in HTML our
style sheet helps in creating a
well-defined template for HTML web page
that is both consistent as well as
portable a single style sheet template
can be linked to various web pages which
makes it easier to maintain and change
the look of the website now the 18th
question what is semantic in HTML
so the answer for this question is
semantic HTML is a coding style it is
the use of HTML markup to reinforce the
semantics or the meaning of the content
for example the semantic HTML B tag is
not used for bold statement as well as
itac which is not used for italic
instead we use strong and EM text now
followed by the 18 question we have our
19th question what is SVG in HTML so the
HTML SVG is used to describe the vector
or raster Graphics SVG images and their
behaviors are defined in XML text sheets
it is mostly used for Vector type
diagrams like pie charts two dimensional
graphs in an x y coordinate system now
moving ahead we have our 28th question
what would happen if there is no text
between the HTML tags so the answer for
this question is really simple there
would be nothing to format if there is
no text present in between the tags
therefore nothing will appear on the
screen some tags such as the tax without
closing tag like image tag do not
require any text between them now
followed by the 28th question we have
our next question how do you create
nested web pages in an HTML so nested
web pages basically mean a web page
within a web page we can create nested
web pages in HTML using the built-in
iframe tag the HTML live frame tag
defines an inline frame for example
which is displayed on the right side
part of my screen you can see the iframe
source
which redirects the user to Simply
learns official webpage
now followed by that we have our 20
second question how do you add buttons
in HTML so we can use the built-in
button tag in HTML to add buttons to the
HTML web page so on the right hand part
of my screen you can see the
implementation of button to an HTML web
page now followed by 20 second question
we have our 23rd question what are the
different types of headings in HTML so
the answer for this question is there
are basically six types of heading tags
in HTML which are defined with H1 to H6
tags
each type of the heading tag displays
different text size from another where
H1 is being the largest and H6 is being
the smallest so on the right hand part
of my screen you can see the
implementation of heading tags from H1
to H6 now the
output for this particular code segment
is the H1 H2 s3h4 H5 H6 so you can see
that H1 is being the biggest one and H6
is being the smallest one now moving
ahead into our 24th question how do you
insert an image in the HTML web page so
the answer for this question is you can
insert an image in the HTML web page by
using the following code which is
displayed on the right side part of my
screen you can see we have a image
source is equals to tulip.jpeg which is
used for inserting an image into your
HTML web page
now our 25th question what is the alt
attribute in HTML now the answer for
this question is the alt attribute is
used for displaying the text and place
of an image whenever the image cannot be
loaded due to any technical issue so
basically when you have four internet
connection and you are trying to load an
image you can see some sort of text in
place of an image so that particular
text is nothing but the alt attribute
now moving ahead we have our 26th
question how are hyperlinks inserted in
the HTML web page you can insert a
hyperlink in the HTML web page by using
the following code which is present on
the right side part of my screen you can
use the ank attack along with h
reference and inside that particular tag
you can use the URL to which you want
your users to redirect to now followed
by this we have our 27th question how do
you add color to the text in HTML so the
answer for this question is you can add
color to the text by using the following
code which is present on the right side
part of my screen where you can add a
red color and blue color green color to
this particular paragraph and headings
now followed by 27th question we have
our 28th question how do you add CSS
styling in HTML so there are three
particular ways to add CSS to your HTML
there are inline CSS external style
sheet and internal style sheet we'll
discuss each of these methods in a bit
more detail first we have the inline CSS
so it is used when less amount of
styling is needed or in cases where only
a single element has to be styled to use
inline Styles add the style attribute in
the relevant tag now moving ahead we
have the external style sheet this is
used when the style is applied to many
elements or HTML pages each page must
link to the style sheet using the link
tag
now we have the last one which is the
internal style sheet it is used when a
single HTML document has a unique style
and several elements need to be styled
to follow the format internal stylesheet
is added in the head section of the HTML
Page by style tag now followed by this
we have our 29th question what hierarchy
do the style sheets follow
the answer for this question is if a
single selector includes three different
style definitions the definition that is
closest to the actual tag takes
precedence inline style takes priority
over embedded style sheets which takes
priority over external style sheets now
our last question for the session today
how do you add JavaScript to an HTML web
page so the answer for this question is
we basically have three methods to add a
JavaScript to our HTML webpage they are
inline script block and external
Javascript file first we'll discuss the
inline you can add JavaScript to your
HTML elements directly whenever a
certain event occurs JavaScript code can
be added using attributes of the HTML
tags that supported now the next one
that is the script log you can define a
script block anywhere inside the HTML
code which will get executed as soon as
the browser reaches to that part of the
document this is why script locks are
usually added at the end part of the
HTML documents now the last one that is
the external Javascript file you can
also add or import the JavaScript code
from a separate file and keep your HTML
code clutter free this is especially
useful if there is a large amount of
scripting added to the HTML web page
this mini project will help you to
understand how we can align are content
to display to my end user so lot many
things are there we have Accord CSS in
place we have a HTML in place and using
some css3 based effects using some HTML5
based effects we will be creating our
mini website having some single HTML
page and a CSS and a lot of images will
help you to understand in case if I want
to develop a website how to Kickstart
them
okay so let's get started so this is my
folder I've created called Web Pro and
in a similar folder I'll be creating
some of the files so my first file will
be called styles
dot CSS so in this files.cs first of all
I need to import some of the fonts which
I will be using it throughout my
development so I'm saying to add the
rate
import URL and here I'll be offering the
location by saying
HTTP is
sounds
Dot
Google
apis
.com
slash CSS
okay question mark we have to use family
equal to here we can use Allura
and with using this pipe symbol we are
using Jos fill
chose field plus cents
so that is the URL for me in case if you
want to verify whether this URL does
exist or not so what you can do you can
just copy this
on go to your browser and try to place
this and check if it does exist yes it
does exist that means this URLs are
available to us so this is a URL which
I'll be using it for my development
after that I'll be using this is as
trick and providing some of the core
features like a margin
colon 0
followed by other details okay like I'm
saying margin column 0 n
padding once again zero followed by box
Rising
this way I think photo box
followed by outline
okay
[Music]
okay and post this will be offering this
style
here we are also seeing none
after that text decoration
text decoration once again none
after that on February
so we are using this
this option which you think called
josphere
okay sorry this double which you have
used
comma
we're using one more called sense
iPhone 7. so this would be a first set
of the style which will be Global to all
I'll be using this
well earlier we have given the common
style to all now I'll be giving a start
to my paragraphs so
here in my paragraph we are trying to
save margin
hyphen
Bottom I want to give all 15 pixels
because I want to develop all this
rights well in advance before I proceed
ahead we are saying font Huracan size
yeah font iPhone size that we want to
give it called 14 pixels
followed by line height
line height I'll give 20 pixels
after that color
because it can give anything
okay so there's one very common color
called light blue
for that there's only value called five
f
okay 80
and again eight e we can see that is
called a kind of light green color which
is coming up now
okay which is used now a part of this
paragraph will be using H1 title
okay actual title and in this H1 title
we are saying margin bottom
margin bottom we are saying 20 pixels
after that color
Orange
okay uh record semicolon here
along with this phone family
this font frame will be giving Allura
okay along with this we also want to
give curacy
Curacao okay also text
transform
this text Transformer I want to use
uppercase
along with this font size
this font size I would like to give 38
pixels
followed by font size
yeah so this font size I want to give is
called 38 pixels
or font size we've already given words
basic we have to give
this word spacing would even 25 pixels
followed by letter spacing
relatively simple between five pixels
so these are the details we have given
for the
H1 title okay so now we'll be talking
about our buttons which are the latency
we have to go or provide our methods so
we are saying once again dot BTN okay
space a means under my button tag a what
I want so I say
width
180 pixels
also can
yeah alright 180 pixels we're giving
height
25 pixels
followed by line height
line height we're giving 35 pixels
followed by border
this bottle will be 2 pixels
solid
black
okay after that color
we want to give it I would say red would
be sufficient enough
followed by display
I want to give it is called block
followed by margin
margin I'm going to give 25 pixels
Auto
and zero
followed by text editing
okay
Center
so this is for btna which we have given
along with this btna there are some
other properties are also available I
can Dot main or the score
container here we would like to provide
position
okay
colon
relative
okay after this position we would like
to also provide the property for navbar
so we are saying never
bar we are providing this width
okay this width will be a hundred
percent
okay this will be a hundred percent and
also we provide height
this height will be 65 pixels
okay provided by position
we are providing absolute
after that using display
display we are providing Flex
after that we are saying justify content
justify content we are seeing space
around
after that
we are saying align items
this we are giving is Center
okay along with this we are giving this
logo
of type A
so inside this logo we are saying font
family
this fall firmly we are once again using
the same
the one which you have used earlier
you remember belura and curaca let me
we can use this thing whatever we have
used it earlier so same condition you
can use it here so we remember earlier
what we have used in my previous program
okay font family so the same font family
I would like to use it here also
okay so logo a but let me check
somewhere down the line
Port weight
phone firmly so let me copy the same
at least here right now okay so we have
a god Paul's family with me which we
have taken it right now to my existing
logo a along with I want to use all
font size
we would like to use 22 pixels
also color
and as usual I would like to use right
okay so that is for logo on which we
have basically applied this a part of
this we would like to also use for
navbar
Network underscore
item
space use
and here we would like to provide margin
0
and padding
against zero
followed by line Style
list style sorry
list
style here we're saying none see that is
the benefit of having this Visual Studio
code because sometimes when you are
going wrong it immediately gives you the
idea of like saying like hey you're
going somewhere around that's what the
suggestions were not given to us so till
here we've added furthermore we'll be
adding few more Styles into my code well
you will be have seen now followed by
same
dot level okay underscore
items followed by valuable which we have
it and along with this we would like to
go ahead with this list items also and
in this list items we need few details
first I'll talk about code float so
float left for sure then we talk about
color width
width will be 100 pixels
and now we talk about color height
height will be 40 pixels
well
float width height we have talked about
now we talk about called background
color
background color we can save Light
Element
s that looks nice
and opacity
opacity we can just give call 0.8
followed by line height
line height I can give call 40 pixels
okay along with this we also want
texture line once again Center
okay this is for these items now under
the same name but you may have some
other properties also
okay this is for never Uli and we can
also have the same property
copy
but along with this Ally I can also have
this anchor tag we can select multiple
arguments together
so here I would like to offer text
transform
you see this text transform
uppercase followed by color
this color we are saying black
and we're talking about called text
decoration
text decoration we want nothing
along with this I want display
and as usual it will be a block type
okay that was Li and within this anchor
tag I also can have a hover let me copy
the same
and with this anchor I can have the
property name called what
Google
so what property you are expecting for
this so here in my hover property I can
say background color
and I can use
tomato
okay well after this in the same navbar
items I also want to have after the
anchor tag what should happen so this
conditions I want to utilize because I
want to offer some of the animations
Behavior right over there so what
animations I would like to go ahead that
I need to offer under this navigation
items I like so I just copy this
paste it below but this over which we
are talking about we would like to
change from
to after
okay
after so I'm removing this background
color with this because background color
can be changed to something else so I
can change to White
invite well let me have few more
properties to be get added first thing
we are trying to SQL position
will be absolute
foreign
from left side
left I want to give 50 percent base
after this from bottle
I'm saying 0.
okay now I want to talk about called
transform
you remember to the property available
in CSS and here we are saying
Translate
X and inside this translate X I say
minus 50 percent
okay and here we are saying after that
scale
X
okay and here we're providing what zero
so that's what the condition we want to
provide it for the transform
and the next thing will be transform
origin
transform origin if I say fifty percent
and again fifty percent
after this we would like to talk about
width
width will be hundred percent
okay and we also want this height
height will be 2 pixels
okay with hundred percent High 2 pixels
after that we talk about transition
in this transition we can talk about
code transform
okay transform to 50 minutes
okay so these are so far the details
which are available with us which I
would like to use it in my code
okay that is for after of this anchor
tag so when we talk about hover you
further want to change the behavior over
there so in this case I would like to
use the same
condition I just copy that
and here when you say colon
so you can see
Li
space a colon over colon after
so what conditions you want to use it
here so
transformed okay so here
translate X
okay so here you say minus
50 percent
scale X
1.0
followed by we would like to use again
Dot
navbar
okay underscore item
okay you will followed by Li followed by
once again UL
once again LA and here in this case we
want to offer display none
display
Okay so
that's okay and one more conditions I
would like to take it here is
here when I say UL Li colon hover so I
can say l i
colon
over
UL align so we will say display
block
that's a condition
okay so so far we have written this much
of CSS we would like to go ahead and try
to implement some of the HTML behavior
and be back to our CSS to make this
possible
okay everyone so we have developed a lot
about CSS it's time for us to move
towards our next
UI that is called the HTML part okay so
here
I've already kept it just for the kind
information I've just downloaded few of
the images
okay from the internet just to utilize
into my application
I'm going to create
the another
file and give the name called index.html
okay this index.html file let me have
this template with me okay so I have a
good template with me now here uh we
want to use some of the
awesome CSS styles for of my usual
development So within my head tag I
would like to use this link
now I'm gonna give the location so this
CSS anyways is there that is called
style we want to say called styles.css
and one more style I would like to use
in my code
but the location will be somewhere else
I'm saying
https cdngs
Dot
cloudflare
dot com slash rejects slash Libs
slash font
iPhone
awesome okay that is a well-known style
sheet we are giving the version called
5.15.1 slash
CSS slash
Alt
sorry on dot Min dot CSS so that is the
location actually
okay now I want to just check whether
this location does exist or not I'll
just copy this
paste it in my browser to verify
well yes this style does exist so we
would like to go ahead and continue
well I would like to give some title in
case if I want so it is a call document
I can just get the link or
foreign
website development
coming to my body tag here I just want
to give a div
class equal to
let's give the name called main
underscore
container okay and also we want to give
ID
equal to
oh that is a Dev type for that okay now
along with this I want to give some
other type of Dev tags too where I want
to use it now here within this Dev tag I
want to give another div tag where I
want to provide a number so
equal to never
okay and within this number I want to
use another div tag which says
class equal to
logo
okay within this div tag we want to
provide the HF
okay a href equal to
here we want to provide this hash
okay
and this will be provided to
home see this is we have got div class
we have a called div class equal to logo
and under this we are providing this
hashtag and using
simply learn
Solutions
okay that is the first anchor tag the
drip tag is getting closed and we would
like to start
another div tag and in this div tag we
would like to say class equal to
in live bar underscore
items
okay within this div type we would like
to use this you will and within this URL
I would like to use this array okay and
in this La uh we would like to bring
some
ahref equal to hash
that is the link which I need to provide
okay so in this anchor tag we want to
provide a location called home here this
is the first list item which is there
like this I can provide some other list
items too like I didn't talk about call
about using hash
about and here we say
about you so this anchor tag is getting
close
okay and here before I close this list
item here we would like to take another
URL tag
okay in this dual tag we would like to
paste this list item again and here with
this hash we can just give the name call
something whichever you want to give it
again
[Music]
it
I'm like and
20
so after that UL is also getting closed
Li is also getting closed here
okay after this we can provide few more
Ally tags here
okay so href equal to here we would like
to provide a real URL remove the hashtag
and say
https
simply one.com slash
corporate python
training okay and here we'll be giving
the option called services
This falls into the category of what
services like this we would like to
provide one more anchor tag for contact
us
let's see
contact
one more vocal our team
okay and here we say
power t
okay let me go back to my index.html
file and check the status
well it looks pretty nice now here we
have got simply learn solution with us
and right hand side you can see now here
in about you see how the things are
working for me this links are coming up
automatically it came because here if
you remember in my code
when I was saying this about
okay this was a part of our current code
and due to that it is now making it
possible for us and that is possible
because here in y style.css if you
remember we were using this a kind of
neighbor UL Li
okay so the mode I try to hover
okay so this was giving me the complete
details and due to that I was in
position to get all the details so looks
pretty nice
okay so going forward what I would like
to do is within my program as I could
see in my index.html file we have
provided this tag so UL is getting close
this div is getting close this dip is
also getting closed
okay
now here we would like to start another
table
we say Dev class equal to Banner image
minor underscore
image okay now within this tip I would
like to use one more div dive with
intensitive we say
class equal to
Banner underscore
contact
okay Banner underscore contract now
within this div class we would like to
use this H1
here we can say
welcome to
welcome to Simply learn okay after this
breakdag as you know that is a for break
now
so this is fan tag we can say
words
okay
words
number one boot camp
okay here the instrument deck is getting
closed after that the paragraph tag
within this paragraph We Can Say
get certified
get
ahead
this value
after this the Dev tag is getting closed
the second tip tag is also getting close
let me check
okay so that we need to organize it
uh in a better way so but initially we
have a god welcome to Simply learn words
number one boot camp thumb
how my look and feel is really gonna
help because this Banner part I want to
organize it because I do not have a CSS
for this
clear so certainly I need a CSS to
organize this particular Banner
getting hit because when we talk about
code Banner content so I need to tell
where it needs to go because I also
would have some Banner image also too so
I'll go back to my CSS now and in my
style CSS here let me say Banner content
Banner underscore
content
and here we can save
text align
enter and say color
you can say
white smoke
okay and also within this Banner content
we want to use the H1 tag
within this H1 tag we have to just say
text transform
case
and line height
line height 38 pixels
okay and
margin bottom
this margin bottom we want to use 15
pixels
okay so that's when we have it let me
close this
sorry
and here we want to use one more
property called Banner content
with H1 and the spine tag so that I can
change the color so here
Banner content
as well we also want to use
pattern tag within this I want to say
color and you can just say
tomato and let's check does it affect my
application yes exactly it does affect
now you can see it is somewhere coming
down the line like this
okay so I can further change it
to my application
like if I talk about about it and all so
this I can change it for sure because if
I have some images also those images I
also want to change towards my
application but it is just a simple part
we are talking about call Banner
and we have also have to take some
images too for this better image
so let's go back and talk about our
index.html file and see what some of the
balance I want to utilize it here
okay now when we talk about get ahead I
certainly need some of the banner image
too but Banner image is not available so
let me go back and try to use some
Banner image whichever we have to Define
under my CSS okay so here in my style
CSS let me go here and say dot
better underscore
image
in this Banner image we have to say
background URL
background colon or YouTube State URL
and in this URL we have to use this
image called images
slash P4
dot jpg
that will be my image and also we would
like to use one very common option that
is called No repeat so that it should
not repeat it and I want to fix it to
the top
and in a center
okay now let's check
perfect it is coming up but it is not
looking as good as it looks like it so
we want to use few more important things
think this background size
background size
cover and also want to use width
width I want to use hundred percent
and height
we want to use it called 600 percent
okay display
we want to use it Flex
and justify content
we want to use it called Center
and align items
Center let's check this out
okay now you can see it looks pretty
better compared to the previous version
whatever we have written it
but this image needs to be look even
more better
okay the content needs to be more
awesome but anyways that is the first
thing which we've written after that we
have to write an About Us and other
areas but that is initially which I
would like to make it even more better
and more look
okay
okay so we have seen the value still
call option called get certified get
ahead the div tag is getting close and I
want to use another
you do and insert this div we want to
say class equal to about
okay and uh
ID equal to about
okay
and within this div tag I want to use
this H1 tag with the search one tag I
say
class equal to
title okay here I want to say
about us
ual tag is closed after that I want to
Define this paragraph and want to give
some details about a Sim dealer okay
like
and talk about simply learn
words number one
training okay we can just uh
provide you know some details training
providers
that's it so we can write it that much
about in paragraph tag and we can use
those table again
look at this step we say to
plus equal to
bdn and say
a
href equal to
and in this exercise we would like to
see it
colon
simply learn
dot com okay slash
resources and here we can just give the
option name call
hello
more
to this anchor tag the div tag is
getting close later on
okay and now just like in there we have
provided here we can also offer the
details with regards to your services so
I can just copy the same
and provide about the services we can
say
Services ID equal to
services and you can provide anything
whichever you would like to provide
title the same about us we can say our
services
our services
so we can give any details if you want
okay paragraph
now here after this paragraph using div
class equal to
div
underscore services
and we may not have any hrf right over
here so we're removing this hrf tag
okay div class equal to diff or signage
paragraph
d i
developed inter Services here you want
to use another div tag and in this Dev
tag we want to say
equal to
enter underscore
Services underscore
item
we have to basically provide and within
this I have to use this option called
IMG SRC equal to now you have to provide
a location so I'm saying
under this images folder we have a call
services
one
dot jpg alt equal to in case of the
service is not available you can just
say
service underscore image
okay within this once this is close you
would like to use a S3 tag now
and in this H3 tag I just say
plus equal to
sub underscore
title and here we give the title name
called
web development let me go back and check
yeah so I can see this option called
about us is coming up learn more if I
talk about learn more you see I'm taking
you to the website of this simply done
resources which are available to us so
this link is working perfectly fine
and uh I can see here called our
services
it is a thing well going back so we have
a call
this our services
so alt equal to
Services underscore image SD class equal
to subtitle web development and uh
that's it
so the div tag is getting closed here
and I may choose to talk to words Dev
service item so let me have
another div tag here and in this div tag
we saved
class equal to
div underscore
Services underscore item
if underscore Services underscore item
okay now within this Dev tag
okay so what you want to offer now
I want to offer some again certain
images
so what those images will be let me try
to copy this
and the S3 Tag 2 let me copy this again
so this one I'm giving call service to
service underscore images server
underscore title rather than using web
development we can say app development
okay
so this Dev tag I will copy it again
which is getting closed and try to use
one more
service underscore I10 again images I'll
say
service 3 instead service image and here
I can say online certification
online certification
okay
so like this
all the three div tags are getting close
now and after that we will start
meanwhile let me check
so these image sizes are pretty big so I
just want to make them small but
initially they are okay
okay you can see we have our services
Okay so
you can see like web development
so image sizes are pretty big which we
can make them small to cover up the way
they are supposed to but this way we'll
be doing a little later on let's go
ahead and talk about the complete HTML
portion which we want to complete it now
okay so that online certification we
have taken so also the three div tags
are getting closed now here onwards we
want to start with another tip
of it with this tip we want to say class
equal to
equal to we want to use contractors
you want to say contact us and here
ID equal to
contractors
let me try to wrap it with this single
quotes
and here we will use this H1 tag within
this H1 tag we say
class equal to
title here and here I say contact us
contact us okay that is for the Post H1
tag we are using it now after that let's
start with another Dev tag with this div
we want to use class
equal to
form
underscore
wrapper
okay div class equal to what form
underscore what wrapper
div again
okay
class equal to
form underscore what input and here we
say
the input tag
so this input have equal to what a
checkbox for me so I would like to say
text instead input available to what
text and just say remove the name and ID
and say
please hold it equal to
email okay so this div tag is getting
closed after that I can also use
foreign
so for
I would say subject as well as for
message if I copy this
form input so once again placeholder
subject
and once again placeholder equal to what
three options we are using it right now
okay div
after this once it is over we would like
to use another div tag
and do
class equal to
BTN
and within this I want to use
some anchor title
a href equal to hash
it up equal to what hash
and want to use submit
okay and that's it
now
you can see we have got these three
properties are coming up at the end
but certainly we can go back and try to
fix those images which are there behind
the scene
okay using what the style
so first important thing is we have got
this images with us
what those images are if we just check
here you have a call diff service item
okay we have a call what Dev service
item so that we want to change it but
before that I will go back to my style
and after this H1 span we want to use
for thought
about
okay dot
service may press enter
service
or I can say services
here we talk about Dot
contact us
we also talk about dot dot
our team
okay
so these four properties we are going to
use it by saying
texture line
Center and
padding five percent
10 percent
okay now we talk about services so we're
saying Dot
services with the services we can say
background
White
smoke
now you would like to provide the div
Services where we have this options with
us we say dot div underscore
services
here
margin top
25 pixels
from margin top ESC after that display
your selecting is called type Flex also
justify contains
of type space between
for Dev Services now in this div
Services we may get many different type
of options
okay this is the first step service in
the same option in Dot
services
space
we talk about depth Services underscore
item
okay and here we want to save width
30 percent
okay now
I copy the screen
in this div Services item
so we want to use
image font that is the most important
area here we say width
hundred percent
okay and margin button
okay margin button 25 pixels
okay
okay now you can see this images looks
pretty nice
yeah looks better so that's how you see
your websites are really creating some
difference compared to the previous one
now they are aligned properly and you
can see here
these images are really nice
okay that's the benefit so we have this
let me call the classes
yeah and once this image part is closed
we would like to talk about S3 part
let me copy this
item
and with this item we say
and this S3 will say color
tomato and margin bottom
we say 15 pixels
okay for this S3
and when it comes to this text boxes
certainly you can change the look and
feel how you really want it so for this
you can say dot
form underscore Rebel
home underscore
input
okay form wrapper form input
we say margin hyphen bottom
15 pixels
okay perform input
now in a similar line uh form input we
may have a for text area
input
text it here and in this text area we
want to offer some of the details like
I'm talking about like in width we talk
about padding let's talk about like in
width I'm saying 250 pixels
okay we start adding
research pixels
and
20 pixels we talk about
height
80 pixels we talk about resize
we talk about none
with a border
this bottle is a 1 pixels
call it
and
White
this is for this and in a similar one I
can use it for the text box so form
coolant input
whatever we have used it form wrapper
form input so let me copy this
okay form input and here we say input
equal to
type of text
so what
combination you'll be using so I'll be
using width padding and border
copy
or in it which product and Border height
and three size will be removing it
and
awesome so they look pretty nice okay so
we have this three text boxes with us
and all are looking nice the way we are
expecting from our application okay so
that's the one which my application is
offering about this text area and all so
that looks really nice the way we are
expecting right now
Okay so
what are the areas we have seen Tiff
Services item
and everything whichever you are saying
like this
so let's go back and check to my
index.html file
so we have a call
form wrapper which is the outermost
okay
you see now here it contains lot many
things
so here in my
program when I see like form wrapper
okay form underscore wrapper dot form
input and uh
talk about like the other details
talk about input type equal to text
you see like the border is like that
so if you want to have this border some
different color
can certainly use black
now you can see it looks pretty nice
because earlier it was looking like
pretty much different now at least I can
see here the location has been given
okay uh so going back towards the
previous
HTML page so we had a call a submit
button with us okay after this the
all three div tags are getting closed
and now onwards we would like to start
working with Team details
so we're saying do
so do
plus equal to
our team and
ID equal to
dream again
okay and now we want to use this H1 tag
here this H1 tag we say
class
equal to title and here I say
13. in a H1 tag now once it is over we
will use again another div tag which
having
plus equal to our team wrapper
our
team
underscore
rubber
now within the step tag
uh we want to use one more div tag here
in this
class equal to
team underscore or team High equal one
phase 3.
now here we will be using a lot of other
Dev tags inside this like
I say div
class equal to team members
team members
okay and uh data hyphen name equal to
you can give any name right let's give
the name call
it's like space key
okay and within this I want to use one
image stack
IMG space SRC equal to
Images slash team one
dot jpeg
okay so that's the first thing
we have it so this div tag is closed now
uh I copy the same
but total I want to use this three one
two
three
and here team members I would like to
change the name here rather than it
actually let me get the name code
OBG and
one more
that is called
okay and change the name to two
4.5 right
okay so this is the first div we have
used it so this deep tag is getting
closed right over here along with this
this is the second depth track is
getting closed so after having this
two div tags closed we want to use
another one so for team 2.
okay so I just copy the same
okay uh
I would like to go ahead with
team toting so team members
and here I would like to say four five
or
five
six and change the name like you can
keep anything I just give the name call
suppose
audio
foreign
so these names we are using it now let's
go back and see how it really looks
so these images are coming like that
okay so we want to use those images in
somewhere not like this or horizontal
vertical so this for fix that issue I
have to once again look back to where to
my styles
okay where this option can be used in
better way I like to go back to my
style.css and what to use the first
option called dot over 3.
background
sorry
background now here we say
quite smoke
now
again
our team
wrapper
so in this I would like to say display
Flex
and flex Direction
face between
oh sorry column
let's check how it really looks like it
this is no more change
but
certainly few more classes can really
make a difference so our team
okay underscore Rebel
let's check this is the same name we
have used it
is everything
now in the same way we want to use this
team
so again our team wrapper
okay
Dot
team
display
and justify contents
space between
okay
now here when we talk about t we also
want to say
our team underscore rapper Dot
team underscore
members
here we would like to give with
how much 30 percent
and height
this will be Auto
and here we'll be having cursor
pointer for sure and overflow
hidden
and position
relative
this is what team members
now you can see it looks better now now
we have to basically divide those
because we have got separate team
members are available so we have to also
divide them two so here after that we
want to save
Dot
our team wrapper and again Dot
team members
a space IMG
these images we say on display
blog
with
100 percent
okay
height
Auto
okay
transition
transition or transition I can say or
type all
like this
okay and in a similar way
theme
and we'll say members
over image
and we can say
transform
a scale
1.1 so
that's it
okay so we have this
look and feel appeared okay with
transition image cover so they're all
ready with us
okay everybody so after writing all
those the only difference I made it like
I had used hyphen but I'm using
underscore here finally when I see my
look and feel
of this I can see now it is moving you
can see now it is all moving okay so
that gives me the confidence of like yes
exactly the code is working the way it
was expected earlier in my index.html
file
okay so once this portion is over okay
we want to go ahead so three div ties
are getting close one two and three and
here
we would like to start working with the
footer so here we start
footer
so present this photo I say class equal
to
okay now after this I use container
there
div class equal to what container and
again div
equal to
true
okay now do class equal to row again
another div
equal to
footer hyphen colon
converter iPhone column now let me use
H4 within the search for I say
company
okay after this we want to use this UL
within this URL once again I want to use
some link items
list items within this list item
a
equal to
this hrf tag we want to save
HTTP okay we have already used the
simply learn.com URL
yeah
let me copy this
come down
https symptoms.com rather than resources
I can say about it
about iPhone us
and here we say about this
so it is getting closed so I copy this
line again
okay so one more thing I want to use it
think HR is equal to
hash and here we will say
our team
okay after that
we want to offer the careers to be safe
and we want to use
careers
here
review
concept
Ali when you speak
so this is the detail of this so the UL
tag is getting close
and after this you will tag is getting
closed
uh
we want to use one more Dev class equal
to footer hyphen column
okay I copy this
it is getting closed here
okay so dim class equal to photo open
column so rather than using company we
want to use this cover
discover and here in this discover we
say simplelim.com and here we have this
option called kill up
hyphen
free iPhone
online iPhone
okay so here we will give the name call
skill up
okay after this
we have this called careers we say
resources
[Music]
resources
here we can give the name core resources
again
resources we have called tutorials
tutorials
research
tutorials here
so like this we can create as my number
of URLs as I want
okay so once it is over
let me copy this again
and here photo column we say followers
column
because
or else we can say this option name
called work with us
in this world because we can have
some options with us in UL
remove those two
in this we would like to say guest
blogging
we say
guest blogging
yes blogging we can say blog is kissed
blog I'll meet
guest another link which I have it here
that is called become our trainer
here we say
become
iPhone our iPhone
trainer and we say
become an instructor
okay so like that you're offering it and
once it is done I can copy it once again
this div
and provide few more photo iPhone column
followers
okay and
[Music]
follow us we would like to use another
tip
last
equal to
social hyphen
links and this divide will be closed
later
okay
templates equal to Social Links in this
I can have some facebook.com and uh you
know twitter.com and many more names I
can take it so here in our Dev class
equal to social link here I will not be
using any URL here I will not be using
any Ally here
okay so I'm closing this you're gonna
like
closing this URL and I like
to
well simplylamp.com or else we can just
give the name called twitter.com
okay
twitter.com slash
simply learn
Okay so
we can offer the user
to follow solar
Instagram also or to the Twitter also so
here we say
a hdf but what we need to give it so we
can see twitter.com
simply learn
we remove this values whichever we have
it
so instead we use this I
okay and in this I I say
equal to
okay
have your iPhone Twitter
okay anchor tag is closed so in case if
you want to talk about liking
typical
[Music]
you know Instagram that Instagram also
you can use it now so here
we say http www
dot install
we say instagram.com okay slash
simply learn underscore
underscore e-learning
okay and I want to use the same option
there also I
enter with this
remove this
okay so here just give the name called
fa hyphen
Instagram
now let's go back and check
okay so you can see now we have got this
links coming up for Facebook as well as
what of this Instagram so that looks
really nice that gives us a feeling of
yes exactly the code the way we are
looking forward for it is working the
way it was expected
okay and if we want to offer any other
type of details that also you can offer
but this is the first thing which we
have taken so this is the navigation
links are available these navigation
links
you could also change the way they
always look forward for so I'll be
providing some links which we can later
on use it
okay everyone so finally we are all
ready so I have basically added some of
the additional styles to my code you can
see here from this point onwards we've
added this image URL
this is for body this is for Star
container row UL this is for footer this
is for footer column so because we are
also using some photo portions into my
code as you can see we have a call photo
column and photo class equal to what
footer so implemented this photo
background color equal to Black we have
used it padding 70 pixels photo column
filter column because we are using this
H4 tag also if you remember like we're
using this H4 tag also so for all H4
tags this would be the basic setting
H4 before we would like to give the
contents like this by giving this
background color height box sizing width
and a null photo column you will and I
not last side we're gonna give this
margin bottom and this is the style for
photo column URL Li and list items
okay and here you can see this font size
we are giving it this is for Google this
is for photo column where we have of
course Social Links whichever we have
created so it is showing me that display
inline block margin border radius and
this is for Social Links when I try to
click on or over it so the color will
change to this white color and the media
this is for responsiveness to make sure
like in case if I reduce the size of my
browser they look better the weight is
expected
so when the line size will change to 720
pixels so this color will be changed and
this is the styles for Arrow photo one
this is all we have implemented and
finally my application when I refresh it
actually looks like that see that this
is the photo area of my application
so I'm sure that this looks even more
better and convenient because when I try
to reduce the size you see now it's
still gonna give you the responsiveness
can you see this now this is going to
give you the responsiveness reason
because here we are using this Logic for
media when the change of width well to
720 pixels if it is going to 767 pixels
so like that you implement that so guys
our project is now ready I'm sure that
you enjoyed thank you very much for
enjoying this project so final our
application is set and our application
is working the way it is supposed to
work for us in this session we'll cover
the HTML and CSS part of creating
JavaScript
part cover in one of the upcoming
sessions so there's a specific reason
for not discussing the JavaScript part
because it may happen that many of you
guys will not get what we try to do so
this specific video is for HTML and CSS
and in some other session we'll complete
the whole application using JavaScript
so let's move on and let me show you
guys what we'll create in this session
will create the front end of our quiz
application using HTML and CSS so here
you can see on your screen that we have
the start quiz button present on the
screen right click on it and you will
see the quiz starting this was
interactive right all this
interactiveness comes with the inclusion
of JavaScript
that's the reason JavaScript is so
important now you can see these rules
for playing the quiz right we have five
rules for playing the quiz and two
buttons are present here for different
tasks
one button is for exit and the other one
is for continuing click on continue and
you can see a quiz starts we have
several questions here for the user to
play the question will feed from a
Javascript file
and the user will answer them to see the
score at the end let's answer some of
the questions over here so let's say
this is the correct answer for this
question
you can see the answer is correct for
now we have only two questions present
here will add as many questions as we
want
so
we'll do it in some other video let's
move on to the next question for now
here's a second question so click on
next question over here and here you can
see it's a second question
and if you guys know the correct answer
for this question then put it in the
chat section I clicked on the wrong
answer intentionally
so that it will be marked as red so here
you can see the it is a wrong answer
2001 is the wrong answer that's why it
is marked as well the correct answer for
this question is 1995. Javascript was
actually developed in the year 1995 by
Brendan Ike when he was working for
Netscape Communications so click on next
question and our result box tells the
user about their performance I hope you
guys must have got an idea about what
we'll do in this video so let's hop into
the programming part directly
we have all the required files present
here so if you can see here we have this
HTML file we have this CSS file these
two files are of utter importance and
the script part or we can say the
JavaScript part we are not going to
cover in this particular section but we
have these JavaScript files here as well
so let's do the structural and styling
part of this whole quiz application
we'll create the start quiz button first
followed by the info box so let's create
them first move to the body section of
HTML document so here we are going to
create a button first the start quiz
button if you can see here we have this
button over here which is the start quiz
button we are going to create this one
first so we are going to write over here
inside the body tag
we are going to use the div tag with a
class attribute so we are going to write
here the class name as let's say and
start underscore button then we are
going to use a button tag within this
so we are going to write here button and
then we are going to write a
button name so a button name is start
quiz and save it and here you can see
the button present over here on the
browser
now
the next thing we are going to do is we
are going to create the info box so for
creating the info box what we need to do
is we need to use another div tag fine
so this time we are going to use
devtac for creating the info box so by
info box we mean this particular box so
this rules box we have to keep these
things in mind fine
now what we'll do is we'll write over
here
after this let's put a comment over here
and we are going to write over here
rules box or rule box or info box
whatever you guys want to write P you
guys can write over here let's say we
are going to write over here rule box
and now we are going to create a
info box so we are going to use again
div class is equals to
info underscore box so within this div
tag we are going to use the
Dev tag again so we'll write over here
div class is equals to
info underscore
title fine
now this particular Dev tag this info
title this div tag with classes info
title we are doing creating this div tag
for this some rules of this quiz area
fine so this is why that's why we are
using this some
div tag over here so now what we are
going to do is we are going to write
something over here
so we are going to write over here rules
and
regulations fine
now we are done with this part as well
the div tag is closed so we are going to
do one more thing we are going to put it
within the pan tag fine rules and
regulations we are going to put within
the span tag so we'll cut the span tag
from here we'll paste it here and then
we have this div tag closed now within
the same Dev tag we are going to create
another Dev tag this time we are going
to create for this section so we are
going to put Five Points within this
particular div tag the one we are going
to create right now so let's right over
here we are going to write div
class class is going to be it's a list
of elements so let's say we are writing
over here info list
and then it's fine so we'll write over
here div class
we'll write as info for a information so
here we are going to Define our rules so
we'll write over here
let's say
you will get
within the span tag we are going to
write 15 seconds
or every
question fine
now we are going to use the Dev tag
again with the same class so we are
going to write here div classes
info
and we are going to write a second rule
over here
is no
point
of
going back
once cu
are the quiz fine
now we are going to write another rule
over here so we are going to write Dev
class is equals to info it takes a lot
of time guys to write these rules and
regulations so
let's go ahead and we'll write over here
you can't choose
more than one option at a time
this is a third rule for the quiz and
then we are going to write here div
class is equals 2 info again and we'll
write over here
this is going to be a fourth point
we are going to write here
let's say you
will get one point
for each
correct answer fine
so that's done with this we are going to
write a fifth Point as well so let's say
we have
this class as in four we are going to
write over here 5 and now let's say we
are writing over here
enjoy your quiz fine
so let's not
make it too long save it and here you
can see we have all the rules and
regulations present over here you can
see we have this these five rules one
two three four five each of them is
working fine now on the next task for us
is to create the two buttons we have and
we have two button the exit quiz button
and the continue button so if you can
see here we have this exit grid and the
continue button so let's create them as
well what we are going to do is we are
going to create
another div tag after this
so we are going to create a div tag for
buttons now we are going to write here
div class is equal to buttons
and we are going to write here button
so then we are going to create a button
class is equals to let's say quit for
the quit button and we are going to
write over here exit
who is
and we are going to create another
button
so we are going to write
name as restart the class name is
restart basically and the button name is
going to be continue fine we'll move to
the body section of our HTML document so
we'll design this button first we have
this start quiz button we'll do it first
and then followed by a
although things like then we have to
design this one as well so let's start
writing the HTML code for this so what
we'll do is
we'll start writing over here now the
first thing we need to do is we need to
add a div tag over here so for that we
are going to write here
div
class class is going to be let's see
start button fine
then we have to write over here
we have to create a button for this so
we'll write button over here and then
we'll name our Button as
start rules save it and here you can see
we have this button present over here on
the browser let me just just zoom it out
so here you can see we have to create
this button let me just show you guys so
this is the button we are going to
create now we are done with this
let's move ahead and we'll design the
other info box basically so we'll write
the code for this as well now we'll move
back to our HTML document and we'll
write over here
so this is the start quiz button so
let's put a comment over here we'll
write
start quiz button
and that's it fine so the next thing we
are going to do is we are going to
create a rules button or we can say info
button so we'll write over here in the
comment box
rules and so let's create it for that
again we are going to create a div tag
so we'll write over here div
followed by the class name so the class
name is let's say going to be
info box so we'll write over here info
box close this div tag now anything we
write here will be considered within
this particular box so let's write over
here the code we are going to write over
here
we are going to take another div tag
basically so we are going to write the
design the title so we'll write over
here info title
and this is a class name so
let's move ahead we'll
write over here within the span tag
rules
and regulations
fine so this is what we are going to do
now we are done with the title now the
next thing we are going to do is we are
going to write the rules over here so
for that we are going to use another div
tag with classes
let's take any class of your choice we
can take like
let's use info list so it is a list
basically so we are going to write over
here
classes
info underscore list
fine
we are done with the class then we have
to take another div tag for
all the separate points so we are going
to write here info fine so this is our
class okay it's a mistake over here we
are done with the div tag
save it and here you can see it says
rules and regulations fine
so the next thing we are going to do is
we are going to write over here
other things so we have to close this
div tag first
and let's create all the div tags first
so what we are going to do is
we are going to copy this from here
basically we have five rules right so we
are going to paste it five times now we
need to write the rules over here so for
that what we are going to do is we are
going to write the rules over here so
the first rule says you will have only
15 seconds for each question
so let's write it over here
you will get
so we have 15 seconds written
differently over here you can see it's
blue in color so what we are going to do
is we are going to use the span tag over
here so we'll write over here
pan 15 seconds we are going to write
within this pan text
and then we'll continue writing over
here for
each
question
fine
so this is our first point you can see
it says you will get 15 seconds for each
question
now we need to do one more thing
just reduce the size of this vs code and
that's it fine we are good to go now
we'll write a second point over here so
second point is
there's no way
of going
act once you
start the quiz fine
the third point we have is
you can't select more than one option at
once
so let's use it we are going to write
here you can't
select mode then
one
fine
we are done with the third point
let's give them the numbers as well we
are going to write one here
two over here and
three away save it and here you can see
we have three points present over here
now we are going to write okay we have
the div tag here so we'll write our
fourth Point within this div tag
let's use anything let's say we are
writing over here you can't quit the
game
with the quiz in
between
then finally we have the fifth Point
fifth point is
you will
get one point
for each
correct
answer
right so we have our Five Points over
here now the next thing we need is
these two buttons right we need the exit
button and the continue button so let's
add them as well for that what we are
going to do is we are going to leave
this div over here and after this div
tag we are going to write over here div
plus is buttons
and then we have to write over here
button
class and let's say the first class name
is quit
this is for
exit quiz fine
we are done with the one button
the same thing we'll do for the second
Button as well we are going to use the
classes
restart because we are going to need
this class later on as well so we'll
write over here exit
what exit quiz we are going to write
over here continue
fine
save it and here you can see we have two
buttons present over here let me remove
this save it and here you can see we
have two buttons present over here now
we are done with the HTML part we have
the start quiz button then we have the
rules and regulations present over here
and finally we have two buttons right if
you can see here we have these two
buttons exit quiz and continue button so
we have all the five rules written over
here on the browser for this one now
let's move ahead and we'll now style
these elements the first thing we are
going to do is we are going to write
over here
body let's define the body color once
the whole background color we are going
to Define so we'll write over here
background background is going to be
let's see agree
save it and here you can see the gray
background so one thing we are going to
do is we are going to change the color
from here
a this one is little bit dark
lighten it up
save it and here you can see we have a
background color
now the next thing we are going to do is
we are going to style the start button
first so this is the start button this
button we are talking about this button
we are going to style it so let's do it
we are going to write here
start underscore button this is a class
name I guess let's check so this is a
class name start button
then we are going to write over here
position position is going to be
absolute
and then we have top top is going to be
50 because we want this button to be
present at the center of the screen
right save it and here you can see we
are going to Define left as well for
this
so left is going to be 50 again
and here you can see the start quiz
button at the center of our screen now
we are going to write over here
transform transform we are going to
write
Translate
minus 50 percent
to 50 fine okay you have to write a
minus 50 again
so save it and here you can see the
button at the center of a browser
now the next thing we are going to do is
we are going to style this button so for
that we are going to write over here dot
start underscore button
then we have to style the button tag
fine so we'll write over here font
size font size is going to be 25 pixels
then we have the font weight so we'll
write over here font weight font weight
is going to be let's say 500
and let's see the color the font color
is different so it's
blue in shade
guys I have no idea about the
font color so let's do one thing we can
use any color of our own choice fine so
we'll write over here color color is
going to be black in this case let's say
we are going to use black color only
then we'll Define padding padding is
going to be 15 pixel and 30 pixel
followed by the outline fine we'll write
outline over here outline is going to be
none for this then we have the border
border is going to be none again
and after this we'll Define the Border
radius border radius is going to be 5
pixels
and then we have the background color or
we can say the background so let's
do one thing let's choose any color
and we'll write the background color as
let's keep it white fine for this time
we are going to keep it white on after
background color we are going to write
over here cursor cursor will change to
point on taking the mouse over this
particular button and you can see it's
working totally fine the button looks
decent
fine
now the next thing we need to do is
we need to
over effect to this button so what we'll
do is we'll copy this piece of code from
here
will
paste it here we'll put over in front of
it and now we'll start writing the code
so we'll change
the font color to white so let's say the
font color is going to be right this is
the hash code and we'll change the
background color as well so the
background is going to be red let's see
let's change the Border color as well so
we'll write border color as red again
save it and you can see it's working
totally fine on taking the mouse cursor
over this start quiz button fine so we
are done with the start quiz button now
the next thing we need to do is we need
to styler
info box or we can say the rules and
regulations box so what we'll do for
that is we'll move to the
index.html we'll copy this info box
class from here
we are going to paste it here with the
start button and that's it okay we have
to write here dot info box now we can
copy it so that we can use it every time
we need it
I guess it's fine you can see the
content at the center of a browser so
it's working totally fine
now the next thing we need to do is we
need to style this info box
so before that let me change
the background color a bit so we are
going to write over here
49
48
48 I heard this somewhere that this
color is nice this 49 48 48 you can see
I didn't find any difference if you find
any you can let me know in the comment
section so let's move ahead when we'll
write dot info box over here this is the
class name we are going to define the
width for this info box which is going
to be 540 pixel and then we'll Define
the
background color
and then we'll Define the background
color for that we'll write over here
background so background is going to be
white again we'll write hash FFF
and it looks fine I guess the background
save it
and here you can see the whole rules and
regulations box with white background
fine now we are going to define the
Border radius border radius is going to
be 5 pixel in this case you can see the
border is curved now
now what we are going to do next is we
are going to put it here we are going to
use the
info title class for a title so we'll
write in for title over here we are
going to write height
is going to be 60 pixels then we have
width width is going to be hundred
percent not 100 pixels keep this thing
in mind
so I will write with hundred percent
we'll write
border bottom
border bottom is going to be 1 pixel
solid and let's see
light gray fine the next thing we are
going to do is we are going to write a
display
is going to be Flex
cool we are going to align all the items
at the center we are going to align
items at the center save it and here you
can see
and the next thing we are going to do is
we are going to write here padding 0 and
35 pixels save it and here you can see
rules and regulations written over here
now this next thing we are going to do
is we are going to define the font size
font size is going to be 20 pixels for
this
it looks fine and then we have the font
grid so we'll write over here font
weight font weight is going to be
let's say 800.
fine so here you can see it looks fine
and let's
see if we had any mistakes over here or
not no we are not
having any mistakes as of now so let's
move ahead and we'll
now style the rules we will style all
the five rules at once so
for that we have to write over here
hot info box dot in Foo underscore list
and we are going to ride over here
padding padding is going to be 15 pixels
and 35
pixels
we are done with this we'll write over
here again dot info box then dot info
underscore list
and then we'll write over here dot info
dot info is the class for each room fine
keep this thing in mind so we'll write
over here margin margin is going to be 5
pixels then we have font size
font okay we have to write font size
over here
we have to put semicolon so we'll write
font size font size is going to be 17
pixels
save it and here you can see all of them
looks decent so the next thing we are
going to do is we are going to write
over here
it's span tag so basically we need to
make these 15 seconds
let me show Blue so let's do it
what we are going to do is we are going
to
use this particular span tag these 15
seconds is present in between the span
tag so we'll
copy it from here we'll paste it here
and we are going to use
pan over here fine
so we are done with span we are going to
write over here font
font weight is going to be 600
then we have color
color is going to be
let's use a different color of blue I
don't know
maybe we can use
let's use the RGB value first so we'll
use
3 comma
okay not green let's use blue
for that we have to write 0 comma
4 comma
255 RG b b for blue
so here you can see they are blue in
color it looks perfectly fine now
now the next thing we are going to do is
we are going to
write the code again for buttons so
we'll write over here
returns so we'll mention info box over
here
okay we will mention over here
dot infobox dot info list dot info now
we need to style these buttons so we are
not going to need this info list and
info we are
going to write here dot buttons because
buttons is the class for them I guess
or both the buttons the class name is
buttons so we are doing good let's use
the height attribute first
okay it is going to be
let's say 60 pixels for both the metals
then we have display display is going to
be Flex so we'll write Flex over here
then we have to align these items at the
Center
and after this we have to
write
flex and over here okay we have to
mention display first
display is going to be
flexing
so okay no we have to write justify
content so we are going to justify the
content over here so we'll write justify
content justify content at the like send
and we have to mention padding over here
padding is going to be 0 and 35 pixels
we are done with it almost so we'll
write border top here and we'll write
one pixel
solid
and let's use light gray again
fine we are done with this light gray
thing
save it and here you can see both the
buttons are present at the bottom and in
the footer section basically
now the next thing we are going to do is
going to write over here
okay let's copy it from here we are
going to style each button so we'll
write over here and then we'll use the
button tag
fine so we have to put a space over here
and we have to write here
margin
margin is going to be
Z
5 pixel fine then we have
height is 40 pixel
okay so we have to write here height
as
40 pixel
fine
so height we are done now we have to
write over here width
width is going to be hundred
pixels saved and here you can see that
both the buttons now we are going to
write over here
border border is going to be 1 pixel
solid in nature and
blue
and so you can see the blue borders over
here
now the next thing we are going to do is
we are going to write
background
okay
the next thing we are going to do is we
are going to add the background color to
these buttons so we'll write over here
background background is going to be
let's see blue again fine save it and
you can see the color is a bit dark so
let's choose a light shade of blue or we
can say Aqua so we'll write over here
RGB 9
176 and
26 let's save this and you can see this
color so this is the color what we are
going to do is we are going to copy it
from here and we are going to paste it
here so every time it looks fine now
right
so everything is working totally fine
then we'll write over here after this
background we are going to write
let's see for the radius border radius
is going to be 5 pixels
and then after this what we are going to
do is
we are going to write over here
color so let's define the font color as
well so for font color we have to write
here font or we can say just color color
is going to be let's say white then we
have found size font size is going to be
16 pixels
and then we have font weight as well
font weight is going to be 500 let's
suppose
and then we'll write over here cursor is
0.2 save it now and here you can see
these buttons look good
now these buttons are done the next
thing we need to style let's see what we
have here for styling now
and we have two buttons left the quit
button and the start button so we'll
move back to our CSS file and we'll
write over here
dot button
and just a second let me check fill
right over here dot buttons not DOT
button then we'll write over here button
then we'll style each button fine so
we'll write over here
quick
and we have to style the continue button
as well so for that we'll write over
here
dot buttons
button Dot
restart
now we have to check the colors for both
the buttons so for the continue button
the color is the background color is
blue basically and so what we'll do is
we'll change the background color over
here
and we'll write over here inside the
restart we are going to write
background background is going to be
blue
or just let's do one thing we are going
to copy this background property from
here we are going to paste it here
and we are going to do the same for
Border as well
fine so we'll write over here this
looks good we are going to remove it
from here
save it now and for this exit button
we need to write over here
border color border color is going to be
let's see
gray I am not sure
and then we have to mention
we can say is the font color as well so
for that we are going to write here
color color is going to be
black save it and here you can see it
looks nice now
so we are done with these buttons now
the next thing we are doing is we are
going to do is we are going to add over
effect in these button fine so till now
what we did is we did the buttons part
now what we'll do is we are going to use
the hover effect over these buttons so
what hover effect will do is on taking a
mouse pointer to these buttons over
these buttons the whole effect will
change these buttons like it can change
its styles and all that things right so
what we are going to do is we are going
to add a property here first we are
going to add the transition property
here
to write here transition before we add
the hover effect so we'll write over
here
transition and we are going to write
over here all at 0.3 with ease
right so our transition is done now the
next thing we are going to do is we are
going to copy this from here
we are going to paste it here
and we are going to mention the
over property here so we'll write over
here hover
and now we'll see what we can do while
using the hover property so what we are
going to do is we are going to change
the color to Red so we are going to
write here
background color is red
save it let's see if it's working so
it's working we are going to change the
Border color as well so we'll write over
here border color is going to be red
again
order is going to be of same color you
can see it's red and
we are going to do the same thing for
the quit Button as well so we are going
to write over here
quit so we'll copy it from here
we'll paste it here and we are going to
use the hover effect we are going to
write here inside this
color we background color we are going
to change to red
same goes for the Border color border
color is again going to be red on taking
the mouse cursor with this particular
button and we are going to change the
what we can say font color as well so we
are going to change the font color to
white now it looks good right so on
taking the mouse cursor over this exit
button you can see the font color is
changing to White you can see the
background color is changing to red
so we are all done with this part
so it looks similar right not similar
though now we need to change
these
info box so what we are going to do is
we are going to write here let's see 640
let's try it
so the resolution it changes okay
for now we are
done with it and
you can see the box is fine so we have
all the rules and regulations present
over here
one thing we can do is we can put this
space after this fifth point so we are
going to write over here
like this
and you can see it's fine
fine
let's check it out if everything is
correct the class name is info for all
of them then we have the dev tags closed
perfectly fine then we have the in full
stack close perfectly fine
we have these buttons present over here
and
it's right so the next thing we are
going to do is
we are going to get back to a CSS file
and we are going to write something over
here which is
okay let's play is going to be none
save it once and here you can see we are
at the initial stage of focus so here
you can see we have this start quiz
button and if we remove this display you
can see we have this rules and
regulations box
fine it is working totally fine so for
now we are going to use this only
so now let's move to a HTML file and we
are going to write the code for quiz box
so we'll write after this particular div
tag before the body tag basically so we
are going to write over here
div
class is equals
to quiz underscore box
this is the division for creating the
quiz so let me put a comment over here
we are going to write here
quiz box now we are what we are going to
do is we are going to use the header tag
within the header tag we are going to
use a div tag again so we are going to
use the classes
title
so we have to write the title over here
title is going to be
is application so let's change the title
in this particular code so we are going
to write here
liquid
quiz application
fine
save it I think you guys are not able to
see it but if you can see here clearly
we have this simply code quiz
application written over here on the
browser so let's Zoom it out again
now what we are going to do is we are
going to add the timer so we are going
to write over here
div
class is equals to timer
and within this we are going to write
div class is equals to timer underscore
text
and we are going to write here time
left
fine so we are going to use another Dev
tag now we are going to write the class
is equal to timer underscore seconds
and we are going to write over here 15
because we are going to give 15 seconds
to the user
we are done with the header section
so the next thing we are going to do
before we move further let me show you
guys that what we are going to create so
this is the part we just created we have
this simply code quiz application
written over here then we have time left
for this time left and then we have
seconds written over here save it now
and here you can see time left 15 and
all of these things written over here so
we have to write it here like this the
next thing the next part we are going to
design is this particular part so we
have to add a question over here for
that so let's do one thing we are going
to write over here
or we can say we are going to use the
section tag over here fine so we'll
write over here
section
and close the section tag then we are
going to write div
class is equals to q u e underscore text
let's say then we are going to close
this then we are going to write a
question write a single question
basically just
for the front end part we are not we are
going to add questions through
JavaScript but this time only we are
going to use a simple question for the
front end part just to let you guys know
how the front end actually works so our
question is which one of the following
is the latest version of HTML so let's
add it
what we'll do is we'll copy it from here
and we'll paste it here
fine
so we are done with this pan tag and
this div tag as well this is the
question tag next now we have to Define
these four options HTML 4.0 5.0 3.0 and
2.0 all of them we are going to Define
anyways let's move ahead and we'll write
over here
div again so we are going to write over
here div
class is going to be
option underscore list
and then we have to give the options
here basically so we'll write all the
four options over here
we have four options as html4328
[Music]
pi
and we have to add in the this
icon here as well just to let you guys
know that this particular question is
correct and we have to add two icons
right so one is this let me show you
again with the other icon
these are the two icons we need to add
so the cross sign at the
correct sign the correct sign will show
that the answer is correct and the cross
sign will show that the answer is wrong
fine so we need to add them what we are
going to do is we are going to write
over here
okay options so inside the option list
basically inside the div tag with
classes option list we need to add
another div tag so we'll write over here
div last class is going to be option
only
now we are going to add a first option
so we'll write over here span our first
option is HTML
four point
zero
and we are done with this now we are
going to write over here div class is
equal to icon
here we have to write here icon and
tick and there is no underscore so we'll
write over here icon Tech then we have
to write over here
I
we are going to write over here class is
pass for
times or we can say password checks for
the correct one so we'll write over here
first for check
we are going to close the eye tag over
here and we are going to close the
division as well fine so The Division is
closed what we are going to do is we are
going to copy it from here
and we are going to paste it here for
another then we have four options so we
are going to paste it for four times
and we are going to change the options
here from HTML 4.0 to 3.0 then from
here we are going the last one is the
correct answer keep this thing in mind
so we have to write over here
so all these answers are wrong instead
of this one so for this we are going to
use fast for check
otherwise we are going to use a
different class over here
the class name is
as far wrong I guess let me check
phosphat times
for I can cross so we are going to write
a icon
cross
for this one we are going to write is
icon cross
we don't need to add all of them in each
option so let's do one thing let's
remove it from here let's move from here
as well because we don't need it in
these two options it's just the front
end so we are going to show you how to
we have to write here
far far times so it's fast four times
it's not fast if I check it's fast
okay whatever it is so we are going to
write a fast forward times and we are
going to write over here first for check
let's see you can see we have two icons
present over here one is crossed and the
other one is correct so this is the tick
and this is the cross it means that HTML
4.0 is the wrong answer and HTML 5.0 is
the correct answer fine now
let's do one thing let's create the quiz
box footer now so we are going to
write it over here after this section
tag
so the quiz box is taking a lot of time
let me put some comments over here so
that you guys can understand it
well right over here
let
me
this is the quiz box
header so we are going to write over
here quiz box header then we have the
section tag over here here we'll write
quiz
box what we are going to say is
questions let's define it like this then
we have after this the footer section so
let's define the footer section as well
we are going to write over here quiz box
photo fine
so we are done with this as well now
what we are going to do is we are going
to define the footer section so we'll
write over here
the footer tank
So within the footer tag we are going to
write
Dev class we have to write
it here like this class is going to be
total underscore questions and then we
have to write here
after this pan
So within this pen tag we are going to
use P within the P tag we are going to
use two
then we are going to use off
and then we are going to use the P tag
again
so we'll write over here like this
okay so we have to
questions we have till now so we'll
write here two of two
we have to write here
questions fine
so we'll write over here like this save
it now and here you can see it says two
of two questions over here on the
browser
fine now the next thing we are going to
do is we are going to
add the buttons so if I take you here
so here you can see we have this one of
two questions we have this simply code
logo present over here and then we have
this next question button so what we are
going to do is we are going to add this
button first and then we'll add this
logo as well fine so don't worry about
it we'll add the logo as well now let's
continue we are going to write it after
this div tag we are going to write
button
we have the button class is
next
yen
and we have the button name as let's say
next
question
fine
so we are going to add the simply code
image over here after some time because
let's style everything first then we'll
add the simply code image
fine so what we'll do is
get done with the next button so let's
move ahead and save the program and
let's see if this thing works or not you
can see the next button present over
here it says next question it is present
over here so
now the next thing we need to do is we
need to style this quiz box so for that
we are going to use the
first class so the first class is it's
the rule box quiz box fine we are going
to copy it from here
we'll move to a CSS file we are going to
one thing first we are going to paste it
here first after a comma
we are going to paste it here and we
have to put a dot over here save it and
here you can see it is present at the
center of the screen
now we are going to do one more thing we
are going to
go down at the bottom and we are going
to
sell the quiz box now so we are going to
paste it here we are going to write here
Dot
right over here inside this
width is going to be
540 pixels or we can say 550
pixels is going to be the width then we
are going to write here
background color or we can say just
background we are going to Define so
we'll write over here background as
HFF which is white save it and here you
can see our background is here now we
are going to write here border
radius border radius is okay so we have
to write here border radius so we'll
write over here border
radius border radius is going to be
it's a 5 pixel let's try five pixel
and save it you can see the quiz box
looks fine now we are going to style the
headers part so we'll write over here
quiz box underscore we have to put here
then we have to write here
header fine now we are going to write
height as 70 pixels then we have
padding as 0 and 30 pixels then we have
let's
do one thing let's check it out if it
this thing is working or not see and
here you can see it looks fine we are
styling this particular section the
header section basically so we are going
to write here
background background is going to be
black
save it and here you can see the black
background now we are going to align
these items align items at the center
justify content justify content at the
space between so we'll write over here
is this between
save it
we have to write here display as well so
we'll write
display as Flex
save it and here you can see it looks
fine now
when we are going to change the
obviously we are going to change the
background color and this font color for
booth simply could quiz application and
for time left
for now we are going to write over here
border radius so border radius is going
to be 5 pixels 5 pixels 0 and 0.
5 pixels 5 pixels 0 and 0. and we have
box shadow box Shadow is going to be 0
pixel
3 pixel
5 pixel and one pixel
we are going to use the RGB a value for
this one we are going to write here 0
comma zero comma zero comma zero point
one fine
that's it we are done with this save it
and here you can see it looks fine now
we are going to
what now we are going to style the title
so this is a title simply code quiz
application and this is a Time fine so
what we are going to do is we are going
to get back to the
index.html and here you can see
let me show you so this simply code quiz
application it has the classes title
and for this timer
so this timer we have the classes timer
timer text timer second there are three
different classes so what we are going
to do is we are going to style the title
first fine so we'll move back to our
CSS part and we'll write over here dot
quiz underscore box
space header space
title find well right over here font
size font size is going to be 20 pixels
then we have font
weight Point weight is going to be 600
pixels
and we are going to write over here
we are going to write over here color
color is going to be
and here you can see the
whatever we can say it says simply code
quiz application and the font color is
white
we are going to do the same thing for
timer as well so we'll write over here
Dot
quiz box please
header
space Dot
timer
and we'll write over here display is
flex and we will align the items at the
Center
will justify them as well justify
content
it's piece between we have the width
width is going to be let's see 145
pixels for this timer and we have
height as 45 pixels
let's see
okay it's not visible because the font
color is what we can see
black
what we are going to do is we are going
to change the background color
so we are going to write here background
color as
and it looks fine now let's diminish it
a bit
little dark
so what we are going to do is we are
going to put this color over here
save it now and it looks fine now right
so the next thing we are going to do is
we are going to give the Border
so what we are going to write over here
border border is going to be 1 pixels
solid and
let's use the same color we are going to
copy this RGB value from here
we are going to paste it here save it
and you can see it looks fine there's no
issue now the next thing we are going to
do is we are going to define the border
radius so the Border radius is going to
be 5 pixels
and the
padding is going to be 0 and 8.
save it here you can see it says time
left 15 it looks somewhat same although
the colors are not same because I don't
actually remember the color for this one
the actual color code basically so it
looks fine right now the next thing we
are going to do is we are going to style
this particular timer box so what we
have to do for that is
we have to write here Dot
quiz underscore box please
header space
timer then we have the time underscore
text class
so you can see here in the HTML part if
I can show you here is a
okay let me see where it is so it says
timer text timer text is for time left
and then we have timer check for 50. so
we are going to do
what we are going to write over here
font
onto it onto it is going to be 400
then we have the font size the font size
is going to be let's say 17 pixels
and then we have
user select yes
fine save it and here you can see
this is
the time text class let me check timer
text
okay we have to write here timer text
save it and here you can see it looks
fine now
timer underscore text let me check once
timer text
timer
yeah it's fine
let's do one thing
well right over here time text so that
it won't confuse you guys
so we'll write over here time text save
it now
and I guess it's working let's
try to change the size
okay they have this
timer class then we have classes time
text
user select none we have the font tweet
as 400
da
timer
okay
good I guess so let's move ahead and
what we are going to do is next is we
are going to write here Dot
quiz box then we have
header then we have
timer then we have
a underscore
right we are going to write your phone
size font size is going to be let's see
18 pixel
then we have the font weight font weight
is going to be 500 again
and then we have background so
background we have to
mention so we will write over here
background
background is going to be let's see
black once again black on black
I love black basically so that's not the
point right here so we'll write over
your height as
30 pixels then we have width has 45 okay
we are in the wrong track
we have to write your width as
45 pixels
there's something wrong okay we forgot
to put semicolon movie
so with width we are done with the width
as well
now we have
to save it once and here you can see we
have this box present over here now we
have to do one thing we have to
color it so color is going to be white
the font color basically
then we'll write over here text align at
the center then we have line height
line height as 30 pixels then we have
border radius so we'll write border
radius as 5 pixels then we have
border so border is going to be
1 pixel solid in nature and
of course black and color
user select we are going to Define is
none again
that's it save it and here you can see
your timer box is complete it says 15
for seconds and we have time left as
value
so it says simply code quiz application
it looks good though right
the next thing we are going to do is we
are going to style the
section so by question we mean this
section or we can say bisection we mean
we are going to style this question of
Earth so this this particular section
basically the other part comes in the
footer section
so this is a section with these two
logos what we are going to do is we have
the parent classes quiz
underscore box then we have the section
class so we'll write section over here
and let's define the padding first
padding we are going to let's say right
here 25 30.
20 and 30 again
save it you can see there's a change
ground color we are going to Define so
let's see what's the background color
the background color is white so we are
going to write here background color as
okay so it's
cursor is not a hash FFF it is white
let me see if there is anything wrong
we're going to see okay so we have to do
two things we have to keep the
background as white but we have to keep
the footer background as black fine
so we'll write over here
we are going to do one thing before that
we are going to
go to the header section and
we are going to define the Z index and
position fine so we'll write over here
position as
relative and we are going to write here
Z index as 99
save it and here you can see it looks
fine
let me check once okay position we have
defined as relative and Z index we have
defined as
here we are
this part let's see if everything is
going correct or not let me check the
code once
we have added the position as
relative and we have the Z indexes
99. fine
oh it looks good
okay
now the next thing we are going to do is
we are going to move back to the section
we are going to style our section again
so we have
this q u e text present over here so
here you can see we are going to style
this question text fine so we'll write
over here
after this section we are going to write
Dot
quiz box please
section space
not q u e
okay just a second we have to remove
this from here save it now and here you
can see it looks fine
so we are going to style that um
put a section as well that's not an
issue so we'll write over here dot q u e
text now we are going to define the font
size font size is going to be 25 pixels
and then we have the font
weight Point weight is going to be let's
see
500 or let's do it 600 fine because this
is the question text right so we are
going to save it and here you can see
the question text is
bigger in size then we have to modify
these options for that we are going to
check
the class name is option list and option
fine we have two classes over here so
we'll write over here dot quiz box
within the section tag we have this
Dot
option underscore list class
and we are going to put
padding here padding is going to be 20
pixels and 0 then we have
nothing else so we need something like
we are going to write here
display display as
block
I mean
okay now the next thing we are going to
do is we are going to
style every option so we'll write over
here
section
dot option underscore list
space Dot option option is the last
class for each option we have remember
this case
now we are going to write here
background
background is going to be
it's the background
okay it's
sort of pink
okay that's a different background Maybe
save it
we are going to
save it
and let's do one thing we are going to
write over here
border border is going to be one pixel
solid
and
ink
fine
okay it's not working
let me check if everything is fine or
not
go back to index.html
and here we'll see we have this div
classes option underscore list and
the other classes
option
so we have this option list and okay so
here's the issue
we have to write it like this and now
you can see
okay let me change the Border color
we are going to keep it a bit
of here you can see now you can
differentiate between the Border color
right
okay so moving ahead let's define the
Border radius so we'll write over here
border
radius border radius is going to be
5 pixel again then we are going to write
here padding padding is going to be
8 pixel and 15 pixel
fine then we'll write over here margin
bottom margin bottom is going to be 15
pixels
and we have the display again display is
going to be Flex
then we have to align item set the
Center
and we have to justify content as
okay space between
save it and here you can see
okay there's a mistake over here we have
three options which are
correct and the last one is coming here
inside HTML 2.0
let me see this is because we forgot to
close the Dev tag over here our mistake
my mistake basically so you can see we
have four
options and we have the cross mark and
the correct Mark present over here it
looks good
I guess so now we are going to write
over here cursor cursor is going to be
pointer
you can see the cursor is also working
fine
now what we need to do is
we need
to
use the last child property so what we
are going to do is
we are going to use it here just
for the footer section basically so we
are going to put
it like option list
the last child of option is this HTML
5.0 fine so we'll write over here last
child
so we'll write last child last child is
going to
take margin
Autumn margin bottom as zero picks right
save it
and let's do one thing let's add
onto over here so we are going to change
the font size inside you so we are going
to keep the font size as 17 pixels
save it and here you can see the font
looks good
we will copy this from here now and we
are going to put the hover effect
will look nice I guess
so let's
do one thing
we are going to write here color as
so we have to change the color value
save it
okay we forgot to mention over
should we are to change the background
color on hoovering as well so we are
going to change the background color
to
I don't know let's do it now
we're cool so what we are going to do is
we are going to
do it black
looks
fine not the best but fine it's
settle on this
so what we are going to do next is
we are going to use the transition
property over here inside this so we'll
write from
position as all at 0.3 seconds with ease
you can see the transition
it looks cool
so let's move ahead and
going to style these icons as well so we
are going to write here
Dot
option underscore list Dot
option okay we have to write here option
and then we have to write here dot icon
we are going to define the height height
is going to be 26 pixels
then we have the width as 26 pixel again
then we have the border is
let's say 2 pixel
solid and
transparent
save it
and here you can see
we are going to change the Border radius
as well
so we'll write
radius as
5 pixels
in
okay let me check what the class name
for the stick and okay so we have one as
item I can take and the other one is
icon cross so what we are going to do is
we are going to copy it from here we are
going to
paste it here
and we are going to write here
color border color is going to be
let's use this one
it's odd so let's change the color let's
change it to this one
save it I think it looks good now
or maybe I don't know you guys can let
me know in the comment section or in the
chat section as well if you are
going through the video live so we have
to write here okay we have used
color twice so
let's do one thing let's make it color
is not visible as
I thought it will loan me
let's change the color
okay so we have to change the color for
take only
so we'll write over here tick
save it
check we have to write here dot tick
basically
right here like this
now and it looks fine so here you can
see it's green in color
not the green we wanted all
of you guys know the
color code for Green let me know
it's hard so here you can see
the green color is here
we need to make some changes over here
first so let's
copy this border color from here
paste it here
visible
okay we have to copy our GBA as well
so we'll write it over here save it now
and here you can see it's visible now
one thing we need to do is we need to
move back here
slow transparent we are done with the
Border radius we are going to align the
text at the
Center
save it looks good
we have to change the font size
font size is going to be 13 pixels pivot
and it looks fine we have to change the
line height
is going to be 24 pixels
save it
cool
we will
position as
little
okay it looks fine I guess
change
the background color to white
right over here
round let's see if it works or not
okay so here you guys can see it's
working fine
now we have to do the same thing for
wrong answer so we have the
classes
save it
okay let me check what the class was
what was the class I don't know it was
cross not wrong
so I will write cross over here save it
cross looks fine
we need to change the color and
background color
so here we are with red color
make it bright red let's see if it works
okay I guess I need to change the
background color for this section
to be honest
so the background we are going to keep
this one
thank you
I have no idea about the colors so if
you guys are facing any issues regarding
colors
and do let me know
okay it looks fine I guess
I don't know so now we have to do one
thing we have to change the RGB value
here we are going to make it red Okay
cool so we are going to copy this RGB
value from here
we are going to paste it here
we are going to save it so it looks fine
guys
let me check if the code is correct
okay it looks fine here
we need to make it
circular right so for that what we can
do is we can give the Border radius as
50. let's try it save the program and
here you can see let me change this
green color once
so let's save it
up it from here we are going to paste it
here
save it now
and that's it we are done with it right
the right and wrong are doing great not
great but they are fine as of now
so basically we are done with the
questions part
what we can do is you can put the
question number over here and so that we
have to write over here
one dot save it and here you have your
question
so these are the four options we are
done with the options as well now the
next part we are going to do is we are
going to do is
footer so we are going to write here dot
quiz box
foreign then we are going to write over
here height
it is going to be 60 pixels then we have
a bit width is going to be 100 pixels
of whatever width it has then we have
the display this place is going to be
Flex in this case then we have to align
the items at the
Center
finally we have to justify content as
well
space between
ish we need
put
padding as well so we'll write over here
padding heading is going to be 0 and 30
pixels
see but now it looks fine
go back to the HTML part and here we
have
this class is total questions
okay we have this pantac present within
the total question class
so we are going to style this particular
part two of two questions is not visible
over here
let's see
a question says here
fine not an issue so what we are going
to do is we are going to write over here
oh just copy it from here
we are going to copy it from here we are
going to paste it here then we are going
to write over here Dot
total underscore question
space spent so we are going to
style two of two questions fine
so we are going to write over here just
do one thing just make it one of two
because this is the first question in
our original quiz now so we are going to
write it like this
one of two questions so we are going to
write here
display as
flex and
user select is
no
you can see it says one of two questions
and next question over here
who we are going to do one more thing we
are going to write over here
footer
Hotel unders question
pan p
p is the paragraph tag so we have to
write here
hey so let me check it once what we have
inside the paragraph tag
so what we are going to do is we are
going to cut this off from here
P tag over here again
so we are going to paste it here
save it one of two questions it says
okay
raise low I'll get back to you guys in
the minutes so until then let's finish
it first so we'll write over here total
questions span
P so we'll write over your font
weight font weight is going to be 500
then we have
heading padding is going to be
zero space 5 pixels
and here you can see one of two
questions is working fine
displays Flex so it is 100 okay we have
to write here width has hundred percent
save it now the next question goes here
automatically
fine now we have to
edit the first style first so we'll
write over here
we'll copy it from here we'll paste it
here
we are going to write over here
first
okay first okay first child this is what
we are going to write over here we are
going to write padding adding left as 0
pixel
then we'll write over here
footer space Dot
next underscore
but we have to write here height
is going to be 40 pixels
then we have padding
padding is going to be 0 and 130 pixels
then we have font size
so we'll write over here font
size font size is going to be 18 pixels
then we have font weight so we'll write
over here font weight
Point weight is going to be 400 pixels
and bottom border is going to be
none
then after border we have outline so
we'll write outline
as
nine we are going to mention the font
color as well font color is going to be
white I guess let's check
okay it looks quite big for now
phone color is white and the background
color is
red
so we are going to write a background
background is going to be
red
Ing we have written 130 pixel it looks
fine now
you have to provide the Border radius as
well so we'll write over here border
let's provide the Border first so we are
going to write a one pixel
solid and red the same color
fine we are going to write here
border radius
or the radius is going to be 5 pixels
and we have to write here
cursor
cursor as pointer then we have to write
here
transition
we have to write a all
zero point three seconds and
e
now we have to put the hover effect as
well so what we are going to do is we
are going to
okay
copy it from here my bad
we are going to paste it here we are
going to use the hover effect so we'll
write Hoover over here and we'll
change the color on hovering the mouse
button
so we'll write over here
background
background we are going to put red first
and we are going to change the red color
up to a bit
that's it nothing else we are going to
do
let's make it a little bit darker
because it's not evident
what a color we have to change so we'll
write
border
so let's right over here one pixel
solid and we are going to copy this
color from here
save the program
and
you can see it looks good now
fine maybe good but I'm not sure about
this background color and watercolor on
Hoover effect so you guys can create it
on your own you guys can use better
colors than me of course
so let's move ahead and now what we are
going to do is we are going to create
the result box but before that let me
check if everything is right or not
next button is done right
we need to
see we need to color it as black that's
the thing we are
we forgotten
basically we forgot this
this box footer
quiz box footer we have to write here
background as black
okay now we need to change the color for
this
uh what we can say
question numbers
so we are going to write here colors
okay
you know within this pen tag maybe then
it will work so one of two questions you
can see we need to add an image over
here first
of the simply code logo basically we are
going to add or you can add any other
logo as well
so let me check if everything is fine or
not
to
everything else is fine there's one
thing where is this quiz box
right here display
in line
changes nothing
there you can see
that's the change it will get
so basically we are done with this part
as well now the next thing we are left
with is the result section
fine so let me show you what the result
section is
choose any one so this is a result
section this is completed and sorry you
got only
this is because of the JavaScript part
how many questions I got correct or how
many questions the user got correct is
because of the JavaScript part basically
we are going to do the HTML and CSS part
right now so let's move back to our HTML
file and we'll put a comment over here
so basically we are done
this div tag now yeah so we'll write
over here
comment so let's say we are writing
result box so that I can
remember it next time I'll use so we are
going to write here
div class
is result underscore box
now within this div tag you can see we
have all these images like we have we
have this Crown icon we have this icon
we have quiz completed written we have
two more buttons so we are going to use
these buttons now what we can do is
first of all the Dev tag is closed fine
now we are going to create another Dev
tag with classes
icon
and we'll write over here like this now
we'll write I class classes go going to
be fast for
round
fine
as for Crown
leave it
and here you can see the crown at the
top right
so what we are going to do is we are
going to
hit this one as well so we are done with
this the only thing is remaining is we
need to add the photo over here fine so
let's add the photo first and then we'll
see
what we can do so we have to add the
photo
here
so we are going to write here div
last is
one
and within this div tag we are going to
write image
IMG SRC is equals to Images slash simply
code.png Alt
to write simply code
that's it
you can see the image over here the
images
too big to handle right so what we are
going to do is we are going to style
this image
will move to this section
okay we are going to write here
puta
now I forgot the
class name for this image the class name
was image1
right here
going to be 200 pixels save it
a the image
okay
check
it's working now we don't need this
drift tag or just to use it not an issue
so we have to reduce the height of this
image as well
all right we are going to
put let's say 100 pixels
see 100 pixels is big
so we are going to put it 50
and we need to reduce the
width
so simply code
okay we are going to do it
140n
60 save it
a little bit
oh we are going to
keep it
55. let's see it looks fine so yeah here
we have our logo as you can see here
okay start quiz continue we have this
logo so we have another image where the
as you can see these basically we have
braces over here in our logo so you
can't see it right now but you can see
it in the
channel name or you can see the Channel
logo whatever video you are watching so
this is a
logo we are done with it now let's move
ahead and we'll now
continue with
the
result area fine so we are going to
write here
div class is going to be
come
complete underscore text okay we forgot
to do one more thing here
well move to the style section or we can
say the CSS file now we are going to
find
we are going to find the quiz block
quiz box we are going to put the display
as
a okay this one uses so yeah the display
is no we are back at the initial screen
overview
s so let's
let's go back to the HTML part again we
are going to write a complete text
I have
heated the
quiz fine
okay we have to show the score which we
are going to take
from the JavaScript part so we are going
to write is core
let's code text fine
so let's write something over here just
for
this and we are going to write here
sorry
you got only
now we are going to use the paragraph
tag over here
so one
out of
then we have to use the paragraph tag
again man out of two
fine
so save it here we have a text you have
completed the quiz and sorry you got
only one out of two
fine
I'll be done no we need to add two
buttons as well right so what we are
going to do is
we are going to add buttons so the
button class
we are going to write over here
button with classes
restart again
and we are going to write here the
button name is
play
quiz
fine
save it and here you can see the button
okay we have used the
let me check if we have used the restart
button previously so yeah we have this
restart button
and we have used the same class again
we are going to use
another button
okay so we have to write here div
class is equal to buttons
we have to cut this from here
paste it here
you have to add another button
with classes what was the other class
let me check the other class was
uh quit
okay it's going to be a new class
basically I guess we haven't used the
quid
quit class it
right
so yeah we have the quick class as well
one class is quit and the other class is
restart so we'll write over here quit
and what's the other button we
wait quiz so we'll write over here
quiz
fine
let's check it out okay both of them are
here
we have to write here quit
save it now
okay both of them are here both are
fine
now it's time to style them
so basically we are going to style the
hole
a result box fine
so this is uh buttons everything is fine
we are going
here now we are going to styler
a result box we'll write the first thing
we are going to write here is
Dot
let me check the class name once the
class name is result underscore box
so we have to write here
okay result underscore box
we have to copy it from here
we have to mention this class here as
well
at the initial where we mentioned all
the class names
just to bring it at the center
save it now and here you can see
let's move down and
so the next thing we are going to do is
we are going to put the background color
as white
now you can see it's completely visible
now we are going to put the width width
is going to be let's say 450 pixels then
we have the padding padding is going to
be 25 pixels and 30 pixels
then we have the Border radius border
radius is going to be 5 pixels then we
have the
display as Flex
and we have a line item set
enter
and then we have to justify the content
here as well so we'll write a justify
content as
space between
we have to mention Flex direction as
well so we'll write over here Flex
direction as
column
B it looks fine so we'll align the text
as well so let's say we are going to
write your text align at the
Center
see
my text align at the center now we have
to
manage this icon fine so this icon we
are going to manage
the second we are taking talking about
so we'll write over here
result underscore box Dot
icon
size
100 pixels
and then we have color
is going to be
origin bottom margin bottom is going to
be 10 pixels
save it and here you can see it looks
okay
thing we are going to do is we are going
to
style this text whichever text we have
like you have completed the quiz and
sorry you got only one out of two
questions or one out of five or one out
of three whatever it is
it's not our concern for now so let's do
this we are going to write here
okay dot result underscore box Dot
complete underscore text
on size font size is going to be 20
pixels
and we have to mention font weight as
well so font weight is going to be 500
save it
looks fine
now we are going to write here Dot
a result box Dot
score
underscore text
pan
we are going to write here display as
Flex
now we are left with
what we are left with the paragraph and
that's it
dot core
let's put margin over here as well so
we'll write over here
margin margin is okay this mistake we
are going to write margin over here
margin is going to be
10 pixels and
zero
leave it let's see
let's change the font size as well we
are going to write your font size font
size is going to be 18 pixel and we have
the font weight which is going to be
500 pixels
or you can say 500 again so it looks
fine
okay now we have to write here DOT score
underscore text space
span space p
we are going to write your font
weight as
600 then we have
a font weight we have let's go back and
let's see whatever
things we have so we have one and two
within the paragraph tag right
so we are going to write here
heading padding is going to be 0 and
4 pixels
save it you can see you got only one out
of two
not an issue but let's move ahead and we
are going to write here dot result
the score box
please Dot buttons we are going to do
we are going to write here display as
Flex
margin
is 20 pixels
and zero
result
underscore box
Dot
buttons please
button
margin margin is going to be 0 and 10
pixels
right height is going to be 40 pixels
and
if it once so here you can see it looks
fine right
padding we are going to give feeding we
are going to give let's see 18 pixels
let's do one thing let's not give
padding as still like this we are going
to do it 0 space 20.
that's it now the text is at the center
border we are going to remove we are
going to write here
as none
outline we are also going to write here
is none
font weight we are going to change font
weight we are going to put it as
500
the font looks good
border radius
for the radius we are going to write is
5 pixels
border we are also
let's see what's the Border in this
particular
we will
call it and blue so it looks fine I
guess
we have to change the cursor as well so
we'll write over here cursor as
pointer fine
uh we are done with it
almost done
and we have to write here
transition
0.3 second with
these buttons have the same class name
so if you can see here the class name is
restart for replay quiz and quit for
quit quiz and the class name is the same
for exitquizing continue quiz fine
so that's why
let's do one thing let's
find the code for buttons button restart
so here are the buttons what we are
going to do is we are going to copy this
buttons from here and we are going to
paste them together so that you guys
won't face any difficulty or even I also
run faves and you have to face any
difficulties
so this is
the last part now we are
almost done with the quiz right
so what we are going to do is we are
going to write here
the last thing we are going to write
here is
let's write over here
we have to write here inside the result
box
will write
transform
Translate
from
minus 50 percent
deposit
we've tried here minus 50.
and then we have to mention scale here
as well
so we'll write over here
so first scale we are going to write
here what
0.9
save it
and here you can see we are done
obviously this size is different here in
this case so we are almost done so if
you want to see
everything from this start
so we'll write over here
what we can write
display is none fine save it
a
let me check
oh
the front end of our application is
almost ready
we are done with everything
we are done with the info box we created
the info box
let's
so here you can see it is the info box
we'll move to the result box
result box
I'm going to write here
display is
here we are going to remove this
I mean so you guys can
see like we can
we can do is we can put display as none
for
let's do one thing
that's the reason it's not going so what
we are going to do is we are going to
put it done here
it you can see so
what we are going to do is we are going
to show it from the very beginning I'm
going to do it guys so let me take you
through
here let me just put it as display is
none
save it so this is the initial point
let me show it side by side
so this is the initial point the start
quiz and
fine click on start quiz so you could
get this rules and regulations page
so for rules and regulations we need to
remove this save it now and here you can
see we we have our rules and regulations
page or we can say rules and regulations
box
and after this we are going to put it
back here save it we have the quiz box
fine so click on continue it takes you
to the quiz
and we are going to remove this one now
save it and here here you can see it's a
quiz box
which is
somewhat same so here you can see the
quiz box
it looks fine yeah
and we have this simply code logo as
well here and here in both the cases the
next question
we have almost everything is almost the
same fine
now the next thing is
let me just remove this one as well and
we will go back to
result box and here we will write
display as
Flex so here is a result box click on
next question
here is a
result box so it says you got only one
out of two the quiz is completed
cool it looks nice right
so guys that's all for this video and I
hope you guys understood the concept of
HTML and CSS in creating the front end
of a web application which is a quiz app
well that's a wrap on HTML full course
we hope you found this video informative
and helpful by now you should have a
good understanding of HTML Concepts and
be well on your way to become a web
developer if you are interested in
learning more about full stack web
development then there are plenty of
resources available online you can also
check out our website for more
information on full stack web
development training courses and
certifications so thank you for watching
and we'll see you next time
foreign
hi there if you like this video
subscribe to the simply learned YouTube
channel and click here to watch similar
videos turn it up and get certified
click here