Course Content
Flask Intensive Course: Web Development with Python
1. Introduction to Flask
Flask Intensive Course: Web Development with Python
Last Changes
Also, let's add a background picture to make our website more eye-catching.
For that let’s return our link to the main.css
file and move the desired picture to a static folder.
Open your base.html
and add it to the bottom of your header:
Then open main.css
and remove old styles. Add:
Let’s check our website. It looks a lot nicer.

Let’s fix the fields in the edit.html file to make it nicer. We have the form here. We want a new form like we did in our new_recipes.html with all labels and nice text inputs and text area. Let’s just copy and paste this in here.
The file's name below doesn't correspond to that in our project.
index.html
index.css
index.js
Now that we have our new form, it's essential to note the difference compared to the create feature. In editcase, we don't want empty forms; we aim to populate each text field or text area with the existing recipe data. Fortunately, it's quite straightforward. Instead of using a simple placeholder, we can set a value="{{ recipe.title }}"
to make it more user-friendly. However, for Textarea, things are a bit different. Textareas don't have a 'value' parameter, so we should remove the placeholder. Also, keep in mind that input tags don't have closing tags, but text areas do. Everything within the textarea tags will be part of the content, like this:
<textarea>{{ recipe.description }}</textarea>
.
Additionally, we need to update the URL we're posting to in our form action, changing it to:
<form action='/recipes/edit/{{ recipe.id }}'...
.
And one more detail, the 'value' for <input="submit" value="Save">
should read Save
instead of 'Post'.
Now, let's put this to the test. Select any post, head over here to edit, and you can freely make changes, add new lines, or create multiple paragraphs. After you're done, simply hit the 'Save' button.
So we have the Flask application where we have implemented the whole CRUD functionality, added a Database, improved style with Bootstrap and it’s fully functional.
It’s a good start if you have never used Flask before. So, now you have your first website that you can present to the future interviewer.
What is Flask?
Select the correct answer
Which of these is a Flask extension for handling SQL databases?
Select the correct answer
What is Jinja2 in the context of Flask?
Select the correct answer
Everything was clear?