Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Creating the Step-by-Step Cooking Guide Page

Go to class Write review

Overview

Create a guided cooking page with step navigation, text-to-speech, timers, and user rating features.

Syllabus

Unit 1: Building a Guide Page

Adding Your First Template Block
Creating the Guide Container Structure
Building Step Navigation Controls
Adding the Timer Display Section
Connecting Stylesheets with Flask Templates
Linking JavaScript to Flask Templates

Unit 2: Making the Guide Interactive

Fix the Recipe Data Loading
Add Step Navigation Button Listeners
Complete the Button State Management
Add Voice Reading to Steps
Add Smart Timer Detection Logic
Complete the Timer Countdown Logic

Unit 3: Styling the Guide Page

Create Your First CSS Container Rule
Style Your Main Heading
Style Individual Step Boxes
Layout Navigation Button Controls
Style Navigation Button Elements
Style Keyboard Hint Text
Style Keyboard Key Elements
Style Timer Box Elements

Unit 4: Improving the Guide Page

Adding Keyboard Shortcuts for Navigation
Adding Recipe Rating Form Structure
Styling the Star Rating System
Making Stars Clickable for Ratings
Adding Hover Effects to Stars
Submitting Ratings to the Server

Reviews

Start your review of Creating the Step-by-Step Cooking Guide Page