Welcome to the first lesson of our course, "Building a Flask Frontend for our Cooking Helper." In this lesson, we will focus on creating the HTML for the landing page of our Cooking Helper app. The landing page is the first thing users see when they visit your site. It should be clear, inviting, and easy to use.
By the end of this lesson, you will know how to build a well-structured HTML template for the landing page. This will set the foundation for adding more features and interactivity in later lessons. Let’s get started!
Before we dive in, let’s quickly remind ourselves of a few important concepts:
- HTML Structure: HTML is the language used to create web pages. It uses tags like
<html>,<head>, and<body>to organize content. - Flask Templates: Flask uses a system called Jinja2 for templates. This lets you write HTML files that can include dynamic content and extend from a base layout.
- Template Inheritance: With Jinja2, you can create a base template (like
layout.html) and have other pages extend it. This helps keep your code organized and avoids repeating the same code on every page. - Template Rendering: In Flask, the
routes.pyfile defines the routes (URLs) for your app. Each route is linked to a Python function, which usually callsrender_template()to return an HTML file (template) to the browser. For example, the home page route might look like this: This tells Flask to displayindex.htmlwhen someone visits the home page.
If any of these ideas are new to you, don’t worry! We’ll see them in action as we build the landing page.
Let’s look at what our landing page needs. We want users to be able to:
- Search for recipes by entering ingredients.
- See the results of their search.
- View a list of popular recipes.
- Get a random recipe if they’re feeling adventurous.
To make this possible, our landing page will have four main sections:
- Search Section: A form where users can type in ingredients.
- Search Results Section: A place to show recipes that match the search.
- Popular Recipes Section: A list of recipes that are popular right now.
- Random Recipe Section: A button to get a random recipe and a spot to display it.
By organizing the page this way, we make it easy for users to find what they need and explore new ideas.
Let’s build the landing page step by step. We’ll use Flask’s template system and break the code into small, easy-to-understand pieces.
First, we want our landing page to use the same basic structure as the rest of our site. In Flask, we do this by extending a base template, usually called layout.html.
This line tells Flask that our page should use everything from layout.html as a starting point.
Next, we set the title of the page. This appears in the browser tab.
Here, we use a Jinja2 block called title. The text inside will replace the title block in the base layout.
To make our page look nice, we’ll link a CSS file. We use Flask’s url_for function to make sure the path is correct.
This code puts a link to our CSS file in the <head> section of the page.
Now, let’s add the search form. This is where users will type in ingredients.
- The
<section>tag groups related content. - The
<form>has an input for ingredients and a button to submit the search.
We need a place to show the recipes that match the user’s search. At first, this section will be hidden.
- The
style="display: none;"hides the section until there are results to show. - The
<ul>withid="results-list"will hold the list of recipes.
Let’s show some popular recipes to inspire users.
- The
<ul>withid="popular-recipes"will be filled with recipe names later. - For now, it shows a loading message.
Finally, we add a button for users who want a surprise recipe.
- The button has an
idso we can add interactivity later. - The
<div>will display the random recipe.
At the end of the template, we link a JavaScript file for future interactivity.
This ensures our page can use JavaScript to handle searches and other actions.
In this lesson, you learned how to build the HTML for the Cooking Helper landing page using Flask templates. We broke the page into clear sections: a search form, search results, popular recipes, and a random recipe feature. You also saw how to link CSS and JavaScript files using Flask’s url_for function.
Now that you have a solid landing page structure, you’re ready to practice these concepts in the upcoming exercises. You’ll get hands-on experience creating and editing templates, and soon you’ll see how to make the page interactive. Great job getting started!
