How to create Images with captions in HTML and CSS – Finalizing Template

How to create Images with captions in HTML and CSS – Finalizing Template


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.

Leave a Reply

Your email address will not be published. Required fields are marked *