Starting our Website home page with Flask Tutorial




The home page! This is almost always the most important page on your website. This is where most viewers will first meet your website. The web average is that ~60% of website visitors leave on the first page they visit. This is what is known as "bounce rate." Because of this, I feel that it is pretty important that you have a very specific home page, and that it is highly likely that you will have a totally separate home page compared to the rest of the website. Depending on your website, this goal may vary. For example, on my personal website, HKinsley.com, I don't even really have a specific home page. There's not much point. I am not trying to keep users engaged, this website is just a simple informative website about me.

Here, we will have a separate home page, and this will be the only page that doesn't "extend" any sort of header stuff, like most pages will. Where do you start with creating a web page though? Do you need a web designer? Probably not! Luckily for you, Bootstrap pretty much handles all of the graphics stuff for you. You just need to choose where things go, but all of the styling is done for you. It's actually a lot of help too. When we're done, try commenting out our style sheet inclusion... see how ugly things get!

In order to make use of Bootstrap, you will obviously need to implement it within your site, which we did in the last tutorial, but then we need to browse through the documents to see what's available. I usually just scroll through fairly fast until I see something appealing.

Mostly you're going to be interested in the components or javascript pages. Everything shown has the code that generated below it. Note here that the components stuff should all work with a simple copy and paste to your page. The javascript will require you to include the script. If you don't know what that means, see the videos. In short, you just need to include the required javascript file at the end of your body tags in the HTML (this means you actually first call the javascript functions *above* where you include the javascript function in the script tags).

Here's the file we end up creating:

File: main.html, server location: /var/www/PythonProgramming/PythonProgramming/templates/main.html 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Python Programming Tutorials</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>

<header>
	<div class="navbar-header">
      <a class="navbar-brand" href="/">
	  <img style="max-width:120px; margin-top: -7px;" src="{{ url_for('static', filename='images/mainlogo.png') }}">
	  </a>
    </div>

	<div class = "container-fluid">
		<a href="/dashboard/"><button type="button" class="btn btn-primary" aria-label="Left Align" style="margin-top: 5px; margin-bottom: 5px; height: 44px; margin-right: 15px">
		  <span class="glyphicon glyphicon-off" aria-hidden="true"></span> Start Learning
		</button></a>
		<div style="margin-right: 10px; margin-left: 15px; margin-top: 5px; margin-bottom: 5px;"  class="container-fluid">	
		</div>
	</div>
</header>

<body>

	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
	
</body>

</html>

For more information on exactly what we're doing here, see the video. If you're understanding all of the above, then you're ready to move on to the next tutorial!

The next tutorial:





  • Introduction to Practical Flask

  • Basic Flask Website tutorial

  • Flask with Bootstrap and Jinja Templating

  • Starting our Website home page with Flask Tutorial
  • Improving the Home Page Flask Tutorial

  • Finishing the Home Page Flask Tutorial

  • Dynamic User Dashboard Flask Tutorial

  • Content Management Beginnings Flask Tutorial

  • Error Handling with Flask Tutorial

  • Flask Flash function Tutorial

  • Users with Flask intro Tutorial

  • Handling POST and GET Requests with Flask Tutorial

  • Creating MySQL database and table Flask Tutorial

  • Connecting to MySQL database with MySQLdb Flask Tutorial

  • User Registration Form Flask Tutorial

  • Flask Registration Code Tutorial

  • Finishing User Registration Flask Tutorial

  • Password Hashing with Flask Tutorial

  • Flask User Login System Tutorial

  • Decorators - Login_Required pages Flask Tutorial

  • Dynamic user-based content Flask Tutorial

  • More on Content Management Flask Tutorial

  • Flask CMS Concluded Flask Tutorial

  • The Crontab Flask Tutorial

  • Flask SEO Tutorial

  • Flask Includes Tutorial

  • Jinja Templating Tutorial

  • Flask URL Converters Tutorial

  • Flask-Mail Tutorial for email with Flask

  • Return Files with Flask send_file Tutorial

  • Protected Directories with Flask Tutorial

  • jQuery with Flask Tutorial

  • Pygal SVG graphs with Flask Tutorial

  • PayPal with Flask Web Development Tutorial

  • Securing your Flask website with SSL for HTTPS using Lets Encrypt