Full Stack web development in Python, Flask and MySql — part1

Joseph Rominda
Sep 8, 2018 · 10 min read

Creating the Home Page.

The Completed css style sheets for the entire project

style.css

media_queries.css

This is a series of tutorials on Web Design and Development with Python and the Flask framework. I hope to complete this series of tutorials in the course of 2 months. These tutorials are preferably for Intermediate Developers and advanced Developers who want to learn how to develop web applications in Python and Flask and MySql.

Web App features.

We will be creating a Blog, that will include the following features, A user Registration and Login system (the login system will also include the facebook login api), feature to add, edit and delete blog posts, a profile page, password reset, Pagination, Breadcrumbs, Upload Image features, live Search, Live translation for blog posts, Ajax, Javascript animations an internal messaging system, Email Support.

The administrators will have access to a user management system and a CMS to manage the content of the web app .

Requirements to follow this series .

If you have at least 4 to 5 months of experience in HTML, CSS and Javascript, and a decent understanding of Web Development in any language then feel free to follow these tutorials. (you should know about the CRUD, how to set up a database and tables in MySql and some knowledge of Object Oriented Programming)

In these first few chapters, you are going to learn how to create the Front end of the web application . we will be creating the backend in the remaining half. By the end of this series you are going to have a Advanced Flask web application running on your computer!

Creating the Home Page.

The Header.

Links to the images

Slide 1, Slide2, Slide3, Footer Image

Main Blog Post Images

1, 2, 3, 4, 5, 6, 7

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Blog.</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!--THE LINK TO THE GOOGLE FONT CDN-->
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli|Slabo+27px" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><!--<link rel="stylesheet" href="{{ url_for('static', filename='css/nav-style.css') }}">-->
<link rel="stylesheet" href="css/media-queries.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<!--SOCIAL ICONS BEGINNING-->
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<ul class="slide-down-message">
<div class="box">
<div class="mask">
<li class="white move" id="display-here">Test.</li><!--the li tag contents in ul 'get-from-here' below will be displayed here(the word test will not be displayed because of the white class)-->
</div>
</div>
</ul>
<ul class="get-from-here" style="display: none;""><!--This will not be displayed at all -->
<li>Hello Universe.</li><!--had to type each element twice because the move animation was effecting one element after another, and not every element-->
<li>Hello Universe.</li>
<li>Hello World.</li>
<li>Hello World.</li>
<li>Hello Earth.</li>
<li>Hello Earth.</li>
<li>Hello World.</li>
<li>Hello World.</li>
<li>Hello Earth.</li>
<li>Hello Earth.</li>
</ul>
</div><!--col-md-6-->
<div class="col-md-6 col-sm-12 col-xs-12">
<ul class="social-links">
<!--DISPLAYS A POPOVER WHEN LINK IS CLICKED-->
<li><a href="#" rel="popover" data-placement="bottom" data-popover-content="#myPopover" style="font-size: 1em;"><i class="fas fa-user-circle"></i> <span>My Account</span>
</a></li>
<!--DISPLAYS THE MY MESSAGES LINK WITH A BADGE DISPLAYING THE UNREAD MESSAGES-->
<li><a href="#" style="position: relative;z-index: 1;"><span class="button__badge">200</span><i class="far fa-envelope"></i>&nbsp;<span>My Messages</span></a></li>
<li><i class="fab fa-pinterest"></i></li>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-dribbble"></i></li>
<li><i class="fab fa-behance"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div><!--col-md-6-->
<div class="clearfix"></div>
</div><!--row-->
</div>
<!-- POPOVER START -->
<div id="myPopover" class="hidden">
<div class="profile-img">
<img alt="" src="http://lorempixel.com/output/nature-q-c-100-100-1.jpg">
</div>
<div class="popover-btn">
<ul>
<li><button class="button-primary">My Account</button></li>
<li><button class="button-primary">Logout</button></li>
</ul>
</div></div>
<!--POPOVER END-->
<!--SOCIAL ICONS END-->

Social Links and popover.

Social links section.
<!--SEARCH FORM START-->
<hr>
<div class="search-form-div">
<div class="search-text-field">
<input type="text" name="search" value="" placeholder="Search for ..." class="form-control default search-field" style=" margin-right: 0;">
</div>
<div class="search-icon" style=""><a href="#"><i class="fas fa-search"></i></a></div>
<div class="clearfix"></div>
</div>
<!--SEARCH FORM END--><!--BLOG TITLE BEGINNING-->
<hr>
<h1 class="text-center h1-style blog-title" style="margin-top: 50px;">My Blog</h1>
<p class="text-center h1-style blog-desc" style="margin-bottom: 50px;">A very detailed blog on Web Design and Development.</p>
<hr>
<!--BLOG TITLE END-->
Search form and title.
<!--TO KEEP THINGS SIMPLE I HAVE CREATED 2 NAVIGATION MENUS ONE FOR RESPONSIVE STATE AND THE OTHER FOR REGULAR STATE-->
<!--RESPONSIVE NAVBAR BEGINNING-->
<div id="mySidenav" class="sidenav">
<ul class="resp-navbar">
<li>
<a href='#'><i class="fas fa-home"></i> Home</a>
</li>
<li>
<a href='#'><i class="fas fa-globe-africa"></i> About</a>
</li>
<li>
<a href='#'><i class="fas fa-chevron-circle-down"></i> Level 1</a>
<!-- ----levelTwo---- -->
<ul class='levelTwo'>
<li>
<a href=''>level 2</a>
</li>
<li>
<a href=''>level 2</a>
</li>
<li>
<a href=''>level 2</a>
</li>
<li>
<a href=''><i class="fas fa-chevron-circle-down"></i> level 2</a>
<!-- ----levelThree---- -->
<ul class='levelThree'>
<li>
<a href=''><i class="fas fa-chevron-circle-down"></i> level 3 </a>
<!-- ----levelFour---- -->
<ul class='levelFour'>
<li>
<a href=''>level 4</a>
</li>
<li>
<a href=''>level 4</a>
</li>
<li>
<a href=''>level 4</a>
</li>
<li>
<a href=''>level 4</a>
</li>
<li>
<a href=''>level 4</a>
</li>
<li>
<a href=''>level 4</a>
</li>
</ul>
<!-- ----levelFour---- -->
</li>
<li>
<a href=''>level 3</a>
</li>
<li>
<a href=''>level 3</a>
</li>
<li>
<a href=''>level 3</a>
</li>
<li>
<a href=''>level 3</a>
</li>
</ul>
<!-- ----levelThree---- -->
</li>
<li>
<a href=''> level 2</a>
</li>
</ul>
<!-- ----levelTwo---- -->
</li>
<li>
<a href='#'><i class="fas fa-phone-volume"></i> Contact</a>
</li>
<li>
<a href='#'><i class="fab fa-blogger"></i> Blog</a>
</li>
<li>
<a href='#'><i class="fas fa-box-open"></i> Categories</a>
</li>
<li>
<a href='#'><i class="fas fa-gift"></i> Offers</a>
</li>
</ul>
</div>
<!--RESPONSIVE NAVBAR END-->

Responsive Navigation

The Responsive navigation.

Creating the horizontal navigation and the responsive navigation icon.

<!--ADD POST BUTTON-->
<div class="container">
<div class="row">
<div class="nav-area">
<a href="#" class="button-primary" style=""><i class="far fa-plus-square"></i> ADD POST </a>
<!--ADD POST BUTTON END-->
<!--HORIZONTAL NAV BAR - BEGINNING-->
<nav>
<ul class="regular-navbar">
<li>
<a href='#'><i class='fa fa-home fa-fw'></i> Home</a>
</li>
<li>
<a href='#'><i class='fa fa-globe fa-fw'></i> About</a>
</li>
<li>
<a href='#'> <i class="fas fa-chevron-circle-down"></i> Level 1 </a>
<!-- ----levelTwo---- -->
<ul class='levelTwo'>
<li>
<a href=''>level 2</a>
</li>
<li>
<a href=''>level 2</a>
</li>
<li>
<a href=''>level 2</a>
</li>
<li>
<a href=''><i class="fas fa-chevron-circle-right"></i> level 2 </a>
<!-- ----levelThree---- -->
<ul class='levelThree'>
<li>
<a href=''><i class="fas fa-chevron-circle-right"></i> level 3 </a>
<!-- ----levelFour---- -->
<ul class='levelFour'>
<li>
<a href=''>level 4</a>
</li>
<li>
<a href=''>level 4</a>
</li>
<li>
<a href=''>level 4</a>
</li>
<li>
<a href=''>level 4</a>
</li>
<li>
<a href=''>level 4</a>
</li>
<li>
<a href=''>level 4</a>
</li>
</ul>
<!-- ----levelFour---- -->
</li>
<li>
<a href=''>level 3</a>
</li>
<li>
<a href=''>level 3</a>
</li>
<li>
<a href=''>level 3</a>
</li>
<li>
<a href=''>level 3</a>
</li>
</ul>
<!-- ----levelThree---- -->
</li>
<li>
<a href=''> level 2</a>
</li>
</ul>
<!-- ----levelTwo---- -->
</li>
<li>
<a href='#'><i class="fas fa-phone-volume"></i> Contact</a>
</li>
<li>
<a href='#'><i class="fab fa-blogger"></i> Blog</a>
</li>
<li>
<a href='#'><i class="fas fa-box-open"></i> Categories</a>
</li>
</ul>
</nav>
<!--HORIZONTAL NAV BAR - END-->
<div class="responsive-menu-icon" id="resp-menu-btn"><!-- RESPONSIVE MENU ICON BEGINNING-->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div><!-- RESPONSIVE MENU ICON END-->
<div class="clearfix"></div>
</div>
</div><!--row-->
</div><!--container-->
</header>
Horizontal nav bar and Add Post button.

Creating the Slide Show

We are using inline styles to generate the slide show because we will be displaying the slides dynamically.

<!--SLIDE SHOW START-->
<section class="slide-show">
<style>
.slide1 {
background-image: url('img/homepage/slide1.jpg');
filter: grayscale(35%);

}
.slide2 {

background-image: url('img/homepage/slide2.jpg');
filter: grayscale(35%);
}
.slide3 {
background-image: url('img/homepage/slide3.jpg');

filter: grayscale(35%);
}
</style>
<div class="wrap">
<div id="arrow-left" class="arrow" style="z-index: 20;"></div>
<div class="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Heading 1</span>
<p id="color">A description of this blog post....</p>
<button href="#" class="btn btn-primary" id="read-more" style="width: 10%;background-color: #00030e4a;border: 1px solid white;">Read More.</button>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Heading 2</span>
<p id="color">A description of this blog post....</p>
<button href="#" class="btn btn-primary" id="read-more" style="width: 10%;background-color: #00030e4a;border: 1px solid white;">Read More.</button>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Heading 3</span>
<p id="color">A description of this blog post....</p>
<button href="#" class="btn btn-primary" id="read-more" style="width: 10%;background-color: #00030e4a;border: 1px solid white;">Read More.</button>
</div>
</div>
</div>

<div id="arrow-right" class="arrow"></div>
</div>
</section>
<!--SLIDE SHOW END-->
The Slide Show(The JavaScript to make the slide show functional has not been written as yet.)
<!--SECTION INTRO START-->
<section class="section-intro" style="position: relative;">

<div class="line l-center"></div>
<h6>Web Design and Development.</h6>
<h3>Welcome to this blog.</h3>
<p>Dummy text is text that is used in the publishing industry or by web designers to occupy the space which will later be filled with 'real' content. This is required when, for example, the final text is not yet available.</p>
</section>
<!--SECTION INTRO END-->
Section Intro

Creating the homepage blog posts section

this will display the main Blog posts on the left and the latest blog posts section with thumbnail images on the right

<!--SECTION HOMEPAGE POSTS START-->
<section class="section-homepage-posts padding">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="post-container">
<div class="blog-image p-relative">
<img src="img/blog/3.jpg" alt="party" class="image i-medium">
<div class="post-date">
<h6>09</h6>
<p>SEP</p>
<p>2018</p>
</div>
</div>
<div class="blog-info padding">
<div class="line l-left margin-b"></div>
<h6>Web Design and Development.</h6>
<h3>Welcome to this blog.</h3>
<p>Dummy text is text that is used in the publishing industry or by web designers to occupy the space which will later be filled with 'real' content. </p>
<ul class="blog-more-info">
<li>BY JAMES SMITH</li>
<li>3 COMMENTS</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<!--FULL WIDTH BLOG POST-->
<div class="post-container">
<div class="full-width-blog-image p-relative">
<img src="img/blog/4.jpg" alt="party" class="image i-medium">
<div class="post-date">
<h6>09</h6>
<p>SEP</p>
<p>2018</p>
</div>
</div>
<div class="full-width-blog-info padding">
<div class="line l-left margin-b"></div>
<h6>Web Design and Development.</h6>
<h3>Welcome to this blog.</h3>
<p>Dummy text is text that is used in the publishing industry or by web designers to occupy the space which will later be filled with 'real' content. </p>
<ul class="blog-more-info">
<li>BY JAMES SMITH</li>
<li>5 COMMENTS</li>
</ul>
</div>
</div>
<!--ANOTHER FULL WIDTH BLOG POST-->
<div class="post-container">
<div class="full-width-blog-image p-relative">
<img src="img/blog/5.jpg" alt="party" class="image i-medium">
<div class="post-date">
<h6>09</h6>
<p>SEP</p>
<p>2018</p>
</div>
</div>
<div class="full-width-blog-info padding">
<div class="line l-left margin-b"></div>
<h6>Web Design and Development.</h6>
<h3>Welcome to this blog.</h3>
<p>Dummy text is text that is used in the publishing industry or by web designers to occupy the space which will later be filled with 'real' content. </p>
<ul class="blog-more-info">
<li>BY JAMES SMITH</li>
<li>2 COMMENTS</li>
</ul>
</div>
</div>
<div class="post-container">
<div class="blog-image p-relative">
<img src="img/blog/10.jpg" alt="party" class="image i-medium">
<div class="post-date">
<h6>09</h6>
<p>SEP</p>
<p>2018</p>
</div>
</div>
<div class="blog-info padding">
<div class="line l-left margin-b"></div>
<h6>Web Design and Development.</h6>
<h3>Welcome to this blog.</h3>
<p>Dummy text is text that is used in the publishing industry or by web designers to occupy the space which will later be filled with 'real' content. </p>
<ul class="blog-more-info">
<li>BY JAMES SMITH</li>
<li>10 COMMENTS</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div><!--LATEST POSTS-->
<div class="col-md-3 col-sm-12 col-xs-12" id="latest-posts">
<h5 class="dancing-font">Latest Posts.</h5>
<div class="latest-posts-panel">
<div class="thumbnail">
<img src="img/blog/6.jpg">
</div>
<div class="post-content">
<h6>Web Design and Development.</h6>
<h3>Welcome to this blog.</h3>
<h6>09 SEP</h6>
</div>
<div class="clearfix"></div>
</div>
<div class="latest-posts-panel">
<div class="thumbnail">
<img src="img/blog/11.jpg">
</div>
<div class="post-content">
<h6>Web Design and Development.</h6>
<h3>Welcome to this blog.</h3>
<h6>09 SEP</h6>
</div>
<div class="clearfix"></div>
</div>
<div class="latest-posts-panel">
<div class="thumbnail">
<img src="img/blog/8.jpg">
</div>
<div class="post-content">
<h6>Web Design and Development.</h6>
<h3>Welcome to this blog.</h3>
<h6>09 SEP</h6>
</div>
<div class="clearfix"></div>
</div>
<div class="latest-posts-panel">
<div class="thumbnail">
<img src="img/blog/9.jpg">
</div>
<div class="post-content">
<h6>Web Design and Development.</h6>
<h3>Welcome to this blog.</h3>
<h6>09 SEP</h6>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
<!--SECTION HOMEPAGE POSTS END -->
Homepage Blog Posts section.

Designing the footer

<footer>
<!--API PHOTOS SECTION START, THIS SECTION WILL DISPLAY API GENERATED PHOTOS FROM UNSPLASH.COM-->
<div class="container">
<div class="row">
<div class="instagram">
<h4 style="color: white;">
Follow us @ instagram
</h4>
</div>
</div>
</div>
<div id="api-photos"><div class="slide-container">
<div class="slider1">
<div class="thumbs" id="thumb1">
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<!--API PHOTOS SECTION END-->
<div class="container">
<div class="row">
<div class="form-container">
<h4 class="newsletter white">Subscribe to my newsletter.</h4>
<form>
<input type="email" name="newsletter" id="newsletter" class="form-control" value="" placeholder="Your email here.">
<button class="button-primary" id="newsletter-btn">SUBSCRIBE <i class="fas fa-hand-point-right"></i></button>
</form>
</div>
</div>
</div>
<!--FOOTER SOCIAL START-->
<div class="ending">
<ul class="footer-social-links">
<li><i class="fab fa-pinterest"></i></li>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-dribbble"></i></li>
<li><i class="fab fa-behance"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
<p class="white">
Copyright ©2018 No rights reserved | Python <i class="fas fa-tv"></i> Flask tutorial.
</p>
</div>
<!--FOOTER SOCIAL END-->
</footer>
</body>
</html>
Footer

*The large gap between the instagram <h4> heading and the newsletter form is for the API generated photos section

You should have something similar to the above after finishing this section.

index.html

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade