Build your own mobile friendly website with Flask.

Requirements

  • Python 3.8+ or Anaconda
  • Integrated Development Environment (IDE)

Development Framework

Screenshoot from Pycharm

Initialize your first project

Write your first python file

pip install flask == 1.1.2
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
return "Hello World!"


if __name__ == "__main__":
app.directory='./'
app.run(host='127.0.0.1', port=5000)

Prepare your folder structure

Webpage_Tutorial/

├── static
│ └──css
├── templates
│ └──layouts
└── run.py

Insert your CSS

Create your first HTML file

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>This is a tutorial</title>
<meta name="description" content="I present to you a free tutorial for developing a mobile friendly app"/>
<meta name="keywords" content="Tutorial, Mobile, Free"/>
<meta name="author" content="<author>" />
<meta name="copyright" content="<author>" />
<meta name="robots" content="index"/>
<meta name="robots" content="follow"/>
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">


<link rel="stylesheet" href="./static/css/normalize.css"/>
<link rel="stylesheet" href="./static/css/skeleton.css"/>

</head>
<body>
<div class="container">

<div style="clear: both">
&nbsp;

{% block content%}{% endblock %}

</div>

</div>
</body>
</html>
{% extends "layouts/main.html" %}

{% block content%}

</body>

<h5>{{greetings}}</h5>

</body>

{% endblock %}
@app.route("/")
def index():
greetings = "Hello World"
return render_template("home.html", greetings=greetings)

Create a responsive navigation bar

/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
background-color: grey;
color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
line-height: 30px;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}

</style>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<div class="dropdown">
<button class="dropbtn">Examples
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/Example1">Example 1</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>This is a tutorial </title>
<meta name="description" content="I present to you a free tutorial for developing a mobile friendly app"/>
<meta name="keywords" content="Tutorial, Mobile, Free"/>
<meta name="author" content="<author>" />
<meta name="copyright" content="<author>" />
<meta name="robots" content="index"/>
<meta name="robots" content="follow"/>
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">


<link rel="stylesheet" href="./static/css/normalize.css"/>
<link rel="stylesheet" href="./static/css/skeleton.css"/>
<link rel="stylesheet" href="./static/css/style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>
<body>
<div class="container">
<div class="topnav" id="myTopnav">
<a href="/" class="active">Home</a>
<div class="dropdown">
<button class="dropbtn">Examples
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/Example1">Example 1 </a>
</div>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

<div style="clear: both">
&nbsp;

{% block content%}{% endblock %}

</div>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

</div>
</body>
</html>

--

--

--

I am a data analyst discovering the unlimited world of coding and data.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

DLithe Bootcamp .NET Full Stack Developer | My Bootcamp Journey at DLitheWeek1(MAR 21-MAR26).

MovieBloc Monthly Newsletter- April 2021

How to Make Money Online Through Translation Work

List of Top Collaboration Software In 2021 — Latest Quadrant Ranking Released by 360Quadrants

Casino Online Playcasinosww.com

Learn how to use webhooks with Mattermost slash commands 🦄

VB: Store and Download Files

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Antonio Blago

Antonio Blago

I am a data analyst discovering the unlimited world of coding and data.

More from Medium

Utility Cost Tracker for Smart Home devices with Python and Django

Creating a login API with Flask

How to run multiple python scripts on AWS EC2 instance

Flask based domain name information checker