Quick Expense Manger. Your free expense manager. Lots of features. The application is also ad free.

How to create a blog using bootstrap and django and go live from scratch - part - I

Posted on Nov. 10, 2017
blog-django-bootstrap-scratch

Now a days there are many CMSs like word press using which one can quickly create a blog and go online. But CMSs have its own advantages and disadvantages and to customize something for your convenience can be real pain. However for many tech savvy guys like me, building something from scratch has its own thrill and excitement. Being fresh from creating my blog from scratch and going live, in this series of posts I would dive into step by step procedure for creating your blog and go online quickly.

Creating your blog will involve two main things.


  1. The front end to render your data

  2. The back end to store your data

For creating my blog's front end, I used bootstrap 3 and for the back end I used django. Using bootstrap one can develop front ends real quick. Although you need a little knowledge of how html and css works, but don't worry I will explain each minute details and they are very easy to follow. We will use the below template as the main page of our dummy blog and once we are done with the front end we will have the template working.


The interesting thing is, this is a responsive page. If you change your browser size, the page changes accordingly and you can view your page in PC, Tablet, Mobile etc. and thanks to bootstrap you need not write any extra code for that.

You can download the source code for this front end from here. Now unzip the downloaded file and keep the folder structure intact. Open the index.html with any browser of your choice and you should be able to see the template. Try changing the size of your browser to match the size of PC, Tablet and Mobile and you will see the page changing accordingly.

Before we go and look at the source code, I would like to give a briefing about some html terms for those who don't know anything about html or those who want to refresh their memory.

The web page that you are looking at is a html document. A html document may contain many sections or divisions. A division can be represented with a <div></div> and inside this you can write the content for that division. But the raw content does not have any style or color. It's simply black and white with prdefined font. So, for a particular div you can have a style attribute. Say for a div, you want to set the background color of that particular div to black. Then you can write the below code to include that style attribute into your div.

<div style="background:#000;">
Content of the div
</div>

Inside the style attribute you set the background to #000. What is this #000. It's a color code for the black color. Any color is a mixture of Red,Green and Blue. You mix different amount of red, green and blue and you get a new color. You can visualize it as amount of light. #000 means no light so it becomes black and #fff means maximum light and so it becomes white. Any other color can be in between #000 and #fff. You can search more about color codes.

Now let's get back to our topic. In the source code you have noticed that in the divs there are some class attributes. A class is nothing but place holder for the style. It's highly recommended that you separate your HTML code from the styles. With all the styles defined in the HTML itself, it makes the HTML ugly and less readable. So, for the above example what we can do is, we can create a separate CSS file say style.css and put the below code inside it.

.myBackground{
background:#000;
}

In the div we can simple add the class myBackground as below.

<div class="myBackground">
Content of the div
</div>

The point to be noted that in the style.css file, inside that myBackground class we can add many other styles like bottom-margin, top-margin, border etc. and effect of that will be visible in your page. By doing this we can completely separate the style from the HTML structure. The only thing that you need to do is refer that css file in the <head></head> portion of your html file like below.

<link href='path/to/your/css/file' rel="stylesheet" />

You have to give the path of your css file in the href attribute of the link and you are good to go.

Interesting thing about Bootstrap is, there are many predefined classes to serve most of your need and it will spare you from writing your own code. Now if we go to <head></head> portion of our html code we can see the below lines.

<head>
<!-- Title & Description for Search Engine queries -->
<title>Demo Blog</title>
<meta name="description" content="This is dummy blog"/>
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />
<!-- Bootstrap CSS -->
<link href='static/bootstrap/css/bootstrap.min.css' rel="stylesheet" />
<link href='static/includes/css/bootstrap-glyphicons.css' rel="stylesheet" />
</head>

The text included in <!-- --> are comments. The String written inside the <title></title> tag is the string that appears on your browser. The <meta></meta> section is the metadata about your site/blog/page. The search Engines like Google, looks into the title and the meta description to find the match for a user query. So, set meaningful title and description that will help the search engine to list your blog/site ahead of others.

In the <link></link> as explained above we have refereed to the css file that we have downloaded from Bootstrap.

Now we will go through the source code of the Navigation bar. Open the index.html file in any editor ( I prefer Notepad++) and you will see the source code. We will go through each section of the source code. Below is the code written between the comments nav-bar begins and nav-bar ends. The code is used to create the black navigation bar at the top of the page.

<div class="container" >
<div class="navbar navbar-fixed-top" style="background:#000">
<div class="container">
<!--nav bar collapse button starts-->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse"
data-toggle="collapse" type="button">
<!--These are three lines on the toggle button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--nav bar collapse button ends-->
<!-- nav-collapse begins -->
<div class="nav-collapse collapse navbar-responsive-collapse">
<!-- nav bar item begins -->
<ul class="nav navbar-nav">
<li>
<a href="#" style="color:#fff;font-weight:bold;
border-right:1px solid #fff;
border-left:1px solid #ddd;">Home
</a>
</li>
<li>
<a href="#" style="color:#fff;font-weight:bold;
border-right:1px solid #fff;">About
</a>
</li>
</ul>
<!-- nav bar item ends -->
<!-- Search Form Begins -->
<form class="navbar-form pull-right searchPart" method="POST">
<input type="text" name="search_name" class="form-control"
placeholder="Search this site..." id="searchInput"
style="width:200px"/>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span></button>
</form>
<!-- Search Form Ends -->
</div><!--nav-collapse ends-->
</div><!-- end container -->
</div><!-- end nav-bar -->
</div><!--end container-->


At very first we will define a section/division in our page for the navigation bar. So, we have started with the line <div class="container">. container is a bootstrap class and plays important part in changing the page content while we re-size our browser. Let's look into the next line.


<div class="navbar navbar-fixed-top" style="background:#000" rel="background:#000" rel="background:#000" rel="background:#000" rel="background:#000" rel="background:#000" rel="background:#000" rel="background:#000" rel="background:#000" rel="background:#000">

This will create an empty navigation bar and will fix it at the top. A fixed navigation bar means, your navigation bar will not scroll up and disappear as you scroll down the page. We have set the background color of the navigation bar to black as explained above. I am very lazy guy and including the styles in the HTML itself but you please create a separate custom css and put your styles there as explained above.

The next line starts another container inside the navigation bar to include the contents of the navigation bar.

<div class="container">

The next lines are for the hidden toggle button in the navigation bar.

<button class="navbar-toggle" data-target=".navbar-responsive-collapse" 
data-toggle="collapse" type="button">
<!--These are three lines on the toggle button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

Re-size your browser to the size of a mobile and you will see the toggle button appearing at the upper right corner of your browser. Click that and you will be able to see the content of the navigation bar. The toggle button has the bootstrap class navbar-toggle and the data-target=".navbar-responsive-collapse". The data-target collapses the content of the div which has the class navbar-responsive-collapse (we will see this below). The three lines starting with the tag <span> are the three lines in the toggle button. icon-bar is also a bootstrap class. Now let's go through the nav bar contents.

<div class="nav-collapse collapse navbar-responsive-collapse">
<!-- nav bar item begins -->
<ul class="nav navbar-nav">
<li>
<a href="#" style="color:#fff;font-weight:bold;
border-right:1px solid #fff;
border-left:1px solid #ddd;">Home
</a>
</li>
<li>
<a href="#" style="color:#fff;font-weight:bold;
border-right:1px solid #fff;">About
</a>
</li>
</ul>
<!-- nav bar item ends -->
<!-- Search Form Begins -->
<form class="navbar-form pull-right searchPart" method="POST">
<input type="text" name="search_name" class="form-control"
placeholder="Search this site..." id="searchInput"
style="width:200px"/>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span></button>
</form>
<!-- Search Form Ends -->
</div><!--nav-collapse ends-->

As we can see from the very first line that the content div has the class navbar-responsive-collapse along with two other bootstrap classes (An element can have multiple classes and all the properties defined in each class will have their effect on the element). So, the toggle button will target the content of this div once you re-size your browser to the size of mobile or tablet. Inside the div we can see an <ul></ul> element. It represents an un-ordered list with classes nav and navbar-nav which define the default style of the list.

<ul class="nav navbar-nav">
<li>
<a href="#" style="color:#fff;font-weight:bold;
border-right:1px solid #fff;
border-left:1px solid #ddd;">Home
</a>
</li>
<li>
<a href="#" style="color:#fff;font-weight:bold;
border-right:1px solid #fff;">About
</a>
</li>
</ul>

Inside that we have two list items (You can add as many as you want !). One is Home and the other is About. The <a> tag associated with each list item suggests that these items are actually links. So, something should happen ( A new page may open up) if you click on them. As of now I have not added any functionality to these items, but we will add as we progress through the series. However I have added some styles to these links (Please include your styles in separate CSS. Don't be lazy like me). Theses are simple styles. For example the style

border-right:1px solid #fff;

means, draw a solid border of thickness 1 pixel on the right side of the element and set the color of the border as white. Because of this you see the slick white line on the right of Home and About. I have also added a border to the left of the Home element.

Next comes the search form. You can provide a facility to the user to search your blog for articles. So, when they enter something in the search box and hit the search icon you display some articles related to the search. The search form does that. Below is the code for the search form display.

    <!-- Search Form Begins -->
<form class="navbar-form pull-right" method="POST">
<input type="text" name="search_name" class="form-control"
placeholder="Search this site..." id="searchInput"
style="width:200px"/>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span></button>
</form>
<!-- Search Form Ends -->

A form begins with the tag form. It has the boot strap classes navbar-form and pull-right. The pull-right pulls the form to the right of the browser. The form has two elements. One is input and the other is button.

input:


  • the type = "text" signifies that its a text box.

  • the attribute name assigns a name to this text box and the attribute id assigns an Id to the text box. placeholder attribute gives a hint to the user what this text box is about.

button:

The button has the type submit that means the form is submitted when you hit the button. But to where. We will see the form submission later in the series. Bootstrap has predefined button classes like btn-default which gives you a black button, btn-primary which gives you a blue button, btn-danger which gives you a red button etc. Here we have chosen the btn-default and it gives us a black button. The span tag inside the button tells us what should be there on the button. It tells us that the button should have a search-icon on it. You can explore the Bootstrap site to know more about glyph icons and buttons.

So, that's it. We have our navigation bar ready. In the next article we will go through the other sections of the HTML source code. Please leave your queries in the comments section.





Sharing is Caring!

Quick Expense Manger. Your free expense manager. Lots of features. The application is also ad free.

GET FREE UPDATES


RECOMMENDED POSTS FOR YOU


profile image

Kaushik Baruah


ABOUT

My name is Kaushik Baruah and I am the chief blogger on this Blog. I have developed this Blog from scratch using Django as the backend and here I like to share my experience as software engineer and research engineer with my online readers. I will try to focus on career planning, latest emerging technologies and tutorials on various computer science subjects. You can follow me on Twitter, Facebook and Google+

GET FREE UPDATES

POPULAR POSTS

Copyright © 2018
About Us

My name is Kaushik Baruah and I am the chief blogger on this Blog. I have developed this Blog from scratch using Django as the backend and here I like to share my experience as software engineer and research engineer with my online readers. I will try to focus on career planning, latest emerging technologies and tutorials on various computer science subjects.

Get Free Updates