Simple Web App with Flask and Heroku - Python GUI for Beginners

In this tutorial, I will show you how to create a Web Application with Flask!
This video the also the first episode of The Battle of the App Frameworks, where 🤩🤩 YOU GET TO CHOOSE THE WINNER! 🤩🤩

Today we will create a simple "Hello World" Application with Flask, which includes:
* an HTML template containing the structure of a web page
* a CSS stylesheet containing design instructions
* a Python backend that communicates with a web server
And we will also 🚀DEPLOY🚀 this application for free with Heroku! 😁

This tutorial covers all the basics of Flask, from start to finish! (excluding Javascript interactions, which we will leave for later 😜)

⏰ TIME STAMPS ⏰
00:00 - Battle of the App Frameworks
00:25 - Flask Overview
01:17 - Flask Directory Structure
01:52 - HTML Structure
06:52 - Python Backend
09:31 - Warning: this is a development server ⛳
09:42 - Message Flashing
11:04 - A secret key is required
13:38 - CSS Styling
18:05 - CSS doesn't update - Clear Cache!
20:14 - Procfile and Requirements
22:42 - Deploy Flask App with Heroku
24:43 - Thanks for watching! :)

*********************************
🐍 IMPORTANT NOTES/LINKS 🐍

Install Flask 🌶
* Anaconda: conda install -c anaconda flask
* PyPI: pip install flask

Install Green Unicorn 🦄
$ pip install gunicorn

Change Production Server to Development Server: ⛳
$ export FLASK_APP=sayHello
$ export FLASK_ENV=development
$ flask run

Complete project on Github:

Link to logo from my Kivy App:

Beautiful icons are by:

[robinferizi]

Note: html and css are not programming languages they’re mark up languages, as there is nothing in html or css that makes them Turing complete

[darioalb]

Wonderful!!! I am an old developer (61 years old) trying to learn the current technologies. Already tired of volunteer tutorials that know little about teaching, I come across this one, which in just 25 minutes, conveys all the basics I need to learn. I am amazed!!! Congratulations!!!

[DevStephenW]

Just found your videos. Such a perfect tutorial. The right speed, the right amount of explanation and detail. Great stuff.

[Soulo_Sreeni]

The way of explanation is phenomenal ! I feel great that YouTube recommended it to me today 🤩

[developerx]

I am so happy because you are just given us the best statement "and since we have saved this file inside the appropriate template folder, flask will be able to find it with no issues"

[g.rioscairo]

I simply loved this tutorial. First time using Flask and Heroku! And it all worked so smoothly, nice :)

[Andrew-Escudero]

You are great! Love the clarity, simplicity, and positivity in your videos. Look forward to learning more from you!

[BogdanAnghelina]

I'm now starting to learn Python through the Mimo mobile app.

After a few chapters, I started practicing and looking for more complex projects. Your video is very explanatory and I congratulate you on that!

Although I have a pretty solid background in HTML, CSS, and WordPress (PHP), I'm just now starting to understand Python and I think it's awesome what you can do with it.

[MichaelSwartout]

I swear this is the first time I have every seen you on a windows pc. You are such a wonderful teacher. Who likes to play some Steam games and not just code. Oh ya!

[spadezap]

Thanks so much! I have been looking everywhere on how to do this and this is the only video that explained it well!

[darcydonelle]

Great video! Deployed my version of the app, and it works wonderfully, as expected. Thank you!

[TheSuperRunner]

Great tutorial! I'm trying to write a web app (with basically no web experience) for a new project of mine and this made things a lot more clear.

[mauno]

You can force a cache refresh on a single page:
Ctrl + F5 for Windows.
Shift + Reload for Safari.

[vigneshpadmanabhan]

Thanks a lot! Such an amazing video. I have always wanted to deploy the solutions I create on the web, but never took the step, thanks to the youtube algorithm, found this video by chance and I like your teaching approach. It's simple to follow and easy to execute. Would love to see a sequel to this video.. would it be possible for us to have a MySQL or SQLite or PostgreSQL anything you would prefer, that can store the names we type? I am interested to learn more about this. A little bit about myself, I'm a data science guy and I never got a chance to do anything beyond proof of concept at work and personally was never exposed to a platform that can host an app on the web free. So this is my start. Thanks again!

[ralphanthony]

Great video, amiga! Awesome work! I definitely love all your videos!!!

[thebarryman]

Best tutorial for Flask I've seen so far, thank you!

[rnseby]

Thanks for the great walkthrough. Quick and straightforward.

[fersaol]

Thanks to you I have been able to deploy a working web app, you deserves all the best in the world. Thanks a

[markus]

Thank you for a great tutorial. Got me to transition from making simple console apps to a real webapp!

[maxwellochieng]

You are the BEST, I found your video at a point i was learning how to deploy my ML models in Heroku