Welcome to the first lesson of this course! In this lesson, you will learn how to create a step-by-step cooking guide page for a recipe. This type of page is a key feature in many cooking helper apps. It helps users follow a recipe one step at a time, making the cooking process easier and less overwhelming.

Imagine you are cooking a new dish. Instead of scrolling through a long list of instructions, you see only the current step, with clear navigation to move forward or backward. You might also have a timer for certain steps and even a button to read the instructions out loud. This is the experience we want to create.

By the end of this lesson, you will understand how to build the basic structure of this guide page using HTML and Flask templates. This will lay the foundation for adding more interactive features in future lessons.

Before we dive in, let’s quickly recall how HTML templates work in Flask. If you remember from your previous experience (or if this is new, don’t worry), Flask uses a system called template inheritance. This means you can create a base layout (like a skeleton) and then build specific pages on top of it.

For example, you might have a layout.html file that looks like this:

• {% block ... %} is a placeholder that child templates can fill in.
• {% extends "layout.html" %} in a child template means "use the layout from layout.html and fill in the blocks."

This approach keeps your code organized and avoids repeating the same HTML structure on every page.

Let’s start building the step-by-step guide page. We’ll do this by creating a new template that extends the base layout and adds the sections we need.

First, we tell Flask to use our base layout:

This line means our new page will use the structure from layout.html.

Next, we set a custom title for our guide page:

This will show "Guided Cooking - Cooking Assistant" in the browser tab.

Now, let’s add the main content of the guide page. We do this inside the content block:

Let’s break down what’s happening here:

• <section class="guide-container"> is the main wrapper for our guide.
• <h1 id="recipe-name">Loading...</h1> is a placeholder for the recipe name. The id makes it easy to update with JavaScript later.
• The .step-box contains:
  • <p id="current-step-text">Fetching steps...</p>: This will show the current step. The id allows us to update it dynamically.
  • .step-controls has two buttons:
    • "Prev" (disabled at first)
    • "Next"
  • A keyboard hint to help users navigate with the arrow keys or spacebar.
• The #timer-box is hidden by default (style="display: none;"). It will show a countdown timer when needed.

To make our page look good and work interactively, we need to connect CSS for styling and JavaScript for behavior.

Inside the head block, we add a link to our CSS file:

• {{ url_for('static', filename='css/guide.css') }} tells Flask to find the CSS file in the static/css folder.
• This CSS file will control the look and feel of our guide page.

At the bottom, inside the scripts block, we add our JavaScript:

• The first <script> sets a JavaScript variable RECIPE_ID using a value from Flask.
• The second <script> loads the guide.js file, which will handle things like button clicks and updating the page.

By linking these files, we prepare our page for both custom styles and interactive features.

In this lesson, you learned how to build the basic structure of a step-by-step cooking guide page using Flask templates and HTML. You saw how to:

• Extend a base layout to keep your code organized.
• Add sections for the recipe name, step instructions, navigation buttons, and a timer.
• Use IDs and classes to make parts of the page easy to update later.
• Link CSS and JavaScript files to add style and interactivity.

You now have a solid foundation for a guided recipe page. In the next practice exercises, you’ll get hands-on experience by building and customizing your own guide page. This will help you become more comfortable with Flask templates and prepare you for adding more advanced features in future lessons. Good luck, and have fun building!