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 in Angular

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: Guided Cooking Page Structure

Adding the Guide Page Route
Creating the Guide Page Foundation
Building the Step Navigation Interface
Adding User Feedback to Guide Interface
Adding Timer and Keyboard Hints

Unit 2: Making the Guide Interactive

Implementing the Guide Component Constructor
Implementing Step Navigation in Angular
Adding Voice to Recipe Steps
Loading Recipe Steps and Triggering Effects
Implementing Timers and Cleanup Logic

Unit 3: Component Styling Essentials

Centering the Cooking Guide Container
Adding Space Below the Recipe Heading
Styling the Step Box Container
Laying Out the Navigation Controls
Styling the Navigation Button Controls
Styling Keyboard Hints for Users
Styling the Timer Display Box
Styling Error Messages for User Feedback

Unit 4: Enhancing the Guide Page

Adding Keyboard Shortcuts to Recipe Guide
Adding Recipe Rating Form Structure
Styling the Recipe Rating Form
Implementing Recipe Rating Star Interactions

Reviews

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