Code Template from Scratch:Header Banner with HTML and CSS


From this part we are going to start coding
our template. So stay tuned. Hello and welcome to another new episode of
learning simplified. From this part of this
series of tutorial we are going to start coding our template. Make sure that you are
connected to this page, you are connected to this channel. So we are going to build up
this whole template but first of all as we can see this is the header part where we have
a certain header area and then we have this banner element with a background image and
there are some texts on to it. So all we are going to do we are going to
start coding our template and we are going to start from
the header part, from the head part of this particular template. So let’s proceed. Now in the final stage that we will be achieving
over here is this one. Now as we can see
we have created the index.html in our previous tutorial as we have observed and we have
created another custom_stylesheet.CSS and we had linked this index.html with
bootstrap.min.css and custom_stylesheet.CSS. As we have connected this page with this
bootstrap.min.css, that is why before this closing body tag we have connected this page
to bootstrap.min.js in order that every feature of bootstrap is accessible. So these are
the requirements we had done and this is the final output so far that we have observed
up to our previous tutorial. Now in this stage we are creating something
which is equivalent to this one. This is this means we are going to create
this header part over here. Now in the first case
we are going to create the containing element. Now you can use here
‘container’ class if you want a 1200px container every of your content to be confined
within a 1200px container and if you wish that your contents become full page, then
all you need to do you need to consider this one. ‘Container- fluid’. Now this is the thing
in the first case; we are going to make sure that this div is closed; another thing,
whenever you are creating something like this always make sure that the divs are closed. That means whenever you are opening a div
your approach should be something like this; you are opening this Div, that means you have
to close this div first. Anything that
comes inside you should go on further, like this. So we are consuming up all those 12
grids over here and if you do wish that your content to be fixed within a mobile device
properly then all you need to do you need to make sure that col-sm-12 is on. And inside
this col-sm-12, the first thing that we are going to see is ‘For related information
call us at’ this one. So this is the thing that we need to ensure
here. So that is why we
are creating H3 tag. So up to this part we have created this thing;
so this is the result, this will be the output so far that we have created and we
can see that the bootstrap features are been reflected over here. If we press F12 and we click on it and we
can see that these are the properties which is been observed here. You can see that this font family font size,
font-weight, or line- height, margin-top, margin-bottom every of this short of things
those are being reflected into your web page and this is due to the linkage with the
bootstrap.min.css. That means so far is styling Properties are
being attributed by the Bootstrap framework. In this particular case we can see that this
is practically the output of the header part. So naturally we need to modify our framework
such that it executes this kind of properties as we can
see here. So let’s get back to our project
and here we are using another class along with col-sm-12 and it is head banner. So we are
getting back to our custom style sheet and here we are providing all these properties. Now we will be needing to provide a background
image. Which will be a linear gradient. So
why linear gradient? We can see that this is practically executing
a linear gradient nature over here. So we need to pick up these two or three or
more or whatever it is, these color properties from here. So that is why we are now getting back to
our GIMP software where we have already opened these
things and here first of all let’s select this topmost color property; there it goes. If we now click we can see that this is the
color property. So copy and here we need to paste it. This is the first color stop, and
in order to achieve the second one, we need to select the last color stop here, we need
to see what kind of color code is been imposed over here; we have picked it up and now
click here, this is the color code. We need to copy it and we need to paste it
here. Now
we will be pasting it 4 more Times… Providing on with this hack codes here. Now pressing Control + s and getting back
to our project and reloading and we can see that
this is the thing which is been created so far
and as we can see that here are two gaps at the two ends, so this is the thing that we
need to rectify. If we use this class name along with this
col-sm-12 property then there will be an inbuilt padding of 15px from both
the ends – from the left and from the right. But instead of using it over here if we just
cut it and then paste it here, and now if we reload we can see that all these paddings
are gone. Now instead of using this
‘container-fluid’ if we use here ‘container’ only, reload and now you can see that this
is a 1200px container that has been created Over here. So instead of using
‘container-fluid’ if we use ‘conatiner’ then the contents will be confined within a
1200px container element and instead of using ‘container’ if we now use here
‘container-fluid’ then your contents will be coming full page. Then your contents will
be appearing full page. So this is the first thing that we have created
up to this one. Now we have to make
this alignment to the extreme right position as we can see here and we have to change
this particular font family and then we need to change this color element; so that is why
we are getting back to our index.html and from here, we need to modify this head-banner
h3. Let’s get back to customstylesheet.CSS and
here… Another thing. We need to change this font family into this
one, so, what was the font family? The font family here in this case used was
‘josefin slab’. So that is why we
need to get back to Google and here we will be searching for google fonts. And after
opening this Google fonts, we will be searching for ‘josefine slab’. So all we need to
do first, we need to copy this one, we need to get back to index.html and below this
custom style sheet, we are going to paste this one. Inside this custom style sheet.css,
all we are going to do now we are going to copy this thing and we are going to paste
it here. We have specified the font family and now
we have to specify the font size; just as we can see that the font size is now changed
and the font family is getting changed here. We need to change the color and the text alignment
and the line-height. So all those
things are now changed. So let’s get back to our project and reload
and we can see that already this thing, these attributes are changed;
we can see that this is the for related information; press control + shift
+ m and this is the exact thing that is going to be observed at this particular case under
320 by 480px, this is the exact thing that we are going to observe at the device width
of 320px. Now if we get back to our template then we
can see that the number is written in a different font color. So this is what in the next case we need to
rectify. Get back here
and here… Come back and reload and we can see that the
mobile number is now changed. It is not getting a different color then the
previous one. So this is the part that we
have created…

Leave a Reply

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