Welcome to the first lesson of our course on building the Cooking Helper frontend with Flask! In this lesson, we will focus on creating the HTML structure for the Recipe Detail View. This page is where users will see all the important information about a specific recipe, such as its name, ingredients, steps, and a button to start cooking.
The Recipe Detail View is a key part of our Cooking Helper app. It helps users understand what they need and what to do to prepare a dish. By the end of this lesson, you will know how to build the HTML for this page using Flask templates, setting a strong foundation for the rest of the course.
Before we dive in, let’s quickly remind ourselves how Flask uses HTML templates. In Flask, we often use a base template (like layout.html) that contains the common structure for all pages, such as the header, footer, and navigation. Other pages then "extend" this base template and fill in specific sections using special tags called "blocks."
For example, in a previous lesson, you might have seen something like this:
Here, {% extends "layout.html" %} tells Flask to use the base layout, and {% block content %} is where we put the unique content for this page.
This approach helps us avoid repeating code and keeps our templates organized.
Let’s start building the Recipe Detail View step by step. We want our page to show the recipe’s title, rating, ingredients, steps, and a button to start cooking.
First, we tell Flask to use our main layout:
This line means our recipe page will use the structure defined in layout.html.
Next, we set a custom title for the browser tab using a block:
This will show "Recipe - Cooking Assistant" as the page title.
Flask uses Jinja2 for templates, which lets us define blocks and pass variables from our Python code to the HTML. We have already used {% block title %} here, and you’ll see other blocks like {% block content %} and {% block scripts %} throughout our template. These blocks tell Flask where to put the unique content for each page.
Now, let’s add the main content of the recipe page. We use the content block for this:
Let’s break this down:
<section class="recipe-container">wraps all the recipe content for styling.<h1 id="recipe-title">Loading...</h1>is a placeholder for the recipe’s name.<p id="rating-text" class="rating"></p>will show the recipe’s rating.- The "Ingredients" and "Steps" sections use
<ul>and<ol>lists, which will be filled in later. - The "Start Cooking" button is an
<a>tag styled as a button.
At this stage, the page will show placeholders, which we will fill with real data using JavaScript in later lessons.
Sometimes, we need to pass data from Flask to our template. For example, we might want to pass the recipe’s ID so our JavaScript can load the right data.
Here’s how we do it:
{% block scripts %}is a special block for adding scripts at the end of the page.const RECIPE_ID = {{ recipe_id }};sets a JavaScript variable using a value passed from Flask.{{ recipe_id }}is replaced by Flask with the actual recipe ID.
This makes it easy for our JavaScript to know which recipe to load.
To make our page look good and work well, we need to link CSS for styles and JavaScript for behavior.
We add a link to our CSS file in the head block:
{% block head %}is used to add extra tags to the<head>section of the page.{{ url_for('static', filename='css/recipe.css') }}tells Flask where to find the CSS file.
As shown earlier, we add our JavaScript file in the scripts block:
- This loads the JavaScript file that will handle loading and displaying the recipe details.
Separating CSS and JavaScript from HTML keeps our code organized and easier to maintain.
In this lesson, you learned how to build the HTML structure for the Recipe Detail View in our Cooking Helper app. We covered how to extend a base layout, use blocks for different sections, add placeholders for recipe data, and link CSS and JavaScript files.
You are now ready to practice these concepts by building and customizing your own recipe detail pages. In the next exercises, you’ll get hands-on experience working with Flask templates and preparing your app for dynamic content. Good luck, and have fun building!
