How to build simple websites with Flask

How to build simple websites with Flask?

In this tutorial, we are going to learn How to build simple websites with Flask. Before starting the tutorial you must have to install the below things in your desktop/Laptop.

1. Install Python 3.6+ and PIP
2. Install virtualenv
3. Create our project directory
4. Create virtual environment
5. Install required Python Flask packages

For Python Flask installation refer the Previous tutorial Flask Tutorials- Python Flask MongoDB Setup in Simple Steps. After the successfully installation and now we’re ready to go for development.

First, we need to create the app.py file in our project main directory and we just want to import flask by using “from flask import Flask, render_template” and let’s also import render underscore template.

After that we have to create an app and we call this Flask and it’s just Flask(__name__) creates an app in an instance of flask running creates an app for us now we want to set a route and we’ll just create one app dot route @app.route(‘/’). and then we want this to be the forward slash (/) will redirect to index page or home page.

So now let’s write some logic for this let’s def index so we want to create this index and inside of here we can just return some value or you can return anything. We just return some text “My First Project” and save this and now let’s check in the browser.

Here this is our localhost and it’s port 5000 so the flask web server is running on port 5000 it’s listening. We just copy and paste the URL in the browser and just we get My First Project.

So we could go render redirect the HTML template and then point this to index.html now this renders a template. The code below.

Let’s create new folder templates in the project directory and when we do that pops up so now we can create a new file inside of templates and let’s file save as the index.html.

How to Use Bootstrap Library in Python Flask?

Let’s now I am going to use the bootstrap CSS framework to design the index.html.

The bootstrap library

1. Creating Navigation Bar using Bootstrap

2. Adding Bootstrap Slider

The HTML Code Below

3. Creating Service Block

Creating the service block using Bootstrap Card. The HTML code below.

4. Creating Our Work section

5. Create Footer

Conclusion

Hope this tutorial will help you to create a simple website using Python Flask, Bootstrap fame work. So please like and share.

Download Source code