April 10, 2020
Bootstrap Website Template Design from Scratch Part-1

Bootstrap Website Template Design from Scratch Part-1


Hey everyone, its akshay and welcome back
to daily tuition youtube channel. In this video tutorial we are going to create
this beautiful bootstrap blog from scratch. We will create this blog together. So open up your compiler and just follow me. But Before we start this video if you haven�t
subscribe to daily tuition channel then must click on subscribe button for weekly new design
and also click on like button if you find something useful in this video. So as always we say, before we getting let
let�s get started�. First create a new project. In that project add image folder and insert
some images. We already inserted all images in the image
folder which we are using in this tutorial. Then create a new file index.html and style.css. We will horizontally split this file to right
and left. Then we create simple html5 snippet and link
style.css file. Remain webpage title. Now we want to include bootstrap classes in
my project. So from the bootstrap website we will copy
all the bootstrap cdn and paste it in the head tag. You can copy this cdn in the description of
this video. We will remove script tag from the head tag
and place it in before closing body tag. Then we want to insert some icon in our blog
so we will go to font awesome website and copy this tag and paste it here. At the last we want to add some font family. So we will insert it from Google font. Copy this font link and paste it in the head
tag. Now everything is ready. Move to the body tag. And create div with social bar and light blue
css class. In this div create I tag with fab fa-facebook
class. This class will include Facebook icon in the
project. So now we need to create some style to this
icon. In the style.css file create body class with
0 margin and 0 padding to remove padding and margin from all html tags. Then create ligthblue class with background
color- ; After this create social class. And add text align right. Width 100% and height 3%. Text align will align icon on the right side
of the screen. Then add bootstrap padding right class. Copy and paste this I tag and just remove
Facebook icon and add twitter. Now we need to create some space between this
icons. So we will use margin right bootstrap class
to create right margin. We will add this margin class to all of our
icons. Just copy this tag and paste it as much as
you want. And then just change this icon to instagram,
youtube, pinterest , rss feed and google plus. Now we want to create a title of our blog
with tagline. So create div with container fluid class. Add row in container fluid. In the row create col-3 bootstrap class. Then add h1 tag and type your blog title. We will use our channel name here. And then create tagline with the paragraph
tag. We want to align this title to right. And add some padding top. now we will create class in style.css file
for h1 and paragraph tag. And add font family which we use from google
font. Then create a blank column to create some
space. And add div with column 8. In this column we want to show banner add. so we will use image element to insert this
ads. We insert img fluid class and specify image
location in the source. We will use padding left and padding y to
this ads. Now we are going to create navigation menu. To create this insert nav tag with navbar
bootstrap class. To change navbar color black just use navbar
inverse bg-inverse class. And then add navbar toggleable-md class for
color scheme. In the navbar create navbar brand class. And insert home icon using font awesome class. Then create div tag with collapse navbar-collapse
class. And add id navbar nav alt markup id. After this create div with navbar � nav
class. And create anchor tag with nav-item nav-link
and active class. We will leave href attribute blank. And specify your navigation text here. We will write download template. You can change this whatever you want. Then create another nav item with nav link
and active class with blank href attribute. if you want You can specify url in this href
attribute. And here we will take services nav item. To save our time make copy of this anchor
tag. And then just change the text. Just like pricing, documentation and contact
us. So now our header section was completed. In the next video we will create main section
of our blog. So don�t go anywhere. We will get back to you in the next part of
this tutorial. In the beginning of this video If you forget
to subscribe this channel Then just press subscribe button and press bell icon to get
notification of my every new video. That�s all for today. See you in the next video. Till then be happy and keep watching.

5 thoughts on “Bootstrap Website Template Design from Scratch Part-1

Leave a Reply

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