Building a Website with Flask and Python: A Beginner’s Guide

4 min readMar 19, 2023

Flask is a python framework used to build websites.

In today’s digital age, having a website is crucial for businesses and individuals to establish their online presence. Flask is a popular web framework for Python that allows developers to build web applications quickly and efficiently. In this article, we will walk through the process of building a website using Flask and Python.

Prerequisites Before we begin, make sure that you have the following installed on your computer:

Python (version 3 or later)
Flask (version 2.1 or later)

Step 1: Set up a Virtual Environment Virtual environments are isolated Python environments that allow you to work on different projects with different dependencies without conflicting with each other. To set up a virtual environment, follow these steps:

Open a terminal or command prompt and navigate to the project directory.
Run the command python3 -m venv venv to create a virtual environment named venv.
Activate the virtual environment by running the command source venv/bin/activate (on Linux/Mac) or venv\Scripts\activate (on Windows).

Step 2: Create a Flask Application Now that we have set up our virtual environment, let’s create a Flask application. Follow these steps:

Create a new Python file named app.py in the project directory.
Import the Flask module by adding the following line of code at the top of the file: from flask import Flask.
Create a new Flask app by adding the following lines of code:

app = Flask(__name__)

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

4. Save the file and run the command python app.py to start the Flask app.

Step 3: Create a Basic HTML Template Now that we have a basic Flask app, let’s create an HTML template. Follow these steps:

Create a new directory named templates in the project directory.
Create a new file named base.html in the templates directory.
Add the following HTML code to base.html:

<!DOCTYPE html>
  <html>
  <head>
      <title>{% block title %} {% endblock %}</title>
  </head>
  <body>
      {% block content %} {% endblock %}
  </body>
</html>

4. Create a new file named index.html in the templates directory.

5. Add the following HTML code to index.html:

{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
    <h1>Hello, World!</h1>
{% endblock %}

6. Save the files and restart the Flask app.

Step 4: Add Static Files Static files are files such as images, stylesheets, and JavaScript files that are served to the client as-is. Follow these steps to add static files to our Flask app:

Create a new directory named static in the project directory.
Create a new file named style.css in the static directory.
Add some CSS code to style.css:

body {
    background-color: #eee;
}

4. Add a link to the CSS file in the base.html file by adding the following code to the head section:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

5.Save the file and restart the Flask app.

Step 5: Add a Contact Form Adding a contact form to our Flask app allows users to send us messages directly from the website. Follow these steps:

Create a new Python file named forms.py in the project directory.

from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired, Email

class ContactForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired(), Email()])
    message = TextAreaField('Message', validators=[DataRequired()])
    submit = SubmitField('Send')

2. Update the index.html file by adding the following code:

{% extends "base.html" %}

{% block title %}Home{% endblock %}{% block content %}
    <h1>Hello, World!</h1>
    <h2>Contact Us</h2>
    <form method="POST">
        {{ form.hidden_tag() }}
        <div>
            {{ form.name.label }} {{ form.name() }}
        </div>
        <div>
            {{ form.email.label }} {{ form.email() }}
        </div>
        <div>
            {{ form.message.label }} {{ form.message() }}
        </div>
        <div>
            {{ form.submit() }}
        </div>
    </form>
{% endblock %}

3. Update the app.py file by adding the following lines of code:

from forms import ContactForm

@app.route('/contact', methods=['GET', 'POST'])
def contact():
    form = ContactForm()
    if form.validate_on_submit():
        name = form.name.data
        email = form.email.data
        message = form.message.data
        # Do something with the data
        return 'Thank you for your message!'
    return render_template('contact.html', form=form)

4. Create a new file named contact.html in the templates directory.

5. Add the following HTML code to contact.html:

{% extends "base.html" %}

{% block title %}Contact Us{% endblock %}{% block content %}
    <h1>Contact Us</h1>
    <form method="POST">
        {{ form.hidden_tag() }}
        <div>
            {{ form.name.label }} {{ form.name() }}
        </div>
        <div>
            {{ form.email.label }} {{ form.email() }}
        </div>
        <div>
            {{ form.message.label }} {{ form.message() }}
        </div>
        <div>
            {{ form.submit() }}
        </div>
    </form>
{% endblock %}

6. Save the files and restart the Flask app.

Step 6: Deploy the Website Once you have completed building the website, you can deploy it to a web server so that it can be accessed by anyone on the internet. There are many web hosting services available that support Python and Flask, such as Heroku, PythonAnywhere, and Google Cloud Platform.

In this article, we have learned how to build a website using Flask and Python. We have covered the basics of setting up a Flask application, creating HTML templates, adding static files, and creating a contact form. With these skills, you can create a wide variety of web applications and deploy them to the internet.

P.S. Liked this article? Check out my app!

Building a Website with Flask and Python: A Beginner’s Guide

Written by David House