Welcome to the Intro to Flask lab! Please read all the instructions so you don't get lost halfway through, but definitely feel free to ask for help if you get stuck. Good luck, and have fun!
Throughout this lab, you should be editing app.py
.
In app.py
edit the home_page
function to return a string of your favorite food.
Open a terminal and run python app.py
. If there are no errors, the terminal will say: Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Open chrome and enter the URL: http://127.0.0.1:5000/
and make sure it prints your favorite food.
Remember that the folder templates
is where we store all the html files.
Right now there is only one html file: index.html
.
Open this file (in Sublime3) and edit it.
This template should have
- A heading, h1 tag, with your favorite food
- A paragraph about why it's the best food
Now, use the render_template
function in app.py
to see your
HTML page in the browser!
The static
folder is where we keep CSS and JS files.
Right now there is just one file in the static
folder: style.css
.
Edit the file style.css
to make the background color in
your website green.
Then, import this file in your HTML template. (if you don't remember how, look at the hints below)
Run the webserver again by running python app.py
in the terminal, and check that the background is green.
If you have extra time, build a color scheme for your website.
-
First, add a for loop into your template, to print a list of your favorite foods (sometimes you can't choose just one). This list should be defined in your Python file
app.py
inside thehome_page
function. -
Define a variable
opposite_day
inapp.py
. Use an if-statement, in the html file and ifopposite_day
is true then the website should show your least favorite foods.
To link a stylesheet, in the html file, add the line:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
If you finish any of the previous parts early, you can work on some extra tasks, including:
Part 2 Extras:
- Organize your website using divs in
index.html
- Adding images to your website
- Finding and importing more complex templates from W3
Part 3 Extras:
- Add a header to your website, and make sure to use margins and padding to separate the header from the content on the website
- Adding a sidebar to your website, that doesn't move when you scroll
Part 4 Extras:
- Add a table to the website, with pictures and descriptions about your favorite dishes.
- Adding more complex if-statements into your website - for instance, checking how many foods the user wants to see. This should determine the length of the list you show.
- Instead of specifying exactly how many players
the user wants to see, the template should accept a variable
users_favorite_food
. The website should print all the foods, until we print their favorite food. If this is the first food, we only need to print one food. If their favorite isn't in the list of your foods, then the entire list is printed.