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

CodeSignal

Creating an Interactive Cooking Helper Landing Page with Angular

via CodeSignal

Go to class Write review

Overview

Build a dynamic landing page where users can search recipes by ingredients, explore popular options, or try a random recipe.

Syllabus

  • Unit 1: Connecting Angular to Backend
    • Defining Recipe Data Models in TypeScript
    • Expanding Recipe Data Models in TypeScript
    • Setting Up the API Service Foundation
    • Implementing Recipe Search API Method
    • Adding Popular and Random Recipe Methods
    • Fetching Recipe Details and Cooking Steps
    • Completing the Recipe Rating Submission Method
  • Unit 2: Building the Landing Page
    • Connecting the Home Page Route
    • Building the Recipe Search Form
    • Displaying Search Errors in Angular
    • Displaying Search Results Section Conditionally
    • Displaying Recipe Search Results with Angular
    • Adding Popular Recipes Section Structure
    • Displaying Popular Recipes with Angular Loop
    • Adding Random Recipe Feature Section
  • Unit 3: Making Pages Interactive
    • Implementing Recipe Search with Angular
    • Loading Popular Recipes on Page Load
    • Implementing the Random Recipe Feature
  • Unit 4: Styling the Landing Page
    • Adding Space Between Page Sections
    • Styling the Search Form Section
    • Styling the Search Input Field
    • Styling the Search Button Element
    • Adding Interactive Button States with CSS
    • Styling Recipe Lists for Clean Display
    • Styling Recipe Lists and Random Results
    • Styling Error Messages for User Feedback

Reviews

Start your review of Creating an Interactive Cooking Helper Landing Page with Angular

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.