Hello and welcome to another new episode of learning simplified.
In this part we are going to consider the fragment,this one.
This is the fragment that we are going to concentrate in this tutorial.
Now this fragment can father be subdivided into three main layers as indicated by the
boxes below.
This is the first one, the red box that will hold the featured products headline
of this part of the template.
This is the second box that is the second div that will hold all the paragraph
contents inside, and this is the third, the green box that will practically hold all the
images along with their captions.
Now let's first black out the above two parts, that means this featured products and
the paragraph parts and let's concentrate into this green box.
It is further be subdivided into two more boxes, into two
more divs, the extreme left box and the extreme right box, those will contain images along
with their captions.
So this is the first one, the extreme left box, with
the image and the caption, the red one, and this is the extreme right box, the blue box,
in a similar way that will hold the images and the captions.
This is the way we are going to create this part of the template
in this tutorial.
All you need to do is to carefully watch the video till the end.
So this is the thing that we are going to learn in this tutorial, please keep
watching this video till end and subscribe us to stay tuned for more.
Keep watching and enjoy learning.
So let's hop into our tutorial.
As we can see as we have told you before, that this is the part that has been constructed
so far of this template.
This is the template that we are about to build and we
have built so far up to this part.
So the rest of the things should be built now, such as it looks like this one.
This is the end product, and after that we will be
creating the last part of this template which is this one.
So let's get back to our tutorial.
So the first thing that we are going to do is to create this featured
products here.
So that is why I have taken an h3, all I did here, I have customized it, the font family
is sailregular, you remember the font here?
The sailregular font that has been introduced into this tutorial in the very beginning?
And then the font size is 2 em, I have restricted the font size to 2 em, the text alignment
being extreme left, the colour being this one.
And in this index.HTML,....
Now let's get back to our project, and reload.
And we can see that the featured products has already been introduced into our web browser.
So this is the part.
Now the second thing that we are about to do here is
the paragraph element.
So that is why we need to introduce another new h4 element..
So all we are doing we are just creating this h4 element...
I have practically introduced this font family, this slabo 27px,
so all we need to do, get into Google fonts, search for slabo 27px, font that we are looking
here, here it is.
We need to copy this font family.
Then let's come back to our tutorial and paste it over here.
Now the font size is...
Let's get back to Google, and here we will be looking
for the dummy text generator as it been seen here.
Let's get back to index.HTML,here.....
Now as I have placed it over here, now all we need to do we need to press
Control + S, and get back to our project and reload.
Now this is our project.
Let's reload and we can see that the paragraph element is here.
I think the font family is not working as it is now using the default
font family as prescribed by the browser.
So we need to check it out what is happening here.
Here it is, I have practically used h3 again, and here it is
h4.
So all I need is to convert it to h4 and here it is, the h4 tag.
So let's get back to our project and reload, and there
it is.The font size is a little bit bigger.
So all we need to do we need to change it, as I have told you that we need to make experiments
on it, so I have provided this 0.9em over here, and let's get back to
our project and reload and we can see that this is the font family and this is the font
size that we have prescribed so far.
So these two parts here, as we can see that these two parts are now fixed and created,
it has no problem.
Another thing we need to provide some padding if it is
needed to be done here.
So that is why I am getting back to h4 tag and I am providing here the padding...
A padding of 1EM.
Let's get back to our project and reload and we can see that this is the thing.
But this thing seems to be a little bit of...
More.
So all we need to do we need to make it a little bit less here, go with
it, and here it is.
So we can see that the padding is alright.
Now it is time for the main part of this template, and it is the images, this images with captions.
As we can see that there are two images present in to the central position, the first thing
all we need to do is to create another div.
So I'm naming it image holder....
That means this thing will be now centrally positioned, centrally aligned, getting back
to index.HTML and beneath this h4 tag, we are introducing now
the div here...
As we can see that a div is Now introduced here and, still we cannot see it as it cannot
render its background properties, that's why it's keeping
invisible in front of us, all we need to do we need to get back to our project and...
First of all provide the background colour as I have told you that background
colour is the only colour that distinguishes a particular div from another.
So provide any background colour as I am providing here the black background.
Press control+s, get back to your project and reload,
and we can see that the div is been introduced into your featured products segment.
All I did behind the scene is that...
Practically in this image folder I have already introduced two images, with a particular dimension
of 500px by 500px.
It is a square one.
So all we need to do is to get back to our project and before
making anything
Let's brake this form-feature-parent-left-box-imageholder into two particular divs...
So all I am going to do I am going to copy this thing again, let's get back to
index.
HTML and inside this div, I am now going to introduce these two divs over here, ok now
we are good to go.
So all we need to do now is to introduce the image
path.
Same thing should be done over here.
In case of right box element..
Now these two things been assigned over here.
So all we need to do we need to get back to index.html and here inside this left box...
Let's call image source...
All we need to do we need to copy it, and inside this right box we need to paste it
again, this time changing this file name to flower2,
and this alt tag attribute to flower2 as we can see here.
No first of all press control + s, get back to your project,
reload and see what is happening out there.
So this is the display that you can see.
Now it is time to remove the background but before that we need to make some
certain orientation such as, delete some of these parts, up to this part I will be deleting
some of these parts, no need of it.
There it is.
Another thing,If you are asked to make these images circular in nature
then all you need to do you need to get back to your project, here in this stylesheet.css,
and within these images, you need to mention this border radius.
Here it is, I have mentioned the border radii.
Now let's get back to our project and reload and we can see that this images
they are now circular in nature.
They are not square anymore.
Now it is time to comment out these backgrounds over here.
So we are getting back....
Now let's get back to our project and press control + s, and we can see that it is done.
Another thing that we need to mention all we did was just we entered into this form-
feature - parent, and we provided a flat version of 30px and we can see that each and every
contents inside this particular element, it is now descending down a total distance of
30px from the top, that is why this is the only change, this is the only change that
I have done so far.
We do not have to change anything anywhere else.
All we need to do we need to make a change on a particular place coma and this change
will be reflected in your browser through wise, throughout into your project.
That is why I have always enforced you to create, to wrap your contents inside a particular
wrapper and then you proceed forward.
This will reduce your time in your post-project condition.
Now the remaining thing is, to present your captions.
In this particular case i'll be returning back to your project, and here I will be including
a new, particular tag that is known as figcaption as we can
see here.
This is practically an HTML5 element, but you may include it over here and see the outcome
is coming.
If you are not satisfied with this figcaption, then we
may change it anytime to h2 or h3 that means the normal header tag that is used over here,
but first of all we need to learn about it and when will be knowing about,
learning about HTML5 then we will be observing how to use this..
So let's get back to our project.
Here we have this name, if you get back to your template we
can see that, here are the names known as red revolution and Serpenta.
So these are the things that we are going to write
over here.
Just press control+S, get back to your project and reload, these two things are coming right
over here.
We have to customize this figcaption element over
here, get back to our project and here.....
So let's get back to our project and reload and we can see that all these things are now
placed awesome.
Practically we need to change these font colours over here.
So that is why we need to get back to the template and...
Here we mention this colour, no need to provide this line
height, just provide a padding off, get back to your project reload and you can see that
this project is already present inside your document, inside your web
browser.
This is the thing that we are going to do in our next tutorial and we are going to end
up this project as soon as possible, and then we will be proceeding towards on
next tutorial which is concerned about bootstrap presentation or bootstrap mobile responsiveness
of your website, how to make your website mobile responsive.
So if you have liked our tutorial do not hesitate to hit that red subscribe button.
I hope you have liked our tutorial.
We will hope to see you in our next tutorial, till
then, bye.
For more infomation >> Щенячий патруль новые серии ПЛОХОЙ ПАТРУЛЬ Мультики для детей Игрушки Герои в масках Видео для детей - Duration: 6:51. 
For more infomation >> RED BALL 4 RED BALL VS ZOMBIES is NINTENDO SQUARES #32 entertainment video cartoon game - Duration: 9:48. 
Không có nhận xét nào:
Đăng nhận xét